(Un)Intuitive Faceted Browsing

Many retail or online shopping companies have well-designed search features to allow customers to view their merchandise in an attractive manner and narrow down their searches. I want to highlight Etsy as an example of a user interface that exemplifies good design in its faceted browsing. When the user is browsing results, the following sidebar appears:
Screen Shot 2016-03-09 at 23.53.41
This sidebar is clean-looking because it does not have a multitude of buttons or options to choose from, but it does cover the major factors one would expect might influence the purchase of a handmade or vintage item, such as price range and location. Also, the option to filter by color is an appropriate addition since the products on Etsy are geared towards aesthetic uses.
In contrast, one of the worst user experiences I have had with searching or browsing was with the online course catalogue at the University of Bologna when I had to choose courses for my study abroad semester. The catalogue is found here, and this is a screenshot of its interface:
Screen Shot 2016-03-09 at 23.57.40
Several confusions arise from it—and none of them are due to the translation from the original language or aspects of the Italian university system. The first comes from the School/Campus field, which expands to this:
Screen Shot 2016-03-10 at 00.02.20
The trouble here is that ‘School’ refers to the type of program the student is enrolled in rather than a physical location, and multiple schools are represented in each campus. Only one option can be selected, so one can either search by courses in one’s program or search by all courses available in a certain campus, which does not distinguish between different subjects. So if I wanted to search for Arts, Humanities, and Cultural Heritage courses in the Campus of Bologna, I cannot, and have to choose one or the other.
Another confusion comes from expanding the Course Type field, which one might expect to refer either to the subject of instruction or the classroom style (lecture, seminar, research, etc.). Expanding it leads to this drop-down menu:
Screen Shot 2016-03-10 at 00.07.43
Actually, the field refers to a split more like ‘undergraduate, graduate, or doctoral program.’
One final issue is that on the search results page, there is no way to filter results:
Screen Shot 2016-03-10 at 00.08.45
One has to manually skim through results, and in cases where there are multiple versions of the course taught by different professors as in this example, the choices are automatically expanded and take up unneeded space.
My redesign of the UniBo course catalogue would look like this:
new doc 5_1
This design better implements faceted browsing because it more intuitively organizes the elements on the search screen a student might need to filter by. It distinguishes between Campus and School separately to allow filtering by either or both, and clarifies ‘Course Type’ to ‘Program Type.’ I integrated ‘By Teaching Code’ into the main search interface because there is little reason for it to warrant its own tab for just one field. On the results page, you would be able to refine by the same options on a sidebar.

About the author: czuo2016

You must be logged in to post a comment.