• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
10 tips for a usable website
 

10 tips for a usable website

on

  • 5,041 views

A website that works?

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

Statistics

Views

Total Views
5,041
Views on SlideShare
5,009
Embed Views
32

Actions

Likes
14
Downloads
196
Comments
0

5 Embeds 32

http://askcodr.com 27
http://paper.li 2
http://twitter.com 1
http://www.twylah.com 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    10 tips for a usable website 10 tips for a usable website Presentation Transcript

    • 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.twitter.com/netlash (Yes, that’s a lot of www.)
    • 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 dead)
    • 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 visual language they know from other sites
    • 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 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
    • 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 visitors
    • 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/Application_Programming_Interface
    • 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‣ let them even contribute content! (Ooooh!)
    • 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 conversation
    • Questions?
    • twitter.com/netlashbart@netlash.comwww.netlash.com