10 Steps to a User-Friendly Website Webinar

Hybrid Watch Party | Wed., Jan 25 | NEKLS  | ALA TechSource’s “10 Steps to a User-Friendly Website” with Aaron Schmidt and Amanda Etches-Johnson |#lib10steps

Agenda:

1-1:30 Intros “What do you feel is the purpose of a library Web site?
1:30 – 3:00 Online Workshop
3:00 – 4:00 Optional NEKLS Lab  time to look at your Web site

Notes:

Catalog Problem

  • Library Catalog versus Library Web site –
  • ILS distinct from Web site, but many users don’t make this distinction.
  • Many catalogs and databases are ‘rough looking’ and there isn’t always a lot you can do about that.
Useful, Useable, Desirable = Aim to hit one of three
  • Cycles – not a one-time thing. Do the 10 steps repeatedly or cyclicly.
Step 1 – Reduce Your Website
  • Junk drawer of anything anyone could possibly want to know about the library
  • “Just in case” approach to Web design
  • Less is More? No, Less is Less (and that’s a good thing)
  • How much of your content is Noise?  Signal : Noise
  • Pay attention to how much content you put on your web site that represents YOUR needs, rather than you PATRON’s needs.
  • Remove the 27% useless content.
  • Scope Your Site – Pyramid – Maslow’s Hierarchy of needs for your Web site…
    • Basic – necessary info (whole bottom half of the pyramid)
    • Destination – Created content, basic interactivity
    • Participatory – user generated content
    • Community Portal – Community platform, knowledge bank
  • One Pager – Idea that high-use content can fit on one page.  (free code to try)
Step 2 – Mobile First
  • Thinking about your Mobile site helps keep the regular site smaller
  • Devices to access Web site
  • HTML5 and CSS3 are opportunities to respond to different devices available (example, Boston Globe) – redesigned in a responsive way – not a separate site or App ‘Responsive Web design’
  • Put the important stuff first – crucial.
  • Full screen site shouldn’t be cluttered up with anything other than the ‘really important stuff’
  • Skokie Public Library –
  • Book: Mobile First by Luke W…
Step 3 – Conduct Usability Tests
  • Testing in 5 words – (easy version) – Watch People Use Your Site
  • Test with non-librarians
  • Find a magazine Article – ask to complete a task (or ask 3 to do one task, the other 3 to do another task)
  • Five Second Test – Online tools (Clue) – Showing a single content page for 5 seconds and get impressions/judgements  – new design features, for example
  • Why Test Websites?
  • Solid and Confident decisions based on information and data gathered!
  • Enlightening experience – gain insights you couldn’t gain any other way
  • What should you test?
    • Critical tasks – Must Haves – Use your personas, ask library users, ask staff, look at Analytics
    • Scenarios – “You want to run a marathon, you need to find info in a magazine about training for a marathon” – How does the user go about finding things on your site
  • Recruiting Testers – A few tests will show 85% of your problems – Survey, walk around and ask, food bribes
  • Conducting a Test – In person, make sure the environment is conducive (neat, quite) | sit beside the tester | encourage testers to give a Play by Play
  • Test Scripts – make sure you use the same directions and experience.  Tell who you are and what the purpose is for the test.  Outline of what is going to be done, printed copy of the tasks, and an agenda (timeline), and ensure that the testers are NOT being tested – it’s the site getting a grade.
  • Records the tests?  Up to the institution.  Low-tech usability (notes on paper) or higher (screenrecording) or videorecording
  • Debrief Meeting after testing – Opportunity for everyone who observed to chat and gather notes/thoughts – Gather the evidence and discuss, before making any knee-jerk changes.  Summarizing and Brainstorming.
  • Prioritize what needs to be changed, based on discussions/summaries – Use the Critical Tasks List
Step Four – Mind Your Navigation
  • From a Random Page, can a user find:
    • Site Name, Page Name, Where am I? Where can I go? How do I search?
  • Placefulness – Sense of Place (Freshbooks) – Page Titles repeated from Tabs – example, Tedx “Get Involved” and Neslte’s site
  • Breadcrumbs – show site structure and you where are  Home > Breads > Cereals > Estrelitas
  • Guardian.co.uk – different way to look at breadrumbs – News > Word Affairs > Obama
  • Apple.com – Good navigation v. Seattle Public Library – bad navigation (too much and doesn’t make sense)
  • Navigational Overload
