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

Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile

on

  • 981 views

 

Statistics

Views

Total Views
981
Views on SlideShare
757
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 Versie 3 Nv Iad2 0910 Q1 Les 4 Patterns For Mobile Presentation Transcript

    • Ontwerpenvoormobiel: mobile patterns
      Interaction design 2, 2009-2010, kwartaal 1
    • Interaction design patterns
      • Patterns zijnontwerpoplossingen die zichbewezenhebben
      • Patterns wordengedocumenteerd in pattern collecties
      • Vele pattern collectiesbevattenook mobile patterns
      • 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.
    • Bronnenvoor mobile patterns
      Internet:
      http://designinginterfaces.com/
      http://www.welie.com/patterns/index.php
      http://developer.yahoo.com/ypatterns/
      http://patterns.design4mobile.com/
    • 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
    • Kleine schermen
    • 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/
    • 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/
    • 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/
    • Kleineschermen: page layout (pagination)
      Slide to scroll
      Fling to scroll
      Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Kleineschermen: page layout (pagination)
      Spin to scroll
      Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • 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/
    • Kleineschermen: informatiepresenteren
      Pinch to shrink and spread to enlarge
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Kleineschermen: informatiepresenteren
      Rotate to change state
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Moeizame (tekst)invoer
    • 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/
    • Moeizame (tekst)invoer
      Illustrated choices
      Use pictures instead of words (or in addition to them) to show available choices.
      vs
      *Uit: http://designinginterfaces.com/
    • Moeizame (tekst)invoer
      Tap to open/activate
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Moeizame (tekst)invoer
      Point to select/activate
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Moeizame (tekst)invoer
      Tap to select/activate (continued)
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Moeizame (tekst)invoer
      Drag to move object
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Moeizame (tekst)invoer
      Proximity activates/deactivates
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Moeizame (tekst)invoer
      Shake to change
      Uit: Saffer, D. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
    • Ontwerpenvoormobiel: mobile patterns
      Interaction design 2, 2009-2010, kwartaal 1