Today I was asked by a client about mobile UX design as it relates to phone orientation. The app in question didn’t break the WCAG Guidelines (especially 1.3.4) as it was still functional in both portrait and landscape modes. It is a good app though, well designed for enjoyable use in portrait mode. When flipped to landscape mode it was much less appealing as it had not been designed to be optimised in this orientation. It was a classic case of technically accessible but not delightfully inclusive.
I had a chat to my colleagues here at Open and shot off a response, then thought that these perspectives may be of interest to others, so we have added it here for your reading pleasure. Enjoy!
How can design for multiple orientation modes impact users?
In terms of specific access needs, designing for both landscape and portrait orientation is particularly important to users who,
- have sight loss and use significant magnification
- have dexterity/mobility limitations and use a phone or tablet mount fixed into a single orientation, such as on a wheelchair (in this case in landscape mode)
- read or learn differently and find following text or designs more difficult when spacing, interaction or text alignment isn’t optimised for the orientation used
For most apps (other than video or game apps) portrait orientation tends to be the default mode that designers work on first. A really good app will not just be usable, but optimised with appropriate spacings, interaction layout and alignment in both modes. For the three user groups noted, offering a UX that isn’t optimised for landscape orientation more significantly impacts their usability to the point that they may find it more difficult, frustrating, or even unusable. This is a great example of where standards-based accessibility and user journey based inclusion can diverge.
In addition to users with permanent access needs, poorly designed landscape mode can also exclude users who are situationally or temporarily impaired, or just prefer landscape orientation over portrait. Some examples are users who,
- are watching a video or playing a game in landscape orientation, quickly flick to an app to do something, and not change the orientation. I have seen this on a train when someone is holding on with one hand watching their favourite episode of Lucifer/House/Suitable Boy…and using a thumb to interact one-handedly while they check something such as flight times quickly without easily being able to swap orientation.
- have their phone resting on a book or similar and oriented to landscape mode and using it one-handedly. I have seen my kids do this at the table when having a snack (notmy preferred habit in the house and not when we are all at it!)
- use a phone mount for other reasons, such as in a car or as in the image here, on a guitar
- choose this mode as their standard orientation, as that is the way they prefer to read and interact with content.
The requirements for alternative orientation by need
For our thoughts here we focus on the inclusive user experience rather than accessibility audit success / failure, so have based out comments on journey based friction or barriers that we have seen in usability testing.
1. Magnification users
Does the content display effectively at the magnification used by people with low vision? Can they find the key content, know what may be off screen and interact with it as needed? Sometimes the design breaks when significantly magnified in one orientation, with some content overlapping or impinging on another. Some magnification users prefer L-R preference (left content shown first and then scrolling to access anything to the right. Others prefer Right to Left. Does it work in both directions without any constraint or significant user experience compromise?
2. Phone mount users, fixed orientation
Many people who use phone mounts have significant mobility and/or dexterity restrictions that can make it more difficult for them to interact with phone easily. They may use one part of a hand such as a little finger knuckle (one of our panel uses ythis as his preferred tactile interaction) or additional assistive technologies or devices such as a mouth stick or wrist-mounted pointer. They may also interact in a more standard way using a pointer finger but this may require a lot more concentration and effort to do so due to a physical disability or pain.
For this group they will not be able to flick from one orientation to another easily so it is important to ensure the experience is equivalent between the two format options. In addition, it is worth considering the amount of scrolling required and trying to minimise this as it may cause difficulty, pain, or take a lot more time than a user without such needs.
3. Dyslexia and different learning capabilities
Dyslexic users often use the edge of the screen as an easy point of alignment for reading text. In landscape orientation, there is more space left – right allowing text lines to be longer. This can be harder for some dyslexic users to read as they have to hold their eyes on the line for longer without realignment against a set edge. This is even harder if the content is centre aligned with space on the left and right around it rather than left-aligned. One line of content with a very short sentence or phrase may be easy enough to read, but a block of text will cause more people more difficulty.
In addition to dyslexic users, people who learn differently often scan and skip difficult content or poorly paid out elements. Clear well designed and laid out content blocks and straightforward alignment from information to interactions is particularly important for this group. If this is compromised through poor spacing, large amounts of scrolling or odd placement of calls to action etc., this group will probably find the experience much more difficult. They may abandon it if not critical to them or just find it difficult and dislike it.
4. Mainstream users who benefit from design optimised for both orientations
In addition to people who have permanent access needs, many non-disabled users will also benefit from specifically checking and designing an app to work well in both orientations. I noted some reasons above in the introduction. By making your app look and work well in both directions many users will appreaciate the consideration as they choose to flip their device and the experience isn’t reduced in any way.
Key considerations to design well for both orientations
- Design from the beginning with two formats in mind.
- Test the design and developed product as you go in both formats, ensuring priorities, order, alignment, and interactions work well in each.
- Do a WCAG audit and check that you meet guidelines, however know that this is not sufficient to know that the app works well for all disabled users. An auditor may not check the non-orientation specific guidelines in both directions unless specifically asked. This takes a lot more time. This is where inclusive usability testing can more practically test the impact on actual disabled users.
- Specifically test the app with disabled users through the design and development process. A few testers more often is better than one major effort at any time. One day (or even a part of a day) of inclusive usability testing at key points in the design will likely identify many accessibility and usability issues that neither an accessibility audit or more standard users involved in usability testing will expose. Recruit users with the above-mentioned needs and see how they manage the core journeys. Make sure some preference landscape orientation or complete journeys one each if relevant to their standard use.
Are you interested in knowing more about inclusive UX?
If you would like to understand how to design user experiences that are inclusive and more delightful to all users, including those with disabilities please contact us at firstname.lastname@example.org. We provide inclusive UX training and usability testing with disabled and older consumers to both proactively and retro-actively improve your digital experiences. The work we were doing that triggered this blog was a mix of both, working collaboratively with the audit partner and design team to ensure that issues were picked up through the design and development process.
Mobile UX London is coming. Are you signed up?
If you are a keen UX-er or wishing to become one, Mobile UX London is online 9 – 11 Sept 2020! There are still a few days to get signed up, clear your diary and get along to some of the excellent talks this year.
Take care, keep well and enjoy designing great experiences for all!