Lecture Date: Wednesday, October 24
Touch screen devices have some inherent issues when we consider people that may have limited sight or ability to touch the screen. How do we assist those people? What do the manufacturers do?
The criteria we look at for mobile is very similar to that of other mediums (desktop, laptop, web) because these realms crossover a great deal now:
- Web sites often have a responsive design that changes for a mobile screen
- Laptops now have touch screens
- Laptops can run mobile OS
- Some mobile devices have external input devices
To consider accessibility, we examine it in terms of four main principles:
- Perceivable - Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)
- Operable - User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
- Understandable - Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
- Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
- Screen size - Consider minimizing the amount of information on a screen. If you have a form or other input, position items vertically instead of horizontally.
- Magnification - What will your app do if is zoomed it an the OS level? Can you reposition information? Make sure to use default OS settings for text sizes!
- Contrast - Provide the capability to differentiate colors or ensure a proper contrast level.
- Keyboard controls - Most mobile OSes allow for external keyboards, so make sure to allow for this as well. Don't do any extra on screen keyboards that are not OS related.
- Touch target size and spacing - Space touch spots a reasonable distance apart. Specs recommend at least 9mm x 9mm touch targets.
- Touch gestures - Allow for alternate mechanisms for touch gestures. Don't add in any excessively difficult gestures.
- Button locations - Optimize for one hand, but consider both.
- Orientation support - Some devices may be mounted due to the inability to hold the device. Support both orientation layouts.
- Consistent design - All of your pages should look the same / follow the same design layout with consistent font sizing, buttons, etc.
- "Above the fold" - Place important items at the top of a page, before the user has to scroll to get to them.
- Group elements that perform the same action - Keep all your controls together to make it easier for screen readers, etc.
- Indicate actionable items - Provide clear indication what can be interacted with (i.e. coloration, icons, location, etc)
- Virtual keyboard specialization - Always set a keyboard to the most logical layout for the data coming in.
- Easy data entry - Use specific widgets for data entry instead of text when appropriate.
- Follow platform guidelines - Apps should look and play nice together.
Let's design a new version of our previous example apps!