8/9/2018 IxD (Interaction Design) Checklist - Myplanet Digital

IXD CHECKLIST

Filter by: All

A ordance
“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/)

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.

http://ixdchecklist.com/ 1/4
8/9/2018 IxD (Interaction Design) Checklist - Myplanet Digital

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 organized sensibly.”

The depth of the information architecture is consistent throughout the system.

Things to consider: Deep information architectures (Example: Flickr (http://flickr.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/)

http://ixdchecklist.com/ 2/4
8/9/2018 IxD (Interaction Design) Checklist - Myplanet Digital

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 (https://flipboard.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.

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.

http://ixdchecklist.com/ 3/4
8/9/2018 IxD (Interaction Design) Checklist - Myplanet Digital

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
(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://filamentgroup.com/lab/bulletproof_icon_fonts)) and for more information, please visit the W3
Accessibility Standards (http://www.w3.org/standards/webdesign/accessibility).

http://ixdchecklist.com/ 4/4