Interaction design 2 zomer (IAD2 0910Q4)

Het toepassen van patronen in interactie

Wat is intuïtief?

Intuïtief = bekend

Gedragspatronen 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.

Voorbeelden van gedragspatronen (Tidwell)

‘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?”

Ontwerpen met ‘pattern language’Christopher Alexander

ontwikkelde een ‘pattern language’ voor architectuur

Ontwerpen met patronen op verschillende hierarchische niveaus (regio, stad, wijk, straat, huis)

Ontwerpen met patronenEerst in software ontwikkeling en

later ook in interactie ontwerp worden op eenzelfde manier patronen toegepast

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

Niveaus van patronen (Cooper)

1. ‘Postural patterns’Patronen op conceptueel

niveau, oplossingen voor de basishouding van het interface

Bijvoorbeeld: souvereign/transient postures

Niveaus van patronen (Cooper)

2. ‘Structural patterns’Patronen die oplossingen

bieden voor het structureren van informatie en functionaliteit

Bijvoorbeeld de ‘3 vlakken’ interface-structuur van Outlook

Niveaus van patronen (Cooper)

3. ‘Behavioral patterns’ Patronen die oplossingen

bieden voor de specifieke interactie met de functionaliteit of interface elementen

Patterns

<figure>

<name>

what

use when

why

how

examples

Voorbeeld: global navigation (Tidwell)

whatUsing 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 whenYou 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.

whyOn 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.

howFirst, 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.

Patterncollectie: Tidwell (2006) ‘Designing Interfaces’

Plaatjesboek

94 patterns

Information architectureNavigationPage elementsActions and commandsInformation graphicsForms and controlsBuilders and editorsVisual style and aesthetics

Andere veelgebruikte collecties (internet)

Welie.com

Yahoo patterns library

Quince

UI Patterns

About me  ContactAbout me  ContactAbout me  Contact

Nieuwe patterncollecties (boeken)

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

Opdracht: Hyves gadget voor reizigers

Samen met FED

Individuele opdracht

Collectie van Tidwell

Prototype in lesweek 8

http://vakgroep.cmd.hro.nl/iad/iad2_0910q4/