![Page 1: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/1.jpg)
Anna Dahlströmco-founder byflock
www.annadahlstrom.com annadahlstrom
DESIGNING FOR MULTIPLE DEVICESNew York October 8th 2012
![Page 2: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/2.jpg)
I’m AnnaIA & UX DESIGNER | SWEDISH BUT LONDON BASED
FREELANCING + WORKING ON A STARTUPLOVES QUOTES & CHALLENGES
This is Öresundsbron, the bridge between Sweden & Denmark
www.flickr.com/photos/dahlstroms/4411448782/
![Page 3: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/3.jpg)
www.flickr.com/photos/flatworldsedge/5151764959/
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
![Page 4: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/4.jpg)
www.flickr.com/photos/publicenergy/1846375599
1. FIRST UP...DEVICE USAGE & PATTERNS
![Page 5: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/5.jpg)
http://desktopwallpaper-s.com/19-Computers/-/Future/
DEVICE: a thing defined for a specific purpose or task & which can connect to the internet
![Page 6: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/6.jpg)
http://desktopwallpaper-s.com/19-Computers/-/Future/
THE FOUCS OF TODAYSMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID
![Page 7: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/7.jpg)
www.flickr.com/photos/nasamarshall/6289116940
By the end of 2012, the number of mobile-connected devices will exceed the number of people on earth, and by 2016 there will be 1.4 mobile devices per capita.** Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
![Page 8: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/8.jpg)
www.flickr.com/photos/jorgeq82/4732700819
The average person looks at their phone 150 times a day.** Source: www.textually.org/textually/archives/2012/02/030229.htm
![Page 9: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/9.jpg)
www.flickr.com/photos/exlibris/2552107635
40% of people use their phone in the bathroom** Source: http://www.lukew.com/ff/entry.asp?1500
![Page 10: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/10.jpg)
www.flickr.com/photos/yahnyahn/2996454839
” The best computer is the one you have with you when you want something done. “- JACOB NIELSEN
MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE
![Page 11: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/11.jpg)
USAGE PATTERNS ACROSS DEVICES
www.flickr.com/photos/brandoncwarren/4236278556
“...as devices become more mobile, it’s not only changing where we read, but when. ”- POCKET (formerly Read it Later)
![Page 12: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/12.jpg)
www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS - DESKTOP
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
![Page 13: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/13.jpg)
www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS- iPHONE
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
![Page 14: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/14.jpg)
www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS- iPAD
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
![Page 15: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/15.jpg)
PEAK TIMES
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
•When we get up
•On our way to/ just arrived at work
•Commuting home
•Post dinner
![Page 16: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/16.jpg)
www.flickr.com/photos/theirmind/5001267661/
“MOBILE USERS ARE RUSHED & ON THE GO” THIS IS A MYTH
![Page 17: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/17.jpg)
http://www.flickr.com/photos/hanhutton/320464105/
A LARGE PROPORTION OF USAGE HAPPENS WHEN WE
HAVE TIME TO KILLCOMMUTING, WAITING BUT ALSO AT HOME
![Page 18: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/18.jpg)
www.flickr.com/photos/edduddiee/4307943164
THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPSAS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE & TASK EXECUTION IS INCREASING
![Page 19: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/19.jpg)
www.flickr.com/photos/stuckincustoms/440157748
Three purchases are made through eBay’s mobile applications every second.*Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods
![Page 20: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/20.jpg)
2. THIS HAS...IMPLICATIONS FOR UX & DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/
![Page 21: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/21.jpg)
www.flickr.com/photos/frantaylor/4296536332
LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKSE.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU
![Page 22: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/22.jpg)
http://desktopwallpaper-s.com/19-Computers/-/Future/
RESULTED IN MOBILE SPECIFIC WEBSITESLESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION
DESKTOP FULL WEBSITE
BESPOKE CUT
DOWN WEBSITE
BESPOKE CUT
DOWN WEBSITE
![Page 23: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/23.jpg)
www.flickr.com/photos/demandaj/7287174776
PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINKTHERE IS A REASON FOR THAT
![Page 24: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/24.jpg)
www.flickr.com/photos/joachim_s_mueller/7110473339
AN EQUAL & CONTINUOS EXPERIENCE
ACROSS DEVICESTHIS EXPECTATION WILL
ONLY GROW STRONGER
![Page 25: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/25.jpg)
http://www.flickr.com/photos/young_einstein/74097753/
3. A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs. APPS
![Page 26: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/26.jpg)
www.flickr.com/photos/st3f4n/3476036180
PRIMARY REASONS FOR A BESPOKE MOBILE SITE• REQUIRED FOR THE AUDIENCE
• TECHNICAL LIMITATIONS TO CMS
![Page 27: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/27.jpg)
http://www.flickr.com/photos/edenandjosh/2892956576/
BEST AVOIDED IF WE CAN
IT CAN CAUSE ALL SORTS OF PROBLEMS
![Page 28: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/28.jpg)
www.flickr.com/photos/lastquest/1472794031
BUT WHY?” Today's popular devices are
not tomorrow's so building something which works on any
device is better than building something which works on
today's devices “- COMBINED WISE WORDS FROM @ONEXTRAPIXEL &
@TRENTWALTON
![Page 29: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/29.jpg)
www.flickr.com/photos/ericconstantineau/5618576278
THE ALTERNATIVE IS MESSY & COSTLY
MAINTAINING DIFFERENT VERSIONSUSERS HAVING PROBLEMS FINDING
WHAT THEY ARE AFTER (E.G. IN SEARCH)
![Page 30: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/30.jpg)
www.flickr.com/photos/jmtimages/2883279193
CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISEDBOTH IN DISPLAY OF CONTENT & REGARDING USING DEVICE CAPABILITIES
![Page 31: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/31.jpg)
www.flickr.com/photos/andwhynot/2946734025
MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APPMOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT ITA BIT OF BOTH THEN CONSIDER....
MOBILE PRESENCE vs. APP?USE ANALYTICS FOR GUIDANCE
![Page 32: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/32.jpg)
www.flickr.com/photos/31878512@N06/4704140020
WHETHER TO DO AN APP OR NOT COMES DOWN TO...• THE OBJECTIVE (USER & BUSINESS)
• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET
![Page 33: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/33.jpg)
DIFFERENT TYPES OF APPSTHE MAIN TWO TYPES
NATIVE APPS (e.g. Instagram)
• MOST OPTIMISED USER EXPERIENCE• ACCESS TO DEVICE CAPABILITIES & APIs• BUT REQUIRES PLATFORM SPECIFIC CODE BASE
HYBRID (e.g. Facebook)
• USE OF HTML5 & JAVASRIPT• WRAPPER TO PROVIDE NATIVE CAPABILITIES• FEWER “VERSIONS” TO MAINTAIN• BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS• CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
![Page 34: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/34.jpg)
www.flickr.com/photos/cristiano_betta/2909483129
” Money spent developing a pretty but limited iPhone app only benefits...the few, but money spent on the website UI would have benefitted everyone “- Gary Marshall on ‘The app trap’ in .net Magaizine
![Page 35: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/35.jpg)
http://www.flickr.com/photos/paperpariah/4301471586/
4. THERE IS SOMETHING CALLED... RESPONSIVE DESIGN
![Page 36: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/36.jpg)
www.flickr.com/photos/adactio/5818096043
“ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. ”- SMASHING MAGAZINE
![Page 37: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/37.jpg)
http://foundation.zurb.com/docs/layout.php
DEFINE YOUR GRID & BREAK POINTS• USE AS THE BASIS OF
YOUR PAGE LAYOUTS
• CHECKPOINT FOR MODULE SIZES & VARIANTS
• FIXED OR FLUID COLUMNS
• DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICES
![Page 38: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/38.jpg)
DEFINE YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
Desktop & Tablet
Mobile
“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”- TRENT WALTON
![Page 39: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/39.jpg)
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
![Page 40: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/40.jpg)
THE WEB IS FULL OF EXAMPLESLOOK FOR INSPIRATION & BEST PRACTICEe.g. as shown on the righthttp://mediaqueri.es/popular/
BUT DON’T BE AFRAID TO CHALLENGE OR COME UP WITH SOMETHING... BETTER.
http://mediaqueri.es/popular/
![Page 41: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/41.jpg)
www.flickr.com/photos/tim_norris/2789759648
CONSIDER YOUR NAVIGATIONDIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS
![Page 42: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/42.jpg)
EXCELLENT READ
‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
![Page 43: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/43.jpg)
www.flickr.com/photos/dopey/123646856
![Page 44: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/44.jpg)
http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
5. WHAT ABOUT... DOING AN APP?
![Page 45: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/45.jpg)
www.flickr.com/photos/elwillo/5247084642
” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “- Apps on tap, The Economist Oct 8th 2011
APPS ARE FOCUSED & PERSONAL
![Page 46: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/46.jpg)
www.flickr.com/photos/gadl/3570118243
EVERY PLATFORM IS ITS OWN LITTLE WORLDWITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO
![Page 47: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/47.jpg)
www.flickr.com/photos/nrkbeta/3906687294/in/photostream
NOT AS EASY AS JUST ANDROID OR iOSFRAGMENTATION ACROSS DIFFERENT VERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED
![Page 48: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/48.jpg)
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
![Page 49: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/49.jpg)
EXAMPLE OF ADOPTION OF NEW iOS VERSION
Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
www.flickr.com/photos/blakespot/4773693893
![Page 50: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/50.jpg)
KEY DIFFERENCES BETWEEN DESIGNING FOR ANDROID & iOS
iOSCONSISTENCY
CONSISTENCY BETWEEN VERSIONS & HANDSETS
QUICK ADOPTION OF NEW VERSIONS
BACK BUTTON
SETTINGS BUTTON OR 'MORE' TO ACCESS APP WIDE SETTINGS & INFORMATION
ANDROIDFRAGMENTATION
DIFFERENT FOR DIFFERENT VERSIONS & HANDSETS
SLOWER IMPLEMENTATION & UPTAKE OF NEWER VERSIONS
HANDLED WITH EITHER SYSTEM BACK BUTTON (EARLIER VERSIONS) OR BACK & UP BUTTONS (LATEST VERSION)
OPTIONS MENU USED TO HOUSE APP WIDE SETTINGS & INFORMATION
Design
UI elements & principles
Version adoption
Back navigation
Settings etc.
www.flickr.com/photos/nrkbeta/3906687294/in/photostream
![Page 51: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/51.jpg)
iPHONE RESOURCESHELP & INSPIRATION WELL DOCUMENTED
![Page 52: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/52.jpg)
ANDROID RESOURCESHELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIER VERSIONS
![Page 53: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/53.jpg)
Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS
NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTONShould always take the user one step back from where they came from & be descriptive.
TAB BARCan often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEMUsed to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAMEMore Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item
![Page 54: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/54.jpg)
Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID NAVIGATIONDIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH:
NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BARHolds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTONThe Up button is used to navigate up one level based on the hierarchical structure of the site.
Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
![Page 55: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/55.jpg)
www.flickr.com/photos/jojoneil/6359536591
HOW TO TAME THE BEAST?YOU LEARN BY DOING
![Page 56: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/56.jpg)
http://www.flickr.com/photos/kalexanderson/6302660289/
6. TIME TOPRACTICE
![Page 57: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/57.jpg)
www.flickr.com/photos/jojoneil/6359536591
BESPOKE MOBILE SITE vs RESPONSIVE vs AN APPCONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN:In preparation for the Christmas season 2012 Company A wants to create the ultimate Christmas guide to New York City. What do you recommend in terms of their presence, particularly mobile & why?
10 MINUTES
EXERCISE ONE
![Page 58: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/58.jpg)
www.flickr.com/photos/andwhynot/2946734025
MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APPMOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT ITA BIT OF BOTH THEN CONSIDER....
MOBILE PRESENCE vs. APP?USE ANALYTICS FOR GUIDANCE
![Page 59: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/59.jpg)
www.flickr.com/photos/31878512@N06/4704140020
WHETHER TO DO AN APP OR NOT COMES DOWN TO• THE OBJECTIVE (USER & BUSINESS)
• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET
![Page 60: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/60.jpg)
www.flickr.com/photos/jojoneil/6359536591
EXERCISE ONE
BESPOKE MOBILE SITE vs RESPONSIVE vs AN APPCONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN:In preparation for the Christmas season 2012 Company A wants to create the ultimate Christmas guide to New York City. What do you recommend in terms of their presence, particularly mobile & why?
10 MINUTES
HOW WOULD MOST PEOPLE ACCESS IT?
•MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP
•MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT
CONSIDER...
•THE OBJECTIVE (USER & BUSINESS)
• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET
![Page 61: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/61.jpg)
www.flickr.com/photos/jojoneil/6359536591
BUILDING A RESPONSIVE SITECOMPANY A WANTS TO INCLUDE THE FOLLOWING ON THEIR SITE:
• Event calendar• Day planner & search• Itineraries suggestions
PART 1
Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. Where you see appropriate include a reference to where imagery should be used.
PART 2
Using content stacking methodology define how the content should be prioritised on desktop and mobile.
15 MINUTES
EXERCISE TWO
• Christmas focused maps• Basic travel search• Ad spaces & offers
![Page 62: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/62.jpg)
DEFINE YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
Desktop & Tablet
Mobile
“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”- TRENT WALTON
![Page 63: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/63.jpg)
www.flickr.com/photos/jojoneil/6359536591
EXERCISE TWO
BUILDING A RESPONSIVE SITECOMPANY A WANTS TO INCLUDE THE FOLLOWING ON THEIR SITE:
• Event calendar• Day planner & search• Itineraries suggestions
PART 1
Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. Where you see appropriate include a reference to where imagery should be used.
PART 2
Using content stacking methodology define how the content should be prioritised on desktop and mobile.
15 MINUTES
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
Desktop & Tablet
Mobile
• Christmas focused maps• Basic travel search• Ad spaces & offers
![Page 64: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/64.jpg)
www.flickr.com/photos/jojoneil/6359536591
BUILDING AN APPBASED ON THE CONTENT FOR THE SITE & WHAT YOU KNOW ABOUT CHRISTMAS IN NEW YORK CONSIDER WHAT WOULD BE SUITABLE FOR AN APP:
• Event calendar• Day planner & search• Itineraries suggestions
PART 1
Define the main sections your app would have.
PART 2
Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’.
15 MINUTES
EXERCISE THREE
• Christmas focused maps• Basic travel search• Ad spaces & offers
![Page 65: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/65.jpg)
Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS
NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTONShould always take the user one step back from where they came from & be descriptive.
TAB BARCan often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEMUsed to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAMEMore Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item
![Page 66: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/66.jpg)
Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID NAVIGATIONDIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH:
NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BARHolds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTONThe Up button is used to navigate up one level based on the hierarchical structure of the site.
Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
![Page 67: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/67.jpg)
www.flickr.com/photos/jojoneil/6359536591
EXERCISE THREE
BUILDING AN APPBASED ON THE CONTENT FOR THE SITE & WHAT YOU KNOW ABOUT CHRISTMAS IN NEW YORK CONSIDER WHAT WOULD BE SUITABLE FOR AN APP:
• Event calendar• Day planner & search• Itineraries suggestions
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
• Christmas focused maps• Basic travel search• Ad spaces & offers
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAMEMore Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item
![Page 68: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/68.jpg)
http://www.flickr.com/photos/martinteschner/4569495912/
7. TOSUMMARISE
![Page 69: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/69.jpg)
www.flickr.com/photos/thecaucas/2597813380
DEVICE USAGE & PATTERNSFUTURE DEVICESThe number of different devices will only grow & we don’t know what’s coming.USED EVERYWHERE & ANYWHERE And we’re not only using them on the go but increasingly when we have some downtime including the sofa.USE OF MOBILE DEVICESOur use of mobile devices is increasingly replicating that of desktop.
![Page 70: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/70.jpg)
www.flickr.com/photos/thecaucas/2597813380
IMPLICATIONS FOR UX & DESIGN THINKINGAN EQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICESAs they & the services we use become more sophisticated & optimised we expect more from them.KEEP THE CORE BUT OPTIMISEConsider the limitations but also the opportunities with mobile devices.
![Page 71: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/71.jpg)
www.flickr.com/photos/thecaucas/2597813380
WHEN DO WHATBESPOKE MOBILE WEBSITETry to avoid it but do it if necessaryRESPONSIVE & ADAPTIVE DESIGNThe most device & future adaptive approach right now. Use if possible. But challenge content delivery.APPUse if you require offline reading/functionality & access to device capabilities. Base which type on objectives & stats.
![Page 72: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/72.jpg)
www.flickr.com/photos/thecaucas/2597813380
FOR RESPONSIVEDEFINE YOUR GRID & BREAKPOINTSThis is the backbone of responsive design & content choreography.DON’T FORGET THE NAVIGATIONConsider the pros & cons of different methods.TEST & COLLABORATEThis is new grounds & we’re all learning so work together & test as you go.
![Page 73: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/73.jpg)
www.flickr.com/photos/thecaucas/2597813380
FOR APPSREMEMBER PLATFORM SPECIFIC GUIDELINESAdhering to them will make your app easier to use.CONSIDER BACKWARDS COMPATIBILITYNot everyone will be on the latest version. Ensure you cater for the majority.CONSULT THE INTERNETThere are a number of great resources for knowledge & inspiration. Use them.
![Page 74: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/74.jpg)
www.flickr.com/photos/publicenergy/1846375599
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 DOwww.flickr.com/photos/publicenergy/1846375599
8. BEFORE I GO...REMEMBER THAT
![Page 75: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/75.jpg)
www.flickr.com/photos/jolives/2889944573/
...IT’S NOT JUST ABOUT THE SMALLER SCREENS
BUT ALSO THE BIG ONES
![Page 76: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/76.jpg)
www.flickr.com/photos/jolives/2889944573/
IT’S ABOUT THINKING AHEAD
PLAN 5 YEARS AHEAD WITH “FUTURE PROOFING” IN MIND
![Page 77: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/77.jpg)
http://www.flickr.com/photos/gi/5537770007/
IT DOESN’T HAVE TO BREAK
THE BANKBESIDES CONSIDER LOST
CUSTOMERS & MAINTAINING MULTIPLE VERSIONS
![Page 78: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/78.jpg)
www.flickr.com/photos/oter/5090592214
BE CREATIVE & CHALLENGE WHAT EXISTS TODAYTHAT’S WHAT MOVES US FORWARD
![Page 79: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/79.jpg)
www.flickr.com/photos/stevendepolo/3378152784
CLOSER & MORE REWARDING COLLABORATIONBETWEEN DISCIPLINES & WITH CLIENTS
![Page 80: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/80.jpg)
- Wilson Minor
“ We’re not just making pretty interfaces. We’re actually in the process of making an environment where we’ll spend most of our time, for the rest of our lives. We’re the designers. We’re the builders. What do we want that environment to feel like? What do we want to feel like.
http://www.flickr.com/photos/funch/4679422945/
”
BUT ABOVE ALL...
![Page 81: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/81.jpg)
www.flickr.com/photos/st3f4n/4387291247
9. FOR THE ROADSOME TAKE AWAYS
![Page 82: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/82.jpg)
www.flickr.com/photos/st3f4n/4387291247
PLATFORM GUIDELINEShttp://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.htmlhttp://mrgan.tumblr.com/post/10492926111/labeling-the-back-buttonhttp://developer.android.com/design/index.html
![Page 83: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/83.jpg)
www.flickr.com/photos/st3f4n/4387291247
PATTERN LIBRARIEShttp://pttrns.com/http://mobile-patterns.com/http://www.patternsofdesign.co.uk/http://www.mobiledesignpatterngallery.com/mobile-patterns.phphttp://www.androidpatterns.com/http://androidpttrns.com/
![Page 84: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/84.jpg)
www.flickr.com/photos/st3f4n/4387291247
RESPONSIVE DESIGNhttp://mediaqueri.es/popular/http://www.alistapart.com/articles/responsive-web-design/http://designmodo.com/responsive-design-examples/http://jamus.co.uk/demos/rwd-demonstrations/http://bradfrostweb.com/blog/web/responsive-nav-patterns/http://www.gridsetapp.com/http://grid.mindplay.dkhttp://goldengridsystem.com/http://foundation.zurb.com/docs/layout.php
![Page 85: Designing for multiple devices - GA, New York 08 Oct 2012](https://reader036.vdocuments.mx/reader036/viewer/2022062511/54c713b54a79599a708b45bb/html5/thumbnails/85.jpg)
www.flickr.com/photos/dahlstroms/4411448782/
Thank you!QUESTIONS?
annadahlstromannadahlstrom
www.annadahlstrom.com