1 Deel I: CSS(3) Deel II: Usability - Navigatie Hoorcollege IUW Thema Web 17 November 2015 Christof van Nimwegen 12 CSS: Waarom? HTML was bedoeld voor...
Hoorcollege IUW Thema Web 17 November 2015 Christof van Nimwegen
1
CSS: Waarom?
HTML
was bedoeld voor documentstructuur (text met verschillende levels in headings en body text) Plaatjes Tabellen (ook gebruikt voor positioneren) …….
HTML 3.2
mogelijkheid om lettertypen, kleuren en vele andere visuale aspecten te definieren. De eigenlijke geboorte van web DESIGN (nu was de content niet meer het belangrijkste, ook de presentatie) 2
CSS: Waarom? CSS bevat de regels voor de presentatie van HTML
+
HTML
=
CSS
Web Page
Check: www.csszengarden.com/
Vandaar dat….
= 4
Style sheets en style sheet talen
De plaats van descriptive markup is helder Maar waar komt de code voor de presentatie dan terecht? Style sheets, geschreven in een style sheet taal Diverse style sheet talen
DSSSL, voor SGML XSL, voor XML (XSL-FO, XSLT, XPath) CSS, voor HTML en XML
Voordelen CSS
Minder data download, kortere laadtijd Schonere code is beter voor zoekmachines Hoeft maar 1x iets te veranderen, dus:
Efficiëntie en tijdswinst in het ontwikkelproces Makkelijker onderhoud
Meer vormgevingsmogelijkheden dan HTML Cooler design Responsivenses !
6
Stylen d.m.v. HTML
7
Stylen d.m.v. CSS
8
Cascading?
Diverse plekken voor style specificatie Voorrangsregels bepalen welke style "wint" Prioriteit (in afnemende volgorde) Inline style (in een HTML element Embedded style (in the tag) Extern style sheet Browser standaardwaarden (default)
Cascading?
10
1. Locatie style sheet: Inline index.html
IUW 2015
2. Locatie style sheet: Intern index.html
<style type="text/css> body {color:green}
IUW 2015
3. Locatie style sheet: Extern index.html
IUW 2015
iuw.css
body {style="font-size:16px; color:green;}
4. Locatie style sheet: browser default
14
CSS Selectors: WAT krijgt een style?
Elementen
CLASS (kan vaker)
p {color: black; }
.rood {color: red;}
ID (max één keer)
#blauw {color: blue}
Syntax:
Resultaat:
15
CSS Property: welke eigenschap stylen? color
red, yellow, rgb(212,120,20)
font-style
normal, italics, oblique
font-size
12pt, larger, 150%, 1.5em
text-align
left, right, center, justify
line-height
normal, 1.2em, 120%
display
block, inline, list-item, none
vaardigheid, oefening en opzoeken http://www.w3schools.com/cssref/ http://www.w3.org/Style/Examples/011/firstcss www.w3schools.com
16
Centraal in CSS: Box model
algemeen model voor block elementen
vier zones voor padding, border en margin 1 of 4 waarden
tools als Firebug laten box-eigenschappen duidelijk zien boxen kun je positioneren 17
Deel II: Usability en navigatie Hoorcollege IUW Thema Web 17 november 2015 Christof van Nimwegen
Usability (uit: “Playtime”, 1976, Jacques Tati)
39
Usability
ISO 9241-11: “Usability is de mate waarin een product door bepaalde gebruikers in een bepaalde gebruikersomgeving kan worden gebruikt om bepaalde doelen effectief, efficiënt en naar tevredenheid te bereiken.”
Effectief: bereikt de gebruiker het gewenste doel? Efficiënt: is de benodigde inspanning zo klein mogelijk? Satisfactie: vindt de gebruiker het product prettig in gebruik?
40
Usability
Zeer kritieke factor! Te vaak achterwegen gelaten
Geen tijd Geen geld Ik weet wel hoe het moet Usability is slechts smaak Ik krijg nooit klachten …
≠ User Experience (UX = gebruikers ervaring)! 41
Usability: op het web
Voorkom “Lost in Hyperspace”, de Mensch is ongeduldig, men zal afhaken Niet op usability letten kost bezoekers/geld
Geldt uiteraard voor e-commerce Maar ook voor services (o.a. overheid)
Voorwaarde voor goede user experience Geen developer “pesten”, gewoon een betere site Aardig zijn voor de gebruiker …
42
Usability: Algemeen – voorkom “memory load”
George Miller (1863-1951) The Magical Number Seven, +/-2 Er zijn limieten aan wat we kunnen vasthouden in korte termijn geheugen Gaat niet altijd op in Webdesign, maar is toch vaak als vuistregel, en in de praktijk niet slecht “Don’t make me think”: laat me concentreren op wat ik wil doen kunnen
43
Usability: Algemeen - Mentale belasting
44
Usability: Algemeen - Gebruik Metaforen
45
Usability: Algemeen - Gebruik Metaforen
46
Usability: Algemeen - Affordance
J.J. Gibson (1904-1979)
Slecht vertaalbaar hier: staat iets toe, faciliteert iets, biedt de mogelijkheid voor, etc:
In kort voor Usability: the easy discoverability of possible actions
47
Usability: Affordance om ons heen
48
Usability: Affordance on the web
49
Usability: Affordance on the web?
50
Usability: Affordance op het web
Maak duidelijk wat een interactief element is en wat niet
Visibility of system status Match between system and real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, recover from errors 10. Help and documentation 53
1. Visibility of system status
54
2. Match between system and real world
Spreek (duidelijke), normale wereld taal van de gebruiker Gebruik metaforen of conventies uit de echt wereld Geef informatie natuurlijk en logisch weer
55
3. User control and freedom
Mensen maken fouten Nooduitgang: maak stoppen/cancelen mogelijk Niet user dwingen Undo, redo!!
56
4. Consistency and standards
57
5. Error prevention
Beter voorkomen dan genezen Form checks, greyed out buttons Formats
58
6. Recognition rather than recall
Computers zijn goed in onthouden, mensen wat minder “Don’t make me think”, laat me me op wat ik wil doen kunnen concentreren
59
7. Flexibility and efficiency of use
Flexibility
Shortcuts (quick links, bookmarks, keyboard shortcuts) Dwing geen vastgelegd pad af, maar laat verschillende manieren toe) bv. EN sitemap EN search EN via links/menus)
Efficiency
Bv: search results krijgen goede beschrijving, naast de link zelf 60
8. Aesthetic and minimalist design
Geen afleidende zaken, alleen relevante informatie in dialogen etc.
61
9. Help users recognize, diagnose & recover from errors
62
10. Help and Documentation
De meeste mensen lezen NOOIT helpfiles Dus ALS ze dat doen, laat het goed zijn!! En maak ze goed vindbaar
63
Usability: Test methodes
Check Usability engineering en user experience (UE)!
Heuristic evaluation Kleine groep (3-5) evaluators onderzoeken examine UI aan de hand van usability heuristieken (vuistrregels) Bevindingen samengevoegd
Expert review Laat expert, meestal uit bedrijfsleven, usability professional er naar kijken
Van Usability naar Accessibility: Toegankelijkheid
Ontwerp ook voor mensen met een beperking en senioren WCAG 2.0 (Web Content Accessibility Guidelines) Maguire! Steeds meer verplicht bij digitale overheid www.drempelvrij.nl
66
Usability: Toegankelijkheid
Vriendelijke urls Alternatieve teksten Tabellen toegankelijk Kleurenblindheid-proof Multimedia: geef bijschriften en transcripties voor audio / video Gebruik link tekst die ook buiten zijn context zinvol is Gebruik kopjes, lijsten en consistente structuur, CSS voor layout en stijl ………… Valideer! 67
Navigatie
Navigeren door een netwerk van informatiebronnen door de hypertext en hypermedia op het WWW Is zeer groot en belangrijk onderdeel van Usability
68
Navigatie: Meestal Structureel
Duidelijke hierarchie Boom structuur
69
Navigatie: Hiërarchische structuur
70
Navigatie: Diepte
71
Navigatie: onder / boven paginagrens
72
Navigatie: dimensies gecombineerd
73
Navigatie: breed EN diep minder goed
74
Navigatie: accent op verticale dimensie
75
Navigatie: accent op horizontale dimensie
76
Navigatie: meestal allebei
77
Navigatie: huidige trend
78
Navigatie: Voetnoot
79
Navigatie: Kruimelpad (Breadcrums)
80
Navigatie: Pagineren
81
Navigatie: zoekfunctie
Niet altijd nodig Vaak het meest gebruikte navigatie element Ook bij goed georganiseerde websites (snel) Houd het simpel (behalve indien specifieke functies/queries gewenst zijn Niet te kleine box (afmeting), geen lengte restricties Zet niet te dicht bij andere elementen (wordt als irritant ervaren) Laat niet anders op een search box lijken Soms: maak duidelijk waar men naar kan zoeken
82
Navigatie: zoekfunctie – positie?
83
Navigatie: zoekfunctie – positie!
84
Grafisch ontwerp
Usability: Affordance, knoppen, functionaliteit Navigatie: structuur, opbouw, wat is waar
Grafisch Ontwerp: hoe geef ik het allemaal vorm, identity, rekening houdend met trends, esthaetica, rekening houdende met de eisen van Usability Navigatie 85
Grafisch ontwerp: Esthetiek?
Esthetiek moet nooit interfereren met doel en functionaliteit
86
Grafisch ontwerp: Trends
Simplicity Vlak design Eén site voor alle devices Tegels, Mega-Navigatie Menus App-stijl naar “gewoon” www Icon fonts, webfonts, SVG, CSS ipv. images Minder tekst, meer visual storytelling Video /bewegende achtergronden http://www.matter.to/, http://eagleclean.co.uk/, http://y.co/
