Tag: ux

To scope or not to scope?

Our library homepage‘s main search area currently looks like this:

Articles, Books, Media, Journals, OneSearch

The tab box has served us well for years, but it’s about time we upgraded to something simpler and easier to use. We plan to give our entire website a nice update over the summer, mostly subtle aesthetic changes, but with a big search box upgrade. We’re currently in a discussion about whether to keep the general idea of tabs (expecting users, mostly students, to know ahead of time whether they’re looking for articles or books) or to present one big OneSearch box (à la Google).

TL;DR: We plan to present the big-box search that students say they love, but include Article/Book/Media scopes as a didactic hint and visual cue. This post looks at how other libraries present scope options, if any.

Our website analytics tell us that students mostly use the scoped options. In the tab box, the 4 highest-use options, in order: database dropdown menu, OneSearch box scoped to articles, OneSearch box scoped to books, and OneSearch box non-scoped. This is strongly influenced by the options that we present to the user.

Do we keep these scopes in our redesign? Students compose most of our users. On the one hand, they’ll probably say they’d prefer a big search box, like Google and Amazon. On the other hand, when they approach the reference desk, they’ll usually say, “I’m looking for a book called…” or “I need to find articles on…” So what do we do?

Step 1: Let’s see what other libraries are doing.

Search UIs within CUNY

Just about every CUNY defaults to the same discovery layer, OneSearch (aka Primo, the web-scale discovery system from Ex Libris), along with offering a handful of databases and other resources that are campus-specific. OneSearch has the same scope options for every CUNY campus.

Define Your Search dropdown

The Newman Library at Baruch College requires the user to select a scope first before they can type in the search box. Some of these options are links (like Databases) rather than ways to scope the search.

Onesearch, Books, Databases, Journals

Hunter College Libraries default to OneSearch, but offers faded tabs for optional scoping. Media (videos, mostly) isn’t a scope they offer.

OneSearch, books, articles, journals, media

The College of Staten Island Library does the same as Hunter, but with vertical tabs.

OneSearch - everything, articles, books, books (print only), ebooks, media

The Schwerin Library at City Tech has a dropdown of scopes, but defaults to a non-scoped OneSearch. Interestingly, there are three options for books: print, ebooks, and both. (Here at John Jay, most students seem to prefer print books, so they’d probably appreciate this option.) Databases are linked outside of the tab box.

OneSearch - Search books, articles, media and more

Brooklyn College Library offers just one search box, for a non-scoped OneSearch search, but provides text links to CUNY+ and databases below.

In fact, all CUNY libraries’ approaches to OneSearch were tabulated and analyzed by Nora Almeida, Helen Georgas, and Alexandra Hamlett (all CUNY librarians) for their “The Cosmography of Discovery: Integration, Student Perceptions, and Information Design” presentation at the ER&L 2017 Conference. (If you/your institution has an ER&L Conference login, you can watch their presentation slides + audio — highly recommended!)

In looking at the above sampling, I also notice that John Jay is an outlier for offering a shortcut list of “popular” databases, rather than directing users to the full list of databases, which can number over 100. This campus is pretty tied to that list of popular databases, and I think it’s a good idea to keep that shortcut. (Even if it might diminish the use of the “non-popular” databases.)

Other interesting search UIs

Outside of CUNY, here are a few of my fave academic library websites:

Articles, Books and media, journals

The University of Illinois—Chicago Library search box is currently the above, but apparently they’ll soon be moving to a “Search Everything” bento-box search UI. (I wonder if it really is “everything”?)

The look of the tab box is very clean and technical, mirroring the look of the UIC site as a whole.

A 2017 Code4Lib article, “Participatory Design Methods for Collaboration and Communication,” by Tara M. Wood and Cate Kompare, goes behind the scenes for the UIC website redesign. It’s a fantastic article.

big search box + research guides, databases, journals, articles, etc

The BYU Library has an unlabeled search box for their discovery system (with an advanced search option subtly indicated), and includes lovely buttons below advertising specific resources and majorly highlighting their libguides.

big search

The library at my alma mater, Brown, just has one big search box in the middle of the screen. It’s actually unusual how prominently that box is placed. They’ve put other options below the fold:

search library resources list

Trying a new tab box

So it seems that most other libraries default to an “everything” search, but offer scope options. That seems like it might be a good solution for us, too, but John Jay students are a unique group. What will work for them?

Here at John Jay, I’m now playing with two mocked-up widget boxes. Here’s the first, strongly inspired by UIC:

Three main tabs: OneSearch, Databases, Journal Titles

Defaults to non-scoped OneSearch, as most other CUNYs seem to do, but gives the option for Articles (and peer-reviewed articles), Books, and Media. This, to me, seems like a natural next step: Presenting the big-box search that students say they love, but prominently displaying scope options as a didactic hint and visual cue. This gives the user a hint as to what OneSearch includes. Will students actually use these scopes? We’ll have to test to find out.

One big issue with the “peer-reviewed” checkbox is that OneSearch can only narrow results down to articles published in peer-reviewed journals, but not necessarily peer-reviewed articles, so reviews and columns will show up in the results. We discussed this in our Web Committee, and this is apparently a problem with pretty much all discovery systems, so… Oh, well, we’ll just live with that? I know many students will appreciate this kind of filter, even if it’s problematic. We can use explanatory hover text.

