UX/UI design basics

UI/UX 101

• Where am I?
  Always indicate active navigation states, breadcrumbs, etc.
• What do I need to complete?
  Dashboard overview, notifications, alerts, comments and a list of tasks to complete and their status.
• What am I looking at?
  Headings, introduction text, graph information (titles, labels, keys) and use of plain concise English to reduce jargon and uncertainty.
• What can I do here?
  What elements can I interact with (aka visual clues and signifiers)?
• Where do I go to find help?
  Search functionality, FAQs, training material, support documents and support contact details.

Intent vs outcome

• Intent: What that person is coming here to do
• Outcome: What is the person expecting when they’re done doing that thing. Match or exceed their expectations.

The usability trinity

• User
• Goal
• Environment

Three measures of usability

1. Speed of use
2. User satisfaction
3. Task completion

The six rules of usability

1. The design is based upon an explicit understanding of users, tasks and environments
2. Users are involved throughout design and development
3. The design is driven and refined by user-centred evaluation
4. The process is iterative
5. The design addresses the whole user experience
6. The design team includes multidisciplinary skills and perspectives.

Context of use

A description of the users, tasks, equipment (hardware, software and materials), and the physical and social environments in which a product is used.

Observations

What people say isn’t as useful as what people do.

How to test a user story

• Is it something a real user would say?
• Does it help you design and prioritise?
• Does it unnecessarily constrain possible solutions?
• Do you have good evidence?

Usability

• Effectiveness: Completion of a task
• Efficiency: Time taken to complete a task
• Satisfaction: The outcome of that task

Information architecture (IA)

Connecting people to the content they are looking for.

• Classification & hierarchy
• Labels and tagging
• Navigation & wayfinding
• Search

Organising information (LATCH)

• Location
• Alphabet
• Time
• Category
• Hierarchy

Interaction Design

The process of identifying design solutions and creating prototype user interfaces.

Affordances vs signifiers

• Affordances: The physical properties of an object that suggest to people how the object can be interacted with.
• Signifiers: The virtual properties on an object.

Usability testing

• Formative usability test: A form of iterative usability testing that aims to find problems with a system so they can be fixed.
• Summative usability testing: A form of usability testing that aims to measure usability metrics such as effectiveness, efficiency and satisfaction.