SlideShare a Scribd company logo
1 of 85
Download to read offline
DESIGNING FOR
                                     MULTIPLE DEVICES
                                     London, January 14th 2013
www.flickr.com/photos/vegaseddie/3248076025




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




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




www.flickr.com/photos/lokulin/3247322162
1. FIRST UP...
                                               DEVICE USAGE &
                                               PATTERNS




www.flickr.com/photos/abroudjameur/5271057503
DEVICE: a thing defined for a specific
 purpose or task & which can connect
 to the internet




http://desktopwallpaper-s.com/19-Computers/-/Future/
THE FOUCS OF TODAY
    SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID




http://desktopwallpaper-s.com/19-Computers/-/Future/
By the end of 2012, the number of mobile-
connected devices will exceed the number
of people on earth, and by 2016 there will
be 1.4 mobile devices per capita.*
 * Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html




www.flickr.com/photos/nasamarshall/6289116940
The average person looks at their phone
150 times a day.*
 * Source: www.textually.org/textually/archives/2012/02/030229.htm




www.flickr.com/photos/jorgeq82/4732700819
40% of people use their phone in the
bathroom*
 * Source: http://www.lukew.com/ff/entry.asp?1500


www.flickr.com/photos/exlibris/2552107635
MOBILE DEVICES ARE
                                           USED ANYWHERE
                                           & EVERYWHERE
                                           ” The best computer is
                                           the one you have with
                                           you when you want
                                           something done. “
                                           - JACOB NIELSEN


www.flickr.com/photos/yahnyahn/2996454839
USAGE PATTERNS
                                                 ACROSS DEVICES
                                                 “...as devices become
                                                 more mobile, it’s not
                                                 only changing where
                                                 we read, but when. ”
                                                 - POCKET (formerly Read it Later)




www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
                                                                             - DESKTOP




                           Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read



www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
                                                                              - iPHONE




                           Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read



www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
                                                                                  - iPAD




                           Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read



www.flickr.com/photos/brandoncwarren/4236278556
PEAK TIMES
•When we get up
•On our way to/ just arrived at work
•Commuting home
•Post dinner


Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
“MOBILE USERS ARE
  RUSHED &
  ON THE GO”
  THIS IS A MYTH




www.flickr.com/photos/theirmind/5001267661/
A LARGE PROPORTION OF
                           USAGE HAPPENS WHEN WE
                                   HAVE TIME TO KILL
                                                   COMMUTING, WAITING BUT ALSO AT HOME
http://www.flickr.com/photos/hanhutton/320464105/
THE SAME TASKS ARE
                                            CARRIED OUT ON
                                            SMARTPHONES AS
                                            ON DESKTOPS
                                            AS DEVICES & EXPERIENCE BECOME MORE
                                            OPTIMISED USAGE & TASK EXECUTION IS
                                            INCREASING

www.flickr.com/photos/edduddiee/4307943164
Three purchases are made through
 eBay’s mobile applications every second.*
 Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods




www.flickr.com/photos/stuckincustoms/440157748
2. THIS HAS...
                                                        IMPLICATIONS
                                                        FOR UX & DESIGN




www.flickr.com/photos/thelearningcurvedotca/5484130058
LIMITED DEVICE CAPABILITIES
 USED TO MEAN LIMITED TASKS
 E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU




www.flickr.com/photos/frantaylor/4296536332
RESULTED IN MOBILE
  SPECIFIC WEBSITES
  LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION


                            DESKTOP
                          FULL WEBSITE
                                                       BESPOKE
                                                         CUT
                                                        DOWN
                                                       WEBSITE




                                  BESPOKE
                                    CUT
                                   DOWN
                                  WEBSITE




http://desktopwallpaper-s.com/19-Computers/-/Future/
PEOPLE ARE CLICKING THE
  ‘FULL DESKTOP VERSION’ LINK
  THERE IS A REASON FOR THAT




www.flickr.com/photos/demandaj/7287174776
AN EQUAL &
                                                       CONTINUOS
                                                        EXPERIENCE
                                                    ACROSS DEVICES
                                                       THIS EXPECTATION WILL
                                                       ONLY GROW STRONGER
www.flickr.com/photos/joachim_s_mueller/7110473339
3. A CLOSER LOOK AT...
                                         BESPOKE
                                         MOBILE SITES vs.
                                         RESPONSIVE SITES
                                         vs. APPS



www.flickr.com/photos/derpunk/107345685
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




www.flickr.com/photos/taytom/5277657429
“ Design & development should respond to
 the user’s behaviour & environment based on
 screen size, platform & orientation.
 [It’s]...a mix of flexible grids & layouts, images
 & an intelligent use of media queries. ”
 - SMASHING MAGAZINE

www.flickr.com/photos/adactio/5818096043
DEFINE
  YOUR GRID
  & BREAK
  POINTS
  • USE AS THE BASIS OF
      YOUR PAGE LAYOUTS
  • CHECKPOINT FOR
      MODULE SIZES &
      VARIANTS
  • FIXED OR FLUID
      COLUMNS
  • DEFINES HOW
      CONTENT WILL
      BEHAVE ACROSS
      DEVICES
http://foundation.zurb.com/docs/layout.php
DEFINE YOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION
                                                                          Mobile
                                                                           1
                                                                                    2 Header


“ Content needs to be
                                                                          Logo

                                                                                   3
                                                                                  Nav



choreographed to               Desktop & Tablet
                                                                              4
                                                                            Bath
                                                                           section
                                                                            intro
                                                                                          5
                                                                                          Ad



ensure the intended               1
                                 Logo
                                                       2
                                                     Header


message is preserved                             4
                                          Bath section intro
                                                                 5
                                                                 Ad
                                                                                  6



on any device and at
                                                                            Types of baths

                                  3
                                 Nav



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


                                9 Tools                                   8 Store
                                                                                      9 Tools
                                                                          locator


                                                10                                10
                                               Footer                            Footer
