Ontwerpenvan 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. visibility2. consistency3. familiarity4. affordance
5. navigation6. control7. feedback
8. recovery9. constraints
10. flexibility11. style12. conviviality
5affordance: design past bij gebruik
6
UU master site
1. visibility2. consistency3. familiarity4. affordance
5. navigation6. control7. feedback
8. recovery9. constraints
10. flexibility11. style12. conviviality
Wat je over kunt nemen uit OIS
hoofdactiviteiten design evaluatie in centrum
werken met persona’s en scenario’s 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
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
2002, 2e ed. 2011
Five planes
9http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf
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 What will the finished product look like?
Skeleton What components will enable people to use the site?
Structure How will the pieces of the site fit together and behave?
Scope 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
12http://www.youtube.com/watch?v=ifmRWuVYBuA; http://www.youtube.com/watch?v=EX4uytZhWjo
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’
13vgl. Benyon: Understanding
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
14vgl Benyon: Envisionment
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 wederzijdse aanpassing
conceptuele modellen gebruik conventies en metaforen
G. is geen grote fan van metaforen afhandeling fouten
15vgl. Benyon: Conceptual Design, ook elementen Physical Design
Structure (2)
information architecture structuur van de content classificatie, ordening naamgeving
gerelateerd aan menselijke cognitie hoe ordenen mensen informatie
wordt vervolgd…
16
Skeleton
concreet maken conceptuele structuur information design: communiceren
van ideeën o.a. visualisatie van informatie
interface design: elementen voor interactie widgets, bekend uit OIS
navigation design: elementen voor navigeren door content verschillende typen navigatie menselijke navigatiestrategieën
er is natuurlijk overlap… alles afwegen in wireframes
schematisch ontwerp webpagina hier komt veel in samen
17vgl. Benyon: Physical Design, Interface Design
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)
20http://www.jjg.net/elements/pdf/elements.pdf
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 structure: information architecture
hoe organiseer je de content van een website 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
alfabetisch, chronologisch, geografisch niet altijd even nuttig
maar veel is subjectief en/of ingewikkeld taak, doelgroep, onderwerp, betekenis…
consistentie, eenduidig vocabulaire 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
24https://www.rijksmuseum.nl/nl/zoeken
Metadata
standaard-definitie metadata is data about data
beter metadata is a structured description of the
essential attributes of an information object duidelijke (en traditionele) rol in
informatievoorziening catalogi e.d. eeuwenoud
metadata voor websites (Wodtke 2003) 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
vaak passen dingen op meerdere plaatsen
matrix meer dan 3 dimensies is onoverzichtelijk
netwerk kan ‘organisch’ voelen, maar oriëntatie
is lastig lineair
wat is het voornaamste organiserende principe specialist? klant?
architectuur vastleggen in diagram vele systemen
26
27gebruikt Garrett’s Visual Vocabulary: http://www.jjg.net/ia/visvocab/
Navigatie menselijke overwegingen
lost in cyberspace: ruimte-metafoor schiet tekort
navigatiegedrag information foraging, berry-
picking breadth- of depth-first zoeken of browsen
hoe ondersteun je de oriëntatie labelling navigation support searching
28
Navigatie-ontwerp volgens Garrett
global navigation toegang tot hele site typisch via vast menu
local navigation directe omgeving in architectuur
supplementary navigation shortcuts
contextual navigatie hyperlinking in document
courtesy navigation naar standaard voorzieningen
remote navigation tools sitemap index
29
navigatie UU master site
30
navigatie UU master site
31
global
local
courtesy
supplementary
remote: search
remote: faceted search
Hoofdbegrippen
OIS design principles persona’s en scenarios
vijf planes van Garrett structure: informatie-architectuur
classificatie, naamgeving, structuur faceted classification en search metadata
skeleton: navigatiedesign labelling, navigation support en searching verschillende typen navigatie wireframes
structure en skeleton planes speciaal belangrijk voor opdracht
32
Top Related