Interaction Design & Heuristics of Usability

VISIBILITY OF SYSTEM STATUS

Example: Gmail Inbox

Description: The message from Gmail gives the user feedback as to what is happening. In this case Gmail is alerting the user that a conversation has been moved to the trash. The alert also gives them the option to undo if it was a mistake.

MATCH BETWEEN SYSTEM AND THE REAL WORLD

Example: Porsche.com

Description: Porsche uses phrases and icons that are clear in their meaning. They also use images of their vehicles, which helps the user to quickly recognize the model they may be looking for.

USER CONTROL AND FREEDOM

Example: Lynda.com

Description: Lynda.com’s Course History allows the user to review the courses they have taken and pick up where they left off if they could not finish a specific lesson.

CONSISTENCY AND STANDARDS

Example: Adobe

Description: Users are familiar with associating certain icons with actions. In this example Adobe uses a lock icon to cue the user to log in to their account. By using icons the users are familiar with it helps them complete their desired task.

ERROR PREVENTION

Example: Behance

Description: Behance makes the user confirm that they want to delete a project before completely deleting the entire project. This helps the users in the event that they made a mistake and gives them the option to correct the mistake.

RECOGNITION RATHER THAN RECALL

Example: Nordstrom

Description: Nordstrom.com presents the user with items that are frequently bought together helping the user to find other items that may go with an item they are all ready purchasing with out having to try and figure out the style they are trying to achieve.

FLEXIBILITY AND EFFICIENCY OF USE

Example: Lynda.com

Description: Lynda.com allows the user to make playlists so they can collect a series of videos or courses that they may want to learn.

AESTHETIC AND MINIMALIST DESIGN

Example: Google

Description: With a quick glance the user can recognize the search input field and understand what they need to do in order to search. The design approach is clean and simple with an ample amount of white space.

HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS

Example: Bank of America Log In / Error Message

Description: Bank of America helps the user by alerting them that there is an issue with the username or password. Then it tries to direct them to a solution by presenting an option to recover user name or password.

HELP AND DOCUMENTATION

Example: Google Material Design Documentation

Description: Google has provided a comprehensive document that shows how to use material design and apply the principles.