SlideShare a Scribd company logo

Designing For Multiple Devices - GA New York, 6 March 2013

Anna Dahlström, profile picture
Anna Dahlström

The document discusses designing for multiple devices. It covers device usage patterns, implications for design, and different approaches like responsive design versus bespoke mobile sites versus apps. It provides statistics on mobile usage and analyzes usage patterns across devices. It also discusses responsive design techniques like defining grids and content stacking strategies. Considerations for native apps on Android versus iOS are also reviewed.

Design
Related topics:
User Experience Design • Responsive Design Insights • Web Design and Development
1 of 85
Downloaded 12 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
DESIGNING FOR MULTIPLE DEVICES New York, March 4th 2013 Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom
I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED FREELANCING + WORKING ON A STARTUP LOVES QUOTES & CHALLENGES This is Öresundsbron, the bridge between Sweden & Denmark www.flickr.com/photos/dahlstroms/4411448782/
AGENDA 1. DEVICE USAGE & PATTERNS 2. IMPLICATIONS FOR UX & DESIGN THINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP 4. RESPONSIVE 5. APPS 6. PRACTICE 7. SUMMARY 8. Q & A www.flickr.com/photos/horrigans/5649006182
1. FIRST UP... DEVICE USAGE & PATTERNS www.flickr.com/photos/publicenergy/1846375599
DEVICE: a thing defined for a specific purpose or task & which can connect to the internet http://desktopwallpaper-s.com/19-Computers/-/Future/
THE FOCUS OF TODAY SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID http://desktopwallpaper-s.com/19-Computers/-/Future/
In 2009 1% of global internet traffic came from mobiles. In 2010 the number was 4%. By the end of 2012 it had risen to13%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile www.flickr.com/photos/nasamarshall/6289116940
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/jorgeq82/4732700819
40% of people use their phone in the bathroom* * Source: http://www.lukew.com/ff/entry.asp?1500 www.flickr.com/photos/exlibris/2552107635
MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE ” The best computer is the one you have with you when you want something done. “ - JACOB NIELSEN www.flickr.com/photos/yahnyahn/2996454839
USAGE PATTERNS ACROSS DEVICES “...as devices become more mobile, it’s not only changing where we read, but when. ” - POCKET (formerly Read it Later) www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS - DESKTOP Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS - iPHONE Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS - iPAD Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
PEAK TIMES •When we get up •On our way to/ just arrived at work •Commuting home •Post dinner Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
“MOBILE USERS ARE RUSHED & ON THE GO” THIS IS A MYTH www.flickr.com/photos/theirmind/5001267661/
A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL COMMUTING, WAITING BUT ALSO AT HOME http://www.flickr.com/photos/hanhutton/320464105/
THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS AS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE & TASK EXECUTION IS INCREASING www.flickr.com/photos/edduddiee/4307943164
Three purchases are made through eBay’s mobile applications every second.* Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods www.flickr.com/photos/stuckincustoms/440157748
2. THIS HAS... IMPLICATIONS FOR UX & DESIGN http://www.flickr.com/photos/eyesore9/3206408088/
LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU www.flickr.com/photos/frantaylor/4296536332
RESULTED IN MOBILE SPECIFIC WEBSITES LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future/
PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINK THERE IS A REASON FOR THAT www.flickr.com/photos/demandaj/7287174776
AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES THIS EXPECTATION WILL ONLY GROW STRONGER www.flickr.com/photos/joachim_s_mueller/7110473339
3. A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs. APPS http://www.flickr.com/photos/young_einstein/74097753/
PRIMARY REASONS FOR A BESPOKE MOBILE SITE • REQUIRED FOR THE AUDIENCE • TECHNICAL LIMITATIONS TO CMS www.flickr.com/photos/st3f4n/3476036180
BEST AVOIDED IF WE CAN IT CAN CAUSE ALL SORTS OF PROBLEMS http://www.flickr.com/photos/edenandjosh/2892956576/
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 www.flickr.com/photos/lastquest/1472794031
THE ALTERNATIVE IS MESSY & COSTLY MAINTAINING DIFFERENT VERSIONS USERS HAVING PROBLEMS FINDING WHAT THEY ARE AFTER (E.G. IN SEARCH) www.flickr.com/photos/ericconstantineau/5618576278
CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED BOTH IN DISPLAY OF CONTENT, REGARDING USING DEVICE CAPABILITIES & FOR TOUCH INTERACTIONS www.flickr.com/photos/jmtimages/2883279193
MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... www.flickr.com/photos/andwhynot/2946734025
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 www.flickr.com/photos/31878512@N06/4704140020
DIFFERENT TYPES OF APPS THE 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
” 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 www.flickr.com/photos/cristiano_betta/2909483129
4. THERE IS SOMETHING CALLED... RESPONSIVE DESIGN www.flickr.com/photos/taytom/5277657429
“ 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 www.flickr.com/photos/adactio/5818096043
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 http://foundation.zurb.com/docs/layout.php
DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION Mobile 1 2 Header “ Content needs to be Logo 3 Nav choreographed to Desktop & Tablet 4 Bath section intro 5 Ad ensure the intended 1 Logo 2 Header message is preserved 4 Bath section intro 5 Ad 6 on any device and at Types of baths 3 Nav any width ” 6 Types of baths 7 Related 7 products Related products - TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
THE WEB IS FULL OF EXAMPLES LOOK FOR INSPIRATION & BEST PRACTICE BUT DON’T BE AFRAID TO CHALLENGE OR COME UP WITH SOMETHING... BETTER. http://mediaqueri.es/popular/
CONSIDER YOUR NAVIGATION DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS www.flickr.com/photos/tim_norris/2789759648
EXCELLENT READ ‘RESPONSIVE NAVIGATION PATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
www.flickr.com/photos/dopey/123646856
5. WHAT ABOUT... DOING AN APP? http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
APPS ARE FOCUSED & PERSONAL ” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “ - Apps on tap, The Economist Oct 8th 2011 www.flickr.com/photos/elwillo/5247084642
EVERY PLATFORM IS ITS OWN LITTLE WORLD WITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO www.flickr.com/photos/gadl/3570118243
NOT AS EASY AS JUST ANDROID OR iOS FRAGMENTATION ACROSS DIFFERENT VERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED www.flickr.com/photos/nrkbeta/3906687294/in/photostream
RELATIVE NUMBER OF ACTIVE ANDROID DEVICES Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
EXAMPLE OF ADOPTION OF NEW iOS VERSION Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1 www.flickr.com/photos/blakespot/4773693893
KEY DIFFERENCES BETWEEN DESIGNING FOR ANDROID & iOS ANDROID iOS FRAGMENTATION Design CONSISTENCY DIFFERENT FOR DIFFERENT VERSIONS & UI elements & CONSISTENCY BETWEEN HANDSETS principles VERSIONS & HANDSETS SLOWER IMPLEMENTATION & UPTAKE Version adoption QUICK ADOPTION OF NEW OF NEWER VERSIONS VERSIONS HANDLED WITH EITHER SYSTEM BACK Back navigation BACK BUTTON BUTTON (EARLIER VERSIONS) OR BACK & UP BUTTONS (LATEST VERSION) OPTIONS MENU USED TO HOUSE APP SETTINGS BUTTON OR 'MORE' TO Settings etc. ACCESS APP WIDE SETTINGS & WIDE SETTINGS & INFORMATION INFORMATION www.flickr.com/photos/nrkbeta/3906687294/in/photostream
iPHONE RESOURCES HELP & INSPIRATION WELL DOCUMENTED
ANDROID RESOURCES HELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIER VERSIONS
iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More 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. Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH: 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. Source: http://developer.android.com/design/patterns/new-4-0.html
HOW TO TAME THE BEAST? YOU LEARN BY DOING www.flickr.com/photos/jojoneil/6359536591
6. TIME TO PRACTICE http://www.flickr.com/photos/kalexanderson/6302660289/
BESPOKE MOBILE SITE vs RESPONSIVE vs AN APP CONSIDER THE FOLLOWING: A big retail store has asked you to come up with a Easter Hunt across your city where EXERCISE ONE 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, or when a user is close to one. What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination? www.flickr.com/photos/jojoneil/6359536591 10 MINUTES
MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... www.flickr.com/photos/andwhynot/2946734025
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 www.flickr.com/photos/31878512@N06/4704140020
EXERCISE ONE BESPOKE MOBILE SITE vs RESPONSIVE HOW WOULD MOST PEOPLE ACCESS IT? vs AN APP • MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP CONSIDER THE FOLLOWING: • MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. A big retail store has asked you to come up AN APP ALONE WON’T CUT IT with a Easter Hunt across your city where offers and give aways are hidden at certain locations. There will only be a certain number ALSO CONSIDER... of items available each day & they want to be able to notify people when an item has been • THE OBJECTIVE (USER & BUSINESS) found, or when a user is close to one. • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE What do you recommend in terms of their mobile strategy and why? I.e. an app, • IF OFFLINE READING/USAGE IS responsive or bespoke mobile site, or a REQUIRED combination? • & OF COURSE BUDGET 5 MINUTES www.flickr.com/photos/jojoneil/6359536591
BUILDING A RESPONSIVE SITE FOR THE EASTER HUNT SITE THE CLIENT WANT TO INCLUDE THE FOLLOWING: • About page • Share (on FB & Twitter) • List of offers • Login & registration • Product pages • Overview of number of • Notifications found & not found item EXERCISE TWO PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION Mobile 1 2 Header “ Content needs to be Logo 3 Nav choreographed to Desktop & Tablet 4 Bath section intro 5 Ad ensure the intended 1 Logo 2 Header message is preserved 4 Bath section intro 5 Ad 6 on any device and at Types of baths 3 Nav any width ” 6 Types of baths 7 Related 7 products Related products - TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
EXERCISE TWO BUILDING A RESPONSIVE SITE Mobile 1 2 Header FOR THE EASTER HUNT SITE THE CLIENT Logo 3 WANT TO INCLUDE THE FOLLOWING: 4 Nav Bath 5 • About page • Share (on FB & Twitter) Desktop & Tablet section intro Ad • List of offers • Login & registration • Product pages 1 2 • Overview of number of Logo Header • Notifications found & not found item 4 Bath section intro 5 Ad 6 Types of baths PART 1 3 Nav Pick either mobile or desktop & do a rough sketch 7 of what the home page should contain & how the 6 Related 7 Types of baths 8 Store products Related products content should be prioritised. locator 9 Tools 8 Store 9 Tools PART 2 locator 10 10 Footer Footer Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
BUILDING AN APP BASED ON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP: • About page • Share (on FB & Twitter) • List of offers • Login & registration • Product pages • Overview of number of • Notifications found & not found item PART 1 EXERCISE THREE 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’. www.flickr.com/photos/jojoneil/6359536591 15 MINUTES
iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More 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. Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH: 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. Source: http://developer.android.com/design/patterns/new-4-0.html
EXERCISE THREE BUILDING AN APP iPhone 12:15 PM More Customise APP NAME IMG Item IMG Item BASED ON THE CONTENT & IMG Item FUNCTIONALITY REQUIREMENTS, IMG Item CONSIDER WHAT WOULD BE SUITABLE IMG Item FOR AN APP: Content area IMG Item • About page • Share (on FB & Twitter) IMG Item • List of offers • Login & registration IMG Item • Product pages • Overview of number of IMG Home • Notifications Item Item Item More found & not found item Home Item Item Item More 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 www.flickr.com/photos/jojoneil/6359536591
7. TO SUMMARISE http://www.flickr.com/photos/martinteschner/4569495912/
DEVICE USAGE & PATTERNS FUTURE DEVICES The 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. USE OF MOBILE DEVICES Our use of mobile devices is www.flickr.com/photos/thecaucas/2597813380 increasingly replicating that of desktop.
IMPLICATIONS FOR UX & DESIGN THINKING AN EQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICES As they & the services we use become more sophisticated & optimised we expect more from them. KEEP THE CORE BUT OPTIMISE Consider the limitations but also the opportunities with mobile devices. www.flickr.com/photos/thecaucas/2597813380
WHEN DO WHAT BESPOKE MOBILE WEBSITE Try to avoid it but do it if necessary RESPONSIVE DESIGN The most device & future “proof ” approach right now. Use if possible. But challenge content delivery. APP Base on user & business needs. Strong argument if you require offline reading/functionality & access to device capabilities. Base which type www.flickr.com/photos/thecaucas/2597813380 on objectives & stats.
FOR RESPONSIVE DEFINE YOUR GRID & BREAKPOINTS This is the backbone of responsive design & content choreography. DON’T FORGET THE NAVIGATION Consider the pros & cons of different methods. TEST & COLLABORATE This is new grounds & we’re all learning so work together & test as www.flickr.com/photos/thecaucas/2597813380 you go.
FOR APPS REMEMBER PLATFORM SPECIFIC GUIDELINES Adhering to them will make your app easier to use. CONSIDER BACKWARDS COMPATIBILITY Not everyone will be on the latest version. Ensure you cater for the majority. CONSULT THE INTERNET There are a number of great resources for knowledge & inspiration. Use them. www.flickr.com/photos/thecaucas/2597813380
8. BEFORE I GO... REMEMBER THAT www.flickr.com/photos/46355638@N00/4414640784
...IT’S NOT JUST ABOUT THE SMALLER SCREENS BUT ALSO THE BIG ONES www.flickr.com/photos/jolives/2889944573/
IT’S ABOUT THINKING AHEAD PLAN 5 YEARS AHEAD WITH “FUTURE PROOFING” IN MIND www.flickr.com/photos/jolives/2889944573/
IT DOESN’T HAVE TO BREAK THE BANK BESIDES CONSIDER LOST CUSTOMERS & MAINTAINING MULTIPLE VERSIONS http://www.flickr.com/photos/gi/5537770007/
BE CREATIVE & CHALLENGE WHAT EXISTS TODAY THAT’S WHAT MOVES US FORWARD www.flickr.com/photos/oter/5090592214
CLOSER & MORE REWARDING COLLABORATION BETWEEN DISCIPLINES & WITH CLIENTS www.flickr.com/photos/stevendepolo/3378152784
BUT ABOVE ALL... “ 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. ” - Wilson Minor http://www.flickr.com/photos/funch/4679422945/
9. FOR THE ROAD SOME TAKE AWAYS www.flickr.com/photos/st3f4n/4387291247
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 www.flickr.com/photos/st3f4n/4387291247
PATTERN LIBRARIES 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/ www.flickr.com/photos/st3f4n/4387291247
RESPONSIVE DESIGN 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://bradfrostweb.com/blog/web/ responsive-nav-patterns/ http://www.gridsetapp.com/ http://grid.mindplay.dk http://goldengridsystem.com/ http://foundation.zurb.com/docs/layout.php www.flickr.com/photos/st3f4n/4387291247
Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.com www.flickr.com/photos/dahlstroms/4411448782/

