Your SlideShare is downloading. ×
10 tips for a usable website
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

10 tips for a usable website

47,139
views

Published on

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

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

Published in: Technology, Design

14 Comments
187 Likes
Statistics
Notes
No Downloads
Views
Total Views
47,139
On Slideshare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
3,234
Comments
14
Likes
187
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A website that works Titel tekst 10 tips for a usable website Beschrijving slide Bart De Waele - 22/6/2008
  • 2. Hi! My name is Bart
  • 3. I work at webagency Netlash and at a startup called MetaTale:
  • 4. This is my son Kobe
  • 5. I’m passionate about coffee
  • 6. 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)
  • 7. A website that works 10 tips for a usable website
  • 8. Any new technology knows 3 waves: copy translate own
  • 9. 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)
  • 10. No 10 tips (lots more)
  • 11. I’ll give you 8 basic principles
  • 12. 8 consistency content typography accessibility portability technology speed interaction
  • 13. 8 consistency content typography accessibility portability technology speed interaction
  • 14. 1. Consistency
  • 15. 1. Consistency Expectations logo breadcrumb searchbox language ‘home’ disclaimer navigation
  • 16. 1. Consistency
  • 17. 1. Consistency You are here
  • 18. 1. Consistency Logo Top left With tagline (optional) With link to homepage
  • 19. 1. Consistency Language Top left, below the logo ISO (NL-FR-EN) Show all options
  • 20. 1. Consistency Home First in main navigation, or in logo Is expected English terminology is ok!
  • 21. 1. Consistency Breadcrumb Below main navigation Shows the travelled path Clickable, except last item
  • 22. 1. Consistency Searchbox Top right Dangerous! User expects Google...
  • 23. 1. Consistency Navigation Preferably top horizontal Subnavigation at the left Not done: right or bottom
  • 24. 1. Consistency Secondary navigation Bottom, in footer Privacy statement, sitemap For bigger sites: contact webmaster, about
  • 25. 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
  • 26. 1. Consistency You are here
  • 27. 8 consistency content typography accessibility portability technology speed interaction
  • 28. 2. Typography http://www.flickr.com/photos/dmitry-baranovskiy/489116782/
  • 29. 2. Typography The web is text For the moment, people are still writing more to each other than they are using the phone
  • 30. 2. Typography Line length No infinitely long lines +- 55 characters per line So: no liquid design
  • 31. 2. Typography New York Times
  • 32. 2. Typography Smashing magazine
  • 33. 2. Typography Scalable fonts Let users scale fonts themselves No pixel values (use relative) a-A is nothing more than a band aid
  • 34. 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
  • 35. 8 consistency content typography accessibility portability technology speed interaction
  • 36. 3. Portability
  • 37. 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
  • 38. 3. Portability
  • 39. 3. Portability Presentation
  • 40. 3. Portability
  • 41. 3. Portability Presentations
  • 42. 3. Portability RSS RSS = Really Simple Syndication Makes content portable http://nl.wikipedia.org/wiki/Really_Simple_Syndication
  • 43. 3. Portability API API = Application Programming Interface Gives third parties access to your data http://nl.wikipedia.org/wiki/Application_Programming_Interface
  • 44. 8 consistency content typography accessibility portability technology speed interaction
  • 45. 4. Speed
  • 46. 4. Speed Visitors are impatient Load fast (technical speed) To the point (speed of content) Scannable (structural speed)
  • 47. 4. Speed Test! http://www.websiteoptimization.com/services/analyze/
  • 48. 8 consistency content typography accessibility portability technology speed interaction
  • 49. 5. Content
  • 50. 5. Content New!
  • 51. 5. Content
  • 52. 5. Content “A website is like underwear. Refresh each day.”
  • 53. 5. Content Publish on a regular basis Follow a set pattern Value and relevancy News
  • 54. 5. Content CMS Use a Content Management System. Update your website: NOT via IT!
  • 55. 8 consistency content typography accessibility portability technology speed interaction
  • 56. 6. Accessibility
  • 57. 6. Accessibility Build an accessible site Usable Cross-browser and cross-platform Anysurfer Google
  • 58. 6. Accessibility Usable User centered design User testing Usability
  • 59. 6. Accessibility Cross-browser Works on PC/Apple/Linux Works on IE/Firefox/Safari/Opera Don’t forget mobile!
  • 60. 6. Accessibility Anysurfer http://www.anysurfer.be
  • 61. 6. Accessibility Google Biggest traffic driver SEO-friendly!
  • 62. 8 consistency content typography accessibility portability technology speed interaction
  • 63. 7. Technology
  • 64. 7. Technology There will always be new technology Flash - Flex - Air AJAX Podcast Video
  • 65. 7. Technology Technology should not be a driver Think hard about the added value
  • 66. 8 consistency content typography accessibility portability technology speed interaction
  • 67. 8. Interaction
  • 68. 8. Interaction Let your audience participate Tests, applications, forms Feedback mechanisms (rating, review) Comments, forum Let them even contribute content! (Ooooh!)
  • 69. Hey Bart! What about that Web 2.0 thing?
  • 70. 9 consistency content typography accessibility portability technology speed interaction web 2.0
  • 71. 9. Web 2.0
  • 72. 9. Web 2.0 Web 2.0 removes the artificial membrane between the organisation and the public.
  • 73. 9. Web 2.0 quot;Web 2.0 is an architecture of participationquot; TIM O’REILLY
  • 74. 9. Web 2.0
  • 75. 9. Web 2.0
  • 76. 9. Web 2.0
  • 77. 9. Web 2.0 Web 2.0 is not a look Gradients Pastel colors Rounded corners
  • 78. 9. Web 2.0 Web 2.0 = people Site-centric User-centric
  • 79. 9. Web 2.0 The ‘Soylent Green’ moment
  • 80. 9. Web 2.0 The ‘Soylent Green’ moment The web is people
  • 81. The web is used by people
  • 82. Real people, not ‘users’
  • 83. People with children
  • 84. People with passions
  • 85. Web 2.0 Web 2.0 = people So treat them as people: conversation
  • 86. 9. Web 2.0 Conversation
  • 87. (Ok, so maybe there are 10 tips after all)
  • 88. 10 consistency content typography accessibility portability technology speed interaction web 2.0 conversation
  • 89. Questions?
  • 90. Bart de Waele bart@netlash.com www.netlash.com www.ondernemeringent.be Bart De Waele - 22/6/2008

×