SlideShare a Scribd company logo

Designing for multiple devices - GA London, 19 Nov 2012

Anna Dahlström, profile picture
Anna Dahlström

The document discusses the growing prevalence of mobile devices and the implications for user experience (UX) and design strategies. It compares bespoke mobile sites, responsive designs, and apps, highlighting the importance of a seamless user experience across devices. The content also emphasizes the need for designers to prioritize responsive design, optimize for various platforms, and consider user behavior in their design approach.

Design
Related topics:
User Experience Design • Responsive Design Insights • Web Design and Development
1 of 85
Downloaded 49 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 London, November 19th 2012 www.flickr.com/photos/tomsoperphotography/5663066047 Anna Dahlström co-founder byflock www.annadahlstrom.com anna.dahlstrom@gmail.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/visualpanic/3039691611
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 FOUCS OF TODAY SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID http://desktopwallpaper-s.com/19-Computers/-/Future/
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 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 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 http://www.flickr.com/photos/paperpariah/4301471586/
“ 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 RUNNING A SPECIFIC VERSION 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 major dating site has asked you to create a campaign for Valentines day 2013 focused EXERCISE ONE on "unexpected moments". The purpose is to facilitate encounters & dates between people in London looking to find that special someone. Location should be a key way to discover people & suggestions for date activities. What do you recommend in terms of their presence, particularly mobile & why? 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 major dating site has asked you to AN APP ALONE WON’T CUT IT create a campaign for Valentines day 2013 focused on "unexpected moments". The purpose is to facilitate encounters & ALSO CONSIDER... dates between people in London looking • THE OBJECTIVE (USER & BUSINESS) to find that special someone. Location should be a key way to discover • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE people & suggestions for date activities. • IF OFFLINE READING/USAGE IS What do you recommend in terms of REQUIRED their presence, particularly mobile & why? • & OF COURSE BUDGET 10 MINUTES www.flickr.com/photos/jojoneil/6359536591
BUILDING A RESPONSIVE SITE THEY WANT TO INCLUDE THE FOLLOWING: • About page • Sharing • Search (people, activities) • Login & registration • Activity suggestions • Data visualisations • Notifications (active users, dates etc) PART 1 EXERCISE TWO 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 & mobile. www.flickr.com/photos/jojoneil/6359536591 15 MINUTES
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 THEY WANT TO INCLUDE THE FOLLOWING: Logo 3 Nav • About page • Sharing 4 Bath 5 • Search (people, activities) • Login & registration Desktop & Tablet section intro Ad • Activity suggestions • Data visualisations • Notifications 1 2 (active users, dates etc) Logo Header 4 5 6 PART 1 Bath section intro Ad Types of baths 3 Pick either mobile or desktop & do a rough sketch Nav of what the home page should contain & how the 7 content should be prioritised. Where you see 6 Related 7 Types of baths 8 Store products Related products appropriate include a reference to where imagery locator should be used. 9 Tools 8 Store locator 9 Tools PART 2 10 Footer 10 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 • Sharing • Search (people, activities) • Login & registration • Activity suggestions • Data visualisations • Notifications (active users, dates etc) 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 • Sharing IMG Item • Search (people, activities) • Login & registration Item IMG • Activity suggestions • Data visualisations IMG Home • Notifications Item Item Item More (active users, dates etc) 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 BEFORE I GO REMEMBER THAT... • DESIGNING FOR MULTIPLE 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 www.flickr.com/photos/publicenergy/1846375599
...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
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
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
Designing For Multiple Devices - GA New York, 6 March 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
 
PDF
Designing For Multiple Devices - GA London, 04 Mar 2013
Anna Dahlström
 
Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013
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
 
Designing For Multiple Devices - GA New York, 6 March 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
 
Designing For Multiple Devices - GA London, 04 Mar 2013
Anna Dahlström
 

What's hot (19)

PDF
GA London - Designing for multiple devices, 28may2012
Anna Dahlström
 
PDF
Designing for multiple devices, GA London - 6 Aug 2012
Anna Dahlström
 
PDF
Designing for iPad
Pek Pongpaet
 
PDF
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Anna Dahlström
 
PDF
Beyond the mobile web by yiibu
yiibu
 
