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

Google

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

Google

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