Designing for multiple devices, GA London - 6 Aug 2012

73
Anna Dahlström co-founder byflock www.annadahlstrom.com annadahlstrom DESIGNING FOR MULTIPLE DEVICES London August 6th 2012

description

Slides from my class on August 6th 2012 at General Assembly London about designing for multiple devices. ABSTRACT The rise in mobiles and tablets have changed the way we consume and interact with content, but also the way we design and what we base our design approach on. This class will teach you about the shift in user expectations, behaviour- and consumption patterns and what that means for designing products that will be used on multiple devices. Coming out of it you'll be equipped with guiding principles and tools to tackle the multiple device jungle.

Transcript of Designing for multiple devices, GA London - 6 Aug 2012

Page 1: Designing for multiple devices, GA London - 6 Aug 2012

Anna Dahlströmco-founder byflock

www.annadahlstrom.com annadahlstrom

DESIGNING FOR MULTIPLE DEVICESLondon August 6th 2012

Page 2: Designing for multiple devices, GA London - 6 Aug 2012

I’m AnnaIA & UX DESIGNER | SWEDISH BUT LONDON BASED | LOVES QUOTES & CHALLENGES | WORKS ON A STARTUP + FREELANCINGThis is me at my favourite place, Knäbäckshusen in Skåne, Sweden

Photo curtesy of my sister

Page 3: Designing for multiple devices, GA London - 6 Aug 2012

- Wilson Minor

“ We’re not just making pretty interfaces. We’re actually in the process of making an environment where we’ll spend most of our time, for the rest of our lives. We’re the designers. We’re the builders. What do we want that environment to feel like? What do we want to feel like.

http://www.flickr.com/photos/funch/4679422945/

I’VE BEEN WORKING IN UX SINCE 2001

Page 4: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/tim_norris/2789759648

OBJECTIVE TODAY1. UNDERSTANDING USAGE PATTERNS ACROSS DEVICES2. WHEN TO DO A BESPOKE MOBILE SITE vs. RESPONSIVE SITE vs. AN APP3. UNDERSTANDING DESIGN & UX PRINCIPLES FOR DIFFERENT PLATFORMS

Page 5: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/horrigans/5649006182

AGENDA 1. DEVICE USAGE & PATTERNS

2. IMPLICATIONS FOR UX & DESIGN THINKING

3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP

4. DOING A RESPONSIVE SITE

5. DOING AN APP

6. PRACTICE

7. SUMMARY

8. Q & A

Page 6: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/publicenergy/1846375599

1. FIRST UP...DEVICE USAGE & PATTERNS

Page 7: Designing for multiple devices, GA London - 6 Aug 2012

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

DEVICE: a thing defined for a specific purpose or task & which can connect to the internet

Page 8: Designing for multiple devices, GA London - 6 Aug 2012

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

THE FOUCS OF TODAYSMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID

Page 9: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/nasamarshall/6289116940

By the end of 2012, the number of mobile-connected devices will exceed the number of people on earth, and by 2016 there will be 1.4 mobile devices per capita.** Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html

Page 10: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/yahnyahn/2996454839

” The best computer is the one you have with you when you want something done. “- JACOB NIELSEN

MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE

Page 11: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jorgeq82/4732700819

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

Page 12: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/exlibris/2552107635

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

Page 13: Designing for multiple devices, GA London - 6 Aug 2012

USAGE PATTERNS ACROSS DEVICES

Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read

“...as devices become more mobile, it’s not only changing where we read, but when. ”- POCKET (formerly Read it Later)

Page 14: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/yahnyahn/2996453841/in/photostream

A MISCONCEPTION THAT MOBILE USERS ARE RUSHED & ON THE GOA LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL

Page 15: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/edduddiee/4307943164

THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPSAS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE & TASK EXECUTION IS INCREASING

Page 16: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/stuckincustoms/440157748

Three purchases are made through eBay’s mobile applications every second.*Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods

Page 17: Designing for multiple devices, GA London - 6 Aug 2012

2. THIS HAS...IMPLICATIONS FOR UX & DESIGN

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

Page 18: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/frantaylor/4296536332

LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKSE.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU

Page 19: Designing for multiple devices, GA London - 6 Aug 2012

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

RESULTED IN MOBILE SPECIFIC WEBSITESLESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION

DESKTOP FULL WEBSITE

BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE

Page 20: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/dm-set/3721351367

PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINKTHERE IS A REASON FOR THAT

Page 21: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/thriol/221785705/sizes/z/in/photostream

AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICESTHIS EXPECTATION WILL ONLY GROW STRONGER

Page 22: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jmtimages/2883279193

CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISEDBOTH IN DISPLAY OF CONTENT & REGARDING USING DEVICE CAPABILITIES