More Related Content

PDF
Designing for multiple devices - GA London, 19 Nov 2012
Anna Dahlström
 
PDF
Designing for multiple devices, GA London - 01 Oct 2012
Anna Dahlström
 
PDF
Designing for multiple devices - GA, New York 08 Oct 2012
Anna Dahlström
 
PDF
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
Anna Dahlström
 
PDF
Designing For Multiple Devices - GA London, 04 Mar 2013
Anna Dahlström
 
PDF
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Anna Dahlström
 
PDF
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013
Anna Dahlström
 
PDF
Designing for multiple devices - GA London, 14 Jan 2013
Anna Dahlström
 
Designing for multiple devices - GA London, 19 Nov 2012
Anna Dahlström
 
Designing for multiple devices, GA London - 01 Oct 2012
Anna Dahlström
 
Designing for multiple devices - GA, New York 08 Oct 2012
Anna Dahlström
 
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
Anna Dahlström
 
Designing For Multiple Devices - GA London, 04 Mar 2013
Anna Dahlström
 
Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013
Anna Dahlström
 
Best of GA: Designing For Multiple Devices - Google Campus, 26 Feb 2013
Anna Dahlström
 
Designing for multiple devices - GA London, 14 Jan 2013
Anna Dahlström
 

What's hot (19)

