SlideShare a Scribd company logo
1 of 85
Download to read offline
DESIGNING FOR MULTIPLE DEVICES
London October 1st 2012




                           Anna Dahlström
                               co-founder byflock
                          www.annadahlstrom.com
                                   annadahlstrom
I’m Anna
                                  IA & UX DESIGNER | SWEDISH BUT LONDON BASED
                                          FREELANCING + WORKING ON A STARTUP
                                                     LOVES QUOTES & CHALLENGES
                                              This is Öresundsbron, the bridge between Sweden & Denmark




www.flickr.com/photos/dahlstroms/4411448782/
AGENDA
  1. DEVICE USAGE & PATTERNS
  2. IMPLICATIONS FOR UX & DESIGN THINKING
  3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP
  4. RESPONSIVE
  5. APPS
  6. PRACTICE
  7. SUMMARY
  8. Q & A




www.flickr.com/photos/flatworldsedge/5151764959/
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




www.flickr.com/photos/keinepanik/1091263261/
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 DEMAND 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
 e.g. as shown on the right
 http://mediaqueri.es/popular/




 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://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1




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 ADAPTIVE
                                           vs AN APP
                                           CONSIDER THE FOLLOWING SITUATION
                                           OR USE A PROJECT OF YOUR OWN:
                                           In preparation for the London 2012 Olympics, Transport for

 EXERCISE ONE                              London are considering creating a bespoke section of their
                                           site focused on traveling to and from venues.

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




                                           10 MINUTES
www.flickr.com/photos/jojoneil/6359536591
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                                         HOW WOULD MOST PEOPLE ACCESS IT?
 MOBILE SITE vs                                  •MOSTLY DIRECT TRAFFIC
                                                  POSSIBLE ARGUMENT FOR APP

 ADAPTIVE                                        •MOSTLY VIA SHARED LINKS
                                                  MOBILE WEB PRESENCE NEEDED. AN APP ALONE
                                                  WON’T CUT IT
 vs AN APP
                                                 CONSIDER...
 CONSIDER THE FOLLOWING SITUATION
 OR USE A PROJECT OF YOUR OWN:                   • THE OBJECTIVE (USER & BUSINESS)
 In preparation for the London 2012 Olympics,    • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU
 Transport for London are considering creating     WANT TO UTILISE
 a bespoke section of their site focused on
 travelling to and from venues.                  • IF OFFLINE READING/USAGE IS REQUIRED
                                                 • & OF COURSE BUDGET
 What do you recommend in
 terms of their presence,
 particularly mobile & why?
 10 MINUTES
www.flickr.com/photos/jojoneil/6359536591
BUILDING A
                                           RESPONSIVE SITE
                                           TRANSPORT FOR LONDON WANTS TO INCLUDE THE
                                           FOLLOWING ON THEIR SITE:
                                           • Latest travel updates     • London 2012 focused travel maps
                                           • Basic travel search       • Need to know venue information
                                           • Station updates           • Link to partner sites
                                           • Tips on quickest routes   (London 2012, BBC)

 EXERCISE TWO                              PART 1
                                           Pick either mobile or desktop & do a rough sketch of what
                                           the home page should contain & how the content should be
                                           prioritised. Where you see appropriate include a reference
                                           to where imagery should be used.
                                           PART 2
                                           Using content stacking methodology define how the content
                                           should be prioritised on desktop and mobile (portrait).


                                           15 MINUTES
www.flickr.com/photos/jojoneil/6359536591
DEFINE YOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION
                                                                          Mobile
                                                                           1
                                                                                    2 Header


“ Content needs to be
                                                                          Logo

                                                                                   3
                                                                                  Nav



choreographed to               Desktop & Tablet
                                                                              4
                                                                            Bath
                                                                           section
                                                                            intro
                                                                                          5
                                                                                          Ad



ensure the intended               1
                                 Logo
                                                       2
                                                     Header


message is preserved                             4
                                          Bath section intro
                                                                 5
                                                                 Ad
                                                                                  6



on any device and at
                                                                            Types of baths

                                  3
                                 Nav



any width ”                                      6
                                           Types of baths
                                                                  7
                                                               Related            7
                                                               products    Related products
- TRENT WALTON
                                8 Store
                                locator


                                9 Tools                                   8 Store
                                                                                      9 Tools
                                                                          locator


                                                10                                10
                                               Footer                            Footer
EXERCISE TWO

BUILDING A                                                                                             Mobile

