2.1.1
- Usability: objective = is the site efficient, memorable, .learnable
- UX: subjective = how the user feels about the site, happy, frustrated, bored
Good usability + good design = good UX
Design for identified/profiled users. There may be more than one type of them.
UX
- Interface design
- Usability
- Content
- Structure
More recent term covering all aspects of web design, with a specific focus on what it is like to be a user of the site.
2.1.2 Navigation
- 2 questions
- where am I ?
- where can I go ?
- 3 kinds
- Hierarchical
- Global: top level sections
- Local: within the page
- Cultural : choose the right one for a given culture.
- As a user, know where you are
2.1.3 What is here ?
Wireframe typique:
+-----------------------------------+
| Where am I | <----------- title
+-----------------------------------+
+-----------------------------+
| Where can I go ? | <----------------- nav tabs / pills
+-----------------------------+
+---------+ +---------+ +---------+ +---------+
| What is | | What is | | What is | | What is | <- content grid
| here? | | here? | | here? | | here? |
+---------+ +---------+ +---------+ +---------+
Beyond the F shape, eye tracking studies show that users also look for content that has white space around it:
space makes it easier to find the page elements.
2.1.4 Accessibility
- Accessibility about all kinds of disabilities, including visual, auditory (multimedia),
physical (interaction), speech (voice recognition), neurological
- WAI @ W3C
- Testing: simple method = use a text browser, e.g. extension Textize, ChromeVox
- Simple mechanisms:
- images: alt text,
- text: headings, color contrast, resizable text
- interaction: keyboard navigation
- multimedia: captions
Not only do accessible sites/apps provide access to disabled users, they're also easier for everyone.
2.1.5 Guidelines for design
- Cognition / evidence principles = Edward Tufte: from the result
- What is the information ?
- How do we make the information clear ?
- User-centric (centered) approach: from the audience
- Who are our users ?
- What do they want ?
- How do they get the information ?
- UX must be consistent, it's what makes things understandable.
- The two approaches are sometimes in conflict, but they agree that UX is first:
- before any code is written
- consistent
- WTF ? (What's This For ?) (sic)
- You can judge a good design, by how long it takes to understand what it is about
- most users visit a site looking for content
- as the author, we should understand and clearly signpost the content
- If you're looking at a site/app and are not sure what it means, it is a problem for the site
- it may look good, but it's useless
- Obfuscation vs simplicity
- Tufte: the worst kind of designs are those that look like corporate annual reports:
- confusing content
- padded by generic imagery
- not designed to be read by anyone
- If there's a lot of text, but it's hard to infer any meaning from scanning it, maybe it's just padding.
- Simpler sites are better:
- What is it ? A news item, a product, a download...
- Where can I get it ? => minimum number of clicks to get to content
- Why is this here ?
- If it's not helping users to do the above, cut it out.
- Including colour! Why are you using colour ? "It's nice" is not a reason.
- Colors bring confusion: use them sparingly.
2.1.6 Design examples
Quiz
What might fit in the cognition/evidence-based approach ?
Telling where they are |
Telling where they can go |
Presenting clearly |
Using eye tracking |
Result |
0 |
0 |
1 |
0 |
|
0 |
0 |
1 |
1 |
Yes |
1 |
1 |
1 |
0 |
|
1 |
1 |
1 |
1 |
|