Three part series - Designing for multiple devices - GA, London, 13 Feb 2014

Anna Dahlström www.annadahlstrom.com

annadahlstrom

A FULL DAY OF… Designing for multiple devices 13 February 2014

http://www.annadahlstrom.co

www.flickr.com/photos/dahlstroms/4411448782

I’m Anna IA & UX designer | freelance since 2011 Swedish | in London since 2006

http://www.flickr.com/photos/dahlstroms/4411448782/

Today 10am - 5.30pmPart 1: Understanding the multiple device landscape

Practice

Lunch

Part 2: Practicalities of multiple device projects

Practice

Break

Part 3: Adapting to input, orientation & the future

Practice

Q & A

10 am

!

12 pm

1 pm

!

3 pm

3.30 pm

Part 1: Understanding the multiple devices landscapeIntroduction & defining your mobile strategy

www.flickr.com/photos/pagedooley/2121472112

The world we design for has become more complex


www.flickr.com/photos/jorgeq82/4732700819

We used to only have to deal with different browsers, and the fold

http://desktopwallpaper-s.com/19-Computers/-/Future/

www.flickr.com/photos/adactio/6153481666

Today it’s browsers AND endless numbers of devices & screen sizes


www.flickr.com/photos/nasamarshall/6289116940

In 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to 13% and by2015 it’s expected to be above 50%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile



www.flickr.com/photos/helga/3952984450/

I have a job that is unknown to many I’m a freelance IA & UX designer

www.flickr.com/photos/hlkljgk/5764422581

For every human that enters the world, five mobile devices are created.* * Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx




www.flickr.com/photos/raincitystudios/95234968

As of Q3 2012 we passed 1 billion smartphones in use


www.flickr.com/photos/jayfresh/3388253576

41% of emails are now opened on mobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices



By the end of 2013, mobile phones will overtake PCs as the most common web access device worldwide* Source: www.gartner.com/newsroom/id/2429815

Image courtesy of Shutterstock

http://www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods

http://www.flickr.com/photos/theirmind/5001267661/


The average person looks at their phone 150 times a day.* * Source: www.textually.org/textually/archives/2012/02/030229.htm



www.flickr.com/photos/exlibris/2552107635

40% of people use their phone in the bathroom. * * Source: http://www.lukew.com/ff/entry.asp?1500



We go online everywhere and anywhere




The old myth that mobile users are rushed & on the go doesn’t hold true


www.flickr.com/photos/edduddiee/4307943164

A large proportion of our usage happens when we have time to kill


www.flickr.com/photos/eyesore9/3206408088

This has implicationsfor UX & design thinking.

http://www.flickr.com/photos/eyesore9/3206408088/

www.flickr.com/photos/frantaylor/4296536332

Before the first iPhone the mobile use case was limited


http://desktopwallpaper-s.com/19-Computers/-/Future

DESKTOP FULL WEBSITE

BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE

We built separate sites for mobile & desktop


www.flickr.com/photos/demandaj/7287174776

In fact, we still do but we’re noticing something

http://www.flickr.com/photos/demandaj/7287174776

www.flickr.com/photos/joachim_s_mueller/7110473339

Users expect an equal & continuous experience across devices


www.flickr.com/photos/pandiyan/4550066009

“ 7 out of 10 smartphone and tablet users expect the same quality of experience on all devices. ” * * Source: www.vibrantmedia.co.uk/press/press.asp?section=press_releases&id=256



www.flickr.com/photos/martinteschner/4569495912

There are a number of reasons for this

http://www.flickr.com/photos/martinteschner/4569495912/

www.flickr.com/photos/philippe/2462550872

People carry out the same tasks on mobiles as they do on desktops


“ More than half of Amazon customers shopped using a mobile device this holiday. ” * * Source: http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1886961&highlight=

http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1886961&highlight=

www.flickr.com/photos/joeybones/6791201819

Devices & services are getting more advanced & optimised for complex tasks


www.flickr.com/photos/soyproject/6066959891

We no longer own just one device but multiple & use them interchangeably


www.flickr.com/photos/visualpunch/7351572896

We want to find what we’re looking for irrespectively of the device we use


www.flickr.com/photos/icedsoul/2486885051

Mobile context ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience




BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE

Having separate sites does, for the most part, not make sense


www.flickr.com/photos/tomitapio/4053123799/in/photostream

So, what should we do?

http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/


Our main options are bespoke mobile sites, responsive sites and apps




BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE

Bespoke mobile sites have a separate url & means maintaining different sites


FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

Responsive sites have the same url & is basically “one site”



www.flickr.com/photos/paul-r/217948368

Apps, well we all know they come from app stores



How do we know when to do what?


www.flickr.com/photos/edenandjosh/2892956576

Bespoke mobile sitesshould be avoided, if we can

http://www.flickr.com/photos/edenandjosh/2892956576/

www.flickr.com/photos/lastquest/1472794031

“Today’s popular devices aren’t tomorrow's so building something which works on any device is better than building something which works on today’s devices”

- Combined wise words from @oneextrapixel & @trentwalton


www.flickr.com/photos/st3f4n/3476036180

Two main exceptions:technical limitations to the CMS, or if required for the audience


www.flickr.com/photos/ericconstantineau/5618576278

The alternative is messy & costly


www.flickr.com/photos/nikio/3899114449

It means maintaining multiple technical solutions...


www.flickr.com/photos/sharynmorrow/127184319

...and also maintaining multiple versions of your content


www.flickr.com/photos/bulldogsrule/187693681

Realistically that means making cuts & frustrating users


For the first time smartphones and tablets made up more than one-third of total clicks on Google in Q3* * Source: http://econsultancy.com/uk/blog/63605-us-mobile-paid-search-spend-up-66-year-on-year-stats

www.flickr.com/photos/antoniolas/4367543346



www.flickr.com/photos/sixmilliondollardan/2493495506

Poor mobile experiences result in the same thing - drop offs


Keep the core content the same & optimise the experience, display & interactions to the device



Meet responsive design

www.flickr.com/photos/taytom/5277657429

http://www.flickr.com/photos/paperpariah/4301471586/


But...what about apps?



Whether to do an app or not comes down to...



User & business objectives...

If you need to utilise device specific capabilities...

www.flickr.com/photos/cindyli/3784225848


www.flickr.com/photos/arjencito/6531640463

If offline reading is required...



And of course budget


www.flickr.com/photos/andwhynot/2946734025

Analytics of entry points can also provide some guidance


www.flickr.com/photos/haagsuitburo/5349040355

Mainly direct traffic: could be an argument for an app


www.flickr.com/photos/soundslogical/4255801733

Mainly shared links: ensure your site is optimised for mobile


www.flickr.com/photos/dougbelshaw/4360008898

“ Don’t build an app for the sake of it. Focus on the goal of your mobile initiatives, prioritize your company’s needs, and choose a solution that can best address these needs now and into the future.* ” * Source: http://success.adobe.com/en/na/programs/products/digitalmarketing/offers/apr/1304-32060-2013-optimization-survey-results.html



App design

www.flickr.com/photos/jdhancock/4354438814

Apps are focused & personal

http://www.flickr.com/photos/flatworldsedge/5151764959/

www.flickr.com/photos/nrkbeta/3906687294/in/photostream

Not as easy as just doing an app for e.g. iOS or Android


www.flickr.com/photos/aforgrave/6168689222

Need to consider fragmentation across different versions & backwards compatibility


Source: http://developer.android.com/about/dashboards/index.html

Relative number of active Android devices across different versions

www.flickr.com/photos/blakespot/4773693893

http://developer.android.com/about/dashboards/index.html


www.flickr.com/photos/blakespot/4773693893

Comparison of adoption rate for iOS7, iOS6 and iOS5

Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker


http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1

www.flickr.com/photos/gadl/3570118243

Every platform has their own ui guidelines that their users are used to


CONSISTENT ACROSS VERSIONS !NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.

BACK BUTTON Should always take the user one step back from where they came from & be descriptive.

TAB BAR Can often be customised. Holds the main sections of the app.

‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.

Basic iOS app structure

DIFFERENT BETWEEN VERSIONS: !NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'

ACTION BAR Holds the most important action buttons for your app (3 + overflow menu)

UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site.

Back is used to navigate back one step from where you came from & as such works in reverse chronological order.

Basic Android app structure

The good that adapt to the platform

iOS iOSAndroid Android

www.flickr.com/photos/dougbelshaw/4360008898

” Money spent developing a pretty but limited iPhone app only benefits [...] the few, but money spent on the website UI would have benefitted everyone. ”

- Gary Marshall on ‘The app trap’ in .net Magazine


!

!

NATIVE APPS (e.g. Instagram)

• MOST OPTIMISED USER EXPERIENCE • ACCESS TO DEVICE CAPABILITIES & APIs • BUT REQUIRES PLATFORM SPECIFIC CODE BASE !

HYBRID (e.g. First Facebook, Basecamp)

• USE OF HTML5 & JAVASRIPT • WRAPPER TO PROVIDE NATIVE CAPABILITIES • FEWER “VERSIONS” TO MAINTAIN • BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS • CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES !

There are different types of apps

Responsive design

FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

Responsive sites have the same url & is basically “one site”




“ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. “

- Smashing Magazine



http://foundation.zurb.com/docs/layout.php

The backbone is your grid & breakpoints


Columns & gutters can be fluid or fixed, or a combination.



www.flickr.com/photos/donsolo/2136923757

The grid helps with defining modules for pages & views


“ Content needs to be choreographed to ensure the intended message is preserved on any

device and at any width “

- Trent Waltonwww.flickr.com/photos/theaftershock/2811382400