RESPONSIVE
                                                                                                        1
                                                                                                                 2 Header
                                                                                                       Logo

                                                                                                                3
                                                                                                               Nav



SITE                                                        Desktop & Tablet
                                                                                                           4
                                                                                                         Bath
                                                                                                        section
                                                                                                         intro
                                                                                                                       5
                                                                                                                       Ad



TRANSPORT FOR LONDON WANTS TO INCLUDE                          1                    2
THE FOLLOWING ON THEIR SITE:                                  Logo                Header


• Latest travel updates • London 2012 focused travel maps                     4               5                6
• Basic travel search    • Need to know venue information              Bath section intro     Ad         Types of baths

• Station updates        • Link to partner sites               3
• Tips on quickest routes (London 2012, BBC)                  Nav


PART 1
                                                                                               7
                                                                              6
                                                                                            Related
Pick either mobile or desktop & do a rough sketch of         8 Store
                                                                        Types of baths
                                                                                            products
                                                                                                               7
                                                                                                        Related products
what the home page should contain & how the content          locator
should be prioritised. Where you see appropriate include
a reference to where imagery should be used.                 9 Tools                                   8 Store
                                                                                                       locator
                                                                                                                   9 Tools


PART 2                                                                       10                                10
                                                                            Footer                            Footer

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

15 MINUTES
www.flickr.com/photos/jojoneil/6359536591
BUILDING AN APP
                                           BASED ON THE CONTENT FOR THE SITE & WHAT YOU
                                           KNOW ABOUT TRAVELLING AROUND LONDON,
                                           CONSIDER WHAT WOULD BE SUITABLE FOR AN APP.
                                           • Latest travel updates     • London 2012 focused travel maps
                                           • Basic travel search       • Need to know venue information
                                           • Station updates           • Link to partner sites
                                           • Tips on quickest routes   (London 2012, BBC)

                                           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’.




                                           15 MINUTES
www.flickr.com/photos/jojoneil/6359536591
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
                                                             iPhone          12:15 PM                                  More           Customise

                                                                         APP NAME
                                                                                                 IMG     Item




APP
                                                                                                 IMG     Item

                                                                                                 IMG     Item

                                                                                                 IMG     Item

                                                                                                         Item
BASED ON THE CONTENT FOR THE SITE & WHAT
                                                                                                 IMG

                                                                         Content area
YOU KNOW ABOUT TRAVELLING AROUND                                                                 IMG     Item

LONDON, CONSIDER WHAT WOULD BE SUITABLE                                                          IMG     Item
FOR AN APP.
                                                                                                 IMG     Item

• Latest travel updates • London 2012 focused travel maps                                         IMG
• Basic travel search • Need to know venue information                                            Home          Item    Item   Item       More

• Station updates        • Link to partner sites
• Tips on quickest routes (London 2012, BBC)                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.
                                            OUR 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 & ADAPTIVE DESIGN
                                            The most device & future adaptive
                                            approach right now. Use if possible.
                                            But challenge content delivery.
                                            APP
                                            Use if you require offline reading/
                                            functionality & access to device
                                            capabilities. Base which type on
                                            objectives & stats.
www.flickr.com/photos/thecaucas/2597813380
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
                                              www.annadahlstrom.com




www.flickr.com/photos/dahlstroms/4411448782/

More Related Content

What's hot

Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013Anna Dahlström
 
Designing for multiple devices, GA London - 6 Aug 2012
Designing for multiple devices, GA London - 6 Aug 2012Designing for multiple devices, GA London - 6 Aug 2012
Designing for multiple devices, GA London - 6 Aug 2012Anna Dahlström
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPadPek Pongpaet
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical webyiibu
 
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013Anna Dahlström
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...yiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancementyiibu
 
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013Anna Dahlström
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
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
Bright talk   if they cant use it, it doesnt work - finalBright talk   if they cant use it, it doesnt work - final
Bright talk if they cant use it, it doesnt work - finalAndrew White
 
Design for Multitouch
Design for Multitouch Design for Multitouch
Design for Multitouch Robert Winters
 
Olpc design analysis
Olpc design analysisOlpc design analysis
Olpc design analysisR. Sosa
 
Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serveryiibu
 
Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014Ted Drake
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Jon Arne Sæterås
 
Reset the Web
Reset the WebReset the Web
Reset the Webyiibu
 
Designing For Multiple Devices - Dublin Web Summit, Oct 2013
Designing For Multiple Devices - Dublin Web Summit, Oct 2013Designing For Multiple Devices - Dublin Web Summit, Oct 2013
Designing For Multiple Devices - Dublin Web Summit, Oct 2013Anna Dahlström
 
