iad2 0910 q1 les 4 patterns for mobile
DESCRIPTION
TRANSCRIPT
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.