SlideShare a Scribd company logo
DESIGNING FOR MULTIPLE DEVICES
Live streaming from New York, March14th 2013
                                                Anna Dahlström
                                                    co-founder byflock
                                               www.annadahlstrom.com
                                                        annadahlstrom
I’m Anna
                                  IA & UX DESIGNER | SWEDISH BUT LONDON BASED
                                          FREELANCING + WORKING ON A STARTUP
                                                     LOVES QUOTES & CHALLENGES
                                              This is Öresundsbron, the bridge between Sweden & Denmark




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



www.flickr.com/photos/horrigans/5649006182
1. FIRST UP...
                                               DEVICE USAGE &
                                               PATTERNS




www.flickr.com/photos/publicenergy/1846375599

Recommended for you

Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPad

This document discusses considerations for designing apps for the iPad. It provides statistics on iPad adoption rates and user demographics. It emphasizes that the iPad is a third category of device distinct from phones and laptops. The document outlines new design principles for the iPad's large touchscreen, including minimizing buttons, direct manipulation, handling different orientations. It stresses the importance of visual design and graphics, as well as usability factors like element sizes and hand positions.

ipaduxtable
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
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
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/
In 2009 1% of global internet traffic came
from mobiles. In 2010 the number was 4%.
By the end of 2012 it had risen to13%.*
 * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile




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

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

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
Technology for engagement
Technology for engagementTechnology for engagement
Technology for engagement

This document provides an overview of practical technologies that can be used for community engagement and civic participation. It discusses how social media and mobile phones are ubiquitous technologies that can be leveraged. Specific tools are presented for gathering and sharing information through photos, videos, audio, maps and messaging. APIs, mobile applications and platforms for crowdsourcing, surveys and fundraising are presented as ways to better connect with and involve community members.

civic engagementtechnologysocial media
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
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

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




http://www.flickr.com/photos/eyesore9/3206408088/

Recommended for you

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

Keynote ok acrl murphy
Keynote ok acrl murphyKeynote ok acrl murphy
Keynote ok acrl murphy

Thank you for the conversation. I'm an AI assistant created by Anthropic to be helpful, harmless, and honest.

acrlsocialnetworkingtrends
Learn to livestream, part 1, by pixplz
Learn to livestream, part 1, by pixplzLearn to livestream, part 1, by pixplz
Learn to livestream, part 1, by pixplz

This document discusses techniques for livestreaming events and provides examples of memorable livestreamed moments. It also outlines steps for learning to livestream, including setting up an account, planning content, and doing test live broadcasts in pairs with one person broadcasting in the field while the other acts as ground control. The goal is to practice livestreaming interviews and switching roles to learn the process.

pixplzlivestreamjustin beck
SSTREAMM - WHAT IS SSTREAMM
SSTREAMM - WHAT IS SSTREAMMSSTREAMM - WHAT IS SSTREAMM
SSTREAMM - WHAT IS SSTREAMM

SSTREAMM provides live streaming from any event, to any digital device, allowing you to share it globally. With our SSTREAMM device you can stream live video via landline, WIFI or a cellular connection, that uses up to five 3G data SIM cards simultaneously to ensure the very best quality. SSTREAMM’s powerful Content Delivery Network can encode existing content and broadcast it as VIDEO ON DEMAND (VOD). Our dynamic bitrate encryption ensures the user remains connected to the content even when moving between edge and 3G signals. We can also maximize your reach and grow your audience with our platform by sharing your events on social media platforms such as Facebook or Twitter. SSTREAMM’s expertise in content, marketing and digital technologies provides you with a cost effective, end-to-end video solution. Providing you with unlimited digital opportunities. SSTREAMM, your live-streaming solution!

livestreamingmobilevideo
3. A CLOSER LOOK AT...
                                                       BESPOKE
                                                       MOBILE SITES vs.
                                                       RESPONSIVE SITES
                                                       vs. APPS



http://www.flickr.com/photos/young_einstein/74097753/
There are 5 billion mobile phone users in the
world but just 1 billion smartphone users.*
* Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile




www.flickr.com/photos/91026431@N05/8497636527
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/

Recommended for you

Citizen journalism
Citizen journalismCitizen journalism
Citizen journalism

Citizen journalism is defined as citizens playing an active role in collecting, reporting, analyzing, and disseminating news and information to provide independent and reliable facts that a democracy requires. Examples of citizen journalism include blogs, chat rooms, website comments, Twitter, and YouTube or DailyMotion videos. While citizen journalism can serve as a counterweight to corporate media and promote civic engagement, it also risks having untrained journalists, political agendas, and spreading too much unverified information.

Drones for journalism
Drones for journalismDrones for journalism
Drones for journalism

Drones are increasingly being used for journalism purposes with models ranging from $300 hobby drones to $400,000 professional drones. Drones can carry cameras to capture aerial footage and photos of hard to access areas like wildfires, disasters, or protests. However, legal and safety issues need to be addressed including privacy, regulations, and risks of drones crashing or being shot down. While not yet legal for commercial use in the US, drones may be allowed for journalism by 2015 as regulations are developed.

Exploring and Understanding the New World of Event Technology
Exploring and Understanding the New World of Event TechnologyExploring and Understanding the New World of Event Technology
Exploring and Understanding the New World of Event Technology

How are you incorporating livestreaming, hybrid, augmented reality, and geolocation into your events? Technology has become a key component for all learning styles and in an age of edutainment and experiential learning, how do you prepare for the new event technology landscape that is out there? It is important for you to not only know what is being used today, but what is going to be used and how vendors and attendees are starting to view technology when they show up at your events. KiKi will take you through technology that makes you feel like Tom Cruise in Mission Impossible, but will help you feel like it is Mission Totally Possible when you walk out of the room.

technology and eventsaugmented realitytechnology
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
1057 different mobile devices accessed
The Guardian beta site yesterday (including
one person on a zune!)*
* Source: The Guardian
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
 & FOR TOUCH INTERACTIONS




www.flickr.com/photos/jmtimages/2883279193

Recommended for you

How to stream a meetup or live event
How to stream a meetup or live eventHow to stream a meetup or live event
How to stream a meetup or live event

The document outlines Jason Tucker's experiments over several years to develop an affordable and effective setup for streaming meetups and live events. It details the evolution of his equipment from a basic webcam and computer setup to a more sophisticated dual webcam configuration capable of simultaneously streaming both the presenter and their presentation. Key pieces of equipment discussed include webcams, tripods, capture cards, and streaming software. The goal was to find a high quality yet affordable solution for sharing content remotely.

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

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




www.flickr.com/photos/31878512@N06/4704140020
DIFFERENT
TYPES OF APPS
THE MAIN TWO TYPES


NATIVE APPS (e.g. Instagram)
• MOST OPTIMISED USER EXPERIENCE
• ACCESS TO DEVICE CAPABILITIES & APIs
• BUT REQUIRES PLATFORM SPECIFIC CODE BASE

HYBRID (e.g. first Facebook app)
• 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

Recommended for you

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
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
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
THE SAME WEBSITE BEING
  DELIVERED TO ALL DEVICES
  BUT OPTIMISED FOR SCREEN SIZE, DEVICE & ORIENTATION


                            DESKTOP
                          FULL WEBSITE
                                                       MOBILE
                                                        FULL
                                                       WEBSITE




                                  MOBILE                         SOON
                                   FULL
                                  WEBSITE




http://desktopwallpaper-s.com/19-Computers/-/Future/
www.flickr.com/photos/fritzon/195008860




  IN REALITY IT’S A BIT LIKE
  PLAYING REAL LIFE TETRIS
  BUT WITH PRE-DEFINED POCKETS FOR THE
  MODULES TO SLOT INTO

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

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
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
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
CONSIDER YOUR NAVIGATION
 DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS




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




http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/

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




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




www.flickr.com/photos/blakespot/4773693893

Recommended for you

Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful

The document discusses how mobile devices enable new experiences and applications beyond the devices themselves. It notes that long queues at device launches provide opportunities for user research. While devices have impressive numbers of apps and downloads, people use apps for communication, entertainment, work and a variety of other aspects of modern life. The document advocates developing for the open web in addition to apps so content can reach all devices and browsers.

appsappcircusmobile
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
Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14

More people are using mobile platforms to access information - can your business afford to be left behind in an age of rapid digital transformation? When once it was acceptable to be in the late majority when it came to adjusting your business to technological advancements, nowadays you have to lead the pack in order to be a viable business.

precedenttechnologydigital
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

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
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile

This document provides an overview of a presentation on native mobile apps versus mobile web apps. It includes slides on why developers were fighting over the two approaches, Apple's announcement allowing third-party apps on the iPhone, and the surprise success of the iPhone App Store. It also discusses factors that contributed to the App Store's success like its openness, revenue split, and fewer restrictions compared to mobile carriers. The document debates questions around whether apps create platform lock-in, if app stores are essential to a platform's success, and challenges of developing for multiple mobile platforms. It suggests that HTML5 and WebKit may become the dominant mobile platform.

mobilewebnativeappsdesign4mobile
2010 State of the iPhone Market
2010 State of the iPhone Market2010 State of the iPhone Market
2010 State of the iPhone Market

This is a copy of the presentation I gave at the iOS DevCamp in Seattle on August 21, 2010. It goes into user data, market share, app market, competitive outlook, and future trends for Apple's iOS and the mobile internet.

ipadiosuser data
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. THREE TAKE AWAY
                                                        EXERCISES




http://www.flickr.com/photos/kalexanderson/6302660289/

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
BESPOKE MOBILE
                                           SITE vs RESPONSIVE
                                           vs AN APP
                                           CONSIDER THE FOLLOWING:
                                           A big retail store has asked you to come up
                                           with a Easter Hunt across your city where
 EXERCISE ONE                              offers and give aways are hidden at certain
                                           locations. There will only be a certain number
                                           of items available each day & they want to be
                                           able to notify people when an item has been
                                           found, or when a user is close to one.
                                           What do you recommend in terms of their
                                           mobile strategy and why? I.e. an app,
                                           responsive or bespoke mobile site, or a
                                           combination?

www.flickr.com/photos/jojoneil/6359536591   10 MINUTES
THINGS TO
                                           CONSIDER
                                           HOW WOULD MOST PEOPLE ACCESS IT?
                                           • DIRECT TRAFFIC vs. SHARED LINKS

                                           WHAT DO YOU NEED IT TO DO?
                                           • ARE THERE SPECIFIC DEVICE CAPABILITIES YOU
 EXERCISE ONE                               WANT TO UTILISE
                                           • IS OFFLINE READING/USAGE IS REQUIRED

                                           WHAT ARE THE OBJECTIVES & PRACTICALITIES?
                                           • THE BUDGET
                                           • THE CURRENT TECHNICAL PLATFORM THAT THE
                                            RETAILER IS ON
                                           • COULD AN APP BE RE-USED FOR ANOTHER
                                            CAMPAIGN LATER
                                           • THE MARKETING VALUE OF HAVING AN APP
www.flickr.com/photos/jojoneil/6359536591
BUILDING A
                                           RESPONSIVE SITE
                                           FOR THE EASTER HUNT SITE THE CLIENT
                                           WANT TO INCLUDE THE FOLLOWING:
                                           • About page        • Share (on FB & Twitter)
                                           • List of offers    • Login & registration
                                           • Product pages     • Overview of number of found
                                           • Notifications       & not found item
 EXERCISE TWO                              PART 1
                                           Pick either mobile or desktop & do a rough sketch
                                           of what the home page should contain & how the
                                           content should be prioritised.
                                           PART 2
                                           Using content stacking methodology define how the
                                           content should be prioritised on desktop & mobile.

                                           15 MINUTES
www.flickr.com/photos/jojoneil/6359536591
THINGS TO
                                           CONSIDER
                                           EXPECTATION OF AN EQUAL & CONTINUOUS
                                           JOURNEY ACROSS DEVICES
                                           • MOBILE & DESKTOP USE CASES ARE MERGING

                                           KEEPING THE CORE CONTENT THE SAME

 EXERCISE TWO                              • OPTIMISE THE DISPLAY & INTERACTIONS TO THE
                                            DEVICE
                                           • IF IT DOESN’T BELONG ON MOBILE DOES IT
                                            BELONG ON DESKTOP

                                           THE HIERARCHY OF MODULES
                                           • PRIORITISE & CONSIDER EACH PIECE OF CONTENT
                                           • WORK WITH PEN & PAPER
                                           • DEFINE RULES FOR HOW HORISONTAL MODULES
                                            ARE DISPLAYED VERTICALLY ON SMALLER SCREENS
