notes2.md 4.2 KB

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
    • Breadcrumbs

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