www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

Define your content stacking strategy across devices & orientation.


Identify and prioritise the content across devices & orientations

Desktop/ tablet Mobile

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad3

Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

www.flickr.com/photos/garrettc/6260768486/

Don’t just work with columns but think of the narrative of the views


http://thenextweb.com/

So that it’s carefully considered, like this


Mobile or desktop first, the key is considering the content & how it will work across devices

Time to practice

www.flickr.com/photos/pinkpurse/5355919491

A big retail store has asked you to come up with a Easter Hunt across London where offers and give aways are hidden at certain locations. There will only be a certain number of items available each day & they want to be able to notify people when an item has been found. The site/app should support finding offers nearby, and location should be a key The following should also be included:

TheBRIEF

• About page • List of offers • Product pages • Notifications

• Share (on Facebook & Twitter) • Login & registration • Overview of number of found & not found item



01

HOW WOULD MOST PEOPLE ACCESS IT? • Direct traffic vs. shared links?

!WHAT DO YOU NEED IT TO DO? • Device specific capabilities needed? • Is offline reading/ usage required?

WHAT ARE THE OBJECTIVES & PRACTICALITIES? • The budget • The current technical platform • Could an app be re-used later • The marketing value of an app

BESPOKE MOBILE SITE VS. RESPONSIVE VS. AN APP

The client has come to you with the Easter hunt idea and are asking for your advice on what they should be doing.

What would you recommend in terms of mobile presence & why? A bespoke mobile site, responsive site, an app or a combination?Consider:



02 CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work.

For the home page only do a rough sketch of what the page should contain & how the content should be prioritised.

Using content stacking methodology define how the content should be prioritised on desktop & mobile.

The client’s requirements were:• About page • List of offers • Product pages • Notifications



Define your content stacking strategy across devices & orientations


3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad3

Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

www.flickr.com/photos/garrettc/6260768486/

Don’t just work with columns but think of the narrative of the views



02 CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work.

For the home page only do a rough sketch of what the page should contain & how the content should be prioritised.

Using content stacking methodology define how the content should be prioritised on desktop & mobile.

The client’s requirements were:• About page • List of offers • Product pages • Notifications




03 APP STRUCTURE

With a better idea of the content for the Easter Hunt campaign, work also begins on the app. Based on the content & functionality requirements as well as what you know, consider what would be suitable to include in the app.

Focusing only on the app navigation how would you structure this if you were to do an iOS app & an Android app? Look at the Tab bar items respectively Action bar items & what would go in them as well as the ‘More’ respectively ‘Overflow menu’.




Lunch 12 - 1pm

Part 2: Practicalities of multiple device projectsCommon challenges, content strategy, structures, navigation patterns, testing

www.flickr.com/photos/helga/3952984450

Some of the most common challenges with multiple device designs are...



1. Knowing where to start...• Define your mobile strategy • Start sketching • And work across disciplines



2. How many versions to wireframe...• Depends on your project, budget & team as well as who’s

building it • Focus on identifying key templates & then the modules

that make up the views


www.flickr.com/photos/donsolo/2136923757

3. How to approach visual design• Less static designs • Focus on modules & modularity • Continuously prototype to test how the content behaves


www.flickr.com/photos/dpstyles/3448453466

4. What screen sizes & which resolutions?• Use analytics as a guidance • Ensure it works for the most common ones • Design as device agnostic as possible


www.slideshare.net/yiibu/pragmatic-responsive-design

5. How to define breakpoints• As much possible let the content be the guide • Use breakpoints & tweakpoints & EMS instead of px • Consult analytics for devices to identify most important

screen sizes & ensure content displays properly for those • If all things fail, use screen sizes for mayor layout changes


www.flickr.com/photos/nomadic_lass/5598218199

6. How many devices to test on• As many as possible • Prioritise based on your audience • Use research & analytics for guidance



“ 80% of your traffic in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.* Source: * Source: www.slideshare.net/yiibu/pragmatic-responsive-design



xxx

7. How to handle images• Images & icons should be as flexible as possible • Consider load times & page weight • Look at ways for loading smaller images first • Take the image in question into consideration


Responsive navigation patterns

www.flickr.com/photos/melodramababs/2766765248

“ Mobile navigation should be like a good friend: there when you need them but cool enough to give you your space. “ * Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns



Brad Frost has written 2 excellent posts on Responsive navigation patterns

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

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design



Simple navigation patterns 1) Top nav or “do nothing” !2) The toggle !3) The left nav flyout

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

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

Top nav or “Do nothing” keeps the navigation at the top

Via Brad Frost (thank you!)

http://skinnyties.com

PROS Simple to implement

Less design & development implications

!

CONS Not scalable

Potential height issues


The toggle hides navigation items in a menu


www.smashingmagazine.com

PROS

Optimises screen use

Recognised from apps

Scalable

!

CONS

Possible animation performance problems

Javascript dependent