MOBILE VS. DESKTOP FIRST
• START LARGE OR SMALL
 WHAT EVER WORKS BEST FOR YOU
• ABOUT CONTENT, PRIORITISING &
 CONSIDERING HOW IT WILL WORK
 ACROSS DEVICES

MOBILE VS. DESKTOP FIRST
• START LARGE OR SMALL
 WHAT EVER WORKS BEST FOR YOU
• ABOUT CONTENT, PRIORITISING &
 CONSIDERING HOW IT WILL WORK
 ACROSS DEVICES
THE WEB IS
 FULL OF
 EXAMPLES
 LOOK FOR INSPIRATION &
 BEST PRACTICE




 BUT DON’T BE AFRAID TO
 CHALLENGE OR COME UP
 WITH SOMETHING... BETTER.

http://mediaqueri.es/popular/
CONSIDER YOUR NAVIGATION
 DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS




www.flickr.com/photos/tim_norris/2789759648
EXCELLENT READ
‘RESPONSIVE NAVIGATION PATTERNS’
by Brad Frost.*
Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
www.flickr.com/photos/dopey/123646856
5. WHAT ABOUT...
                                            DOING AN APP?




www.flickr.com/photos/picsoflife/5314514977
APPS ARE
                                          FOCUSED & PERSONAL
                                          ” Small, downloadable chunks
                                          of software, they give people
                                          access to information in a
                                          neatly packaged format “
                                          - Apps on tap, The Economist Oct 8th 2011



www.flickr.com/photos/elwillo/5247084642
EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITH THEIR OWN UI
GUIDELINES THAT
USERS ARE USED TO




www.flickr.com/photos/gadl/3570118243
NOT AS
EASY AS JUST
ANDROID
OR iOS
FRAGMENTATION ACROSS
DIFFERENT VERSIONS &
BACKWARDS
COMPATIBILITY SHOULD
BE CONSIDERED




www.flickr.com/photos/nrkbeta/3906687294/in/photostream
RELATIVE NUMBER OF ACTIVE
ANDROID DEVICES RUNNING
A SPECIFIC VERSION




                                     Source: http://developer.android.com/about/dashboards/index.html




www.flickr.com/photos/blakespot/4773693893
EXAMPLE OF ADOPTION
OF NEW iOS VERSION




                              Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1




www.flickr.com/photos/blakespot/4773693893
KEY DIFFERENCES BETWEEN
DESIGNING FOR ANDROID & iOS

ANDROID                                                                     iOS
FRAGMENTATION                                                Design         CONSISTENCY
DIFFERENT FOR DIFFERENT VERSIONS &                        UI elements &     CONSISTENCY BETWEEN
HANDSETS                                                    principles      VERSIONS & HANDSETS
SLOWER IMPLEMENTATION & UPTAKE                           Version adoption   QUICK ADOPTION OF NEW
OF NEWER VERSIONS                                                           VERSIONS
HANDLED WITH EITHER SYSTEM BACK                          Back navigation    BACK BUTTON
BUTTON (EARLIER VERSIONS) OR BACK
& UP BUTTONS (LATEST VERSION)
OPTIONS MENU USED TO HOUSE APP                                              SETTINGS BUTTON OR 'MORE' TO
                                                           Settings etc.    ACCESS APP WIDE SETTINGS &
WIDE SETTINGS & INFORMATION
                                                                            INFORMATION



www.flickr.com/photos/nrkbeta/3906687294/in/photostream
iPHONE
RESOURCES
HELP & INSPIRATION
WELL DOCUMENTED
ANDROID
RESOURCES
HELP & INSPIRATION A LITTLE
LESS WELL DOCUMENTED FOR
EARLIER VERSIONS
iPhone          12:15 PM                                  More

 BASIC iOS
                                                                                                                                              Customise

                                                                                 APP NAME
                                                                                                         IMG     Item




 NAVIGATION
                                                                                                         IMG     Item

                                                                                                         IMG     Item

                                                                                                         IMG     Item

 CONSISTENT ACROSS                                                                                       IMG     Item

 VERSIONS                                                                        Content area
                                                                                                         IMG     Item

                                                                                                         IMG     Item

 NAVIGATION BAR                                                                                          IMG     Item

 Enables navigation through the app                                                                       IMG
 hierarchy. Holds the back button,                                                                        Home          Item    Item   Item       More

 controls for managing screen content &
 the title of the screen.                                           Home      Item     Item     Item   More



 BACK BUTTON
 Should always take the user one step back
 from where they came from & be descriptive.
 TAB BAR
 Can often be customised. Holds the main
 sections of the app.
 ‘MORE’ TAB BAR ITEM
 Used to hold & provide access to all other
 sections of the app that don’t fit in the tab bar.

Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CREAM
SANDWICH:

NAVIGATION BAR
For devices that don't have the
hardware keys. Holds 'Back', 'Home'
and 'Recents'
ACTION BAR
Holds the most important action buttons for
your app (3 + overflow menu)
UP VS. BACK BUTTON
The Up button is used to navigate up one level
based on the hierarchical structure of the site.
Back is used to navigate back one step from
where you came from & as such works in
reverse chronological order.

Source: http://developer.android.com/design/patterns/new-4-0.html
HOW TO TAME THE BEAST?
                                YOU LEARN BY DOING




www.flickr.com/photos/jojoneil/6359536591
6. TIME TO
                                                        PRACTICE




http://www.flickr.com/photos/kalexanderson/6302660289/
BESPOKE MOBILE
                                           SITE vs RESPONSIVE
                                           vs AN APP
                                           CONSIDER THE FOLLOWING:
                                           A major dating site has asked you to create
                                           a campaign for Valentines day 2013 focused
 EXERCISE ONE                              on "unexpected moments". The purpose is
                                           to facilitate encounters & dates between
                                           people in London looking to find that
                                           special someone.
                                           Location should be a key way to discover
                                           people & suggestions for date activities.
                                           What do you recommend in terms of their
                                           presence, particularly mobile & why?


