• jollyyau

Week 5: Usability and Sitemaps

HOW do we improve usability?

  • Card sorting 

  • Tree testing (ask the participant to find a particular content from a sitemap) 

  • User research (interviews, focus groups, surveys, etc.) 

  • Usability testing (test & evaluate the products on its real users) 
Using prototypes / paper prototypes 

  • Usability inspection (test & evaluate the products with experts) etc.

WHEN to work with usability?

  • Before starting a new design, test the old design.

  • Also, test your competitor’s design.

  • Conduct user researches.

  • Test with paper prototype of one or more new design ideas. (less time / cost)

  • Refine the idea through multiple stages (from low-fidelity prototyping to high-fidelity representations), perform testing on each stage.

  • Inspect the design relative to established usability guidelines whether from your own earlier studies or published research.

  • Once you implemented final design, test again.

A More Usable Approach to Things!

The 5 quality components of usability

  1. Learnability

  2. Efficiency

  3. Memorability

  4. Errors

  5. Satisfaction

1. Learnability!

“How easy it is for the user to accomplish the necessary task when they encounter the design the first time?”

Bad door

Good door

2. Efficiency

“How quickly can they perform tasks (after learning stage) ?”

  • Hierarchy: organizing of information so that it is simple for visualizing and understanding complexity (tree, nested, stair models).

  • Filtering: People tend to filter information. Try to draw attention to what’s important.

  • Affordance: characteristics of an object / environment give hints to its function.

  • Performance Load: the more complicated the task is, the less likely it will be accomplished successfully.

3. Memorability

“How easily can they reestablish proficiency after a period not using the design?”

Forgetfulness: People will ALWAYS (unconsciously) forget.

4. Errors

“How often do users make errors?”

“How severe these errors are?”

“How easy can they recover from such errors?

Error happens: People always make mistakes.

Error tolerance: Maximize permissible errors – don’t make users feel bad about errors.

5. Satisfaction

“How pleasant is it to use the design?”

Aesthetic: Aesthetic design are perceived as more easier to use.

Choice = Control: People love to have choices, they’ll be unhappy if you take choices away.

Preference > Performance: Designs with optimal performance are NOT necessary desirable.

Good satisfaction

Bad satisfaction

Bringing usability in design


  • Group information if possible

  • Don’t have way too many items

  • Increase responsiveness

  • Pay attention to language



  • The design of the element suggests its purpose

Text links

  • Buttons should have reactions and provide screen feedback to users intuitively


  • Highlighting links makes it more skim-readable.

  • Use state changes to create visual feedbacks.

Site search

  • Very important for page with huge amount of information.

  • Need to be easy to find.

  • Try to improve search function’s performance (accuracy, suggested terms, extension, etc.)


  • Understand specific form element while designing it.

  • Use examples.

  • Simplify choices if possible (radio buttons, drilldown, etc.).

  • Implement validation & give feedback after submission.

UI Patterns!

Design patterns are recurring solutions that solve common design problems.

There’s no point re-inventing the calendar every time - so we reuse patterns in UI!

E.g. To allow the user to simply find or submit information based on a date or date range. Solution: calendar picker.

Site maps and user task flows:

Great example!


User task flow and sitemaps!


Before we start creating our prototype flows, we should clearly understand the personas’ motivations and needs. Ask yourself, what drives my personas and what are they trying to accomplish?

From user flow to prototype:

  1. Start a user flow

  2. Articulate your user goals

  3. From there, start with a plain sheet of paper

  4. Create simple workflows that meet the user goal

  5. Change/ revisit on the paper

  6. From there you are ready to enter these into a flow tool such as moqup

How do we create surveys for users?

Try starting from the end - ­what the app is for, and working your way back to define your questions.

Start from the outcome you want to get out of the session.

  • What do you want feedback on?

  • A specific page, a headline, or a button placement?

  • Does your flow between pages make sense?

  • Do people find your tool easy to use?”

Questions should be

  • A) about the design that is being reviewed and

  • B) what the participant thinks about the design.

Try not to ask any questions that are not related to those two things.

User testing again (John Turner, Founder/CEO of UsersThink)

  • What’s your first impression of this page?

  • What didn’t you like about this page? Why?

  • If you could only change one thing about this page, what would you change? Why?

  • What did you like most about this page? Why?

  • Would you recommend this page to a friend if the content was relevant to them? Why or why not?

List those points then, make your way back and define the questions and tasks that go in that direction.



jollyyau.design © 2020

  • LinkedIn - White Circle
  • Facebook - White Circle
  • Instagram - White Circle