A website that works
Titel tekst
10 tips for a
usable website
Beschrijving slide
Bart De Waele - 22/6/2008

Hi! My name is Bart

I work at webagency Netlash
and at a startup called MetaTale:

This is my son Kobe

I’m passionate about coffee

You can find me at:
www.ondernemeringent.be
www.netlash.com
www.metatale.eu
www.kobedewaele.be
www.kopjekoffie.be
(Yes, that’s a lot of www)

A website that works
10 tips for a usable website

Any new technology knows 3 waves:
copy translate own

The web is finding its own language
it’s not a brochure
it’s not a videoclip
it’s certainly not radio (podcast is dead)

No 10 tips
(lots more)

I’ll give you
8 basic principles

8
consistency content
typography accessibility
portability technology
speed interaction

8
consistency content
typography accessibility
portability technology
speed interaction

1. Consistency

1. Consistency
Expectations
logo breadcrumb searchbox language
‘home’ disclaimer navigation

1. Consistency

1. Consistency
You are here

1. Consistency
Logo
Top left
With tagline (optional)
With link to homepage

1. Consistency
Language
Top left, below the logo
ISO (NL-FR-EN)
Show all options

1. Consistency
Home
First in main navigation, or in logo
Is expected
English terminology is ok!

1. Consistency
Breadcrumb
Below main navigation
Shows the travelled path
Clickable, except last item

1. Consistency
Searchbox
Top right
Dangerous!
User expects Google...

1. Consistency
Navigation
Preferably top horizontal
Subnavigation at the left
Not done: right or bottom

1. Consistency
Secondary navigation
Bottom, in footer
Privacy statement, sitemap
For bigger sites: contact webmaster, about

1. Consistency
Consistency gives people grip
It’s clear for them:
- where they came from
- where they are now
- where they can go
In a visual language they know from other sites

1. Consistency
You are here

8
consistency content
typography accessibility
portability technology
speed interaction

2. Typography
http://www.flickr.com/photos/dmitry-baranovskiy/489116782/

2. Typography
The web is text
For the moment, people are still
writing more to each other
than they are using the phone

2. Typography
Line length
No infinitely long lines
+- 55 characters per line
So: no liquid design

2. Typography New York Times

2. Typography Smashing magazine

2. Typography
Scalable fonts
Let users scale fonts themselves
No pixel values (use relative)
a-A is nothing more than a band aid

2. Typography
Serif or Sans-serif?
On screen: sans-serif.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
consequat. Duis autem vel eum iriure dolor in hendrerit in Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
vulputate velit esse molestie consequat, vel illum dolore eu feugiat molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
blandit praesent luptatum zzril delenit augue duis dolore te feugait delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option soluta nobis eleifend option congue nihil imperdiet doming id quod
congue nihil imperdiet doming id quod mazim placerat facer mazim placerat facer possim assum. Typi non habent claritatem insitam;
est usus legentis in iis qui facit eorum claritatem. Investigationes
possim assum. Typi non habent claritatem insitam; est usus
demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas
legentis in iis qui facit eorum claritatem. Investigationes
est etiam processus dynamicus, qui sequitur mutationem consuetudium
demonstraverunt lectores legere me lius quod ii legunt saepius.
lectorum. Mirum est notare quam littera gothica, quam nunc putamus
Claritas est etiam processus dynamicus, qui sequitur mutationem

8
consistency content
typography accessibility
portability technology
speed interaction

3. Portability

3. Portability
Mohammed and the mountain
Don’t try to lure visitors to your website
Spread your content to those places
that already have visitors

3. Portability

3. Portability
Presentation

3. Portability

3. Portability
Presentations

3. Portability
RSS
RSS = Really Simple Syndication
Makes content portable
http://nl.wikipedia.org/wiki/Really_Simple_Syndication

3. Portability
API
API = Application Programming Interface
Gives third parties access to your data
http://nl.wikipedia.org/wiki/Application_Programming_Interface

8
consistency content
typography accessibility
portability technology
speed interaction

4. Speed

4. Speed
Visitors are impatient
Load fast (technical speed)
To the point (speed of content)
Scannable (structural speed)

4. Speed
Test!
http://www.websiteoptimization.com/services/analyze/

8
consistency content
typography accessibility
portability technology
speed interaction

5. Content

5. Content
New!

5. Content

5. Content
“A website is like underwear.
Refresh each day.”

5. Content
Publish on a regular basis
Follow a set pattern
Value and relevancy
News

5. Content
CMS
Use a Content Management System.
Update your website: NOT via IT!

8
consistency content
typography accessibility
portability technology
speed interaction

6. Accessibility

6. Accessibility
Build an accessible site
Usable
Cross-browser and cross-platform
Anysurfer
Google

6. Accessibility
Usable
User centered design
User testing
Usability

6. Accessibility
Cross-browser
Works on PC/Apple/Linux
Works on IE/Firefox/Safari/Opera
Don’t forget mobile!

6. Accessibility
Anysurfer
http://www.anysurfer.be

6. Accessibility
Google
Biggest traffic driver
SEO-friendly!

8
consistency content
typography accessibility
portability technology
speed interaction

7. Technology

7. Technology
There will always be new technology
Flash - Flex - Air
AJAX
Podcast
Video

7. Technology
Technology should not be a driver
Think hard about the added value

8
consistency content
typography accessibility
portability technology
speed interaction

8. Interaction

8. Interaction
Let your audience participate
Tests, applications, forms
Feedback mechanisms (rating, review)
Comments, forum
Let them even contribute content! (Ooooh!)

Hey Bart!
What about that
Web 2.0 thing?

9
consistency content
typography accessibility
portability technology
speed interaction
web 2.0

9. Web 2.0

9. Web 2.0
Web 2.0 removes the artificial membrane
between the organisation and the public.

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 not a look
Gradients
Pastel colors
Rounded corners

9. Web 2.0
Web 2.0 = people
Site-centric
User-centric

9. Web 2.0 The ‘Soylent Green’ moment

9. Web 2.0 The ‘Soylent Green’ moment
The web is
people

The web is used
by people

Real people, not ‘users’

People with children

People with passions

Web 2.0
Web 2.0 = people
So treat them as
people:
conversation

9. Web 2.0
Conversation

(Ok, so maybe there
are 10 tips after all)

10
consistency content
typography accessibility
portability technology
speed interaction
web 2.0 conversation

Questions?

Bart de Waele
bart@netlash.com
www.netlash.com
www.ondernemeringent.be
Bart De Waele - 22/6/2008