www.flickr.com/photos/jojoneil/6359536591
                                           10 MINUTES
MOBILE PRESENCE vs. APP?
 USE ANALYTICS FOR GUIDANCE
 MOSTLY DIRECT TRAFFIC
 POSSIBLE ARGUMENT FOR APP
 MOSTLY VIA SHARED LINKS
 MOBILE WEB PRESENCE NEEDED.
 AN APP ALONE WON’T CUT IT
 A BIT OF BOTH
 THEN CONSIDER....
www.flickr.com/photos/andwhynot/2946734025
WHETHER TO DO AN APP
   OR NOT COMES DOWN TO
   • THE OBJECTIVE (USER & BUSINESS)
   • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE
   • IF OFFLINE READING/USAGE IS REQUIRED
   • & OF COURSE BUDGET




www.flickr.com/photos/31878512@N06/4704140020
EXERCISE ONE

BESPOKE MOBILE
SITE vs RESPONSIVE                           HOW WOULD MOST PEOPLE
                                             ACCESS IT?

vs AN APP                                    • MOSTLY DIRECT TRAFFIC
                                              POSSIBLE ARGUMENT FOR APP

CONSIDER THE FOLLOWING:                      • MOSTLY VIA SHARED LINKS
                                              MOBILE WEB PRESENCE NEEDED.
A major dating site has asked you to          AN APP ALONE WON’T CUT IT
create a campaign for Valentines day 2013
focused on "unexpected moments". The
purpose is to facilitate encounters &     ALSO CONSIDER...
dates between people in London looking • THE OBJECTIVE (USER & BUSINESS)
to find that special someone.
Location should be a key way to discover  • IF THERE ARE SPECIFIC DEVICE
                                            CAPABILITIES YOU WANT TO UTILISE
people & suggestions for date activities.
                                             • IF OFFLINE READING/USAGE IS
What do you recommend in terms of             REQUIRED
their presence, particularly mobile & why?
                                             • & OF COURSE BUDGET
10 MINUTES
www.flickr.com/photos/jojoneil/6359536591
BUILDING A
                                           RESPONSIVE SITE
                                           THEY WANT TO INCLUDE THE FOLLOWING:
                                           • About page                    • Sharing
                                           • Search (people, activities)   • Login & registration
                                           • Activity suggestions          • Data visualisations
                                           • Notifications                   (active users, dates etc)

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


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


“ Content needs to be
                                                                          Logo

                                                                                   3
                                                                                  Nav



choreographed to               Desktop & Tablet
                                                                              4
                                                                            Bath
                                                                           section
                                                                            intro
                                                                                          5
                                                                                          Ad



ensure the intended               1
                                 Logo
                                                       2
                                                     Header


message is preserved                             4
                                          Bath section intro
                                                                 5
                                                                 Ad
                                                                                  6



on any device and at
                                                                            Types of baths

                                  3
                                 Nav



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


                                9 Tools                                   8 Store
                                                                                      9 Tools
                                                                          locator


                                                10                                10
                                               Footer                            Footer
EXERCISE TWO

BUILDING A
RESPONSIVE SITE                                                                                       Mobile
                                                                                                       1
                                                                                                                2 Header

THEY WANT TO INCLUDE THE FOLLOWING:
                                                                                                      Logo

                                                                                                               3
                                                                                                              Nav


• About page                  • Sharing                                                                   4
                                                                                                        Bath          5

• Search (people, activities) • Login & registration       Desktop & Tablet                            section
                                                                                                        intro
                                                                                                                      Ad


• Activity suggestions        • Data visualisations
• Notifications
                                                              1                    2
                               (active users, dates etc)     Logo                Header


                                                                             4               5               6
PART 1                                                                Bath section intro     Ad        Types of baths

                                                              3

Pick either mobile or desktop & do a rough sketch
                                                             Nav



of what the home page should contain & how the                                                7
content should be prioritised. Where you see
                                                                             6
                                                                                           Related           7
                                                                       Types of baths
                                                            8 Store                        products   Related products

appropriate include a reference to where imagery            locator


should be used.                                             9 Tools                                   8 Store
                                                                                                      locator
                                                                                                                  9 Tools



PART 2                                                                      10
                                                                           Footer
                                                                                                              10
                                                                                                             Footer



Using content stacking methodology define how the
content should be prioritised on desktop & mobile.

15 MINUTES
www.flickr.com/photos/jojoneil/6359536591
BUILDING AN APP
                                           BASED ON THE CONTENT & FUNCTIONALITY
                                           REQUIREMENTS, CONSIDER WHAT WOULD BE
                                           SUITABLE FOR AN APP:
                                           • About page                    • Sharing
                                           • Search (people, activities)   • Login & registration
                                           • Activity suggestions          • Data visualisations
                                           • Notifications                  (active users, dates etc)
                                           PART 1
EXERCISE THREE                             Define the main sections your app would have.
                                           PART 2
                                           Looking at the navigation how would you structure
                                           this if you were to do an iOS app & an Android app?
                                           Focus on the Tab bar items respectively Action bar
                                           items & what would go in the ‘More’ respectively
                                           ‘Overflow menu’.



www.flickr.com/photos/jojoneil/6359536591
                                           15 MINUTES
iPhone          12:15 PM                                  More

  BASIC iOS
                                                                                                                                              Customise

                                                                                 APP NAME
                                                                                                         IMG     Item




  NAVIGATION
                                                                                                         IMG     Item

                                                                                                         IMG     Item

                                                                                                         IMG     Item

  CONSISTENT ACROSS                                                                                      IMG     Item

  VERSIONS                                                                       Content area
                                                                                                         IMG     Item

                                                                                                         IMG     Item

  NAVIGATION BAR                                                                                         IMG     Item

  Enables navigation through the app                                                                      IMG
  hierarchy. Holds the back button,                                                                       Home          Item    Item   Item       More

  controls for managing screen content &
  the title of the screen.                                          Home      Item     Item     Item   More



  BACK BUTTON
  Should always take the user one step back
  from where they came from & be descriptive.
  TAB BAR
  Can often be customised. Holds the main
  sections of the app.
  ‘MORE’ TAB BAR ITEM
  Used to hold & provide access to all other
  sections of the app that don’t fit in the tab bar.

Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CREAM
SANDWICH:

