Mobile DesignStrategic Solutions Theresa Neil

6AM 9AM 12PM 6PM 9PM 12AM

I work as a consultant, helping companies with their UX Strategy.

Theresa Neil

UX strategy is about designing for....

DISTRIBUTED EXPERIENCES

MULTISCREEN ECOSYSTEMS

CONTINUITY

PEOPLE’S NEEDS

CONTEXT

CONVERGENCE

My recent travel experience to Europe

Lufthansaʼs User Experience

Classic Web Site

Native Tablet App

Mobile Optimized Site

Kiosk

In Flight Entertainment

Native Mobile Apps

Netflix in my house

kitchenliving room

game room office

Netflix in my house

kitchenliving room

game room office

and outside

TV (Boxee) Game Console (XBox) Game Device (Playstation)

Classic Web Site Hybrid Tablet Apps Hybrid Mobile Apps

Netflixʼs User Experience

UX strategy is about aligning the purpose of a product with the userʼs requirements at any given time or in any given situation. http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem

http://www.slideshare.net/Rachel_Hinman/the-mobile-frontier-11393284

http://www.shmula.com/customer-journey-map-continuous-improvement/10494/

How do we do that?

1.Gain empathy and clarity on exactly what our customers go through when they interact with our service.

2.Identify key areas where we can improve their experience.

http://www.shmula.com/customer-journey-map-continuous-improvement/10494/

How do we do that?

1.Gain empathy and clarity on exactly what our customers go through when they interact with our service.

2.Identify key areas where we can improve their experience.

http://www.shmula.com/customer-journey-map-continuous-improvement/10494/

How do we do that?

1.Gain empathy and clarity on exactly what our customers go through when they interact with our service.

2.Identify key areas where we can improve their experience.

Pain point

Pain pointPain pointPain point

Pain point

Pain point

Pain point

Starbuckʼs found that technology can address some of these pain points,

Ordering/Waiting PayingLocating

And recently added even more improvements...

Reload card

What does your customerʼs journey look like?

What does your customerʼs journey look like?

Pain point

Pain pointPain pointPain point

Pain point

Pain point

Pain point

Where are their pain points?

Responsive Site Native App

Optimized Sites Hybrid App

Web InstalledAnd /Or

What mobile solutions are available to help

with these pain points?

Responsive Site Native App

Optimized Sites Hybrid App

Web InstalledAnd /Or

Defined Web site responds to the environment using css media queries. Typically achieved by using fluid grid layouts, like Responsive Grid System, Bootstrap, from Twitter, or Foundation by Zurb.

Responsive Web Site

Responsive Web Site

UIWindow 768 x 1024

Cisco London 2012

Responsive Web Site

Ideal For Informational Web SitesPortfoliosContent Consumption Sites

• Newspapers• Magazines• Blogs

Boston Globe

Weʼre going to deep dive into responsive design a bit later...

Optimized Web Sites

Defined Multiple web sites, each optimized for a different form factor, and different usage needs.

0 25 50 75 100

At Home

On The Go

While Shopping

At Work

On Public Transport

Optimized Web Sites

Defined Multiple web sites, each optimized for a different form factor, and different usage needs.

0

20

40

60

80

At Home AM To/From School/Work At School/Work Out and About At Home PM

SmartphoneTabletLaptop

Optimized Web Sites

Defined Multiple web sites, each optimized for a different form factor, and different usage needs.

Optimized Web Sites

Classic Web Site Tablet Web Site

Mobile Web Site

Some companies have three distinct sites...

Optimized Web Sites

Amazonʼs Classic Web Site & Tablet Site Mobile Web Site

More often there are only two distinct sites.

Optimized Web Sites

But this may change in moving forward:

In January, Adobe reported that tablet users spend more than 50 percent more for each transaction at an online retailer site compared to smartphone users and 20 percent more than traditional computer users.

http://success.adobe.com/assets/en/downloads/whitepaper/13926_digital_marketing_insights.pdf

Optimized Web Sites

http://monetate.com/2011/12/the-10-best-tablet-friendly-website-experiences-of-2011/

Optimized Web Sites

jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site

The mobile version is streamlined for core activities.

Ideal For RetailSearchSaaS productsOther web apps

Optimized Web Sites

Basecamp

After we look as responsive design, weʼll dig into mobile optimized site design

Native Apps

Defined An application that has been developed for use on a particular platform or device.

Typically native apps are coded with:Objective C for AppleJava for Android and BlackBerryC# or Visual Basic for Windows 7.5

But there are also other options:Ruby MotionMonoTouch and MonoDroidAdobe AIR

