Jakob Nielsen's Heuristics: Visibility of System Status PDF

1 Jakob’s Heuristic Visibility of System Status Definition The design should 1 always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time....

1 Jakob’s Heuristic Visibility of System Status Definition The design should 1 always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. 1 Knowing what the ∙ Tip: Communicate clearly 1 “You Are Here” maps current system status to users what the system’s Interactive mall maps have to show is can help users learn state is — no action with people where they currently are, to help the outcome of their consequences to users them understand where to go next. prior interactions and should be taken without 2 Checkout flow determine next steps. informing them. Multistep processes show users which ∙ Tip: Present feedback to the steps they’ve completed, they’re currently Predictible working on, and what comes next. user as quickly as possible. interactions create trust in the product 3 Phone tap ∙ Tip: Build trust through as well as the brand. Touchscreen UIs need to reassure users open and continuous that their taps have an effect — often communication. through visual change or haptic feedback. 2 3 Info Shipping Payment Review $43.23 Pay now www.nngroup.com/articles/visibility-system-status/ 2 Jakob’s Heuristic Match between System and the Real World Definition The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order. 1 The language you ∙ Tip: Ensure users can 1 Stovetop controls should use depends understand meaning When stovetop controls match the layout very much on your without having to go look of heating elements, users can quickly specific users. up a word’s definition. understand which control maps to each heating element. ∙ Tip: Never assume your 2 “Car” vs. “automobile” understanding of words or If users think about this object as a concepts will match those “car,” use that as the label instead. of your users. 33 Shopping cart icon ∙ Tip: User research will help A shopping cart icon is easily recognizable you uncover your users' because that feature serves the same familiar terminology, as purpose as its real-life counterpart. well as their mental models around important concepts. 3 2 Shopping Cart Car Automobile 2 Check Out www.nngroup.com/articles/match-system-real-world/ 3 Jakob’s Heuristic User Control and Freedom Definition Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an 1 extended process. When it's easy for ∙ Tip: Support Undo 1 Exit sign people to back out and Redo. Digital spaces need quick “emergency” of a process or undo exits, just like physical spaces do. ∙ Tip: Show a clear way to an action, it fosters exit the current interaction, 2 Undo and redo a sense of freedom like a "Cancel" button. These functions give users freedom and confidence. because they don’t have worry about their ∙ Tip: Make sure the exit actions — everything is easily reversible. Exits allow users to is clearly labeled and remain in control of discoverable. 3 Cancel button the system and Users shouldn’t have to commit to a avoid getting stuck process once it’s started — they should and feeling be able to easily cancel and abandon. frustrated. Untitled document 2 Undo Redo 3 Delete Photo Cancel www.nngroup.com/articles/user-control-and-freedom 4 Jakob’s Heuristic Consistency and Standards Definition Users should not have CHECK IN to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions. 1 Jakob's Law states ∙ Tip: Improve learnability 1 Check-in counter that people spend by maintaining both types Check-in counters are usually located at most of their time on of consistency: internal the front of hotels. This consistency meets products other than and external. customers’ expectations. yours. Failing to ∙ Tip: Maintain consistency 2 Design system maintain consistency Using elements from the same design within a single product or may increase the system across the product lines lowers a family of products users' cognitive load the learning curve of users. (internal consistency). by forcing them to learn something new. 3 Notifications ∙ Tip: Follow established A standardized notification design industry conventions provides a similar but distinguishable (external consistency). look and feel for different app pop-ups. Colors 2 #F0557B #4F2330 #FFFFFF 3 12:34 #D51D50 #35151D Typography Aa Aa Aa Aa Light Reg Med Bold Components Button Button Button Button www.nngroup.com/articles/consistency-and-standards/ 5 Jakob’s Heuristic Error Prevention Definition Good error messages are important, but the best designs carefully prevent problems from occuring in the first place. Either eliminate error-prone conditions, 1 or check for them and present users with a confirmation option before they commit to the action. There are two types ∙ Tip: Prioritize your effort: 1 Guard rails of errors: slips and Prevent high-cost errors Guard rails on curvy mountain roads mistakes. first, then little frustrations. prevent drivers from falling off of cliffs. Slips are unconscious ∙ Tip: Avoid slips by providing 2 Airline confirmation errors caused by helpful constraints and The confirmation page before checking inattention. good defaults. out on airline websites gives users another chance to review the flight details. Mistakes are conscious ∙ Tip: Prevent mistakes by errors based on a removing memory burdens, 3 Date selection on calendar mismatch between the supporting undo, and Offer good defaults and set boundaries user’s mental model warning your users. when people book services by dates. Grey out unavailable options. and the design. 2 Review Flights and Pay 3 Nov 17 – Nov 26 7 17 18 19 20 21 22 23 24 25 26 Confirm Booking www.nngroup.com/articles/slips/ 6 Jakob’s Heuristic Recognition Rather Than Recall Definition Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design should be visible or easily retrievable when needed. 1 Humans have limited ∙ Tip: Let people recognize 1 Lisbon short-term memories. information in the People are more likely to correctly answer Interfaces that interface, rather than the question “Is Lisbon the capital of promote recognition having to remember Portugal?” rather than “What’s the capital reduce the amount of (“recall”) it. of Portugal?” cognitive effort 2 Comparison table ∙ Tip: Offer help in-context, required from users. Comparison tables list key differences so instead of giving users a that users don’t need to remember them long tutorial to memorize. to make comparisons. ∙ Tip: Reduce the 3 Search information that users Search queries are presented together have to remember. with the results as a reference. iPad Pro 12.9-in. (4th gen) iPad Air (3rd gen) iPad (7th gen) The Lion King 2 3 Search results www.nngroup.com/articles/recognition-and-recall/ 7 Jakob’s Heuristic Flexibility and Efficiency of Use Definition Shortcuts — hidden by novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to 1 tailor frequent actions. Flexible processes ∙ Tip: Provide accelerators 1 Shortcuts can be carried out in like keyboard shortcuts and Regular routes are listed on maps, but different ways, so touch gestures. locals with more knowledge of the area that people can pick can take shortcuts. ∙ Tip: Provide personalization whichever method 2 Keyboard shortcut by tailoring content and works for them. Keyboard shortcuts for complex products functionality for individual users. can help expert users finish their tasks more efficiently. ∙ Tip: Allow for customization, 3 Tap to like so users can make Social apps allow two ways to like posts. selections about how they Experienced users can tap to like because want the product to work. it speeds up their browsing. 3 2 C V www.nngroup.com/articles/flexibility-efficiency-heuristic