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.

Is This Clickable? - Change how you look at the web

452 views

Published on

A straightforward usability and user experience presentation for content authors. Provides some useful tips for creating easy to use navigation, nice links and buttons, helpful page title and readable content.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Is This Clickable? - Change how you look at the web

  1. 1. BEW EHT  A ?ETL KOA KCIOL CNAHC BOL UOY W H EG SIHT SI Colin Calnan / @colincalnan / colin.calnan@gmail.com
  2. 2. "?ESU OT YSAE SI ETIS BEW YM ERUS EKAM OT TNAW I FI OD DLUOHS I GNIHT TNATROPMI TSOM EHT S'TAHW"
  3. 3. .YAWA SKCILC 2 NAHT EROM REVE EB DLUOHS GNIHTON
  4. 4. Steve Krug condensed the answer into one short sentence !KNIHT EM EKAM T'NOD
  5. 5. SMETI YADYREVE OT DEILPPA
  6. 6. SGNIHT YRACS OT DEILPPA
  7. 7. ?KNIHT SU SEKAM TAHW All kinds of things make you think unnecessarily. Clever names Marketing names Company-specific names
  8. 8. SEMAN ELPMIS Due to company policy you may be locked into Hydro-ite's but this requires thinking. It's always best to go for the more obvious.
  9. 9. SNOTTUB & SKNIL ELPMIS
  10. 10. KNIHT OT DEEN EHT GNICUDER 1. Obvious 2. Self evident 3. Self explanatory
  11. 11. ?SUOIVBO WOH
  12. 12. SUOIVBO
  13. 13. TNEDIVE FLES Self evident enough that if you're next door neighbour looked at your home page they would say... ."_ _ _ A S'TI ,HO"
  14. 14. YROTANALPXE FLES Navigation and menu links are clear, requiring no explanation or additional thought. Page titles are concise and clearly identify the page's topic. Links are obviously decorated and there is no need to instruct visitors to 'click here'. Calls-to-action and buttons are easily distinguished.
  15. 15. TSET PORD DLOFDNILB EHT If you were dropped into a website and a blindfold taken off, could you quickly answer these questions: What site is this? (Site ID) What page am I on? (Page name) What are the major sections of this site? (Sections) What are my options at this level? (Local navigation) Where am I in the scheme of things? ("You are here" indicators)
  16. 16. FLESRUOY TSET EHT YRT 1. Choose a page anywhere in a site at random, and print a screenshot of it. 2. Hold it at arm's length or squint so you can't really study it closely. 3. As quickly as possible, try to find and circle each of the following items. (You won’t find all of the items on every page.)
  17. 17. FLESRUOY TSET EHT YRT :EGAP SIHT NO SAERA GNIWOLLOF EHT DNIF 1. Site ID 2. Page name 3. Sections & Subsections 4. Local Navigation 5. "Where am I" indicators
  18. 18. ELPMAXE
  19. 19. NOITAGIVAN ELBASU GNITAERC About 60% of the time, people cannot find the information they're seeking on a website. Approximately 50% of potential sales are lost because users can't find information they're looking for. Source: usability.gov
  20. 20. ECALP DRADNATS A NI NOITAGIVAN TUP
  21. 21. UNEM NIAM NI SMETI 7 NAHT EROM ON
  22. 22. EVITPIRCSED & CIFICEPS EB Don’t label your pages What We Do / Products / Services / Who We Are Do use specific & descriptive labels What is BCHydro / Powersmart Explained / Using HydroWeb
  23. 23. TNATROPMI SI REDRO Items that appear at the beginning & end of a list are most effective
  24. 24. SKNIL ECIN GNITAERC
  25. 25. Credit: smashingmagazine.com SCINAHCEM ESUOM NO SUCOF HCUM OOT STUP "KCILC"
  26. 26. Credit: smashingmagazine.com GNIKCILC ERA SRESU TAHW SLAECNOC "EREH"
  27. 27. Credit: smashingmagazine.com EROM NEVE ESUFNOC SKNIL "EREH" ELPITLUM
  28. 28. SKNIL GNISARHP SNUON OT KNIL Credit: smashingmagazine.com
  29. 29. SKNIL GNISARHP KNIL A NO DNE Credit: smashingmagazine.com
  30. 30. TUOYAL & SELTIT EGAP
  31. 31. SNGIS TEERTS NILBUD On side of builings, out of view, unreadable from a distance
  32. 32. SNGIS TEERTS REVUOCNAV Above intersection, highly visible, easily read from a distance
  33. 33. TLUSER EHT When driving in Vancouver, you can devote less energy and attention to dealing with where you are and more to traffic and pedestrians.
  34. 34. .BEW EHT FO SNGIS TEERTS EHT ERA SEMAN EGAP When things are going well we may not notice page names at all. But as soon as we sense that we may not be headed in the right direction, we need to be able to spot the page name effortlessly so we can get our bearings.
  35. 35. EMAN A SDEEN EGAP YREVE
  36. 36. DEKCILC UOY TAHW HCTAM DLUOHS EMAN EHT Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug
  37. 37. "GNIK SI TNETNOC" Content is where I expect much of the real money will be made on the Internet, just as it was in broadcasting. )6991/3/1( SETAG LLIB
  38. 38. TNETNOC ESICNOC ESU ?YHW We search for keywords, read in a non-linear fashion. We skip around instead of reading it from top to bottom.
  39. 39. A 58% increase in usability can be achieved simply by cutting roughly half the words on the webpages being studied. Source: Jakob Nielsen Usability Report
  40. 40. .OD NAC UOY TAHW Get to the point as quickly as possible. Cut out unnecessary information. Omit needless words Use easy-to-understand, shorter, common words and phrases. Avoid long paragraphs and sentences.
  41. 41. TNETNOC RUOY TSET MOC.ELBA­DAER The Readability Test Tool allows you to plug in a URL or text, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.
  42. 42. TNETNOC PU KAERB OT SGNIDAEH ESU Internet readers inspect webpages in blocks and sections, or what is called "block reading." - Web content management expert Gerry McGovern
  43. 43. NRETTAP DEPAHS­F Credit: http://mashable.com/
  44. 44. SKCOLB OTNI KAERB Credit: http://mashable.com
  45. 45. Credit: mashable.com DIMARYP DETREVNI EHT ESU
  46. 46. DIMARYP DETREVNI EHT ESU Credit: ontentmarketinginstitute.com
  47. 47. GNITTAMROF TXET & STSIL DETELLUB ESU Users fixate longer on bulleted lists and text formatting (such as bolding and italics)
  48. 48. NOITAGIVAN ESICNOC ,EVITPIRCSED ­ .SORB HTIMS SELPMAXE
  49. 49. NOITAGIVAN DEREDRO ,EVITPIRCSED ­ RAEWMIWS REFEIK SELPMAXE
  50. 50. DNE EHT by Colin Calnan @colincalnan / colin.calnan@gmail.com / ca.linkedin.com/in/colincalnan

×