CMD Interaction Design - Y2 Q1 les 1 - Design Patterns

of 28 /28

Embed Size (px)

Transcript of CMD Interaction Design - Y2 Q1 les 1 - Design Patterns

User Centered Design

Design Patterns Interaction Design 201Vragen of feedback? @ferrydendopperInteraction Design 201Vragen of feedback? @ferrydendopperTHERE IS A WORLD TO EXPLORE1

Wat is intutief?Intutief=BekendInteraction Design 201Vragen of feedback? @ferrydendopper2Wat bedoelen we eigenlijk als we zeggen dat het gebruik van een interface intutief is? Vraag aan de klas wat zij denken dat intuitief is.

Intutief = bekendGedragspatronen van gebruikersTeneinde 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 201Vragen of feedback? @ferrydendopper3

Voorbeelden van gedragspatronenInstant gratificationIk wil nu iets volbrengen, niet later.HabituationDat werkt overal, waarom hier niet?Spatial memoryIk weet zeker dat daar net nog een knop zat. Waar is-ie nu?Jenifer TidwellInteraction Design 201Vragen of feedback? @ferrydendopper4Dit zijn gedragspatronen van mensen. Patronen die je gebruikers dus zullen volgen in meer of mindere mate. Wat betekenen ze voor interactie ontwerpers? Vraag dit de klas! Lees hoofdstuk 1 van Tidwell. Patronen in interfacesVoorbeelden die zich in de praktijk hebben bewezen

Niet opnieuw het wiel uitvinden: efficintere werkwijzeVerbetert kwaliteit van het interactie ontwerp Faciliteert communicatie tussen ontwerper en programmeurHelpt bij het leren ontwerpen

Interaction Design 201Vragen of feedback? @ferrydendopperDe redenen waarom deze module in het IAD programma zit. Het helpt 5Niveaus van patronen (Cooper)Postural patternsPatronen op conceptueel niveau, oplossingen voor de basishouding van het interface

Sovereign postureTransient postureInteraction Design 201Vragen of feedback? @ferrydendopperNiveaus van patronen (Cooper)Structural patternsPatronen die oplossingen bieden voor het structureren van informatie en functionaliteit

Bijvoorbeeld de 3 vlakken interface-structuur van Outlook

OrganizerOverviewDetailInteraction Design 201Vragen of feedback? @ferrydendopper

Niveaus van patronen (Cooper)Behavioral patternsPatronen die oplossingen bieden voor de specifieke interactie met de functionaliteit of interface-elementen

Interaction Design 201Vragen of feedback? @ferrydendopperVisuele hirarchie

Interaction Design 201Vragen of feedback? @ferrydendopperGestalt principesSommige lay-out eigenschappen zitten ingebakken in onze visuele systemen:ProximitySimilarityContinuityClosure

Individueel zijn ze belangrijk, maar de principes kunnen het best in combinatie gebruikt worden (zie het vijfde plaatje)

Interaction Design 201Vragen of feedback? @ferrydendopperGeen plug & playPatterns arent off-the-shelf components; each implementation of a pattern differs a little from every other.Jenifer TidwellDesigning InterfacesInteraction Design 201Vragen of feedback? @ferrydendopperBuilding 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 CooperAbout FaceInteraction Design 201Vragen of feedback? @ferrydendopper

whatuse whenwhyhowexamplesPattern languageInteraction Design 201Vragen of feedback? @ferrydendopperNet als recepten zijn patronen worden meestal op dezelfde manier opgeschreven.

Het begint altijd met een afbeelding van de toepassing van het pattern

Een duidelijke, beschrijvende naam

What: een algemene omschrijving van het pattern. Wat is het?Use when: algemene omschrijving van de praktijk, de situaties waarin het pattern wordt toegepast. Wanneer pas je het toe?Why: een analyse van de achterliggende redenen waarom het pattern in die situaties succesvol wordt toegepast. De rationale. Waarom pas je het toe?How: wat je moet doen om het op een goede manier toe te passen, randvoorwaarden die er bij komen kijken, etc. Hoe pas je het toe?Examples: meerdere voorbeelden van verschillende toepassingen van hetzelfde pattern. Inspiratie!13Voorbeeld: Sitemap Footer (Tidwell)

Interaction Design 201Vragen of feedback? @ferrydendopper

Fat Menu

Interaction Design 201Vragen of feedback? @ferrydendopperCollapsible Panel

Interaction Design 201Vragen of feedback? @ferrydendopperRow Striping

Interaction Design 201Vragen of feedback? @ferrydendopperPagination

Interaction Design 201Vragen of feedback? @ferrydendopperForgiving Format

Interaction Design 201Vragen of feedback? @ferrydendopperPatterncollectie: Designing Interfaces Plaatjesboekmet 94 patterns

Organizing contentNavigationPage layoutListsActions and commandsInformation graphicsForms and controlsSocial mediaMobileVisual style and aesthetics

Interaction Design 201Vragen of feedback? @ferrydendopperBenadruk dat het geen leesboek, maar vooral een plaatjesboek is, waar je tijdens het ontwerpen doorheen moet bladeren. 20Patterncollectie: Designing Web Interfaces 75+ Rich Web Interaction Patterns

In-Page EditingDrag and dropDirect SelectionOverlays & InlaysVirtual PagesInvitationsTransitionsFeedbackEn meer

Interaction Design 201Vragen of feedback? @ferrydendopperBenadruk dat het geen leesboek, maar vooral een plaatjesboek is, waar je tijdens het ontwerpen doorheen moet bladeren. 21Nog meer design patternshttp://www.designingsocialinterfaces.com/

http://searchpatterns.org/Interaction Design 201Vragen of feedback? @ferrydendopperDit jaar verschenen boeken, twee nieuwe pattern collecties22Andere veelgebruikte collecties (internet)Welie.com

Yahoo patterns library

Quince

UI PatternsInteraction Design 201Vragen of feedback? @ferrydendopperTentamenstofDesigning Interfaces2nd editionJenifer TidwellUser Behavior:Behavior Patterns (p8-23)

Navigation:Escape HatchFat MenuSitemap FooterSign-in ToolsSequence MapBreadcrumbs

Layout of Page Elements:Basis- & Gestalt-principlesAccordionCollapsible PanelsResponsive Disclosure

Lists of Things:CarouselPaginationProminent Done buttonSortable Table

Controls:Basic Controls (p344-355)Input HintsInput PromptAutocompletionSame Page Error Messages

Interaction Design 201Vragen of feedback? @ferrydendopperMini-opdracht: Patterns herkennenWerk in duosKies allebei een favoriete website of web app uitProbeer zoveel mogelijk design patterns te identificeren.Schets iedere pattern op een vel papierGebruik Welie.com als referentie(omdat jullie het boek van Tidwell vast nog niet hebben)

Interaction Design 201Vragen of feedback? @ferrydendopper25Module-opdracht: Ontwerp met patternsOntwerp een online persoonlijk adressenboek(individuele opdracht)

Sorteerbaar overzicht met minimaal voornaam, achternaam woonplaats en telefoonPer record: naw, relatie en kinderen, tel+e-mail, verjaardag, notitieIndelen personen in kringen (bv. familie, vrienden, zakelijk)Indelen personen in mailinggroepen in (bv. kerstkaart, verhuiskaart, verjaardag uitnodiging)Exporteren van adresselectiesZoeken naar personenLijstje met komende verjaardagen

Interaction Design 201Vragen of feedback? @ferrydendopper26Module-opdracht: Ontwerp met patternsWat lever je op?Wireframes + annotatiesOverzicht en uitwerking van gebruikte design patternsBeknopt procesverslagFotos 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 5)Procesverslag: stuur iedere week een update

Interaction Design 201Vragen of feedback? @ferrydendopper27Vragen? [email protected]

@ferrydendopper

Interaction Design 201Vragen of feedback? @ferrydendopper28