Adobe Flex 4.5 Showcase Apps

Native Apps

Xamarian MWC 2012 App C#, MonoTouch, MonoDroid

Native Apps

Angry Birds

Native Apps

Skype

Ideal For RetailFinancialSoftware (productivity tools)GamesMany Enterprise Apps

Benefits over HybridBetter Performance

Native Apps

Keynote (like PPT for Apple)

After lunch weʼll look at design patterns and anti-patterns for native applications

Hybrid Apps

Defined A ʻnative wrappedʼ web application. Products like Titanium and PhoneGap create a native wrapper that lets the Javascript (or Ruby or Python) access OS dependent operations.

Hybrid Apps

Development Frameworks Most support HTML5 and CSS3 so you can create custom UIs for different platforms.

But BewareSome frameworks offer a ʻdrag and dropʼ IDE that force all of your apps to look like identical, regardless of the target OS/device.

Hybrid Apps

Netflix

http://functionsource.com/post/netflix-feature

Hybrid Apps

NBC-Built with Titanium

IPad & iPhone apps are nice, but not shoehorned onto an Android phone.* This is not a limitation of Titanium, just a poor design decision by NBC.

Hybrid Apps

Differences Across Devices

Gestures

Interaction Paradigms

Navigation

Functionality

http://www.lukew.com/ff/entry.asp?1073http://www.lukew.com/ff/entry.asp?1370

Hybrid Apps

LinkedIn does a great job of designing and developing for multiple mobile platforms

Ideal For Software (productivity tools)Enterprise Apps Video PlayersRetail

DrawbacksPerformance

Benefits over NativePossibly lower costs

Hybrid Apps

Facebook

http://www.readwriteweb.com/mobile/2012/01/hybrid-html5-apps-are-more-les.php

Before weʼre done, weʼll weigh in on the native vs hybrid debate

Responsive Site Native App

Optimized Sites Hybrid App

Web InstalledAnd /Or

Letʼs deep dive into each of these options

Responsive Site Native App

Optimized Sites Hybrid App

Web InstalledAnd /Or

Responsive Deep Dive

What is Responsive?

Layout Patterns

Mobile First Segue

Navigation Patterns

Sketching/ Wireframing/Prototyping

Visual Design

Why Responsive?

Future ProofWill work on devices that aren’t even created yet

Cost SavingsBy reducing duplication and simplifying maintenance

It is not a fad, it is the new best practice for web sites

Why Responsive?

Future ProofWill work on devices that aren’t even created yet

Cost SavingsBy reducing duplication and simplifying maintenance

It is not a fad, it is the new best practice for web sites

Notice I didʼt say “best practice for web apps”

People are frequently consuming web content from a device other than a laptop/desktop. A responsive design will work across devices, providing people with the content they seek. http://www.abookapart.com/products/mobile-first/

Responsive Grid Systems

The design adapts itself to the to the user’s behavior based on screen size, platform and orientation, by using a series of grids.

The most common are grids are:12 column10 column

But you can also find:24 column18 column8 column, etc..

Or make your own. http://www.alistapart.com/articles/fluidgrids/

This is accomplished by setting resolution “break points” and applying a different set of layout rules and media assets to each. A break point can be thought of as a conditional statement that determines if a device meets specific criteria like a minimum width of 600 pixels. If that condition is true, then the browser applies a different set of layout rules.

With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.

Media Queries

Responsive Design: Layout Patterns

Mostly Fluid Column Drop Layout Shifter

Tiny Tweaks Off Canvas

http://www.abookapart.com/products/mobile-first/

Layout Patterns: Mostly Fluid

https://sifterapp.com/

I dubbed this pattern "mostly fluid" because the core structure of the layout really doesn't change until the smallest screen width. Instead, the design mostly relies on fluid grids to adapt to a variety of screen sizes.

-- Luke W

Layout Patterns: Column Drop

This pattern starts with a multi-column layout and ends up with a single column layout, dropping columns along the way as screen sizes get narrower. The overall size of elements in this layout tend to stay consistent. -- Luke W

Layout Patterns: Layout Shifter

This pattern does the most to adapt across different screen sizes. That is, different layouts are used on large, medium, and small screens. Because this inherently requires more work, it seems to be less popular. -- Luke W

http://mediaqueri.es/awa/

Layout Patterns: Tiny Tweaks

-- Luke W

Simple sites with a single column layout, multi-device adaptation can just be a few tiny tweaks to font sizes and image layout

Layout Patterns: Off Canvas

This pattern advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it. This pattern is showing up in a sites and apps. -- Luke W

Responsive Design: More Layouts

Mondrain Basic Gallery

Responsive Design: More Layouts

Mondrain Basic Gallery

Responsive Design: More Layouts

Featured Items Column Flip

Responsive Design: More Layouts

Featured Items Column Flip

Responsive Design: More Layouts

Feature Shuffle

http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/

Last five patterns courtesy of Joshua Johnson

Responsive Design: More Layouts

Feature Shuffle

http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/

Last five patterns courtesy of Joshua Johnson

Whatʼs the pattern?

Whatʼs the pattern?

Break

Mobile First is...

A different way of thinking

Mobile First is...

A different way of thinking

Agreement on what matters most

Mobile First is...

Knowing your users

Mobile First is...

Knowing your users

What they do and why they do it

Four critical (mobile) behaviors

Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.

Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.

Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.

Edit/Create (urgent change/micro-tasking): I need to get some- thing done now that can’t wait.

Mobile First is...

About reduction

When I say “simple”, what I mean is: A product reduced to its purest form of purpose or value. --Francisco Inchauste

http://www.simpleandusable.com/

Mobile First results in...

A user experience focused on key tasks

Mobile First results in...

A user experience focused on key tasks

For the BBC thatʼs top stories and most read

Mobile First thinking works for...

Responsive Site Native Apps

Optimized Sites Hybrid Apps

Mobile First thinking works for...

Responsive Site Native Apps

Optimized Sites Hybrid Apps

Responsive Navigation Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Top Nav or “Do Nothing” Approach

One of the easiest-to-implement solutions for navigation is to simply keep it at the top. Because of its ease of implementation, it’s found on many (maybe even most) responsive sites right now.

-- Brad Frost

DrawbacksWhere’s the content? Stacked tabs make the whole page about navigation.

Responsive Navigation Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

The footer anchor

This clever solution keeps the nav list at the footer of the site, while the header contains a simple anchor link pointing to the footer nav. This approach clears up a lot of room for the core content while still providing quick access to the navigation.

-- Brad Frost

Responsive Navigation Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

The select menu

One way of taming nav links gone wild is to transform a list of links into a select menu for small screens. This avoids the problems the top nav approach presents and is a clever way to save real estate.

-- Brad Frost

DrawbacksSelect menus are for choosing your state or security question, not navigating a site.

http://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern

In my mind there’s only one form element that should ever be used for navigation and that’s search. -- Andy Clarke

Responsive Navigation Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

The toggle

The menu slides open right in the header. It’s a good-looking approach and is relatively easy to implement. -- Brad Frost

http://filamentgroup.com/lab/responsive_design_approach_for_navigation/

How to implement

Responsive Navigation Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

The left nav flyout

The nav is accessed by a menu icon, which reveals a tray that slides in from the left and moves the main content over to the right. -- Brad Frost

http://jasonweaver.name/lab/offcanvas/technical/

DrawbacksSophisticated, lots of moving parts. Allow plenty of time for testing across many devices.

Possible SolutionsFoundations framework offers 4 options for off canvas navigation

http://foundation.zurb.com/

Responsive Navigation Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Footer only

The footer-only navigation is similar to the footer anchor approach, only without the anchor in the header. It follows the content-first, nav-second model, however it requires mobile users to scroll all the way to the bottom in order to navigate the site. -- Brad Frost

Responsive Navigation Anti- Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Hide ʻn Cry

Removes a bunch of options. A big no,no. Don’t penalize people for visiting your site on a mobile device.

Responsive Navigation Pattern

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

Pull Down

Responsive Frameworks

Responsive means:fluid gridflexible mediamedia queries

A responsive framework will therefore provide:fluid gridflexible mediamedia queries at common breakpoints

Responsive Frameworks

Responsive Frameworks

Responsive Frameworks

Responsive Frameworks

Responsive Frameworks

Responsive Frameworks

Responsive Frameworks

Responsive Frameworks

Responsive Toolkits

These toolkits provide basic styles to use as your foundation (hence the term boilerplate)

Now can we start designing? http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/

Responsive Design: Sketching

Sketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

Responsive Design: Wireframes

Stencil/ Template: Less Stencil for OmniGrafflehttp://graffletopia.com/stencils/745

Responsive Design: Wireframes

Photoshop PSDhttp://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

Res

pons

ive

Des

ign

Exer

cise

Static wireframes. This is something I feel we need to get away from. There’s nothing from stopping talented UX designers from designing these flexible systems in the browser itself.

