ixd (interaction design) checklist - myplanet digital

5
4/9/2014 IxD (Interaction Design) Checklist - Myplanet Digital http://ixdchecklist.com/ 1/5 IXD CHECKLIST 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

Upload: martyn13

Post on 19-Jul-2016

214 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: IxD (Interaction Design) Checklist - Myplanet Digital

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 willappear below whereas, if an arrow was pointing to the right, itsuggests 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 UIicons for faster recognition (http://boxesandarrows.com/optimizing-ui-icons-for-faster-recognition/)

A�ordance

Page 2: IxD (Interaction Design) Checklist - Myplanet Digital

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: Amazon’s checkout ow.

Optimize symbols for fastest recognition.

Things to consider: Are the icons used 'iconic' or 'symbolic'? If they aresymbolic, are they new concepts that need to be learned and if so, doesit slow down recognition?

Do not represent multiple actions with similar symbols.

Example: Save action with a ‘star’ icon and Like action with a ‘thumbsup’ icon.

Feedback

Simplicity

Page 3: IxD (Interaction Design) Checklist - Myplanet Digital

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 thesystem.

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

Page 4: IxD (Interaction Design) Checklist - Myplanet Digital

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

http://ixdchecklist.com/ 4/5

Reduce the need for recall of information by combining symbolism andlanguage.

Things to consider: Recall of information is faster when icons andlabels are used in conjunction. Refer to Bill Moggridge’s designing withthe 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 theinterface.

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 webapplication.

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

Page 5: IxD (Interaction Design) Checklist - Myplanet Digital

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

http://ixdchecklist.com/ 5/5

“Usable by all intended users, despite handicap, access device, orenvironmental conditions.”

Symbol/control must meet minimum size, space, and contrastrequirements.

Things to consider: Icon must be at least 16px to ensure minimumreadability. "Apple recommends a minimum target size of 44 pixelswide 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, sizeand color.

Things to consider: Elements with similar shape, size, colour, will causea 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 (18inches away from screen) and mobile screen (16 inches away fromscreen)? 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 moreinformation, please visit the W3 Accessibility Standards(http://www.w3.org/standards/webdesign/accessibility).

Accessibility