SlideShare a Scribd company logo
Understanding User Experience - London 18 Jan 2012
                                     DESIGNING FOR MULTIPLE DEVICES
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

Recommended for you

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

Slides from my part 2 class of Designing for multiple devices run at General Assembly in London on the 18th of March 2013. ABSTRACT In Fundamentals for Designing for Multiple Devices, we covered the basics of responsive design and mobile apps (for both Android & iOS). We also looked at how user expectations have shifted behaviour, how consumption patterns have changed and what that has meant for designing products that will be used on multiple devices. This follow-on session will take outset in the guiding principles covered in the previous class and take a closer look at: - common challenges faced when designing for multiple devices and how to address them - content strategy and hierarchy across devices - navigation patterns for responsive design - app structures and navigation patterns - how to test both responsive sites and apps

user experience designresponsive designux
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu

Presented by Stephanie Rieger at Breaking Development in Dallas, April 11 2011 and Mobilism in Amsterdam, May 12, 2011. Context is often cited as the single most important factor in design for the mobile medium. Mobile devices are of course 'mobile', but they are also small, always on, always with us, and can instantly connect us to the people we love. Mobile services must therefore be simple, social, and well-focussed--enabling us to quickly get things done on even the smallest screens. This is all well and good, but mobile devices have changed. They may be mobile, but many have already stopped being 'phones'—nor do they resemble what we traditionally think of as computers. This presentation will explore how our use, and perception of mobile devices is changing, and how these changes may impact how we should design for them going forward.

bdconfmobilemobile web
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web

Some people say the web is dying, but I believe it’s just getting started. And what will kick it into overdrive is the Physical Web: the ability to discover, engage, and interact with smart devices (or that “dumb” tree over there) using nothing more than a browser. In this presentation, we explore the impact these new capabilities may have on the way we design and think about this (increasingly near) future web.

proximitybluetoothopera browser
DEVICE: a thing defined for a specific
 purpose or task & which can connect
 to the internet




http://desktopwallpaper-s.com/19-Computers/-/Future/
THE FOCUS 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

Recommended for you

Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement

This document discusses emerging technologies and how they are blurring the lines between the digital and physical worlds. It explores concepts like smart connected objects, Internet of Things, and how the web can better integrate with native apps and experiences. The document advocates for a more seamless experience where the web enhances and complements other technologies instead of trying to replace them.

nfcweb designomnichannel
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...

This document discusses the diversity of mobile devices and user experiences globally. It notes that while smartphones have gained popularity in some markets, global smartphone penetration remains only around 23% and the mobile experience varies greatly depending on location, device capabilities, and network infrastructure. This diversity is likely to continue as new platforms and low-cost devices disrupt the market.

ux londongesturesios
The trouble with context
The trouble with contextThe trouble with context
The trouble with context

The document discusses how the context in which mobile devices are used has become increasingly complex and unpredictable. Guidelines from a few years ago around mobile design being focused on quick tasks and limited attention are no longer reliable given that mobile interactions now occur in many contexts. The rise of affordable smartphones and proliferation of connected devices means that for many people around the world, a mobile device may be their only access to the internet. This is dramatically impacting user behavior and expectations.

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

Recommended for you

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

The document discusses how responsive design begins on the server by adapting to different devices. It notes that as more devices have become capable of accessing the web, including lower-cost smartphones and basic phones, the definition of what constitutes a "smartphone" has expanded. It argues that while there is diversity in mobile devices, many lower-end devices still provide web access and basic smartphone functionality at an affordable price for many users.

responsive designweb designmobile web
Reset the Web
Reset the WebReset the Web
Reset the Web

Midway through a project, a client of ours recently said "One thing I'm learning is that it's ok to give up on the desktop experience once it stops making sense". This wasn't an isolated incident. In fact, i'm beginning to think desktop web sites stopped making sense quite a while ago. We've just had nothing viable to replace them with. Mobile apps have given us a glimpse, but I think they're merely a glimpse into something bigger. Mobile isn't merely a new stage in the evolution of the web, it's not even merely a new context, it's the very early stages of an entirely new system. A system that has already started to shape our environment, affect the way we live, how we choose to connect with others, and how we're able to spend our time. A system that is also slowly unravelling our assumptions and causing us to question the very reason we build web sites, why people visit them, and where the true value of the web actually lies. Presented by Stephanie Rieger at Breaking Development in Orlando, Florida on April 17, 2012.

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

