ready to go mobile? today's mobile landscape: responsive, adaptive, hybrid, and native

Ready to go Mobile?Jeremy Johnson Director of User Experience @

@jeremyjohnson

(yes, we’re hiring)

http://www.slideshare.net/jeremy/presentations

WORKED FOR

WORKED WITH

Uncover user needs, Design great solutions,

and build out solutions to launch.

https://twitter.com/designoutloud/statuses/480785095331037184

*

http://www.cultofmac.com/145083/what-phones-looked-like-before-and-after-the-iphone-transformed-the-industry-image/

email web browsing

video

music

messaging

camera

http://www.picsean.com/device-and-screen-size-proliferation-a-challenge-to-magazine-publishers/

http://www.techetron.com/13443/iphone-6-know/

“What would you like to do on your mobile devices?”

“Or why Responsive Design is a magic bullet”

3 Tips for going Mobile /

Responsive

“Mobile First”

Limiting feature set (MVP) Simplifying experiences

Mobile not an “after-thought”

“MVP”Most Viable Product

vs. Most Valuable Product

3 Tips for going Mobile /

Responsive

#1 CONTEXT

CONTEXTI’m at home I’m on the road I’m at work

When you’re at home your usage could be different from when you’re on the road, or at work. Or as research shows - in some cases, like shopping - you could be browsing anywhere and expect the same experience.

*COUCHING

A number of people are reaching for their phone instead of going to their desks, or using their laptops (or even tablets!) when at home on the couch. Where before, we may have made a specific mobile version, with specific mobile tasks or content, today phones are good enough, and many times people expect the same content no matter where they are or what device they’re using.

https://twitter.com/lukew/status/509063072162775040/photo/1

How do you create feature parity across devices?

*SNACKING

Remember before smartphones? Waiting in line, waiting for a meeting to start, waiting to pick up our kids, in a drive-thru? Now this is a prime opportunity for short bursts of online activity. I need to pay a bill. What’s on TV tonight? Where are my friends? Does the local store have that dress on sale today? I’m shopping for new insurance. All happening on-the-go, wherever you have the time.

How do you create content that can be consumed quickly?

Does your experience need to work in different contexts? A User’s Location? Time of day? Different devices?

Questions to ask?

“Tell me about how you use your devices at different times of the day?”

Morning Afternoon Night

“Tell me about how you use your devices at different times of the day?”

Morning Afternoon Night

Morning Afternoon Night

Home Work Outing

Process 1 Process 2 Process 3

http://www.slideshare.net/burinb/designing-for-time-travel-when-responsive-design

Do you need to shorten your experience? Is this something they’ll focus on? Or something they just need updates for?

Questions to ask?

“Will you use these features on mobile?”

Yes No Maybe…

“Map each feature to how much time they’ll spend using it on a mobile device"

1-5mins 20mins 45+mins

CONTEXT = Determining if your users need all of the

things all of the time - and will they need specific interfaces or features

when mobile.

https://twitter.com/WhytheFux/status/431449112589111296

PERSONAS

http://jackfruitmalaysia.wordpress.com/2011/04/02/how-is-jackfruit-prepared/

“Dashboard” Time on Task

Alerts Communication

Full Application Order entry

Lookup Maps

MANAGER AGENT

“All the Things!”

“AT HOME” AGENT

Speed Accuracy

Company Policy Sales Quota

AGENT

Service Knowledge

Complex Trips Packages

“AT HOME” AGENT

“James” “Randy” “Bobby”

http://blog.mailchimp.com/new-mailchimp-user-persona-research/

#2 PREPARE YOUR CONTENT

CONTENT

Will your content scale to mobile? Do you have legacy content you need to reformat or even rethink? Are your images legible at smaller sizes, are your videos compressed well enough, are your workflows able to move to a smaller screen?

Is your content ready for mobile?

RESPONSIVE

■ Services / APIs ■ Video compression ■ Content size / compression ■ Vendors (chat, reviews, images,

“widgets” etc…)

“How about…”

#3 PROTOTYPING

CONCEPT

What is the best way to create usable, enjoyable, fast experiences for your users or customers? Do you need new services? Does it make sense for all your features? Do you need new mobile specific features?

Are your features, UI, workflows ready for mobile?

“Agile methods like Scrum and XP both rely on a close and collaborative relationship and continual interaction with the customer – the people who are paying for the software and who are going to use the system.”

http://swreflections.blogspot.com/2012/02/agiles-customer-problem.html2001

(literally 100s) http://looksgoodworkswell.blogspot.com/2012/11/list-of-mockupprototyping-tools.html

http://www.adaptivepath.com/ideas/rapid-prototyping-tools#thelist

valuable usable enjoyable

are we building the right things?

Is it easy to use?

Do they want to use it?

EvaluateTest

PrototypeKeep/Kill(Build)

(Measure)

(Learn)

#1 CONTEXT #2 CONTENT #3 CONCEPT

3 Tips for going Mobile / Responsive

Austin / Dallas / Seattle

Design + Technology

People + Technology

We don’t just ask. We observe.

Contextual Inquiries

Customer ValidationUsability Study

Concept Validation

http://www.mindtheproduct.com/2012/08/how-user-research-can-help-prioritise-product-requirements/

I’m ready. What’s next?

■ Do I go native? ■ What about Hybrid solutions? ■ Can I just go web?

NATIVE.

■ Most fluid/fast experience ■ Easier to move to new iOS versions ■ Not dependent on 3rd party APIs ■ More likely to get App Store attention ■ Can use new phone features faster

Why Native?

HYBRID.