www.flickr.com/photos/jojoneil/6359536591

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
BUILDING AN APP
                                           BASED ON THE CONTENT & FUNCTIONALITY
                                           REQUIREMENTS CONSIDER WHAT WOULD BE
                                           SUITABLE FOR AN APP:
                                           • About page               • Share (on FB & Twitter)
                                           • List of offers           • Login & registration
                                           • Product pages            • Overview of number of
                                           • Notifications              found & not found item
                                           PART 1
EXERCISE THREE                             Define the main sections your app would have.
                                           PART 2
                                           Looking at the navigation how would you structure
                                           this if you were to do an iOS app & an Android app?
                                           Focus on the Tab bar items respectively Action bar
                                           items & what would go in the ‘More’ respectively
                                           ‘Overflow menu’.



www.flickr.com/photos/jojoneil/6359536591
                                           15 MINUTES
THINGS TO
                                           CONSIDER
                                           APPS ARE FOCUSED
                                           • CONTENT OFTEN DIFFERS BETWEEN APPS & MOBILE
                                            OPTIMISED SITES
                                           • EACH SECTION SHOULD HAVE A CLEAR PURPOSE &
                                            USE CASE

EXERCISE THREE                             THE NUMBER OF ITEMS YOU CAN FIT VARIES
                                           BETWEEN ANDROID & iOS
                                           • BASE ORDER & POSITIONING OF SECTIONS ON
                                            IMPORTANCE & ACCESS FREQUENCY
                                           • TAB BAR ITEMS & ACTION BUTTONS AREN’T THE
                                            ONLY WAY FOR A USER TO NAVIGATE


                                           PROVIDE VALUE FROM THE FIRST SCREEN
                                           • AVOID USING THE FIRST SCREEN AS A STEPPING
                                            STONE BUT BRING THE USER RIGHT INTO CONTENT
www.flickr.com/photos/jojoneil/6359536591
7. TO
                                                         SUMMARISE




http://www.flickr.com/photos/martinteschner/4569495912/
DEVICE USAGE
                                            & PATTERNS
                                            FUTURE DEVICES
                                            The number of different devices will
                                            only grow & we don’t know what’s
                                            coming.
                                            USED EVERYWHERE &
                                            ANYWHERE
                                            And we’re not only using them on
                                            the go but increasingly when we have
                                            some downtime including the sofa.
                                            USE OF MOBILE DEVICES
                                            Our use of mobile devices is
www.flickr.com/photos/thecaucas/2597813380   increasingly replicating that of desktop.

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
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
IMPLICATIONS
                                            FOR UX &
                                            DESIGN
                                            THINKING
                                            AN EQUAL & CONTINUOUS
                                            EXPERIENCE ACROSS DEVICES
                                            As they & the services we use
                                            become more sophisticated &
                                            optimised we expect more from them.
                                            KEEP THE CORE BUT OPTIMISE
                                            Consider the limitations but also the
                                            opportunities with mobile devices.
www.flickr.com/photos/thecaucas/2597813380
WHEN
                                            DO WHAT
                                            BESPOKE MOBILE WEBSITE
                                            Try to avoid it but do it if necessary
                                            RESPONSIVE DESIGN
                                            The most device & future “proof ”
                                            approach right now. Use if possible.
                                            But challenge content delivery.
                                            APP
                                            Base on user & business needs. Strong
                                            argument if you require offline
                                            reading/functionality & access to
                                            device capabilities. Base which type
www.flickr.com/photos/thecaucas/2597813380   on objectives & stats.
FOR
                                            RESPONSIVE
                                            DEFINE YOUR GRID &
                                            BREAKPOINTS
                                            This is the backbone of responsive
                                            design & content choreography.
                                            DON’T FORGET THE
                                            NAVIGATION
                                            Consider the pros & cons of
                                            different methods.
                                            TEST & COLLABORATE
                                            This is new grounds & we’re all
                                            learning so work together & test as
www.flickr.com/photos/thecaucas/2597813380   you go.
FOR APPS
                                            REMEMBER PLATFORM SPECIFIC
                                            GUIDELINES
                                            Adhering to them will make your
                                            app easier to use.
                                            CONSIDER BACKWARDS
                                            COMPATIBILITY
                                            Not everyone will be on the latest
                                            version. Ensure you cater for the
                                            majority.
                                            CONSULT THE INTERNET
                                            There are a number of great
                                            resources for knowledge &
                                            inspiration. Use them.
www.flickr.com/photos/thecaucas/2597813380