PDF
Designing for multiple devices, GA London - 6 Aug 2012
Anna Dahlström
 
PDF
GA London - Designing for multiple devices, 28may2012
Anna Dahlström
 
PDF
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Anna Dahlström
 
PDF
Designing for iPad
Pek Pongpaet
 
PDF
Beyond the mobile web by yiibu
yiibu
 
PDF
Imagining the physical web
yiibu
 
PDF
It's about people, not devices...
yiibu
 
PDF
Beyond progressive-enhancement
yiibu
 
PDF
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Anna Dahlström
 
PDF
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD UK Ltd
 
PDF
Bright talk if they cant use it, it doesnt work - final
Andrew White
 
PDF
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013
Anna Dahlström
 
PDF
Adaptation: Why responsive design actually begins on the server
yiibu
 
PPTX
Olpc design analysis
R. Sosa
 
PDF
Reset the Web
yiibu
 
PDF
It's a Mobile and Touch World
Frank Garofalo
 
PPTX
Keynote ok acrl murphy
Joe Murphy Librarian & Futurist
 
PDF
Wearable Accessibility - Accessing Higher Ground 2014
Ted Drake
 
PDF
Technology for engagement
Minnesota Campus Comapct
 
Designing for multiple devices, GA London - 6 Aug 2012
Anna Dahlström
 