http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design

The left nav flyoutmenu items are accessed from a tray sliding in


Images from Barack Obama via Brad Frost

PROS

Space generous

Recognised nav pattern from apps

!

CONS

More advanced and doesn’t work on all devices


Complex navigation patterns 1) The multi toggle !2) Right to left !3) Skip the sub-nav !4) Priority+ !5) The carousel+



The multi togglenested navigation grouped under a menu


http://thenextweb.com

PROS

Scannable

Scalable

!

CONS

Animation performance


Barack Obama - image via Stephanie Rieger



Right to leftthe next level navigation slides in right to left


www.sony.com

PROS

Nice looking

Follows mobile conventions

Scalable

!

CONS

More complex to implement



Skip the sub-navnext level navigation is displayed on that level


http://worldwildlife.org

PROS

Simple

Removes complexities around sub-navigation

!

CONS

Re-quires page refresh & visit for access


Priority+shows most important & hides the rest in a menu


www.bbc.co.uk/sport

PROS

Simple

Supports (supposedly) most used)

Scalable

!

CONS

Hides potentially important items


The carousel+ carousel for main sections, sub-nav when in focus


Image from Intel via Brad Frost

PROS

Easy to navigate

Suitable for touch

!

CONS

Doesn’t display all parent categories at once

Less good for non-touch devices

Not suitable for multi-level sub-navs


Theresa Neil’sMobile Design Pattern Gallery

www.mobiledesignpatterngallery.com



Use mobile as a reason to re-consider your navigation& prioritise search


www.flickr.com/photos/inpivic/5205918163/

Consider your project: assess the depth needed as well as pros & cons of approaches



Define & work with types of navigation: primary, secondary, tertiary, footer & contextual


BBC Sport - desktop

Last but not least, consider navigation across products & keep it similar to aid familiarity

BBC Sport - mobile site

BBC Sport - app




App structures

www.flickr.com/photos/gadl/3570118243

Every platform has their own ui guidelines that their users are used to


iPhone resources help & inspiration well documented

Android resources help & inspiration a little less well documented for earlier versions

Look for inspiration

http://pttrns.com/categories/13-navigations

http://pttrns.com/categories/13-navigations

Research common approaches

www.uxarchive.com

http://www.uxarchive.com

www.flickr.com/photos/saucef/7184615025

Start by sketching screenflows, navigation & content


www.flickr.com/photos/lindzgraham/5605911999

Avoid using the home screen as a stepping point. Instead deliver value from first view


Bring users straight to what they use the most

Facebook FlipboardFeedly Hootsuite

Straight in Stepping stone

Testing apps & responsive designs

Test as early as possible& then continuously

In the browser by resizing the browser window & checking the display of content




In the browser by designing in the browser & creating a working HTML prototype


http://responsive.is/typecast.com

Using tools that help you style & test your typography before implementing it


www.responsinator.com/

http://quirktools.com/screenfly/

http://screenqueri.es/

Using emulators that allow you to view your site across devices & orientations

http://mattkersley.com/responsive/

http://www.responsinator.com




www.flickr.com/photos/arne/5835855777/in/photostream

On actual devices, though expensive there are ways around it


www.flickr.com/photos/adactio/6800969243/in/photostream

Buying bundles and sharing, hereby helping each other



With users define your objectives, audience, test cases, consider expectations & limitations


Testing apps flow, navigation, interactions, transitions

From testing sketches as paper prototypes or as clickable prototypes...

www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062



...to iterations of wireframes & designs

www.flickr.com/photos/fluent_methods/6961802861


Time to practice


04 SIMPLE RESPONSIVE NAVIGATION

Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site.

Based on what you’ve identified so far, define how the navigation will work for desktop and smartphone and explain how you came to it

Consider 1) Top nav or “do nothing”, 2) The toggle and 3) The left nav flyout in relation to what you need, future aspects, cross device patterns and the client’s requirements:• About page • List of offers • Product pages • Notifications



Top nav or “Do nothing” keeps the navigation at the top



PROS Simple to implement

Less design & development implications

!

CONS Not scalable

Potential height issues


The toggle hides navigation items in a menu


www.smashingmagazine.com

PROS

Optimises screen use

Recognised from apps

Scalable

!

CONS

Possible animation performance problems



The left nav flyoutmenu items are accessed from a tray sliding in


Images from Barack Obama via Brad Frost

PROS

Space generous

Recognised nav pattern from apps

!

CONS

More advanced and doesn’t work on all devices



04 SIMPLE RESPONSIVE NAVIGATION

Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site.

Based on what you’ve identified so far, define how the navigation will work for desktop and smartphone and explain how you came to it

Consider 1) Top nav or “do nothing”, 2) The toggle and 3) The left nav flyout in relation to what you need, future aspects, cross device patterns and the client’s requirements:• About page • List of offers • Product pages • Notifications




05 COMPLEX RESPONSIVE NAVIGATION

