2. | 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. | 3
How We Met
• Fidelity Investments is transitioning parts
of Fidelity.com to responsive design
• Transfer of Assets process is now responsive
9. This one’s OK Over the limit
Lesson Learned: Responsive design is about
responsive content.
10. | 10
Challenge #2: Design
• What about font sizes and scaling?
• Are icons and form elements touch friendly?
11. | 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. | 12
Challenge #3: Functionality
• Devices are optimized for different things
• PCs are file-centric, phones are not
VS.
13. | 13
• What does it mean to
attach a statement
on a phone?
• What does it mean
to print?
14. | 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. | 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?
19. 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. | 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
22. | 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. | 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. | 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. | 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
27. | 27
Creating a Responsive Design Strategy
You are unique
There is no one “best” responsive design.
Only things to consider.
28. | 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. | 29
• Where does it break
down?
• When does it become
unreadable or unusable?
Is it even possible?
Consider: Content
30. | 30
Where are
layout changes
necessary to
maintain design
integrity?
Consider: Layout
31. | 31
• Linear vs. non-linear
• Exploration vs. “flow” vs. ?
Consider: Navigation
32. | 32
• Where and how will
users be engaged
• Single sitting? Single
device?
Consider: Users & Devices
33. | 33
You are unique
You have to investigate what is right for
your project.
35. | 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
36. Early Finds
• What does it mean to
attach a statement?
• Feasibility of sample
statement
• Content that could be
removed
Paper Prototype “iPhone”
37. • Buttons big enough?
(Yep.)
• Is this page too long?
(No.)
• Labels inside fields?
(No!)
Interaction questions
later
38. 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. | 39
Return to the Big Screen
Ensure the mobile-friendly design scales
up to the largest breakpoint
40. | 40
For a legacy site, validate changes
• A/B study with
quantitative measures
• Enough participants
to get statistically
significant results
A/B Test
41. | 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. | 42
In Conclusion
“In the midst of chaos, there is also opportunity”
Sun-Tzu, The Art of War
Amy Rizzico
amy@rizzico.com
617.501.4600
Carolyn Snyder
csnyder@snyderconsulting.net
603.505.5726
