Deel I: CSS(3) Deel II: Usability - Navigatie 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 <head> tag) Extern style sheet Browser standaardwaarden (default)
Cascading? 10
1. Locatie style sheet: Inline index.html <html> <head> </head> <body style="font-size:16px; color:green;"> <p>iuw 2015</p> </body> </html>
2. Locatie style sheet: Intern index.html <html> <head> <style type="text/css> body {color:green} </style> </head> <body> <p>iuw 2015</p> </body> <html>
3. Locatie style sheet: Extern index.html <html> <head> <link rel="stylesheet" type="text/css href="iuw.css"> </head> <body> <p>iuw 2015</p> </body> <html> iuw.css body {style="font-size:16px; color:green;}
4. Locatie style sheet: browser default 14
CSS Selectors: WAT krijgt een style? Elementen p {color: black; } CLASS (kan vaker).rood {color: red;} ID (max één keer) #blauw {color: blue} Syntax: Resultaat: 15
CSS Property: welke eigenschap stylen? color font-style font-size text-align red, yellow, rgb(212,120,20) normal, italics, oblique 12pt, larger, 150%, 1.5em 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
Bijvoorbeeld de instituutswebsite: <div style="position:absolute; top:3px;"> <img src="images/logo.png" alt="logo IUW" width="105" height="74"> </div> <div class="head"> <h1>informatieuitwisseling 2015-2016</h1> </div> <div class="menu"> <ul> <li><a href="index.html">nieuws</a></li> etc. </ul></div> <div class="body"> <h2>nieuws</h2> <p>oogt het nieuws oud, reload dan deze pagina.</p> etc </div> 18
Specificiteit in actie css span {color: red;} span span {color: blue;} span.foo {color: green;} span span.foo {color: turquoise;} span.bar {color: maroon;} html <span class="foo">hey!</span> <span>wow! <span>amazing!</span> <span class="foo">impressive!</span> <span class="bar">k00l!</span> <i>fantastic!</i> </span>
CSS 3 20
CSS 3 (sommigen waren er al in CSS2) Animations / transities Visuele effecten (border-radius, rgbacolor, boxshadow, text-shadow, gradient) Ronde hoeken Vrijheid fonts (ook Webfonts) Border images Media queries.en nog veel meer Overal zijn tools voor! 21
Web fonts (ook in opdracht deel 4/4) B.v. http://www.fontsquirrel.com/fonts/list/find_fonts 22
Web Fonts: Google (ook in opdracht deel 4/4) 23
Web Fonts: b.v. Google 24
Icon Fonts (ook in opdracht deel 3/4) 25
Icon Fonts Waarom? Afbeeldingen zorgen (meestal) voor meer laadtijd) Afbeeldingen zijn niet altijd even scherp Fonts wel, ook bij inzoomen, of op een Retina scherm 26
Fonts als icons! Afbeelding-icon Font-icon Normaal Zoom Retina, HiDPI 27
CSS: Effecten. 28
En 29
Animaties (simpel) 30
Bijvoorbeeld: Animaties (iets fancier) 31
Maar we zijn er nog niet (vanaf). Browser specifieke prefixed properties -webkit voor Chrome, Safari -moz voor Firefox -o voor Opera -ms voor Internet Explorer). Worden gebruikt om nieuwe, of experimentele CSS te testen, voordat ze officieel geaccepteerd zijn door W3C. 32
Dus: background: -webkit-linear-gradient(#ff0000, #000000); background: -moz-linear-gradient(#ff0000, #000000); background: -ms-linear-gradient(#ff0000, #000000); background: -o-linear-gradient(#ff0000, #000000); background: linear-gradient(#ff0000, #000000); 33
Vele tools! http://css3generator.com/ http://www.css3maker.com/ http://font-combinator.com/ http://css3.mikeplate.com/ http://www.css3.me/.. 34
CSS: Responsive (ook in opdracht, deel 4) 35
Responsiveness Responsive webdesign: een einde aan de mobiele versies? Eigenlijk.conditioneel CSS Ontwikkeltools zoals Gridset, Bootstrap! Test tools zoals http://www.jamus.co.uk/demos/rwddemonstrations/ http://responsivetest.net/ 36
Pauze 37
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 51
Usability: Pionier Jacob Nielsen Learnability Efficiency Memorability Errors (weinig fouten maken) Satisfaction 52
Usability: Nielsen s heuristieken 1. Visibility of system status 2. Match between system and real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. 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 Lab testing, bv. A/B Testing Vergelijk versies (soms) Formeel, gecontroleerd 64
Usability: getest 65
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/ 87
Vragen? 88