1011q1 design for mobile les 3 patterns for mobile
description
Transcript of 1011q1 design for mobile les 3 patterns for mobile
![Page 1: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/1.jpg)
Design for mobile
Les 3: mobile patterns
![Page 2: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/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: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/3.jpg)
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
![Page 4: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/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: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/5.jpg)
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
![Page 6: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/6.jpg)
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
![Page 7: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/7.jpg)
Kleine schermen: indelen van contentOne window drilldown
Extras on demand
Uit: http://designinginterfaces.com/
![Page 8: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/8.jpg)
Kleine schermen: navigeren
Hub and spoke
Pyramid
Uit: http://designinginterfaces.com/
![Page 9: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/9.jpg)
Kleine schermen: page layout (pagination)
Card stack
Closable panels
Uit: http://designinginterfaces.com/
![Page 10: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/10.jpg)
Kleine schermen: page layout (pagination)
Slide to scroll
Fling to scroll
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 11: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/11.jpg)
Kleine schermen: informatie presenteren
Local zooming
New-item row
Uit: http://designinginterfaces.com/
![Page 12: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/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: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/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: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/14.jpg)
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
![Page 15: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/15.jpg)
Moeizame (tekst)invoer
Autocompletion
*Uit: http://designinginterfaces.com/
![Page 16: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/16.jpg)
Moeizame (tekst)invoer
Illustrated choices
*Uit: http://designinginterfaces.com/
![Page 17: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/17.jpg)
Moeizame (tekst)invoer
Tap to open/activate
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 18: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/18.jpg)
Moeizame (tekst)invoer
Tap to select
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 19: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/19.jpg)
Moeizame (tekst)invoer
Drag to move object
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 20: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/20.jpg)
Moeizame (tekst)invoer
Proximity activates/deactivates
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 21: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/21.jpg)
Moeizame (tekst)invoer
Shake to change
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 22: 1011q1 design for mobile les 3 patterns for mobile](https://reader033.fdocuments.net/reader033/viewer/2022061300/548d44f6b47959d30c8b656f/html5/thumbnails/22.jpg)
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/