versie 3 nv iad2 0910 q1 les 4 patterns for mobile

Ontwerpen voor mobiel: mobile patterns

Interaction design 2, 2009-2010, kwartaal 1

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)

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.

Bronnen voor mobile patterns

Internet:http://designinginterfaces.com/http://www.welie.com/patterns/index.phphttp://developer.yahoo.com/ypatterns/http://patterns.design4mobile.com/

http://designinginterfaces.com/

http://www.welie.com/patterns/index.php

http://developer.yahoo.com/ypatterns/

http://patterns.design4mobile.com/

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

http://www.useit.com/alertbox/mobile-usability.html

Kleine schermen

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/


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.



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.




Slide to scroll

Fling to scroll

Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.


Spin to scroll

Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.

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.




Pinch to shrink and spread to enlarge

Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.


Rotate to change state


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.




Illustrated choicesUse pictures instead of words (or

in addition to them) to show available choices.


vs



Tap to open/activate



Point to select/activate



Tap to select/activate (continued)



Drag to move object



Proximity activates/deactivates



Shake to change


Ontwerpen voor mobiel: mobile patterns

Interaction design 2, 2009-2010, kwartaal 1

versie 3 nv iad2 0910 q1 les 4 patterns for mobile

Documents