Interaction Design 402 Vragen of feedback? @ferrydendopper
Design Patterns
Interaction Design 402 Vragen of feedback? @ferrydendopper
Wat is intuïtief?
Intuïtief=
Bekend
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.
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
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
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
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
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
Interaction Design 402 Vragen of feedback? @ferrydendopper
Visuele hiërarchie
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)
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
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
”
“
Interaction Design 402 Vragen of feedback? @ferrydendopper
<figure> <name> what use when why how examples
Pattern language
Interaction Design 402 Vragen of feedback? @ferrydendopper
Voorbeeld: Sitemap Footer (Tidwell)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Fat Menu
Interaction Design 402 Vragen of feedback? @ferrydendopper
Collapsible Panel
Interaction Design 402 Vragen of feedback? @ferrydendopper
Row Striping
Interaction Design 402 Vragen of feedback? @ferrydendopper
Pagination
Interaction Design 402 Vragen of feedback? @ferrydendopper
Forgiving Format
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
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…
Interaction Design 402 Vragen of feedback? @ferrydendopper
Nog meer design patterns
http://www.designingsocialinterfaces.com/http://searchpatterns.org/
Interaction Design 402 Vragen of feedback? @ferrydendopper
Andere veelgebruikte collecties (internet)
Welie.com
Yahoo patterns library
Quince
UI Patterns
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
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
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)
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
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)
Interaction Design 402 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper