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 |