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 indu...
| 3
How We Met
• Fidelity Investments is transitioning parts
of Fidelity.com to responsive design
• Transfer of Assets pro...
| 4
Agenda
• Lessons learned
• Responsive design myths
• Creating a responsive design strategy
• Usability testing for res...
| 5
Automatically reflowing content to
accommodate multiple screen sizes,
devices and scenarios.
What is Responsive Web De...
| 6
4 Kinds of Challenges in RWD
Expect to find challenges with:
1. Content
2. Design
Applications are more complex:
3. Fu...
Challenge #1: Content
• Legacy content can
be overwhelming on
a small screen
• A typical “Agree to
Terms” page isn’t
going...
“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...
| 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 fini...
| 15
Lesson Learned: Think about interactions
between devices, not just on them.
• What does “Contact Us” mean?
• Can the ...
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 supp...
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 do...
| 20
Lessons Learned
• Responsive is about responsive content
• Don’t underestimate the complexity
of the details
• Think ...
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 fin...
| 23
Devices have
different
capabilities.
Reality: Get the same job done.
Users don’t want
to use all devices
the same way...
| 24
Design strategy should
be based on business
and user needs.
The phone isn’t
always the most
important device.
Use the...
| 25
Breakpoints
should be
device agnostic.
Breakpoints
should be
driven by
content.
Reality: Breakpoints aren’t about siz...
Creating a Responsive
Design Strategy
| 27
Creating a Responsive Design Strategy
You are unique
There is no one “best” responsive design.
Only things to conside...
| 28
Consider: Bottom up and Top Down
• Design to the smallest breakpoint first
and then up and out.
• Create strategies f...
| 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 th...
Early Finds
• What does it mean to
attach a statement?
• Feasibility of sample
statement
• Content that could be
removed
P...
• 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 sm...
| 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...
| 41
Leave Room for Surprises
• Transfer of Assets:
Tablet Devices
• Field Formatting:
Android vs. iPhone
Plan an extra te...
| 42
In Conclusion
“In the midst of chaos, there is also opportunity”
Sun-Tzu, The Art of War
Amy Rizzico
amy@rizzico.com
...
Upcoming SlideShare
Loading in …5
×

UXPA Boston Responsive Design Snyder Rizzico

279 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
279
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

UXPA Boston Responsive Design Snyder Rizzico

  1. 1. Responsive Applications: Lessons Learned Amy Rizzico Carolyn Snyder UXPA Boston May 15, 2014
  2. 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. | 3 How We Met • Fidelity Investments is transitioning parts of Fidelity.com to responsive design • Transfer of Assets process is now responsive
  4. 4. | 4 Agenda • Lessons learned • Responsive design myths • Creating a responsive design strategy • Usability testing for responsive design • Q&A
  5. 5. | 5 Automatically reflowing content to accommodate multiple screen sizes, devices and scenarios. What is Responsive Web Design?
  6. 6. | 6 4 Kinds of Challenges in RWD Expect to find challenges with: 1. Content 2. Design Applications are more complex: 3. Functionality 4. Interaction
  7. 7. Challenge #1: Content • Legacy content can be overwhelming on a small screen • A typical “Agree to Terms” page isn’t going to work
  8. 8. “Employed by Fidelity Investments” is too wide for the drop-down list
  9. 9. This one’s OK Over the limit Lesson Learned: Responsive design is about responsive content.
  10. 10. | 10 Challenge #2: Design • What about font sizes and scaling? • Are icons and form elements touch friendly?
  11. 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. | 12 Challenge #3: Functionality • Devices are optimized for different things • PCs are file-centric, phones are not VS.
  13. 13. | 13 • What does it mean to attach a statement on a phone? • What does it mean to print?
  14. 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. | 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?
  16. 16. Challenge #4: Interaction • Production design has separate fields • Auto-tabs to next field Auto-tab
  17. 17. Challenge #4: Interaction • Production design has separate fields • Auto-tabs to next field • But – iOS devices don’t support auto-tab Auto-tab
  18. 18. Challenge #4: Interaction • Formatting inserted as you type Auto-format
  19. 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. | 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
  21. 21. Myth-busting for Responsive Design
  22. 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. | 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. | 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. | 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
  26. 26. Creating a Responsive Design Strategy
  27. 27. | 27 Creating a Responsive Design Strategy You are unique There is no one “best” responsive design. Only things to consider.
  28. 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. | 29 • Where does it break down? • When does it become unreadable or unusable? Is it even possible? Consider: Content
  30. 30. | 30 Where are layout changes necessary to maintain design integrity? Consider: Layout
  31. 31. | 31 • Linear vs. non-linear • Exploration vs. “flow” vs. ? Consider: Navigation
  32. 32. | 32 • Where and how will users be engaged • Single sitting? Single device? Consider: Users & Devices
  33. 33. | 33 You are unique You have to investigate what is right for your project.
  34. 34. Usability Testing for Responsive Design
  35. 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. 36. Early Finds • What does it mean to attach a statement? • Feasibility of sample statement • Content that could be removed Paper Prototype “iPhone”
  37. 37. • Buttons big enough? (Yep.) • Is this page too long? (No.) • Labels inside fields? (No!) Interaction questions later
  38. 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. | 39 Return to the Big Screen Ensure the mobile-friendly design scales up to the largest breakpoint
  40. 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. | 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. | 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

×