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