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/