Responsive Design vs Context-Driven Design

Slide 1

Slide 1 text

wifi = yellowpencil

Slide 2

Slide 2 text

October 11, 2012 Responsive Design vs Context – General Assembly Class

Slide 3

Slide 3 text

A little about me. User Experience (ID). Huge. Responsive. Context.

Slide 4

Slide 4 text

A little about me. User Experience (ID). Huge. . Context.

Slide 5

Slide 5 text

Founded in 1999 Full-service digital agency within Interpublic Group 550 employees How we’re structured. Los Angeles. Rio de Janeiro. London. Brooklyn. San Francisco. Portland.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

A little about me. User Experience (ID). Huge. Responsive. Context.

Slide 8

Slide 8 text

A little about me. User Experience (ID). Huge. Responsive. Context.

Slide 9

Slide 9 text

A little about you.

Slide 10

Slide 10 text

Today’s class: 1. What is responsive? 2. The good. The bad. 3. The context of channels. 4. Context + responsive. 5. How.

Slide 11

Slide 11 text

What is responsive?

Slide 12

Slide 12 text

Responsive = digital experiences from a single code base optimized for various devices (small to large).

Slide 13

Slide 13 text

Responsive = digital experiences from a single code base optimized for various devices (small to large).

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Responsive = digital experiences from a single code base optimized for various devices (small to large).

Slide 16

Slide 16 text

How? Fluid + breakpoints.

Slide 17

Slide 17 text

A fluid layout simply flows a single, static design into whatever space is provided.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

www.bostonglobe.com

Slide 21

Slide 21 text

question: How is each element changing?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

1 2 3 4

Slide 24

Slide 24 text

Desktop Tablet Mobile 480px 768px 978px

Slide 25

Slide 25 text

Slide 26

Slide 26 text

read How BostonGlobe.com was made: http://upstatement.com/blog/2012/01/how- to-approach-a-responsive-design/

Slide 27

Slide 27 text

www.regent-college.edu www.regent-college.edu

Slide 28

Slide 28 text

www.atlantaballet.com

Slide 29

Slide 29 text

bookmark More examples: http://mediaqueri.es/

Slide 30

Slide 30 text

bookmark View for various devices: http://responsive.is/ http://www.responsinator.com

Slide 31

Slide 31 text

The good. The bad.

Slide 32

Slide 32 text

question: What’s good about responsive?

Slide 33

Slide 33 text

Saves time. Saves money. New sizes? No problem.

Slide 34

Slide 34 text

1,453 different sized screens in 2011. Source: 2012 Superior Web Solutions

Slide 35

Slide 35 text

question: What’s bad about responsive?

Slide 36

Slide 36 text

Higher initial cost. Harder to develop. Still constrained.

Slide 37

Slide 37 text

We didn’t talk about the user.

Slide 38

Slide 38 text

Users have different needs at different times.

Slide 39

Slide 39 text

Where are they? What is their mindset? Who is with them? What other channels are around them?

Slide 40

Slide 40 text

Context.

Slide 41

Slide 41 text

Why context matters – cream & sugar.

Slide 42

Slide 42 text

The context of channels.

Slide 43

Slide 43 text

5 myths

Slide 44

Slide 44 text

Myth #1: Mobile is just used when people are on-the-go.

Slide 45

Slide 45 text

Myth #1: Mobile is just used when people are on-the-go. Mobile is the lazy man’s computer.

Slide 46

Slide 46 text

Source: Yahoo Mobile Shopping Framework Study, 2011 89% of people use mobile while at home.

Slide 47

Slide 47 text

Myth #2: People want less on their mobile phone than on desktops.

Slide 48

Slide 48 text

Myth #2: People want less on their mobile phone than on desktops. People complain when mobile can only give them part of the answer.

Slide 49

Slide 49 text

Myth #3: Tablets are just an oversized mobile device or a simpler PC.

Slide 50

Slide 50 text

Myth #3: Tablets are just an oversized mobile device or a simpler PC. Tablets entertain.

Slide 51

Slide 51 text

0 10 20 30 40 50 60 70 80 90 Source: AlphaWiseTM, Morgan Stanley Research Tablet Demand & Disruption, Feb 14, 2011 % of people who use for… PC Tablet

Slide 52

Slide 52 text

