SlideShare ist ein Scribd-Unternehmen logo
1 von 54
Downloaden Sie, um offline zu lesen
Design for Mobile
Context & uitdagingen in
Mobile Design
Design for Mobile
Nou ja, het
scherm is
gewoon wat
kleiner…
Design for Mobile
Variaties in schermgrootte
Design for Mobile
Variaties in hardware
Design for Mobile
 Touch screen
 Pointing device (joystick)
 Keyboard ((alfa)numeriek)
 Soft keys
 Dedicated buttons
 Camera
 Voice
 GPS
 Kompas
 Nabijheid sensor
 Oriëntatie sensor
Veel input devices
Design for Mobile
 Visueel (LED-scherm)
 Auditief (speaker)
 Tactiel (trillen)
Output devices
Design for Mobile
Verbonden met…
Design for Mobile
Grootste knelpunten mobiele bruikbaarheid
 Klein scherm
 Lastige invoer (vooral tekst)
 Langzame verbinding
 Ongeschikte sites
Design for Mobile
De condities zijn totaal verschillend
http://unitid.nl/2009/09/ontwerpen-voor-het-mobiele-web/
Design for Mobilehttp://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Design for Mobile
From: Tapworthy: Designing Great iPhone Apps by Josh Clark
Design for Mobile
From: Tapworthy: Designing Great iPhone Apps by Josh Clark
Design for Mobile
Mobile Mindsets
I am micro-
tasking
From: Tapworthy: Designing Great iPhone Apps by Josh Clark
I am local I am bored
Design for Mobile
Tablets: nieuwe context & uitdaging
 Lean back vs lean forward
 Ander gebruik dan mobiel en
desktop: informatie ‘snacken’
Design for Mobile
Tablets zijn verantwoordelijk voor de
hergeboorte van lezen, zegt The Economist
http://www.theverge.com/2011/12/15/2637699/economist-rebirth-reading-lean-back
Design for Mobile
Ideaal voor front-office
 Info opzoeken
 Notities maken
 Eenvoudige handelingen
Dus hoe ontwerp
je voor mobile?
Bouw een aparte mobiele site
Auto-redirect zoekopdrachten
naar je mobiele site
Stuur gebruikers die meer info
willen naar de desktop site
Schrap features en content die
niet passen in de mobiele context
Link naar volledige site
Top ‘onderweg’ taken
De mobiele context
Onderweg Micro-taken Multi-tasking
“Niemand zal onze
energietarieven ooit
op zijn mobiel willen
bekijken.”
“Het is volstrekt niet
logisch dat gebruikers
dat allemaal gaan lezen
op hun mobiel.”
“Mensen kunnen dit
complexe formulier
toch veel beter
invullen op hun pc?”
De mobiele context
Onderweg Micro-taken Multi-tasking
De mobiele context
Onderweg Micro-taken Multi-
van alle mensen met mobiel
internet benadert het web
primair via mobiel
31
%
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
van 18-29 jarigen met mobiel
internet benadert het web
primair via mobiel.
45
%
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
van mensen met een inkomen onder
$25.000 heeft geen pc, maar vaak
wel een smartphone met internet.
60
%
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
“Als jouw informatie niet
beschikbaar is op een klein
scherm, bestaat het niet
voor alle mensen die primair
met hun mobiele telefoon
toegang tot internet hebben.
Pew Research
van de mensen gebruikt mobiel
internet tijdens het
televisiekijken.
86
%
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
zegt te internetten op de wc.
(dus 60% liegt)
39
%
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
start een taak op het ene
apparaat en voltooit het op een
ander apparaat.
90
%
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
Mensen kopen
diamanten via mobiel
Mensen vullen
complexe formulieren
“Denk niet dat jij kunt
raden welk deel van jouw
content een mobiele
gebruiker wil.
Je zult verkeerd gokken.”
Karen McGrane
Contentpariteit
= =
“Als een gebruiker bij een
webpagina kan komen op
een desktop pc, moet hij
dezelfde pagina op
dezelfde URL kunnen
bereiken op zijn mobiel.”
Brad Frost
Design for Mobile
Situatie 1
Stel je zit in de trein.
 Je herinnert je ineens dat je nog geen cadeau voor
je moeder hebt voor kerst
 en kerst is al over 3 dagen.
 Maar je moet dan eerst op haar online verlanglijst
kijken wat ze wil hebben.
Wat doe je?
a. Ga je meteen met op je mobiel kijken op haar lijstje
en haar cadeau kopen, terwijl je weet dat je daar
waarschijnlijk je hele treinrit voor nodig hebt?
b. Of wacht je tot je thuis bent en doe je alles in 5
minuutjes op je computer?
Design for Mobile
Situatie 2
Stel je zit op de bank tv te kijken.
 Je besluit even op Marktplaats te zoeken naar een