Page 23: Designing for multiple devices, GA London - 6 Aug 2012

http://www.flickr.com/photos/young_einstein/74097753/

3. A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs. APPS

Page 24: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/st3f4n/3476036180

PRIMARY REASONS FOR A BESPOKE MOBILE SITE• REQUIRED FOR THE AUDIENCE

• TECHNICAL LIMITATIONS TO CMS

Page 25: Designing for multiple devices, GA London - 6 Aug 2012

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

BUT IF WE CAN WE SHOULD AVOID IT

Page 26: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/lastquest/1472794031

BUT WHY?” Today's popular devices are

not 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 @ONEXTRAPIXEL &

@TRENTWALTON

Page 27: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/ericconstantineau/5618576278

THE ALTERNATIVE IS MESSY & COSTLY

MAINTAINING DIFFERENT VERSIONSUSERS HAVING PROBLEMS FINDING

WHAT THEY ARE AFTER (E.G. IN SEARCH)

Page 28: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/andwhynot/2946734025

MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APPMOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT ITA BIT OF BOTH THEN CONSIDER....

MOBILE PRESENCE vs. APP?USE ANALYTICS FOR GUIDANCE

Page 29: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/31878512@N06/4704140020

WHETHER TO DO AN APP OR NOT COMES DOWN TO...• THE OBJECTIVE (USER & BUSINESS)

• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE

• IF OFFLINE READING/USAGE IS REQUIRED

• & OF COURSE BUDGET

Page 30: Designing for multiple devices, GA London - 6 Aug 2012

DIFFERENT TYPES OF APPSTHE MAIN TWO TYPES

NATIVE APPS (e.g. Instagram)

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

HYBRID (e.g. Facebook)

• 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

Page 31: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/cristiano_betta/2909483129

” 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 Magaizine

Page 32: Designing for multiple devices, GA London - 6 Aug 2012

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

4. THERE IS SOMETHING CALLED... RESPONSIVE DESIGN

Page 33: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/adactio/5818096043

“ 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

Page 34: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/kasaa/3015846221/in/photostream

MOBILE VS. DESKTOP FIRST•START LARGE OR SMALL

WHAT EVER WORKS BEST FOR YOU

•ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES

Page 35: Designing for multiple devices, GA London - 6 Aug 2012

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

DEFINE YOUR GRID & BREAK POINTS• USE AS THE BASIS OF

YOUR PAGE LAYOUTS

• CHECKPOINT FOR MODULE SIZES & VARIANTS

• FIXED OR FLUID COLUMNS

• DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICES

Page 36: Designing for multiple devices, GA London - 6 Aug 2012

DEFINE YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop & Tablet

Mobile

“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”- TRENT WALTON

Page 37: Designing for multiple devices, GA London - 6 Aug 2012

THE WEB IS FULL OF EXAMPLESLOOK FOR INSPIRATION & BEST PRACTICEe.g. as shown on the righthttp://mediaqueri.es/popular/

BUT DON’T BE AFRAID TO CHALLENGE OR COME UP WITH SOMETHING... BETTER.

http://mediaqueri.es/popular/

Page 38: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/tim_norris/2789759648

CONSIDER YOUR NAVIGATIONDIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS

Page 39: Designing for multiple devices, GA London - 6 Aug 2012

EXCELLENT READ

‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns

Page 41: Designing for multiple devices, GA London - 6 Aug 2012

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

5. WHAT ABOUT... DOING AN APP?

Page 42: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/elwillo/5247084642

” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “- Apps on tap, The Economist Oct 8th 2011

APPS ARE FOCUSED & PERSONAL

Page 43: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/gadl/3570118243

EVERY PLATFORM IS ITS OWN LITTLE WORLDEACH PLATFORM HAVE THEIR OWN UI GUIDELINES THAT USERS ARE USED TO

Page 44: Designing for multiple devices, GA London - 6 Aug 2012

NOT AS EASY AS JUST ANDROID OR iOSFRAGMENTATION ACROSS DIFFERENT VERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED

Source: http://developer.android.com/resources/dashboard/platform-versions.html

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

RELATIVE NUMBER OF ACTIVE ANDROID DEVICES RUNNING A SPECIFIC VERSION

EXAMPLE OF ADOPTION OF NEW iOS VERSION

Page 45: Designing for multiple devices, GA London - 6 Aug 2012

KEY DIFFERENCES BETWEEN DESIGNING FOR ANDROID & iOS

iOSCONSISTENCY

CONSISTENCY BETWEEN VERSIONS & HANDSETS

QUICK ADOPTION OF NEW VERSIONS

BACK BUTTON

SETTINGS BUTTON OR 'MORE' TO ACCESS APP WIDE SETTINGS & INFORMATION

ANDROIDFRAGMENTATION

