advertisement

10 tips for a usable website

57 %
43 %
advertisement
Information about 10 tips for a usable website

Published on June 22, 2008

Author: netlash

Source: slideshare.net

Description

10 practical and hands-on tips to make your website more usable.
advertisement

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 quot;Web 2.0 is an architecture of participationquot; 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

Add a comment

Related pages

Ten Tips to Make Your Website Usable - System Concepts Ltd

Ten Tips to Make Your Website Usable. ... 10 Usability Tips. Make the value proposition clear on the home page Include engaging content Make links visible
Read more

10 Tips to Create a More Usable Web | Webdesigner Depot

Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that ...
Read more

10 Important Tips to Build a More Usable E-commerce Website

Follow these 10 tips to build a more usable ecommerce website. With growing competition in ecommerce, you should know how to draw customers and how to make ...
Read more

10 Usability Tips for Web Designers | Webdesigner Depot

... usability is making your website easy for your visitors to find the information they ... 10 Usability Tips for Web ... use more usable methods ...
Read more

10 Steps To A More Usable Ecommerce Website - SpyreStudios

Thanks for the tips, every successful ecommerce website should you using these techniques. ... 10 Steps To A More Usable Ecommerce Website ...
Read more

Katalog multimediów - 10 tips for a usable website

10 tips for a usable website. Serwis poświęcony tworzeniu serwisów internetowych, stron mobilnych, SEO, jak i gotowym skryptom i komponentom.
Read more

10 Tips To Make Your Website’s Layout More Usable

8 Responses to “10 Tips To Make Your Website’s Layout More Usable” Marjie Says: February 11th, 2008 at 3:34 pm. Please check your spelling!
Read more

5 Tips To Creating A More Usable E-Commerce Site - Hongkiat

5 Tips To Creating A More Usable E-Commerce Site. ... No e-commerce website is complete without proper ... 10 Essential Things Your E-Commerce Site ...
Read more