Ontwerpenvoormobiel: mobile patterns<br />Interaction design 2, 2009-2010, kwartaal 1<br />
Interaction design patterns<br /><ul><li>Patterns zijnontwerpoplossingen die zichbewezenhebben
Patterns wordengedocumenteerd in pattern collecties
Vele pattern collectiesbevattenook mobile patterns
Vele patterns zijnooktoepasbaar op het mobiele platform (maarsommigejuistookweerniet)</li></li></ul><li>Bronnenvoor mobile...
Bronnenvoor mobile patterns<br />Internet:<br />http://designinginterfaces.com/<br />http://www.welie.com/patterns/index.p...
Interactieknelpunten<br />De belangrijksteknelpuntenvoorwebgebruikersbijmobieleinteractie:*<br />Kleineschermen<br />Moeiz...
Kleine schermen<br />
Kleineschermen: indelen van content<br />One window drilldown<br />Show each of the application&apos;s pages within a sing...
Kleineschermen: navigeren<br />Hub and spoke<br />Isolate the sections of the app into mini-applications, each with one wa...
Kleineschermen: page layout (pagination)<br />Card stack<br />Put sections of content onto separate panels or &quot;cards,...
Kleineschermen: page layout (pagination)<br />					Slide to scroll<br />Fling to scroll<br />Uit: Saffer, Dan. (2009). Des...
Kleineschermen: page layout (pagination)<br />Spin to scroll<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces:...
Kleineschermen: informatiepresenteren<br />Local zooming<br />Show all the data in a single dense page, with small-scale d...
Kleineschermen: informatiepresenteren<br />Pinch to shrink and spread to enlarge<br />Uit: Saffer, D. (2009). Designing Ge...
Kleineschermen: informatiepresenteren<br />Rotate to change state<br />Uit: Saffer, D. (2009). Designing Gestural Interfac...
Moeizame (tekst)invoer<br />
Moeizame (tekst)invoer<br />Autocompletion<br />As the user types into a text field, anticipate the possible answers and a...
Moeizame (tekst)invoer<br />Illustrated choices<br />Use pictures instead of words (or in addition to them) to show availa...
Moeizame (tekst)invoer<br />Tap to open/activate<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens ...
Moeizame (tekst)invoer<br />Point to select/activate<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscre...
Moeizame (tekst)invoer<br />Tap to select/activate (continued)<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces:...
Moeizame (tekst)invoer<br />Drag to move object<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens a...
Moeizame (tekst)invoer<br />Proximity activates/deactivates<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: To...
Upcoming SlideShare
Loading in...5
×

Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile

593

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
593
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile

  1. 1. Ontwerpenvoormobiel: mobile patterns<br />Interaction design 2, 2009-2010, kwartaal 1<br />
  2. 2. Interaction design patterns<br /><ul><li>Patterns zijnontwerpoplossingen die zichbewezenhebben
  3. 3. Patterns wordengedocumenteerd in pattern collecties
  4. 4. Vele pattern collectiesbevattenook mobile patterns
  5. 5. Vele patterns zijnooktoepasbaar op het mobiele platform (maarsommigejuistookweerniet)</li></li></ul><li>Bronnenvoor mobile patterns<br />Boeken:<br />Tidwell, Jenifer. (2006). Designing Interfaces: Patterns for Effective Interaction Design. O`Reilly Media. <br />Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices. Sebastopol, CA: O’Reilly & Associates, Inc. <br />
  6. 6. 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 />
  7. 7. Interactieknelpunten<br />De belangrijksteknelpuntenvoorwebgebruikersbijmobieleinteractie:*<br />Kleineschermen<br />Moeizame (tekst)invoer<br />Trageverbindingen<br />Interactieontworpenvoorreguliere browsers<br />Mobile patterns zullendusvooraldezeknelpuntenaanpakken. In deze sheets: patterns betreffende 1 en 2.<br />*Uit: http://www.useit.com/alertbox/mobile-usability.html<br />
  8. 8. Kleine schermen<br />
  9. 9. Kleineschermen: indelen van content<br />One window drilldown<br />Show each of the application&apos;s pages within a single window. As a user drills down through a menu of options, or into an object&apos;s details, replace the window contents completely with the new page.<br />Extras on demand<br />Show the most important content up front, but hide the rest. Let the user reach it via a single, simple gesture.<br />*Uit: http://designinginterfaces.com/<br />
  10. 10. Kleineschermen: navigeren<br />Hub and spoke<br />Isolate the sections of the app into mini-applications, each with one way in (from the main page) and one way out (back to the main page).<br />Pyramid<br />Link a sequence of pages with Back/Next links. Combine this sequential presentation with a main page that links to and from all pages in the sequence.<br />*Uit: http://designinginterfaces.com/<br />
  11. 11. Kleineschermen: page layout (pagination)<br />Card stack<br />Put sections of content onto separate panels or &quot;cards,&quot; and stack them up so only one is visible at a time; use tabs or other devices to give users access to them.<br />Closable panels<br />Put sections of content onto separate panels, and let the user open and close each of them separately from the others.<br />*Uit: http://designinginterfaces.com/<br />
  12. 12. 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 />
  13. 13. Kleineschermen: page layout (pagination)<br />Spin to scroll<br />Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  14. 14. Kleineschermen: informatiepresenteren<br />Local zooming<br />Show all the data in a single dense page, with small-scale data items. Wherever the mouse goes, distort the page to make those data items large and readable.<br />New-item row<br />Use the last/first row in the table to create a new item in place.<br />*Uit: http://designinginterfaces.com/<br />
  15. 15. Kleineschermen: informatiepresenteren<br />Pinch to shrink and spread to enlarge<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  16. 16. Kleineschermen: informatiepresenteren<br />Rotate to change state<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  17. 17. Moeizame (tekst)invoer<br />
  18. 18. Moeizame (tekst)invoer<br />Autocompletion<br />As the user types into a text field, anticipate the possible answers and automatically complete the entry when appropriate.<br />Dropdown chooser<br />Extend the concept of a menu by using a dropdown or pop-up panel to contain a more complex value-selection UI.<br />*Uit: http://designinginterfaces.com/<br />
  19. 19. Moeizame (tekst)invoer<br />Illustrated choices<br />Use pictures instead of words (or in addition to them) to show available choices.<br />vs<br />*Uit: http://designinginterfaces.com/<br />
  20. 20. Moeizame (tekst)invoer<br />Tap to open/activate<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  21. 21. Moeizame (tekst)invoer<br />Point to select/activate<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  22. 22. Moeizame (tekst)invoer<br />Tap to select/activate (continued)<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  23. 23. Moeizame (tekst)invoer<br />Drag to move object<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  24. 24. Moeizame (tekst)invoer<br />Proximity activates/deactivates<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  25. 25. Moeizame (tekst)invoer<br />Shake to change<br />Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.<br />
  26. 26. Ontwerpenvoormobiel: mobile patterns<br />Interaction design 2, 2009-2010, kwartaal 1<br />
  1. A particular slide catching your eye?

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

×