Recommended for you

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
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
8. BEFORE I GO...
                                               REMEMBER THAT




www.flickr.com/photos/46355638@N00/4414640784
...IT’S NOT JUST ABOUT
                                           THE SMALLER SCREENS
                                                     BUT ALSO THE BIG ONES




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




www.flickr.com/photos/jolives/2889944573/
IT DOESN’T
                                             HAVE TO BREAK
                                                  THE BANK
                                                BESIDES CONSIDER LOST
                                             CUSTOMERS & MAINTAINING
                                                     MULTIPLE VERSIONS
http://www.flickr.com/photos/gi/5537770007/

Recommended for you

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
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
BE CREATIVE & CHALLENGE
 WHAT EXISTS TODAY
 THAT’S WHAT MOVES US FORWARD




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




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




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




                  www.flickr.com/photos/st3f4n/4387291247

Recommended for you

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
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
PLATFORM
   GUIDELINES
   http://developer.apple.com/library/ios/
   #DOCUMENTATION/UserExperience/
   Conceptual/MobileHIG/
   UIElementGuidelines/
   UIElementGuidelines.html
   http://mrgan.tumblr.com/post/
   10492926111/labeling-the-back-button
   http://developer.android.com/design/
   index.html




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




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




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

Recommended for you

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
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014

The document discusses best practices for UX deliverables. It emphasizes that UX deliverables should be adapted to the intended audience and add value. Deliverables should have a clear narrative and tell a story. Creating visually engaging deliverables that keep the audience's attention is important, especially when presenting to clients who may not have a background in UX. The document also stresses that UX is about collaboration between different roles and that effective deliverables facilitate common understanding between teams.

deliverablesinformation architectureuser experience design
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

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
 
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
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPad
Pek Pongpaet
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
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
 
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
 
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
 
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
 
Technology for engagement
Technology for engagementTechnology for engagement
Technology for engagement
Minnesota Campus Comapct
 
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
 
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
 
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
 
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
 
Reset the Web
Reset the WebReset the Web
Reset the Web
yiibu
 
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
 
Keynote ok acrl murphy
Keynote ok acrl murphyKeynote ok acrl murphy
Keynote ok acrl murphy
Joe Murphy Librarian & Futurist
 

What's hot (19)

GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012GA London - Designing for multiple devices, 28may2012
GA London - Designing for multiple devices, 28may2012
 
Designing for multiple devices, GA London - 6 Aug 2012
Designing for multiple devices, GA London - 6 Aug 2012Designing for multiple devices, GA London - 6 Aug 2012
Designing for multiple devices, GA London - 6 Aug 2012
 
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
 
Designing for iPad
Designing for iPadDesigning for iPad
Designing for iPad
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
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
 
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...
 
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
 
Technology for engagement
Technology for engagementTechnology for engagement
Technology for engagement
 
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
 
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
 
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
 
Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014Wearable Accessibility - Accessing Higher Ground 2014
Wearable Accessibility - Accessing Higher Ground 2014
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
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?
 
Keynote ok acrl murphy
Keynote ok acrl murphyKeynote ok acrl murphy
Keynote ok acrl murphy
 

Viewers also liked

Learn to livestream, part 1, by pixplz
Learn to livestream, part 1, by pixplzLearn to livestream, part 1, by pixplz
Learn to livestream, part 1, by pixplz
Justin Beck
 
SSTREAMM - WHAT IS SSTREAMM
SSTREAMM - WHAT IS SSTREAMMSSTREAMM - WHAT IS SSTREAMM
SSTREAMM - WHAT IS SSTREAMM
Julian Plato
 
Citizen journalism
Citizen journalismCitizen journalism
Citizen journalism
katealbrechtsnow
 
Drones for journalism
Drones for journalismDrones for journalism
Drones for journalism
Steve Outing | MediaDisruptus
 
Exploring and Understanding the New World of Event Technology
Exploring and Understanding the New World of Event TechnologyExploring and Understanding the New World of Event Technology
Exploring and Understanding the New World of Event Technology
KiKi L'Italien
 
How to stream a meetup or live event
How to stream a meetup or live eventHow to stream a meetup or live event
How to stream a meetup or live event
Jason Tucker
 

Viewers also liked (6)

Learn to livestream, part 1, by pixplz
Learn to livestream, part 1, by pixplzLearn to livestream, part 1, by pixplz
Learn to livestream, part 1, by pixplz
 
