• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur
 

IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur

on

  • 827 views

 

Statistics

Views

Total Views
827
Views on SlideShare
733
Embed Views
94

Actions

Likes
0
Downloads
9
Comments
0

2 Embeds 94

http://vakgroep.cmd.hro.nl 93
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur IAD1 0809 Q3 Hoorcollege 2 Labels En Visuele Structuur Presentation Transcript

    • Structuur en navigatie 2 Labels en visuele structuur
    • „Flow‟ (vorige keer) Flow is een staat waarin je kunt verkeren. Het helpt mensen ergens op te focussen. Elke nieuw geopende pagina of window zal deze flow onderbreken.
    • Transparantie (vorige keer) Een betere flow bij je gebruikers maakt dat zij niet meer nadenken over je interface: het wordt transparant.
    • Ontwerpprincipe (vorige keer) No matter how cool your interface is, less of it would be better! Uit: About Face 3, Cooper, Reimann & Cronin
    • Moeten nadenken onderbreekt de „flow‟ (vorige keer) Uit: Don’t Make Me Think, Steve Krug
    • Navigatie Navigatie is: Iedere actie die gebruikers bij een ander deel van de site- of informatie-structuur brengt. De twee belangrijkste doelen van elke navigatie is: • Te informeren waar je bent • Duidelijk maken wat de volgende stap moet zijn om je doel te bereiken
    • Alle navigatie is een toeslag („excise‟)
    • Visuele toeslag
    • Zinloze toeslag
    • Het minimaliseren van de toeslag: navigatiepatronen
    • Labels: plaatjes of tekst Hoewel plaatjes (iconen of pictogrammen) in computerprogramma’s veel worden gebruikt als labels, voeren tekstlabels de boventoon op het web
    • Labels: plaatjes of tekst Plaatjes Tekst Ambigu en snel onduidelijk Eenduidig en helder Leercurve Geen leercurve voor het ‘herkennen’ Eenvoudig en snel te Kost meer tijd om te herkennen herkennen
    • Soorten labels De belangrijkste soorten labels in webpagina’s zijn: Labels voor contextuele links Verwijzingen naar informatie elders, binnen de tekst Labels voor koppen (‘headings’) Een beschrijving van de informatie die volgt Labels voor navigatie opties De labels die de opties in de navigatie van de site vertegenwoordigen
    • Labels voor contextuele links Ontstaan veelal ad hoc: hebben dan ook weinig systematiek of consistentie
    • Labels voor contextuele links De vraag die je als ontwerper altijd moet stellen: “Welke informatie verwacht de gebruiker te krijgen via deze link?”
    • Labels voor koppen („headings‟) • Moet hetgeen beschrijven dat eronder volgt • De betekenis van het label wordt geholpen door de structuur in de grafische vormgeving • Veelal in samenhang: moeten dus meer als geheel worden ontworpen
    • Labels voor navigatie opties • Ontwerp je als een geheel • Door consistentie versterk je bekendheid • Sommige labels zijn bekend bij web gebruikers (‘home’, ‘start’, ‘search’, ‘n ews’, ‘help’, ‘FAQ’, ‘about us’ etc.)
    • Labels voor navigatie opties
    • Flow, navigatie en stucturen Flow, op site-niveau
    • Flow, navigatie en stucturen Flow, op pagina-niveau door het aanbrengen van visuele structuur
    • Het aanbrengen van visuele structuur Layout, grid
    • Het aanbrengen van visuele structuur Layout, grid
    • Het aanbrengen van visuele structuur Typografie
    • Het aanbrengen van visuele structuur Typografie http://www.csszengarden.com/
    • Het aanbrengen van visuele structuur Kleur • Trekt aandacht • Verbeterd navigatie en scansnelheid • Creëert relaties tussen elementen
    • Het aanbrengen van visuele structuur Maar kleur wordt ook nog wel eens misbruikt: • Te veel kleuren hindert visueel scannen • Gebruik van tegengestelde kleuren bemoeilijkt de leesbaarheid • Al te zeer verzadigde kleuren vragen te veel aandacht • Onvoldoende verschillen tussen kleuren geven slechte contrasten • Onvoldoende rekening houden met kleurenblindheid sluit ca. 10% van de mannelijke bevolking uit
    • Het aanbrengen van visuele structuur Het visuele ontwerp stuurt het oog van gebruikers door een pagina Cruciaal voor een startpagina als deze
    • Samenvattend • Een navigatie moet altijd: • Laten zien waar ik ben • Duidelijk maken wat mijn volgende stap moet zijn • Alle navigatie vormt een toeslag voor gebruikers op het bereiken van hun doel • Voorspelbaarheid is een belangrijk middel voor het verminderen van die toeslag • Voorspelbaarheid krijg je in je navigatie door: • Het gebruiken van navigatiepatronen • Het gebruiken van labels die aansluiten bij het mentale model van je gebruikers • Het aanbrengen van een heldere visuele structuur
    • Bedankt voor jullie aandacht j.a.m.kemp@hro.nl http://vakgroep.cmd.hro.nl/iad http://project.cmi.hro.nl/2008_2009/rewind/platform/