Ontwerpen voor mobiel: mobile patterns

Interaction design 2, 2009-2010, kwartaal 1

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

Boeken: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.

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 webgebruikers bij mobiele interactie*Kleine schermenMoeizame (tekst)invoerTrage verbindingenInteractie ontworpen voor reguliere browsers

Mobile patterns zullen dus vooral deze knelpunten aanpakken

*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: page layout (pagination)

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

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

Point to select/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.