Establishing the grid system on paper to get the concept and flow down is great, but I’m a strong proponent of moving into the real environment as soon as humanly possible. ---Brad Frost

Less

More

Responsive Design: Prototyping

Responsive Wireframes- just an example http://www.thismanslife.co.uk/projects/lab/responsivewireframes

Responsive Design: Prototyping

Fluid Gridshttp://fluidgrids.com/

Responsive Design: Prototyping

Gridpak Grid Generatorhttp://gridpak.com/

Validate the prototypes on the target devices with actual usershttp://bradfrostweb.com/blog/mobile/support-vs-optimization/http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Responsive Visual Design

Look and FeelGo simple with your mobile site. You don’t need a lot of images, or CSS3 effects, they take time to load

FontUse standard mobile font sizes for easy reading

Advanced CSS StylesLet the site gracefully degrade in older browsers

Responsive Images Next page...

Responsive Images

Goal

Have a clear image on any device, but not download multiple images.

There are dozens of approaches for this, Javascript, Server Side, combined approaches, Image resizing services. None are perfect yet, but they are evolving rapidly. http://blog.cloudfour.com/responsive-imgs-part-2/

QA Testing Responsive Sites

Allocate more time and budget for QA and testing responsive sites.

Emulators are helpful, but youʼll need to test on real devices.

My devices, July 2012

Mobile Optimized Deep Dive

Responsive vs Mobile Optimized Sites

Dos and Dontʼs for Mobile Sites

Optimized Sites for Retail, Search, SaaS, and Entertainment

Responsive vs Optimized Sites

InformationalContent Heavy

• Newspapers• Magazines• Blogs• Portfolios

Web Sites Web Apps

SearchSaaSProductivity Tools Retail

Responsive Optimized Site

Responsive vs Optimized Sites

Harvest Time Tracking & Invoicing SaaS

Responsive vs Optimized Sites

Harvest Time Tracking & Invoicing SaaS

Is responsive design a good solution?

Responsive vs Optimized Sites

No, but a mobile optimized site could be.

http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/

BETA

Responsive vs Optimized Sites

And, it turns out it is a great solution!

Optimized Sites for SaaS

Basecamp File Sharing & Proj Mgmt

We could apply a responsive layout pattern to Basecamp

Column Drop

Optimized Sites for SaaS

But Mobile First says to know your users

Basecamp userʼs needs fall into these two categories:1.Checkin/status2.Edit/create

A mobile optimized site provides a solution for these needs.

Optimized Sites for Productivity

Googleʼs suite of productivity tools are optimized for the mobile web

Optimized Sites for Search

Bing offers a mobile web experience that is distinct from their classic web site.

The mobile site offers results relative to my location

Optimized Sites for Retail

Gap

Optimized Sites for Entertainment

Walmartʼs Vudu Optimized for tablets

Mobile Web Doʼs and Dontʼs

Doʼs

Use Image SpritesBundle & minify CSS and Javascipt filesLimit or remove dependencies on heavy JS librariesUse CSS3 for styling, rounded corners, text shadows...

Make content most importantFocus on performance

http://www.w3schools.com/css/css_image_sprites.asp

Mobile Web Doʼs and Dontʼs

Dontʼs

Add back buttons

Use large images and size down

Go crazy special effects/transitions

Port a web app 1-for-1

Mob

ile O

ptim

ized

Site

Red

esig

n

Mob

ile O

ptim

ized

Site

Red

esig

n

More than 30 billion page views per month

Craigslist users post more than 50 million new classified ads each month

More than 200 million user postings in 100 topical forums

Mob

ile O

ptim

ized

Site

Red

esig

n

Share your mobile first design*

* based on assumptions since we donʼt have real user data

http://saforian.com/blog/2011/04/sketching/

Responsive Site Native App

Optimized Sites Hybrid App

Web InstalledAnd /Or

Native App Deep Dive

Native App vs Mobile Site

Native App vs Hybrid

Application Design Patterns

Design Anti-Patterns

Native App vs Mobile Site

At this point in time, native apps can target the specific limitations and abilities of each individual device much better than a website can while running inside a browser.

Mobile SitesSearchSaaSProductivity Tools Retail

Native AppsGamesTools requiring:• Complex Calculations• Reporting/Charting• Native Functionality• Offline Access

http://www.useit.com/alertbox/mobile-sites-apps.html

Evernoteʼs Strategy

Native Apps

Evernoteʼs Strategy

Because they provide the best UX

Evernoteʼs Strategy

Because they provide the best UX

Evernoteʼs Strategy

Because they provide the best UX

Evernoteʼs Strategy

Because they provide the best UX

