Les 4

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

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

Usability

Wat is usability:
http://www.rug.nl/webplatform/usability/index

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.visiblenorth.com/blog/usability-examples-of-good-and-bad-color-contrast

Nog meer voorbeelden van slechte usability:
http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/
Onder aan deze pagina staan ook een aantal don'ts.

Even wat usability tips:
http://www.keyrelevance.com/articles/usability-tips.htm

Nog meer tips en boeken:
http://websitetips.com/usability/

Welke minimum usability maatregelen moeten we in ieder geval nemen:

-Zorg voor een makkelijke URL
-GEEN dode links
-Geen lappen tekst.............niemand leest het.
-Plaats geen te zware afbeeldingen.....anders duurt het telang
-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 dudielijk leesbaar font.
-Gebruik een rustige kleur als achtergrond.

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


Useability voor blinden:
http://www.youtube.com/watch?v=d5oZf9ULAyw


Zo nu weer eens wat doen :)

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

Maak er eens een?
Vanavond gaan we onze eerste test site maken in Fireworks:

Ik wil graag zien:

1 redelijk vormgegeven homepagina.
1 contact pagina
1 bedrijfspagina

Alle pagina's moeten naar elkaar verwijzen.

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






Link van de week:
http://www.webpagesthatsuck.com/dailysucker/