versie 3 nv iad2 0910 q1 les 4 patterns for mobile
DESCRIPTION
TRANSCRIPT
![Page 1: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/1.jpg)
Ontwerpen voor mobiel: mobile patterns
Interaction design 2, 2009-2010, kwartaal 1
![Page 2: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/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: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/3.jpg)
Bronnen voor mobile patterns
Boeken:Tidwell, Jenifer. (2006). Designing Interfaces: Patterns for Effective
Interaction Design. O`Reilly Media. Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and
Interactive Devices. Sebastopol, CA: O’Reilly & Associates, Inc.
![Page 4: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/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: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/5.jpg)
Interactie knelpunten
De belangrijkste knelpunten voor webgebruikers bij mobiele interactie:*1. Kleine schermen2. Moeizame (tekst)invoer3. Trage verbindingen4. Interactie ontworpen voor reguliere browsers
Mobile patterns zullen dus vooral deze knelpunten aanpakken. In deze sheets: patterns betreffende 1 en 2.
*Uit: http://www.useit.com/alertbox/mobile-usability.html
![Page 6: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/6.jpg)
Kleine schermen
![Page 7: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/7.jpg)
Kleine schermen: indelen van content
One window drilldownShow 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 demandShow the most important content up
front, but hide the rest. Let the user reach it via a single, simple gesture.
*Uit: http://designinginterfaces.com/
![Page 8: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/8.jpg)
Kleine schermen: navigerenHub and spokeIsolate 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).
PyramidLink 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/
![Page 9: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/9.jpg)
Kleine schermen: page layout (pagination)
Card stackPut 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 panelsPut sections of content onto separate
panels, and let the user open and close each of them separately from the others.
*Uit: http://designinginterfaces.com/
![Page 10: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/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: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/11.jpg)
Kleine schermen: page layout (pagination)
Spin to scroll
Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 12: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/12.jpg)
Kleine schermen: informatie presenteren
Local zoomingShow 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 rowUse the last/first row in the table to
create a new item in place.
*Uit: http://designinginterfaces.com/
![Page 13: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/13.jpg)
Kleine schermen: informatie presenteren
Pinch to shrink and spread to enlarge
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 14: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/14.jpg)
Kleine schermen: informatie presenteren
Rotate to change state
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 15: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/15.jpg)
Moeizame (tekst)invoer
![Page 16: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/16.jpg)
Moeizame (tekst)invoer
AutocompletionAs the user types into a text field, anticipate
the possible answers and automatically complete the entry when appropriate.
Dropdown chooserExtend 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/
![Page 17: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/17.jpg)
Moeizame (tekst)invoer
Illustrated choicesUse pictures instead of words (or
in addition to them) to show available choices.
*Uit: http://designinginterfaces.com/
vs
![Page 18: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/18.jpg)
Moeizame (tekst)invoer
Tap to open/activate
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 19: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/19.jpg)
Moeizame (tekst)invoer
Point to select/activate
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 20: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/20.jpg)
Moeizame (tekst)invoer
Tap to select/activate (continued)
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 21: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/21.jpg)
Moeizame (tekst)invoer
Drag to move object
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 22: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/22.jpg)
Moeizame (tekst)invoer
Proximity activates/deactivates
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 23: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/23.jpg)
Moeizame (tekst)invoer
Shake to change
Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
![Page 24: Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile](https://reader035.vdocuments.us/reader035/viewer/2022062617/54c2f1144a795909638b4583/html5/thumbnails/24.jpg)
Ontwerpen voor mobiel: mobile patterns
Interaction design 2, 2009-2010, kwartaal 1