The document discusses device agnostic design, which aims to create content that can be accessed and displayed well on any device. It emphasizes building with reusable modular components rather than bespoke designs for each device. The key aspects are understanding content stacking strategies across screens, using content-based rather than device-based breakpoints, and designing interactive elements that work for both touch and non-touch interfaces. The goal is to provide users with a continuous experience regardless of the device they use.

anna dahlstromhow totablet
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/

Recommended for you

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

The document discusses how latency and poor user experience can negatively impact systems in the cloud. It emphasizes the importance of monitoring from an end-user perspective to identify sources of latency. The key is to continually monitor all parts of the system, including individual transactions, infrastructure components, and end-user experience to drive the right actions that improve performance and optimize systems deployed in the cloud.

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

Slides from my Designing for multiple devices class at General Assembly in New York on the 7th of October 2013. The rise in smartphones and tablets has not only changed the way we consume and interact with content, but also the way we design and approach it. This class will explore the shifting of user expectations, changes in behavior and consumption patterns, and what these advancements mean for designing products across different platforms. Takeaways: - An understanding of how user expectations have shifted over the last few years with regards to the use of multiple devices and how this has affected behavior and consumption patterns among consumers - The impact this has on how to approach and design products and services that will be used on multiple devices - An overview and understanding of the difference between mobile websites vs. responsive design vs. apps and the basics of each - Guiding principles, resources and tools to help tackle the multiple device jungle

user experience designresponsive designux
Olpc design analysis
Olpc design analysisOlpc design analysis
Olpc design analysis

The document discusses the One Laptop per Child (OLPC) project which aimed to provide $100 laptop computers to children in developing countries. It provides an overview of the OLPC design process from 2005-2008 including links to design prototypes and analyses. It notes that some criticized the project for having a design developed top-down without input from intended users, and that the laptop's aesthetics may have made it a target for theft in some environments.

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

Recommended for you

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

The document discusses the history and evolution of the One Laptop Per Child (OLPC) initiative, which aimed to provide affordable laptop computers to children in developing countries. It traces OLPC's development of the $100 laptop from 2005 onward, and discusses both praise and criticism for its designs. While OLPC had ambitious goals of connecting children globally and changing education, it struggled with technical limitations, lack of teacher training, and questions around whether laptops were actually needed or useful for all students. After over a decade, OLPC programs have wound down in most countries as other technologies like smartphones became more prevalent.

Where will current trends take learning?
Where will current trends take learning?Where will current trends take learning?
Where will current trends take learning?

This document summarizes Carol Skyring's presentation on emerging trends in learning. She discusses how learning is becoming more social, collaborative, personalized and visual. New tools like social media, virtual worlds, and mobile devices are enabling more personalized and self-directed learning anytime, anywhere through personal learning networks. Future learning will blend virtual and real-world experiences using augmented reality and location-based technologies. Learning management systems are also evolving to incorporate richer media, social features and collaborative capabilities in secure online environments.

learning technologiesfuturelearning
Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014

Google Glass, smart watches, athletic monitoring bracelets, and even Oculus Rift, the virtual reality goggles, have triggered the imagination of mobile developers ready to explore the potential of placing a computer on the body. Researchers have been developing wearable computers for many years, but today’s miniaturized, low-cost components and powerful mobile processors have made it easy to develop devices that integrate a persons physical state, location, and gestures. These devices can solve many accessibility issues, from detecting oncoming sirens for deaf individuals to hands-free control of mobile phones, wheelchairs, and other devices. Head mounted devices track the user’s sightline, motion-based sensors track gestures and movements, and geolocation provides context specific information. This talk introduces today’s wearable computers, key research projects, and what ideas for future products.

iosapplea11y
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

Recommended for you

Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010

The document discusses the need for ubiquitous and holistic information architecture across channels to create integrated experiences for users. It notes that information is blurring the lines between digital and physical experiences, and that users expect consistency as they transition between platforms. To meet these expectations, information architecture must be designed holistically rather than by channel, and must focus on the overall user journey rather than individual touchpoints. Bridges between experiences like on-ramps and off-ramps are needed to make information architecture truly integrated.

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

Slides from the first of my 3 part series classes at General Assembly in London on the 24th of July 2013. https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172 ABSTRACT This introductory class will cover the basics of responsive design and mobile apps (for both Android and iOS), and how expectations and practices have changed for both.

user experience designresponsive designux
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

Slides from the third of my 3 part series classes at General Assembly in London on the 7th of August 2013. https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172 ABSTRACT This 90-minute session will focus on designing for touch across devices - including hybrids - as well as the challenges and opportunities of responsive content. We will cover how to find a balance between controlling layouts and making your products as responsive as possible. By the end of the session you'll have an understanding of: - the different ways people physically hold and interact with their devices - how hybrid devices impact design decisions - why the mobile context matters and what you need to consider - how to adapt content to device layout and orientations - using content as the basis for breakpoints rather than devices - and a framework to use as the starting point for approaching modular and responsive design from an information architect (IA) and user experience (UX) point of view

user experience designresponsive designvisual & navigation system
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

Recommended for you

Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web

The document discusses how the internet and mobile technology have become integrated into everyday life. Key points include: - The internet is no longer an activity confined to desktop computers, but something that people access constantly through mobile devices. - There are now over 5 billion mobile subscribers globally, and mobile phones are becoming as powerful as computers were a few years ago. - People use their mobile devices to engage in many activities like chatting, scheduling, shopping, and following up on things looked up on other devices. - Mobile internet usage is shifting from just short activities to complementing and facilitating longer tasks like research, transactions, and important decisions.

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

Mobile internet access is becoming ubiquitous, with over 1.3 billion people now using their mobile devices to access the internet. Context for how the internet is accessed has changed dramatically, with people now commonly using their phones, tablets, and other devices to engage in many online activities both brief and extended. This has disrupted traditional models of web design which focused on desktop access with predictable contexts. A new approach is needed to create engaging mobile content in this environment of tremendous diversity and unpredictability.

Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu

The document discusses how the internet and mobile technology have become integrated into everyday life. Key points include: - The internet is no longer an activity confined to desktop computers, but something that people access constantly through mobile devices. - There are now over 5 billion mobile subscribers globally, and mobile phones are becoming as powerful as computers were a few years ago. - People use their mobile devices to engage in many activities like chatting, scheduling, shopping, and following up on things looked up on other devices. - Mobile internet usage is shifting from just short activities to complementing and facilitating longer tasks like research, transactions, and important decisions.

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

Recommended for you

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

Slides from my Device Agnostic Design talk at UCD London http://2014.ucduk.org/session/device-agnostic-design-how-to-get-your-content-to-go-anywhere/ ABSTRACT: There was a time when we did glossy page designs and when those designs were pretty much what we saw in our desktop browsers. With the introduction and rise of smartphones, tablets, phablets there isn’t one view of our designs anymore. Instead, what we create needs to be able to adapt in a way that is suitable for the device as well as where and how it’s being used. With responsive design we’ve learnt the basics of how to adapt content, interactions and layouts so that it works across devices. But with further developments in technology and screens, our content is going to go anywhere. As a result we need to move away from designing for specific devices to solutions that are device agnostic. For us as UX designers this means means letting content rather than devices guide layouts, and also increasingly moving away from designing and wireframing pages to focusing on the modules that those views are made up of. But there are other aspects to consider in device agnostic design. In this talk I walk through why device agnostic design matters, what it means and how we go about it.

user experience designuxstrategy
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibu

The document discusses how technology is increasingly woven into everyday life and the physical world. It describes several new technologies like smart connected objects, self-driving cars that collect data, smart forks that track eating habits and communicate with apps. It argues that the web needs to embrace these new technologies and find ways to connect physical systems to provide more seamless experiences, rather than trying to compete with native apps. The future may involve the web enabling discovery of physical objects and powering connections between various systems and technologies.

technologyfuturefood and related products
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101

This document discusses improving mobile user experiences. It notes that mobile is the primary way people access the internet in some countries. Constraints on mobile like form factor and battery life must be considered. Simple interfaces work best for mobile. Native apps have advantages over mobile web, but the line is blurring. Windows Mobile was replaced by Windows Phone 7 which improved the user experience. The document emphasizes understanding user behaviors and focusing on usability.