Myth #4: PCs are dying.

Slide 53

Slide 53 text

Myth #4: PCs are dying. They’re dying the way radio is dying.

Slide 54

Slide 54 text

Myth #5: TV lets you shut off your brain.

Slide 55

Slide 55 text

Myth #5: TV lets you shut off your brain. TV is one of many channels around us.

Slide 56

Slide 56 text

Source: Google’s The New Multiscreen World Study, 2012 77% of TV viewers use another device at the same time in a typical day.

Slide 57

Slide 57 text

Phone “I consider it my personal device, my go-to device. It’s close to me, if I need that quick, precise feedback.” Tablet “When I need to be more in depth, that’s when I start using my tablet. The other part of it is where I disconnect from my work life and kind of go into where I want to be at the moment... I’m totally removed from today’s reality. I can’t get a phone call, I don’t check my email it’s my dream world.” Laptop “For me that’s business. That’s work. I feel like I’ve got to be crunching numbers or doing something.” - Bradley Google’s The New Multiscreen World Study, 2012

Slide 58

Slide 58 text

read Google’s The New Multiscreen World Study: http://www.thinkwithgoogle.com/insights/ library/studies/the-new-multi-screen-world- study/

Slide 59

Slide 59 text

Context + responsive.

Slide 60

Slide 60 text

Case study: store planning vs. visit Store planning needs •  Making a list •  Finding store location •  Researching a category / specific product •  Getting inspired •  Inventory check Store visit needs •  Checking off list •  Wayfinding •  Quick decision making (based on price, ratings) •  Price lookup •  Additional sizes / colors

Slide 61

Slide 61 text

Default mode In-Store mode

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

The risks of scaling up.

Slide 64

Slide 64 text

If we only think about pixels, we’re missing significant opportunities to wow our users and meet their needs.

Slide 65

Slide 65 text

Responsive should be responsive to: •  Location •  Predicted needs by channel (be careful not to make incorrect generalizations) •  Other channels in proximity •  Accessibility •  Bandwidth

Slide 66

Slide 66 text

Another name for this is adaptive design.

Slide 67

Slide 67 text

How do we do this?

Slide 68

Slide 68 text

•  Who are you designing for? •  What is the goal of the product? •  Are the user’s goals always the same from device to device? What are their primary contexts? •  Is it time to start taking advantage of larger monitors as well as smaller devices? •  Other insightful questions… First, define WHY you’re doing this.

Slide 69

Slide 69 text

Process. How: Mobile first.

Slide 70

Slide 70 text

•  It makes you identify the most important aspects of an application. •  The narrow viewport dictates that you lay things out based on importance. •  It requires you to simplify UI and interaction patterns. •  It encourages you to think more seriously about what the actual content will be. Mobile forces you to focus.

Slide 71

Slide 71 text

Based on: •  Site analytics •  Content priorities •  Where users benefit from a shift in content display •  Standard device dimensions Choose break points to determine the number of layouts

Slide 72

Slide 72 text

Source: metaltoad.com/blog/simple-device-diagram-responsive-design-planning 3 breakpoints 4 breakpoints 6 breakpoints

Slide 73

Slide 73 text

•  You can never create something that is inherently dynamic by creating a bunch of static deliverables. •  Each wireframe, visual design and development solution should be implemented in a simple prototype. From here, decisions can be solidified. •  How does that menu change? •  What happens to these content areas? •  Can we introduce a new way of getting from breakpoint A to breakpoint B? Use prototypes to evolve towards your final product. Prototype early and often:

Slide 74

Slide 74 text

Design a system, not a page. •  Visual design can start creating a style guide without having to wait for UX to produce a deliverable. •  It lets you create universal components, not unique pages. •  It will allow you to be more consistent from the start which hopefully prevents you from having to go back to revise and consolidate.

Slide 75

Slide 75 text

Wrap up.

Slide 76

Slide 76 text

Understand the basics of responsive. Avoid pithy (incorrect) channel ideas. Be responsive to more than screen size. Place. Channel behaviors. Other channels. And more. 1.  Mobile is more than on the go. 2.  Mobile should offer just as much as desktop. 3.  Tablets are the great entertainer. 4.  PCs will have to morph to survive. 5.  TV is almost always consumed with another channel. Fluid + breakpoints.