[Ht] human computer interaction 4

IDM BLOK Eopen data

HT 1 periode 4vak HCI

HUMAN COMPUTERINTERACTIONKlaas Jan Mollema MSc

IDMDENHAAGInformatieDienstverlening &informatieManagement

HTDENHAAGHuman Technology

3

IDM-‐ E open dataINTERACTION DESIGN

HT 1 periode 4HCI

meet the elements -‐ the five planesstappenplan voor een compleet ID/UXd product


HT 1 periode 4HCI

STRUCTURE PLANEthe infrastructure


“Concrete expression of the more abstract structure of the site”

Oftewel: Hoe is de navigatie in de website opgebouwd, welke onderwerpen horen bij elkaar?


HT 1 periode 4HCI

SKELETON PLANEplacement of buttons etc.


- Interface design zoals checkboxes etc- Navigation design zoals global navigation- Hulpmiddelen zijn een site map en een index- Een hulpmiddel bij het ontwerpen is een ‘wireframe’

College 1 : INTRODUCTIE HCI & OUTLINE JESSY JAMES GARRETT

College 2 : STRATEGY PLANE & SCOPE PLANE

College 3 : STRUCTURE PLANE & SKELETON PLANE

College 4 : SKELETON PLANE (patterns) & SURFACE PLANE

College 5 : USABILITY TESTEN

IDM BLOK Eopen data





HT 1 periode 4HCI




HT 1 periode 4HCI

SURFACE PLANEwhat you see

SKELETON PLANEplacement of buttons etc.

STRUCTURE PLANEthe infrastructure

SCOPE PLANEfunctionality

STRATEGY PLANEwho whants what?

IDM BLOK Eopen data







HT 1 periode 4HCI

the surface planewhat you see

- Definitie en doel- Relatie met Brand Identity- Producten: Mock-up and Style Guides- Richtlijnen: Contrast & Uniformity- Richtlijnen: Internal and External Consistency- Onderdelen: Color Palettes and Typography



HT 1 periode 4HCI



dus eindelijk aan de slag met de vormgeving:> Beschrijving van Brand-identity omzetten in visuele aspecten

> Visualiseren van het uiteindelijke product waarin alle onderdelen die in de deelopdrachten zijn gekozen worden verwerkt



HT 1 periode 4HCI


definitieVisual design is het bepalen van hoe de logische ordening van interface-elementen (weergegeven in de wireframe) visueel gepresenteerd wordt


definitie en doel


HT 1 periode 4HCI


doelHet doel ervan is het grafische ontwerp aan te laten stuiten bij de doelen van de website


definitie en doel


HT 1 periode 4HCI



definitie en doel

grafische saus


HT 1 periode 4HCI


- Is één van jullie doelen

- Visual design is één van de belangrijkste tools om de brand identity te communiceren

- Visual design is niet dus zeker niet alleen een kwestie van esthetiek, maar vooral van strategie


relatie met brand idenity


HT 1 periode 4HCI


styleguide doel- Helpt om vroeg te focussen op ontwerp

vraagstukken- Maakt het mogelijk goed ontwerpprincipes en

richtlijnen toe te passen- Dwingt tot beslissingen nemen en kan dienen als

naslagwerk- Verzekerd consistentie (ook als je organisatie

veranderd)


producten


HT 1 periode 4HCI


styleguide doel- Helpt om vroeg te focussen op ontwerp

vraagstukken- Maakt het mogelijk goed ontwerpprincipes en

richtlijnen toe te passen- Dwingt tot beslissingen nemen en kan dienen als

naslagwerk- Verzekerd consistentie (ook als je organisatie

veranderd)


producten


HT 1 periode 4HCI


styleguide inhoud- Bevat richtlijnen voor een product of

productfamilie- Een beschrijving van de vereiste interactie stijlen

en user interface controls, de ‘look and feel’ van de interface dus (kan ook in interactieontwerp)

- Een beschrijving van wanneer en hoe de verschillende interactie stijlen of interfaces te gebruiken (kan ook in interactieontwerp)

- Voorbeelden (illustraties) van de interactiestijlen en controls

- Scherm voorbeelden (Mock-up)


producten


HT 1 periode 4HCI


styleguide inhoud- Bevat richtlijnen voor een product of

productfamilie- Een beschrijving van de vereiste interactie stijlen

en user interface controls, de ‘look and feel’ van de interface dus (kan ook in interactieontwerp)