DIFFERENT FOR DIFFERENT VERSIONS & HANDSETS

SLOWER IMPLEMENTATION & UPTAKE OF NEWER VERSIONS

HANDLED WITH EITHER SYSTEM BACK BUTTON (EARLIER VERSIONS) OR BACK & UP BUTTONS (LATEST VERSION)

OPTIONS MENU USED TO HOUSE APP WIDE SETTINGS & INFORMATION

Design

UI elements & principles

Version adoption

Back navigation

Settings etc.

Page 46: Designing for multiple devices, GA London - 6 Aug 2012

iPHONE RESOURCESHELP & INSPIRATION WELL DOCUMENTED

Page 47: Designing for multiple devices, GA London - 6 Aug 2012

ANDROID RESOURCESHELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIER VERSIONS

Page 48: Designing for multiple devices, GA London - 6 Aug 2012

Source: http://developer.android.com/design/patterns/new-4-0.html

BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS

NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.

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

TAB BARCan often be customised. Holds the main sections of the app.

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

Content area

MoreItemItemHome Item

iPhone 12:15 PM

APP NAMEMore Customise

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

Item

Item

Item

Item

Item

Item

Item

Item

MoreItemItemHome Item

Page 49: Designing for multiple devices, GA London - 6 Aug 2012

Source: http://developer.android.com/design/patterns/new-4-0.html

ANDROID NAVIGATIONDIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH:

NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'

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

UP VS. BACK BUTTONThe 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.

Page 50: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jojoneil/6359536591

HOW TO TAME THE BEAST?YOU LEARN BY DOING

Page 51: Designing for multiple devices, GA London - 6 Aug 2012

http://www.flickr.com/photos/kalexanderson/6302660289/

6. TIME TOPRACTICE

Page 52: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jojoneil/6359536591

BESPOKE MOBILE SITE vs ADAPTIVE vs AN APPCONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN:In preparation for the London 2012 Olympics, Transport for London are considering creating a bespoke section of their site focused on travelling to and from venues.

What do you recommend in terms of their presence, particularly mobile & why?

10 MINUTES

EXERCISE ONE

Page 53: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/andwhynot/2946734025

MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APPMOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT ITA BIT OF BOTH THEN CONSIDER....

MOBILE PRESENCE vs. APP?USE ANALYTICS FOR GUIDANCE

Page 54: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/31878512@N06/4704140020

WHETHER TO DO AN APP OR NOT COMES DOWN TO• THE OBJECTIVE (USER & BUSINESS)

• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE

• IF OFFLINE READING/USAGE IS REQUIRED

• & OF COURSE BUDGET

Page 55: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jojoneil/6359536591

EXERCISE ONE

BESPOKE MOBILE SITE vs ADAPTIVE vs AN APPCONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN:

In preparation for the London 2012 Olympics, Transport for London are considering creating a bespoke section of their site focused on travelling to and from venues.

What do you recommend in terms of their presence, particularly mobile & why?

10 MINUTES

HOW WOULD MOST PEOPLE ACCESS IT?

•MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP

•MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT

CONSIDER...

• THE OBJECTIVE (USER & BUSINESS)

• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE

• IF OFFLINE READING/USAGE IS REQUIRED

• & OF COURSE BUDGET

Page 56: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jojoneil/6359536591

BUILDING A RESPONSIVE SITETRANSPORT FOR LONDON WANTS TO INCLUDE THE FOLLOWING ON THEIR SITE:

• Latest travel updates• Basic travel search• Station updates• Tips on quickest routes

PART 1

Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. Where you see appropriate include a reference to where imagery should be used.

PART 2

Using content stacking methodology define how the content should be prioritised on desktop and mobile (portrait).

15 MINUTES

EXERCISE TWO

• London 2012 focused travel maps• Need to know venue information• Link to partner sites (London 2012, BBC)

Page 57: Designing for multiple devices, GA London - 6 Aug 2012

DEFINE YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop & Tablet

Mobile

“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”- TRENT WALTON

Page 58: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jojoneil/6359536591

EXERCISE TWO

BUILDING A RESPONSIVE SITETRANSPORT FOR LONDON WANTS TO INCLUDE THE FOLLOWING ON THEIR SITE:

• Latest travel updates• Basic travel search• Station updates• Tips on quickest routes

PART 1

Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. Where you see appropriate include a reference to where imagery should be used.

PART 2

Using content stacking methodology define how the content should be prioritised on desktop and mobile (portrait).

15 MINUTES

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop & Tablet

Mobile

• London 2012 focused travel maps• Need to know venue information• Link to partner sites (London 2012, BBC)

Page 59: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jojoneil/6359536591

BUILDING AN APPBASED ON THE CONTENT FOR THE SITE & WHAT YOU KNOW ABOUT TRAVELLING AROUND LONDON, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP.