SSTREAMM - WHAT IS SSTREAMM
SSTREAMM - WHAT IS SSTREAMMSSTREAMM - WHAT IS SSTREAMM
SSTREAMM - WHAT IS SSTREAMM
 
Citizen journalism
Citizen journalismCitizen journalism
Citizen journalism
 
Drones for journalism
Drones for journalismDrones for journalism
Drones for journalism
 
Exploring and Understanding the New World of Event Technology
Exploring and Understanding the New World of Event TechnologyExploring and Understanding the New World of Event Technology
Exploring and Understanding the New World of Event Technology
 
How to stream a meetup or live event
How to stream a meetup or live eventHow to stream a meetup or live event
How to stream a meetup or live event
 

Similar to Live streaming: Designing For Multiple Devices - GA, New York, 14 March 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
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
 
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
 
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
 
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
 
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
 
Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14
Precedent
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
Alexander Anikin
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
yiibu
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
Bryan Rieger
 
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
 
Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14
Precedent
 
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
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile
Jason Grigsby
 
2010 State of the iPhone Market
2010 State of the iPhone Market2010 State of the iPhone Market
2010 State of the iPhone Market
Curio Consulting
 

Similar to Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013 (20)

Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013
 
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
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
 
Beyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibuBeyond Progressive Enhancement by yiibu
Beyond Progressive Enhancement by yiibu
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
 
In the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social mediaIn the palm of the customer - mobile marketing & social media
In the palm of the customer - mobile marketing & social media
 
Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14Mobilising Digital - Sydney 26/03/14
Mobilising Digital - Sydney 26/03/14
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
 
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
Beyond The Hamburger Menu, UX Ireland, 10 Nov 2016
 
Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14Mobilising Digital - Perth 13/03/14
Mobilising Digital - Perth 13/03/14
 
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
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile
 
2010 State of the iPhone Market
2010 State of the iPhone Market2010 State of the iPhone Market
2010 State of the iPhone Market
 

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
 
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
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
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
 
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
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
 

Recently uploaded

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.
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
nikhilkumarji0156
 
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
 
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
antonellispunches643
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
tezeqes
 
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
 
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeDaryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
jiya khan$A17
 
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
 
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
 
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
telchlarzelere270
 
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
 
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeVaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
anany pandey$A17
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
kumkum tuteja$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
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
ssusere235001
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
shyamraj39
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
kousato1
 
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeMalviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
bookmybebe1
 
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafePaharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
dakshishsingh98798
 
Surface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different toolsSurface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different tools
ManashChatterjee3
 

Recently uploaded (20)

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
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
 
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
 
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
十大欧洲杯投注app平台-十大靠谱欧洲杯投注app官方平台 |【​网址​🎉ac10.net🎉​】
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
 
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
 
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeDaryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
 
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 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
 
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】  .
十大美洲杯投注网站-美洲杯投注网站平台网址大全 |【​网址​🎉ac123.net🎉​】 .
 
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
 
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeVaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha 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
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
 
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeMalviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
 
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafePaharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
 
Surface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different toolsSurface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different tools
 