- Een beschrijving van wanneer en hoe de verschillende interactie stijlen of interfaces te gebruiken (kan ook in interactieontwerp)

- Voorbeelden (illustraties) van de interactiestijlen en controls

- Scherm voorbeelden (Mock-up)


producten


HT 1 periode 4HCI


styleguide voorbeelden- Web2.0 styleguide- Apple Human Interface Guidelines- Microsoft UI Style Guide 2007 Office


producten


HT 1 periode 4HCI


accessability betekenis“… the design of products and environments to be usable by all people, to the greatest extend possible, without the need for adaptation or specialized design.”Ron Mace, Center for Universal Design, North Carolina State University


producten


HT 1 periode 4HCI


accessability doel en nut- Betere bereikbaarheid - Betere vindbaarheid- Betere toegankelijkheid- Toename in snelheid- Lagere kosten voor beheer en onderhoud- Voorbereid op de raadpleging via mobiele

telefoons en PDA's.


producten


HT 1 periode 4HCI


accessability guidelinesW3C Web Content Accessibility Guidelines14 algemene geldende principes van accessible designhttp://www.w3.org/TR/WAI-WEBCONTENT/

Webrichtlijnen DrempelvrijRichtlijnen van de Stichting Waarmerk Drempelvrij http://www.drempelvrij.nl/waarmerk-2/wcag-20/evaluatiedocument


producten


HT 1 periode 4HCI


richtlijnen: contrast en uniformitySURFACE PLANEwhat you see

producten


HT 1 periode 4HCI


richtlijnen: contrast en uniformityZorg voor uniformiteit binnen en tussen de verschillende schermen zodat de gebruiker er makkelijk mee leert werken


producten


HT 1 periode 4HCI


richtlijnen: contrast en uniformityje kunt een grid gebruikenhttp://960.gs


producten


HT 1 periode 4HCI


richtlijnen: contrast en uniformityZorg voor contrast om de aandacht van de gebruiker te leiden

Gebruik geen verschillende aspecten (knoppen, widgets,kleuren, lettertypes) die opelkaar lijken.

Gebruikt aspecten die duidelijkanders zijn, of gebruik dezelfde.


producten


HT 1 periode 4HCI


richtlijnen: contrast en uniformityZorg voor contrast om de aandacht van de gebruiker te leiden

Gebruik geen verschillende aspecten (knoppen, widgets,kleuren, lettertypes) die opelkaar lijken.

Gebruikt aspecten die duidelijkanders zijn, of gebruik dezelfde.


producten


HT 1 periode 4HCI


richtlijnen: contrast en uniformitySURFACE PLANEwhat you see

producten


HT 1 periode 4HCI


richtlijnen: Internal and External ConsistencyInternal Consistency: verschillende aspecten van je site sluiten niet aan bij elkaar

External Consistency: de site sluit niet aan bij de bedrijfsvoering of overige uitingen.

Oefening: bedenkt voorbeelden van minstens 2 interne en 2 externe inconsistentie van je DPF en de consecuenties daarvan?


producten


HT 1 periode 4HCI


Onderdelen: Color Palettes and TypographyCore brand colors zijn onderdeel van een groter kleurenpalet

Kleurenpalet moet zich lenen voor een breed gebruik, zodat er effectieve designkeuzes gemaakt kunnen worden

Ook hier komen contrast en uniformiteit bij kijken

http://labs.adobe.com/technologies/kuler/


producten


HT 1 periode 4HCI


Onderdelen: Color Palettes and TypographySoms zelfs zo belangrijk geacht in het communiceren van Brand Identity speciale lettertypes worden ontworpen

Apple heeft bijvoorbeeld eigen lettertype


producten


HT 1 periode 4HCI


Onderdelen: Color Palettes and TypographySpeciale lettertypes voor beeldscherm (o.a. Verdana, Georgia), maar er zijn er meer geschikt (Lucida Sans Unicode is bij mij favoriet)

Voor grotere tekstelementen en tekstlabels zijn ook de meer excentrieke lettertypes geschikt

Ook hier komen contrast en uniformiteitbij kijken


producten


HT 1 periode 4HCI




richtlijnen


HT 1 periode 4HCI




onderdelen

IDM BLOK Eopen data


HUMAN COMPUTERINTERACTIONKlaas Jan Mollema MSc



Education

[Ht] human computer interaction 4