• Latest travel updates• Basic travel search• Station updates• Tips on quickest routes

PART 1

Define the main sections your app would have.

PART 2

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

15 MINUTES

EXERCISE THREE

• London 2012 focused travel maps• Need to know venue information• Link to partner sites (London 2012, BBC)

Page 60: Designing for multiple devices, GA London - 6 Aug 2012

Source: http://developer.android.com/design/patterns/new-4-0.html

BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS

NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.

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

TAB BARCan often be customised. Holds the main sections of the app.

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

Content area

MoreItemItemHome Item

iPhone 12:15 PM

APP NAMEMore Customise

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

Item

Item

Item

Item

Item

Item

Item

Item

MoreItemItemHome Item

Page 61: Designing for multiple devices, GA London - 6 Aug 2012

Source: http://developer.android.com/design/patterns/new-4-0.html

ANDROID NAVIGATIONDIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH:

NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'

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

UP VS. BACK BUTTONThe 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.

Page 62: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/jojoneil/6359536591

EXERCISE THREE

BUILDING AN APPBASED ON THE CONTENT FOR THE SITE & WHAT YOU KNOW ABOUT TRAVELLING AROUND LONDON, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP.

• Latest travel updates• Basic travel search• Station updates• Tips on quickest routes

PART 1

Define the main sections your app would have.

PART 2

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

15 MINUTES

• London 2012 focused travel maps• Need to know venue information• Link to partner sites

(London 2012, BBC)

Content area

MoreItemItemHome Item

iPhone 12:15 PM

APP NAMEMore Customise

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

IMG

Item

Item

Item

Item

Item

Item

Item

Item

MoreItemItemHome Item

Page 63: Designing for multiple devices, GA London - 6 Aug 2012

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

7. TOSUMMARISE

Page 64: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/thecaucas/2597813380

DEVICE USAGE & PATTERNSFUTURE DEVICESThe number of different devices will only grow & we don’t know what’s coming.USED EVERYWHERE & ANYWHERE And we’re not only using them on the go but increasingly when we have some downtime including the sofa.OUR USE OF MOBILE DEVICESOur use of mobile devices is increasingly replicating that of desktop.

Page 65: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/thecaucas/2597813380

IMPLICATIONS FOR UX & DESIGN THINKINGAN EQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICESAs they & the services we use become more sophisticated & optimised we expect more from them.KEEP THE CORE BUT OPTIMISEConsider the limitations but also the opportunities with mobile devices.

Page 66: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/thecaucas/2597813380

WHEN DO WHATBESPOKE MOBILE WEBSITETry to avoid it but do it if necessaryRESPONSIVE & ADAPTIVE DESIGNThe most device & future adaptive approach right now. Use if possible. But challenge content delivery.APPUse if you require offline reading/functionality & access to device capabilities. Base which type on objectives & stats.

Page 67: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/thecaucas/2597813380

FOR RESPONSIVEDEFINE YOUR GRID & BREAKPOINTSThis is the backbone of responsive design & content choreography.DON’T FORGET THE NAVIGATIONConsider the pros & cons of different methods.TEST & COLLABORATEThis is new grounds & we’re all learning so work together & test as you go.

Page 68: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/thecaucas/2597813380

FOR APPSREMEMBER PLATFORM SPECIFIC GUIDELINESAdhering to them will make your app easier to use.CONSIDER BACKWARDS COMPATIBILITYNot everyone will be on the latest version. Ensure you cater for the majority.CONSULT THE INTERNETThere are a number of great resources for knowledge & inspiration. Use them.

Page 69: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/publicenergy/1846375599

BEFORE I GO REMEMBER THAT...•DESIGNING FOR DIFFERENT DEVICES IS NOT

JUST ABOUT THE SMALLER SCREENS

• IT’S ALSO ABOUT THE LARGER ONES

•& IT’S ABOUT THINKING AHEAD

•& ABOUT BEING CLEVER IN WHAT WE DO

Page 70: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/st3f4n/4387291247

PLATFORM GUIDELINEShttp://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.htmlhttp://mrgan.tumblr.com/post/10492926111/labeling-the-back-buttonhttp://developer.android.com/design/index.html

Page 72: Designing for multiple devices, GA London - 6 Aug 2012

www.flickr.com/photos/st3f4n/4387291247

RESPONSIVE DESIGNhttp://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://bradfrostweb.com/blog/web/responsive-nav-patterns/http://www.gridsetapp.com/http://grid.mindplay.dkhttp://goldengridsystem.com/http://foundation.zurb.com/docs/layout.php

Page 73: Designing for multiple devices, GA London - 6 Aug 2012

Thank you!QUESTIONS?

annadahlstromannadahlstrom

www.annadahlstrom.com