tweedehands fiets.
 Je mobiel ligt naast je op de bank.
 Je tablet ligt 5 meter verder op de eettafel.
 Je pc / laptop is boven in de studeerkamer.
Met welk device ga je surfen?
Design for Mobile
The carry-principle
If only one device is in your pocket …
… you browse on this device.
Design for Mobile
De gevolgen voor het gebruikscenario:
• Beschikbaarheid: gebruikers zijn altijd beschikbaar
voor interactie
• Beperkte aandacht: gebruikers zijn veelal met
meer bezig dan interactie
• Veranderend sociaal gedrag: gebruikers raken
minder betrokken bij directe omgeving en blijven
meer ‘op afstand’ betrokken
The carry-principle
Design for Mobile
De ‘lite’ mobiele site is dus geen oplossing
 ‘Responsive Design’ (les 2) is nu een heel
populaire ontwerpstrategie voor websites.
 Maar hoe zit het dan met apps?
Ik wil een app!
van branded apps haalt
de 1000 downloads niet
80%
Design for Mobile
Adaptieve
Systemen
IAD 5 - les 1 - Context and challenges in mobile design
Plaats
Adaptieve systemen
luisteren naar de omgeving en
leren de gedragspatronen van
de gebruiker.
Plaats
Adaptieve systemen
luisteren naar de omgeving en
leren de gedragspatronen van
de gebruiker.
begrijpen niet alleen de
gebruikscontext, maar
anticiperen wat de gebruiker
wil op specifieke momenten.
geven ‘just in time’ antwoord
voordat je de vraag kunt typen
Google Now
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile design
Design for Mobile
Lezen
 Reader: hoofdstuk 1
Design for Mobile
Vragen? Feedback?
Contactgegevens

Weitere ähnliche Inhalte

Ähnlich wie IAD 5 - les 1 - Context and challenges in mobile design

Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012William Visterin
 
INXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sitesINXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sitesINXCO
 
Presentatie 4 maart
Presentatie 4 maartPresentatie 4 maart
Presentatie 4 maartComputron
 
IAB Taskforce Mobile preso Festivak 2011
IAB Taskforce Mobile preso Festivak 2011IAB Taskforce Mobile preso Festivak 2011
IAB Taskforce Mobile preso Festivak 2011michiel ebeling
 
Apps voor mobiele toestellen
Apps voor mobiele toestellenApps voor mobiele toestellen
Apps voor mobiele toestellenKaren De Groof
 
Trends voor lokale websites
Trends voor lokale websitesTrends voor lokale websites
Trends voor lokale websitesBart De Waele
 
Trends voor lokale websites
Trends voor lokale websitesTrends voor lokale websites
Trends voor lokale websitesFork-CMS
 
Mobiele applicaties in het onderwijs
Mobiele applicaties in het onderwijsMobiele applicaties in het onderwijs
Mobiele applicaties in het onderwijsAnne Jan Roeleveld
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere uxPaul Immerzeel
 
NKR Presentatie over impact van IT, Technologie en Internet
NKR Presentatie over impact van IT, Technologie en InternetNKR Presentatie over impact van IT, Technologie en Internet
NKR Presentatie over impact van IT, Technologie en InternetDirk Tuip
 
HAN Mobile 2011
HAN Mobile 2011HAN Mobile 2011
HAN Mobile 2011aFrogleap
 
bol.com Mobile First presentatie 27 november
bol.com Mobile First presentatie 27 novemberbol.com Mobile First presentatie 27 november
bol.com Mobile First presentatie 27 novemberMobylizr
 
Barbara Schouten (GfK Retail and Technology) @ MPJC2012
Barbara Schouten (GfK Retail and Technology) @ MPJC2012Barbara Schouten (GfK Retail and Technology) @ MPJC2012
Barbara Schouten (GfK Retail and Technology) @ MPJC2012Media Perspectives
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobileHans Kemp
 

Ähnlich wie IAD 5 - les 1 - Context and challenges in mobile design (20)

Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012Kluwer dagvd contr_mobile_visterin_2012
Kluwer dagvd contr_mobile_visterin_2012
 
INXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sitesINXCO / 9 fouten voor mobiele sites
INXCO / 9 fouten voor mobiele sites
 
Presentatie 4 maart
Presentatie 4 maartPresentatie 4 maart
Presentatie 4 maart
 
Online Marketing
Online MarketingOnline Marketing
Online Marketing
 
IAB Taskforce Mobile preso Festivak 2011
IAB Taskforce Mobile preso Festivak 2011IAB Taskforce Mobile preso Festivak 2011
IAB Taskforce Mobile preso Festivak 2011
 
Mobiele aplicaties
Mobiele aplicatiesMobiele aplicaties
Mobiele aplicaties
 
Apps voor mobiele toestellen
Apps voor mobiele toestellenApps voor mobiele toestellen
Apps voor mobiele toestellen
 
