[Ht] human computer interaction 3

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

STRATEGY PLANEwho whants what?


- Site Objectives- User needs

Oftewel:- Wat willen de makers met de site bereiken?- Wat willen de gebruikers met de site bereiken?

En: formuleer je eisen zo duidelijk mogelijk: SMART


HT 1 periode 4HCI

SCOPE PLANEfunctionality


“Defining the scope: a valuable process that results in a valuable product”

Oftewel:Bepaal de omvang en grootte van je project en dat hangt weer af van de tijd en middelen die je hebt

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


STRUCTURE PLANEthe nfrastructure





HT 1 periode 4HCI

the structure planethe infrastructure


interactiondesign

informationdesign

web als softwaresysteeminteraction design: Welke middelen zijn er beschikbaar voor de gebruiker om taken uit te voeren

web als hypertext systeminformatie architectuur: Welke opties zijn er om de informatie aan de gebruiker te tonen.


HT 1 periode 4HCI



interactiondesign

informationdesign

mental modelA mental model is an explanation of someone's thought process about how something works in the real world.


HT 1 periode 4HCI



interactiondesign

informationdesign

mental modelA mental model is an explanation of someone's thought process about how something works in the real world.


HT 1 periode 4HCI



interactiondesign

informationdesign


HT 1 periode 4HCI



interactiondesign

informationdesign

aspecten mental modelsdesign modeluser’s modelsystem image


HT 1 periode 4HCI



interactiondesign

informationdesign

aspecten mental modelsdesign modeluser’s model >> usability aspecten >> system image

EffectiveEfficientEngagingError tolerantEasy to learn


HT 1 periode 4HCI


past deze interface bij het mental model


HT 1 periode 4HCI


past deze interface bij het mental model


HT 1 periode 4HCI


metaforenals hulp voorhet mentaalmodel


HT 1 periode 4HCI




HT 1 periode 4HCI




HT 1 periode 4HCI




HT 1 periode 4HCI




HT 1 periode 4HCI


opdrachtbedenk drie metaforen voor je digitaal

portfoliowebsite


HT 1 periode 4HCI



interactiondesign

informationdesign

gaat over de ordening van de informatie in je site

niet over de navigatiestructuur


HT 1 periode 4HCI



interactiondesign

informationdesign

bottom up architectuur


HT 1 periode 4HCI



interactiondesign

informationdesign

top down architecture


HT 1 periode 4HCI



interactiondesign

informationdesign

hierarchische architectuur


HT 1 periode 4HCI



interactiondesign

informationdesign

matrix architecture


HT 1 periode 4HCI



interactiondesign

informationdesign

organische architectuur


HT 1 periode 4HCI



interactiondesign

informationdesign

sequentiele architectuur


HT 1 periode 4HCI



interactiondesign

informationdesign

organizing principlesHet criterium waarmee we besluiten welke informatie eenheden (nodes) we groeperen en welke we apart houden

Mogelijke indelingen:- Fysieke ligging- Categorie / thema- Taakgericht- Tijd / periode- Alfabetisch- Populariteit- Associaties


HT 1 periode 4HCI



interactiondesign

informationdesign

attributen (facets)- Het belang van bepaalde attributen

van objecten bepalen welke organizing principles worden gekozen

- Gebaseerd op de gebruikersbehoeften en site doelen die in de ‘strategy plane’ zijn gedefinieerd

- En gebaseerd op de informatie waarmee deze behoeften vervuld kunnen worden (‘scope plane’)


HT 1 periode 4HCI



interactiondesign

informationdesign

alternatieve voorbeelden- chronologische informatieindeling

http://newsmap.jp/#/b,e,m,n,s,t,w/nl_nl/view/

- geografische informatieindelinghttp://www.swisstrains.ch

- chronologische en geografische informatieindelinghttp://app.timemaps.nl/map#19:28


HT 1 periode 4HCI



interactiondesign

informationdesign

metadatagegevens over gegevens: een gestructureerde benadering om een gegeven stuk content mee te kunnen beschrijven


HT 1 periode 4HCI



interactiondesign

informationdesign

nomenclatuurSystematisch benamen van verschillende zaken

doel: idealiter heeft een wetenschappelijke naam voor iedereen die ermee werkt dezelfde, unieke betekenis.

Bijvoorbeeld: Een voorbeeld is de wetenschappelijke naam van het madeliefje, Bellis perennis. Hierin is Bellis de geslachtsnaam terwijl perennis de soortaanduiding is.

Spreek de taal van je gebruikers en doe dit op een consistente wijze


HT 1 periode 4HCI



interactiondesign

informationdesign

gecontroleerd vocabulariumeen set gestandaardiseerde termen die gebruikt wordt in de site met als doel eenheid te bewaren

