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


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


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
  • Think about the user, not the institution.  Keep the focus on the users.
  • Rocket Surgery Made Easy – usability testing book.

KLA Web Site, or Why I love WordPress

I was recruited to mange the Kansas Library Association Web site.  I started the process by reviewing other Association sites and making notes from my favorites.  I knew I wanted something clean, simple and professional looking.  I also wanted a way to highlight libraries across the state, so I decided to go with the Panorama theme.  I sent out a request for 980 x 125 pixel images for the rotating header and have pics from the State Library, academics and publics from across the state!  This one is from the Beck Bookman Library in Holton, where Helen does an AMAZING job using old books, photos and such to decorate the stacks.

Future plans include stealing ideas from:

  • Alabama – Want to create equally prominent Donation and Join links, along with a simple welcome message for our site.
  • Illinois – As we have more events to share, I like the simple buttons along the left on the Illinois site.
  • Ohio – Interconnecting with social media sites – with Heather’s help, we set up a KLA Facebook Page (to replace the existing Group) and got FB connected to the Web site using “networkedblogs.”  Next up, Twitter and YouTube.  We also hacked the theme to put our contact information in the footer, like Ohio’s site.

How do you say KLOW in Norwegian?

We received a wonderful request today from Petter in Norway to replicate the KLOW project at the Buskerud County Library (select a language to instantly translate the site to English) and county-wide.

A search Buskerud County Library led to this great blog and article about collection development, weeding and using turn statistics to guide CD.  How funny, this appears to be a Norwegian 23 Things blog! (Denne bloggen er en fortsettelse av 23 ting om web 2.0)…which explains why that article was the last thing added (back in 2009).  I’m trying to find the whole paper –  “In August 2009, presented the library consultant Ms Røgler a paper at the Northumbria conference. This is a library conference that the use of statistical material as the main theme.Below are abstracts were anntatt as part of this year’s program.”  I’ll have to keep looking…and learn Norwegian.

WordPress Basic Lessons

When completely freaked out about an impending upgrade to PTFS Master 1.1 (Koha), what do I do to relax, unwind and stay sane?  Screencast!

At Tech Day and since, I have been asked to provide KLOW/WordPress Orientation to folks with new My Kansas Library on the Web Web Sites.  For self-paced learners, I’m creating a series of 3-5 minute screencasts covering various topics.  These are my ‘lesson plans’ from which I can go visit and give in-person training.

So, this is my rough outline for covering WordPress Basics for newbies:

  • First Steps – Update password and information for “librarian” user | Managing additional users | Updating default Settings for the site
  • Basic Content – Overviews of Categories, link categories, tags, posts and pages
  • Customizing the Site – Overview of themes | Finding and installing new themes | Widgets and Sidebars
  • All about Images – Overview of Media Library | Web image tips and tricks | Creative Commons | Inserting images | Themes using ‘featured images’
  • Intermediate WordPress – Upgrading | Overview of plugins | Finding and installing plugins | Creative posts and pages using the Kitchen Sink, ordered and unordered lists, blockquotes, indents, justification | Embedding videos and slideshows from 3rd party sites (Flickr, Slideshare, etc.)
  • Web site Policies – Do you archive or delete old posts? Do you allow online registration? Do you have a photo release form? Do you post Board minutes and agendas? Do you post all of your policies on the site? Who is allowed to add, edit and delete content?

So far, in two days I have completed six videos for “First Steps” and I’ve started thinking about how to approach “Basic Content.”  I’m looking forward to working on those tomorrow.

Adding a Flickr Slideshow

Maybe you saw the lovely slideshow at the Kansas Library Express site?  Heather and Carolyn figured out how to do that last night.

I wanted to see if that works on a wordpress.com site, so here’s my test with some garden pictures:

It works!

How I did it:

  1. Went to my Flickr account
  2. From my Photostream, I opened up certain pictures and clicked “Add to Set” and created a new Set called ‘Gardening’
  3. From my Photostream, I opened that Set by clicking on “Sets” and then selected “Gardening
  4. Now, up in the right corner in gray text is a link called “Slideshow” – click that!
  5. OK, so this opens the slideshow in your Web browser, but I want to share this in a post on my WordPress blog, so click “Share
  6. Now, you need to decide which method to use:
    1. For a wordpress.org or KLOW site, you will want to embed the HTML code into a Post using the HTML editor
    2. For a wordpress.com site, you can just paste the URL directly into the Visual Editor and the player will magically appear, just like with a YouTube video URL

WordPress for Beginners

