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
I’m passionate about coffee
You can find me at:‣   www.netlash.com‣   www.ondernemeringent.be‣   www.mereldewaele.be‣   www.kopjekoffie.be‣   www.twitte...
A WEBSITE THATWORKS10 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 ...
No 10 tips(lots more)
I will give you8 basic principles
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
1. Consistency
Expectations‣   logo         ‣   ‘home’‣   breadcrumb   ‣   disclaimer‣   searchbox    ‣   navigation‣   language
1. Consistency
Logo‣   top left‣   with tagline (optional)‣   with link to homepage
Language‣   top left, below the logo‣   ISO (NL-FR-EN)‣   show all options
Home‣   first in main navigation, in logo‣   is expected‣   English terminology is ok!
Breadcrumb‣   below main navigation‣   shows the travelled path‣   clickable, except last item
Searchbox‣   top right‣   dangerous!‣   user expects Google
Navigation‣   preferably top horizontal‣   subnavigation at the left‣   not done: right or bottom
Secondary navigation‣   bottom, in footer‣   privacy statement, sitemap‣   for bigger sites: contact webmaster, about
Consistency gives people gripIt’s clear for them:‣   where they came from‣   where they are now‣   where they can goin a v...
1. Consistency
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
2. Typography
The web is textFor the moment, people are still writingmore to each other than they are using thephone.
Line length‣   no infinitely long lines‣   +- 55 characters per line‣   so: no liquid design
Scalable fonts‣   let users scale fonts themselves‣   no pixel values (use relative)‣   a-A is nothing more than a band aid
Serif or Sans-serif?On screen: sans-serif.ed ut perspiciatis unde omnis iste     ed ut perspiciatis unde omnisnatus error ...
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
3. Portability
Mohammed and the mountaindon’t try to lure visitors to your websitespread your content to those places thatalready have vi...
RSS‣   Really Simple Syndication‣   makes content portable‣   http://nl.wikipedia.org/wiki/Really_Simple_Syndication
API‣   Application Programming Interface‣   gives third parties access to your data‣   http://nl.wikipedia.org/wiki/Applic...
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
4. Speed
Visitors are impatient‣   load fast (technical speed)‣   to the point (speed of content)‣   scannable (structural speed)
Test!http://www.websiteoptimization.com/services/analyze
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
5. Content
New!
5. Content
5. Content   “A website is like underwear.             Refresh every day.”
Publish on a regular basis‣   follow a set pattern‣   value and relevancy‣   news
CMS‣   use a Content Management System‣   update your website: NOT via IT!
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
6. Accessibility
Build an accessible site‣   usable‣   cross-browser and cross-platform‣   AnySurfer‣   Google‣   Facebook
Usable‣   user centered design‣   user testing‣   usability
Cross-browser‣   works on PC/Apple/Linux‣   works on IE/Firefox/Safari/Opera/Chrome‣   iPad!‣   Mobile!
AnySurfer‣   www.anysurfer.be
Google‣   biggest traffic driver‣   SEO-friendly!
Facebook‣   ‘like’‣   search engine
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
7. Technology
There will always be new technology‣   Flash - Flex - Air‣   Ajax‣   HTML 5‣   Video
Technology should not be a driverthink hard about the value
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
8. Interaction
Let your audience participate‣   tests, applications, forms‣   feedback mechanisms (rating, review)‣   comments, forum‣   ...
8consistency       contenttypography        accessibilityportability       technologyspeed             interaction
Hey Bart!What about that Web   2.0and Social thing?
8consistency       contenttypography        accessibilityportability       technologyspeed             interactionsocial
9. Social
Web 2.0 removes the artifical membranebetween the organisation and the public.
“Web 2.0 is an architectureof participation.”Tim O’Reilly
Web 2.0 = peopleSite-centricUser-centric
The “Soylent Green” moment.
The web is peopleThe “Soylent Green” moment.
The web is used by people.
Real people, not ‘users’
People with children
People with passions
Web 2.0 = peopleSo treat them as people:conversation
Conversation
(Ok, so maybe there are 10 tips after all)
8consistency       contenttypography        accessibilityportability       technologyspeed             interactionsocial  ...
Questions?
twitter.com/netlashbart@netlash.comwww.netlash.com
10 tips for a usable website
10 tips for a usable website
10 tips for a usable website
10 tips for a usable website
10 tips for a usable website
10 tips for a usable website
Upcoming SlideShare
Loading in...5
×

10 tips for a usable website

4,808

Published on

A website that works?
10 tips for a usable website.

Published in: Business, Technology, Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,808
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
197
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