mobile ux poland sparkup 2010
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

Recommended for you

Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01

The document discusses designing experiences for multiple devices. It notes that users now own and switch between multiple devices throughout the day, from phones to tablets to wearables. As such, designers must consider how to provide equal, continuous experiences across different platforms and prioritize building modular content that can be adapted for any device or input method. Navigation and usability must work seamlessly regardless of screen size or input type.

anna dahlström
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014

The document discusses designing experiences for multiple devices. It notes that users now own and switch between multiple devices throughout the day, from phones to tablets to wearables. As such, designers must consider how to provide equal, continuous experiences across different platforms and prioritize building modular content that can be adapted for any device or input method. Navigation and usability must work seamlessly regardless of device.

multiple devicesmobilewearables
The trouble with context
The trouble with contextThe trouble with context
The trouble with context

The document discusses how the context in which mobile devices are used has become increasingly complex and unpredictable. Guidelines from a few years ago around mobile design being context-driven are now outdated, as mobile and Internet-connected devices have proliferated and their uses have diversified. Over 5 billion people now own mobile devices, which for many are their primary or only means of Internet access. This shift has dramatically changed user behavior and expectations.

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

Recommended for you

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

“Building a Responsive Website for the Presidential Debate” by Jon Liu at eduWeb Conference in Boston on July 31, 2012 Videos in presentation: Monkey Video - http://www.ted.com/talks/frans_de_waal_do_animals_have_morals.html Dollar Shave Club -

adaptive web designhigher education webresponsive web design
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

Social media in Norway Smartphones in Norway How is mobile different? Examples of use: Location based content, Coupons, QR-codes The future is here: methods of payment, What’s next? It was presented at the Norwegian Business School the 19.9.2012 for Linjeforeningen for MSc i Strategic Marketing Management. A similar presentation about mobile marketing was held for Altiweb’s GoMobile! seminar the 3.5.2012 and at OMG’s breakfast seminar the 30.5.2012.

internet marketingappsnorway
The moveable brand
The moveable brandThe moveable brand
The moveable brand

The document discusses how mobile devices and connectivity are changing consumer behavior and opportunities for brands. It notes that people now spend more time online than with traditional media, and that mobile access allows people to be constantly connected. Brands can take advantage of this new context by creating mobile apps and content that provide immediate utility and engage customers in conversations. A "moveable brand" meets customers on mobile platforms and enhances communication through contextual and social interactions to build loyalty over time.

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

Recommended for you

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

The document discusses user experience (UX) design for libraries. It defines UX as a planned, positive experience that is more than the sum of its parts. It discusses factors like culture, society, the mind, metrics, components like interfaces and physical spaces, and values like inspiration and personal transformation that relate to UX. It also discusses inhibitors like security and apathy. The document provides examples of how the Darien Library applies UX principles through mobility, communication, marketing, and more.

dariendarienlibraryrila
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

Slides from my 45min crash course workshops that I ran with General Assembly at the Dublin Web Summit 2013

user experience designuser experiencedublin web summit
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

The document discusses designing experiences for multiple devices. It notes that people use different devices throughout the day, switching between them, so experiences need to be consistent across platforms. It also highlights that mobile experiences now drive a large portion of online activity and commerce. Designing for the capabilities of each device, rather than just focusing on mobile, is important to provide the best user experience on all platforms. Human: Thank you, that is a concise 3 sentence summary that captures the key points of the document.

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

Recommended for you

Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14

1. Mobile devices have become the primary way people access media through smartphones, tablets, and other screens. Most media interactions are with mobile screens and smartphone ownership continues to rise rapidly. 2. Opportunities on mobile go beyond apps to considering how mobile usage has changed user behavior and discovering the paths users take to content across multiple devices. User research is key to understanding this. 3. Design for mobile must optimize for thumb and eyeball-only interactions, use touch targets large enough for fingers, and consider network limitations. Images should be optimized for recognition or description.

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

Slides from the second of my 3 part series classes at General Assembly in London on the 31st of July 2013. https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172 ABSTRACT This follow-on session will build onto the guiding principles covered in the previous class, taking a closer look at: - the common challenges faced when designing for multiple devices and how to address them - content strategy and hierarchy across devices - app structures and navigation patterns for responsive design - how to test both responsive sites and apps

