1011q1 design for mobile les 3 patterns for mobile

  • 592 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
592
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Design for mobile
    Les 3: mobile patterns
  • 2. 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)
  • 3. Bronnenvoor mobile patterns
    Tidwell, Jenifer. (2006). Designing Interfaces: Patterns for Effective Interaction Design. O`Reilly Media.
    Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices. Sebastopol, CA: O’Reilly & Associates, Inc.
    Nielsen, Jakob (2009). Mobile Usability. http://www.useit.com/alertbox/mobile-usability.html
  • 4. Bronnenvoor mobile patterns
    Internet:
    http://designinginterfaces.com/
    http://www.welie.com/patterns/index.php
    http://developer.yahoo.com/ypatterns/
    http://patterns.design4mobile.com/
  • 5. Interactieknelpunten
    De belangrijksteknelpuntenvoorgebruikers van mobiele websites:*
    Kleineschermen
    Moeizame (tekst)invoer
    Trageverbindingen
    Interactieontworpenvoorreguliere browsers
    Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten
    *Uit: http://www.useit.com/alertbox/mobile-usability.html
  • 6. Interactieknelpunten
    De belangrijksteknelpuntenvoorgebruikers van mobiele websites:*
    Kleineschermen
    Moeizame (tekst)invoer
    Trageverbindingen
    Interactieontworpenvoorreguliere browsers
    Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten
    *Uit: http://www.useit.com/alertbox/mobile-usability.html
  • 7. Kleineschermen: indelen van content
    One window drilldown
    Extras on demand
    Uit: http://designinginterfaces.com/
  • 8. Kleineschermen: navigeren
    Hub and spoke
    Pyramid
    Uit: http://designinginterfaces.com/
  • 9. Kleineschermen: page layout (pagination)
    Card stack
    Closable panels
    Uit: http://designinginterfaces.com/
  • 10. Kleineschermen: page layout (pagination)
    Slide to scroll
    Fling to scroll
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 11. Kleineschermen: informatiepresenteren
    Local zooming
    New-item row
    Uit: http://designinginterfaces.com/
  • 12. Kleineschermen: informatiepresenteren
    Pinch to shrink and spread to enlarge
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 13. Kleineschermen: informatiepresenteren
    Rotate to change state
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 14. Interactieknelpunten
    De belangrijksteknelpuntenvoorgebruikers van mobiele websites:*
    Kleineschermen
    Moeizame (tekst)invoer
    Trageverbindingen
    Interactieontworpenvoorreguliere browsers
    Mobile patterns zullendusvooraloplossingenmoetenbiedenvoordezeknelpunten
    *Uit: http://www.useit.com/alertbox/mobile-usability.html
  • 15. Moeizame (tekst)invoer
    Autocompletion
    *Uit: http://designinginterfaces.com/
  • 16. Moeizame (tekst)invoer
    Illustrated choices
    *Uit: http://designinginterfaces.com/
  • 17. Moeizame (tekst)invoer
    Tap to open/activate
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 18. Moeizame (tekst)invoer
    Tap to select
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 19. Moeizame (tekst)invoer
    Drag to move object
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 20. Moeizame (tekst)invoer
    Proximity activates/deactivates
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 21. Moeizame (tekst)invoer
    Shake to change
    Uit: Saffer, Dan. (2009). Designing Gestural Interfaces: Touchscreens and Interactive Devices.
  • 22. Moeizame (tekst)invoer
    Maarals je kijktnaar de hoeveelheidtekst die elke dag op mobieltjeswordtgeproduceerd (cijfersuit VS*):
    • 4,1 miljardsmsjes per dag
    • 23. 1 op 3 tienersverzendtmeerdan 100 smsjes per dag, zo’n 3000 smsjes per maand
    • 24. Zo’n 72% volwassenenverstuurtregelmatigeensms
    • 25. 54% tienerssmstdagelijks
    • 26. 61% van de smartphonegebruikersstuurt en/of ontvangtdagelijkssmsjes
    Hoe moeilijkkan de invoer van tekst op mobieldanzijn???
    * http://www.lukew.com/ff/entry.asp?1187/