Post on 28-Jan-2015
description
Interaction Design 201 Vragen of feedback? @ferrydendopper
Context & Challenges in Mobile Design
Interaction Design 201 Vragen of feedback? @ferrydendopper
Module 5:Design for Mobile
Duur: 10 weken, 7 colleges
Interaction Design 201 Vragen of feedback? @ferrydendopper
Interaction Design 201 Vragen of feedback? @ferrydendopper
Programma
Week:1. Context & Challenges in Mobile Design2. Responsive Design3. Design for Touch4. Designing Apps5. Mobile Forms6. Mobile Usability Testing7. Toegankelijk ontwerpen
Interaction Design 201 Vragen of feedback? @ferrydendopper
Lesstof
Tapworthy: Designing Great iPhone Apps Josh Clark
About Face 3Alan Cooper
( )
Interaction Design 201 Vragen of feedback? @ferrydendopper
Beoordeling
Opdracht De website responsive ontwerpen. Een relevante app bedenken en ontwerpen.
Je werkt aan de opdrachten als tweetal.
Interaction Design 201 Vragen of feedback? @ferrydendopper
Beoordeling opdracht
RESPONSIVE: Heb je een goed responsive systeem opgezet? (max. 20 punten)
RESPONSIVE: Heb je gebruikersinterface goed gedocumenteerd volgens de standaarden uit IAD? Heb je je ontwerpkeuzes goed onderbouwd? (max. 20 punten)
APP: Heb je een relevante toepassing bedacht waar studenten regelmatig op hun mobile device mee zouden interacteren? (max. 10 punten)
APP: Heb je een effectieve en gebruikersvriendelijke gebruikersinterface ontworpen? (max. 30 punten)
APP: Heb je gebruikersinterface goed gedocumenteerd volgens de standaarden uit IAD? Heb je je ontwerpkeuzes goed onderbouwd? (max. 20 punten)
Interaction Design 201 Vragen of feedback? @ferrydendopper
Context & Challenges in Mobile Design
Interaction Design 201 Vragen of feedback? @ferrydendopper
Nou ja, het scherm is gewoon wat kleiner…
Interaction Design 201 Vragen of feedback? @ferrydendopper
Variaties in schermgrootte
Interaction Design 201 Vragen of feedback? @ferrydendopper
Variaties in hardware
Interaction Design 201 Vragen of feedback? @ferrydendopper
Touch screen Pointing device (joystick) Keyboard
((alfa)numeriek) Soft keys Dedicated buttons Camera Voice GPS Kompas Nabijheid sensor Oriëntatie sensor
Veel input devices
Interaction Design 201 Vragen of feedback? @ferrydendopper
Visueel (LED-scherm) Auditief (speaker) Tactiel (trillen)
Output devices
Interaction Design 201 Vragen of feedback? @ferrydendopper
Verbonden met…
Interaction Design 201 Vragen of feedback? @ferrydendopper
De condities zijn totaal verschillend
http://unitid.nl/2009/09/ontwerpen-voor-het-mobiele-web/
Interaction Design 201 Vragen of feedback? @ferrydendopper
http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
Interaction Design 201 Vragen of feedback? @ferrydendopper
From: Tapworthy: Designing Great iPhone Apps by Josh Clark
Interaction Design 201 Vragen of feedback? @ferrydendopper
From: Tapworthy: Designing Great iPhone Apps by Josh Clark
Interaction Design 201 Vragen of feedback? @ferrydendopper
Mobile Mindsets
I am micro-tasking
From: Tapworthy: Designing Great iPhone Apps by Josh Clark
I am local I am bored
Interaction Design 201 Vragen of feedback? @ferrydendopper
Tablets: nieuwe context & uitdaging
Lean back vs lean forward Ander gebruik dan mobiel en
desktop: informatie ‘snacken’
Interaction Design 201 Vragen of feedback? @ferrydendopper
Tablets responsible for the rebirth of reading, says The Economist
http://www.theverge.com/2011/12/15/2637699/economist-rebirth-reading-lean-back
Interaction Design 201 Vragen of feedback? @ferrydendopper
The Economist:
Unlike the desktop and laptop web experience, these devices are allowing users to read at their leisure.
42 percent of tablet users regularly read in-depth articles, with another 40 percent reading them occasionally
Tablet users are three times more likely to read an article than watch a news video
A user's eye activity is far more focused on an iPad app than on a website
http://www.theverge.com/2011/12/15/2637699/economist-rebirth-reading-lean-back
Interaction Design 201 Vragen of feedback? @ferrydendopper
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-tasking
✘
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
“If your information is not available on small screen, it doesn’t exist for all the people that rely on their
mobile phones for access.”
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 in
“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
Interaction Design 201 Vragen of feedback? @ferrydendopper
The carry-principle
If only one device is in your pocket …
… you browse on this device.
Interaction Design 201 Vragen of feedback? @ferrydendopper
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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Grootste knelpunten mobiele bruikbaarheid
Klein scherm Lastige invoer (vooral tekst) Langzame verbinding Ongeschikte sites
Uit: http://www.useit.com/alertbox/mobile-usability.html
Ik wil een app!
van branded apps haalt de 1000
downloads niet
80%
Interaction Design 201 Vragen of feedback? @ferrydendopper
Adaptieve
Systemen
Adaptieve
Systemen
Tijd
Plaats
Agenda
Big data: bv. weer, verkeer
Gedrags-patronen
Licht
Internet-verbinding
Geluid
Zoek historie
Adaptieve systemenluisteren naar de omgeving en leren de gedragspatronen van
de gebruiker.
Tijd
Plaats
Agenda
Verkeer
Gedrags-patronen
Licht
Internet-verbinding
Geluid
Zoek historie
Adaptieve systemenluisteren 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
Interaction Design 201 Vragen of feedback? @ferrydendopper
Lezen
Reader: hoofdstuk 1
Interaction Design 201 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
f.den.dopper@hr.nl
@ferrydendopper