NAVIGATION BAR
For devices that don't have the
hardware keys. Holds 'Back', 'Home'
and 'Recents'
ACTION BAR
Holds the most important action buttons for
your app (3 + overflow menu)
UP VS. BACK BUTTON
The Up button is used to navigate up one level
based on the hierarchical structure of the site.
Back is used to navigate back one step from
where you came from & as such works in
reverse chronological order.

Source: http://developer.android.com/design/patterns/new-4-0.html
EXERCISE THREE

BUILDING AN APP
                                                            iPhone          12:15 PM                                  More           Customise

                                                                        APP NAME
                                                                                                IMG     Item

                                                                                                IMG     Item

BASED ON THE CONTENT &                                                                          IMG     Item


FUNCTIONALITY REQUIREMENTS,                                                                     IMG     Item

CONSIDER WHAT WOULD BE SUITABLE                                                                 IMG     Item

FOR AN APP:                                                             Content area
                                                                                                IMG     Item



• About page                  • Sharing
                                                                                                IMG     Item



• Search (people, activities) • Login & registration                                                    Item
                                                                                                IMG



• Activity suggestions        • Data visualisations                                              IMG

                                                                                                 Home


• Notifications
                                                                                                               Item    Item   Item       More

                               (active users, dates etc)
                                                           Home      Item     Item     Item   More



PART 1
Define the main sections your app would have.
PART 2
Looking at the navigation how would you
structure this if you were to do an iOS app &
an Android app? Focus on the Tab bar items
respectively Action bar items & what would go
in the ‘More’ respectively ‘Overflow menu’.

15 MINUTES
www.flickr.com/photos/jojoneil/6359536591
7. TO
                                                         SUMMARISE




http://www.flickr.com/photos/martinteschner/4569495912/
DEVICE USAGE &
                                            PATTERNS
                                            FUTURE DEVICES
                                            The number of different devices will
                                            only grow & we don’t know what’s
                                            coming.
                                            USED EVERYWHERE &
                                            ANYWHERE
                                            And we’re not only using them on the
                                            go but increasingly when we have
                                            some downtime including the sofa.
                                            USE OF MOBILE DEVICES
                                            Our use of mobile devices is
www.flickr.com/photos/thecaucas/2597813380   increasingly replicating that of desktop.
IMPLICATIONS
                                            FOR UX &
                                            DESIGN
                                            THINKING
                                            AN EQUAL & CONTINUOUS
                                            EXPERIENCE ACROSS DEVICES
                                            As they & the services we use
                                            become more sophisticated &
                                            optimised we expect more from them.
                                            KEEP THE CORE BUT OPTIMISE
                                            Consider the limitations but also the
                                            opportunities with mobile devices.
www.flickr.com/photos/thecaucas/2597813380
WHEN
                                            DO WHAT
                                            BESPOKE MOBILE WEBSITE
                                            Try to avoid it but do it if necessary
                                            RESPONSIVE DESIGN
                                            The most device & future “proof ”
                                            approach right now. Use if possible.
                                            But challenge content delivery.
                                            APP
                                            Base on user & business needs. Strong
                                            argument if you require offline
                                            reading/functionality & access to
                                            device capabilities. Base which type
www.flickr.com/photos/thecaucas/2597813380   on objectives & stats.
FOR
                                            RESPONSIVE
                                            DEFINE YOUR GRID &
                                            BREAKPOINTS
                                            This is the backbone of responsive
                                            design & content choreography.
                                            DON’T FORGET THE
                                            NAVIGATION
                                            Consider the pros & cons of
                                            different methods.
                                            TEST & COLLABORATE
                                            This is new grounds & we’re all
                                            learning so work together & test as
www.flickr.com/photos/thecaucas/2597813380   you go.
FOR APPS
                                            REMEMBER PLATFORM SPECIFIC
                                            GUIDELINES
                                            Adhering to them will make your
                                            app easier to use.
                                            CONSIDER BACKWARDS
                                            COMPATIBILITY
                                            Not everyone will be on the latest
                                            version. Ensure you cater for the
                                            majority.
                                            CONSULT THE INTERNET
                                            There are a number of great
                                            resources for knowledge &
                                            inspiration. Use them.
www.flickr.com/photos/thecaucas/2597813380
8. BEFORE I GO...
                                        REMEMBER THAT

BEFORE I GO REMEMBER THAT...
• DESIGNING FOR MULTIPLE DEVICES IS NOT
  JUST ABOUT THE SMALLER SCREENS
 • IT’S ALSO ABOUT THE LARGER ONES
 • & IT’S ABOUT THINKING AHEAD
 • & ABOUT BEING CLEVER IN WHAT WE DO
www.flickr.com/photos/publicenergy/1846375599
...IT’S NOT JUST ABOUT
                                           THE SMALLER SCREENS
                                                     BUT ALSO THE BIG ONES




www.flickr.com/photos/jolives/2889944573/
IT’S ABOUT
                                           THINKING AHEAD
                                               PLAN 5 YEARS AHEAD WITH
                                             “FUTURE PROOFING” IN MIND




www.flickr.com/photos/jolives/2889944573/
IT DOESN’T
                                             HAVE TO BREAK
                                                  THE BANK
                                                BESIDES CONSIDER LOST
                                             CUSTOMERS & MAINTAINING
                                                     MULTIPLE VERSIONS
http://www.flickr.com/photos/gi/5537770007/
BE CREATIVE & CHALLENGE
 WHAT EXISTS TODAY
 THAT’S WHAT MOVES US FORWARD




www.flickr.com/photos/oter/5090592214
CLOSER & MORE
 REWARDING
 COLLABORATION
 BETWEEN DISCIPLINES & WITH CLIENTS