The client loves the work that you’ve done so far and other cities in the UK wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing offers and give aways by store (e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment).

Would this change your navigation recommendation, and if so why? Define how the navigation should work for desktop and smartphone.

Consider 1) The multi toggle, 2) Right to left, 3) Skip the sub-nav, 4) Priority+, 5) The carousel+ as well as other ways that a user could navigate to content.• About page • List of offers • Product pages • Notifications



The multi togglenested navigation grouped under a menu



PROS

Scannable

Scalable

!

CONS



Barack Obama - image via Stephanie Rieger



Right to leftthe next level navigation slides in right to left


www.sony.com

PROS

Nice looking

Follows mobile conventions

Scalable

!

CONS

More complex to implement



Skip the sub-navnext level navigation is displayed on that level


http://worldwildlife.org

PROS

Simple

Removes complexities around sub-navigation

!

CONS

Re-quires page refresh & visit for access


Priority+shows most important & hides the rest in a menu


www.bbc.co.uk/sport

PROS

Simple

Supports (supposedly) most used)

Scalable

!

CONS

Hides potentially important items


The carousel+ carousel for main sections, sub-nav when in focus


Image from Intel via Brad Frost

PROS

Easy to navigate

Suitable for touch

!

CONS

Doesn’t display all parent categories at once

Less good for non-touch devices

Not suitable for multi-level sub-navs



05 COMPLEX RESPONSIVE NAVIGATION

The client loves the work that you’ve done so far and other cities in the UK wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing offers and give aways by store (e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment).

Would this change your navigation recommendation, and if so why? Define how the navigation should work for desktop and smartphone.

Consider 1) The multi toggle, 2) Right to left, 3) Skip the sub-nav, 4) Priority+, 5) The carousel+ as well as other ways that a user could navigate to content.• About page • List of offers • Product pages • Notifications




06 APP NAVIGATION

With the initial brief having changed from London to UK wide, and with having to view offers and give aways based on store and type, we need to go back over what we recommended for the app structure.

Based on what you’ve defined for desktop and smartphone for the responsive site, how would you do the app navigation?

Consider frequency of use, a level of familiarity between web views and the app.




Break 3 - 3.30pm

Part 3: Adapting to input, orientations & the futureTouch across devices, device orientation, mobile context, device agnostic design

www.flickr.com/photos/lastquest/1472794031

“Today’s popular devices aren’t tomorrow's so building something which works on any device is better than building something which works on today’s devices”

- Combined wise words from @oneextrapixel & @trentwalton


www.flickr.com/photos/david_a_lea/3247217194

We’re already facing two particular challenges...


www.flickr.com/photos/michale/210536054

1. Breakpoints based on popular devices puts us into a corner


www.flickr.com/photos/lokan/8843464852

2. Touch is no longer limited to smartphones & tablets


Input & touch across devices

www.flickr.com/photos/patdavid/9391602153

“ Touch has landed on the desktop. “

- Josh Clark


www.flickr.com/photos/66327170@N07/7296381856

‘New rule: every desktop design has to go finger-friendly’* * Source: http://globalmoxie.com/blog/desktop-touch-design.shtml



As always... ...it depends

“ Touch screen laptop sales have jumped 52% in the last quarter. 5 years from now you will not be able to buy a Windows computer without a touch screen. ”* * Source: http://www.lukew.com/ff/entry.asp?1750

Screenshot from www.currys.co.uk




We should consider touch across all devices & screen sizes. Not just smartphones & tablets


www.flickr.com/photos/intelfreepress/6837427202

www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

The way we use touch screens differ based on device, but also across the same device

www.flickr.com/photos/janitors/9968676044






49% of users hold their phone in one hand, but how they hold it differs


ONE HAND (R: 66% L: 33%)

CRADLING (L: 79% R: 21%)

TWO HANDS

72% 28%

90% 10%

Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

Other variationsbased on 1,333 observations during 2 months


Holding our devices is not a static stage. It changes

Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php



“ Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ”

- Josh Clark


Impacts controls, placement & interactions

www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042

We need to consider precise (e.g. mouse) v.s imprecise (e.g. fingers) input means



Our current approach to navigation is based on the mouse as input

Source: Luke W - www.lukew.com/ff/entry.asp?1649



For hybrids we tend to rest arms & grab bottom corners


Source: Luke W - www.lukew.com/ff/entry.asp?1649

From...

...towards

Consider reach & obscuring content & adjust navigation accordingly


Screenshot from http://polarb.com/polls/tags/mobiledesign

“ Looking at the Polar interface on a laptop can be a bit disconcerting because we’ve essentially left the middle of the page “blank”. ”

- Luke W


www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164

Based on the context & use case, posture, grip & orientation varies



Mobile context

www.flickr.com/photos/kalexanderson/6716348037

Situational context impacts firm vs. loose grip



Mobile context ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience


The context differs based on situation, attitudes & preferences

www.flickr.com/photos/hoyvinmayvin/5873697252


www.flickr.com/photos/hoyvinmayvin/5873139941

The same context doesn’t equal the same situation


Other aspects to consider for the mobile context are...



www.flickr.com/photos/nadiya95/7217734288/

Attention span data snacking vs. focused usage


www.flickr.com/photos/arjencito/6531640463/

Signal coverage speed & reliability of the connection


www.flickr.com/photos/garry61/3191250682

Location moving about vs. in one location



The screen small, medium, large & of course touch or not


www.flickr.com/photos/helga/3545310740

Posture & grip how we sit/ stand as well as interact with the device


Reading Watching Typing

Certain orientations are betterfor certain tasks

There are three main approaches for adapting to orientation

RE-POSITION REVEAL/ HIDESCALE

www.flickr.com/photos/cayusa/534070358

Adapting to orientation AND different devices can become a bit of a mindfield



Move away from devices


Device agnostic design


Remember how we can’t successfully tell what devices users are using


The web is after all about content. Not what device we are using



www.flickr.com/photos/mirafoto/494444094

“ Get your content to go anywhere, because it’s going to go everywhere. ”

- Brad Frost


www.flickr.com/photos/byte/8282578241

Aim to make it more future proof by moving away from specific devices


www.flickr.com/photos/sharynmorrow/127184319

Use natural breakpoints based on content layout rather than focusing on devices


www.flickr.com/photos/visualpunch/7351572896

Look at what’s suitable for your content & best practice for layout principles


It’s not without challenges, but challenges are meant to be overcome



www.flickr.com/photos/nikio/3899114449

“ By default the web has no optimal width, optimal height, optimal font-size or optimal anything really. ”

- Edward O’Riordan


www.flickr.com/photos/soundslogical/4255801733

“ The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. ”

- Elliot J Stocks


www.flickr.com/photos/gozalewis/3249104929

Basing breakpoints on screen sizes is a temporary work around



Work with breakpoints & tweakpoints, focus on content layout & EMS instead of px


The same with columns, opt for fluid as much possible



www.flickr.com/photos/donsolo/2136923757/

This brings us back to the importance of modularity


www.flickr.com/photos/boltofblue/4418442567

Less about pages & more focus on the building blocks that make up those views


www.flickr.com/photos/miuenski/3127285991

No more is it about beautiful page designs...


www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666

...but about views that will look different across browsers, screen sizes & devices



www.flickr.com/photos/boltofblue/4418442567

The more you reuse, the less modules there will be to design, define and develop


www.flickr.com/photos/akrabat/9085299639

Essential for preventing ending up with too many pieces


www.flickr.com/photos/webatelier/5929299679

This helps meeting requirements across screen sizes and page views


www.flickr.com/photos/webatelier/5929855686

And, it minimises design & development efforts



Good for the future & the budget


www.flickr.com/photos/techsavvyed/5926978939

Responsive design is based on modular views rather than static pages


www.flickr.com/photos/songzhen/4893025042

Need to know what you design for in order to identify & define what modules to use where


www.flickr.com/photos/songzhen/4893025042

As well as what content variations & sizes you need for different pages & devices


Start by identifying the main module types & common

elements between pages



3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad3

Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop/ Tablet Mobile

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

Define display variations as well as the elements they are made up of



3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

Isolate elements that need to be able to break out to meet your content stacking strategy


www.flickr.com/photos/katherinekenny

Adapt to the device & screen in question; both order & priority as well as interactions, how much to show & how



3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths


Little by little you build up a module library of defined components for your views, across devices & orientations

Screenshot: www.crayola.co.uk/

“ With thousands and thousands of pages on the Crayola site, it wasn’t efficient to wireframe every single page and state. We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page. ”

- Daniel Mall


www.flickr.com/photos/75905404@N00/7126146307

How we approach it depends on your project, budget and time frame & if it’s being built externally


www.flickr.com/photos/bingisser/154452815

What we cannot do is take a waterfall approach with responsive design where we hand over from to the other


We have to work together across disciplines


This includes clients both in terms of what they can expect & what will be expected of them



Responsive design means giving up some control to ensure it works for as many devices as possible


www.flickr.com/photos/stickkim/7491816206

Ensuring that we do what’s best for our clients, our users & us as a company


Time to practice


07 MODULAR, DEVICE AGNOSTIC DESIGN

To ensure our content really can go anywhere we’re going to take a device agnostic approach to fleshing out the responsive site. For that we need to really understand the content and how it’s going to flow.

Work through the main pages of the site by identifying what content that goes on each. Define your main module types & sketch out how these modules are going to be displayed & adapted across screen sizes.

Think about natural breakpoints, good practice for display of content as well as how to reuse as much as possible between different views• About page • List of offers • Product pages • Notifications



Start by identifying the main module types & common

elements between pages



3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad3

Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad


3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

Define display variations as well as the elements they are made up of



3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

Isolate elements that need to be able to break out to meet your content stacking strategy


www.flickr.com/photos/katherinekenny

Adapt to the device & screen in question; both order & priority as well as interactions, how much to show & how



3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths


Little by little you build up a module library of defined components for your views, across devices & orientations


07 MODULAR, DEVICE AGNOSTIC DESIGN

To ensure our content really can go anywhere we’re going to take a device agnostic approach to fleshing out the responsive site. For that we need to really understand the content and how it’s going to flow.

Work through the main pages of the site by identifying what content that goes on each. Define your main module types & sketch out how these modules are going to be displayed & adapted across screen sizes.

Think about natural breakpoints, good practice for display of content as well as how to reuse as much as possible between different views• About page • List of offers • Product pages • Notifications




08 ADAPTING TO DEVICE ORIENTATION

The client has asked you to consider how the content is going to adapt based on device orientation, i.e. from portrait to landscape.

Discuss where this might be applicable and sketch up how the content could adapt based on device orientation.Consider desktop/tablet and smartphone as well as how certain orientations are better for certain tasks





www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

The way we use touch screens differ based on device, but also across the same device

www.flickr.com/photos/janitors/9968676044





Reading Watching Typing

Certain orientations are betterfor certain tasks

There are three main approaches for adapting to orientation

RE-POSITION REVEAL/ HIDESCALE


08 ADAPTING TO DEVICE ORIENTATION

The client has asked you to consider how the content is going to adapt based on device orientation, i.e. from portrait to landscape.

Discuss where this might be applicable and sketch up how the content could adapt based on device orientation.Consider desktop/tablet and smartphone as well as how certain orientations are better for certain tasks




A few final words...


Any screen should be your starting point


“ Every responsive design project is also a content strategy project. ”

- Karen McGrane




www.flickr.com/photos/jtravism/2417205289

There is no right way & the following is just one way of approaching it


!

1. Define target audiences, goals & needs (user & business)

2. Identify key user journeys

3. Identify key pages

4. Identify the content & functional requirements for each key page

5. Across all pages identify common content module types, e.g. featured product

6. Re-visit, list & prioritise the content for each page

7. From this Identify the variations that are needed for each content module type

8. Lay out the content modules across key pages (mobile or desktop first)

9. Work through layout and content stacking strategy across devices

10. Define templates for the content module types (variations & across devices)

11. Iteratively work through your pages, test & adjust modules & variations as needed

www.flickr.com/photos/poetatum/3335900523

Steps for responsive & modular design


It’s not just about the smaller screens but also the big ones

www.flickr.com/photos/jolives/2889944573/


Its’s about thinking & planning ahead

www.flickr.com/photos/jolives/2889944573


It doesn’t have to break the bank. Maintaining different versions will

www.flickr.com/photos/gi/5537770007


Be creative & challenge what exists today

www.flickr.com/photos/oter/5090592214


www.flickr.com/photos/jdhancock/4354438814

Remember to test & iterate, sketch as much as possible & work collaboratively

http://www.flickr.com/photos/flatworldsedge/5151764959/

www.flickr.com/photos/matterphotography/2739799786

“ Every time you redesign God kills a kitten “

- Louis Rosenfeld


Useful resources


http://bradfrost.github.io/this-is-responsive/resources.html

http://mediaqueri.es/popular/

http://www.alistapart.com/articles/responsive-web-design/

http://designmodo.com/responsive-design-examples/

http://jamus.co.uk/demos/rwd-demonstrations/

http://www.gridsetapp.com/

http://grid.mindplay.dk

http://goldengridsystem.com/


Responsive design 1


http://mediaqueri.es/popular/

http://www.alistapart.com/articles/responsive-web-design/

http://designmodo.com/responsive-design-examples/

http://jamus.co.uk/demos/rwd-demonstrations/

http://www.gridsetapp.com

http://grid.mindplay.dk

http://goldengridsystem.com



http://www.netmagazine.com/opinions/designing-browser

http://www.businessinsider.com/html5-vs-apps-why-the-debate-matters-and-who-will-win-2012-11

http://ia.net/blog/responsive-typography-the-basics/

http://daverupert.com/2013/04/responsive-deliverables

http://alistapart.com/article/future-ready-content

http://alistapart.com/blog/post/getting-started-with-pattern-libraries

http://bradfrostweb.com/blog/post/atomic-web-design/

Responsive design 2


http://www.netmagazine.com/opinions/designing-browser

http://www.businessinsider.com/html5-vs-apps-why-the-debate-matters-and-who-will-win-2012-11

http://ia.net/blog/responsive-

http://daverupert.com/2013/04/

http://alistapart.com/article/

http://alistapart.com/blog/post/getting-started-with-pattern-libraries

http://bradfrostweb.com/blog/post/atomic-web-design/



http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/

