Ontwerpen van websites Hoorcollege Webdesign 2 30 april 2014 Frans Wiering
1
Inhoud
dimensie ‘ontwerp’ in vak webdesign
todo
terugblik op OIS user experience volgens Garrett informatiearchitectuur navigatie (als er tijd is) start met HTML 2
OIS voor het Web
verplichte literatuur
Benyon, 2e ed. hoofdstuk 16: Designing Websites
= 3e ed. hoofdstuk 14
sterk aanbevolen
Garrett hoofdstuk 2: Meet the elements http://www.jjg.net/elements/pdf/elements_ch02.pd f zelfde model als in Benyon, uitgebreidere uitleg
3
Terugblik
Designing interactive systems is concerned with developing high quality interactive systems, products and services that fit with people and their ways of living (Benyon p.6)
centraal staat human-centred design balanceren PACT elementen in een domein
people activities contexts technologies
4
Algemene ontwerpprincipes
Benyon: 4 categorieën
helping people access, learn and remember the system (1-4) giving them the sense of being in control, knowing what to do and how to do it (5-7) safely and securely (8-9) in a way that suits them (10-12)
1. 2. 3. 4.
5. 6. 7.
8. 9.
10. 11. 12.
affordance: design past bij gebruik
visibility consistency familiarity affordance navigation control feedback recovery constraints flexibility style conviviality
5
UU master site 1. 2. 3. 4.
5. 6. 7.
8. 9.
10. 11. 12.
visibility consistency familiarity affordance navigation control feedback recovery constraints flexibility style conviviality 6
Wat je over kunt nemen uit OIS
hoofdactiviteiten design
werken met persona’s en scenario’s
evaluatie in centrum
maar op web ken je die niet zo goed
de 12 design principes aandacht voor usability en accessibility allerlei methoden en technieken 7
Garrett’s framework
2002, 2e ed. 2011
visie
ontwerp is meer dan de juiste functionaliteit bouwen (wat het doet) user experience gaat ook over: hoe werkt het voor de gebruiker
lijkt sterk op Benyon’s ‘human-centred design’
8
Five planes
http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
9
Verbinding
twee gezichtspunten op web
links: applicatie-platform met interactieve functionaliteit rechts: publicatie-omgeving voor informatie
de vijf planes vormen een conceptueel framework om de twee gezichtspunten te verbinden
het zijn ook min of meer fasen in het ontwerpproces maar niet een lineair model 10
De vragen die je moet stellen
Surface
Skeleton
How will the pieces of the site fit together and behave?
Scope
What components will enable people to use the site?
Structure
What will the finished product look like?
What features will the site need to include?
Strategy
What do we want to get out of the site? What do our users want?
11
Zomaar een voorbeeld
http://www.youtube.com/watch?v=ifmRWuVYBuA; http://www.youtube.com/watch?v=EX4uytZhWjo 12
Strategy
wat willen we met deze site bereiken? product objectives
business goals, brand identity, success metrics
wat willen onze gebruikers ermee bereiken? user needs
market research contextual inquiry en andere methoden voor understanding persona’s voor verschillende ‘user segments’ vgl. Benyon: Understanding 13
Scope
vertaalslag
waarom maken we dit naar wat maken we precies dus ook: wat maken we niet
uitdrukken in scenario’s functionele specificaties: wat kun je met de site doen? content requirements: wat moet er op de site te vinden zijn?
verschillende media content inventory hoe wordt de content onderhouden?
(Garrett heeft het niet over niet-functionele requirements)
duidelijke prioriteiten stellen
relatie met strategie
vgl Benyon: Envisionment
14
Structure (1)
creëren van ‘a conceptual structure of the site’ how will the pieces of the site fit together and behave? interaction design
interactie als dans van mens en technologie
conceptuele modellen gebruik conventies en metaforen
wederzijdse aanpassing
G. is geen grote fan van metaforen
afhandeling fouten
vgl. Benyon: Conceptual Design, ook elementen Physical Design 15
Structure (2)
information architecture
gerelateerd aan menselijke cognitie
structuur van de content classificatie, ordening naamgeving
hoe ordenen mensen informatie
wordt vervolgd… 16
Skeleton
concreet maken conceptuele structuur
information design: communiceren van ideeën
interface design: elementen voor interactie
widgets, bekend uit OIS
navigation design: elementen voor navigeren door content
o.a. visualisatie van informatie
verschillende typen navigatie menselijke navigatiestrategieën
er is natuurlijk overlap…
alles afwegen in wireframes
schematisch ontwerp webpagina hier komt veel in samen
vgl. Benyon: Physical Design, Interface Design 17
Voorbeelden van wireframes
18
Surface
visual design, sensory design visueel ontwerp best begrepen
hoe bewegen je ogen over het interface? wat trekt de aandacht? esthetiek
een paar principes
contrast gebruiken voor aandacht en onderscheid
en uniformiteit waar contrast niet nodig is
grid-gebaseerde layout consistentie tussen design elementen kleuren en fonts zorgvuldig kiezen
design comp(osite): visuele mockup
deel documentatie style guide 19
Alles in een plaatje (2000)
http://www.jjg.net/elements/pdf/elements.pdf
20
Technologische terzijde
het bouwen van webpagina’s zit op de twee bovenste niveaus skeleton: indeling pagina
HTML-structuur pagina positionering blokken met CSS
surface: presentatie
CSS decoratieve elementen
21
Information architecture
het bouwen van een website gaat voor een belangrijk deel ook over het middenniveau
hoe organiseer je de content van een website
structure: information architecture
resultaat: een blauwdruk voor de hele site
wat komt erbij kijken?
informatie classificeren informatie structureren 22
Classificatie
hoe conceptualiseren mensen de content van de site welke terminologie, welke relaties kun je formaliseren in een ontologie objectief
maar veel is subjectief en/of ingewikkeld
taak, doelgroep, onderwerp, betekenis…
consistentie, eenduidig vocabulaire
alfabetisch, chronologisch, geografisch niet altijd even nuttig
voor systeem, bedrijf én gebruiker
belang gebruikersstudies 23
Faceted classification
beschrijft content via 3 aspecten
dimensies (hoofdconcepten uit ontologie) per dimensie aantal facetten (attributen, eigenschappen) per facet aantal waarden
zoeksystemen voor begrensde domeinen
online stores musea
https://www.rijksmuseum.nl/nl/zoeken
24
Metadata
standaard-definitie
beter
catalogi e.d. eeuwenoud
metadata voor websites (Wodtke 2003)
metadata is a structured description of the essential attributes of an information object
duidelijke (en traditionele) rol in informatievoorziening
metadata is data about data
intrinsic: technische eigenschappen administrative: workflow en verwerking descriptive: beschrijft inhoud
essentieel in contentrijke websites voor:
navigatie, zoeken management
Structuren
hoe organiseer je de content?
hierarchisch
matrix
kan ‘organisch’ voelen, maar oriëntatie is lastig
lineair
wat is het voornaamste organiserende principe
meer dan 3 dimensies is onoverzichtelijk
netwerk
vaak passen dingen op meerdere plaatsen
specialist? klant?
architectuur vastleggen in diagram
vele systemen 26
gebruikt Garrett’s Visual Vocabulary: http://www.jjg.net/ia/visvocab/
27
Navigatie
menselijke overwegingen
lost in cyberspace: ruimtemetafoor schiet tekort navigatiegedrag
information foraging, berrypicking breadth- of depth-first zoeken of browsen
hoe ondersteun je de oriëntatie
labelling navigation support searching
28
Navigatie-ontwerp volgens Garrett
global navigation
local navigation
hyperlinking in document
courtesy navigation
shortcuts
contextual navigatie
directe omgeving in architectuur
supplementary navigation
toegang tot hele site typisch via vast menu
naar standaard voorzieningen
remote navigation tools
sitemap index
29
navigatie UU master site
30
navigatie UU master site
courtesy
global
remote: search
local
remote: faceted search
supplementary
31
Hoofdbegrippen
OIS
vijf planes van Garrett structure: informatie-architectuur
classificatie, naamgeving, structuur faceted classification en search metadata
skeleton: navigatiedesign
design principles persona’s en scenarios
labelling, navigation support en searching verschillende typen navigatie wireframes
structure en skeleton planes speciaal belangrijk voor opdracht 32