voorbeeld:

vervoermiddelen NT gemotoriseerde vervoermiddelen NT automobielen NT vliegtuigen NT niet gemotoriseerde vervoermiddelen NT fietsen NT stuur NT zadel


HT 1 periode 4HCI



interactiondesign

informationdesign

opdrachtKies twee verschillende structuren voor je DPF- Hiërarchische structuur- Matrix structuur- Organische structuur- Sequentiële structuur

Kies hierbij logische organizing principle

Beschrijf hoe dit er dan uitziet in je DPF

Beschrijf hoe dit dan overeenkomt met je user needs en je site objectives

PAUZE

Sectorinstituut Openbare BibliothekenSteunpunt Volwassenen Educatie

8 mei 2014 | Utrecht


HT 1 periode 4HCI


INLEVEREN MOODBOARD

Sectorinstituut Openbare BibliothekenSteunpunt Volwassenen Educatie

8 mei 2014 | Utrecht


HT 1 periode 4HCI


IDM BLOK Eopen data







HT 1 periode 4HCI

the scope planefunctionaliteiten in gebruik en inhoud

navigatiegeneralisatie

interfacedesign

navigationdesign



HT 1 periode 4HCI


navigatiespecialisatie

interfacedesign

navigationdesign



HT 1 periode 4HCI


navigatie

interfacedesign

navigationdesign



HT 1 periode 4HCI


interfacedesign

navigationdesign

navigatieSKELETON PLANEplacement of buttons etc.


HT 1 periode 4HCI


interfacedesign

navigationdesign

navigatieSKELETON PLANEplacement of buttons etc.


HT 1 periode 4HCI


interfacedesign

navigationdesign

elementen van de interfacewelke elementen passen het beste bij:- het vervullen van de taak- de informatieoverdracht- de beoogde gebruiker



HT 1 periode 4HCI


interfacedesign

navigationdesign

Bouwstenen van een GUI

Hoe kies je de juiste widget?Hoe gebruik je de widget effectief?Hoe combineer je widgets?

Verwar hier het begrip widget niet met kleine programma’s zoals in Mac Os en Windows Vista



HT 1 periode 4HCI


interfacedesign

navigationdesign

widgetsSKELETON PLANEplacement of buttons etc.


HT 1 periode 4HCI


interfacedesign

navigationdesign

widgetsSKELETON PLANEplacement of buttons etc.


HT 1 periode 4HCI


interfacedesign

navigationdesign

widgets kiezen om interactie te structureren

Primary windowsSecondary windows met daarin:

Message buttonsDialog boxes

Tabs



HT 1 periode 4HCI


interfacedesign

navigationdesign




Tabs



HT 1 periode 4HCI


interfacedesign

navigationdesign




Tabs



HT 1 periode 4HCI


interfacedesign

navigationdesign




Tabs



HT 1 periode 4HCI


interfacedesign

navigationdesign

widgets kiezen om interactie te controlerenSKELETON PLANEplacement of buttons etc.


HT 1 periode 4HCI


interfacedesign

navigationdesign



HT 1 periode 4HCI


interfacedesign

navigationdesign



HT 1 periode 4HCI


interfacedesign

navigationdesign

widgets kiezen om gegevens in te voerenkeuzeknoppen en checkboxes



HT 1 periode 4HCI


interfacedesign

navigationdesign

widgets kiezen om gegevens in te voerenlist boxes



HT 1 periode 4HCI


interfacedesign

navigationdesign

widgets kiezen om gegevens in te voerentext boxes



HT 1 periode 4HCI


interfacedesign

navigationdesign

elementen van de interfacewelke elementen passen het beste bij:- het vervullen van de taak- de informatieoverdracht- de beoogde gebruiker

> Volgorde van de stappen> Waar ben ik?> Concequenties van acties> Closure> Gebruiker heeft controle



HT 1 periode 4HCI


interfacedesign

navigationdesign

wireframesDe page layout wordt vastgelegd in een wireframe -> Dit is dus nog geen grafisch ontwerp

Wireframe is een ‘simpele’ lijntekening die wordt ondersteunt door opmerkingen over de navigatie, interactie en informatie ... en door verwijzingen naar de opgestelde documenten zoals de functional specifications



HT 1 periode 4HCI


interfacedesign

navigationdesign

wireframesSKELETON PLANEplacement of buttons etc.


HT 1 periode 4HCI


interfacedesign

navigationdesign

wireframesSKELETON PLANEplacement of buttons etc.

IDM BLOK Eopen data


HUMAN COMPUTERINTERACTIONKlaas Jan Mollema MSc



Education

[Ht] human computer interaction 3