user experience designresponsive designvisual & navigation system
The Mobile Web for PR Pros
The Mobile Web for PR ProsThe Mobile Web for PR Pros
The Mobile Web for PR Pros

1. The document discusses how communicators are utilizing the mobile web to connect with audiences on the go through their cell phones. 2. It explains that the mobile web is a new way of communicating that focuses on context and immediacy over just content. 3. Examples are given of political campaigns and politicians using the mobile web to share information with and stream live to their constituents.

mobile webmobile webmobile web
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

Recommended for you

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

Slides from my talk at Digital Growth Unleashed in London on the 17 October 2018. ABSTRACT In all good stories things happen for a reason. Every prop and character that is present, every line that is spoken and song that is played has a role to play in making the story come together. In this talk Anna takes us on a journey of what we can learn from traditional storytelling methods when it comes to optimising landing pages and how narrative structure is key in ensuring we're telling the right story to the right audience, at the right time. https://digitalgrowthunleashed.co.uk/agenda/?rmid=session57101#s-session57101

uxmobile uxux design
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...

The document discusses using storytelling to create experiences that convert. It provides examples of how stories can motivate people and influence their beliefs and behaviors. The key aspects of storytelling discussed are the plot, characters, and setting of the story. The document advocates mapping out customer journeys to understand how stories and experiences are structured at each stage.

uxstorytellinguser experience
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...

The document discusses using storytelling to craft engaging experiences. It provides examples of how stories influence our beliefs and behaviors more than facts or arguments. The presentation outlines principles of storytelling like plot, characters, and setting to understand problems, deliver solutions, and present outputs. It emphasizes applying dramaturgy to visualize experiences and map customer journeys through different stages with touchpoints.

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

Recommended for you

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

Slides from my talk Beyond the Hamburger Menu at UX In The City Oxford http://uxinthecity.net/2017/oxford/sessions/index.php?session=109 ABSTRACT From myths to trends and best practice, actual usage, engagement, design patterns and interactions - in this session, I will go through the insights behind the stats and take a look at the reality behind mobile and what really matters when designing for multiple devices.

mobile strategymobile navigationdesigning for multiple devices
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,...

This document discusses using storytelling techniques to design multi-device experiences that optimize conversion. It emphasizes understanding users' journeys through dramaturgy and defining characters, plots, and environments. By mapping the experience ecosystem and asking fundamental questions, designers can move from data-driven mechanics to architecting experiences grounded in users' needs and contexts. This approach facilitates clearer, more accurate understanding from the start of a project.

web designstrategyuser centred design
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

Slides from my two talks at SXSW 2017 about my upcoming book 'Storytelling in design'. http://schedule.sxsw.com/2017/events/PP65833 ABSTRACT To every great story there's a bit of magic involved and so there is to experiences that just work and deliver the right content, interactions and notifications at the right time, and on the right device. Drawing on tried and tested storytelling principles from film, fiction, and music and applying them to the context of UX design and business, in this talk Ms. Dahlstrom shares how we can instil a bit of magic in the work we do and hereby ensure that we create better multi-device experiences for our users and healthier bottom lines for our businesses.

mobileuxmobile strategy
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
                                           5 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
5 MINUTES
www.flickr.com/photos/jojoneil/6359536591

Recommended for you

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

Slides from my talk about Storytelling In Design at Design Exchange Nottingham on 8 Feb 2017. http://dxnevent.com/ ABSTRACT To every great story there's a bit of magic involved and so there is to experiences that just work and deliver the right content, interactions and nudges at the right time, and on/via the right device. Drawing on tried and tested storytelling principles from film, fiction, and music and applying them to the context of UX design, in this talk Anna shares how the increasingly complex world we’re designing for is our biggest asset and how storytelling in design can help us instil a bit of everyday magic in the work we do, for our users, and for us.

web designmultiple devicesdesigning for multiple devices
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

Slides from my talk at Conversion Hotel on 20th November 2016 about how we can apply principles from traditional storytelling to our design process to help define and create better multi-device experiences. http://conversionhotel.com/

uxmobile marketingweb design
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

