A website that works?10 tips for a usable website.
A WEBSITE THAT WORKS
Good afternoon! My name is Bart.
I work at web agency Netlash.
... and a few other companies:
this is my daughter Merel
Im passionate about coffee
www.netlash.com
www.ondernemeringent.be
www.mereldewaele.be
www.kopjekoffie.be
www.twitter.com/netlash
You can find me at:
(Yes, thats a lot of www.)
A WEBSITE THATWORKS10 tips for a usable website
Any new technology knows 3 waves:copy - translate - own
its not a brochure
its not a videoclip
its certainly not radio (podcast is dead)
The web is finding its own language
No 10 tips
(lots more)
I will give you8 basic principles
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
1. Consistency
logo
breadcrumb
searchbox
language
Expectations
home
disclaimer
navigation
1. Consistency
top left
with tagline (optional)
with link to homepage
Logo
top left, below the logo
ISO (NL-FR-EN)
show all options
Language
first in main navigation, in logo
is expected
English terminology is ok!
Home
below main navigation
shows the travelled path
clickable, except last item
Breadcrumb
top right
dangerous!
user expects Google
Searchbox
preferably top horizontal
subnavigation at the left
not done: right or bottom
Navigation
bottom, in footer
privacy statement, sitemap
for bigger sites: contact webmaster, about
Secondary navigation
Its clear for them:
where they came from
where they are now
where they can go
in a visual language they know from other sites
Consistency gives people grip
1. Consistency
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
2. Typography
The web is text
For the moment, people are still writing more to each other than
they are using the phone.
no infinitely long lines
+- 55 characters per line
so: no liquid design
Line length
let users scale fonts themselves
no pixel values (use relative)
a-A is nothing more than a band aid
Scalable fonts
On screen: sans-serif.
Serif or Sans-serif?
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
3. Portability
Mohammed and the mountain
dont try to lure visitors to your websitespread your content to
those places that already have visitors
Really Simple Syndication
makes content portable
http://nl.wikipedia.org/wiki/Really_Simple_Syndication
RSS
Application Programming Interface
gives third parties access to your data
http://nl.wikipedia.org/wiki/Application_Programming_Interface
API
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
4. Speed
load fast (technical speed)
to the point (speed of content)
scannable (structural speed)
Visitors are impatient
http://www.websiteoptimization.com/services/analyze
Test!
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
5. Content
New!
5. Content
5. Content A website is like underwear.Refresh every day.
follow a set pattern
value and relevancy
news
Publish on a regular basis
use a Content Management System
update your website: NOT via IT!
CMS
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
6. Accessibility
usable
cross-browser and cross-platform
AnySurfer
Google
Facebook
Build an accessible site
user centered design
user testing
usability
Usable
works on PC/Apple/Linux
works on IE/Firefox/Safari/Opera/Chrome
iPad!
Mobile!
Cross-browser
www.anysurfer.be
AnySurfer
biggest traffic driver
SEO-friendly!
Google
like
search engine
Facebook
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
7. Technology
Flash - Flex - Air
Ajax
HTML 5
Video
There will always be new technology
think hard about the value
Technology should not be a driver
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
8. Interaction
tests, applications, forms
feedback mechanisms (rating, review)
comments, forum
let them even contribute content! (Ooooh!)
Let your audience participate
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
Hey Bart!
What about that Web 2.0 and Social thing?
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
social
9. Social
Web 2.0 removes the artifical membrane between the organisation
and the public.
Web 2.0 is an architecture of participation.Tim OReilly
Web 2.0 = people
Site-centric
User-centric
The Soylent Green moment.
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 = people
So treat them as people:conversation
Conversation
(Ok, so maybe there are 10 tips after all)
speed
portability
typography
consistency
technology
accessibility
content
interaction
8
social conversation
Questions?
twitter.com/[email protected]