http://bradfrostweb.com/blog/mobile/support-vs-optimization/

http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design

http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/

Responsive design 3


http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/

http://bradfrostweb.com/blog/mobile/support-vs-optimization/

http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design


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

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/


!

!

!

Navigation for responsive design


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

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/



http://www.google.com/analytics/features/mobile-site-traffic.html


http://opensignal.com/reports/fragmentation-2013/

https://deviceatlas.com/device-data/devices

Slide 37:http://www.slideshare.net/yiibu/pragmatic-responsive-design

!

!

!

Devices & sizes


http://www.google.com/analytics/features/mobile-site-traffic.html


http://opensignal.com/reports/fragmentation-2013/

https://deviceatlas.com/device-data/devices

http://www.slideshare.net/yiibu/pragmatic-responsive-design


www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

http://globalmoxie.com/blog/desktop-touch-design.shtml

www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/?goback=%2Egde_79272_member_226720034

!

!

!

Device interaction


http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

http://globalmoxie.com/blog/desktop-touch-design.shtml

http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/?goback=%2Egde_79272_member_226720034


www.lukew.com/ff/entry.asp?1649

http://www.lukew.com/ff/entry.asp?1721

http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

!

Examples:

http://polarb.com/polls/tags/mobiledesign

!

!

!

Multiple devices & touch input




http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php

http://polarb.com/polls/tags/mobiledesign



http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won

http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others

http://www.markboulton.co.uk/journal/theinbetween

http://adactio.com/journal/6044/

http://seesparkbox.com/foundry/there_is_no_breakpoint

Breakpoints 1



http://elliotjaystocks.com/blog/

http://stephanierieger.com/on-

http://www.markboulton.co.uk

http://adactio.com/journal/6044/

http://seesparkbox.com/foundry/there_is_no_breakpoint


http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/


http://alistapart.com/article/designing-for-breakpoints

http://dmolsen.com/2013/03/05/media-query-less-design-content-based-breakpoints-tweakpoints/

!

Breakpoints 2


http://www.smashingmagazine.com

http://www.slideshare.net/yiibu/pragmatic-

http://alistapart.com/article/designing-for-breakpoints

http://dmolsen.com/2013/03/05/media-query-less-design-content-based-breakpoints-tweakpoints/


www.thismanslife.co.uk/projects/lab/responsivewireframes/

www.thismanslife.co.uk/projects/lab/responsiveillustration/

http://nocturnalmonkey.com/archive/responsive-sketching

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

http://danielmall.com/work/crayola/

!

!

!

Demo, sketching & workflow


http://www.thismanslife.co.uk/projects/lab/responsivewireframes/

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

http://nocturnalmonkey.com/archive/responsive-sketching

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

http://danielmall.com/work/crayola/


https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556

http://mrgan.tumblr.com/post/10492926111/labeling-the-back-button

http://developer.android.com/design/index.html

!

!

Platform guidelines


http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html

http://mrgan.tumblr.com/post/10492926111/labeling-the-back-button

http://developer.android.com/design/index.html


http://pttrns.com/

http://mobile-patterns.com/

http://www.patternsofdesign.co.uk/

http://www.mobiledesignpatterngallery.com/mobile-patterns.php

http://www.androidpatterns.com/

http://androidpttrns.com/

http://android.inspired-ui.com/

!

!

Pattern libraries (of app designs)


http://pttrns.com

http://mobile-patterns.com

http://www.patternsofdesign.co.uk

http://www.mobiledesignpatterngallery.com/mobile-patterns.php

http://www.androidpatterns.com

http://androidpttrns.com

http://android.inspired-ui.com/


http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

http://www.welcomebrand.co.uk/thoughts/website-testing-phone-bundles/

https://bagcheck.com/blog/22-mobile-device-testing-the-gear

!

!

!

Testing


http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

http://www.welcomebrand.co.uk/thoughts/website-testing-phone-bundles/




http://www.responsinator.com/



http://responsivepx.com/

http://protofluid.com/

http://responsiveviewport.com/

http://www.browserstack.com/

Testing your responsive design




http://www.responsinator.com/



http://responsivepx.com/

http://protofluid.com/

http://responsiveviewport.com/


http://popapp.in/

http://fieldtestapp.com/

https://www.fluidui.com/

http://www.plunkapp.com/

http://bjango.com/mac/skalapreview/

http://proto.io/

https://marvelapp.com/

!

!

!

Testing apps & mockups


http://popapp.in

http://fieldtestapp.com

https://www.fluidui.com

http://www.plunkapp.com

http://bjango.com/mac/skalapreview/

http://proto.io

https://marvelapp.com/

Thank you. Questions?@annadahlstrom | [email protected] www.annadahlstrom.com

mailto:[email protected]

Three part series - Designing for multiple devices - GA, London, 13 Feb 2014

Design

Transcript of Three part series - Designing for multiple devices - GA, London, 13 Feb 2014