Slides from my talk at UX Ireland on 10 November 2016 http://uxireland.net/sessions/index.php?session=108 Abstract: From myths to trends and best practice, actual usage, engagement, design patterns and interactions - in this session, I will go through the insights behinds the stats and take a look at the reality behind mobile and what really matters when designing for multiple devices.

ux designmobile navigationmobile strategy
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   10 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.

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

Recommended for you

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

Slides from my talk at Generate London on the 23 September 2016 http://www.generateconf.com/london-2016 #generateconf ABSTRACT There was a time when we did glossy page designs and those designs were pretty much what we saw in our desktop browsers. With the rise of smartphones, tablets and smartwatches, there isn’t one view of our designs any more. With further developments in technology and screens, our content could go anywhere. As a result we need to move away from designing for specific devices to solutions that are device-agnostic. For UX designers that means means letting content guide layouts, and moving away from designing pages to focusing on the modules that those views are made up of. In this talk Anna will walk through why device-agnostic design matters, what it means and how we go about it.

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

Slides from my talk at Funkas Tillgänglighetsdagar 12 April 2016 http://www.funka.com/vi-erbjuder/funkas-tillganglighetsdagar/ ABSTRACT As the number of devices we use on a daily basis grows, considering each device's role at different times, situations and contexts is becoming increasingly important. Our ability to control where a user is coming from and how they get around the experiences we design is fading. Yet our need to ensure we understand where they are in their journey, so that we can deliver the right content and interactions at the right time, and on the right device, is ever more important. In this talk I will look a the principles behind storytelling in design and how they can be translated onto a multi device landscape to help ensure we create better multi-device experiences for our users and healthier bottom lines for our businesses.

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

Slides from my talk at The Bulgaria Web Summit on 20 Feb 2016 http://bulgariawebsummit.com/ ABSTRACT As the number of devices we use on a daily basis grows, considering each device's role at different times, situations and contexts is becoming increasingly important. Our ability to control where a user is coming from and how they get around the experiences we design is fading. Yet our need to ensure we understand where they are in their journey, so that we can deliver the right content and interactions at the right time, and on the right device, is ever more important. In this talk Anna will look a the principles behind storytelling in design and how they can be translated onto a multi device landscape to help ensure we create better multi-device experiences for our users and healthier bottom lines for our businesses.

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

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




http://www.flickr.com/photos/martinteschner/4569495912/

Recommended for you

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

Slides from my talk at the Amuse conference in Budapest 28 - 30 October 2015. http://amuseconf.com/ #amuseconf ABSTRACT As the number of devices we use are increasing, considering each device's role at different times, situations and context is becoming increasingly important. Our ability to control where a user is coming from and how they get around the experiences we design are becoming less and less. But the one we can still understand is what a user wants, and needs. In this talk I will look a the principles behind storytelling in design and how they can be translated onto a multi device landscape.

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

Slides from my talk at Breaking Borders on the 18 August. http://breakingborde.rs/past-events/engagement/ Storytelling has always played an important part in our societies throughout history. In the last few years it's gained attention as an important aspect in communicating and building engagement with a brand’s customer base. But storytelling is also an integral part of the design process. It’s a tool that not only can help us define our content and messaging, but the experience as a whole. Both across platforms and screens, and how we interact with it.

storytellingcontentuser experience design
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

Slides from my talk at Reasons:London on the 20th of Feb where I talked about 10 things you need to know about mobile. http://reasons.to/

uxuser experience designstrategy
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.

Recommended for you

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

Slides from my talk at Webbdagarna Växjö on the 4 December 2014. http://www.webbdagarna.se/vaxjo-2014/program Video (in Swedish): http://internetworld.idg.se/2.1006/1.600683/responsivt---inte-bara-for-mobilen Abstract: Responsiv design ses av många som ett sätt att anpassa sina sajter till att användare surfar på mobilen eller surfplattan. Men responsivt är mycket mer än så. Det är ett sätt att framtidssäkra sina digitala tjänster för en framtid med nya enheter av alla olika storlekar.

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

Slides from my talk at GeekGirl where the theme was 'From Web to Watch-Designing a multiplatform UX system' http://www.geekgirlmeetup.co.uk/blog/

user experience designuser experiencemobile ux
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