Mobile media
Mobile mediaMobile media
Mobile media
 
Trends voor lokale websites
Trends voor lokale websitesTrends voor lokale websites
Trends voor lokale websites
 
Trends voor lokale websites
Trends voor lokale websitesTrends voor lokale websites
Trends voor lokale websites
 
The mobile-mindmap-de-weg-naar-mobiel-succes
The mobile-mindmap-de-weg-naar-mobiel-succesThe mobile-mindmap-de-weg-naar-mobiel-succes
The mobile-mindmap-de-weg-naar-mobiel-succes
 
responsible webdesign
responsible webdesignresponsible webdesign
responsible webdesign
 
Mobiele applicaties in het onderwijs
Mobiele applicaties in het onderwijsMobiele applicaties in het onderwijs
Mobiele applicaties in het onderwijs
 
Whitepaper responsive design voor een betere ux
Whitepaper   responsive design voor een betere uxWhitepaper   responsive design voor een betere ux
Whitepaper responsive design voor een betere ux
 
ICT-trends 2013
ICT-trends 2013ICT-trends 2013
ICT-trends 2013
 
NKR Presentatie over impact van IT, Technologie en Internet
NKR Presentatie over impact van IT, Technologie en InternetNKR Presentatie over impact van IT, Technologie en Internet
NKR Presentatie over impact van IT, Technologie en Internet
 
HAN Mobile 2011
HAN Mobile 2011HAN Mobile 2011
HAN Mobile 2011
 
bol.com Mobile First presentatie 27 november
bol.com Mobile First presentatie 27 novemberbol.com Mobile First presentatie 27 november
bol.com Mobile First presentatie 27 november
 
Barbara Schouten (GfK Retail and Technology) @ MPJC2012
Barbara Schouten (GfK Retail and Technology) @ MPJC2012Barbara Schouten (GfK Retail and Technology) @ MPJC2012
Barbara Schouten (GfK Retail and Technology) @ MPJC2012
 
1011q1 design for mobile les 3 patterns for mobile
1011q1 design for mobile les 3   patterns for mobile1011q1 design for mobile les 3   patterns for mobile
1011q1 design for mobile les 3 patterns for mobile
 

Mehr von Ferry den Dopper

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsFerry den Dopper
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchFerry den Dopper
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedFerry den Dopper
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsFerry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationFerry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry den Dopper
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignFerry den Dopper
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offFerry den Dopper
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationFerry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry den Dopper
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieFerry den Dopper
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingFerry den Dopper
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureFerry den Dopper
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsFerry den Dopper
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenFerry den Dopper
 

Mehr von Ferry den Dopper (20)

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart Defaults
 
IAD 5 - les 2 - Apps
IAD 5 - les 2 - AppsIAD 5 - les 2 - Apps
IAD 5 - les 2 - Apps
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for Touch
 
IAD 1 - les 2 - personas
IAD 1 - les 2 - personasIAD 1 - les 2 - personas
IAD 1 - les 2 - personas
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisited
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & Errors
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form Organization
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form Elements
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form Design
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-off
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - Zoeken
 
IAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingIAD 2 - les 6 - Labeling
IAD 2 - les 6 - Labeling
 
IAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataIAD 2 - les 5 - Metadata
IAD 2 - les 5 - Metadata
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - Navigation
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatie
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - Cardsorting
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information Architecture
 
IAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patternsIAD 4 - les 8 - Social design patterns
IAD 4 - les 8 - Social design patterns
 
Interaction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoerenInteraction Design 1.8: Usability test uitvoeren
Interaction Design 1.8: Usability test uitvoeren
 

IAD 5 - les 1 - Context and challenges in mobile design

Hinweis der Redaktion

  1. De laatstegroepheeftgoedgeluisterdnaar usability grootvaderJakob Nielsen, die vorigjaar de volgendeadviezengaf:Bouweenapartemobiele siteSchrap features en content die nietpassen in de mobiele contextAuto-redirect zoekopdrachtennaar je mobiele siteStuurgebruikers die meer info willennaar de desktop site
  2. Ditadvies past perfect in het plaatje van ‘mobiele context’: mensenzijnonderweg en willen al rennend of fietsendeenmicrotaakverrichten, zoals de vertrektijd van hun bus. Duswordtvoormobielalle content geschrapt die nietbehoren tot de ‘onderweg’ taken.
  3. Mobiele context dus. En dus op de mobiele site allesschrappendat in die context niet relevant is.
  4. Ditkomtmisschienalseenschok, maar démobiele context bestaatniet.
  5. Wat is de volgendeinnovatiegolf?Adaptievesystemen
  6. U bent wellicht met TomTom. ‘s avonds en in tunnels schakelthijautomatisch over naar de nachtmodus, zodat u minder afgeleidwordttijdens het rijden.