CodePen - UX Checklist UX Checklist UX Checklist Filter by: All Interface Iconography Typography Interaction Navigation 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. Read more Interaction Iconography Interface Navigation There is a clear metaphor between the control and the real world. Example: Button affords push, digitally and physically. Read more Interaction Interface The function of the control is easily determined at a glance. Interaction Interface 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 Read more Iconography Feedback Should be clear what happened/what is happening. All element states are illustrated clearly and effectively. Iconography Interactive Interface Current state of the system is easily understood by the user. Iconography Interaction Provide feedback/reinforcement when a task is completed. User Satisfaction Simplicity As simple as possible and task focused. Each step in a sequenced flow is apparent to the user. Example: Amazon’s checkout flow. Read more Navigation 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? Read more Iconography Do not represent multiple actions with similar symbols. Example: Save action with a ‘star’ icon and Like action with a ‘thumbs up’ icon. Read more Iconography Structure Content organized 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) Read more System Design Interaction Information hierarchy and content structure is organized clearly. Typography Navigation Content Strategy Measure length optimizes readability. Source: The Elements of Typographic Style Applied to the Web Read more Typography 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. Read more Iconography Motion and animation patterns are consistent throughout the system. Example: Swipe gesture triggers a page flip in Flipboard. Read more Navigation Interactive Leverage existing elements to minimize inconsistency. Example: Styling of cancel button is the same throughout the interface. Read more Interface Location of the elements are consistent throughout the system. Example: A toolbar is located at the top of every page. Read more Interface Navigation Information Architecture Language use is clear and consistent throughout the system. Typography Symbols should be contextual to the system. Example: Automotive speedometer activity icon in a medical web application. Read more Iconography Interface Language clearly represents corresponding symbol. Example: Trash can icon is labeled "trash" instead of delete. Read more Iconography Interface Tolerance Prevent errors, help recovery. Provide easy reversal of actions. Example: Breadcrumbs, back buttons, swipe gestures. Read more Navigation Interaction System Design Users must be able to recognize, diagnose, and recover from errors. Navigation Interface Help and support needs to be readily available for the user. Navigation System Design 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). Read more Iconography 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. Read more Iconography Contrast ratios are accessible when using multiple colours. Contrast Checker Read more Color 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 Read more Typography 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. Read more Iconography Navigation Interface Your checklist has been reset. Your checklist has been filtered.