Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why "Your" Website Sucks

Lisa
December 04, 2015

Why "Your" Website Sucks

Lisa

December 04, 2015
Tweet

More Decks by Lisa

Other Decks in Design

Transcript

  1. Why Your* (Library)
    Website Sucks
    Lisa Rabey
    h7p://lisa.rabey.net
    December 4, 2015
    *general “you”

    View full-size slide

  2. TOP 5 7 REASONS YOUR
    WEBSITE SUCKS

    View full-size slide

  3. IT’S NOT DESIGNED FOR THE END
    USER

    View full-size slide

  4. •  Accessibility
    •  e.g. Those who are visually impaired cannot navigate your site with assisNve
    technologies (screen readers, speech recogniNon)
    •  It assumes all users are not visually or hearing impaired
    •  Too many cooks in the kitchen
    •  Development is dictated by those who have an idea on how the site should work/
    look as opposed to how the user engages with the site
    •  It does not remember those who have already visited the site
    •  Cookies, and other technologies, can be deployed to remember if you’ve been to
    that site or not.
    •  e.g Sites that conNnually use popups to remind you to sign up for this, sign up for
    that even though you have visited the site a million Nmes
    •  No contact informaNon, address, or hours
    •  Lack of navigaNon bar
    •  Branding and design is inconsistent with the rest of the site
    •  Your site is not responsive or mobilized
    •  URLs do not tell the user what site/page they are on
    •  The landing page is too long
    •  Does not uNlize breadcrumbs

    View full-size slide

  5. IT CONTAINS A CAROUSEL*
    *HTTP://SHOULDIUSEACAROUSEL.COM/

    View full-size slide

  6. •  AutomaNc image sliders, or carousels, are the
    pox on those who uses it
    •  AutomaNc image sliders are typically placed on
    the front page with “important” images/content
    that rotates in a single space
    •  Roughly 1% of users click on one of those
    features
    •  It poorly represents content on the page
    •  Carousels do not meet accessibility requirements

    View full-size slide

  7. YOU USE FLASH

    View full-size slide

  8. •  Flash is not supported on (most) mobile devices
    –  As of October 2014, 64% of Americans own a smartphone
    and as of January 2014, 42% of Americans own a tablet*
    •  Using Flash means you’re losing over 50% of your web traffic
    •  Flash is not indexed by Google
    •  It is more expensive to develop
    •  It is a proprietary so`ware, owned by Adobe, which
    means your end users will have to use a plugin to view
    the content
    •  Flash is dead, long live Flash
    *h7p://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

    View full-size slide

  9. IT’S TOO BUSY

    View full-size slide

  10. •  Content is slap dashed across the landing page
    •  Content is repeated
    •  Inconsistent font sizes and colors
    •  It’s too distracNng
    •  Content and imagery are in compeNNon with
    each other
    •  Not enough white space
    –  White space (negaNve space) is space that is
    unmarked by content or images

    View full-size slide

  11. IT’S NOT CURRENT

    View full-size slide

  12. •  Content is outdated and irrelevant
    •  Social media content is not/under uNlized
    •  Design is outmoded
    •  It’s not designed for modern browsers
    – Internet Explorer is dead. Long live Internet
    Explorer.
    •  It does not use redirects
    – Clicking on an old link automaNcally takes you to
    the correct page rather giving you a 404

    View full-size slide

  13. IT’S NOT MOBILIZED
    OR RESPONSIVE

    View full-size slide

  14. •  Mobilized means the site can be viewed easily on
    a smartphone or tablet
    –  Remember, 64% of Americans have a smartphone and
    42% of Americans have a tablet
    •  Responsive means the site will remain as
    designed when the browser is resized
    •  Mobile and responsive sites can adhere to
    accessibility standards
    •  Be careful of creaNng a mobile app (as opposed
    to making your website mobile) due to reasons
    above

    View full-size slide

  15. PDFS ARE USED INSTEAD OF PAGES
    TO DISSEMINATE INFORMATION

    View full-size slide

  16. •  PDFs are a proprietary format (Again, Adobe)
    •  They cannot be mobilized or responsive
    •  Are not HTML subsNtutes
    •  This is not saNre:
    •  They cannot be indexed by search engines
    •  Content cannot be measured
    –  e.g. How users are accessing and using the informaNon
    •  They cannot be updated or reused without creaNng a new PDF

    View full-size slide

  17. It’s 2015. Why are you not
    thinking about your end users?

    View full-size slide

  18. Websites Evaluated
    •  Weil Cornell Medical College
    – h7p://library.med.cornell.edu/
    •  Lane Medical Library, Stanford
    – h7ps://lane.stanford.edu/
    •  Harvey Crushing / John Hay Whitney Medical
    Library
    – h7p://library.medicine.yale.edu/

    View full-size slide

  19. Weill Cornell Medical College

    View full-size slide

  20. Good Points
    •  Branding is consistent with the medical college’s site and the library’s child pages
    •  Search box is easily found
    •  Contact informaNon is on the landing page
    •  A summary of the blog/news feed is on the landing page
    •  Library services are on the landing page
    •  It has a list of related links within the Cornell network

    View full-size slide

  21. Bad Point
    It does not adhere to accessibility standards

    View full-size slide

  22. Bad Point
    Lack of navigaNon bar

    View full-size slide

  23. Bad Point
    Too much informaNon

    View full-size slide

  24. Bad Point
    It uses a carousel

    View full-size slide

  25. Bad Point
    Mobilized But Not Responsive

    View full-size slide

  26. Lane Medical College

    View full-size slide

  27. Good Points
    •  Branding and design is consistent with the medical college
    •  Contact and locaNon are easily found on the landing page
    •  Search box is prominent
    •  News/blog is prominent on the landing page
    •  Quick access to popular materials

    View full-size slide

  28. Bad Point
    RepeNNon

    View full-size slide

  29. Bad Point
    How to find informaNon is buried

    View full-size slide

  30. Bad Point
    CollecNon/Archives Not Separated Out

    View full-size slide

  31. Bad Point
    Mobile But Not Responsive

    View full-size slide

  32. Bad Point
    It does not adhere to accessibility standards

    View full-size slide

  33. Yale Medical Library

    View full-size slide

  34. Good Points
    •  Single scroll
    •  Responsive and mobilized
    •  Contact informaNon/hours readily available on the landing
    page
    •  Search and navigaNon bars are easily available
    •  Links to Yale sites within their network
    •  Good use of white space
    •  InformaNon does not compete for a7enNon

    View full-size slide

  35. Bad Point
    Uses Google for search

    View full-size slide

  36. Bad Point
    Use of carousel

    View full-size slide

  37. Bad Point
    It does not adhere to accessibility standards

    View full-size slide

  38. Bad Point
    RepeNNon

    View full-size slide

  39. To Sum
    •  2 out of 3 sites used red/white as the main color choices
    –  Those with red-green color blindness see reds as yellow, oranges, or beige
    •  2 out of 3 sites scrolled beyond 1 page
    •  2 out of 3 sites had too much informaNon on the landing page
    •  1 out of 3 provided a library calendar
    •  Not enough white space
    •  InformaNon is disorganized
    •  No federated search
    •  Load Nmes varied: Cornell at 3 seconds, Stanford and Yale at 1.5 seconds,
    •  Social media is uNlized and current
    •  Use of PDFs to disseminate informaNon
    •  Use of carousels
    •  Flash was not used
    •  Sites rendered correctly in various browsers (Safari, Firefox, Chrome)
    •  All three sites averaged 3-4 clicks to get informaNon. Users should be able to find informaNon
    within 1-2 clicks
    •  None of the sites uNlized breadcrumbs
    •  1 out of 3 uNlized SSL

    View full-size slide

  40. HOW TO CHANGE LIBRARY USERS
    PERCEPTION OF YOUR WEBSITE

    View full-size slide

  41. CONDUCT USABILITY STUDIES

    View full-size slide

  42. MAKE YOUR SITE ACCESSIBLE

    View full-size slide

  43. UTILIZE WEB STANDARDS

    View full-size slide