Les 3

De afgelopen 2 lessen hebben we wat praktijk oefeningen gedaan.
Bassis dreamweaver en wat leuke oefeningen in Fireworks.

Vanavond eerstwat meer theorie.....het onderwerp is namelijk:

Usability

Wat is usability:
http://nl.wikipedia.org/wiki/Gebruiksvriendelijkheid

Ok, usability gaat dus over gebruiksvriendelijkheid?

Inderdaad........als je site gebruiksvriendelijk is:
-Blijven mensen langer
-Komen ze vaker


mmm, wat is niet gebruiksvriendelijk?

Nou bv slecht kleur contrast/gebruik:
http://www.gomediazine.com/design-articles/technique-theory/rule-three-contrast-contrast-contrast/

Nog meer voorbeelden van slechte usability:
http://www.webpagesthatsuck.com/worst-websites-of-2011-Q1.html

http://www.youtube.com/watch?v=Mck3xDdabb0

Een top 10 van slechte usability in 2010.....en dan vooral wat betreft navigatie:
http://www.webpagesthatsuck.com/worst-websites-of-2010-navigation.html

Mystery meat navigation

Onder aan deze pagina staan ook een aantal don'ts.
http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/

Even wat usability tips:
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
http://www.keyrelevance.com/articles/usability-tips.htm


Welke minimum usability maatregelen moeten we in ieder geval nemen:

-Home link op elke pagina
-Contactgegevens altijd en overal aanwezig of zeer makkelijk bereikbaar.
-Niet te veel maar ook niet te weinig subpagina’s onder de hoofdknoppen (min 2 max +- 7)
-Zorg voor een makkelijke URL
-GEEN dode links
-Geen lappen tekst.............niemand leest het.
-Plaats geen te zware afbeeldingen.....anders duurt het te lang.
-Vul alle alt tags in............sommige mensen surfen met plaatjes uit.
-Geef alle bestanden duidelijke namen
-Geef elke pagina een titel, liefst bestaande uit (SiteNaam - PaginaNaam)
-Zorg voor goedwerkend en consistente navigatie (elke knop heeft op elke pagina dezelfde functie)
-Vermijd Popups, mensen haten ze.............en vaak staat de popupkiller aan
-Gebruik een duidelijk leesbaar font.
-Gebruik een rustige kleur als achtergrond.

ff lachen om usability:
http://www.youtube.com/watch?v=kbME0E5FP1M


Bad usability:
http://www.youtube.com/watch?v=4TQoaUqXT7E&feature=related

Usability tips:
http://www.youtube.com/watch?v=0SyRjjAGpvg&feature=related





Zo nu weer eens wat doen :)

Zo maak je een rollover button.
http://www.youtube.com/watch?v=VCq63qiCQmY

Maak er eens een?


Vanavond gaan we verder met de test site maken in Fireworks:


Hier een tutorial over het snel in elkaar zetten van een prototype/ontwerpversie van een website, met Fireworks.

http://www.entheosweb.com/fireworks/CS4/design_layout.asp