Step 5 – Write for the Web
  • Functional Reading – Don’t read, you skim and scan for the content that you need (Jakob Neilsen’s studies)
  • Web site = FAQ and Less is Less (even text and content)
  • Site as Conversation between you and your user
    • “Library card is required to check out library items” v. “With a library card you may check out unlimited DVDs, Books and more” v. “You can check out all sorts of stuff once you get a card, Do it already!”
  • Documents v. Information – Site isn’t a document.  Treat the content as bite-size chunks that are interconnected
  • PDF – Portable Document Format – Documents, not information.  Reconsider the upload (Not great for functional reading).
  • Inverted Pyramid – Start with Essential Message at the top – key concepts at the top of your page. Use the Q and A format.
  • Macro and micro white space – Add space to group content – Draw the eyes to headers and accompanying content
  • Fewer words and more white space = easier to read and scan
  • Remove Unnecessary words – remove words – Draft, then cut word count in 1/2, then in 1/2 again
  • Font size could be increased after 1/2 of the words were removed from the Seattle page shown
  • Human URL – yourlibrary.org/kids v. yourlibrary.org/section/ref/12/list5/dir/kids.html…
  • SLUGS (in WordPress)
  • Web etiquette – don’t write in all caps
  • Avoid passive voice – enemy of conversational voice – write in active voice (friendlier)
  • Short, one thought per sentences – fragments work
  • We, You or I – not library, patrons, patrons – “How do I resent my Pin?” or “What is your email address?”
  • Links – Avoid “CLICK HERE” (bad for adaptive technology) – “Access your account” vs. “click here to access your account”
  • Website = publication = take the writing seriously
  • Letting Go of the Words by Janice Redish
Step Six – Content Audit
  • Tame the craziness of your content
  • Content as the spice cabinet in the library – is it fresh, used, do you need more?
  • Catalog your Web site – Assign page numbers and URL (into a spreadsheet) – Tools available to help with this
  • Quantitative to a Qualitative Audit – Aspects:
    • Accurate
    • Usefulness
    • Used
    • Web-written
    • On message
    • Last updated
  • Rank these to create a to-do list!  Which are useful, but not being used? Which pages need to be re-written? What pages are not accurate?  Which pages are useful to librarians, not patrons?  What pages are not used and not useful – WEED them…
  • What do people need to do on the Web site?  Identify Critical Tasks.
  • Workflow for Content – request, create, edit, approve, publish, updated, archive/remove
  • Have a Content Sheriff.
Step Eight – Use Graphic Design
  • Craig’s List – horrible visual design, but it is an effective and useful site.
  • Colors – don’t use them randomly. Have a Color Palette that go together well (kuler.adobe.com)
  • Accessibility matter – Color blindness (be mindful of red/green)
  • Avoid animation and cartoon images – Unprofessional
  • Use pictures of real people doing real tasks – Be authentic (Vancouver library photos – good example)
  • Use Conventions – keep it on a Grid (Ordering Disorder Grid Principles for Web Design
  • Resources online for boilerplate grids for Web design
  • Little changes can go a long way (Seattle public examples)
Step Nine – User Research
  • User research before | User testing after
  • Survey – way to gather opinions.  Satisfaction surveys, opinions, but generally they break down if you want to go beyond opinion.
  • Contextual Inquiry – Watching people interact with the tools (not scripted, just observation)
  • Cardboarding – Exercise that shows users needs. Categorize content on cards – used when designing interfaces
    • Labeling input
    • Donna Spenser – wrote the book on this technique
  • Conversations – explore behavior by getting users to just discuss it.  Interviews.  Organic and fluid.
  • Cultural probes – diaries of behavior, photographic journals, document behavior over time, use in early stages to get user behavior info (college campus, would need permission and takes time and coordination)
Step Ten – Create Personas
  • Fake users based on real users.
  • Demographic data – Overviews
  • Helps to develop empathy for users
  • Library staff agree on who you are building your site for – design for actual users (not librarians or staff)
  • Make decisions based on users, not random preferences or personal preference
  • Use interviews to build Personas (look at your demographics to decide who to interview)
  • Find unique things people do with the site or unique members of the community
  • Find common tasks by reviewing the interviews
  • Brainstorm Common Tasks – With staff/users – make “I” statements – think about yourself as a user
  • Group Unique Tasks – time consuming – Pull out the behaviors – master list of behaviors, then organize them thematically
  • Name Groups – Write miniature biographies, give the persona’s names and photos, summarize what makes each persona unique, and include a quote that illustrates the persona’s goal.
  • User motivation – focal point of web development.  Experience Goals and End Goals (feelings and what they want to accomplish)
  • Book: The User is Always Right
Conclusion
  • Think about the user, not the institution.  Keep the focus on the users.
  • Rocket Surgery Made Easy – usability testing book.
Advertisements

One thought on “10 Steps to a User-Friendly Website Webinar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s