It's a Mobile and Touch World
It's a Mobile and Touch WorldIt's a Mobile and Touch World
It's a Mobile and Touch WorldFrank Garofalo
 
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Anna Dahlström
 
Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14Precedent
 

What's hot (20)

Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013Designing for multiple devices - GA London, 14 Jan 2013
Designing for multiple devices - GA London, 14 Jan 2013
 
Designing for multiple devices, GA London - 6 Aug 2012
Designing for multiple devices, GA London - 6 Aug 2012Designing for multiple devices, GA London - 6 Aug 2012
Designing for multiple devices, GA London - 6 Aug 2012
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPad
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
 
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
 
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013
Part 1: Fundamentals of Designing for Multiple Devices - GA London, 24 Jul 2013
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
 
Bright talk if they cant use it, it doesnt work - final
Bright talk   if they cant use it, it doesnt work - finalBright talk   if they cant use it, it doesnt work - final
Bright talk if they cant use it, it doesnt work - final
 
Design for Multitouch
Design for Multitouch Design for Multitouch
Design for Multitouch
 
Olpc design analysis
Olpc design analysisOlpc design analysis
Olpc design analysis
 
Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the server
 
Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
Designing For Multiple Devices - Dublin Web Summit, Oct 2013
Designing For Multiple Devices - Dublin Web Summit, Oct 2013Designing For Multiple Devices - Dublin Web Summit, Oct 2013
Designing For Multiple Devices - Dublin Web Summit, Oct 2013
 
It's a Mobile and Touch World
It's a Mobile and Touch WorldIt's a Mobile and Touch World
It's a Mobile and Touch World
 
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
 
Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14
 

Viewers also liked

Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Anna Dahlström
 
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015Anna Dahlström
 
What the numbers tell us - Geeky, London23 Oct 2012
What the numbers tell us - Geeky, London23 Oct 2012What the numbers tell us - Geeky, London23 Oct 2012
What the numbers tell us - Geeky, London23 Oct 2012Anna Dahlström
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Anna Dahlström
 
What the numbers tell us - Dublin Web Summit, 18 Oct 2012
What the numbers tell us - Dublin Web Summit, 18 Oct 2012What the numbers tell us - Dublin Web Summit, 18 Oct 2012
What the numbers tell us - Dublin Web Summit, 18 Oct 2012Anna Dahlström
 
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014Anna Dahlström
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Anna Dahlström
 
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013Anna Dahlström
 
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014Anna Dahlström
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Anna Dahlström
 

Viewers also liked (10)

Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014
 
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015Beyond the hamburger menu - Reasons:London, 20 Feb 2015
Beyond the hamburger menu - Reasons:London, 20 Feb 2015
 
What the numbers tell us - Geeky, London23 Oct 2012
What the numbers tell us - Geeky, London23 Oct 2012What the numbers tell us - Geeky, London23 Oct 2012
What the numbers tell us - Geeky, London23 Oct 2012
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
 
What the numbers tell us - Dublin Web Summit, 18 Oct 2012
What the numbers tell us - Dublin Web Summit, 18 Oct 2012What the numbers tell us - Dublin Web Summit, 18 Oct 2012
What the numbers tell us - Dublin Web Summit, 18 Oct 2012
 
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
 
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
Best Practice For UX Deliverables - Eventhandler, London, 22 Oct 2013
 
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
 

Similar to Designing for multiple devices, GA London - 01 Oct 2012

Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013Anna Dahlström
 
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013Anna Dahlström
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuJim Porter
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibuyiibu
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Therese Kokot
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101Antony Ribot
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Victor Minuesa
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Anna Dahlström
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuAdRoll
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with contextyiibu
 
Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Precedent
 
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential DebateEduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential DebateJon Liu
 
In the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social mediaIn the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social mediaAndreas Beining
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileJason Grigsby
 
Library Skunk Works: User Experience Design for the 21st Century Library
Library Skunk Works: User Experience Design for the 21st Century LibraryLibrary Skunk Works: User Experience Design for the 21st Century Library
Library Skunk Works: User Experience Design for the 21st Century LibraryJohn Blyberg
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the WebYiannis Konstantakopoulos
 

Similar to Designing for multiple devices, GA London - 01 Oct 2012 (18)

Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
 
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibu
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14
 
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential DebateEduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
 
In the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social mediaIn the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social media
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile
 
