A simplified checklist focusing on aspects that are important in the context of mobile applications.
Small screens
- [ ] The amount of content displayed simultaneously on the screen of a mobile device is reasonable
ð¢Â When designing, check your solutions using, for example, Figma preview function on different phones
- [ ] Buttons and interactive elements are large enough to be seen and selected by touch
ð¢Â Remember that the buttons/actions can be easily operated by holding the phone in one hand
- [ ] Buttons and interactive elements have enough inactive space around them so that adjacent interactive elements are not selected by mistake
- [ ] Form fields are located under their labels, not next to them
Simple gestures
- [ ] Touchscreen gestures are easy to perform
â Avoid complicated gestures to interact with the interface
- [ ] Several alternative forms of gestures are available
- [ ] Touch controls activate on release (up event) and not on first touch (down event)
- [ ] The functionality triggered by shaking, tilting or moving the device can be disabled
- [ ] Device motion-triggered functionality may be supported by more typical interface components
Navigation
- [ ] Views have descriptive titles
ð¢Â Think about the headers of the screens and what is the user's path to return to the previous screen and to the main screen, or how to leave the application. Be compatible with Android and iOS system solutions
- [ ] Headings are in the correct reading order and accessible to assistive technologies
- [ ] Menus, controls work with touch and keyboard
- [ ] User interface elements such as images, buttons, and other controls should be appropriately labeled to be recognized by assistive technologies such as iOS Voiceover or Android TalkBack.