Anna Dahlström
founder byflock
www.annadahlstrom.com
annadahlstrom
London 24th July 2013 | Part 1 - Fundamentals of...
DESI...
I’m Anna
IA & UX DESIGNER | FREELANCE SINCE 2011
SWEDISH | IN LONDON SINCE 2006
This is me at my favourite place, Knäbäcks...
www.flickr.com/photos/suttonhoo22/2070700035
AGENDA
1. DEVICE USAGE & PATTERNS
2. IMPLICATIONS FOR UX &
DESIGNTHINKING
3. B...
www.flickr.com/photos/publicenergy/1846375599
1. FIRST UP...
DEVICE USAGE &
PATTERNS
http://desktopwallpaper-s.com/19-Computers/-/Future/
DEVICE: a thing defined for a specific
purpose or task & which can conn...
http://desktopwallpaper-s.com/19-Computers/-/Future/
THE FOCUS OFTODAY
SMARTPHONES | DESKTOP (TABLETS) - iOS & ANDROID
www.flickr.com/photos/hlkljgk/5764422581
For every human that enters the world,
five mobile devices are created*
* Source: h...
www.flickr.com/photos/nasamarshall/6289116940
In 2009 1% of global internet traffic came
from mobiles. In 2010 the number wa...
www.flickr.com/photos/jayfresh/3388253576/
41% of emails are now opened on mobile
devices *
* Source: http://econsultancy.c...
www.flickr.com/photos/jorgeq82/4732700819
The average person looks at their phone
150 times a day.*
* Source: www.textually...
www.flickr.com/photos/exlibris/2552107635
40% of people use their phone in the
bathroom*
* Source: http://www.lukew.com/ff/...
www.flickr.com/photos/yahnyahn/2996454839
” The best computer is
the one you have with
you when you want
something done. “
...
USAGE PATTERNS
ACROSS DEVICES
www.flickr.com/photos/brandoncwarren/4236278556
“...as devices become
more mobile, it’s not
o...
www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
- DESKTOP
Source: http://readitlaterlist.com/blog/2011/01/is...
www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
- iPHONE
Source: http://readitlaterlist.com/blog/2011/01/is-...
www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
- iPAD
Source: http://readitlaterlist.com/blog/2011/01/is-mo...
PEAKTIMES
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
•When we get up
•On our way to/...
www.flickr.com/photos/chicitoloco/8468592748/in/photostream/
“MOBILE USERS ARE
RUSHED & ONTHE GO”
THIS IS A MYTH
www.flickr.com/photos/anniemole/2424372024
A LARGE PROPORTION OF
USAGE HAPPENS WHEN WE
HAVETIMETO KILL
COMMUTING,WAITING BU...
www.flickr.com/photos/edduddiee/4307943164
THE SAMETASKS ARE
CARRIED OUT ON
SMARTPHONES AS
ON DESKTOPS
AS DEVICES & EXPERIE...
www.flickr.com/photos/stuckincustoms/440157748
Three purchases are made through
eBay’s mobile applications every second.*
S...
2.THIS HAS...
IMPLICATIONS
FOR UX & DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/
www.flickr.com/photos/frantaylor/4296536332
LIMITED DEVICE CAPABILITIES
USEDTO MEAN LIMITEDTASKS
E.G. FOCUS ON SEARCH | OPE...
http://desktopwallpaper-s.com/19-Computers/-/Future/
RESULTED IN MOBILE
SPECIFIC WEBSITES
LESS CONTENT & LINKS BACKTOTHE F...
www.flickr.com/photos/demandaj/7287174776
PEOPLE ARE CLICKINGTHE
‘FULL DESKTOPVERSION’ LINK
THERE IS A REASON FORTHAT
www.flickr.com/photos/joachim_s_mueller/7110473339
AN EQUAL &
CONTINUOS
EXPERIENCE
ACROSS DEVICES
THIS EXPECTATION WILL
ONL...
http://www.flickr.com/photos/young_einstein/74097753/
3.A CLOSER LOOK AT...
BESPOKE
MOBILE SITES vs.
RESPONSIVE SITES
vs.AP...
http://desktopwallpaper-s.com/19-Computers/-/Future/
BESPOKE MOBILE SITES
HAVE SEPARATE URLS
USUALLY LESS CONTENT & A LINK...
http://desktopwallpaper-s.com/19-Computers/-/Future/
FULL WEBSITE
FULL
WEBSITE
FULL
WEBSITE
RESPONSIVE SITES
HAVETHE SAME ...
www.flickr.com/photos/mkhmarketing/8468995025
Roughly 1 in 10 people that access Facebook
each month do so from a feature p...
www.flickr.com/photos/st3f4n/3476036180
PRIMARY REASONS
FOR A BESPOKE
MOBILE SITE
• REQUIRED FORTHE AUDIENCE
•TECHNICAL LIM...
http://www.flickr.com/photos/edenandjosh/2892956576/
BEST AVOIDED
IF POSSIBLE
IT CAN CAUSE ALL SORTS OF
PROBLEMS
www.flickr.com/photos/lastquest/1472794031
BUT WHY?
” Today's popular devices are
not tomorrow's so building
something whic...
www.flickr.com/photos/ericconstantineau/5618576278
THE ALTERNATIVE
IS MESSY & COSTLY
MAINTAINING DIFFERENTVERSIONS
USERS HA...
www.flickr.com/photos/jmtimages/2883279193
CORE CONTENT SHOULD
REMAINTHE SAME BUTTHE
EXPERIENCE SHOULD BE
OPTIMISED
BOTH IN...
www.flickr.com/photos/andwhynot/2946734025
MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
MOSTLYVIA SHARED LINKS
MOBILE WE...
www.flickr.com/photos/31878512@N06/4704140020
WHETHERTO DO AN APP
OR NOT COMES DOWNTO...
•THE OBJECTIVE (USER & BUSINESS)
•...
DIFFERENT
TYPES OF APPS
THE MAINTWOTYPES
NATIVE APPS (e.g. Instagram)
• MOST OPTIMISED USER EXPERIENCE
• ACCESSTO DEVICE C...
www.flickr.com/photos/cristiano_betta/2909483129
” Money spent developing a pretty but limited
iPhone app only benefits...th...
www.flickr.com/photos/taytom/5277657429
4.THERE IS SOMETHING
CALLED...
RESPONSIVE
DESIGN
www.flickr.com/photos/adactio/5818096043
“ Design & development should respond to
the user’s behaviour & environment based ...
http://foundation.zurb.com/docs/layout.php
DEFINE
YOUR GRID
& BREAK
POINTS
• USE ASTHE BASIS OF
YOUR PAGE LAYOUTS
• CHECKP...
“ Content needs to be choreographed to
ensure the intended message is preserved
on any device and at any width ”
-TRENT WA...
DEFINE
YOUR
CONTENT
STACKING
STRATEGY
ACROSS DEVICES &
ORIENTATION
3
Nav
7
Related products
2 Header
4
Bath
section
intro
...
MOBILEVS. DESKTOP FIRST
•START LARGE OR SMALL
WHAT EVER WORKS BEST FORYOU
•ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW I...
www.flickr.com/photos/stephangeyer/
CONSIDERTHE
MOBILE CONTEXT
THE USE CASE MAY BE
THE SAME BUT
USING A MOBILE
DEVICE IS DI...
LIKE PLAYING REAL LIFETETRIS
PRE-DEFINED POCKETS FORTHE CONTENTTO SLOT INTO
www.flickr.com/photos/fritzon/195008860
www.flickr.com/photos/adactio/6153481666
80% of traffic in your analytics will often
come from 20% of devices…seems a shame
...
THE WEB IS
FULL OF
EXAMPLES
LOOK FOR INSPIRATION &
BEST PRACTICE
BUT DON’T BE AFRAIDTO
CHALLENGE OR COME UP
WITH SOMETHING...
www.flickr.com/photos/tim_norris/2789759648
CONSIDERYOUR NAVIGATION
DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS
EXCELLENT READ
‘RESPONSIVE NAVIGATION PATTERNS’
by Brad Frost.*
Source: http://bradfrostweb.com/blog/web/responsive-nav-pa...
www.flickr.com/photos/melodramababs/2766765248/
“ Mobile navigation should be like a good
friend: there when you need them ...
www.flickr.com/photos/dopey/123646856
http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
5.WHAT ABOUT...
DOING AN APP?
www.flickr.com/photos/elwillo/5247084642
” Small, downloadable chunks
of software, they give people
access to information i...
www.flickr.com/photos/gadl/3570118243
EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITHTHEIR OWN UI
GUIDELINESTHAT
USERS ARE USED...
www.flickr.com/photos/nrkbeta/3906687294/in/photostream
NOT AS
EASY AS JUST
ANDROID
OR iOS
FRAGMENTATION ACROSS
DIFFERENTVE...
RELATIVE NUMBER OF
ACTIVE ANDROID DEVICES
Source: http://developer.android.com/about/dashboards/index.html
www.flickr.com/p...
EXAMPLE OF ADOPTION
OF NEW iOSVERSION
Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
www.flickr...
KEY DIFFERENCES BETWEEN
DESIGNING FOR ANDROID & iOS
iOS
CONSISTENCY
CONSISTENCY BETWEEN
VERSIONS & HANDSETS
QUICK ADOPTION...
iPHONE
RESOURCES
HELP & INSPIRATION
WELL DOCUMENTED
ANDROID
RESOURCES
HELP & INSPIRATION A LITTLE
LESS WELL DOCUMENTED FOR
EARLIERVERSIONS
Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS
NAVIGATION
CONSISTENT ACROSS
VERSIONS
NAVIGATI...
Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CR...
www.flickr.com/photos/jojoneil/6359536591
HOWTOTAMETHE BEAST?
YOU LEARN BY DOING
START BY
SKETCHING
YOUR SCREEN FLOWS,
NAVIGATION & CONTENT
www.flickr.com/photos/saucef/7184615025
6.TIMETO
PRACTICE
http://www.flickr.com/photos/kalexanderson/6302660289/
www.flickr.com/photos/jojoneil/6359536591
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
The city of Lo...
www.flickr.com/photos/andwhynot/2946734025
MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
MOSTLYVIA SHARED LINKS
MOBILE WE...
www.flickr.com/photos/31878512@N06/4704140020
WHETHERTO DO AN APP
OR NOT COMES DOWNTO
•THE OBJECTIVE (USER & BUSINESS)
• IF...
www.flickr.com/photos/jojoneil/6359536591
EXERCISE ONE
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
T...
www.flickr.com/photos/jojoneil/6359536591
BUILDING A
RESPONSIVE SITE
FOR THE HALLOWEEN SITE THE CLIENT
WANTS TO INCLUDE THE...
DEFINEYOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6...
www.flickr.com/photos/jojoneil/6359536591
EXERCISETWO
BUILDING A
RESPONSIVE SITE
FOR THE HALLOWEEN SITE THE CLIENT
WANTS TO...
www.flickr.com/photos/jojoneil/6359536591
BUILDING AN APP
BASED ON THE CONTENT & FUNCTIONALITY
REQUIREMENTS, CONSIDER WHAT ...
Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS
NAVIGATION
CONSISTENT ACROSS
VERSIONS
NAVIGATI...
Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CR...
www.flickr.com/photos/jojoneil/6359536591
EXERCISETHREE
BUILDING AN APP
BASED ON THE CONTENT &
FUNCTIONALITY REQUIREMENTS,
...
http://www.flickr.com/photos/martinteschner/4569495912/
7.TO
SUMMARISE
www.flickr.com/photos/thecaucas/2597813380
DEVICE USAGE &
PATTERNS
FUTURE DEVICES
The number of different devices will
only...
www.flickr.com/photos/thecaucas/2597813380
IMPLICATIONS
FOR UX &
DESIGN
THINKING
AN EQUAL & CONTINUOUS
EXPERIENCE ACROSS DE...
www.flickr.com/photos/thecaucas/2597813380
WHEN
DO WHAT
BESPOKE MOBILE WEBSITE
Try to avoid it but do it if necessary
RESPO...
www.flickr.com/photos/thecaucas/2597813380
FOR
RESPONSIVE
DEFINEYOUR GRID &
BREAKPOINTS
This is the backbone of responsive
...
www.flickr.com/photos/thecaucas/2597813380
FOR APPS
REMEMBER PLATFORM SPECIFIC
GUIDELINES
Adhering to them will make your
a...
8. BEFORE I GO...
REMEMBERTHAT
www.flickr.com/photos/46355638@N00/4414640784
www.flickr.com/photos/jolives/2889944573/
...IT’S NOT JUST ABOUT
THE SMALLER SCREENS
BUT ALSOTHE BIG ONES
www.flickr.com/photos/jolives/2889944573/
IT’S ABOUT
THINKING AHEAD
PLAN 5YEARS AHEAD WITH
“FUTURE PROOFING” IN MIND
http://www.flickr.com/photos/gi/5537770007/
IT DOESN’T
HAVETO BREAK
THE BANK
BESIDES CONSIDER LOST
CUSTOMERS & MAINTAINING
...
www.flickr.com/photos/oter/5090592214
BE CREATIVE & CHALLENGE
WHAT EXISTSTODAY
THAT’S WHAT MOVES US FORWARD
www.flickr.com/photos/stevendepolo/3378152784
CLOSER & MORE
REWARDING
COLLABORATION
BETWEEN DISCIPLINES & WITH CLIENTS
- Wilson Minor
“ We’re not just making pretty
interfaces.We’re actually in the process of
making an environment where we’l...
www.flickr.com/photos/st3f4n/4387291247
9. FORTHE ROAD
SOMETAKE
AWAYS
www.flickr.com/photos/st3f4n/4387291247
PLATFORM
GUIDELINES
http://developer.apple.com/library/ios/
#DOCUMENTATION/UserExpe...
www.flickr.com/photos/st3f4n/4387291247
PATTERN
LIBRARIES
http://pttrns.com/
http://mobile-patterns.com/
http://www.pattern...
www.flickr.com/photos/st3f4n/4387291247
RESPONSIVE
DESIGN
http://mediaqueri.es/popular/
http://www.alistapart.com/articles/...
www.flickr.com/photos/dahlstroms/4411448782/
Thank you!
QUESTIONS?
annadahlstrom
annadahlstrom
anna.dahlstrom@gmail.com
www...
Upcoming SlideShare
Loading in...5
×

Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013

