Iad2 0910 q4 les 1 ontwerpen met patronen

  • 690 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
No Downloads

Views

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

Actions

Shares
Downloads
22
Comments
0
Likes
1

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. Interaction design 2 zomer (IAD2 0910Q4)
    Het toepassen van patronen in interactie
  • 2. Wat is intuïtief?
    Intuïtief = bekend
  • 3. Gedragspatronen van gebruikers
    Teneinde hun doel te bereiken, gedragen mensen zich op een voorspelbare manier, bepaalde patronen volgend.
    Bijvoorbeeld gerelateerd aan hun ‘expert level’.
    Door observatie en analyse zal je deze patronen als ontwerper moeten onderkennen.
  • 4. Voorbeelden van gedragspatronen (Tidwell)
    ‘Instant gratification’
    “Ik wil nu iets volbrengen, niet later.”
    ‘Habituation’
    “Dat werkt overal, waarom hier niet?”
    ‘Spatialmemory’
    “Ik weet zeker dat daar net nog een knop zat. Waar is-ie nu?”
  • 5. Ontwerpen met ‘patternlanguage’
    Christopher Alexander ontwikkelde een ‘patternlanguage’ voor architectuur
    Ontwerpen met patronen op verschillende hierarchische niveaus (regio, stad, wijk, straat, huis)
  • 6. Ontwerpen met patronen
    Eerst in software ontwikkeling en later ook in interactie ontwerp worden op eenzelfde manier patronen toegepast
  • 7. Patronen in interfaces
    Voorbeelden die zich in de praktijk hebben bewezen
    Niet opnieuw het wiel uitvinden: efficiëntere werkwijze
    Verbetert kwaliteit van het interactie ontwerp
    Helpt bij het leren ontwerpen
  • 8. Niveaus van patronen (Cooper)
    ‘Posturalpatterns’
    Patronen op conceptueel niveau, oplossingen voor de basishouding van het interface
    Bijvoorbeeld: souvereign/transientpostures
  • 9. Niveaus van patronen (Cooper)
    ‘Structuralpatterns’
    Patronen die oplossingen bieden voor het structureren van informatie en functionaliteit
    Bijvoorbeeld de ‘3 vlakken’ interface-structuurvan Outlook
  • 10. Niveaus van patronen (Cooper)
    ‘Behavioralpatterns’
    Patronen die oplossingen bieden voor de specifieke interactie met de functionaliteit of interface elementen
  • 11. Patterns
    <figure>
    <name>
    what
    use when
    why
    how
    examples
  • 12. Voorbeeld: global navigation (Tidwell)
    what
    Using a small section of every page, show a consistent set of links or buttons that take the user to key sections of the site or application.
    use when
    You build a large web site, or an application with several separate sections or tools.
    In either case, users are likely to want to move directly from one section to another. You have plenty of space to work with, and you don't mind having extra elements on each page.
    why
    On the Web, a global navigation bar is a well-established convention, so users expect it there. More importantly, though, a set of links or buttons that reflects the UI's highest order structure makes that structure visible to users from every page. It gives them an overview of the UI and helps them find what they need in it (if the naming scheme makes sense, anyway).
    It also facilitates exploration and easy movement by putting each section only one click away from anyplace else.
    You can add to the utility of a global navigation panel by making it show what section the user is currently in, like tabs do. Thus it becomes a "You are here" signpost as well as a navigational device.
    how
    First, devise a sensible organizational structure. Keep the number of sections down to something you can display in the available space, and name the sections well—make them meaningful to the user, don't use too many words, and follow whatever conventions are appropriate (such as "About Us" or "Products").
    As for the global navigation panel, design a single panel that looks the same—and goes into the same place—on each page where it appears. On the Web, that should be every page (with the notable exception of applications using a Hub and Spoke structure). A desktop UI has far fewer conventional uses of such a thing, but it should probably go into every major application window (not every dialog box). A good global navigation panel is one component of a well-designed Visual Framework (see Chapter 4).
    To show where the user is now, simply make the link for the current section look different from the others. Use a contrasting color, perhaps, or an unobtrusive graphic like an arrow.
  • 13. Patterncollectie: Tidwell (2006) ‘Designing Interfaces’
    Plaatjesboek
    94 patterns
    Information architecture
    Navigation
    Page elements
    Actions and commands
    Information graphics
    Forms and controls
    Builders and editors
    Visual style and aesthetics
  • 14. Andereveelgebruiktecollecties (internet)
    Welie.com
    Yahoo patterns library
    Quince
    UI Patterns
    About me  Contact
    About me  Contact
    About me  Contact
  • 15. Nieuwepatterncollecties (boeken)
    http://searchpatterns.org/
    http://www.designingsocialinterfaces.com/
  • 16. Opdracht: Hyves gadget voorreizigers
    Samen met FED
    Individueleopdracht
    Collectie van Tidwell
    Prototype in lesweek 8
    http://vakgroep.cmd.hro.nl/iad/iad2_0910q4/