GA London - Designing for multiple devices, 28may2012
Anna Dahlström
 
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Anna Dahlström
 
Designing for iPad
Pek Pongpaet
 
Beyond the mobile web by yiibu
yiibu
 
Imagining the physical web
yiibu
 
It's about people, not devices...
yiibu
 
Beyond progressive-enhancement
yiibu
 
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Anna Dahlström
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD UK Ltd
 
Bright talk if they cant use it, it doesnt work - final
Andrew White
 
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013
Anna Dahlström
 
Adaptation: Why responsive design actually begins on the server
yiibu
 
Olpc design analysis
R. Sosa
 
Reset the Web
yiibu
 
It's a Mobile and Touch World
Frank Garofalo
 
Keynote ok acrl murphy
Joe Murphy Librarian & Futurist
 
Wearable Accessibility - Accessing Higher Ground 2014
Ted Drake
 
Technology for engagement
Minnesota Campus Comapct
 
Ad

Similar to Designing For Multiple Devices - GA New York, 6 March 2013 (20)

PDF
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Anna Dahlström
 
PDF
Device Agnostic Design - UCD2014, London 25 Oct 2014
Anna Dahlström
 
PDF
Beyond The Mobile Web By Yiibu
Jim Porter
 
PDF
Beyond the mobile web
Alexander Anikin
 
PDF
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Therese Kokot
 
KEY
SparkUp 2010 Mobile UX 101
Antony Ribot
 
PDF
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Anna Dahlström
 
PDF
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Victor Minuesa
 
PDF
Mobilising Digital - Sydney 26/03/14
Precedent
 
PDF
Beyond Progressive Enhancement by yiibu
AdRoll
 
PPTX
In the palm of the customer - mobile marketing & social media
Andreas Beining
 
PDF
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Anna Dahlström
 
PDF
Mobilising Digital - Perth 13/03/14
Precedent
 
PDF
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Anna Dahlström
 
PDF
EduWeb - Building a Responsive Website for the Presidential Debate
Jon Liu
 
PDF
The trouble with context
Alexander Anikin
 
PDF
The trouble with context
yiibu
 
PDF
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Anna Dahlström
 