Slides from my talk at Cambridge Usability Group on the 12th of May 2014 http://www.eventbrite.co.uk/e/designing-better-ux-deliverables-tickets-11542298325 Needing to produce some kind of deliverables throughout a project is inevitable: it might be user research reports to inform senior stakeholder; usability test results to communicate to developers; sketches and wireframes to pass on to web designers. Just as we make the products and services we design easy to use, the UX of UX is about communicating your thinking in a way that ensures that what you've defined is easy to understand for the reader. It's about adapting the work you do to the project in question and finding the right balance of making people want to look through your work whilst not spending unnecessary time on making it pretty.

user experience designuxbest practice
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




www.flickr.com/photos/abroudjameur/5271057503
...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/

Recommended for you

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

Slides from my talk at UX Oxford on 23 April http://www.meetup.com/UX-Oxford/events/172543682/ Storytelling has always played an important part in our societies throughout history. In the last few years it's gained attention as an important aspect in communicating and building engagement with a brand’s customer base. But storytelling is also an integral part of the design process. It’s a tool that not only can help us define our content and messaging, but the experience as a whole. Both across platforms and screens, and how we interact with it.

designstorytellingcontent
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

1) Storytelling is a powerful tool that can be used in UX design to capture users' imaginations, create emotional connections, and motivate actions. 2) Effective stories have a clear structure including setup, confrontation and resolution, as well as elements of surprise. 3) By understanding users and crafting stories around their experiences and goals, designers can guide users through a product or service in a compelling way.

storytellingstoriesuser experience design
Fall/winter Trend forcasting 2025 ppt .pdf
Fall/winter Trend forcasting 2025 ppt .pdfFall/winter Trend forcasting 2025 ppt .pdf
Fall/winter Trend forcasting 2025 ppt .pdf

I forcast some fashion trends of f/w 25 in this presentation.

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/

Recommended for you

Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design

Professional design drives turnover, return, and growth. How to strengthen the power of design in your domain? The key is to introduce, specialize, and organize critical capabilities. Design capacity thus becomes a strategic advantage: valuable, unique, and organized. Cases from construction, manufacturing, and servicing provide proof. Achieve your ambition faster with our subject expertise. Call on us for instruction, support, or execution. Request a free quick scan* to start. *) Ask for our conditions. https://designimpulse.nl

designcreativityinnovation
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe

Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe

Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeNehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe

Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe

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

Recommended for you

2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf

はがき

Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design IdeologiesGender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies

This PowerPoint presentation offers a comparative analysis between a female and a male architect, focusing on their ideologies, approaches, concepts, and interpretations for a mixed-use building project. This study prompts a reconsideration of architectural inspiration and priorities, advocating for gender equity and cultural anthropology in architectural design.

gender equity in architecturecultural anthropologyarchitectural priorities
Mastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern WebsitesMastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern Websites

Dive into the dynamic world of web design with our comprehensive guide that covers everything from foundational principles to advanced techniques. Whether you're a beginner looking to understand the basics or a seasoned designer aiming to refine your skills, this article offers invaluable insights. Explore topics such as responsive design, user experience (UX) optimization, color theory, typography essentials, and the latest trends shaping the digital landscape. Gain practical knowledge and actionable tips to create visually appealing, functional, and user-friendly websites that stand out in today's competitive online environment. Perfect for designers, developers, and anyone passionate about crafting compelling web experiences, this guide equips you with the tools needed to elevate your web design proficiency to new heights.

web designweb developmentresponsive design
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, 28may2012
Anna 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 2012
Anna Dahlström
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPad
Pek Pongpaet
 
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
Anna Dahlström
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
yiibu
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
yiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
yiibu
 
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
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
yiibu
 
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
yiibu
 
Reset the Web
Reset the WebReset the Web
Reset the Web
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
 
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
Andrew White
 
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
Anna Dahlström
 
Olpc design analysis
Olpc design analysisOlpc design analysis
Olpc design analysis
R. Sosa
 
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
R. Sosa
 
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
 
Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014
Ted Drake
 
Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010
Samantha Starmer
 

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
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPad
 
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
 
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
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
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
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
 
Bright talk if they cant use it, it doesnt work - final
Bright talk   if they cant use it, it doesnt work - finalBright talk   if they cant use it, it doesnt work - final
Bright talk if they cant use it, it doesnt work - final
 
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
 