Another issue: “Articles” is distinct from “newspaper articles” as a scope in OneSearch. To sort-of-solve this, I put more explanatory hover text over Articles. (Technically, you can cobble together multiple after-search facets, which Baruch does, but then when the user changes their keywords and searches again, after-search facets disappear, which we didn’t like at John Jay. So we stick to pre-search scopes, which can’t be combined, but do stick around after a keyword revision.)

This tab box includes Databases as a top-level tab:

Databases tab: dropdown menu, Choose by title or subject, Find by citation

Database-specific searching is still how we teach some classes and how many students and faculty alike prefer to search. The tab includes the Popular Dropdown menu, which also directs users to browsing databases by title/subject (duplicating the links below the dropdown menu).

Another tab box I messed around with, more similar to our current one, and inspired by Baruch:

Articles / books / media / OneSearch, simple box

The dropdown menu opens to:Articles, Books, Media, OneSearch

Here, OneSearch is the default search for every tab, and only Articles has any other option. Inspired by Baruch, I faked parts of the dropdown menu — that is, clicking JSTOR won’t present a JSTOR-only search box, it will just open JSTOR as a link.

In a recent Web Committee meeting with other John Jay librarians, we agreed to pursue the first tab box, but perhaps with refinements. Next week, we’ll do some guerrilla usability testing outside the cafeteria so that we can see whether students find the new tab more or less usable. Stay tuned!

Bootstrapping an emergency library backup site

TL;DR: I Bootstrapped lib.jjay.cc, a Library backup site with the links to online resources, hosted on my personal webspace with an official-ish domain name.

Over this past weekend, the John Jay College network went down. It was pretty serious: no one off-campus could access the main College website for a while, and even when that went back up, the Library website was down for about half the weekend. Yikes!

I had done two very lucky things earlier in the month:

I’d bought jjay.cc on a whim. I’d proposed that the John Jay web department buy it as a shortlinker, and when they showed no interest, I bought it myself ($10, why not!) and have been using it as a way to shortlink Library content. (More on customizing Bit.ly later.) It looks official-ish, and no one has to know it’s on the same webspace as my other goofy websites.

I owe a shout-out to Val Forrestal, who once gave a talk at METRO about setting up an emergency library site after getting hacked. I’d always thought, hey, I should do that sometime, just in case. And then, on Saturday, the flurry of emails about the campus-wide network issues seemed dire, and it was time. So I whipped up the Lloyd Sealy Library Emergency Backup site at lib.jjay.cc:

library backup site screenshot

With a second page for the database A-Z list:

database a-z list

How I made the site

I made a basic Bootstrap template. “Bootstrapping” just means copying and pasting various parts of the Bootstrap framework. I used the navbar, panels, and tables. What’s nice is that everything is already styled and mobile-friendly. I only had to work on two HTML files.

The on-campus network was still functioning, thank goodness, so I VPN’d in to copy the HTML from the normal library site. No need to do anything new when all the code’s already done. EZproxy was also intermittently inaccessible, but luckily, students can also use their library barcodes to log into databases that CUNY subscribes to. We noted that fact on the backup site.

I use Dreamhost as my web host and domain registration service. I created a subdomain, lib.jjay.cc, and used my usual FTP login with Transmit to upload the files. I also uploaded a restrictive robots.txt file so that this backup site would never show up on Google.

It took me under an hour to set it up. We publicized the backup site on social media and got a few grateful responses. We were in touch with the John Jay webmaster about changing the link to the library on the main college site, in case IT told us the network issues would take much longer to resolve. In the end, we just waited it out. And now we’ve got a backup site, should anything go wrong with the network or our servers. (Knock on wood.)

Takeaways: make a stripped-down version of your library website and keep it somewhere safe, somewhere you can access it on- or off-campus. And if you don’t mind spending an extra $10/yr, it might be worth it to buy an official-looking but unofficial domain name, just in case.

Library website usability testing: sample scripts

If you haven’t done a usability test on your library’s online services in the last 12 months, you’re overdue! Web trends and user expectations change at a fast rate, as do the many parts of a library’s resource ecosystem. Before rolling out the new Lloyd Sealy Library website in December, I conducted a usability test on the beta version of the site in November. The feedback from students and faculty was helpful in refining parts of the site that weren’t as usable — in areas that were already of concern to us and in places we didn’t know were problematic.

There are a bundle of resources out there for usability testing, but not many example scripts specifically for library websites. Below are the scripts I used for students and faculty. Note that this is tailored to John Jay College’s Lloyd Sealy Library website, so some tasks might not be phrased the same way or even performed on your site. At the bottom of this post, I’ve included some notes about this usability study and my approach.

Read more

Sketchy mocks

In designing the new Lloyd Sealy Library website, I used Balsamiq, a sketchy wireframing tool, to plan page layouts, information architecture, and user flows. I like the sketchiness particularly. Too often, group-approved design gets bogged down in colors and fonts, but charmingly drawn mocks like these free your conversations from the details so you can focus on the important elements of user experience.

Here’s a real mock I used to design a page on a forthcoming project (click for larger):

fake mock


I use the desktop software ($79), but there’s also a cloud-based web app ($12+/mo), which is amazingly well done. There are some very nice touches, like the kinds of items you can drag ‘n’ drop to create your mock, the auto-filltext that appears when you type ‘Lorem,’ and the ‘What should I make for dinner?’ option in the Help menu (really). It’s not the speediest tool, but I have found that added friction allows time for you to really consider what you’re designing. Perhaps William Morris phrased it best: “You can’t have art without resistance in the materials.”

Related reading: Bethany Nowviskie, “Resistance in the Materials” (2013)