PDF
Mobile Web vs. Native Apps | Design4Mobile
Jason Grigsby
 
PDF
The Magic and Pain of Responsive Design
Matthias Lau
 
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Anna Dahlström
 
Device Agnostic Design - UCD2014, London 25 Oct 2014
Anna Dahlström
 
Beyond The Mobile Web By Yiibu
Jim Porter
 
Beyond the mobile web
Alexander Anikin
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Therese Kokot
 
SparkUp 2010 Mobile UX 101
Antony Ribot
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Anna Dahlström
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Victor Minuesa
 
Mobilising Digital - Sydney 26/03/14
Precedent
 
Beyond Progressive Enhancement by yiibu
AdRoll
 
In the palm of the customer - mobile marketing & social media
Andreas Beining
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Anna Dahlström
 
Mobilising Digital - Perth 13/03/14
Precedent
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Anna Dahlström
 
EduWeb - Building a Responsive Website for the Presidential Debate
Jon Liu
 
The trouble with context
Alexander Anikin
 
The trouble with context
yiibu
 
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Anna Dahlström
 
Mobile Web vs. Native Apps | Design4Mobile
Jason Grigsby
 
The Magic and Pain of Responsive Design
Matthias Lau
 
Ad

More from Anna Dahlström (20)

PDF
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Anna Dahlström
 
PDF
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Anna Dahlström
 
PDF
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...
Anna Dahlström
 
PDF
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Anna Dahlström
 
PDF
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Anna Dahlström
 
PDF
Storytelling In Design - SXSW, 13 March 2017
Anna Dahlström
 
PDF
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Anna Dahlström
 
PDF
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Anna Dahlström
 
PDF
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Anna Dahlström
 
PDF
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Anna Dahlström
 
PDF
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Anna Dahlström
 
PDF
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Anna Dahlström
 
PDF
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Anna Dahlström
 
PDF
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Anna Dahlström
 
PDF
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Anna Dahlström
 
PDF
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Anna Dahlström
 
PDF
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Anna Dahlström
 
PDF
Designing around storytelling - UX Oxford, 23 April 2014
Anna Dahlström
 
PDF
Designing around storytelling - Design + banter, 09 April 2014
Anna Dahlström
 
PDF
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Anna Dahlström
 
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Anna Dahlström
 
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Anna Dahlström
 
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...
Anna Dahlström
 
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Anna Dahlström
 
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Anna Dahlström
 
Storytelling In Design - SXSW, 13 March 2017
Anna Dahlström
 
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Anna Dahlström
 
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Anna Dahlström
 
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Anna Dahlström
 
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Anna Dahlström
 
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Anna Dahlström
 
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Anna Dahlström
 
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Anna Dahlström
 
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Anna Dahlström
 
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Anna Dahlström
 
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Anna Dahlström
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Anna Dahlström
 
Designing around storytelling - UX Oxford, 23 April 2014
Anna Dahlström
 
Designing around storytelling - Design + banter, 09 April 2014
Anna Dahlström
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Anna Dahlström
 

Recently uploaded (20)

PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Rohan Dasgupta
 
PPTX
areprosthodontics and orthodonticsa text.pptx
drsaurabhahuja
 
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
gunjankolhezn
 
PPTX
An introduction to AI in research and reference management
drmariaalrafi
 
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
gameon41
 
PDF
The Advantages of Working With a Design-Build Studio
Douglah Designs
 
PPTX
12. Community Pharmacy and How to organize it
stephenotemason
 
PDF
Urban Design Final Project-Context
nicolebrog1
 
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
PDF
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
Royal Matrixs
 
PDF
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
Tsuyoshi Horigome
 
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
cyclohex75
 
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
asmathmohamed2004
 
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
rubaiyaakhterinbox
 
PPTX
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
PDF
High-frequency high-voltage transformer outline drawing
Tsuyoshi Horigome
 
DOCX
The story of the first moon landing.docx
Geani7
 
PDF
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
PDF
Phone away, tabs closed: No multitasking
NaziaNowrin2
 
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Rohan Dasgupta
 
areprosthodontics and orthodonticsa text.pptx
drsaurabhahuja
 
pump pump is a mechanism that is used to transfer a liquid from one place to ...
gunjankolhezn
 
An introduction to AI in research and reference management
drmariaalrafi
 
DOC-20250430-WA0014._20250714_235747_0000.pptx
gameon41
 
The Advantages of Working With a Design-Build Studio
Douglah Designs
 
12. Community Pharmacy and How to organize it
stephenotemason
 
Urban Design Final Project-Context
nicolebrog1
 
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
Royal Matrixs
 
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
Tsuyoshi Horigome
 
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
cyclohex75
 
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
asmathmohamed2004
 
mahatma gandhi bus terminal in india Case Study.pptx
rubaiyaakhterinbox
 
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
High-frequency high-voltage transformer outline drawing
Tsuyoshi Horigome
 
The story of the first moon landing.docx
Geani7
 
