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.