■ Less burden on native resources ■ More reuse across properties ■ Use native where it makes sense / use web

where it makes sense ■ Reuse some current skill-sets

Why Hybrid?

HYBRID CAN MEAN…

■ Written in JS, but compiled to native Android & iOS (ex. titanium)

■ Written in C#, but compiled to native Android & iOS (ex. xamarin)

■ Written in HTML/JS but wrapped in native, with some hooks to native functionality (ex. phonegap)

■ Written in native iOS and Android, but with some screens or flows rendered in HTML (ex. using webview)

Web Content (webview)

Native Component

Native Component

Native Component

“…we doubled down on native navigation, while reaffirming our webview-core architecture. In the jump to our 3 [Generation] app, we’re taking our productivity spoils and spending them where they can make a difference.”https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content

WEB.

■ Reuse your current base of web developers ■ Have a product reason to have the same

experience on a .com ■ Already have a web property ■ Accessed from a URL ■ Reuse across web / app ■ Responsive or Adaptive

Why Web?

RESPONSIVE

ADAPTIVE=

RESPONSIVEResponsive is where you have all the same features of your current site but via breakpoints it “responds” down to different devices.

■ Customers expect the same content and features ■ One set of templates to maintain ■ Works across a number of devices

Why Responsive?

OUR RESPONSIVE APPROACH

OUR APPROACH

■ The biggest mental shift in design/dev for responsive is learning to think fluidly. ■ The question "How many pixels wide?" is now a red herring. ■ Instead, you have to think proportionally, and in percentages.

OUR TOOLS

■ Sass (and Compass) have been invaluable. / http://sass-lang.com / http://compass-style.org ■ It allows you to have small, topical (S)CSS files, and combine them into larger files that (don't)

have media queries. ■ This approach has allowed us to support older versions of Internet Explorer (prior to IE9) as

well as modern browsers that do understand media queries. ■ Also, just for front-end templating, Middleman (or Serve) is helpful. It handles Sass

compilation, as well as JavaScript minification and concatenation. / http://middlemanapp.com / http://get-serve.com

OUR STACK

■ Irrelevant. Except that Sass (and Compass) require Ruby to compile. ■ Any server-side stack should be able to support a responsive approach.

RESPONSIVE IS BECOMING MORE MATURE

A number of good, solid frameworks (if needed)

A number of good 3rd party solutions (if needed)

http://www.highcharts.com/

http://getbootstrap.com/

http://foundation.zurb.com/

* We tend NOT to use large frameworks, but lighter smaller components as needed.

“Because at Google we are aiming to provide a great user experience on any device, we're making a big push to ensure the search results we deliver reflect this principle.”

https://www.seroundtable.com/google-user-experience-ranking-19278.html

Google: Bad User Experience For Mobile Users May Lead To Ranking Issues

http://www.google.com/think/multiscreen/whitepaper-sitedesign.html

ADAPTIVEAdaptive is where you have custom templates per device type you want to target. This works best when you have specific features or interactions you want across different devices.

■ Custom experience per device / time / location ■ You don’t have the frontend skill-set for Responsive ■ You already have a m.dot site

Why Adaptive?

ADAPTIVEHow do I know what our user’s needs are, and if they’re different?

Qualitative Quantitative

ex. “Via observation we found out that your users will only use alerts and limited content when on the go.”

ADAPTIVE

ex. “Via data we’ve found that tablet usage increases 200% after work hours, we need to make sure all our features work well on tablets.”

Contextual Inquiries

Customer ValidationUsability Study

Concept Validation

NativeHybridWeb

NativeHybridWeb

DESIGN

Fluid Breakpoints

#1 #2 #3

#1

#2

#3

Fluid

VIEWBusiness Innovations 324,872 45%

#1

VIEWBusiness Innovations 324,872 45%

VIEWBusiness Innovations 324,872 45%

VIEWBusiness Innovations 324,872 45%

VIEWBusiness Innovations 324,872 45%

Business Innovations 324,872 VIEW45%

#2

Business Innovations 324,872 VIEW45%

Business Innovations 324,872 VIEW45%

Business Innovations 324,872 VIEW45%

Business Innovations

324,872

VIEW

45%

#3

Business Innovations

324,872

VIEW

45%

CASE STUDY(RESPONSIVE)

Start with a fluid grid

Content Inventory

Breakpoints for devices(But, keep it fluid)

1 2

Be thoughtful about your breakpoints and how it works with your content.

1 2

Tools

OUR TOOLS

■ Sass (and Compass) have been invaluable. / http://sass-lang.com / http://compass-style.org ■ It allows you to have small, topical (S)CSS files, and combine them into larger files that (don't)

have media queries. ■ This approach has allowed us to support older versions of Internet Explorer (prior to IE9) as

well as modern browsers that do understand media queries. ■ Also, just for front-end templating, Middleman (or Serve) is helpful. It handles Sass

compilation, as well as JavaScript minification and concatenation. / http://middlemanapp.com / http://get-serve.com

Responsive, Live Style Guide

Device / Browser Testing

http://mattkersley.com/responsive/

Chrome Tools

Launch & Learn

The future?

http://gigaom.com/2014/06/20/android-wear-features-on-display-in-new-google-made-video/

http://www.slideshare.net/philiplikens/stitching-together-a-ux-strategy-for-wearables-and-the-mobile-mainframe

https://twitter.com/lukew/status/479649353791836160/photo/1

Thanks!

Questions?

@jeremyjohnson

Jeremy Johnson Director of User Experience @

214-228-2894

.com

jeremy.johnson@projekt202.com@projekt202