Your SlideShare is downloading. ×
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
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
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
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
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
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
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
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
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
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
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
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
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
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
10 tips for a usable website
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

4,768

Published on

A website that works? …

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

×