4/9/2014 IxD (Interaction Design) Checklist - Myplanet Digital

http://ixdchecklist.com/ 1/5
I X D C H E C K L I S T
Filter by: All
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 (http://boxesandarrows.com/optimizing-ui-
icons-for-faster-recognition/)
Aordance
4/9/2014 IxD (Interaction Design) Checklist - Myplanet Digital
http://ixdchecklist.com/ 2/5
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.
As simple as possible and task focused.
Each step in a sequenced ow is apparent to the user.
Example: Amazons checkout ow.
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.
Feedback
Simplicity
4/9/2014 IxD (Interaction Design) Checklist - Myplanet Digital
http://ixdchecklist.com/ 3/5
Content organized sensibly.
The depth of the information architecture is consistent throughout the
system.
Things to consider: Deep information architectures (Example: Flickr
(http://ickr.com)) vs. shallow information architectures (Example:
Instagram (http://instagram.com))
Information hierarchy and content structure is organized clearly.
Measure length optimizes readability.
Source: The Elements of Typographic Style Applied to the Web
(http://webtypography.net/toc/)
Similarity for predictability.
Structure
Consistency
4/9/2014 IxD (Interaction Design) Checklist - Myplanet Digital
http://ixdchecklist.com/ 4/5
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 Moggridges designing with
the mind in mind.
Motion and animation patterns are consistent throughout the system.
Example: Swipe gesture triggers a page ip in Flipboard
(https://ipboard.com/).
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.
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.
Tolerance
4/9/2014 IxD (Interaction Design) Checklist - Myplanet Digital
http://ixdchecklist.com/ 5/5
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
(http://www.lukew.com/ff/entry.asp?1085)).
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 (http://contrastchecker.com/)
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 (http://sizecalc.com) and Type Scale
(http://type-scale.com/)
Ensure there are fallbacks in place for accessibility purposes.
Things to consider: Alternative text for images, fallback text for icons
(Bulletproof Accessible Icon Fonts
(http://lamentgroup.com/lab/bulletproof_icon_fonts)) and for more
information, please visit the W3 Accessibility Standards
(http://www.w3.org/standards/webdesign/accessibility).
Accessibility