Olpc design analysis
Olpc design analysisOlpc design analysis
Olpc design analysis
 
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
 
Where will current trends take learning?
Where will current trends take learning?Where will current trends take learning?
Where will current trends take learning?
 
Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014
 
Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010Ubiquitous Information Architecture - OZ IA 2010
Ubiquitous Information Architecture - OZ IA 2010
 

Similar to Understanding UX: Designing for multiple devices - GA London, 18 Jan 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
Anna Dahlström
 
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Anna Dahlström
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
Alexander Anikin
 
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
Therese Kokot
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
Jim Porter
 
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
Anna Dahlström
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibu
AdRoll
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
Antony Ribot
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Victor 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 2014
Anna Dahlström
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
Alexander Anikin
 
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
Jon Liu
 
In the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social mediaIn the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social media
Andreas Beining
 
The moveable brand
The moveable brandThe moveable brand
The moveable brand
Dan Weingrod
 
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
John Blyberg
 
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
Anna Dahlström
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Anna Dahlström
 
Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14
Precedent
 
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
Anna Dahlström
 
The Mobile Web for PR Pros
The Mobile Web for PR ProsThe Mobile Web for PR Pros
The Mobile Web for PR Pros
Ed Schipul
 

Similar to Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013 (20)

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
 
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
 
Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibu
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
 
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
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential DebateEduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
 
In the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social mediaIn the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social media
 
The moveable brand
The moveable brandThe moveable brand
The moveable brand
 
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
 
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
 
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
 
Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14
 
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 Mobile Web for PR Pros
The Mobile Web for PR ProsThe Mobile Web for PR Pros
The Mobile Web for PR Pros
 

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 2017
Anna 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 2017
Anna 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 2017
Anna 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 2016
Anna 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 2016
Anna 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 2016
Anna 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 2016
Anna 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 2016
Anna 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 2015
Anna 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 2015
Anna 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 2015
Anna 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 2014
Anna 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 2014
Anna 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 2014
Anna 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 2014
Anna 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 2014
Anna 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

Fall/winter Trend forcasting 2025 ppt .pdf
Fall/winter Trend forcasting 2025 ppt .pdfFall/winter Trend forcasting 2025 ppt .pdf
Fall/winter Trend forcasting 2025 ppt .pdf
Simran Choudhary
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Jinni singh$A17
 
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeNehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
jiya khan$A17
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
kousato1
 
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design IdeologiesGender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Aditi Sh.
 
Mastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern WebsitesMastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern Websites
webOdoctor Inc
 
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
ijk38lw
 
Ghaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model Safe
kumarikajal989877
 
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeVasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
kumkum tuteja$A17
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
Edit Bank Statement
 
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafePaharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
jiya khan$A17
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
92nqjwr76x
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
Kal-el Shows
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdfAI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
taranenkovictoria
 
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model SafeKarol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
shoeb2926
 
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdfHill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Vasu283735
 
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
hina ojha$A17
 
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
Aditi Sh.
 

Recently uploaded (20)

Fall/winter Trend forcasting 2025 ppt .pdf
Fall/winter Trend forcasting 2025 ppt .pdfFall/winter Trend forcasting 2025 ppt .pdf
Fall/winter Trend forcasting 2025 ppt .pdf
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
 
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeNehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
 
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design IdeologiesGender Equity in Architecture: Cultural Anthropology in Design Ideologies
Gender Equity in Architecture: Cultural Anthropology in Design Ideologies
 
Mastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern WebsitesMastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern Websites
 
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
 
Ghaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Hina Khan Top Model Safe
 
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeVasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
 
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafePaharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdfAI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
AI in UX AI in UX - Exploring the Future of Design by FoF Nuremberg.pdf
 
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model SafeKarol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
 
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdfHill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
Hill Dan - Dark matter and trojan horses. A strategic design vocabulary.pdf
 
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
 
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
 

Understanding UX: Designing for multiple devices - GA London, 18 Jan 2013

  • 1. Understanding User Experience - London 18 Jan 2012 DESIGNING FOR MULTIPLE DEVICES 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 FOCUS 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 5 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 5 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 10 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. 10 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 10 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’. 10 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 www.flickr.com/photos/abroudjameur/5271057503
  • 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/