1011q1 design for mobile les 3 patterns for mobile
DESCRIPTION
TRANSCRIPT
Design for mobile
Les 3: mobile patterns
Interaction design patterns
Patterns zijn ontwerpoplossingen die zich bewezen hebben
Patterns worden gedocumenteerd in pattern collecties
Vele pattern collecties bevatten ook mobile patterns
Vele patterns zijn ook toepasbaar op het mobiele platform (maar sommige juist ook weer niet)
Bronnen voor mobile patterns
Tidwell, Jenifer. (2006). Designing Interfaces: Patterns for Effective Interaction Design. O`Reilly Media.
Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices. Sebastopol, CA: O’Reilly & Associates, Inc.
Nielsen, Jakob (2009). Mobile Usability. http://www.useit.com/alertbox/mobile-usability.html
Bronnen voor mobile patterns
Internet:http://designinginterfaces.com/http://www.welie.com/patterns/index.phphttp://developer.yahoo.com/ypatterns/http://patterns.design4mobile.com/
Interactie knelpunten
De belangrijkste knelpunten voor gebruikers van mobiele websites:*Kleine schermenMoeizame (tekst)invoerTrage verbindingenInteractie ontworpen voor reguliere browsers
Mobile patterns zullen dus vooral oplossingen moeten bieden voor deze knelpunten
*Uit: http://www.useit.com/alertbox/mobile-usability.html
Interactie knelpunten
De belangrijkste knelpunten voor gebruikers van mobiele websites:* Kleine schermenMoeizame (tekst)invoerTrage verbindingenInteractie ontworpen voor reguliere browsers
Mobile patterns zullen dus vooral oplossingen moeten bieden voor deze knelpunten
*Uit: http://www.useit.com/alertbox/mobile-usability.html
Kleine schermen: indelen van contentOne window drilldown
Extras on demand
Uit: http://designinginterfaces.com/
Kleine schermen: navigeren
Hub and spoke
Pyramid
Uit: http://designinginterfaces.com/
Kleine schermen: page layout (pagination)
Card stack
Closable panels
Uit: http://designinginterfaces.com/
Kleine schermen: page layout (pagination)
Slide to scroll
Fling to scroll
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Kleine schermen: informatie presenteren
Local zooming
New-item row
Uit: http://designinginterfaces.com/
Kleine schermen: informatie presenteren
Pinch to shrink and spread to enlarge
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Kleine schermen: informatie presenteren
Rotate to change state
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Interactie knelpunten
De belangrijkste knelpunten voor gebruikers van mobiele websites:* Kleine schermenMoeizame (tekst)invoerTrage verbindingenInteractie ontworpen voor reguliere browsers
Mobile patterns zullen dus vooral oplossingen moeten bieden voor deze knelpunten
*Uit: http://www.useit.com/alertbox/mobile-usability.html
Moeizame (tekst)invoer
Autocompletion
*Uit: http://designinginterfaces.com/
Moeizame (tekst)invoer
Illustrated choices
*Uit: http://designinginterfaces.com/
Moeizame (tekst)invoer
Tap to open/activate
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer
Tap to select
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer
Drag to move object
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer
Proximity activates/deactivates
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer
Shake to change
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
Moeizame (tekst)invoer
Maar als je kijkt naar de hoeveelheid tekst die elke dag op mobieltjes wordt geproduceerd (cijfers uit VS*):• 4,1 miljard smsjes per dag• 1 op 3 tieners verzendt meer dan 100 smsjes per dag, zo’n 3000
smsjes per maand• Zo’n 72% volwassenen verstuurt regelmatig een sms• 54% tieners smst dagelijks• 61% van de smartphone gebruikers stuurt en/of ontvangt dagelijks
smsjes
Hoe moeilijk kan de invoer van tekst op mobiel dan zijn???
* http://www.lukew.com/ff/entry.asp?1187/