Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10 tips for a usable website

56,050 views

Published on

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

Published in: Technology, Design

10 tips for a usable website

  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

×