Ontwerpen van websites. Hoorcollege Webdesign 2 30 april 2014 Frans Wiering

Transcriptie

1 Ontwerpen van websites Hoorcollege Webdesign 2 30 april 2014 Frans Wiering 1

2 Inhoud dimensie ontwerp in vak webdesign todo terugblik op OIS user experience volgens Garrett informatiearchitectuur navigatie (als er tijd is) start met HTML 2

3 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 f zelfde model als in Benyon, uitgebreidere uitleg 3

4 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

5 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. visibility 2. consistency 3. familiarity 4. affordance 5. navigation 6. control 7. feedback 8. recovery 9. constraints 10. flexibility 11. style 12. conviviality affordance: design past bij gebruik 5

6 UU master site 1. visibility 2. consistency 3. familiarity 4. affordance 5. navigation 6. control 7. feedback 8. recovery 9. constraints 10. flexibility 11. style 12. conviviality 6

7 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

8 Garrett s framework visie 2002, 2e ed 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

9 Five planes 9

10 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

11 De vragen die je moet stellen Surface Skeleton Structure Scope Strategy What will the finished product look like? What components will enable people to use the site? How will the pieces of the site fit together and behave? What features will the site need to include? What do we want to get out of the site? What do our users want? 11

12 Zomaar een voorbeeld

13 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

14 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

15 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 vgl. Benyon: Conceptual Design, ook elementen Physical Design 15

16 Structure (2) information architecture structuur van de content classificatie, ordening naamgeving gerelateerd aan menselijke cognitie hoe ordenen mensen informatie wordt vervolgd 16

17 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 vgl. Benyon: Physical Design, Interface Design 17

18 Voorbeelden van wireframes 18

19 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

20 Alles in een plaatje (2000) 20

21 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

22 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

23 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

24 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 24

25 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

26 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

27 gebruikt Garrett s Visual Vocabulary: 27

28 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

29 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

30 navigatie UU master site 30

31 navigatie UU master site courtesy global remote: search local remote: faceted search supplementary 31

32 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