Quality Control Management for RMG, Level- 4, Certificate
Mohammad Anamul Haque Nayan
 
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
Phone away, tabs closed: No multitasking
NaziaNowrin2
 

Designing For Multiple Devices - GA New York, 6 March 2013

  • 1. DESIGNING FOR MULTIPLE DEVICES New York, March 4th 2013 Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom
  • 2. I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED FREELANCING + WORKING ON A STARTUP LOVES QUOTES & CHALLENGES This is Öresundsbron, the bridge between Sweden & Denmark www.flickr.com/photos/dahlstroms/4411448782/
  • 3. AGENDA 1. DEVICE USAGE & PATTERNS 2. IMPLICATIONS FOR UX & DESIGN THINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP 4. RESPONSIVE 5. APPS 6. PRACTICE 7. SUMMARY 8. Q & A www.flickr.com/photos/horrigans/5649006182
  • 4. 1. FIRST UP... DEVICE USAGE & PATTERNS www.flickr.com/photos/publicenergy/1846375599
  • 5. DEVICE: a thing defined for a specific purpose or task & which can connect to the internet http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 6. THE FOCUS OF TODAY SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 7. In 2009 1% of global internet traffic came from mobiles. In 2010 the number was 4%. By the end of 2012 it had risen to13%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile www.flickr.com/photos/nasamarshall/6289116940
  • 8. 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/jorgeq82/4732700819
  • 9. 40% of people use their phone in the bathroom* * Source: http://www.lukew.com/ff/entry.asp?1500 www.flickr.com/photos/exlibris/2552107635
  • 10. MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE ” The best computer is the one you have with you when you want something done. “ - JACOB NIELSEN www.flickr.com/photos/yahnyahn/2996454839
  • 11. USAGE PATTERNS ACROSS DEVICES “...as devices become more mobile, it’s not only changing where we read, but when. ” - POCKET (formerly Read it Later) www.flickr.com/photos/brandoncwarren/4236278556
  • 12. POCKET’S STATS - DESKTOP Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
  • 13. POCKET’S STATS - iPHONE Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
  • 14. POCKET’S STATS - iPAD Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
  • 15. PEAK TIMES •When we get up •On our way to/ just arrived at work •Commuting home •Post dinner Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  • 16. “MOBILE USERS ARE RUSHED & ON THE GO” THIS IS A MYTH www.flickr.com/photos/theirmind/5001267661/
  • 17. A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL COMMUTING, WAITING BUT ALSO AT HOME http://www.flickr.com/photos/hanhutton/320464105/
  • 18. THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS AS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE & TASK EXECUTION IS INCREASING www.flickr.com/photos/edduddiee/4307943164
  • 19. Three purchases are made through eBay’s mobile applications every second.* Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods www.flickr.com/photos/stuckincustoms/440157748
  • 20. 2. THIS HAS... IMPLICATIONS FOR UX & DESIGN http://www.flickr.com/photos/eyesore9/3206408088/
  • 21. LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU www.flickr.com/photos/frantaylor/4296536332
  • 22. RESULTED IN MOBILE SPECIFIC WEBSITES LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 23. PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINK THERE IS A REASON FOR THAT www.flickr.com/photos/demandaj/7287174776
  • 24. AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES THIS EXPECTATION WILL ONLY GROW STRONGER www.flickr.com/photos/joachim_s_mueller/7110473339
  • 25. 3. A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs. APPS http://www.flickr.com/photos/young_einstein/74097753/
  • 26. PRIMARY REASONS FOR A BESPOKE MOBILE SITE • REQUIRED FOR THE AUDIENCE • TECHNICAL LIMITATIONS TO CMS www.flickr.com/photos/st3f4n/3476036180
  • 27. BEST AVOIDED IF WE CAN IT CAN CAUSE ALL SORTS OF PROBLEMS http://www.flickr.com/photos/edenandjosh/2892956576/
  • 28. 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 www.flickr.com/photos/lastquest/1472794031
  • 29. THE ALTERNATIVE IS MESSY & COSTLY MAINTAINING DIFFERENT VERSIONS USERS HAVING PROBLEMS FINDING WHAT THEY ARE AFTER (E.G. IN SEARCH) www.flickr.com/photos/ericconstantineau/5618576278
  • 30. CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED BOTH IN DISPLAY OF CONTENT, REGARDING USING DEVICE CAPABILITIES & FOR TOUCH INTERACTIONS www.flickr.com/photos/jmtimages/2883279193
  • 31. MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... www.flickr.com/photos/andwhynot/2946734025
  • 32. 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 www.flickr.com/photos/31878512@N06/4704140020
  • 33. DIFFERENT TYPES OF APPS THE 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
  • 34. ” 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 www.flickr.com/photos/cristiano_betta/2909483129
  • 35. 4. THERE IS SOMETHING CALLED... RESPONSIVE DESIGN www.flickr.com/photos/taytom/5277657429
  • 36. “ 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 www.flickr.com/photos/adactio/5818096043
  • 37. 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 http://foundation.zurb.com/docs/layout.php
  • 38. DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION Mobile 1 2 Header “ Content needs to be Logo 3 Nav choreographed to Desktop & Tablet 4 Bath section intro 5 Ad ensure the intended 1 Logo 2 Header message is preserved 4 Bath section intro 5 Ad 6 on any device and at Types of baths 3 Nav any width ” 6 Types of baths 7 Related 7 products Related products - TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
  • 39. MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
  • 40. THE WEB IS FULL OF EXAMPLES LOOK FOR INSPIRATION & BEST PRACTICE BUT DON’T BE AFRAID TO CHALLENGE OR COME UP WITH SOMETHING... BETTER. http://mediaqueri.es/popular/
  • 41. CONSIDER YOUR NAVIGATION DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS www.flickr.com/photos/tim_norris/2789759648
  • 42. EXCELLENT READ ‘RESPONSIVE NAVIGATION PATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  • 44. 5. WHAT ABOUT... DOING AN APP? http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
  • 45. APPS ARE FOCUSED & PERSONAL ” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “ - Apps on tap, The Economist Oct 8th 2011 www.flickr.com/photos/elwillo/5247084642
  • 46. EVERY PLATFORM IS ITS OWN LITTLE WORLD WITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO www.flickr.com/photos/gadl/3570118243
  • 47. NOT AS EASY AS JUST ANDROID OR iOS FRAGMENTATION ACROSS DIFFERENT VERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  • 48. RELATIVE NUMBER OF ACTIVE ANDROID DEVICES Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
  • 49. EXAMPLE OF ADOPTION OF NEW iOS VERSION Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1 www.flickr.com/photos/blakespot/4773693893
  • 50. KEY DIFFERENCES BETWEEN DESIGNING FOR ANDROID & iOS ANDROID iOS FRAGMENTATION Design CONSISTENCY DIFFERENT FOR DIFFERENT VERSIONS & UI elements & CONSISTENCY BETWEEN HANDSETS principles VERSIONS & HANDSETS SLOWER IMPLEMENTATION & UPTAKE Version adoption QUICK ADOPTION OF NEW OF NEWER VERSIONS VERSIONS HANDLED WITH EITHER SYSTEM BACK Back navigation BACK BUTTON BUTTON (EARLIER VERSIONS) OR BACK & UP BUTTONS (LATEST VERSION) OPTIONS MENU USED TO HOUSE APP SETTINGS BUTTON OR 'MORE' TO Settings etc. ACCESS APP WIDE SETTINGS & WIDE SETTINGS & INFORMATION INFORMATION www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  • 52. ANDROID RESOURCES HELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIER VERSIONS
  • 53. iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More 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. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 54. ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH: 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. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 55. HOW TO TAME THE BEAST? YOU LEARN BY DOING www.flickr.com/photos/jojoneil/6359536591
  • 56. 6. TIME TO PRACTICE http://www.flickr.com/photos/kalexanderson/6302660289/
  • 57. BESPOKE MOBILE SITE vs RESPONSIVE vs AN APP CONSIDER THE FOLLOWING: A big retail store has asked you to come up with a Easter Hunt across your city where EXERCISE ONE 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, or when a user is close to one. What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination? www.flickr.com/photos/jojoneil/6359536591 10 MINUTES
  • 58. MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... www.flickr.com/photos/andwhynot/2946734025
  • 59. 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 www.flickr.com/photos/31878512@N06/4704140020
  • 60. EXERCISE ONE BESPOKE MOBILE SITE vs RESPONSIVE HOW WOULD MOST PEOPLE ACCESS IT? vs AN APP • MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP CONSIDER THE FOLLOWING: • MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. A big retail store has asked you to come up AN APP ALONE WON’T CUT IT with a Easter Hunt across your city where offers and give aways are hidden at certain locations. There will only be a certain number ALSO CONSIDER... of items available each day & they want to be able to notify people when an item has been • THE OBJECTIVE (USER & BUSINESS) found, or when a user is close to one. • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE What do you recommend in terms of their mobile strategy and why? I.e. an app, • IF OFFLINE READING/USAGE IS responsive or bespoke mobile site, or a REQUIRED combination? • & OF COURSE BUDGET 5 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 61. BUILDING A RESPONSIVE SITE FOR THE EASTER HUNT SITE THE CLIENT WANT TO INCLUDE THE FOLLOWING: • About page • Share (on FB & Twitter) • List of offers • Login & registration • Product pages • Overview of number of • Notifications found & not found item EXERCISE TWO PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 62. DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION Mobile 1 2 Header “ Content needs to be Logo 3 Nav choreographed to Desktop & Tablet 4 Bath section intro 5 Ad ensure the intended 1 Logo 2 Header message is preserved 4 Bath section intro 5 Ad 6 on any device and at Types of baths 3 Nav any width ” 6 Types of baths 7 Related 7 products Related products - TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
  • 63. EXERCISE TWO BUILDING A RESPONSIVE SITE Mobile 1 2 Header FOR THE EASTER HUNT SITE THE CLIENT Logo 3 WANT TO INCLUDE THE FOLLOWING: 4 Nav Bath 5 • About page • Share (on FB & Twitter) Desktop & Tablet section intro Ad • List of offers • Login & registration • Product pages 1 2 • Overview of number of Logo Header • Notifications found & not found item 4 Bath section intro 5 Ad 6 Types of baths PART 1 3 Nav Pick either mobile or desktop & do a rough sketch 7 of what the home page should contain & how the 6 Related 7 Types of baths 8 Store products Related products content should be prioritised. locator 9 Tools 8 Store 9 Tools PART 2 locator 10 10 Footer Footer Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 64. BUILDING AN APP BASED ON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP: • About page • Share (on FB & Twitter) • List of offers • Login & registration • Product pages • Overview of number of • Notifications found & not found item PART 1 EXERCISE THREE 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’. www.flickr.com/photos/jojoneil/6359536591 15 MINUTES
  • 65. iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More 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. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 66. ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH: 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. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 67. EXERCISE THREE BUILDING AN APP iPhone 12:15 PM More Customise APP NAME IMG Item IMG Item BASED ON THE CONTENT & IMG Item FUNCTIONALITY REQUIREMENTS, IMG Item CONSIDER WHAT WOULD BE SUITABLE IMG Item FOR AN APP: Content area IMG Item • About page • Share (on FB & Twitter) IMG Item • List of offers • Login & registration IMG Item • Product pages • Overview of number of IMG Home • Notifications Item Item Item More found & not found item Home Item Item Item More 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 www.flickr.com/photos/jojoneil/6359536591
  • 68. 7. TO SUMMARISE http://www.flickr.com/photos/martinteschner/4569495912/
  • 69. DEVICE USAGE & PATTERNS FUTURE DEVICES The 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. USE OF MOBILE DEVICES Our use of mobile devices is www.flickr.com/photos/thecaucas/2597813380 increasingly replicating that of desktop.
  • 70. IMPLICATIONS FOR UX & DESIGN THINKING AN EQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICES As they & the services we use become more sophisticated & optimised we expect more from them. KEEP THE CORE BUT OPTIMISE Consider the limitations but also the opportunities with mobile devices. www.flickr.com/photos/thecaucas/2597813380
  • 71. WHEN DO WHAT BESPOKE MOBILE WEBSITE Try to avoid it but do it if necessary RESPONSIVE DESIGN The most device & future “proof ” approach right now. Use if possible. But challenge content delivery. APP Base on user & business needs. Strong argument if you require offline reading/functionality & access to device capabilities. Base which type www.flickr.com/photos/thecaucas/2597813380 on objectives & stats.
  • 72. FOR RESPONSIVE DEFINE YOUR GRID & BREAKPOINTS This is the backbone of responsive design & content choreography. DON’T FORGET THE NAVIGATION Consider the pros & cons of different methods. TEST & COLLABORATE This is new grounds & we’re all learning so work together & test as www.flickr.com/photos/thecaucas/2597813380 you go.
  • 73. FOR APPS REMEMBER PLATFORM SPECIFIC GUIDELINES Adhering to them will make your app easier to use. CONSIDER BACKWARDS COMPATIBILITY Not everyone will be on the latest version. Ensure you cater for the majority. CONSULT THE INTERNET There are a number of great resources for knowledge & inspiration. Use them. www.flickr.com/photos/thecaucas/2597813380
  • 74. 8. BEFORE I GO... REMEMBER THAT www.flickr.com/photos/46355638@N00/4414640784
  • 75. ...IT’S NOT JUST ABOUT THE SMALLER SCREENS BUT ALSO THE BIG ONES www.flickr.com/photos/jolives/2889944573/
  • 76. IT’S ABOUT THINKING AHEAD PLAN 5 YEARS AHEAD WITH “FUTURE PROOFING” IN MIND www.flickr.com/photos/jolives/2889944573/
  • 77. IT DOESN’T HAVE TO BREAK THE BANK BESIDES CONSIDER LOST CUSTOMERS & MAINTAINING MULTIPLE VERSIONS http://www.flickr.com/photos/gi/5537770007/
  • 78. BE CREATIVE & CHALLENGE WHAT EXISTS TODAY THAT’S WHAT MOVES US FORWARD www.flickr.com/photos/oter/5090592214
  • 79. CLOSER & MORE REWARDING COLLABORATION BETWEEN DISCIPLINES & WITH CLIENTS www.flickr.com/photos/stevendepolo/3378152784
  • 80. BUT ABOVE ALL... “ 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. ” - Wilson Minor http://www.flickr.com/photos/funch/4679422945/
  • 81. 9. FOR THE ROAD SOME TAKE AWAYS www.flickr.com/photos/st3f4n/4387291247
  • 82. 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 www.flickr.com/photos/st3f4n/4387291247
  • 83. PATTERN LIBRARIES 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/ www.flickr.com/photos/st3f4n/4387291247
  • 85. Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.com www.flickr.com/photos/dahlstroms/4411448782/