Milestone

I think this article about the new PA 2-1-1 Southwest website might be the first time I’ve ever been quoted in the media?! 🙂

Advertisements

InfoCommons #2 – Usability and Online Forms

My second InfoCommons column was published this February in the AIRS Newsletter.

Forms are ubiquitous in the world of information and referral.  Many of us use online intake forms embedded in software to record calls; we use online search forms in resource databases, and we provide forms for users and agencies to contact us. Poorly designed forms can cause confusion for users and result in bad information being entered.   If users don’t understand why they’re being asked for certain information, they may simply refuse to provide the information.  In their book Forms That Work, Caroline Jarrett and Gerry Gaffney propose that forms involve three layers:

  • The relationship of a form is the relationship between the organization that is asking the questions and the person that is answering.
  • The conversation of a form comes from the questions that it asks, any other instructions, and the way the form is arranged into topics.
  • The appearance of a form is the way it looks: the arrangement of text, input areas such as fields and graphics, and the use of color. (Jarrett & Gaffney, 2009)

The user experience involved in each of these three layers has implications for the success of a form.

Relationship and Conversation

It can be challenging to organize the flow of an intake form to promote accurate collection of information while facilitating natural dialogue between an I&R Specialist and a caller.  One common problem with online forms is that questions may seem random if each new piece of information doesn’t relate to what’s previously been requested. When an I&R Specialist is acting as an intermediary between a caller and an intake form, it’s easy to explain why certain information is being requested – there’s a more personal relationship and conversation happening. In a purely web-based setting, it becomes crucial to gain users’ trust by clearly indicating who we are, why we’re requesting certain information, and how that information relates to what the user has already entered.  Jarrett and Gaffney provide this advice: “It’s usually best to ask anticipated questions before you move into something unexpected or unusual. Ease into questions that may intrude on the user’s privacy by dealing with neutral topics first.”

Image
Example form field with explanation for why information is being requested.

The relationship between your organization and the users of your online forms may be relatively clear, but it always helps to make sure that your public online forms are clearly labeled with your logo, and provide reassurance to the user about how their information will be used and where it will be sent.

Appearance

The appearance of forms is often the area over which we have the least control when using software, content management systems, or online services like Google Forms or Formstack.  Many form-creation services don’t allow customization of field label displays, dimensions of input boxes, typography, or grouping and placement of fields. However, if you have control over the appearance of your online forms, I encourage you to consider how you can manipulate these elements to promote usability:

  • Results from user testing of forms, including eye-tracking studies, indicate that users see labels above and to the left of fields. Putting labels above fields reduces the eye movement required to scan the labels and fields, but can result in the form appearing longer.
  • Reading right-aligned text is harder than reading left-aligned text, especially if your question runs over more than one line. For simple, often requested data, right-aligned field labels will enable users to move swiftly through a group of fields. However, if you form asks unfamiliar questions that requires people to scan labels to learn what’s required, left-aligned labels work best.
  • Make your forms more organized by grouping related fields together.  You can do this using placement, spacing, alignment, and background color.

Users with different experience levels and motivations will interact with web forms differently. By providing well-organized and easy-to-use forms for the public and for I&R Specialists, we’ll be more likely to succeed in collecting the information we need.

Further reading:

Friedman, V. (2008, July 4). Smashing Magazine. “Web Form Design Patterns: Sign-Up Forms.” http://uxdesign.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

Jarrett, C. & Gaffney, G. (2009). Forms that Work: Designing Web Forms for Usability. Burlington, MA: Morgan Kaufmann Publishers.

Penzo, M.  (2006, January 23)  UXMatters.  “Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach.” http://www.uxmatters.com/mt/archives/2006/01/evaluating-the-usability-of-search-forms-using-eyetracking-a-practical-approach.php

UX and libraries, HCI and e-readers

This paper offers a nuanced and thought-provoking analysis of e-readers from an human-computer interaction standpoint:

Pearson,J., Buchanan,G. & Thimbleby, H. (2010). HCI Design Principles for eReaders. BooksOnline’10, October 26, 2010.

And this article in the most recent issue of College & Research Libraries News is succinct but  packed with crucial advice for managing library website redesign projects and really, actually focusing on users needs:

Fullington Ballard, A. & Teague-Rector, S. (2011). Building a library Web site. College & Research Libraries News. 72:3, 132-135.

I know I’ve searched for articles on these topics before, but I think the stuff I found must’ve gotten lost in my email. There have to be lots of articles on UX and library websites, right?  If not…I will write one.  One day.  And if I find some nuggets of gold in my email I’ll update this post with citations.  Maybe I should do some research on personal information management too.  :-/

