Versie 3 Nv  Iad2 0910 Q1 Les 4 Patterns For Mobile
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile

on

  • 1,008 views

 

Statistics

Views

Total Views
1,008
Views on SlideShare
784
Embed Views
224

Actions

Likes
0
Downloads
7
Comments
0

2 Embeds 224

http://vakgroep.cmd.hro.nl 223
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile Presentation Transcript

  • 1. Ontwerpenvoormobiel: mobile patterns
    Interaction design 2, 2009-2010, kwartaal 1
  • 2. Interaction design patterns
    • Patterns zijnontwerpoplossingen die zichbewezenhebben
    • 3. Patterns wordengedocumenteerd in pattern collecties
    • 4. Vele pattern collectiesbevattenook mobile patterns
    • 5. Vele patterns zijnooktoepasbaar op het mobiele platform (maarsommigejuistookweerniet)
  • Bronnenvoor 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.
  • 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