Library Skunk Works: User Experience Design for the 21st Century Library
Library Skunk Works: User Experience Design for the 21st Century LibraryLibrary Skunk Works: User Experience Design for the 21st Century Library
Library Skunk Works: User Experience Design for the 21st Century Library
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
 

More from Anna Dahlström

Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...Anna Dahlström
 
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
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...
How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...
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
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017Anna Dahlström
 
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...Anna Dahlström
 
Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017Anna Dahlström
 
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017Anna Dahlström
 
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016Anna Dahlström
 
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016Anna Dahlström
 
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016Anna Dahlström
 
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016Anna Dahlström
 
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015Anna Dahlström
 
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015Anna Dahlström
 
Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014Anna Dahlström
 
Designing around storytelling - Design + banter, 09 April 2014
Designing around storytelling - Design + banter, 09 April 2014Designing around storytelling - Design + banter, 09 April 2014
Designing around storytelling - Design + banter, 09 April 2014Anna Dahlström
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Anna Dahlström
 
Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...
Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...
Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...Anna Dahlström
 
Designing Around Storytelling - Digital Pond, London 06 Feb 2014
Designing Around Storytelling - Digital Pond, London 06 Feb 2014Designing Around Storytelling - Digital Pond, London 06 Feb 2014
Designing Around Storytelling - Digital Pond, London 06 Feb 2014Anna Dahlström
 
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014Anna Dahlström
 
Three part series: Designing for multiple devices - GA, London, 26 Nov 2013
Three part series: Designing for multiple devices - GA, London, 26 Nov 2013Three part series: Designing for multiple devices - GA, London, 26 Nov 2013
Three part series: Designing for multiple devices - GA, London, 26 Nov 2013Anna Dahlström
 

More from Anna Dahlström (20)

Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
Optimising Landing Pages Through Narrative Structure - Digital Growth Unleash...
 
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
Using Storytelling to Create Experiences that Convert - Conversion Elite, Lon...
 
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...
How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...How To Use Storytelling To Craft Experiences That Engage  - IIeX EU, Amsterda...
How To Use Storytelling To Craft Experiences That Engage - IIeX EU, Amsterda...
 
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
Beyond The Hamburger Menu - UX In The City Oxford, 21 Apr 2017
 
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
Using Storytelling To Craft Multi-device Experiences That Convert - CXL Live,...
 
Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017Storytelling In Design - SXSW, 13 March 2017
Storytelling In Design - SXSW, 13 March 2017
 
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017Storytelling In Design - DXN, Nottingham, 8 Feb 2017
Storytelling In Design - DXN, Nottingham, 8 Feb 2017
 
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
Storytelling In Design - Conversion Hotel, Texel NL, 20 Nov 2016
 
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
 
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
Storytelling In Design - Funkas Tillgänglighetsdagar, 12 Apr 2016
 
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
 
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
Storytelling In A Multi Device Landscape - Amuse, Budapest 30 Oct 2015
 
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
Designing Around Storytelling - Breaking Borders, Reading 18 August 2015
 
Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014Designing around storytelling - UX Oxford, 23 April 2014
Designing around storytelling - UX Oxford, 23 April 2014
 
Designing around storytelling - Design + banter, 09 April 2014
Designing around storytelling - Design + banter, 09 April 2014Designing around storytelling - Design + banter, 09 April 2014
Designing around storytelling - Design + banter, 09 April 2014
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
 
Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...
Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...
Selling UCD - how to get buy-in & measure the value - Eventhandler, London 26...
 
Designing Around Storytelling - Digital Pond, London 06 Feb 2014
Designing Around Storytelling - Digital Pond, London 06 Feb 2014Designing Around Storytelling - Digital Pond, London 06 Feb 2014
Designing Around Storytelling - Digital Pond, London 06 Feb 2014
 
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
 
Three part series: Designing for multiple devices - GA, London, 26 Nov 2013
Three part series: Designing for multiple devices - GA, London, 26 Nov 2013Three part series: Designing for multiple devices - GA, London, 26 Nov 2013
Three part series: Designing for multiple devices - GA, London, 26 Nov 2013
 

Recently uploaded

second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 

Recently uploaded (20)

second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 