www.flickr.com/photos/stevendepolo/3378152784
BUT ABOVE ALL...
 “ We’re not just making pretty
  interfaces. We’re actually in the process of
  making an environment where we’ll spend
  most of our time, for the rest of our lives.
  We’re the designers.We’re the builders.
  What do we want that environment to feel
  like? What do we want to feel like.           ”
 - Wilson Minor




http://www.flickr.com/photos/funch/4679422945/
9. FOR THE ROAD
SOME TAKE
AWAYS




                  www.flickr.com/photos/st3f4n/4387291247
PLATFORM
   GUIDELINES
   http://developer.apple.com/library/ios/
   #DOCUMENTATION/UserExperience/
   Conceptual/MobileHIG/
   UIElementGuidelines/
   UIElementGuidelines.html
   http://mrgan.tumblr.com/post/
   10492926111/labeling-the-back-button
   http://developer.android.com/design/
   index.html




www.flickr.com/photos/st3f4n/4387291247
PATTERN
   LIBRARIES
   http://pttrns.com/
   http://mobile-patterns.com/
   http://www.patternsofdesign.co.uk/
   http://
   www.mobiledesignpatterngallery.com/
   mobile-patterns.php
   http://www.androidpatterns.com/
   http://androidpttrns.com/




www.flickr.com/photos/st3f4n/4387291247
RESPONSIVE
DESIGN
http://mediaqueri.es/popular/
http://www.alistapart.com/articles/responsive-
web-design/
http://designmodo.com/responsive-design-
examples/
http://jamus.co.uk/demos/rwd-
demonstrations/
http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
http://www.gridsetapp.com/
http://grid.mindplay.dk
http://goldengridsystem.com/
http://foundation.zurb.com/docs/layout.php       www.flickr.com/photos/st3f4n/4387291247
Thank you!
                                              QUESTIONS?
                                                    annadahlstrom
                                                    annadahlstrom
                                              anna.dahlstrom@gmail.com
                                               www.annadahlstrom.com




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

More Related Content

What's hot

GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012Anna 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
 
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
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPadPek Pongpaet
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibuyiibu
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical webyiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancementyiibu
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with contextyiibu
 
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
 
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
 
Reset the Web
Reset the WebReset the Web
Reset the Webyiibu
 
Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010Samantha Starmer
 
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
 
Where will current trends take learning?
Where will current trends take learning?Where will current trends take learning?
Where will current trends take learning?Carol Skyring
 
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
 
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
 
Emerging practices 2019 week 6 design analysis
Emerging practices 2019 week 6 design analysisEmerging practices 2019 week 6 design analysis
Emerging practices 2019 week 6 design analysisR. Sosa
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCJason Grigsby
 
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
 

What's hot (19)

GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012
 
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
 
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
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPad
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
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...
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010
 
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
 
Where will current trends take learning?
Where will current trends take learning?Where will current trends take learning?
Where will current trends take learning?
 
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
 
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
 
Emerging practices 2019 week 6 design analysis
Emerging practices 2019 week 6 design analysisEmerging practices 2019 week 6 design analysis
Emerging practices 2019 week 6 design analysis
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
 
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
 

Viewers also liked

Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013Thierry Pires
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
Mobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should KnowMobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should Knowcreativeeyeball
 
On your mark, get set, mobile
On your mark, get set, mobileOn your mark, get set, mobile
On your mark, get set, mobileTiffany Beker
 
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TVMobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TVPascal Dasseux
 
Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012interlinkONE
 
Mobile Mega Trends to Change the World
Mobile Mega Trends to Change the WorldMobile Mega Trends to Change the World
Mobile Mega Trends to Change the WorldAkash Shrivastava
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingSIXTY
 
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikateles utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikateservicesmobiles.fr
 
World Mobile Congress 2013 : Les temps forts / Jour 1
World Mobile Congress 2013 : Les temps forts / Jour 1World Mobile Congress 2013 : Les temps forts / Jour 1
World Mobile Congress 2013 : Les temps forts / Jour 1Raphael Journé
 
The mobileYouth Way: 7 fundamentals that will change how you view technology
The mobileYouth Way: 7 fundamentals that will change how you view technologyThe mobileYouth Way: 7 fundamentals that will change how you view technology
The mobileYouth Way: 7 fundamentals that will change how you view technologyGraham Brown
 
5 Lessons in Digital Publishing
5 Lessons in Digital Publishing 5 Lessons in Digital Publishing
5 Lessons in Digital Publishing Mag+
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionBelen Barros Pena
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android appsRichard Byrne
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Petit Web
 
Device Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebDevice Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebAvenga Germany GmbH
 

Viewers also liked (20)

Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
60 apps in 60 mins
60 apps in 60 mins60 apps in 60 mins
60 apps in 60 mins
 
Mobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should KnowMobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should Know
 
On your mark, get set, mobile
On your mark, get set, mobileOn your mark, get set, mobile
On your mark, get set, mobile
 
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TVMobile Marketing Association - Mobile et tablettes 2nd écran de la TV
Mobile Marketing Association - Mobile et tablettes 2nd écran de la TV
 
Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012Content marketing world_mobile and tablet content distribution_8_17_2012
Content marketing world_mobile and tablet content distribution_8_17_2012
 
Keynotes Le Mobile 2013
Keynotes Le Mobile 2013Keynotes Le Mobile 2013
Keynotes Le Mobile 2013
 
Mobile Mega Trends to Change the World
Mobile Mega Trends to Change the WorldMobile Mega Trends to Change the World
Mobile Mega Trends to Change the World
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile Marketing
 
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikateles utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
les utilisateurs d’iPhone, d’iPad et d’iPod Touch By Surikate
 
World Mobile Congress 2013 : Les temps forts / Jour 1
World Mobile Congress 2013 : Les temps forts / Jour 1World Mobile Congress 2013 : Les temps forts / Jour 1
World Mobile Congress 2013 : Les temps forts / Jour 1
 
