Upload
snyderconsulting
View
108
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Responsive Applications: Lessons Learned
Amy Rizzico Carolyn Snyder
UXPA Boston May 15, 2014
| 2
About Us Carolyn Snyder, UX researcher Independent UX consultant, 20+ years of usability testing, clients in many industries
Amy Rizzico, UX designer UX designer, Information Architect, 15+ years of design experience
| 3
How We Met • Fidelity Investments is transitioning parts
of Fidelity.com to responsive design • Transfer of Assets process is now responsive
| 4
Agenda • Lessons learned
• Responsive design myths
• Creating a responsive design strategy
• Usability testing for responsive design
• Q&A
| 5
Automatically reflowing content to accommodate multiple screen sizes,
devices and scenarios.
What is Responsive Web Design?
| 6
4 Kinds of Challenges in RWD
Expect to find challenges with: 1. Content 2. Design Applications are more complex: 3. Functionality 4. Interaction
Challenge #1: Content
• Legacy content can be overwhelming on a small screen
• A typical “Agree to Terms” page isn’t going to work
“Employed by Fidelity Investments” is too wide for the drop-down list
This one’s OK Over the limit
Lesson Learned: Responsive design is about responsive content.
| 10
Challenge #2: Design
• What about font sizes and scaling? • Are icons and form elements touch friendly?
| 11
Lesson Learned: Don’t underestimate the complexity of the details.
• Are links to other pages helpful or confusing on mobile devices?
• What about radio buttons?
| 12
Challenge #3: Functionality
• Devices are optimized for different things
• PCs are file-centric, phones are not
VS.
| 13
• What does it mean to attach a statement on a phone?
• What does it mean to print?
| 14
• Support for PDFs varies on phones
“Can I have it emailed to me?”
• Users may start a process on one device and finish on another
| 15
Lesson Learned: Think about interactions between devices, not just on them.
• What does “Contact Us” mean? • Can the user make a call while in the app?
Challenge #4: Interaction
• Production design has separate fields
• Auto-tabs to next field
Auto-tab
Challenge #4: Interaction
• Production design has separate fields
• Auto-tabs to next field • But – iOS devices
don’t support auto-tab
Auto-tab
Challenge #4: Interaction
• Formatting inserted as you type
Auto-format
Challenge #4: Interaction
• Formatting inserted as you type
• But – it fails miserably on some Androids
• Some of which don’t properly self-identify
Auto-format
Lesson Learned: Device differences can derail the UX
| 20
Lessons Learned
• Responsive is about responsive content
• Don’t underestimate the complexity of the details
• Think about interactions between devices, not just on them
• Device differences can derail the UX
Myth-busting for Responsive Design
| 22
Mobile isn’t always “away from home”
You can’t make assumptions about devices or environments
Users may start and finish on different devices
Myth #1: “The mobile experience”
Reality: Mobile is a circumstance, not an experience.
| 23
Devices have different capabilities.
Reality: Get the same job done.
Users don’t want to use all devices the same way.
But they do expect to accomplish the same tasks.
Myth #2: The user experience should be the same on all devices
| 24
Design strategy should be based on business and user needs.
The phone isn’t always the most important device.
Use the “mobile first” perspective to uncover what is important.
Myth #3: “Mobile first”
Reality: Think both bottom-up and top-down.
| 25
Breakpoints should be device agnostic. Breakpoints
should be driven by content.
Reality: Breakpoints aren’t about size. They’re about content.
Myth #4: Break points are based on device screen sizes
Creating a Responsive Design Strategy
| 27
Creating a Responsive Design Strategy You are unique There is no one “best” responsive design. Only things to consider.
| 28
Consider: Bottom up and Top Down • Design to the smallest breakpoint first
and then up and out.
• Create strategies for handling technical limitations through graceful degradation.
| 29
• Where does it break down?
• When does it become unreadable or unusable?
Is it even possible?
Consider: Content
| 30
Where are layout changes necessary to maintain design integrity?
Consider: Layout
| 31
• Linear vs. non-linear • Exploration vs. “flow” vs. ?
Consider: Navigation
| 32
• Where and how will users be engaged
• Single sitting? Single device?
Consider: Users & Devices
| 33
You are unique You have to investigate what is right for your project.
Usability Testing for Responsive Design
| 35
Usability Testing for RWD
• Plan multiple rounds of testing • Iteration isn’t a luxury, but a necessity • Start on the device with the most
unknowns, or that has proven problematic
Early Finds • What does it mean to
attach a statement? • Feasibility of sample
statement • Content that could be
removed
Paper Prototype “iPhone”
• Buttons big enough? (Yep.)
• Is this page too long? (No.)
• Labels inside fields? (No!)
Interaction questions later
Test with Working Prototypes
• Test on people’s real phones
• Recruit a variety of phone types
• Another tactic: Create small,
standalone prototypes for known/potential trouble spots
| 39
Return to the Big Screen Ensure the mobile-friendly design scales up to the largest breakpoint
| 40
For a legacy site, validate changes
• A/B study with quantitative measures
• Enough participants to get statistically significant results
A/B Test
| 41
Leave Room for Surprises
• Transfer of Assets: Tablet Devices
• Field Formatting: Android vs. iPhone
Plan an extra test or expert review for questions or devices you’re still worried about
| 42
In Conclusion
“In the midst of chaos, there is also opportunity” Sun-Tzu, The Art of War
Amy Rizzico [email protected]
617.501.4600
Carolyn Snyder [email protected]
603.505.5726