front__coursera-responsive-design/notes2.md

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

• Skipping to simple conclusions, you get to the "standard" layout mentioned at http://www.novolume.co.uk/blog/all-websites-look-the-same/
• http://darkpatterns.org

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