Iad2 0910 Q1 Les 4 Patterns For Mobile
description
Transcript of Iad2 0910 Q1 Les 4 Patterns For Mobile
![Page 1: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/1.jpg)
Ontwerpen voor mobiel: mobile patterns
Interaction design 2, 2009-2010, kwartaal 1
![Page 2: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/2.jpg)
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)
![Page 3: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/3.jpg)
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.
![Page 4: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/4.jpg)
Bronnen voor mobile patterns
Internet:http://designinginterfaces.com/http://www.welie.com/patterns/index.phphttp://developer.yahoo.com/ypatterns/http://patterns.design4mobile.com/
![Page 5: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/5.jpg)
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
![Page 6: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/6.jpg)
Kleine schermen: indelen van contentOne window drilldown
Extras on demand
Uit: http://designinginterfaces.com/
![Page 7: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/7.jpg)
Kleine schermen: navigeren
Hub and spoke
Pyramid
Uit: http://designinginterfaces.com/
![Page 8: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/8.jpg)
Kleine schermen: page layout (pagination)
Card stack
Closable panels
Uit: http://designinginterfaces.com/
![Page 9: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/9.jpg)
Kleine schermen: page layout (pagination)
Slide to scroll
Fling to scroll
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 10: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/10.jpg)
Kleine schermen: page layout (pagination)
Spin to scroll
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 11: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/11.jpg)
Kleine schermen: informatie presenteren
Local zooming
New-item row
Uit: http://designinginterfaces.com/
![Page 12: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/12.jpg)
Kleine schermen: informatie presenteren
Pinch to shrink and spread to enlarge
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 13: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/13.jpg)
Kleine schermen: informatie presenteren
Rotate to change state
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 14: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/14.jpg)
Moeizame (tekst)invoer
Autocompletion
*Uit: http://designinginterfaces.com/
![Page 15: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/15.jpg)
Moeizame (tekst)invoer
Illustrated choices
*Uit: http://designinginterfaces.com/
![Page 16: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/16.jpg)
Moeizame (tekst)invoer
Tap to open/activate
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 17: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/17.jpg)
Moeizame (tekst)invoer
Point to select/activate
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 18: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/18.jpg)
Moeizame (tekst)invoer
Tap to select
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 19: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/19.jpg)
Moeizame (tekst)invoer
Drag to move object
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 20: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/20.jpg)
Moeizame (tekst)invoer
Proximity activates/deactivates
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 21: Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.fdocuments.net/reader035/viewer/2022081413/54879a46b4af9f5f388b5e9a/html5/thumbnails/21.jpg)
Moeizame (tekst)invoer
Shake to change
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.