My University Librarian has asked for a refresh of the library website. He is primarily concerned with the visual design; although he thinks the site meets the practical needs of our users, he would like it to be “beautiful” as well. Eep! I’m not a visual designer. I was a little unsure how to even begin.
I decided to attack this the way we attack other problems: user research! Web Committee created a set of Guiding Principles a few years back (based on Suzanne Chapman’s document). Number one in that list is “Start with user needs & build in assessment” so even though I was having difficulty wrapping my head around a beautiful website as a user need, it made sense to move forward as if it were.
Background
How does one assess a beautiful website? I looked at a whole bunch of library websites to see which stood out as particularly beautiful and then discern what it was that made them so. Let me tell you, “beautiful” is not a word that immediately leaps to mind when I look at library websites. But then I came across one site that made me give a little exclamation of disgust (no, I won’t tell you which one). It was busy, the colours clashed garishly, and it made me want to click away instantly—ugh! Well. We might not be able to design a site that people find beautiful but surely we can design something that doesn’t make people feel disgusted.
I had an idea then to show users a few different websites and ask them how they felt about the sites. Beauty can mean different things to different people, but it does conjure a positive feeling. Coming up with feeling words can be difficult for people, so I thought it might be easier for me to come up with a list they could choose from (overwhelming, calm, inspiring, boring, etc.). Then I decided that it might be better to have users place the sites on a continuum rather than pick a single word for their feeling: is the page more calming or more stressful? Is it more clear or more confusing? I came up with 11 feelings described on a continuum, plus an overall 🙂 to 🙁.
I wasn’t completely confident about this and assumed others had done work in this area, so I did some reading on emotions, aesthetics, and web design. (Emotion and website design from The Encyclopedia of Human-Computer Interaction, 2nd ed.; Aesthetics and preferences of web pages from Behaviour & Information Technology (2000); Assessing dimensions of perceived visual aesthetics of web sites from International Journal of Human-Computer Studies (2004); and Measuring aesthetic emotions: A review of the literature and a new assessment tool from PLOS ONE (2017).) Turns out my method was in line with the research in this area. And although the wording sometimes differed, the 11 feelings I had come up with were all represented. Onward!
There had been some talk of the library website perhaps needing to mirror other Carleton University websites a little more closely. However, there is not uniformity of design across Carleton sites, so I wanted to show users a mix of those sites to get a sense of which designs were most pleasing. I also wanted to show a few different library sites to get a sense of which of those designs were most appealing to our users. I worked with Web Committee to come up with a list of 7 library sites and 5 Carleton sites.
There was no way I was going to ask someone to give us feedback on 12 different websites; I decided a selection of 3 was plenty for one person to work through. Since I was looking mostly for visceral reactions, I didn’t think we needed a lot of people to see each site. If each site was viewed 5 times (with our own library site as a baseline so we could measure improvement of the new design), we needed 30 participants. That was three times what we often see for a single round of UX research, but still doable.
Method
I planned a 10-minute process—longer than our usual processes where we test one or two things—and wanted to compensate students for this much of their time. That fell apart at the last minute and all I had was a box of Halloween mini-chocolates so revamped the process to remove a few pre- and post- questions and cut the number of continuums from 12 to 9 (8 feelings plus the overall positive/negative). That cut the time down to about 5 minutes for most people, and I was comfortable with a 5-minutes-for-chocolate deal. So in the end, these are the continuums we asked people to use to label the sites:
Welcoming ↔ Off-putting
Disorganized ↔ Organized
Clear ↔ Confusing
Up-to-date ↔ Old-fashioned
Calming ↔ Stressful
Useful ↔ Useless
Inspiring ↔ Discouraging
Ugly ↔ Beautiful
🙂 ↔ 🙁
We set up in the lobby of the library and saw 31 people over four time slots (each was 60-90 minutes long). There were 31 participants instead of 30 because the last person came with a friend who also wanted to participate. Happily, the only person to have difficulty understanding what to do was one of these very last people we saw. He had such trouble that if he’d been the first person we’d seen, I likely would have reconsidered the whole exercise. But thankfully everyone else was quick to understand what we wanted.
Most people saw one Carleton site, one library site, and then our own Carleton library site. Because we had more library sites than Carleton sites, a few people saw two library sites then the Carleton library site. I had planned out in advance which participant would see which sites, making sure that each site would be seen the same number of times and not always in the same order. Participants looked at one site at a time on a tablet with a landscape orientation, so the sites looked similar to how they would look on a laptop. They filled out the continuum sheet for one site before looking at the next. They could refer back to the site as they completed the sheet. I had a note-taker on hand to keep track of the sites visited and to record any comments participants made about the sites (most people didn’t say much at all).
Partway through, I discovered a problem with the “Up-to-date / Old-fashioned” continuum. I was trying to get at whether the design felt old and stale or contemporary and up-to-date. But many people assumed we were referring to the information on the site being up-to-date. I thought that using “old-fashioned” rather than “outdated” would mitigate this, but no. So this was not a useful data point.
Usually with these kinds of processes, I have a sense of what we’re learning as we go. But with this one, I had very little idea until I started the analysis. So what did we find?
Results
I had purposely not used a Likert-type scale with numbers or labels on any of the mid-points. This was not quantitative research and I didn’t want users to try to put a number on their feelings. So, when it came time for analysis, I didn’t want to turn the continuum ratings into numbers either. I colour-coded the responses, with dark green corresponding to one end of the continuum, red to the other and yellow for the middle. I used light green and orange for less strong feelings that were still clearly on one side or the other.
In determining what colour to code a mark, I looked at how the person had responded to all three sites. If all their marks were near the extremes, I used light green/orange for any mark tending toward the middle. If all their marks were clustered around the middle, I looked for their outer ranges and coded those as dark green/red (see examples in the image below). In this way, the coding reflected the relative feelings of each person rather than sticking to strict borders. Two marks in the same place on the continuum could be coded differently, depending on how that user had responded overall.
After coding, I looked at the results for the 🙂 ↔ 🙁 continuum to get a sense of the general feeling about each site. I gave them all an overall assessment (bad, ugh, meh, or ok). No site got better than ok because none was rated in the green by everyone who saw it. Then I looked at how often each was coded green, yellow, and red across all the continuums. Unsurprisingly, those results corresponded to my bad/ugh/meh/ok rating; participants’ 🙂 / 🙁 ratings had been reflective of their overall feelings. Our site ended up on the high end of “meh.” However, several participants made sure to say their ratings of our site were likely high because of familiarity, so we are really likely firmly in “meh” territory.
Now that I’d looked at the overall, I wanted to look at each of the continuums. What was our current site doing really well with? I was happy to see that our current site felt Useful and Organized to participants. “Organized” is good because it means that I feel confident about keeping the structure of the site while we change the visual design. What did we need to improve? Participants felt the site was Discouraging and Ugly. “Discouraging” is something I definitely feel motivated to fix! And “Ugly?” Well, it helps me feel better about this project to make the site beautiful. More beautiful at least.
After this, I looked at which sites did well on the aspects we needed to improve. For both the Carleton sites and the library sites, the ones felt to be most Inspiring and Beautiful were the same ones that were rated highly overall. These same sites were most felt to be Welcoming, Clear, and Calming. So these are the aspects that we’ll concentrate on most as we move through our design refresh.
Next Steps
Now, Web Committee will take a closer look at the two library sites and two Carleton sites that had the best feeling and see what specific aspects of those sites we’d like to borrow from. There’s no big time squeeze, as we’re aiming for a spring launch. Lots of time for many design-and-test iterations. I’ll report back as we move forward.
Shelley Gullikson 