IAD 4 - les 1 - Design Patterns

Interaction Design 402 Vragen of feedback? @ferrydendopper

Design Patterns


Wat is intuïtief?

Intuïtief=

Bekend


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.


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


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


Niveaus van patronen (Cooper)

1. Postural patternsPatronen op conceptueel niveau, oplossingen voor de basishouding van het interface

Sovereign posture Transient posture



2. Structural patternsPatronen die oplossingen bieden voor het structureren van informatie en functionaliteit

Bijvoorbeeld de ‘3 vlakken’ interface-structuur van Outlook

Organizer

Overview

Detail



3. Behavioral patternsPatronen die oplossingen bieden voor de specifieke interactie met de functionaliteit of interface-elementen


Visuele hiërarchie


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)


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


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

”

“


<figure> <name> what use when why how examples

Pattern language


Voorbeeld: Sitemap Footer (Tidwell)


Fat Menu


Collapsible Panel


Row Striping


Pagination


Forgiving Format


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


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…


Nog meer design patterns

http://www.designingsocialinterfaces.com/http://searchpatterns.org/

http://www.designingsocialinterfaces.com/

http://searchpatterns.org/


Andere veelgebruikte collecties (internet)

Welie.com

Yahoo patterns library

Quince

UI Patterns

http://www.welie.com/

http://developer.yahoo.com/yui/

http://quince.infragistics.com/

http://ui-patterns.com/


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


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


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)


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


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)


Vragen? Feedback?

[email protected]

@ferrydendopper

Date post:	28-Jan-2015
Category:	Design
Upload:	ferry-den-dopper
View:	107 times
Download:	1 times