PDF
It's about people, not devices...
yiibu
 
PDF
Imagining the physical web
yiibu
 
PDF
Beyond progressive-enhancement
yiibu
 
PDF
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Anna Dahlström
 
PDF
Adaptation: Why responsive design actually begins on the server
yiibu
 
PDF
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 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
Reset the Web
yiibu
 
PDF
Technology for engagement
Minnesota Campus Comapct
 
PDF
Wearable Accessibility - Accessing Higher Ground 2014
Ted Drake
 
PDF
Computers in libraries 2012
Jason Griffey
 
PPTX
Olpc design analysis
R. Sosa
 
PPTX
Emerging practices 2019 week 6 design analysis
R. Sosa
 
GA London - Designing for multiple devices, 28may2012
Anna Dahlström
 
Designing for multiple devices, GA London - 6 Aug 2012
Anna Dahlström
 
Designing for iPad
Pek Pongpaet
 
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Anna Dahlström
 
Beyond the mobile web by yiibu
yiibu
 
It's about people, not devices...
yiibu
 
Imagining the physical web
yiibu
 
Beyond progressive-enhancement
yiibu
 
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Anna Dahlström
 
Adaptation: Why responsive design actually begins on the server
yiibu
 
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 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
 
Reset the Web
yiibu
 
Technology for engagement
Minnesota Campus Comapct
 
Wearable Accessibility - Accessing Higher Ground 2014
Ted Drake
 
Computers in libraries 2012
Jason Griffey
 
Olpc design analysis
R. Sosa
 
Emerging practices 2019 week 6 design analysis
R. Sosa
 
Ad

Viewers also liked (16)

ODP
Herbal remedies to stop smoking
Jane Allen
 
PPTX
Why quit cold turkey
Jane Allen
 
PPTX
Freedom from nicotine addiction what does it imply
Jane Allen
 
PPTX
Is it safe to stop smoking with chantix
Jane Allen
 
PPTX
Developing healthy habits after quit smoking
Jane Allen
 
ODP
Using stop smoking aids
Jane Allen
 
PPTX
How smoking affects the skin
Jane Allen
 
PPTX
Using the commit lozenge to stop smoking
Jane Allen
 
PPTX
Stop smoking benefits
Jane Allen
 
PPTX
Stop smoking natural remedies
Jane Allen
 
PDF
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Anna Dahlström
 
PPTX
The Effects of Smoking
Jane Allen
 
PPTX
Coughing after quitting cigarettes
Jane Allen
 
PPTX
Frequently asked questions about using the nicotine gum
Jane Allen
 
PPTX
The health risks of smoking cigarettes
Jane Allen
 
PPTX
Do lungs heal after quitting smoking
Jane Allen
 
Herbal remedies to stop smoking
Jane Allen
 
Why quit cold turkey
Jane Allen
 
Freedom from nicotine addiction what does it imply
Jane Allen
 
Is it safe to stop smoking with chantix
Jane Allen
 
Developing healthy habits after quit smoking
Jane Allen
 
Using stop smoking aids
Jane Allen
 
How smoking affects the skin
Jane Allen
 
Using the commit lozenge to stop smoking
Jane Allen
 
Stop smoking benefits
Jane Allen
 
Stop smoking natural remedies
Jane Allen
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Anna Dahlström
 
The Effects of Smoking
Jane Allen
 
Coughing after quitting cigarettes
Jane Allen
 
Frequently asked questions about using the nicotine gum
Jane Allen
 
The health risks of smoking cigarettes
Jane Allen
 
Do lungs heal after quitting smoking
Jane Allen
 
Ad

Similar to Designing for multiple devices - GA London, 19 Nov 2012 (20)

PDF
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Therese Kokot
 
PDF
Beyond The Mobile Web By Yiibu
Jim Porter
 
PDF
Beyond the mobile web
Alexander Anikin
 
PPT
Information Literacy gets mobile
Peter Godwin
 
PDF
The Library in Your Pocket - NJLibraryLink
Meredith Farkas
 
PPTX
Course tech conf_2013_ppt_mobile_technology_bowers-miller
Gina Bowers-Miller
 
PDF
Mobile technologies in libraries
Australian School Library Association
 
PDF
Any Time, Anywhere, Any Device (ISASA)
Cathy Oxley
 
PPTX
E mental Health Conference - Presentations
Youth Mental Health Network
 
PPT
The Library in Your Pocket: Mobile Trends for Libraries
Meredith Farkas
 
PDF
The trouble with context
yiibu
 
PDF
The trouble with context
Alexander Anikin
 
PPTX
Course Tech 2013, Gina M. Bowers-Miller, Using Mobile Technology in the Class...
Cengage Learning
 
PDF
The State of the Art in Mobile and How to Make the Most of it in Libraries - ...
Megan Hurst
 
PDF
Postdesktop
Doug Gapinski
 
PDF
Libraries to Go: Mobile Tech in Libraries
Ellyssa Kroski
 
PDF
Mobile Developer's Dilemma
Paul Golding
 
PPT
Delivering Innovative Mobile Services through Your Library - Part 1
Meredith Farkas
 
PDF
Location Based Services: Not Just GPS & Foursquare
The Difference Engine
 
PDF
Lbs talk
SheSays US
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Therese Kokot
 
Beyond The Mobile Web By Yiibu
Jim Porter
 
Beyond the mobile web
Alexander Anikin
 
Information Literacy gets mobile
Peter Godwin
 
The Library in Your Pocket - NJLibraryLink
Meredith Farkas
 
Course tech conf_2013_ppt_mobile_technology_bowers-miller
Gina Bowers-Miller
 
Mobile technologies in libraries
Australian School Library Association
 
Any Time, Anywhere, Any Device (ISASA)
Cathy Oxley
 
E mental Health Conference - Presentations
Youth Mental Health Network
 
The Library in Your Pocket: Mobile Trends for Libraries
Meredith Farkas
 
The trouble with context
yiibu
 
The trouble with context
Alexander Anikin
 
Course Tech 2013, Gina M. Bowers-Miller, Using Mobile Technology in the Class...
Cengage Learning
 
The State of the Art in Mobile and How to Make the Most of it in Libraries - ...
Megan Hurst
 
Postdesktop
Doug Gapinski
 
Libraries to Go: Mobile Tech in Libraries
Ellyssa Kroski
 
Mobile Developer's Dilemma
Paul Golding
 
Delivering Innovative Mobile Services through Your Library - Part 1
Meredith Farkas
 
Location Based Services: Not Just GPS & Foursquare
The Difference Engine
 
Lbs talk
SheSays US
 

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
Beyond The Hamburger Menu, UX Ireland, 10 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
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Anna Dahlström
 
PDF
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Anna Dahlström
 
PDF
Device Agnostic Design - UCD2014, London 25 Oct 2014
Anna Dahlström
 
PDF
Beyond The Hamburger Menu - MOBX, 13 Sep 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
 
Beyond The Hamburger Menu, UX Ireland, 10 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
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Anna Dahlström
 
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Anna Dahlström
 
Device Agnostic Design - UCD2014, London 25 Oct 2014
Anna Dahlström
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Anna Dahlström
 

Recently uploaded (20)

PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
SauravAggarwal12
 
PPTX
6- Architecture design complete (1).pptx
aroojkazmi006
 
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
sejo2001
 
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
prabujayant2022
 
PPT
Package Design Design Kit 20100009 PWM IC by Bee Technologies
Tsuyoshi Horigome
 
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
B3AITS - Bow & 3 Arrows IT Solutions
 
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Rohan Dasgupta
 
PDF
The Advantages of Working With a Design-Build Studio
Douglah Designs
 
PPTX
An introduction to AI in research and reference management
drmariaalrafi
 
PDF
High-frequency high-voltage transformer outline drawing
Tsuyoshi Horigome
 
PDF
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
PPT
UNIT I- Yarn, types, explanation, process
SANGEETHA PRIYA B
 
PPTX
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
PPTX
12. Community Pharmacy and How to organize it
stephenotemason
 
PPTX
Special finishes, classification and types, explanation
SANGEETHA PRIYA B
 
PPTX
building Planning Overview for step wise design.pptx
SamuelJohnson540488
 
PDF
Phone away, tabs closed: No multitasking
NaziaNowrin2
 
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
asmathmohamed2004
 
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
SauravAggarwal12
 
6- Architecture design complete (1).pptx
aroojkazmi006
 
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
simonkahinga
 
BRANDBOOK-Presidential Award Scheme-Kenya-2023
sejo2001
 
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
prabujayant2022
 
Package Design Design Kit 20100009 PWM IC by Bee Technologies
Tsuyoshi Horigome
 
AD Bungalow Case studies Sem 2.pptxvwewev
15MistryMitanshu
 
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
B3AITS - Bow & 3 Arrows IT Solutions
 
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Rohan Dasgupta
 
The Advantages of Working With a Design-Build Studio
Douglah Designs
 
An introduction to AI in research and reference management
drmariaalrafi
 
High-frequency high-voltage transformer outline drawing
Tsuyoshi Horigome
 
Trusted Executive Protection Services in Ontario — Discreet & Professional.pdf
secureshields25
 
UNIT I- Yarn, types, explanation, process
SANGEETHA PRIYA B
 
HPE Aruba-master-icon-library_052722.pptx
ManalWong
 
12. Community Pharmacy and How to organize it
stephenotemason
 
Special finishes, classification and types, explanation
SANGEETHA PRIYA B
 
building Planning Overview for step wise design.pptx
SamuelJohnson540488
 
Phone away, tabs closed: No multitasking
NaziaNowrin2
 
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
asmathmohamed2004
 

Designing for multiple devices - GA London, 19 Nov 2012

  • 1. DESIGNING FOR MULTIPLE DEVICES London, November 19th 2012 www.flickr.com/photos/tomsoperphotography/5663066047 Anna Dahlström co-founder byflock www.annadahlstrom.com anna.dahlstrom@gmail.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/visualpanic/3039691611
  • 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 FOUCS OF TODAY SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 7. 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 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 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 http://www.flickr.com/photos/paperpariah/4301471586/
  • 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 RUNNING A SPECIFIC VERSION 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 major dating site has asked you to create a campaign for Valentines day 2013 focused EXERCISE ONE on "unexpected moments". The purpose is to facilitate encounters & dates between people in London looking to find that special someone. Location should be a key way to discover people & suggestions for date activities. What do you recommend in terms of their presence, particularly mobile & why? 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 major dating site has asked you to AN APP ALONE WON’T CUT IT create a campaign for Valentines day 2013 focused on "unexpected moments". The purpose is to facilitate encounters & ALSO CONSIDER... dates between people in London looking • THE OBJECTIVE (USER & BUSINESS) to find that special someone. Location should be a key way to discover • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE people & suggestions for date activities. • IF OFFLINE READING/USAGE IS What do you recommend in terms of REQUIRED their presence, particularly mobile & why? • & OF COURSE BUDGET 10 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 61. BUILDING A RESPONSIVE SITE THEY WANT TO INCLUDE THE FOLLOWING: • About page • Sharing • Search (people, activities) • Login & registration • Activity suggestions • Data visualisations • Notifications (active users, dates etc) PART 1 EXERCISE TWO 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 & mobile. www.flickr.com/photos/jojoneil/6359536591 15 MINUTES
  • 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 THEY WANT TO INCLUDE THE FOLLOWING: Logo 3 Nav • About page • Sharing 4 Bath 5 • Search (people, activities) • Login & registration Desktop & Tablet section intro Ad • Activity suggestions • Data visualisations • Notifications 1 2 (active users, dates etc) Logo Header 4 5 6 PART 1 Bath section intro Ad Types of baths 3 Pick either mobile or desktop & do a rough sketch Nav of what the home page should contain & how the 7 content should be prioritised. Where you see 6 Related 7 Types of baths 8 Store products Related products appropriate include a reference to where imagery locator should be used. 9 Tools 8 Store locator 9 Tools PART 2 10 Footer 10 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 • Sharing • Search (people, activities) • Login & registration • Activity suggestions • Data visualisations • Notifications (active users, dates etc) 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 • Sharing IMG Item • Search (people, activities) • Login & registration Item IMG • Activity suggestions • Data visualisations IMG Home • Notifications Item Item Item More (active users, dates etc) 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 BEFORE I GO REMEMBER THAT... • DESIGNING FOR MULTIPLE 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 www.flickr.com/photos/publicenergy/1846375599
  • 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/