1. Ontwerpenvoormobiel: mobile patterns Interaction design 2, 2009-2010, kwartaal 1

3. Patterns wordengedocumenteerd in pattern collecties

4. Vele pattern collectiesbevattenook mobile patterns

6. Bronnenvoor mobile patterns Internet: http://designinginterfaces.com/ http://www.welie.com/patterns/index.php http://developer.yahoo.com/ypatterns/ http://patterns.design4mobile.com/

7. Interactieknelpunten De belangrijksteknelpuntenvoorwebgebruikersbijmobieleinteractie:* Kleineschermen Moeizame (tekst)invoer Trageverbindingen Interactieontworpenvoorreguliere browsers Mobile patterns zullendusvooraldezeknelpuntenaanpakken. In deze sheets: patterns betreffende 1 en 2. *Uit: http://www.useit.com/alertbox/mobile-usability.html

8. Kleine schermen

9. Kleineschermen: indelen van content One window drilldown Show each of the application's pages within a single window. As a user drills down through a menu of options, or into an object's details, replace the window contents completely with the new page. Extras on demand Show the most important content up front, but hide the rest. Let the user reach it via a single, simple gesture. *Uit: http://designinginterfaces.com/

10. Kleineschermen: navigeren Hub and spoke 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). Pyramid 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. *Uit: http://designinginterfaces.com/

11. Kleineschermen: page layout (pagination) Card stack Put sections of content onto separate panels or "cards," and stack them up so only one is visible at a time; use tabs or other devices to give users access to them. Closable panels Put sections of content onto separate panels, and let the user open and close each of them separately from the others. *Uit: http://designinginterfaces.com/

12. Kleineschermen: page layout (pagination) Slide to scroll Fling to scroll Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

13. Kleineschermen: page layout (pagination) Spin to scroll Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

14. Kleineschermen: informatiepresenteren Local zooming 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. New-item row Use the last/first row in the table to create a new item in place. *Uit: http://designinginterfaces.com/

15. Kleineschermen: informatiepresenteren Pinch to shrink and spread to enlarge Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

16. Kleineschermen: informatiepresenteren Rotate to change state Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

17. Moeizame (tekst)invoer

18. Moeizame (tekst)invoer Autocompletion As the user types into a text field, anticipate the possible answers and automatically complete the entry when appropriate. Dropdown chooser Extend the concept of a menu by using a dropdown or pop-up panel to contain a more complex value-selection UI. *Uit: http://designinginterfaces.com/

19. Moeizame (tekst)invoer Illustrated choices Use pictures instead of words (or in addition to them) to show available choices. vs *Uit: http://designinginterfaces.com/

20. Moeizame (tekst)invoer Tap to open/activate Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

21. Moeizame (tekst)invoer Point to select/activate Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

22. Moeizame (tekst)invoer Tap to select/activate (continued) Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

23. Moeizame (tekst)invoer Drag to move object Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

24. Moeizame (tekst)invoer Proximity activates/deactivates Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

25. Moeizame (tekst)invoer Shake to change Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

26. Ontwerpenvoormobiel: mobile patterns Interaction design 2, 2009-2010, kwartaal 1