2,177

Published on

Slides from the first of my 3 part series classes at General Assembly in London on the 24th of July 2013.

https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172

ABSTRACT
This introductory class will cover the basics of responsive design and mobile apps (for both Android and iOS), and how expectations and practices have changed for both.

Published in: Design, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,177
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
105
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013

  1. 1. Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom London 24th July 2013 | Part 1 - Fundamentals of... DESIGNING FOR MULTIPLE DEVICES PART 1 of 3
  2. 2. I’m Anna IA & UX DESIGNER | FREELANCE SINCE 2011 SWEDISH | IN LONDON SINCE 2006 This is me at my favourite place, Knäbäckshusen in Skåne, Sweden Photo curtesy of my sister
  3. 3. www.flickr.com/photos/suttonhoo22/2070700035 AGENDA 1. DEVICE USAGE & PATTERNS 2. IMPLICATIONS FOR UX & DESIGNTHINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs.AN APP 4. RESPONSIVE 5. APPS 6. PRACTICE 7. SUMMARY 8. Q & A
  4. 4. www.flickr.com/photos/publicenergy/1846375599 1. FIRST UP... DEVICE USAGE & PATTERNS
  5. 5. http://desktopwallpaper-s.com/19-Computers/-/Future/ DEVICE: a thing defined for a specific purpose or task & which can connect to the internet
  6. 6. http://desktopwallpaper-s.com/19-Computers/-/Future/ THE FOCUS OFTODAY SMARTPHONES | DESKTOP (TABLETS) - iOS & ANDROID
  7. 7. www.flickr.com/photos/hlkljgk/5764422581 For every human that enters the world, five mobile devices are created* * Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx
  8. 8. www.flickr.com/photos/nasamarshall/6289116940 In 2009 1% of global internet traffic came from mobiles. In 2010 the number was 4%. By the end of 2012 it had risen to13%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile
  9. 9. www.flickr.com/photos/jayfresh/3388253576/ 41% of emails are now opened on mobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices
  10. 10. 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
  11. 11. www.flickr.com/photos/exlibris/2552107635 40% of people use their phone in the bathroom* * Source: http://www.lukew.com/ff/entry.asp?1500
  12. 12. 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
  13. 13. 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)
  14. 14. www.flickr.com/photos/brandoncwarren/4236278556 POCKET’S STATS - DESKTOP Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  15. 15. www.flickr.com/photos/brandoncwarren/4236278556 POCKET’S STATS - iPHONE Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  16. 16. www.flickr.com/photos/brandoncwarren/4236278556 POCKET’S STATS - iPAD Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  17. 17. PEAKTIMES 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
  18. 18. www.flickr.com/photos/chicitoloco/8468592748/in/photostream/ “MOBILE USERS ARE RUSHED & ONTHE GO” THIS IS A MYTH
  19. 19. www.flickr.com/photos/anniemole/2424372024 A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVETIMETO KILL COMMUTING,WAITING BUT ALSO AT HOME
  20. 20. www.flickr.com/photos/edduddiee/4307943164 THE SAMETASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS AS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE &TASK EXECUTION IS INCREASING
  21. 21. 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
  22. 22. 2.THIS HAS... IMPLICATIONS FOR UX & DESIGN http://www.flickr.com/photos/eyesore9/3206408088/
  23. 23. www.flickr.com/photos/frantaylor/4296536332 LIMITED DEVICE CAPABILITIES USEDTO MEAN LIMITEDTASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU
  24. 24. http://desktopwallpaper-s.com/19-Computers/-/Future/ RESULTED IN MOBILE SPECIFIC WEBSITES LESS CONTENT & LINKS BACKTOTHE FULL DESKTOPVERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE
  25. 25. www.flickr.com/photos/demandaj/7287174776 PEOPLE ARE CLICKINGTHE ‘FULL DESKTOPVERSION’ LINK THERE IS A REASON FORTHAT
  26. 26. www.flickr.com/photos/joachim_s_mueller/7110473339 AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES THIS EXPECTATION WILL ONLY GROW STRONGER
  27. 27. http://www.flickr.com/photos/young_einstein/74097753/ 3.A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs.APPS
  28. 28. http://desktopwallpaper-s.com/19-Computers/-/Future/ BESPOKE MOBILE SITES HAVE SEPARATE URLS USUALLY LESS CONTENT & A LINK BACKTO THE FULL DESKTOPVERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE
  29. 29. http://desktopwallpaper-s.com/19-Computers/-/Future/ FULL WEBSITE FULL WEBSITE FULL WEBSITE RESPONSIVE SITES HAVETHE SAME URLS IT’S BASICALLY “ONE SITE”
  30. 30. www.flickr.com/photos/mkhmarketing/8468995025 Roughly 1 in 10 people that access Facebook each month do so from a feature phone* * Source: www.thenextweb.com/facebook/2013/07/22/facebooks-every-phone-app-for-feature-phones-passes-100-million-monthly-active-users
  31. 31. www.flickr.com/photos/st3f4n/3476036180 PRIMARY REASONS FOR A BESPOKE MOBILE SITE • REQUIRED FORTHE AUDIENCE •TECHNICAL LIMITATIONSTO CMS
  32. 32. http://www.flickr.com/photos/edenandjosh/2892956576/ BEST AVOIDED IF POSSIBLE IT CAN CAUSE ALL SORTS OF PROBLEMS
  33. 33. 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
  34. 34. www.flickr.com/photos/ericconstantineau/5618576278 THE ALTERNATIVE IS MESSY & COSTLY MAINTAINING DIFFERENTVERSIONS USERS HAVING PROBLEMS FINDING WHATTHEY ARE AFTER (E.G. IN SEARCH)
  35. 35. www.flickr.com/photos/jmtimages/2883279193 CORE CONTENT SHOULD REMAINTHE SAME BUTTHE EXPERIENCE SHOULD BE OPTIMISED BOTH IN DISPLAY OF CONTENT, REGARDING USING DEVICE CAPABILITIES & FORTOUCH INTERACTIONS
  36. 36. www.flickr.com/photos/andwhynot/2946734025 MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLYVIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... MOBILE OPTIMISED SITE & APP? USE ANALYTICS FOR GUIDANCE
  37. 37. www.flickr.com/photos/31878512@N06/4704140020 WHETHERTO DO AN APP OR NOT COMES DOWNTO... •THE OBJECTIVE (USER & BUSINESS) • IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET
  38. 38. DIFFERENT TYPES OF APPS THE MAINTWOTYPES NATIVE APPS (e.g. Instagram) • MOST OPTIMISED USER EXPERIENCE • ACCESSTO DEVICE CAPABILITIES & APIs • BUT REQUIRES PLATFORM SPECIFIC CODE BASE HYBRID (e.g. old Facebook) • USE OF HTML5 & JAVASRIPT •WRAPPERTO PROVIDE NATIVE CAPABILITIES • FEWER “VERSIONS” TO MAINTAIN • BUT CAN BETIME CONSUMINGTO CREATE APP LIKE INTERACTIONS • CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
  39. 39. 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
  40. 40. www.flickr.com/photos/taytom/5277657429 4.THERE IS SOMETHING CALLED... RESPONSIVE DESIGN
  41. 41. 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
  42. 42. http://foundation.zurb.com/docs/layout.php DEFINE YOUR GRID & BREAK POINTS • USE ASTHE BASIS OF YOUR PAGE LAYOUTS • CHECKPOINT FOR MODULE SIZES & VARIANTS • FIXED OR FLUID COLUMNS • DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICES
  43. 43. “ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ” -TRENT WALTONwww.flickr.com/photos/theaftershock/2811382400/
  44. 44. DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop &Tablet Mobile
  45. 45. MOBILEVS. DESKTOP FIRST •START LARGE OR SMALL WHAT EVER WORKS BEST FORYOU •ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES MOBILEVS. DESKTOP FIRST •START LARGE OR SMALL WHAT EVER WORKS BEST FORYOU •ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
  46. 46. www.flickr.com/photos/stephangeyer/ CONSIDERTHE MOBILE CONTEXT THE USE CASE MAY BE THE SAME BUT USING A MOBILE DEVICE IS DIFFERENT
  47. 47. LIKE PLAYING REAL LIFETETRIS PRE-DEFINED POCKETS FORTHE CONTENTTO SLOT INTO www.flickr.com/photos/fritzon/195008860
  48. 48. www.flickr.com/photos/adactio/6153481666 80% of traffic in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.* * Source: www.slideshare.net/yiibu/pragmatic-responsive-design
  49. 49. THE WEB IS FULL OF EXAMPLES LOOK FOR INSPIRATION & BEST PRACTICE BUT DON’T BE AFRAIDTO CHALLENGE OR COME UP WITH SOMETHING... BETTER. http://mediaqueri.es/popular/
  50. 50. www.flickr.com/photos/tim_norris/2789759648 CONSIDERYOUR NAVIGATION DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS
  51. 51. EXCELLENT READ ‘RESPONSIVE NAVIGATION PATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  52. 52. www.flickr.com/photos/melodramababs/2766765248/ “ Mobile navigation should be like a good friend: there when you need them but cool enough to give you your space.” * * Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  53. 53. www.flickr.com/photos/dopey/123646856
  54. 54. http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/ 5.WHAT ABOUT... DOING AN APP?
  55. 55. 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
  56. 56. www.flickr.com/photos/gadl/3570118243 EVERY PLATFORM IS ITS OWN LITTLE WORLD WITHTHEIR OWN UI GUIDELINESTHAT USERS ARE USEDTO
  57. 57. www.flickr.com/photos/nrkbeta/3906687294/in/photostream NOT AS EASY AS JUST ANDROID OR iOS FRAGMENTATION ACROSS DIFFERENTVERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED
  58. 58. RELATIVE NUMBER OF ACTIVE ANDROID DEVICES Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
  59. 59. EXAMPLE OF ADOPTION OF NEW iOSVERSION Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1 www.flickr.com/photos/blakespot/4773693893
  60. 60. KEY DIFFERENCES BETWEEN DESIGNING FOR ANDROID & iOS iOS CONSISTENCY CONSISTENCY BETWEEN VERSIONS & HANDSETS QUICK ADOPTION OF NEW VERSIONS BACK BUTTON SETTINGS BUTTON OR 'MORE'TO ACCESS APP WIDE SETTINGS & INFORMATION ANDROID FRAGMENTATION DIFFERENT FOR DIFFERENTVERSIONS & HANDSETS SLOWER IMPLEMENTATION & UPTAKE OF NEWERVERSIONS HANDLED WITH EITHER SYSTEM BACK BUTTON (EARLIERVERSIONS) OR BACK & UP BUTTONS (LATESTVERSION) OPTIONS MENU USEDTO HOUSE APP WIDE SETTINGS & INFORMATION Design UI elements & principles Version adoption Back navigation Settings etc. www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  61. 61. iPHONE RESOURCES HELP & INSPIRATION WELL DOCUMENTED
  62. 62. ANDROID RESOURCES HELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIERVERSIONS
  63. 63. Source: http://developer.android.com/design/patterns/new-4-0.html BASIC iOS NAVIGATION CONSISTENT ACROSS VERSIONS NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar. Content area MoreItemItemHome Item iPhone 12:15 PM APP NAME More Customise IMG IMG IMG IMG IMG IMG IMG IMG IMG Item Item Item Item Item Item Item Item MoreItemItemHome Item
  64. 64. 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) UPVS. 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.
  65. 65. www.flickr.com/photos/jojoneil/6359536591 HOWTOTAMETHE BEAST? YOU LEARN BY DOING
  66. 66. START BY SKETCHING YOUR SCREEN FLOWS, NAVIGATION & CONTENT www.flickr.com/photos/saucef/7184615025
  67. 67. 6.TIMETO PRACTICE http://www.flickr.com/photos/kalexanderson/6302660289/
  68. 68. www.flickr.com/photos/jojoneil/6359536591 BESPOKE MOBILE SITE vs RESPONSIVE vs AN APP CONSIDERTHE FOLLOWING: The city of London have asked you to come up with a site that collates everything about Halloween in London. The aim is to raise awareness of events that are taking place and to drive sales on the high street through promoting offers from participating stores the week leading up to Halloween. What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination? 10 MINUTES EXERCISE ONE
  69. 69. www.flickr.com/photos/andwhynot/2946734025 MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLYVIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... MOBILE OPTIMISED SITE & APP? USE ANALYTICS FOR GUIDANCE
  70. 70. www.flickr.com/photos/31878512@N06/4704140020 WHETHERTO DO AN APP OR NOT COMES DOWNTO •THE OBJECTIVE (USER & BUSINESS) • IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET
  71. 71. www.flickr.com/photos/jojoneil/6359536591 EXERCISE ONE BESPOKE MOBILE SITE vs RESPONSIVE vs AN APP CONSIDERTHE FOLLOWING: The city of London have asked you to come up with a site that collates everything about Halloween in London. The aim is to raise awareness of events that are taking place and to drive sales on the high street through promoting offers from participating stores the week leading up to Halloween. What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination? 10 MINUTES HOW WOULD MOST PEOPLE ACCESS IT? •MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP •MOSTLYVIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT ALSO CONSIDER... •THE OBJECTIVE (USER & BUSINESS) •IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE •IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET
  72. 72. www.flickr.com/photos/jojoneil/6359536591 BUILDING A RESPONSIVE SITE FOR THE HALLOWEEN SITE THE CLIENT WANTS TO INCLUDE THE FOLLOWING: •About page • Event calendar • Maps • List of offers PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES EXERCISETWO • Search • Most popular • Login & registration • Share functionality
  73. 73. DEFINEYOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop &Tablet Mobile “ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ” -TRENT WALTON
  74. 74. www.flickr.com/photos/jojoneil/6359536591 EXERCISETWO BUILDING A RESPONSIVE SITE FOR THE HALLOWEEN SITE THE CLIENT WANTS TO INCLUDE THE FOLLOWING: •About page • Event calendar • Maps • List of offers PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop &Tablet Mobile • Search • Most popular • Login & registration • Share functionality
  75. 75. 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 • Event calendar • Maps • List of offers 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 EXERCISETHREE • Search • Most popular • Login & registration • Share functionality
  76. 76. Source: http://developer.android.com/design/patterns/new-4-0.html BASIC iOS NAVIGATION CONSISTENT ACROSS VERSIONS NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar. Content area MoreItemItemHome Item iPhone 12:15 PM APP NAME More Customise IMG IMG IMG IMG IMG IMG IMG IMG IMG Item Item Item Item Item Item Item Item MoreItemItemHome Item
  77. 77. 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) UPVS. 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.
  78. 78. www.flickr.com/photos/jojoneil/6359536591 EXERCISETHREE BUILDING AN APP BASED ON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP: •About page • Event calendar • Maps • List of offers 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 • Search • Most popular • Login & registration • Share functionality Content area MoreItemItemHome Item iPhone 12:15 PM APP NAME More Customise IMG IMG IMG IMG IMG IMG IMG IMG IMG Item Item Item Item Item Item Item Item MoreItemItemHome Item
  79. 79. http://www.flickr.com/photos/martinteschner/4569495912/ 7.TO SUMMARISE
  80. 80. www.flickr.com/photos/thecaucas/2597813380 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 increasingly replicating that of desktop.
  81. 81. www.flickr.com/photos/thecaucas/2597813380 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.
  82. 82. 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 on objectives & stats.
  83. 83. www.flickr.com/photos/thecaucas/2597813380 FOR RESPONSIVE DEFINEYOUR 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 you go.
  84. 84. www.flickr.com/photos/thecaucas/2597813380 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.
  85. 85. 8. BEFORE I GO... REMEMBERTHAT www.flickr.com/photos/46355638@N00/4414640784
  86. 86. www.flickr.com/photos/jolives/2889944573/ ...IT’S NOT JUST ABOUT THE SMALLER SCREENS BUT ALSOTHE BIG ONES
  87. 87. www.flickr.com/photos/jolives/2889944573/ IT’S ABOUT THINKING AHEAD PLAN 5YEARS AHEAD WITH “FUTURE PROOFING” IN MIND
  88. 88. http://www.flickr.com/photos/gi/5537770007/ IT DOESN’T HAVETO BREAK THE BANK BESIDES CONSIDER LOST CUSTOMERS & MAINTAINING MULTIPLEVERSIONS
  89. 89. www.flickr.com/photos/oter/5090592214 BE CREATIVE & CHALLENGE WHAT EXISTSTODAY THAT’S WHAT MOVES US FORWARD
  90. 90. www.flickr.com/photos/stevendepolo/3378152784 CLOSER & MORE REWARDING COLLABORATION BETWEEN DISCIPLINES & WITH CLIENTS
  91. 91. - 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...
  92. 92. www.flickr.com/photos/st3f4n/4387291247 9. FORTHE ROAD SOMETAKE AWAYS
  93. 93. 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
  94. 94. 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/
  95. 95. 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
  96. 96. www.flickr.com/photos/dahlstroms/4411448782/ Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×