Update: look out for this paper from the CSUN 2011 conference

Belated minor fame

I just checked my notifications on one of my Flickr accounts, and found out that a photo I had been asked to contribute to an online city guide was actually chosen and posted (like 6 months ago). It’s a picture of the Seattle Public Library, and it’s on a page about where to get access to the internet in Seattle. Ha! How appropriate. Here’s the main page for Seattle. This site is weird…apparently you can download their guide books and bookmark places. Actually this is a better description:

We released our first Schmap City Guides in March 2006: initially revised twice a year, our guides are now updated real-time, with local buzz for restaurants and bars from Twitter users, reviews from local residents, local photos from more than 300,000 contributing photographers, plus events, activities and local deals via users of our popular Twitter service.

seattle public library
the photo that will make me famous, along with 300,000 other people

Real-time guide books: that’s a good idea. I’ll have to check it out more when I activate my NEW SMART PHONE. Woo-hoo, welcome to the 21st century.

Accessibility & technology news roundup

I’ve sort of given up on blogging since I have so much homework – learning Java! It’s exciting. But here are a few interesting items I’ve accumulated over the past month:

Update: Here’s something new from Google, as well: YouTube captions uploader web app

Hear me, watch me, read me

I got this great disco compilation for Christmas. This song is my current favorite:
Change-Angel In My Pocket
[Youtube=”http://www.youtube.com/watch?v=SLL3xW5X5Jc”%5D
This is a break-up/independence song to rival “I Will Survive” and its bass line is excellent. Plus…is that cowbell I hear? Oh yeah.

PBS Masterpiece Classic: Downton Abbey
[Youtube=”http://www.youtube.com/watch?v=2M3moEeErr8″%5D
I like that this is set in the early 20th century. It’s good for me to change up my period piece periods once in awhile. Plus the dresses are great and not so heaving-bosom centric.

Paleo-Future
I’m excited to sift through the archives of this blog/site. I love past predictions for the future – which I guess falls under the handy name of “paleofuturism”. And the fact that there are so many vintage visuals on the site just makes it better – you get the crazy sci-fi thinking AND the retro design inspiration.

No one cares about alumni

One of my favorite past-times is looking up university websites on the Internet Archive and laughing at what they looked like in the beginning. Ironically, it was probably easier to find the information you needed back when things looked like this:

Pitt website from 1996

University of Michigan website in 1996

The Web Marketing Association has an award for Best University Website.  The Art Institute of Pittsburgh’s site won in 2007, but that version of the site seems to have disappeared.  I remember using it once to try to find information about their library.  I was impressed by how unconventional the site was, but I couldn’t find basic information I needed.  Now the design is different – more structured but still attractive.  This is unfortunate, though:

If you need to tell people to use your menu, you've got a problem. And why not just hyperlink all those programs on the main page if you're going to have them there?

I see university websites as portals that must also contain a lot of content themselves, in addition to making a visual statement that conveys whatever the university is trying to emphasize about itself and enhances its brand.  Ideally it should be impressive from a technological standpoint, since that in itself is (in my opinion) a statement about the quality of the institution.  So basically university websites are probably one of the most challenging type of sites to design. This article from the blog of a design consultancy in Singapore sums it up quite nicely, covering issues of web standards, information architecture, and branding.  An excerpt:

University websites tend to be more complicated than corporate websites. Here are some reasons why:

* Difficultly in defining a common vision: unlike corporate websites, it is difficult for a university to get all of its schools, divisions, centers, etc., to agree on a common vision for communicating on the web. This is a classic example of a house-of-brands or a branded-house conflict. Only the administrative offices are under the fold for obvious reasons. Thus, it is not uncommon to come across a school or a division crafting their own vision, often citing the hyper competitive education marketplace as their main reason (e.g. business schools).
* ‘Not invented here’ syndrome: because of the above, web design tends to fall into the hands of many different local webmasters who make decisions based on local directives – usually motivated by one-upmanship. This results in the hotchpotch that users finally get to see, and unfortunately, to experience.
* Lack of knowledge in user-centered design: this is crucial one. Because the needs of the user (or as Don Norman would say, people) does not take center stage, as the above two points show, design decisions are based on varying principles and random rationales leading to haphazard design outcomes. Unless there’s common understanding of user needs this is going to be a problem area for some time to come.

The xkcd comic above apparently started enough of an uproar to merit an article on Inside Higher Ed about the problems with university websites. And university websites don’t have half the problems library websites do thanks to all our different services which may require different interfaces, databases that require authentication which may have to occur on a page that isn’t the library’s, and the entirely separate (though maybe it shouldn’t be) beast that is the OPAC. But those are topics for another day.