We had our first post-crash Web Work Day today and I think it went well.  The Dashboard is user friendly and  the new Image widget/plug-in makes side-bar buttons a snap.  Other points worth sharing:

  • Look for the Blue Buttons – they do stuff, like save and publish and update
  • The Media Library rocks, as does the new Edit Image functions built into WordPress
  • Understanding the functions of Categories, Link Categories, Pages and Posts makes arranging associated sidebar widgets easier.
  • In KLOW, searching for and installing a new theme is a snap – video forthcoming on the project site.
  • Understanding that when you first select a theme, certain widgets appear by default, even though the Sidebar 1 or Sidebar 2 tabs on the Widgets page look empty.  Once you add a widget to any of the sidebars, all of the defaults will disappear.
  • WordPress treats Links with high regard – they’re special and good and can be categorized and those categorized links can be put into a sidebar (all alone or with all other link categories).
  • Messing with CSS is fun, if you know how to do it…but frustrating if you don’t.  I’m of the camp – find a theme you like as-is or one that has cool Theme Options.
  • Last – the WordPress CODEX is great, so use it.

23 Things Kansas – Starts today

The vivacious Erin Downey Howerton has kicked off 23 Things Kansas project with unit on blogging.  So far, I’m liking the format for the modules or units – very simple and straight forward.  She’s used a lot of multi-media elements and I’m always a fan of that.  Heather plugged KLOW/WordPress for us – Go Tech Team!

(Note: If your public library already has a KLOW site (My Kansas Library on the Web) you are using WordPress. Selecting WordPress would be a good option if you’d like to become more familiar with the interface.)

My Kansas Library on the Web

A draft of the post-mortem post on KLOW for the NEKLS newsletter…

Over the last ten days, many significant changes have taken place to the My Kansas Library on the Web project.  Liz Rea, the NEKLS Network Administrator, upgraded all 159 Web sites to WordPress version 2.9, restored sites to a default theme, and moved the project hosting location from a physical server at KanREN to Amazon EC2 in the Cloud.  While all of these changes were scheduled to happen slowly over the next few months, a major attack on Tuesday, December 29, forced us to accelerate the time line.

When the attack first took place, Liz immediately pulled the server and disabled the project Web sites.  On Tuesday, she investigated, purchased and configured the new server instance for the project at Amazon EC2.  She also created a temporary re-direct page for libraries with the *.mykansaslibrary.org domain name that included frequently used links and links to the online catalogs of NEKLS, Southeast Kansas Library System and Southwest Kansas Library System.  On Wednesday, she retrieved all of the pages and posts from a backup file and began the labor-intensive process of restoring and upgrading every KLOW site, in alphabetical order.  While image and document files were also stored in the back-up, we debated and decided to not restore them.  The malicious script, or scripts, that brought down KLOW are most likely hidden in the back-up, disguised as a harmless picture file or document.  The security risks were too great.

For libraries using custom domain names (www.mylibrary.org instead of town.mykansaslibrary.org), we helped start the process of updating the domain name servers to find the new address for KLOW.

By Monday, January 4, most of the sites had been restored, although the performance and speed of the new environment was painfully slow.  Over the evening of January 5, Liz moved KLOW to a larger instance on Amazon EC2. (We went from a 1 computer core/1.7 GB RAM instance to a 5 computer core/7 GB RAM instance).  Yesterday and today, Liz has been testing, improving and documenting known issues with the upgrade.  Libraries now have the ability to upgrade their sites, which we encourage.  With every upgrade comes increased security, problem fixes and new features.

All of these are shared at the project Web site: http://www.mykansaslibrary.org, including assistance in using the upgraded 2.9 WordPress software.

Steps that a library will need to take to finish restoring their site include:

  • From the Users tab, find your profile and update your password – all sites were re-set to the default username and password.  Contact us or your System trainer for this information.  Please do NOT delete the ‘admin’ account.
  • Verify that all email addresses associated with the site are current and correct.  A new KLOW email list is being created using these addresses.
  • Using the Appearance tab, activate a new theme.  The default theme is 2-columns and many libraries previously had 3-column themes.
  • Using the Appearance tab, review your sidebar widgets and reactivate widgets by dragging them to the appropriate sidebar.
  • Upgrade to 2.9.1 by selecting the ‘Please upgrade now’ link and the ‘Upgrade automatically’ button.
  • Some libraries will also need to adjust the Miscellaneous Settings of their site prior to uploading Media, step-by-step instructions are included in this post from the project site.

We are very grateful for the patience, understanding, feedback and support we have received from the library community during this extremely stressful process.  We understand and share in the frustration caused by this outage and accelerated upgrade process.  Along with you, we have several sites to repair and restore.

The changes made over the last 10 days have made KLOW a more secure and stable project.  The upgrade to WordPress version 2.9 brings many enhanced features and the opportunity to update the look, feel and content of your Library’s Web site.