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 amy@rizzico.com

617.501.4600

Carolyn Snyder csnyder@snyderconsulting.net

603.505.5726