***** This blog post has been originally published in ACRL TechConnect 0n May 7, 2012. *****
——–
During the usability testing I ran a while ago, there was one task that quite baffled at least one participant. I will share the case with you in this post. The task given to the usability testing participant was this: “You would like to find out if the library has a journal named New England Journal of Medicine online.”
The testing begins at the Florida International University Medical library website, which has a search box with multiple tabs. As you can see below, one of the tabs is E-Journals. Most of the users selected the E-Journals tab and typed in the journal title. This gave them a satisfactory answer right away. But a few took a different path, and this approach revealed something interesting about browsing the library’s e-journals in the E-Journal portal site which is a system separate from the library’s website.
Browsing for a Specific E-Journal
1. In the case I observed, a student selected the link ‘Medical E-journals’ in the library homepage above instead of using the search box. The student was taken to the E-Journal Portal site, which also presents a search box where one can type in a journal title. But the student opted to browse and clicked ‘N.’
2. The student was given the following screen after clicking ‘N.’ He realized that that there are lots of e-journals whose title begins with ‘N’ and clicked ‘Next.’
3. The site presented him with the following screen. At this point, he expressed puzzlement at what happened after the click. The screen appeared to him the same as before. He could not tell what his click did to the screen. So he clicked ‘Next’ again.
4. He was still baffled at first and then gave up browsing. The student typed in a journal title in the search box instead and got the match.
Lessons Learned
A couple of things were learned from observing this case.
- First, this case shows that some people prefer browsing to searching even when the search could be much faster and the search box is clearly visible.
- Second, a click needs to create a visible change to prevent a user’s frustration.
- Third, what is a visible and discernible change may well be different to different people.
The first is nothing new. We know that some users prefer to search while some prefer to browse. So both features – search and browse – in a Web site should work intuitively. In this example, the E-Journal portal has a good search feature but shows some confusing aspect in browsing. I found the change from step 2 to 3 and step 3 to 4 somewhat baffling just as the student who participated in the usability testing did. I could not discern the difference from step 2 to 3 and step 3 to 4 right away. Although I was familiar with the E-Journal portal, I was not aware of this issue at all until I saw a person actually attempting to get to New England Journal of Medicine by browsing only because I myself have always used the search feature in the past.
But, when I showed this case to one of my colleagues, she said the change of the screens shown above was clear to her. She did not share the same level of confusion that the student experienced. Also, once I had figured out what the difference in each step, I could no longer experience the same confusion either. So how confusing this browsing experience can vary. I will go over the process one more time below and point out why this browsing process could be confusing to some people.
The student had difficulty in perceiving the change from step 2 to 3. The screen in step 3 appeared to him to have unchanged from step 2. The same for the screen in step 3. from step 4. Actually, there was a change. It was just hard to notice to the student and was something different from what he expected. What the system does when a user clicks ‘Next,’ is to move from the first item on the sub-list under N to the second item (N&H-Nai -> NAJ-Nan) and then again from the second item to the third item (NAJ-Nan -> Nat-Nat). This, however, did not match what the student expected. He thought the ‘Next’ link would bring up the sub-list beginning with the next of the last entry, ‘Nat-Nat,’ not the next of the currently selected entry. The fact that the sub-list shows many ‘Nat-Nat’s also confused him. (This is likely to be because the system is bundling 50 e-journals and then extract the first three letters of the first and last journal in the bundle to create items on the sub-list.) A user sees the last item on the sub-list in step 3 and 4. stay the same ‘Nat-Nat’ and wonders whether his clicking ‘Next’ had any effect.
Making browsing a large number of items user-friendly is a challenge. The more items there are to browse, the more items the system should allow a user to skip at once. This will help a user to get to the item s/he is looking for more quickly. Also, when there are many items to browse, a user is likely to look for the second and third category to zoom in on the item s/he is looking for. Faceted browsing/search is an effective way to organize a large number of items so that people can quickly drill down to a sub-category of things which they are interested in. Many libraries now use a discovery system over an OPAC (online public access catalog) to provide such faceted browsing/search. In this case, for example, allowing a user to select the second letter of the item after selecting the first instead of trudging through each bundle of fifty journal titles would expedite the browsing significantly.
What other things can you think of to improve the browsing experience in this E-Journal portal? Do you have any Web site where you can easily and quickly browse a large number of items?
** Below are the screens with the changes marked in red for your review:
2′.
3′.
4′.
Interesting problem. The obvious answer, I suppose, is to make the page change more obvious — changing type weight only is fairly subtle. Shading the background on the current option lightly might help.
I would prefer a different change, actually — and a bazillion non-library websites make this mistake too, so I hope they ALL READ THIS and fix it. The basic problem here is that the secondary browse nav has drilled down too much too quickly, given the size of the list — getting where the student is going is MUCH too clicky. (How many times would s/he have had to click “Next” to get to NEJM? Twenty? Fifty?) If the student had instead been presented with
Na… Ne… Ni… No… Nu… Ny…
s/he would probably have quickly clicked Ne… and gotten on with life. How best to break up the list — how many levels, how many options per level, how to break a lengthy list into halfway-sensible levels and options — is a good question to which I don’t have an immediate answer; it’d take some testing and some algorithm cleverness. (Dictionary editors might have a good solid sense!)
But pushing people endlessly through Na… is not a useful answer, IMO.
Not to blame the student, but the ‘Next’ link in most places takes users to the next result, not the next set of ranges. Take Google’s pager, for instance.
However, that’s the convention for numbered pagers, not alphabetical ranges. For ranges like those above, a handle below the options with an arrow to expand to show more ranges might be an appropriate element for the function the student expected.
More to-the-point: a different color, on top of bolding the text, could really work to make the selected range more distinct.
@Dorothea Yes, I totally agree. The easiest fix to this issue would be to make the change more prominent. If the selected range is in red instead of black for example, that alone would make a huge difference and people will notice the change much more quickly. Such a minute design detail can make a big difference in usability. It’s a shame that those details are often ignored in the product design.
I am also puzzled about why the system insists providing the sub-list item as a 50 title bundle producing lots of same Nat-Nat for example. I agree that in this case, the provided sub-list items are too granular. When there are 2939 items under ‘N’, the last thing a user wants to do is to browse them by a unit of 50. 🙂
Maybe SerialsSolutions will take a look and improve the interface after this.
@Brad Yep, :a handle below the options with an arrow to expand to show more ranges” was exactly what I had thought as a more intuitive browse navigation design in this case. That is such an excellent observation about the Google’s pager and a similar convention for the numbered page navigation. I guess our convention is very specific that it doesn’t translate that easily from the numbered pages to the alphabetical ranges perhaps… ? This is really interesting. I haven’t thought of that. Good point! 🙂
I totally agree with you about a few little things like color and font-size/bold etc could make the change much more visible and prominent rather than subtle in this case. Sometimes it’s those little things that makes something usable and functional (even if not necessarily pretty or beautiful).