10 tips voor een gebruiksvriendelijke website
Post on 21-Jan-2015
8.758 Views
Preview:
DESCRIPTION
TRANSCRIPT
Titel tekst
Beschrijving slide
Een website die werkt10 tips voor een gebruiksvriendelijke website
Haal het maximum uit het web - 24/6/2008
Goeiemiddag! Ik ben Bart
Ik werk bij webbureau Netlash
en bij een startup die MetaTale heet
Dit is mijn zoon Kobe
Mijn grote passie is koffie
www.ondernemeringent.be
www.netlash.com
www.metatale.eu
www.kobedewaele.be
www.kopjekoffie.be
(Ja, dat zijn heel wat www’s)
Je vindt me hier:
Een website die werkt 10 tips voor een gebruiksvriendelijke website
Nieuwe technologie: drie golven
kopiëren vertalen eigenheid
géén brochure
géén videoclip
zeker géén radio (podcast is dead)
Het web vindt zijn eigen taal
Géén 10 tips
(veel meer)
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
1. Consistentie
Verwachtingspatronen
1. Consistentie
logo
‘home’
breadcrumb
disclaimer
zoekbox
navigatie
taalkeuze
1. Consistentie
1. Consistentie
U bent hier
Links bovenaan
Eventueel met tagline
Met link naar homepage
1. Consistentie
Logo
1. Consistentie
Taalkeuze
Links bovenaan, onder logo
ISO-aanduiding (NL-FR-EN)
Alle opties tonen
1. Consistentie
Home
Als eerste in hoofdnavigatie, of in logo
Wordt altijd verwacht
Engelse term is ok!
Onder de hoofdnavigatie
Duidt het afgelegde pad aan
Klikbaar, behalve laatste item
1. Consistentie
Breadcrumb
Zoekbox
Rechts bovenaan
Gevaarlijk!
Gebruiker verwacht Google...
1. Consistentie
Liefst horizontaal bovenaan
Subnavigatie in linkerkolom
Zeker niét rechts of onderaan
Navigatie
1. Consistentie
Onderaan, in footer
Idem: privacy statement, sitemap
Bij grote sites ook: contact webmaster, about
Secundaire navigatie
1. Consistentie
Het is duidelijk:- waar ze vandaan kwamen- waar ze nu zijn- waar ze naar toe kunnen
In een visuele taal die ze van andere sites kennen
Consistentie geeft mensen houvast
1. Consistentie
1. Consistentie
U bent hier
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
2. Typografie
http://www.flickr.com/photos/dmitry-baranovskiy/489116782/
Er wordt op dit moment nog steedsméér naar elkaar geschreven dan ermet elkaar getelefoneerd wordt
Het web is tekst
2. Typografie
Géén oneindig lange regels
+- 55 karakter per regel
Dus: géén liquid design
Leeslengte
2. Typografie
2. Typografie New York Times
2. Typografie Smashing magazine
Schaalbare lettertypes
Laat mensen zelf vergroten
Geen pixelwaarde (wel relatief)
a-A is een pleister
2. Typografie
Op het scherm: schreefloos
Serif of Sans-serif?
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer
possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas
humanitatis per seacula quarta decima et quinta decima. Eodem
modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in
futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium
lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis
videntur parum clari, fiant sollemnes in futurum.
2. Typografie
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
3. Draagbaarheid
Probeer niet om bezoekers te lokken naar jouw websiteVerspreid jouw inhoud naar die plaatsenwaar er bezoekers zijn
Mohammed en de berg
3. Draagbaarheid
3. Draagbaarheid
Presentatie
3. Draagbaarheid
3. Draagbaarheid
Presentaties
3. Draagbaar
RSS = Really Simple Syndication
Maakt inhoud draagbaar
RSS
http://nl.wikipedia.org/wiki/Really_Simple_Syndication
3. Draagbaarheid
API = Application Programming Interface
Geef derden toegang tot je data
API
http://nl.wikipedia.org/wiki/Application_Programming_Interface
3. Draagbaarheid
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
4. Snelheid
Bezoekers zijn ongeduldig
Snel laden (technische snelheid)
To the point (inhoudelijke snelheid)
Scanbaar (structurele snelheid)
4. Snelheid
http://www.websiteoptimization.com/services/analyze/
Testen!
4. Snelheid
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
5. Inhoud
5. Inhoud
Nieuw!
5. Inhoud
5. Inhoud
“Een website is als ondergoed. Elke dag vers is beter.”
5. Inhoud
Publiceer regelmatig
Een vast patroon
Meerwaarde en relevantie
Actualiteit
5. Inhoud
CMS
Gebruik een Content Management Systeem
Website beheren: NIET via IT!
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
6. Toegankelijkheid
6. Toegankelijkheid
Bouw een toegankelijke site
Gebruiksvriendelijk
Cross-browser en cross-platform
Anysurfer
6. Toegankelijkheid
Gebruiksvriendelijk
User centered design
User testing
Usability
6. Toegankelijkheid
Cross-browser / Cross-platform
Werkt op PC/Apple/Linux
Werkt op IE/Firefox/Safari/Opera
Vergeet mobiel niet!
6. Toegankelijkheid
AnysurferIntroductie nodig?
(Het vroegere Blindsurfer)
www.anysurfer.be
6. Toegankelijkheid
Grootste traffic driver
SEO-vriendelijk!
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
7. Technologie
7. Technologie
Voortdurend nieuwe technologie
Flash - Flex - Air
AJAX
Podcast
Video
7. Technologie
Technologie is géén driver
Goed nadenken over meerwaarde
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
8
8. Interactie
8. Interactie
Laat doelgroep deelnemen
Test, applicaties, formulieren
Feedbackmechanismen (rating, review)
Commentaren, forum
Laat ze zelfs bijdragen aan de inhoud! (Oooh!)
Hé Bart!
En wat met dat heleWeb 2.0 ding?
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
9
web 2.0
9. Web 2.0
Web 2.0 neemt het artificiële membraantussen organisatie en publiek weg
9. Web 2.0
9. Web 2.0
"Web 2.0 is an architecture of participation"
TIM O’REILLY
9. Web 2.0
9. Web 2.0
9. Web 2.0
9. Web 2.0
Web 2.0 is geen ‘look’Gradiënten
Pastelkleuren
Afgeronde hoeken
9. Web 2.0
Web 2.0 = mensen
User-centric
Site-centric
9. Web 2.0 Het ‘Soylent Green’ moment
9. Web 2.0 Het ‘Soylent Green’ moment
The web is people
Het web wordt gebruikt door
mensen
Echte mensen, niet ‘users’
Mensen met kinderen
Mensen met passies
Web 2.0
Web 2.0 = mensen
conversatie
Behandel ze dus als mensen:
9. Web 2.0
Conversatie
(Ok, misschien zijn er dan toch 10 tips)
consistentie
typografie
draagbaarheid
inhoud
toegankelijkheid
snelheid
technologie
interactie
10
web 2.0 conversatie
Vragen?
Haal het maximum uit het web - 24/6/2008
Bart de Waelebart@netlash.com
www.netlash.comwww.ondernemeringent.be
top related