Design for mobile<br />Les 3: mobile patterns<br />
Interaction design patterns<br />Patterns zijnontwerpoplossingen die zichbewezenhebben<br />Patterns wordengedocumenteerd ...
Bronnenvoor mobile patterns<br />Tidwell, Jenifer. (2006). Designing Interfaces: Patterns for Effective Interaction Design...
Bronnenvoor mobile patterns<br />Internet:<br />http://designinginterfaces.com/<br />http://www.welie.com/patterns/index.p...
Interactieknelpunten<br />De belangrijksteknelpuntenvoorgebruikers van mobiele websites:*<br />Kleineschermen<br />Moeizam...
Interactieknelpunten<br />De belangrijksteknelpuntenvoorgebruikers van mobiele websites:* <br />Kleineschermen<br />Moeiza...
Kleineschermen: indelen van content<br />One window drilldown<br />Extras on demand<br />Uit: http://designinginterfaces.c...
Kleineschermen: navigeren<br />Hub and spoke<br />Pyramid<br />Uit: http://designinginterfaces.com/<br />
Kleineschermen: page layout (pagination)<br />Card stack<br />Closable panels<br />Uit: http://designinginterfaces.com/<br />
Kleineschermen: page layout (pagination)<br />Slide to scroll<br />Fling to scroll<br />Uit: Saffer, Dan. (2009). Designin...
Kleineschermen: informatiepresenteren<br />Local zooming<br />New-item row<br />Uit: http://designinginterfaces.com/<br />
Kleineschermen: informatiepresenteren<br />Pinch to shrink and spread to enlarge<br />Uit: Saffer, Dan. (2009). Designing ...
Kleineschermen: informatiepresenteren<br />Rotate to change state<br />Uit: Saffer, Dan. (2009). Designing Gestural Interf...
Interactieknelpunten<br />De belangrijksteknelpuntenvoorgebruikers van mobiele websites:* <br />Kleineschermen<br />Moeiza...
Moeizame (tekst)invoer<br />Autocompletion<br />*Uit: http://designinginterfaces.com/<br />
Moeizame (tekst)invoer<br />Illustrated choices<br />*Uit: http://designinginterfaces.com/<br />
Moeizame (tekst)invoer<br />Tap to open/activate<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreen...
Moeizame (tekst)invoer<br />Tap to select<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and I...
Moeizame (tekst)invoer<br />Drag to move object<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens...
Moeizame (tekst)invoer<br />Proximity activates/deactivates<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: ...
Moeizame (tekst)invoer<br />Shake to change<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and...
Moeizame (tekst)invoer<br />Maarals je kijktnaar de hoeveelheidtekst die elke dag op mobieltjeswordtgeproduceerd (cijfersu...
Upcoming SlideShare
Loading in...5
×

1011q1 design for mobile les 3 patterns for mobile

1,482

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,482
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

1011q1 design for mobile les 3 patterns for mobile

  1. 1. Design for mobile<br />Les 3: mobile patterns<br />
  2. 2. Interaction design patterns<br />Patterns zijnontwerpoplossingen die zichbewezenhebben<br />Patterns wordengedocumenteerd in pattern collecties<br />Vele pattern collectiesbevattenook mobile patterns<br />Vele patterns zijnooktoepasbaar op het mobiele platform (maarsommigejuistookweerniet)<br />
  3. 3. Bronnenvoor mobile patterns<br />Tidwell, Jenifer. (2006). Designing Interfaces: Patterns for Effective Interaction Design. O`Reilly Media. <br />Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices. Sebastopol, CA: O’Reilly & Associates, Inc. <br />Nielsen, Jakob (2009). Mobile Usability. http://www.useit.com/alertbox/mobile-usability.html<br />
  4. 4. Bronnenvoor mobile patterns<br />Internet:<br />http://designinginterfaces.com/<br />http://www.welie.com/patterns/index.php<br />http://developer.yahoo.com/ypatterns/<br />http://patterns.design4mobile.com/<br />
  5. 5. Interactieknelpunten<br />De belangrijksteknelpuntenvoorgebruikers van mobiele websites:*<br />Kleineschermen<br />Moeizame (tekst)invoer<br />Trageverbindingen<br />Interactieontworpenvoorreguliere browsers<br />Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten<br />*Uit: http://www.useit.com/alertbox/mobile-usability.html<br />
  6. 6. Interactieknelpunten<br />De belangrijksteknelpuntenvoorgebruikers van mobiele websites:* <br />Kleineschermen<br />Moeizame (tekst)invoer<br />Trageverbindingen<br />Interactieontworpenvoorreguliere browsers<br />Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten<br />*Uit: http://www.useit.com/alertbox/mobile-usability.html<br />
  7. 7. Kleineschermen: indelen van content<br />One window drilldown<br />Extras on demand<br />Uit: http://designinginterfaces.com/<br />
  8. 8. Kleineschermen: navigeren<br />Hub and spoke<br />Pyramid<br />Uit: http://designinginterfaces.com/<br />
  9. 9. Kleineschermen: page layout (pagination)<br />Card stack<br />Closable panels<br />Uit: http://designinginterfaces.com/<br />
  10. 10. Kleineschermen: page layout (pagination)<br />Slide to scroll<br />Fling to scroll<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  11. 11. Kleineschermen: informatiepresenteren<br />Local zooming<br />New-item row<br />Uit: http://designinginterfaces.com/<br />
  12. 12. Kleineschermen: informatiepresenteren<br />Pinch to shrink and spread to enlarge<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  13. 13. Kleineschermen: informatiepresenteren<br />Rotate to change state<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  14. 14. Interactieknelpunten<br />De belangrijksteknelpuntenvoorgebruikers van mobiele websites:* <br />Kleineschermen<br />Moeizame (tekst)invoer<br />Trageverbindingen<br />Interactieontworpenvoorreguliere browsers<br />Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten<br />*Uit: http://www.useit.com/alertbox/mobile-usability.html<br />
  15. 15. Moeizame (tekst)invoer<br />Autocompletion<br />*Uit: http://designinginterfaces.com/<br />
  16. 16. Moeizame (tekst)invoer<br />Illustrated choices<br />*Uit: http://designinginterfaces.com/<br />
  17. 17. Moeizame (tekst)invoer<br />Tap to open/activate<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  18. 18. Moeizame (tekst)invoer<br />Tap to select<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  19. 19. Moeizame (tekst)invoer<br />Drag to move object<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  20. 20. Moeizame (tekst)invoer<br />Proximity activates/deactivates<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  21. 21. Moeizame (tekst)invoer<br />Shake to change<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  22. 22. Moeizame (tekst)invoer<br />Maarals je kijktnaar de hoeveelheidtekst die elke dag op mobieltjeswordtgeproduceerd (cijfersuit VS*):<br /><ul><li>4,1 miljardsmsjes per dag
  23. 23. 1 op 3 tienersverzendtmeerdan 100 smsjes per dag, zo’n 3000 smsjes per maand
  24. 24. Zo’n 72% volwassenenverstuurtregelmatigeensms
  25. 25. 54% tienerssmstdagelijks
  26. 26. 61% van de smartphonegebruikersstuurt en/of ontvangtdagelijkssmsjes</li></ul>Hoe moeilijkkan de invoer van tekst op mobieldanzijn???<br />* http://www.lukew.com/ff/entry.asp?1187/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×