You can't beat the experience November 2014
You can't beat the experience November 2014You can't beat the experience November 2014
You can't beat the experience November 2014
 
The mobileYouth Way: 7 fundamentals that will change how you view technology
The mobileYouth Way: 7 fundamentals that will change how you view technologyThe mobileYouth Way: 7 fundamentals that will change how you view technology
The mobileYouth Way: 7 fundamentals that will change how you view technology
 
5 Lessons in Digital Publishing
5 Lessons in Digital Publishing 5 Lessons in Digital Publishing
5 Lessons in Digital Publishing
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android apps
 
RIP Steve Jobs
RIP Steve JobsRIP Steve Jobs
RIP Steve Jobs
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012
 
Device Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebDevice Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile Web
 

Similar to Designing for multiple devices - GA London, 14 Jan 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 2013Anna Dahlström
 
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
 
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 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
 
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
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Victor Minuesa
 
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
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuAdRoll
 
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
 
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
 
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
 
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
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101Antony Ribot
 
The moveable brand
The moveable brandThe moveable brand
The moveable brandDan Weingrod
 
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
 
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
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of WonderfulBryan Rieger
 
The Ecology of Information: A Future in a Library Without Walls
The Ecology of Information:  A Future in a Library Without WallsThe Ecology of Information:  A Future in a Library Without Walls
The Ecology of Information: A Future in a Library Without WallsJohn Blyberg
 

Similar to Designing for multiple devices - GA London, 14 Jan 2013 (20)

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
 
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
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
 
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
 
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
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
 
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
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibu
 
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
 
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
 
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
 
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
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
The moveable brand
The moveable brandThe moveable brand
The moveable brand
 
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
 
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
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
 
The Ecology of Information: A Future in a Library Without Walls
The Ecology of Information:  A Future in a Library Without WallsThe Ecology of Information:  A Future in a Library Without Walls
The Ecology of Information: A Future in a Library Without Walls
 

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

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

Recently uploaded

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
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 

Recently uploaded (19)

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
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 

Designing for multiple devices - GA London, 14 Jan 2013

  • 1. DESIGNING FOR MULTIPLE DEVICES London, January 14th 2013 www.flickr.com/photos/vegaseddie/3248076025 Anna Dahlström co-founder byflock www.annadahlstrom.com anna.dahlstrom@gmail.com annadahlstrom
  • 2. I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED FREELANCING + WORKING ON A STARTUP LOVES QUOTES & CHALLENGES This is Öresundsbron, the bridge between Sweden & Denmark www.flickr.com/photos/dahlstroms/4411448782/
  • 3. AGENDA 1. DEVICE USAGE & PATTERNS 2. IMPLICATIONS FOR UX & DESIGN THINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP 4. RESPONSIVE 5. APPS 6. PRACTICE 7. SUMMARY 8. Q & A www.flickr.com/photos/lokulin/3247322162
  • 4. 1. FIRST UP... DEVICE USAGE & PATTERNS www.flickr.com/photos/abroudjameur/5271057503
  • 5. DEVICE: a thing defined for a specific purpose or task & which can connect to the internet http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 6. THE FOUCS OF TODAY SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 7. By the end of 2012, the number of mobile- connected devices will exceed the number of people on earth, and by 2016 there will be 1.4 mobile devices per capita.* * Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html www.flickr.com/photos/nasamarshall/6289116940
  • 8. The average person looks at their phone 150 times a day.* * Source: www.textually.org/textually/archives/2012/02/030229.htm www.flickr.com/photos/jorgeq82/4732700819
  • 9. 40% of people use their phone in the bathroom* * Source: http://www.lukew.com/ff/entry.asp?1500 www.flickr.com/photos/exlibris/2552107635
  • 10. MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE ” The best computer is the one you have with you when you want something done. “ - JACOB NIELSEN www.flickr.com/photos/yahnyahn/2996454839
  • 11. USAGE PATTERNS ACROSS DEVICES “...as devices become more mobile, it’s not only changing where we read, but when. ” - POCKET (formerly Read it Later) www.flickr.com/photos/brandoncwarren/4236278556
  • 12. POCKET’S STATS - DESKTOP Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
  • 13. POCKET’S STATS - iPHONE Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
  • 14. POCKET’S STATS - iPAD Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read www.flickr.com/photos/brandoncwarren/4236278556
  • 15. PEAK TIMES •When we get up •On our way to/ just arrived at work •Commuting home •Post dinner Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  • 16. “MOBILE USERS ARE RUSHED & ON THE GO” THIS IS A MYTH www.flickr.com/photos/theirmind/5001267661/
  • 17. A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL COMMUTING, WAITING BUT ALSO AT HOME http://www.flickr.com/photos/hanhutton/320464105/
  • 18. THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS AS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE & TASK EXECUTION IS INCREASING www.flickr.com/photos/edduddiee/4307943164
  • 19. Three purchases are made through eBay’s mobile applications every second.* Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods www.flickr.com/photos/stuckincustoms/440157748
  • 20. 2. THIS HAS... IMPLICATIONS FOR UX & DESIGN www.flickr.com/photos/thelearningcurvedotca/5484130058
  • 21. LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU www.flickr.com/photos/frantaylor/4296536332
  • 22. RESULTED IN MOBILE SPECIFIC WEBSITES LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 23. PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINK THERE IS A REASON FOR THAT www.flickr.com/photos/demandaj/7287174776
  • 24. AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES THIS EXPECTATION WILL ONLY GROW STRONGER www.flickr.com/photos/joachim_s_mueller/7110473339
  • 25. 3. A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs. APPS www.flickr.com/photos/derpunk/107345685
  • 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 www.flickr.com/photos/taytom/5277657429
  • 36. “ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. ” - SMASHING MAGAZINE www.flickr.com/photos/adactio/5818096043
  • 37. DEFINE YOUR GRID & BREAK POINTS • USE AS THE BASIS OF YOUR PAGE LAYOUTS • CHECKPOINT FOR MODULE SIZES & VARIANTS • FIXED OR FLUID COLUMNS • DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICES http://foundation.zurb.com/docs/layout.php
  • 38. DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION Mobile 1 2 Header “ Content needs to be Logo 3 Nav choreographed to Desktop & Tablet 4 Bath section intro 5 Ad ensure the intended 1 Logo 2 Header message is preserved 4 Bath section intro 5 Ad 6 on any device and at Types of baths 3 Nav any width ” 6 Types of baths 7 Related 7 products Related products - TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
  • 39. MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
  • 40. THE WEB IS FULL OF EXAMPLES LOOK FOR INSPIRATION & BEST PRACTICE BUT DON’T BE AFRAID TO CHALLENGE OR COME UP WITH SOMETHING... BETTER. http://mediaqueri.es/popular/
  • 41. CONSIDER YOUR NAVIGATION DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS www.flickr.com/photos/tim_norris/2789759648
  • 42. EXCELLENT READ ‘RESPONSIVE NAVIGATION PATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  • 44. 5. WHAT ABOUT... DOING AN APP? www.flickr.com/photos/picsoflife/5314514977
  • 45. APPS ARE FOCUSED & PERSONAL ” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “ - Apps on tap, The Economist Oct 8th 2011 www.flickr.com/photos/elwillo/5247084642
  • 46. EVERY PLATFORM IS ITS OWN LITTLE WORLD WITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO www.flickr.com/photos/gadl/3570118243
  • 47. NOT AS EASY AS JUST ANDROID OR iOS FRAGMENTATION ACROSS DIFFERENT VERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  • 48. RELATIVE NUMBER OF ACTIVE ANDROID DEVICES RUNNING A SPECIFIC VERSION Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
  • 49. EXAMPLE OF ADOPTION OF NEW iOS VERSION Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1 www.flickr.com/photos/blakespot/4773693893
  • 50. KEY DIFFERENCES BETWEEN DESIGNING FOR ANDROID & iOS ANDROID iOS FRAGMENTATION Design CONSISTENCY DIFFERENT FOR DIFFERENT VERSIONS & UI elements & CONSISTENCY BETWEEN HANDSETS principles VERSIONS & HANDSETS SLOWER IMPLEMENTATION & UPTAKE Version adoption QUICK ADOPTION OF NEW OF NEWER VERSIONS VERSIONS HANDLED WITH EITHER SYSTEM BACK Back navigation BACK BUTTON BUTTON (EARLIER VERSIONS) OR BACK & UP BUTTONS (LATEST VERSION) OPTIONS MENU USED TO HOUSE APP SETTINGS BUTTON OR 'MORE' TO Settings etc. ACCESS APP WIDE SETTINGS & WIDE SETTINGS & INFORMATION INFORMATION www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  • 52. ANDROID RESOURCES HELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIER VERSIONS
  • 53. iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 54. ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 55. HOW TO TAME THE BEAST? YOU LEARN BY DOING www.flickr.com/photos/jojoneil/6359536591
  • 56. 6. TIME TO PRACTICE http://www.flickr.com/photos/kalexanderson/6302660289/
  • 57. BESPOKE MOBILE SITE vs RESPONSIVE vs AN APP CONSIDER THE FOLLOWING: A major dating site has asked you to create a campaign for Valentines day 2013 focused EXERCISE ONE on "unexpected moments". The purpose is to facilitate encounters & dates between people in London looking to find that special someone. Location should be a key way to discover people & suggestions for date activities. What do you recommend in terms of their presence, particularly mobile & why? www.flickr.com/photos/jojoneil/6359536591 10 MINUTES
  • 58. MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... www.flickr.com/photos/andwhynot/2946734025
  • 59. WHETHER TO DO AN APP OR NOT COMES DOWN TO • THE OBJECTIVE (USER & BUSINESS) • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET www.flickr.com/photos/31878512@N06/4704140020
  • 60. EXERCISE ONE BESPOKE MOBILE SITE vs RESPONSIVE HOW WOULD MOST PEOPLE ACCESS IT? vs AN APP • MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP CONSIDER THE FOLLOWING: • MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. A major dating site has asked you to AN APP ALONE WON’T CUT IT create a campaign for Valentines day 2013 focused on "unexpected moments". The purpose is to facilitate encounters & ALSO CONSIDER... dates between people in London looking • THE OBJECTIVE (USER & BUSINESS) to find that special someone. Location should be a key way to discover • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE people & suggestions for date activities. • IF OFFLINE READING/USAGE IS What do you recommend in terms of REQUIRED their presence, particularly mobile & why? • & OF COURSE BUDGET 10 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 61. BUILDING A RESPONSIVE SITE THEY WANT TO INCLUDE THE FOLLOWING: • About page • Sharing • Search (people, activities) • Login & registration • Activity suggestions • Data visualisations • Notifications (active users, dates etc) PART 1 EXERCISE TWO Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. Where you see appropriate include a reference to where imagery should be used. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. www.flickr.com/photos/jojoneil/6359536591 15 MINUTES
  • 62. DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION Mobile 1 2 Header “ Content needs to be Logo 3 Nav choreographed to Desktop & Tablet 4 Bath section intro 5 Ad ensure the intended 1 Logo 2 Header message is preserved 4 Bath section intro 5 Ad 6 on any device and at Types of baths 3 Nav any width ” 6 Types of baths 7 Related 7 products Related products - TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
  • 63. EXERCISE TWO BUILDING A RESPONSIVE SITE Mobile 1 2 Header THEY WANT TO INCLUDE THE FOLLOWING: Logo 3 Nav • About page • Sharing 4 Bath 5 • Search (people, activities) • Login & registration Desktop & Tablet section intro Ad • Activity suggestions • Data visualisations • Notifications 1 2 (active users, dates etc) Logo Header 4 5 6 PART 1 Bath section intro Ad Types of baths 3 Pick either mobile or desktop & do a rough sketch Nav of what the home page should contain & how the 7 content should be prioritised. Where you see 6 Related 7 Types of baths 8 Store products Related products appropriate include a reference to where imagery locator should be used. 9 Tools 8 Store locator 9 Tools PART 2 10 Footer 10 Footer Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 64. BUILDING AN APP BASED ON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP: • About page • Sharing • Search (people, activities) • Login & registration • Activity suggestions • Data visualisations • Notifications (active users, dates etc) PART 1 EXERCISE THREE Define the main sections your app would have. PART 2 Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’. www.flickr.com/photos/jojoneil/6359536591 15 MINUTES
  • 65. iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 66. ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order. Source: http://developer.android.com/design/patterns/new-4-0.html
  • 67. EXERCISE THREE BUILDING AN APP iPhone 12:15 PM More Customise APP NAME IMG Item IMG Item BASED ON THE CONTENT & IMG Item FUNCTIONALITY REQUIREMENTS, IMG Item CONSIDER WHAT WOULD BE SUITABLE IMG Item FOR AN APP: Content area IMG Item • About page • Sharing IMG Item • Search (people, activities) • Login & registration Item IMG • Activity suggestions • Data visualisations IMG Home • Notifications Item Item Item More (active users, dates etc) Home Item Item Item More PART 1 Define the main sections your app would have. PART 2 Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 68. 7. TO SUMMARISE http://www.flickr.com/photos/martinteschner/4569495912/
  • 69. DEVICE USAGE & PATTERNS FUTURE DEVICES The number of different devices will only grow & we don’t know what’s coming. USED EVERYWHERE & ANYWHERE And we’re not only using them on the go but increasingly when we have some downtime including the sofa. USE OF MOBILE DEVICES Our use of mobile devices is www.flickr.com/photos/thecaucas/2597813380 increasingly replicating that of desktop.
  • 70. IMPLICATIONS FOR UX & DESIGN THINKING AN EQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICES As they & the services we use become more sophisticated & optimised we expect more from them. KEEP THE CORE BUT OPTIMISE Consider the limitations but also the opportunities with mobile devices. www.flickr.com/photos/thecaucas/2597813380
  • 71. WHEN DO WHAT BESPOKE MOBILE WEBSITE Try to avoid it but do it if necessary RESPONSIVE DESIGN The most device & future “proof ” approach right now. Use if possible. But challenge content delivery. APP Base on user & business needs. Strong argument if you require offline reading/functionality & access to device capabilities. Base which type www.flickr.com/photos/thecaucas/2597813380 on objectives & stats.
  • 72. FOR RESPONSIVE DEFINE YOUR GRID & BREAKPOINTS This is the backbone of responsive design & content choreography. DON’T FORGET THE NAVIGATION Consider the pros & cons of different methods. TEST & COLLABORATE This is new grounds & we’re all learning so work together & test as www.flickr.com/photos/thecaucas/2597813380 you go.
  • 73. FOR APPS REMEMBER PLATFORM SPECIFIC GUIDELINES Adhering to them will make your app easier to use. CONSIDER BACKWARDS COMPATIBILITY Not everyone will be on the latest version. Ensure you cater for the majority. CONSULT THE INTERNET There are a number of great resources for knowledge & inspiration. Use them. www.flickr.com/photos/thecaucas/2597813380
  • 74. 8. BEFORE I GO... REMEMBER THAT BEFORE I GO REMEMBER THAT... • DESIGNING FOR MULTIPLE DEVICES IS NOT JUST ABOUT THE SMALLER SCREENS • IT’S ALSO ABOUT THE LARGER ONES • & IT’S ABOUT THINKING AHEAD • & ABOUT BEING CLEVER IN WHAT WE DO www.flickr.com/photos/publicenergy/1846375599
  • 75. ...IT’S NOT JUST ABOUT THE SMALLER SCREENS BUT ALSO THE BIG ONES www.flickr.com/photos/jolives/2889944573/
  • 76. IT’S ABOUT THINKING AHEAD PLAN 5 YEARS AHEAD WITH “FUTURE PROOFING” IN MIND www.flickr.com/photos/jolives/2889944573/
  • 77. IT DOESN’T HAVE TO BREAK THE BANK BESIDES CONSIDER LOST CUSTOMERS & MAINTAINING MULTIPLE VERSIONS http://www.flickr.com/photos/gi/5537770007/
  • 78. BE CREATIVE & CHALLENGE WHAT EXISTS TODAY THAT’S WHAT MOVES US FORWARD www.flickr.com/photos/oter/5090592214
  • 79. CLOSER & MORE REWARDING COLLABORATION BETWEEN DISCIPLINES & WITH CLIENTS www.flickr.com/photos/stevendepolo/3378152784
  • 80. BUT ABOVE ALL... “ We’re not just making pretty interfaces. We’re actually in the process of making an environment where we’ll spend most of our time, for the rest of our lives. We’re the designers.We’re the builders. What do we want that environment to feel like? What do we want to feel like. ” - Wilson Minor http://www.flickr.com/photos/funch/4679422945/
  • 81. 9. FOR THE ROAD SOME TAKE AWAYS www.flickr.com/photos/st3f4n/4387291247
  • 82. PLATFORM GUIDELINES http://developer.apple.com/library/ios/ #DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/ UIElementGuidelines/ UIElementGuidelines.html http://mrgan.tumblr.com/post/ 10492926111/labeling-the-back-button http://developer.android.com/design/ index.html www.flickr.com/photos/st3f4n/4387291247
  • 83. PATTERN LIBRARIES http://pttrns.com/ http://mobile-patterns.com/ http://www.patternsofdesign.co.uk/ http:// www.mobiledesignpatterngallery.com/ mobile-patterns.php http://www.androidpatterns.com/ http://androidpttrns.com/ www.flickr.com/photos/st3f4n/4387291247
  • 85. Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.com www.flickr.com/photos/dahlstroms/4411448782/