Date post: | 28-Jan-2015 |
Category: |
Design |
Upload: | experience-dynamics |
View: | 107 times |
Download: | 0 times |
All contents © Copyright 2011 Experience Dynamics Inc.
1
An Experience Dynamics training
WEB SEMINAR
With Frank Spillers, MS
Designing Usable Web Applications (part 1)
All contents © Copyright 2011 Experience Dynamics Inc.
2
About Your Speaker
Frank SpillersMasters Cognitive Science 12 years User Centered Design experienceFounder, Experience Dynamics- leading Usability
Design Research firm
All contents © Copyright 2011 Experience Dynamics Inc.
3
Agenda Web application projects need a solid understanding of what success criteria constitutes a usable web application. Teams deploying web applications should be utilizing emerging best practices in Interaction Design, such as how to design for "progressive disclosure" using dynamic interface techniques. This seminar will outline best practices, things to avoid in designing usable web applications as well as a review of recent client case studies.
1. The role of "Interaction Design" in a web application project 2. How do you measure usability of a web application? 3. The 10 common web application design mistakes (and what to do about
them) 4. Case studies: Real-world examples of web application usability 5. Q & A
All contents © Copyright 2011 Experience Dynamics Inc.
1. The role of "Interaction Design" in a web application project
All contents © Copyright 2011 Experience Dynamics Inc.
Types of Web apps
• Account mgmt• Services managed online• Administrator apps (editing etc)• Data and dashboard views• Web site log in areas (enhanced and
secure data)• Full software apps –web delivery
All contents © Copyright 2011 Experience Dynamics Inc.
Why Interaction Design?
• Modeling user behavior• Task-centered design approach• Flow of user interactions• Better suited for web apps than
Information Architecture
Interaction Design: Focuses on how the user interacts with a page, application or product. Interaction design follows a task centered design approach ensuring the flow of the interaction as the central goal. Interaction design predates the Web world, and finds its roots in the wider field of Human Computer Interaction. Interaction design is a more general umbrella that many working on Web 2.0 interfaces and web applications prefer, since IA appears stuck in web-page centric paradigms.
All contents © Copyright 2011 Experience Dynamics Inc.
Interaction Design moves you away from website centric paradigms and affords a focus on the mission critical component of a web app: helping users interact with controls quickly and efficiently.
7
All contents © Copyright 2011 Experience Dynamics Inc.
8
Get a Free Poster if you attend Part 2 of this seminar!
Poster details: http://bit.ly/cHWLXu
All contents © Copyright 2011 Experience Dynamics Inc.
Problems and Solutions
1. Progressive Disclosure
2. Task-centric3. Containership
1. User adoption2. Discoverability3. Navigation
Interaction design techniques:Design problems:
(Note: “Designing Usable Web Apps-Part 2” goes into specific detail of how to apply these)
All contents © Copyright 2011 Experience Dynamics Inc.
2. How do you measure usability of a web application?
All contents © Copyright 2011 Experience Dynamics Inc.
Web app usability metrics
Depends* on your industry but common metrics we use include:
-Ease of learning decreases-Ease of use increases-Ease of understanding decreases-Pleasurability or satisfaction increases-Call center traffic decreases-Sell-ability increases
*Context of use (other then Banking, consumers do not “want” to use web apps like they might mobile apps)
All contents © Copyright 2011 Experience Dynamics Inc.
Two biggest challenges
#1: Users are less in control of a web app experience…
#2: Discoverability behavior is lacking (it’s not surfing it’s work)
All contents © Copyright 2011 Experience Dynamics Inc.
3. The 10 common web application design mistakes (and what to do about them)
All contents © Copyright 2011 Experience Dynamics Inc.
10 web app usability mistakes
1. Implicit knowledge required2. Navigation nested and deep (not flat)3. Task-Orientation missing
4. Too much Obscurity 5. Powerful features6. Metaphor overload7. Unhelpful forms8. Log-in confusion9. Work lost or loose track10. Wildly powerful controls
All contents © Copyright 2011 Experience Dynamics Inc.
#1 Implicit knowledge required– Invisible Rules and logic (do this to
make this happen)
GOOD EXAMPLEBAD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
#2 Navigation nested and deep (not flat)
– Dropdowns, hover menus, “deep drilling”
16
GOOD EXAMPLEBAD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
#3 Task Orientation -- Start pages (wrong info)
17GOOD EXAMPLE
BAD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
4. Too much Obscurity– Icons or Labels
18
BAD EXAMPLE
GOOD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
5. Powerful features– Hidden deep within (or in parallel)
19
BAD EXAMPLE GOOD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
6. Metaphor overload
– Abstract concepts or processes
20
BAD EXAMPLEGOOD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
7. Unhelpful forms
– Help or Inline examples
21
GOOD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
8. Log-in confusion
– Multiple logins
22BAD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
9. Work lost or loose track
where left off; what working on
23
GOOD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
10. Wildly powerful controls
– Eg. dropdowns that open pop ups or disappear- AJAX tricks
24
BAD EXAMPLE GOOD EXAMPLE
All contents © Copyright 2011 Experience Dynamics Inc.
4. Case studies: Real-world examples of web application usability
All contents © Copyright 2011 Experience Dynamics Inc.
Providence Health & Services
Experience Dynamics work
All contents © Copyright 2011 Experience Dynamics Inc.
Task-centric workflow
27
All contents © Copyright 2011 Experience Dynamics Inc.
Visual Dashboard
28
All contents © Copyright 2011 Experience Dynamics Inc.
Fuse Insight
29
Experience Dynamics work
All contents © Copyright 2011 Experience Dynamics Inc.
Nike Golf
30
Experience Dynamics work
All contents © Copyright 2011 Experience Dynamics Inc.
31
5. Q & A
All contents © Copyright 2011 Experience Dynamics Inc.
Join us for Part 2
1. Web application engagement: increasing user adoption and discoverability.
2. 5 Common Web application mistakes and solutions.
3. What’s to know about Designing IA for Web apps: layout, navigation, progressive disclosure.
4. 12 practical tips for web app elegance from our extensive usability testing over 5 years.
5. Q & A
Get 50% OFF Enter Code WEBAPP2
(use anytime throughout 2011)
Agenda Seminar details: http://bit.ly/dXiH1i
All contents © Copyright 2011 Experience Dynamics Inc.
33
thank you!1-800-978-9183www.experiencedynamics.com
Frank Spillers, [email protected]
All contents © Copyright 2011 Experience Dynamics Inc.
About Experience Dynamics: Experience Dynamics is a professional usability design research firm. Through its User Centered Design services, Experience Dynamics assists organizations with removing the frustration and confusion that plagues most website and software development projects. Companies benefiting from Experience Dynamics actionable usability recommendations include AutoNation, IBM, Hewlett Packard, Intel, Verizon, Microsoft, Four Seasons, Washington Mutual, Bank One, Target, Land Rover, Providence Health System and KeyBank.
About Experience Dynamics web seminars:Experience Dynamics offers a recurring set of usability web seminars on hot usability topics. The web seminars provide an overview and quick review of key issues and opportunities related to best practices in usability research.
The seminars are presented by Frank Spillers, MS, a recognized expert in the field of usability engineering and user experience design. Experience Dynamics seminars are complimentary and are attended by companies including Intel, Citigroup, KeyBank, The Hartford, Fujitsu, Intuit, EMC Corp, Chase, US Bank, Apple, Amazon.com, Business Objects, Mentor Graphics, GM, Toyota and others.