10 tips for a usable website

  1. 1. A WEBSITE THAT WORKS
  2. 2. Good afternoon! My name is Bart.
  3. 3. I work at web agency Netlash.... and a few other companies:
  4. 4. this is my daughter Merel
  5. 5. I’m passionate about coffee
  6. 6. You can find me at:‣ www.netlash.com‣ www.ondernemeringent.be‣ www.mereldewaele.be‣ www.kopjekoffie.be‣ www.twitter.com/netlash (Yes, that’s a lot of www.)
  7. 7. A WEBSITE THATWORKS10 tips for a usable website
  8. 8. Any new technology knows 3 waves:copy - translate - own
  9. 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. 10. No 10 tips(lots more)
  11. 11. I will give you8 basic principles
  12. 12. 8consistency contenttypography accessibilityportability technologyspeed interaction
  13. 13. 1. Consistency
  14. 14. Expectations‣ logo ‣ ‘home’‣ breadcrumb ‣ disclaimer‣ searchbox ‣ navigation‣ language
  15. 15. 1. Consistency
  16. 16. Logo‣ top left‣ with tagline (optional)‣ with link to homepage
  17. 17. Language‣ top left, below the logo‣ ISO (NL-FR-EN)‣ show all options
  18. 18. Home‣ first in main navigation, in logo‣ is expected‣ English terminology is ok!
  19. 19. Breadcrumb‣ below main navigation‣ shows the travelled path‣ clickable, except last item
  20. 20. Searchbox‣ top right‣ dangerous!‣ user expects Google
  21. 21. Navigation‣ preferably top horizontal‣ subnavigation at the left‣ not done: right or bottom
  22. 22. Secondary navigation‣ bottom, in footer‣ privacy statement, sitemap‣ for bigger sites: contact webmaster, about
  23. 23. Consistency gives people gripIt’s clear for them:‣ where they came from‣ where they are now‣ where they can goin a visual language they know from other sites
  24. 24. 1. Consistency
  25. 25. 8consistency contenttypography accessibilityportability technologyspeed interaction
  26. 26. 2. Typography
  27. 27. The web is textFor the moment, people are still writingmore to each other than they are using thephone.
  28. 28. Line length‣ no infinitely long lines‣ +- 55 characters per line‣ so: no liquid design
  29. 29. Scalable fonts‣ let users scale fonts themselves‣ no pixel values (use relative)‣ a-A is nothing more than a band aid
  30. 30. Serif or Sans-serif?On screen: sans-serif.ed ut perspiciatis unde omnis iste ed ut perspiciatis unde omnisnatus error sit voluptatem iste natus error sit voluptatemaccusantium doloremque accusantium doloremquelaudantium, totam rem aperiam, laudantium, totam rem aperiam,eaque ipsa quae ab illo inventore eaque ipsa quae ab illoveritatis et quasi architecto beatae inventore veritatis et quasivitae dicta sunt explicabo. Nemo architecto beatae vitae dictaenim ipsam voluptatem quia sunt explicabo. Nemo enim
  31. 31. 8consistency contenttypography accessibilityportability technologyspeed interaction
  32. 32. 3. Portability
  33. 33. Mohammed and the mountaindon’t try to lure visitors to your websitespread your content to those places thatalready have visitors
  34. 34. RSS‣ Really Simple Syndication‣ makes content portable‣ http://nl.wikipedia.org/wiki/Really_Simple_Syndication
  35. 35. API‣ Application Programming Interface‣ gives third parties access to your data‣ http://nl.wikipedia.org/wiki/Application_Programming_Interface
  36. 36. 8consistency contenttypography accessibilityportability technologyspeed interaction
  37. 37. 4. Speed
  38. 38. Visitors are impatient‣ load fast (technical speed)‣ to the point (speed of content)‣ scannable (structural speed)
  39. 39. Test!http://www.websiteoptimization.com/services/analyze
  40. 40. 8consistency contenttypography accessibilityportability technologyspeed interaction
  41. 41. 5. Content
  42. 42. New!
  43. 43. 5. Content
  44. 44. 5. Content “A website is like underwear. Refresh every day.”
  45. 45. Publish on a regular basis‣ follow a set pattern‣ value and relevancy‣ news
  46. 46. CMS‣ use a Content Management System‣ update your website: NOT via IT!
  47. 47. 8consistency contenttypography accessibilityportability technologyspeed interaction
  48. 48. 6. Accessibility
  49. 49. Build an accessible site‣ usable‣ cross-browser and cross-platform‣ AnySurfer‣ Google‣ Facebook
  50. 50. Usable‣ user centered design‣ user testing‣ usability
  51. 51. Cross-browser‣ works on PC/Apple/Linux‣ works on IE/Firefox/Safari/Opera/Chrome‣ iPad!‣ Mobile!
  52. 52. AnySurfer‣ www.anysurfer.be
  53. 53. Google‣ biggest traffic driver‣ SEO-friendly!
  54. 54. Facebook‣ ‘like’‣ search engine
  55. 55. 8consistency contenttypography accessibilityportability technologyspeed interaction
  56. 56. 7. Technology
  57. 57. There will always be new technology‣ Flash - Flex - Air‣ Ajax‣ HTML 5‣ Video
  58. 58. Technology should not be a driverthink hard about the value
  59. 59. 8consistency contenttypography accessibilityportability technologyspeed interaction
  60. 60. 8. Interaction
  61. 61. Let your audience participate‣ tests, applications, forms‣ feedback mechanisms (rating, review)‣ comments, forum‣ let them even contribute content! (Ooooh!)
  62. 62. 8consistency contenttypography accessibilityportability technologyspeed interaction
  63. 63. Hey Bart!What about that Web 2.0and Social thing?
  64. 64. 8consistency contenttypography accessibilityportability technologyspeed interactionsocial
  65. 65. 9. Social
  66. 66. Web 2.0 removes the artifical membranebetween the organisation and the public.
  67. 67. “Web 2.0 is an architectureof participation.”Tim O’Reilly
  68. 68. Web 2.0 = peopleSite-centricUser-centric
  69. 69. The “Soylent Green” moment.
  70. 70. The web is peopleThe “Soylent Green” moment.
  71. 71. The web is used by people.
  72. 72. Real people, not ‘users’
  73. 73. People with children
  74. 74. People with passions
  75. 75. Web 2.0 = peopleSo treat them as people:conversation
  76. 76. Conversation
  77. 77. (Ok, so maybe there are 10 tips after all)
  78. 78. 8consistency contenttypography accessibilityportability technologyspeed interactionsocial conversation
  79. 79. Questions?
  80. 80. twitter.com/netlashbart@netlash.comwww.netlash.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×