Mobile Redesign – Usability Testing

Usability testing was an important part of our recent redesign of the IU Libraries mobile web site. Below are some of the things we learned by talking to users over the course of three usability sessions this summer.

The overall response to the site was very positive:

  • “Looks nice, is very clear and useful”
  • “Useful and cool, hours and locations especially”
  • “I’m impressed with how fast it is”
  • “I like that it looks like IU Mobile”
  • “I would definitely use this”

We also found some areas for improvement:

Problem: On the Home page, the labels “Find”, “IUCat”, and “News” were often confusing.

What we did: We merged “Find” and “IUCat” into one item named “Search Library Resources”. This was also made easier by the decision to change the homepage from an icon-based layout to a list layout (more room for labels). We also changed “News” to “Library News”.

Home Page Before & After

Problem: Users did not see the “All IUB Libraries” list option at the top of the Hours & Locations page.

What we did: We added a black header to the top of the page with the text “Browse All Libraries”.

Problem: The map on the “Hours & Location” page often confused users. They would not see the yellow and green icons to the right of the labels and didn’t know what the blue icon on the map meant. We wrongly assumed users would know that the blue icon was their current location and had not provided a key for it.

What we did: We moved the existing two icons to the left of their labels and added a new header directly above the map indicating that the blue icon represents the current location of the user. We also added pop-up windows to each icon.

Hours and Locations Before & After

The improvements resulting from usability testing made the final site much more usable and useful. Our future work will focus on expanding access to research tools on mobile devices, broadening the “How Do I?” section of the site, and improving the clarity of the “Hours & Locations” page with regard to the locations of services within the Herman B Wells library.

Under the hood: mechanics of our mobile site

DUX recently launched the redesigned libraries mobile site after several months of researching, testing, and development. One interesting aspect of the project was deciding which development frameworks to use. With the continuing explosion of mobile development, there are new frameworks and micro-frameworks popping up almost weekly. For our project, we decided on the jQuery Mobile JavaScript framework for handling most of the layout and interaction components and the Leaflet JavaScript map library for our various mapping needs. Both choices have turned out well for us.

jQuery Mobile provides many benefits. First, it improves the user experience by providing an interface built upon existing mobile design conventions. It was clear very early in the design process that native applications would not be an option for us, yet users were very responsive to designs that emulated many conventions of native apps like nested lists. jQuery Mobile comes baked with many of these conventions.

Second, jQuery Mobile enjoys all the benefits of the original jQuery library, the most noticeable of which is the way jQuery irons out many of the inconsistencies that exist between various browsers. Before jQuery (or similar libraries like Prototype), web developers would have to write separate JavaScript code for each browser to accomplish frequent tasks like AJAX (which refreshes content without reloading the entire page), or to create various interface effects. Although some work to support cross platform functionality is still necessary in some circumstances, jQuery goes a long way toward providing an abstraction layer that allows the developer to write a single instance of relatively simple code that will handle the differences between browsers automatically.

Third, the combination of these benefits greatly simplifies the client-side development process and enabled us to spend more time conducting usability testing, focusing on information architecture (labeling, arrangement, navigation, etc.), improving access to existing services (databases, catalog, library information), and adding new functionality to enhance the user experience (geolocation).

The Leaflet map library is a recently released open-source map library from Cloudmade. It’s small (under 64 kb minified), well documented, fast, supports CSS3 enhanced map behavior and HTML5 geolocation.  And it’s incredibly easy to use. Initializing a map to detect and mark the user’s location is as simple as using the Leaflet example code below:

If you would like to know more about how we used these two frameworks, post a comment below or drop us an e-mail!

Mobile Redesign Project Needs Assessment

DUX recently completed a needs assessment as part of our mobile web site redesign project. We surveyed 52 students at several IUB Libraries and asked them to comment on how they use the IU libraries, how they conduct research, and which mobile devices and applications they use. Participants also provided feedback on the current  IU Libraries Mobile Site. A summary of our findings is listed below.

Key Findings

  • 60% of respondents own a smartphone.
  • Undergraduate students appear more likely than Graduate students to own a smartphone.

Respondents' ownership of smartphones

  • Smartphone operating system usage is divided: 57% use Apple iOS, 37% use Android, and 6% use Blackberry OS.
  • 96% of respondents do not own a tablet computer, 76% have no intention of purchasing one, and those that will purchase will do so at least 6 months in the future.
  • 75% of respondents indicated that they visit an IUB Library daily.

Respondents' visits to IUB libraries

  • Library Web Site usage is more divided: Daily 39%, Weekly 24%, Occasionally (every couple of weeks) 24%, Seldom (once or twice a semester) 13%.
  • Respondents reported their most heavily utilized services on the Library Web Site are IUCat and Research Databases.
  • The most requested additions to the IU Libraries Mobile Site are access to IUCat and Research Databases.
  • Facebook, Google, and e-mail were cited as the most frequently used web sites, followed by OnCourse and OneStart.

Respondents' most used websites