Evernoteʼs Strategy

Because they provide the best UX

Evernoteʼs Strategy

Because they provide the best UX

When to go Native

Non Tech Considerations: MarketingA presence in the mobile markets might make sense from a marketing, competitive, or sales channel perspective.

When to go Native

Non Tech Considerations: FinancialFinancial Times, Playboy and Walmart are using sites instead of apps to avoid sharing revenues with app store owners.

Native App vs Hybrid

This isn’t black & white With big players like LinkedIn and Facebook successfully launching hybrids, it looked like a shift might be imminent.

But Facebook has recently rebuilt the iOS app with Objective C, primarily to improve the performance.

http://bits.blogs.nytimes.com/2012/06/27/facebook-plans-to-speedup-its-iphone-app/?smid=tw-share

Hybrid Hopes

Companies want the best of both worlds via hybrid apps, but so far the ideal technology remains elusive.

Another recent NYT article explains

--Mike Summers, head of Viggle

“You are aiming for this mythical single platform on which your developers can write code in one language and—as much as possible— is usable across multiple platforms.”

http://www.xconomy.com/new-york/2012/07/06/hybrid-vs-native-viggle-new-york-times-talk-mobile-app-strategy/2/

Hybrids: Code Once & Reuse

Doesnʼt mean design once & reuse

iPhone Android

The New York Times should know better!

Boston Globeʼs Multiscreen Experience

Responsive Site Native Apps

And

ePaper apps

Optimized Sites

eBayʼs Cross Multiscreen Experience

Native Apps

And

Recent ProjectLeukemia & Lymphoma Society

The user journey got us thinking about many possible options

Responsive Site Native App

Optimized Sites Hybrid App

Web InstalledAnd /Or

Responsive Fundraising Site

Team in Training Fundraising Page

Responsive Web Site

Responsive Donation Form

Hybrid Apps

eCheckin App Participant Tools

Mobile App Design Patterns

NavigationFormsTablesSearch, Sort & FilterToolsChartsInvitationsFeedback & Affordance Help

App Patterns: Navigation

Springboard List  Menu Tab  Menu Gallery

Dashboard Metaphor Mega  Menu

App Patterns: Navigation

Springboard List  Menu Tab  Menu Gallery

Dashboard Metaphor Mega  Menu

http://www.slideshare.net/theresaneil/navigation-patterns-for-mobile-apps

App Patterns: Forms

App Patterns: Tables

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Search

App Patterns: Sort

App Patterns: Sort

App Patterns: Sort

App Patterns: Filter

App Patterns: Filter

App Patterns: Filter

App Patterns: Filter

App Patterns: Filter

App Patterns: Filter

App Patterns: Filter

App Patterns: Filter

Redesign Craigslist Search

App Patterns: Tools

App Patterns: Charts

App Patterns: Invitations

App Patterns: Feedback

App Patterns: Affordance

App Patterns: Help

Design Anti-Patterns: Novel Notions

Design Anti-Patterns: Novel Notions

Design Anti-Patterns: Novel Notions

Design Anti-Patterns: Metaphor Mismatch

Design Anti-Patterns: Metaphor Mismatch

Navigation disguised as filters

Design Anti-Patterns: Metaphor Mismatch

Filter controls done right

Design Anti-Patterns: Metaphor Mismatch

Design Anti-Patterns: Idiot Boxes

Design Anti-Patterns: Chart Junk

Design Anti-Patterns: Chart Junk

Design Anti-Patterns: Chart Junk

Design Anti-Patterns: Chart Junk

Design Anti-Patterns: Oceans of Buttons

Design Anti-Patterns: Oceans of Buttons

Design Anti-Patterns: Oceans of Buttons

Prototyping Mobile Apps

Mobile Prototyping is essential

The field is new, even experienced designers donʼt have the background and heuristics to lean on while making decisions.

Prototype Prototype Prototype Prototype

Why Prototype?

Improve your design decision making

Communicate an idea

Gather user feedback

Explore the “unknowns”

Fine-tune an idea

http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364

Two Types of Prototyping

ExperientialBroader mobile project Target mobile hardware is unknownDesign space is relatively uncharted

TacticalFocused mobile project Target mobile hardware is decidedDesign space is relatively known

PROVIDES CONTEXT

VALIDATION

http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364

Prototyping Expert : Rachel Hinman

http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364

Prototyping Expert : Rachel Hinman

http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364

Prototyping exercise

Check out my site & bookMobile Design Pattern Gallery, OʼReilly 2012

Thank you Follow me on Twitter @theresaneil