www.guerrillaucd.com Guerrilla UCD Webinars Overview William Hudson, User Experience Strategist [email protected] Copyright © 2013 Syntagm Ltd
www.guerrillaucd.com
Guerrilla UCD Webinars Overview
William Hudson, User Experience Strategist [email protected]
Copyright © 2013 Syntagm Ltd
www.guerrillaucd.com
Format & Approximate Timing
• 16:30 Introduction & Boot Camp • 16:36 Strategy Webinars + Q&A • 16:53 Tactics Webinars + Q&A • 17:10 Lean & Agile Webinars + Q&A • 17:27 Final Q&A
Guerrilla UCD Overview 3
www.guerrillaucd.com Guerrilla UCD Overview 6
“The [health]department could have avoided some of the pitfalls and waste if
they had consulted at the start of the process with health professionals.”
– UK Public Accounts Committee
(See bit.ly/nhs-pac)
www.guerrillaucd.com
Guerrilla UCD – The Series
• 16 x 90-minute webinars covering a range of usability, user experience, user-centred design and Agile topics
• Focus is on cost-effective methods through the whole project cycle
• Includes slides and recordings for download
• All resources can be shared within teams
Guerrilla UCD Overview 7
www.guerrillaucd.com
Guerrilla UCD – The Series
• Getting Started – 0. Free Overview (60 min – this one!) – 1. Guerrilla UCD Boot Camp
• Strategy Webinars – 2. Visual Design for Usability – 3. Navigation & Menu Design – 4. Designing for SEO & Accessibility – 5. Human Error, Messages & Feedback – 6. Usability Evaluation
• Tactics Webinars – 7. User-Centred IA with Card Sorting – 8. Dynamic Web Pages: Effective Use of Ajax – 9. Writing Effective Web & Intranet Content – 10. Designing for Advanced Users – 11. Persuasion, Trust and Seduction
Guerrilla UCD Overview 8
www.guerrillaucd.com
Guerrilla UCD – The Series
• Lean & Agile Webinars – 12. Making the Case for UCD in Agile – 13. Integrating UCD & Agile – 14. Agile UX: Users, Personas & Design Maps – 15. Agile UX: Use Cases, Stories & Scenarios – 16. Agile UX: Conceptual Models
Guerrilla UCD Overview 9
www.guerrillaucd.com
Guerrilla UCD Costs
• Most sessions are €52 / £44 / $68
• Get 5 webinars for the price of 4
• Earn free webinars by referring friends and colleagues
Guerrilla UCD Overview 10
www.guerrillaucd.com Guerrilla UCD Overview 11
Just enter your email address on our Special Offers page and share the resulting link (bit.ly/gucd-refer)
www.guerrillaucd.com
1. Guerrilla UCD Boot Camp
• 04-Apr-13 at 16:30 London time (BST) – Benefits of usability and good user
experience – Brief introduction to UCD – The psychologies of interaction, methods and
teams – Principles of interaction (the action cycle) – The empathy gap and empathetic design
Guerrilla UCD Overview 13
www.guerrillaucd.com
Yahoo Groups First Page Footer
Yahoo Groups Second Page Footer
Guerrilla UCD Overview 14
www.guerrillaucd.com Guerrilla UCD Overview 15
This Munich ticket navigator requires intimate knowledge of the local geography and incredible eye sight
www.guerrillaucd.com Guerrilla UCD Overview 16
The Perfect User
Visual acuity of an eagle
Memory of an elephant
Navigation skills of a bat
Stamina of a camel
Dexterity of a monkey
Copyright © Syntagm Ltd – www.syntagm.co.uk
www.guerrillaucd.com Guerrilla UCD Overview 17
Technologists have strong systemizing but reduced empathizing skills
www.guerrillaucd.com
2. Visual Design for Usability
• 11-Apr-13 16:30 London time (BST) – Brief introduction to visual perception – The importance of layout – Grids – Appropriate use of colour, fonts and images – Form design – Page size
Guerrilla UCD Overview 19
www.guerrillaucd.com Guerrilla UCD Overview 20
Focussing on layout – see www.greekthis.com
Guerrilla UCD Overview 21
The challenge of brand colours – see bit.ly/brand-colours
www.guerrillaucd.com
3. Navigation & Menu Design
• 18-Apr-13 16:30 London time (BST) – Designing for users' goals – Terminology and layout of menus – Mega-menus – Addressing accessibility for disabled users – Menu design for mobile devices
Guerrilla UCD Overview 22
www.guerrillaucd.com
Faceted search (bit.ly/faceted-nobel)
Guerrilla UCD Overview 25
www.guerrillaucd.com
4. Designing for SEO & Accessibility
• 25-Apr-13 16:30 London time (BST) – The basics of search engine optimization
and accessibility – The importance of good page structure and
markup – SEO and accessibility tools – Brief introduction to the legal requirements
of web site accessibility – Completing the rest of the accessibility
puzzle
Guerrilla UCD Overview 26
www.guerrillaucd.com Guerrilla UCD Overview 27
Web crawlers and assistive technology (for disabled users) are both interested in the naked HTML describing a page
www.guerrillaucd.com Guerrilla UCD Overview 28
But both can be confused by dynamic pages (a new standard called ARIA will help)
www.guerrillaucd.com Guerrilla UCD Overview 29
Accessibility can be an expensive omission (bit.ly/target-accessibility)
www.guerrillaucd.com
• But there’s more to accessibility than just valid HTML…
Guerrilla UCD Overview 30
The descriptive (alt) text for this image read ‘Girl riding bicycle’ but the content linked to was news of a shampoo manufacturer!
www.guerrillaucd.com
5. Human Error, Messages & Feedback
• 09-May-13 16:30 London time (BST) – Brief introduction to human error – Preventing errors – Planning for errors – Feedback and flow – Attracting attention – Error messages
Guerrilla UCD Overview 31
www.guerrillaucd.com Guerrilla UCD Overview 32
The Chernobyl nuclear accident occurred because the operators did not understand the state of the system
(bit.ly/chernobyl-pripyat)
www.guerrillaucd.com Guerrilla UCD Overview 33
Nuclear power plant control room! (not Chernobyl – see Don Norman’s
Design of Everyday Things)
www.guerrillaucd.com Guerrilla UCD Overview 35
See bit.ly/error-messages
This is not an error Very poor error handling
Blaming the user No error here
www.guerrillaucd.com
6. Usability Evaluation
• 16-May-13 16:30 London time (BST) – Fidelity – Design (cognitive) walkthroughs – Paper prototyping – Expert / heuristic evaluation – Benchmarking – Usability testing & eye tracking – A/B & multivariate testing
Guerrilla UCD Overview 36
www.guerrillaucd.com Guerrilla UCD Overview 37
70
100
130 OVERALL DESIGN
Content
Visual Design
Navigation
Engagement
Accessibility
Trust
Persuasion Shopping Basket
Search
OVERALL USABILITY
Selection
Checkout
Account Management
Online Support
Benchmarking can show where you are relative to your market
www.guerrillaucd.com Guerrilla UCD Overview 38
A/B testing can test which design is better but won’t tell you why (bit.ly/sm-ab-testing)
www.guerrillaucd.com Guerrilla UCD Overview 39
Sometimes we need to explain how usability issues arise
www.guerrillaucd.com
7. User-Centred IA with Card Sorting
• 23-May-13 16:30 London time (BST) – Basics of card sorting – Open versus closed sorts – Face-to-face versus on-screen – Terminology – Avoiding common pitfalls with navigation – How to make sense of the results
Guerrilla UCD Overview 41
www.guerrillaucd.com Guerrilla UCD Overview 44
Some extremely sophisticated analyses are available (www.syncaps.com)
www.guerrillaucd.com
8. Dynamic Web Pages: Effective Use of Ajax
• 06-Jun-13 16:30 London time (BST) – Basic principles of Ajax – Ajax versus other approaches to interactivity – Perceptual issues - change blindness,
inattention blindness – Ajax guidelines – Ajax, SEO and accessibility – A worked example (warning: includes some
HTML and JavaScript!)
Guerrilla UCD Overview 45
www.guerrillaucd.com
How Ajax Works
…
Get Page
A standard page request without scripting
HTTP Page Returned (Eventually)
Guerrilla UCD Overview 46
www.guerrillaucd.com
How Ajax Works
HTTP request
Data Returned
An asynchronous request within a page
Script . . .
Event Handler
(Eventually)
Guerrilla UCD Overview 47
www.guerrillaucd.com
9. Writing Effective Web & Intranet Content
• 13-Jun-13 16:30 London time (BST) – What do users want from your content? – The inverted pyramid approach – Visual structure – Readability versus legibility – Readability metrics and how to apply them
effectively – Content in large organizations and with
multinational audiences
Guerrilla UCD Overview 48
www.guerrillaucd.com Guerrilla UCD Overview 49
After nearly 10 years of Group businesses and functions developing locally specific organisational models, the opportunity has been taken by the Group unification and the appointment of a single Chief Executive to simplify the organisation by giving clear accountability to business and functional leaders, and eliminating duplication.
From the HR pages of a multinational’s intranet (Flesch readability score = 0)
www.guerrillaucd.com Guerrilla UCD Overview 50
20 30 40 50 60
UK Companies with Plain English Awards (mean = 47)
Other UK Companies (mean = 42)
Multinationals (mean = 36)
(The recommended range for general adult readership is 60 to 70)
Readability is an important issue for content
Flesch Reading Ease Score
www.guerrillaucd.com
10. Designing for Advanced Users
• 20-Jun-13 16:30 London time (BST) – Ease of learning versus efficiency of use – The keystroke-level-model (how to measure
the efficiency of an interface) – Fitts' law (reducing movement time and error
rates) – The art of efficient shortcuts – Micro-usability
Guerrilla UCD Overview 51
www.guerrillaucd.com Guerrilla UCD Overview 52
The Keystroke Level Model allows the efficiency of interfaces to be compared (this example is from CogTool, see bit.ly/cog-tool)
www.guerrillaucd.com Guerrilla UCD Overview 53
Even a simple mouse odometer can tell us about the efficiency of our designs
(bit.ly/odo-plus)
www.guerrillaucd.com
11. Persuasion, Trust and Seduction
• 27-Jun-13 16:30 London time (BST) – Psychology of persuasion – Perceptions of trust – Comparative web credibility – User goals and emotional journeys – Seductive design and the halo effect
Guerrilla UCD Overview 54
www.guerrillaucd.com
12. Making the Case for UCD in Agile
• 12-Sep13 16:30 London time (BST) – The 'optional' status of user experience (and
how to address it) – Understanding your audience – Making the most of metrics – Building a persuasive case
Guerrilla UCD Overview 57
www.guerrillaucd.com 58
User Stories
Design, Implementation &
Unit Testing
Functional Testing
Prob
lem
Use Case
Models Object Models
Other UML Models Programming
Functional Testing
OO
Agile
User Research
Personas
Paper Prototyping
Conceptual & UI Design
(not to scale)
Usability Evaluation
Style Guide
Goal-oriented User Stories
UCD
Prob
lem
Solu
tion
Solu
tion
Traditionally, these activities are performed up front
Guerrilla UCD Overview
UCD in Agile needs a different approach and often considerable persuasive skills
www.guerrillaucd.com
13. Integrating UCD & Agile
• 19-Sep-13 16:30 London time (BST) – Origins of philosophy of Agile (and the Agile
manifesto) – Tensions between Agile and user-
centred/user-experience design – Empathetic design – The parallel-streams approach – Making users the focus of development – Design maps as a collaboration tool
Guerrilla UCD Overview 59
www.guerrillaucd.com Guerrilla UCD Overview 60
To be successful with Agile you need to know about chickens, pigs and skunks!
www.guerrillaucd.com
Usability Testing
Agile UX Approach
0
0
1
61
UX
Dev ... Cycle 0
2
1 n 2 3
3
1 2
4
UX is always once cycle ahead and one cycle behind development
Pre-release
...
...
User Research
Scenarios, Wireframes & Prototypes
Personas & User Stories
Guerrilla UCD Overview
www.guerrillaucd.com
14. Agile UX: Users, Personas & Design Maps
• 03-Oct-13 16:30 London time (BST) – The psychology of personas – Researching and developing behaviour-
based personas – Roles and personas – The persona-weighted feature matrix – Design maps
Guerrilla UCD Overview 62
www.guerrillaucd.com Guerrilla UCD Overview 64
Slide courtesy of Tamara Adlin (see Pruitt & Adlin, The Persona Lifecycle)
www.guerrillaucd.com
15. Agile UX: Use Cases, Stories & Scenarios
• 10-Oct-13 16:30 London time (BST) – Brief introduction to requirements – Use cases and use case diagrams – User stories and how they relate to use cases – Scenarios and story-telling in requirements – Sketches, storyboards and wireframes
Guerrilla UCD Overview 65
www.guerrillaucd.com Guerrilla UCD Overview 66
Check In Passenger
Book Seat(s)
Check Availability
Customer
Use cases and use case diagrams do have a role to play in Agile development
www.guerrillaucd.com
16. Agile UX: Conceptual Models
• 17-Oct-13 16:30 London time (BST) – Conceptual models and their benefits – User conceptual models versus domain
models – Appropriate levels of detail – Conceptual models and design maps
Guerrilla UCD Overview 67
www.guerrillaucd.com Guerrilla UCD Overview 68
Simplified domain model of a lift (elevator) - NOT a user’s conceptual model
Drive Sheave
Limit Switch Buffer
Guide Rails
Counterweight Safety Cable Hoist Cable
Door Operator Door
Shaft
Drive Machine
Call Button
Traveling Cable External Floor Indicator
Governor
operates
Floor Selector
Car
attached to
connects
Floor Indicator
Controller
controlled by
provides request signal to
connects displays location from signals overspeed to
provides request to
shows floor position from
www.guerrillaucd.com Guerrilla UCD Overview 69
User’s conceptual model of a lift (elevator)
Call Button
External Floor Indicator
Door
Floor Selector
Floor Indicator
Elevator
requests
shows position of
provides access to
selects destination of
shows current
location of
www.guerrillaucd.com Guerrilla UCD Overview 70
User’s conceptual model of Amazon site
Department
Products
Basket Checkout
Order HistorySelected Products
Ordered Products
Order
Account
Delivery Address
Address Book
Payment Settings
Payment DetailsSearch
Product Descriptions
www.guerrillaucd.com
• Visit www.guerrillaucd.com for more details and to book webinars
• Use the Special Offers page to earn free webinars from referrals
• Use My Webinars to access slides, webinars and resources
• Questions to [email protected]