Live streaming: Designing For Multiple Devices - GA, New York, 14 March 2013

  • 1. DESIGNING FOR MULTIPLE DEVICES Live streaming from New York, March14th 2013 Anna Dahlström co-founder byflock www.annadahlstrom.com annadahlstrom
  • 2. I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED FREELANCING + WORKING ON A STARTUP LOVES QUOTES & CHALLENGES This is Öresundsbron, the bridge between Sweden & Denmark www.flickr.com/photos/dahlstroms/4411448782/
  • 3. AGENDA 1. DEVICE USAGE & PATTERNS 2. IMPLICATIONS FOR UX & DESIGN THINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP 4. RESPONSIVE 5. APPS 6. PRACTICE 7. SUMMARY 8. Q & A www.flickr.com/photos/horrigans/5649006182
  • 4. 1. FIRST UP... DEVICE USAGE & PATTERNS www.flickr.com/photos/publicenergy/1846375599
  • 5. DEVICE: a thing defined for a specific purpose or task & which can connect to the internet http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 6. THE FOCUS OF TODAY SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 7. In 2009 1% of global internet traffic came from mobiles. In 2010 the number was 4%. By the end of 2012 it had risen to13%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile 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 http://www.flickr.com/photos/eyesore9/3206408088/
  • 21. LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU www.flickr.com/photos/frantaylor/4296536332
  • 22. RESULTED IN MOBILE SPECIFIC WEBSITES LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 23. PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINK THERE IS A REASON FOR THAT www.flickr.com/photos/demandaj/7287174776
  • 24. AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES THIS 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 http://www.flickr.com/photos/young_einstein/74097753/
  • 26. There are 5 billion mobile phone users in the world but just 1 billion smartphone users.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile www.flickr.com/photos/91026431@N05/8497636527
  • 27. PRIMARY REASONS FOR A BESPOKE MOBILE SITE • REQUIRED FOR THE AUDIENCE • TECHNICAL LIMITATIONS TO CMS www.flickr.com/photos/st3f4n/3476036180
  • 28. BEST AVOIDED IF WE CAN IT CAN CAUSE ALL SORTS OF PROBLEMS http://www.flickr.com/photos/edenandjosh/2892956576/
  • 29. 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
  • 30. 1057 different mobile devices accessed The Guardian beta site yesterday (including one person on a zune!)* * Source: The Guardian
  • 31. 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
  • 32. CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED BOTH IN DISPLAY OF CONTENT, REGARDING USING DEVICE CAPABILITIES & FOR TOUCH INTERACTIONS www.flickr.com/photos/jmtimages/2883279193
  • 33. 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
  • 34. 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
  • 35. 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. first Facebook app) • 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
  • 36. ” 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
  • 37. 4. THERE IS SOMETHING CALLED... RESPONSIVE DESIGN www.flickr.com/photos/taytom/5277657429
  • 38. “ 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
  • 39. THE SAME WEBSITE BEING DELIVERED TO ALL DEVICES BUT OPTIMISED FOR SCREEN SIZE, DEVICE & ORIENTATION DESKTOP FULL WEBSITE MOBILE FULL WEBSITE MOBILE SOON FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future/
  • 40. www.flickr.com/photos/fritzon/195008860 IN REALITY IT’S A BIT LIKE PLAYING REAL LIFE TETRIS BUT WITH PRE-DEFINED POCKETS FOR THE MODULES TO SLOT INTO
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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/
  • 45. CONSIDER YOUR NAVIGATION DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS www.flickr.com/photos/tim_norris/2789759648
  • 46. EXCELLENT READ ‘RESPONSIVE NAVIGATION PATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  • 48. 5. WHAT ABOUT... DOING AN APP? http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
  • 49. 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
  • 50. EVERY PLATFORM IS ITS OWN LITTLE WORLD WITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO www.flickr.com/photos/gadl/3570118243
  • 51. 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
  • 52. RELATIVE NUMBER OF ACTIVE ANDROID DEVICES Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
  • 53. EXAMPLE OF ADOPTION OF NEW iOS VERSION Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1 www.flickr.com/photos/blakespot/4773693893
  • 54. 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
  • 56. ANDROID RESOURCES HELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIER VERSIONS
  • 57. 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
  • 58. 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
  • 59. HOW TO TAME THE BEAST? YOU LEARN BY DOING www.flickr.com/photos/jojoneil/6359536591
  • 60. 6. THREE TAKE AWAY EXERCISES http://www.flickr.com/photos/kalexanderson/6302660289/
  • 61. BESPOKE MOBILE SITE vs RESPONSIVE vs AN APP CONSIDER THE FOLLOWING: A big retail store has asked you to come up with a Easter Hunt across your city where EXERCISE ONE offers and give aways are hidden at certain locations. There will only be a certain number of items available each day & they want to be able to notify people when an item has been found, or when a user is close to one. What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination? www.flickr.com/photos/jojoneil/6359536591 10 MINUTES
  • 62. THINGS TO CONSIDER HOW WOULD MOST PEOPLE ACCESS IT? • DIRECT TRAFFIC vs. SHARED LINKS WHAT DO YOU NEED IT TO DO? • ARE THERE SPECIFIC DEVICE CAPABILITIES YOU EXERCISE ONE WANT TO UTILISE • IS OFFLINE READING/USAGE IS REQUIRED WHAT ARE THE OBJECTIVES & PRACTICALITIES? • THE BUDGET • THE CURRENT TECHNICAL PLATFORM THAT THE RETAILER IS ON • COULD AN APP BE RE-USED FOR ANOTHER CAMPAIGN LATER • THE MARKETING VALUE OF HAVING AN APP www.flickr.com/photos/jojoneil/6359536591
  • 63. BUILDING A RESPONSIVE SITE FOR THE EASTER HUNT SITE THE CLIENT WANT TO INCLUDE THE FOLLOWING: • About page • Share (on FB & Twitter) • List of offers • Login & registration • Product pages • Overview of number of found • Notifications & not found item EXERCISE TWO PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES www.flickr.com/photos/jojoneil/6359536591
  • 64. THINGS TO CONSIDER EXPECTATION OF AN EQUAL & CONTINUOUS JOURNEY ACROSS DEVICES • MOBILE & DESKTOP USE CASES ARE MERGING KEEPING THE CORE CONTENT THE SAME EXERCISE TWO • OPTIMISE THE DISPLAY & INTERACTIONS TO THE DEVICE • IF IT DOESN’T BELONG ON MOBILE DOES IT BELONG ON DESKTOP THE HIERARCHY OF MODULES • PRIORITISE & CONSIDER EACH PIECE OF CONTENT • WORK WITH PEN & PAPER • DEFINE RULES FOR HOW HORISONTAL MODULES ARE DISPLAYED VERTICALLY ON SMALLER SCREENS www.flickr.com/photos/jojoneil/6359536591
  • 65. BUILDING AN APP BASED ON THE CONTENT & FUNCTIONALITY REQUIREMENTS CONSIDER WHAT WOULD BE SUITABLE FOR AN APP: • About page • Share (on FB & Twitter) • List of offers • Login & registration • Product pages • Overview of number of • Notifications found & not found item PART 1 EXERCISE THREE Define the main sections your app would have. PART 2 Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’. www.flickr.com/photos/jojoneil/6359536591 15 MINUTES
  • 66. THINGS TO CONSIDER APPS ARE FOCUSED • CONTENT OFTEN DIFFERS BETWEEN APPS & MOBILE OPTIMISED SITES • EACH SECTION SHOULD HAVE A CLEAR PURPOSE & USE CASE EXERCISE THREE THE NUMBER OF ITEMS YOU CAN FIT VARIES BETWEEN ANDROID & iOS • BASE ORDER & POSITIONING OF SECTIONS ON IMPORTANCE & ACCESS FREQUENCY • TAB BAR ITEMS & ACTION BUTTONS AREN’T THE ONLY WAY FOR A USER TO NAVIGATE PROVIDE VALUE FROM THE FIRST SCREEN • AVOID USING THE FIRST SCREEN AS A STEPPING STONE BUT BRING THE USER RIGHT INTO CONTENT www.flickr.com/photos/jojoneil/6359536591
  • 67. 7. TO SUMMARISE http://www.flickr.com/photos/martinteschner/4569495912/
  • 68. 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.
  • 69. 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
  • 70. 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.
  • 71. 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.
  • 72. 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
  • 73. 8. BEFORE I GO... REMEMBER THAT www.flickr.com/photos/46355638@N00/4414640784
  • 74. ...IT’S NOT JUST ABOUT THE SMALLER SCREENS BUT ALSO THE BIG ONES www.flickr.com/photos/jolives/2889944573/
  • 75. IT’S ABOUT THINKING AHEAD PLAN 5 YEARS AHEAD WITH “FUTURE PROOFING” IN MIND www.flickr.com/photos/jolives/2889944573/
  • 76. IT DOESN’T HAVE TO BREAK THE BANK BESIDES CONSIDER LOST CUSTOMERS & MAINTAINING MULTIPLE VERSIONS http://www.flickr.com/photos/gi/5537770007/
  • 77. BE CREATIVE & CHALLENGE WHAT EXISTS TODAY THAT’S WHAT MOVES US FORWARD www.flickr.com/photos/oter/5090592214
  • 78. CLOSER & MORE REWARDING COLLABORATION BETWEEN DISCIPLINES & WITH CLIENTS www.flickr.com/photos/stevendepolo/3378152784
  • 79. 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/
  • 80. 9. FOR THE ROAD SOME TAKE AWAYS www.flickr.com/photos/st3f4n/4387291247
  • 81. 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
  • 82. 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
  • 84. Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.com www.flickr.com/photos/dahlstroms/4411448782/