Embed Size (px)
DESCRIPTION
10 practical and hands-on tips to make your website more usable.
Citation preview
Titel tekst
Beschrijving slide
A website that works10 tips for a usable website
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
www.ondernemeringent.be
www.netlash.com
www.metatale.eu
www.kobedewaele.be
www.kopjekoffie.be
(Yes, that’s a lot of www)
You can find me at:
A website that works10 tips for a usable website
Any new technology knows 3 waves:
copy translate own
it’s not a brochure
it’s not a videoclip
it’s certainly not radio (podcast is dead)
The web is finding its own language
No 10 tips
(lots more)
I’ll give you8 basic principles
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
1. Consistency
Expectations
1. Consistency
logo
‘home’
breadcrumb
disclaimer
searchbox
navigation
language
1. Consistency
1. Consistency
You are here
Top left
With tagline (optional)
With link to homepage
1. Consistency
Logo
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!
Below main navigation
Shows the travelled path
Clickable, except last item
1. Consistency
Breadcrumb
Searchbox
Top right
Dangerous!
User expects Google...
1. Consistency
Preferably top horizontal
Subnavigation at the left
Not done: right or bottom
Navigation
1. Consistency
Bottom, in footer
Privacy statement, sitemap
For bigger sites: contact webmaster, about
Secondary navigation
1. Consistency
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
Consistency gives people grip
1. Consistency
1. Consistency
You are here
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
2. Typography
http://www.flickr.com/photos/dmitry-baranovskiy/489116782/
For the moment, people are still writing more to each other than they are using the phone
The web is text
2. Typography
No infinitely long lines
+- 55 characters per line
So: no liquid design
Line length
2. Typography
2. Typography New York Times
2. Typography Smashing magazine
Scalable fonts
Let users scale fonts themselves
No pixel values (use relative)
a-A is nothing more than a band aid
2. Typography
On screen: sans-serif.
Serif or 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. Typography
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
3. Portability
Don’t try to lure visitors to your websiteSpread your content to those placesthat already have visitors
Mohammed and the mountain
3. Portability
3. Portability
Presentation
3. Portability
3. Portability
Presentations
3. Portability
RSS = Really Simple Syndication
Makes content portable
RSS
http://nl.wikipedia.org/wiki/Really_Simple_Syndication
3. Portability
API = Application Programming Interface
Gives third parties access to your data
API
http://nl.wikipedia.org/wiki/Application_Programming_Interface
3. Portability
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
4. Speed
Visitors are impatient
Load fast (technical speed)
To the point (speed of content)
Scannable (structural speed)
4. Speed
http://www.websiteoptimization.com/services/analyze/
Test!
4. Speed
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
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!
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
6. Accessibility
6. Accessibility
Build an accessible site
Usable
Cross-browser and cross-platform
Anysurfer
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
Biggest traffic driver
SEO-friendly!
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
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
consistency
typography
portability
speed
content
accessibility
technology
interaction
8
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 thatWeb 2.0 thing?
consistency
typography
portability
speed
content
accessibility
technology
interaction
9
web 2.0
9. Web 2.0
Web 2.0 removes the artificial membranebetween the organisation and the public.
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 not a lookGradients
Pastel colors
Rounded corners
9. Web 2.0
Web 2.0 = people
User-centric
Site-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
conversation
So treat them as people:
9. Web 2.0
Conversation
(Ok, so maybe thereare 10 tips after all)
consistency
typography
portability
speed
content
accessibility
technology
interaction
10
web 2.0 conversation
Questions?
