One User Experience for Better Usability, Accessibility & SEO John H Douglass twitter @JDouglass email [email protected] work APCO Worldwide
One User Experiencefor Better Usability, Accessibility & SEO
John H Douglass
twitter @JDouglassemail [email protected] APCO Worldwide
Introduction
To truly succeed in usability, accessibility or optimization individually, we need to pay attention to them all.
flickr photo: @photolivier
Usability• “I can’t remember where that report is on our intranet.”
• “Why can’t I upload my video?”
• “It takes me forever to enter my time.”
• “What am I supposed to do next?”
• “The search doesn’t work.”
Accessibility • “I can’t distinguish green and red.”
• “My dad is losing his hearing.”
• “My right hand will be in a cast for two months.”
• “I’m using my iPhone.”
• “I don’t know how to use our intranet.”
Optimization (SEO)• “What’s new on the iPad 2?”
• “I need help with my taxes.”
• “Who has the best seafood in the city?”
• “Who else hates the 5 cents bag tax?”
“[User Experience] is a common awareness, a thread that ties together people from different disciplines who care about good design, and who realize that today’s increasingly complex design challenges require the synthesis of different varieties of design expertise.”
Louis RosenfeldRosenfeld Media
ITERATE
VALI
DAT
E
EMPATHIZ
E
A Broken Experience
ITERATE
VALI
DAT
E
EMPATHIZ
E
2006 - 2008
A Broader Picture
ITERATE
VALI
DAT
E
EMPATHIZ
E
1904 - 1962
ITERATE
VALI
DAT
E
EMPATHIZ
E
How Do We Improve Usability, Accessibility and SEO by Focusing on the Holistic Experience?
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Understand and share another person's perspective, feelings and needs
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Empathize
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Understand & Share
Empathize
53 Definitions
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Perspective, Feelings, Needs
Pitch?
Empathize
Best Processes & Practices 1. Identify a Design Challenge
2. Target Your Audience
3. Choose Your Method
4. Identify Patterns & Themes
5. Use Relevant Nomenclature
6. Accommodate for Flow
7. Use Friendly Menus and Navigation
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Empathize
1. Identify a Design Challenge
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Empathize
2. Target Your Audience
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Empathize
3. Choose Your Method
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Empathize
4. Identify Patterns & Themes
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Empathize
4. Use Relevant Nomenclature
• Use meaningful page names, titles and text
• Create friendly URLS
• Avoid jargon
• Always use appropriate anchor, alt and descriptive text
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Empathize
5. Accommodate for Flow
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
• Stay out of people’s way
• Present few choices
• Give a clear scent of information
• Load pages quickly (review via SP developer dashboard)
Empathize
6. Use Friendly Navigation
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
• Avoid using Flash / Silverlight / Javascript for navigation menus.
• Provide alternatives for interactive elements, when possible.
Empathize
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Evaluate, brainstorm, and prototype ideas to find the best
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Iteration
Collaboration Over Artifacts
Iteration
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Best Process & Practices1. Create Opportunity Areas
2. Brainstorm Solutions
3. Follow the Rules
4. Prototype Ideas
5. (But) Don’t Fall in Love
6. Go Mobile First
7. Be Inclusive & Collaborative
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Iteration
1. Create Opportunity Areas
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Iteration
2. Brainstorm Solutions
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Iteration
3. Follow the Rules
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
1. Defer judgement
2. Encourage wild ideas
3. Build on the ideas of others
4. Be visual
5. Stay focused on the topic
6. One conversation at a time
7. Go for quantity
Iteration
4. Prototype Ideas
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
Iteration
5. Don’t Fall in Love
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
• Prototypes should be rough and rapid
• Disposable tools to help validate and generate ideas
• Not just for interface design
• What question is a prototype answering? Usability, findability, accessibility?
Iteration
6. Go Mobile First
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
• Enhancing the mobile experience can also improve accessibility and vice versa.
• Focus on core actions
• Use scalable design
• Focus on innovation
Iteration
7. Be Inclusive & Collaborative
ITERATE
VALI
DAT
E
EMPATHIZ
E
ITERATE
VALI
DAT
E
EMPATHIZ
E
• Remember the holistic experience
• Include admins, analysts, designers, developers, managers
• Illustrate complexity of issues to stakeholders
• Get buy-in early
Iteration
ITERATE
VALI
DAT
E
EMPATHIZ
E
Fail early and fail often
ITERATE
VALI
DAT
E
EMPATHIZ
E
Validate
Validatephoto: Jimmy Chandler (uxprinciples.com)
Best Processes & Practices 1. Choose Your Test
2. Follow the Analytics Trinity
3. Conduct Evaluative Interviews
4. Include Disabled in Testing
5. Follow Principle of One
6. Go Remote
7. Focus on a Continuum
ITERATE
VALI
DAT
E
EMPATHIZ
E
Validate
1. Choose Your TestTuxedo
ITERATE
VALI
DAT
E
EMPATHIZ
E
Guerilla
Validate
2. Follow the Analytics Trinity
ITERATE
VALI
DAT
E
EMPATHIZ
E
• Experience
• Behavior
• Outcomes
image: Avinash Kaushik
Validate
3. Conduct Evaluative Interviews
ITERATE
VALI
DAT
E
EMPATHIZ
E
• Solicit honest feedback, even if negative
• Improvise on the fly
• Build on ideas. Ask “should”.
Validate
4. Include Disabled in Testing Including at least one person in testing:
• Provides insight into mental models, behaviors & habits
• Transcends “checklist” development mentality
• Brings struggles to life
• Increase buy-in potential
ITERATE
VALI
DAT
E
EMPATHIZ
E
Validate
5. Follow Principle of One
1. Test or talk to one person, at least
2. Go guerilla
3. Fight intimation
4. Leverage the many resources available
ITERATE
VALI
DAT
E
EMPATHIZ
E
Validate
6. Go Remote
ITERATE
VALI
DAT
E
EMPATHIZ
E
Validate
7. Focus on a Continuum
Accessibility, optimization and usability operate on sliding scale.
ITERATE
VALI
DAT
E
EMPATHIZ
E
Validate
APCO IN - Challenge
APCO IN - Solution
APCO IN - Results
“We were under real time pressure – APCO IN was easy to use and we found all the documents really easily. Without it, we would really have struggled to meet the deadline on what was an important new business prospect.”
APCO Employee
ITERATE
VALI
DAT
E
EMPATHIZ
E
ResourcesIntroduction• Peter Morville’s honeycomb: http://semanticstudios.com/• A Project Guide to User Experience (Unger / Chandler)• Information Architecture for the World Wide Web (Morville / Rosenfeld)• About Face 3: Essentials of Interaction Design (Cooper / Reimann / Cronin)• UXExchange.com / Alltop - User Interface / Quora.com
Empathize • Observing the User Experience (Kuniavsky)• Design of Everyday Things & Emotional Design (Norman)• Card Sorting (Spencer)• Mental Models (Young)
ITERATE
VALI
DAT
E
EMPATHIZ
E
ResourcesIterate • Gamestorming (Gray) (http://www.gogamestorm.com/) • Prototyping: A Practitioner's Guide (Warfel)• Paper Prototyping (Snyder) • Luke Wroblewski’s on “Designing for Mobile First” (http://bit.ly/4j9TXI) • Sketching User Experiences (Buxton) • Mental Notes (http://getmentalnotes.com/)
Validate • Rocket Surgery Made Easy (Krug)• Web Analytics in an Hour a Day (Kaushik)• Just Ask: Integrating Accessibility Throughout Design (http://www.uiaccess.com/
JustAsk/) • Remote testing Google spreadsheet: http://bit.ly/hPNUrl
ITERATE
VALI
DAT
E
EMPATHIZ
E
John H Douglass
twitter @JDouglassemail [email protected] APCO Worldwide
Thank YouRate my presentation! http://spkr8.com/t/5819