Designing for multiple devices, GA London - 01 Oct 2012

  • 1. DESIGNING FOR MULTIPLE DEVICES London October 1st 2012 Anna Dahlström co-founder byflock www.annadahlstrom.com annadahlstrom
  • 2. I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED FREELANCING + WORKING ON A STARTUP LOVES QUOTES & CHALLENGES This is Öresundsbron, the bridge between Sweden & Denmark www.flickr.com/photos/dahlstroms/4411448782/
  • 3. AGENDA 1. DEVICE USAGE & PATTERNS 2. IMPLICATIONS FOR UX & DESIGN THINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP 4. RESPONSIVE 5. APPS 6. PRACTICE 7. SUMMARY 8. Q & A www.flickr.com/photos/flatworldsedge/5151764959/
  • 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 www.flickr.com/photos/keinepanik/1091263261/
  • 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 DEMAND 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 e.g. as shown on the right http://mediaqueri.es/popular/ 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://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1 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 ADAPTIVE vs AN APP CONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN: In preparation for the London 2012 Olympics, Transport for EXERCISE ONE London are considering creating a bespoke section of their site focused on traveling to and from venues. What do you recommend in terms of their presence, particularly mobile & why? 10 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 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 HOW WOULD MOST PEOPLE ACCESS IT? MOBILE SITE vs •MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP ADAPTIVE •MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT vs AN APP CONSIDER... CONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN: • THE OBJECTIVE (USER & BUSINESS) In preparation for the London 2012 Olympics, • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU Transport for London are considering creating WANT TO UTILISE a bespoke section of their site focused on travelling to and from venues. • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET What do you recommend in terms of their presence, particularly mobile & why? 10 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 61. BUILDING A RESPONSIVE SITE TRANSPORT FOR LONDON WANTS TO INCLUDE THE FOLLOWING ON THEIR SITE: • Latest travel updates • London 2012 focused travel maps • Basic travel search • Need to know venue information • Station updates • Link to partner sites • Tips on quickest routes (London 2012, BBC) EXERCISE TWO PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. Where you see appropriate include a reference to where imagery should be used. PART 2 Using content stacking methodology define how the content should be prioritised on desktop and mobile (portrait). 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 62. DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION Mobile 1 2 Header “ Content needs to be Logo 3 Nav choreographed to Desktop & Tablet 4 Bath section intro 5 Ad ensure the intended 1 Logo 2 Header message is preserved 4 Bath section intro 5 Ad 6 on any device and at Types of baths 3 Nav any width ” 6 Types of baths 7 Related 7 products Related products - TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
  • 63. EXERCISE TWO BUILDING A Mobile RESPONSIVE 1 2 Header Logo 3 Nav SITE Desktop & Tablet 4 Bath section intro 5 Ad TRANSPORT FOR LONDON WANTS TO INCLUDE 1 2 THE FOLLOWING ON THEIR SITE: Logo Header • Latest travel updates • London 2012 focused travel maps 4 5 6 • Basic travel search • Need to know venue information Bath section intro Ad Types of baths • Station updates • Link to partner sites 3 • Tips on quickest routes (London 2012, BBC) Nav PART 1 7 6 Related Pick either mobile or desktop & do a rough sketch of 8 Store Types of baths products 7 Related products what the home page should contain & how the content locator should be prioritised. Where you see appropriate include a reference to where imagery should be used. 9 Tools 8 Store locator 9 Tools PART 2 10 10 Footer Footer Using content stacking methodology define how the content should be prioritised on desktop and mobile (portrait). 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 64. BUILDING AN APP BASED ON THE CONTENT FOR THE SITE & WHAT YOU KNOW ABOUT TRAVELLING AROUND LONDON, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP. • Latest travel updates • London 2012 focused travel maps • Basic travel search • Need to know venue information • Station updates • Link to partner sites • Tips on quickest routes (London 2012, BBC) 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’. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 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 iPhone 12:15 PM More Customise APP NAME IMG Item APP IMG Item IMG Item IMG Item Item BASED ON THE CONTENT FOR THE SITE & WHAT IMG Content area YOU KNOW ABOUT TRAVELLING AROUND IMG Item LONDON, CONSIDER WHAT WOULD BE SUITABLE IMG Item FOR AN APP. IMG Item • Latest travel updates • London 2012 focused travel maps IMG • Basic travel search • Need to know venue information Home Item Item Item More • Station updates • Link to partner sites • Tips on quickest routes (London 2012, BBC) 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. OUR 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 & ADAPTIVE DESIGN The most device & future adaptive approach right now. Use if possible. But challenge content delivery. APP Use if you require offline reading/ functionality & access to device capabilities. Base which type on objectives & stats. www.flickr.com/photos/thecaucas/2597813380
  • 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 www.annadahlstrom.com www.flickr.com/photos/dahlstroms/4411448782/