I run this checklist to validate interface design. Thanks to ixdchecklist.
Affordance. Control suggests how to use it.
- The controls map to the result in a simple and logical way. Example: Dropdown arrow is pointing down suggests something will appear below whereas, if an arrow was pointing to the right, it suggests something will appear to the right.
- There is a clear metaphor between the control and the real world. Example: Button affords push, digitally and physically.
- The function of the control is easily determined at a glance.
- Symbolic icons need to be clear for new users. Example: Symbolic Icons = an “x” button to indicate close, Iconic Icons = an icon of a “printer” to represent print. Learn more: Optimizing UI icons for faster recognition
Feedback. Should be clear what happened/what is happening.
- All element states are illustrated clearly and effectively.
- Current state of the system is easily understood by the user.
- Provide feedback/reinforcement when a task is completed.
Simplicity. As simple as possible and task focused.
- Each step in a sequenced flow is apparent to the user. Example: Amazon’s checkout flow.
- Optimize symbols for fastest recognition. Things to consider: Are the icons used ‘iconic’ or ‘symbolic’? If they are symbolic, are they new concepts that need to be learned and if so, does it slow down recognition?
- Do not represent multiple actions with similar symbols. Example: Save action with a ‘star’ icon and Like action with a ‘thumbs up’ icon.
Structure. Content organised sensibly.
The depth of the information architecture is consistent throughout the system. Things to consider: Deep information architectures (Example: Flickr) vs. shallow information architectures (Example: Instagram)
Information hierarchy and content structure is organized clearly.
Measure length optimizes readability. Source: The Elements of Typographic Style Applied to the Web
Consistency. Similarity for predictability.
- Reduce the need for recall of information by combining symbolism and language. Things to consider: Recall of information is faster when icons and labels are used in conjunction. Refer to Bill Moggridge’s designing with the mind in mind.
- Motion and animation patterns are consistent throughout the system. Example: Swipe gesture triggers a page flip in Flipboard.
- Leverage existing elements to minimize inconsistency. Example: Styling of cancel button is the same throughout the interface.
- Location of the elements are consistent throughout the system. Example: A toolbar is located at the top of every page.
- Language use is clear and consistent throughout the system.
- Symbols should be contextual to the system. Example: Automotive speedometer activity icon in a medical web application.
- Language clearly represents corresponding symbol. Example: Trash can icon is labeled “trash” instead of delete.
Tolerance. Prevent errors, help recovery.
- Provide easy reversal of actions. Example: Breadcrumbs, back buttons, swipe gestures.
- Users must be able to recognize, diagnose, and recover from errors.
- Help and support needs to be readily available for the user.
Accessibility. Usable by all intended users, despite handicap, access device, or environmental conditions.
- Symbol/control must meet minimum size, space, and contrast requirements. Things to consider: Icon must be at least 16px to ensure minimum readability. “Apple recommends a minimum target size of 44 pixels wide 44 pixels tall” (Touch Target Sizes).
- Adjust elements in close proximity of each other with similar shape, size and color. Things to consider: Elements with similar shape, size, colour, will cause a delay in response.
- Contrast ratios are accessible when using multiple colours. Contrast Checker
- Typography is optimal for reading in any given environment/context. Things to consider: desktop (20-24 inches away from screen), tablet (18 inches away from screen) and mobile screen (16 inches away from screen)? Size Calculator and Type Scale
- Ensure there are fallbacks in place for accessibility purposes. Things to consider: Alternative text for images, fallback text for icons (Bulletproof Accessible Icon Fonts) and for more information, please visit the W3 Accessibility Standards.