iad 4 - les 1 - design patterns
DESCRIPTION
TRANSCRIPT
![Page 1: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/1.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Design Patterns
![Page 2: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/2.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Wat is intuïtief?
Intuïtief=
Bekend
![Page 3: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/3.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
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.
![Page 4: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/4.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Voorbeelden van gedragspatronen
‘Instant gratification’“Ik wil nu iets volbrengen, niet later.”
‘Habituation’“Dat werkt overal, waarom hier niet?”
‘Spatial memory’“Ik weet zeker dat daar net nog een knop zat. Waar is-ie nu?”
Jenifer Tidwell
![Page 5: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/5.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
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
Faciliteert communicatie tussen ontwerper en programmeur
Helpt bij het leren ontwerpen
![Page 6: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/6.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Niveaus van patronen (Cooper)
1. Postural patternsPatronen op conceptueel niveau, oplossingen voor de basishouding van het interface
Sovereign posture Transient posture
![Page 7: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/7.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Niveaus van patronen (Cooper)
2. Structural patternsPatronen die oplossingen bieden voor het structureren van informatie en functionaliteit
Bijvoorbeeld de ‘3 vlakken’ interface-structuur van Outlook
Organizer
Overview
Detail
![Page 8: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/8.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Niveaus van patronen (Cooper)
3. Behavioral patternsPatronen die oplossingen bieden voor de specifieke interactie met de functionaliteit of interface-elementen
![Page 9: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/9.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Visuele hiërarchie
![Page 10: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/10.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Gestalt principes
Sommige lay-out eigenschappen zitten ingebakken in onze visuele systemen: Proximity Similarity Continuity Closure
Individueel zijn ze belangrijk, maar de principes kunnen het best in combinatie gebruikt worden (zie het vijfde plaatje)
![Page 11: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/11.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Geen plug & play
“Patterns aren’t off-the-shelf components; each implementation of a pattern differs a little from every other.”
Jenifer Tidwell
Designing Interfaces
![Page 12: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/12.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Building up a mental catalog of patterns is one of the most critical aspects of the education of an interaction designer.
… we can collectively advance the interaction idioms we provide to our users,
… we can focus our efforts on solving new problems, rather than reinventing the wheel.
Alan Cooper
About Face
”
“
![Page 13: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/13.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
<figure> <name> what use when why how examples
Pattern language
![Page 14: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/14.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Voorbeeld: Sitemap Footer (Tidwell)
![Page 15: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/15.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Fat Menu
![Page 16: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/16.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Collapsible Panel
![Page 17: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/17.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Row Striping
![Page 18: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/18.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Pagination
![Page 19: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/19.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Forgiving Format
![Page 20: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/20.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Patterncollectie: ‘Designing Interfaces’
Plaatjesboekmet 94 patterns
Organizing content Navigation Page layout Lists Actions and commands Information graphics Forms and controls Social media Mobile Visual style and
aesthetics
![Page 21: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/21.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Patterncollectie: ‘Designing Web Interfaces’
75+ Rich Web Interaction Patterns
In-Page Editing Drag and drop Direct Selection Overlays & Inlays Virtual Pages Invitations Transitions Feedback En meer…
![Page 22: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/22.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Nog meer design patterns
http://www.designingsocialinterfaces.com/http://searchpatterns.org/
![Page 23: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/23.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Andere veelgebruikte collecties (internet)
Welie.com
Yahoo patterns library
Quince
UI Patterns
![Page 24: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/24.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Tentamenstof
Designing Interfaces2nd editionJenifer Tidwell
User Behavior:- Behavior Patterns (p8-
23)
Navigation:- Escape Hatch- Fat Menu- Sitemap Footer- Sign-in Tools- Sequence Map- Breadcrumbs
Layout of Page Elements:- Basis- & Gestalt-
principles- Accordion- Collapsible Panels- Responsive Disclosure
Lists of Things:- Carousel- Pagination- Prominent “Done” button- Sortable Table
Controls:- Basic Controls (p344-355)- Input Hints- Input Prompt- Autocompletion- Same Page Error
Messages
![Page 25: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/25.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Tentamenstof
Designing Web InterfacesBill Scott & Theresa Neil
In-Page Editing:- Single Field Inline Edit- Multi-Field Inline Edit- Overlay Edit- Module Configuration
Drag & Drop- Alles
Direct Manipulation:- Toggle Selection- Collected Selection
Contextual Tools:- Always Visible Tools- Hover-Reveal Tools- Toggle-Reveal Tools
Overlays:- Dialog Overlay
Inlays:- Dialog Inlay- List Inlay (Accordion)
Virtual Pages:- Inline Paging- Scrolled Paging
![Page 26: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/26.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Mini-opdracht: Patterns herkennen
Werk in duo’s Kies allebei een favoriete website of web app
uit Probeer zoveel mogelijk design patterns te
identificeren. Schets iedere pattern op een vel papier Gebruik Welie.com als referentie
(omdat jullie het boek van Tidwell vast nog niet hebben)
![Page 27: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/27.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Module-opdracht: Ontwerp met patterns
Ontwerp een online persoonlijk adressenboek(individuele opdracht)
Sorteerbaar overzicht met minimaal voornaam, achternaam woonplaats en telefoon
Per record: naw, relatie en kinderen, tel+e-mail, verjaardag, notitie
Indelen personen in kringen (bv. familie, vrienden, zakelijk) Indelen personen in mailinggroepen in (bv. kerstkaart,
verhuiskaart, verjaardag uitnodiging) Exporteren van adresselecties Zoeken naar personen Lijstje met komende verjaardagen
![Page 28: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/28.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Module-opdracht: Ontwerp met patterns
Wat lever je op? Wireframes + annotaties Overzicht en uitwerking van gebruikte design patterns Beknopt procesverslag
• Foto’s c.q. screenshots van je ontwerpstappen (iteraties)• Ontwerpkeuzes (onderbouwing van concept en patterns-keuze)• Ontwerpvragen en -dilemma's (bv. waar ben je niet zeker over,
waar heb je moeite mee?)
Wanneer lever je op? Alle deliverables: tijdens laatste college (week 10) Procesverslag: stuur tussentijds updates (advies)
![Page 29: IAD 4 - les 1 - Design Patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c7e99b4a795921328b459a/html5/thumbnails/29.jpg)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper