|
@@ -0,0 +1,107 @@
|
|
|
|
|
+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
|
