Adapting the “Best Search Box Ever”

Eric Frierson of St. Edward’s University recently wrote about his efforts to make library search boxes more responsive to users. We know that many users don’t see our search boxes as keyword search receptacles—they see them the same way they see Google search boxes: a place you just throw in a question or anything you want in order to get some results. So what does his search box do?

It defaults to  their discovery system (EBSCO Discovery Service, or EDS). But before taking the user there, a PHP script parses the search, aiming to correct for certain behavior. If a user types the name of a database, e.g. JSTOR, they might get taken directly to that database. If someone types "Sociology books," they go to a page giving them a choice ("Did you mean…") of going to a book-limited search for sociology OR a search for "sociology books" in the discovery system. If they search for "hours," they get a choice of a link to a page on library hours or a discovery search for "hours". Brilliant, right? St. Edward’s features the search box on their visually appealing library home page.

Eric was kind enough to share his PHP file, so I tried my hand at adapting it to our own context. Search for "hours" and you’ll get a link to our hours page. Our information literacy tutorial is called PILOT, so I added that. It’s terrific, since I could never have made this PHP script from scratch, but once it’s set I can adjust the variables. It’s now live on the Library at the Davis Center page. I’m also intending to incorporate into the next version of our Desire2Learn widget.

I also switched the HTML template on the "Did you mean" page to the Twitter Bootstrap framework, which I had been wanting to work with, just to figure out how the whole grid-based responsive design thing works. It’s quite easy to work with, and the result is that the elements on the page reflow nicely as the screen resolution drops.

response to search for "reserves", horizontal flow response to search for "reserves", vertical flow

One thing I really liked in the St. Edward’s search box was that it suggested questions from their LibAnswers site as the user types. As I recently posted, we decided to go with an open-source Q&A solution, so I couldn’t used Springshare’s handy API. I realized though that I could include arguments in the PHP file that would direct particular questions toward particular pages in our Q&A site—more labor-intensive to set up, but maybe worth it—if I could find a way to auto-suggest them. Twitter Bootstrap actually has a handy typeahead script that works great, but required access to the CSS, which in our CMS I simply don’t have.

So another auto-suggest that appears to be widely used comes from JQuery UI, and that one actually includes some styles in the script itself. This allowed me to do some styling even without access to the CSS.

jquery ui code

So it still looks a little awkward (and I haven’t been able to make it look uniform in different browsers), but you’ll see that if you start typing e.g. "how do i" into the search box, suggestions begin to appear.

search box with search suggestions appearing automatically

It took me a while to find a way to log search queries to a text file, but finally I hit upon a page from University of Tennessee that had some usable code. I know it’s better to save queries to a database than a flat file, but I don’t have access to a database on the server, so this will have to do.

One question that I’m reluctant to face is just how much overhead one can justify including for this. I’m using:

  • JQuery, which is not a big deal because most people will already have it cached (I use the Google-hosted version);
  • JQuery UI for the search suggestions, and I had to customize it, so I can’t use the Google-hosted version. I removed the parts that I didn’t need, and will minify it, but still;
  • Bootstrap, which is a very large CSS file to include for the very simple "did you mean?" page, though I’ve removed large parts of that too and likely can do more;
  • Another JQuery plugin to put the dummy text in the search box (can’t do without that!)
  • and then the PHP script could start to get pretty long as well…

I’m a little afraid to count up how much data is needed for this search box to be so fabulous.

But in any case, three cheers for librarians who get great ideas, have the skills and talent to execute them, and then, crucially, share their work. Again, I could never have written this script from scratch. I might add that this is exactly how I like to see universities and community colleges working together—that is to say, community colleges learning from and adapting universities’ innovations, since it’s so rare for us to have UX specialists and the like. Unequal exchange? Maybe…

Making an econo library Q&A site with Question2Answer

I was sort of taken with SpringShare’s LibAnswers service when I first saw it—great idea for maintaining an FAQ/knowledge base. I immediately thought about how to find some funding for it, and that led to wondering about a free solution. LibAnswers is not even very expensive, but in the current budget climate asking for money for a new service is really to be avoided.

I googled for similar services and came across the phenomenon of the "Stack Overflow clone." The idea: q&a around some sort of common interest, usually with user-submitted answers, indications of user trust/authority, the ability to designate a "best answer," social tagging etc. The genre extends from the lamentable Yahoo! Answers the recently buzzworthy Quora, not to mention Stack Overflow itself. Often Q&A’s will be a portion of some larger site—think Metafilter’s Ask MeFi, MakeUseOf Answers, etc. (There’s probably something interesting to say about the relationship between Q&A sites and general discussion forums but I’ll leave that alone.) Stack Overflow appears to be seen as the starting point for Q&A platforms.

There are dozens of these clones, written in various programming languages, hosted locally or remotely, free/premium etc. (A good list can be found at the Stack Overflow.) Question2Answer was the one that looked most promising for my needs. It’s open-source, fairly new and under active development. Unlike most of the other open-source clones, it’s a LAMP package—so if you’ve e.g. installed and configured Wordpress, you know how to get around in it. (I wouldn’t know how to get started with a Ruby or Python package.) This also means you can test it locally by using XAMPP.Question2Answer The feature set is impressive. You can set tags and/or categories, moderate questions, set permissions for asking, answering, voting on answers etc., and do any number of things with layout. When someone asks a question, they are taken to possible matching questions, and "similar" questions can be made to display near one being viewed. It also has a plugin architecture with at least a few users contributing code regularly. Not many themes are available, but most of the elements are easy to manipulate via CSS. And—cool feature—you can designate a separate, more lightweight theme for mobile visitors. For analytics, you can of course use Google or any other package.

So, after a few weeks of playing with a test installation and working on the CSS (using our unfortunate college colors), I opened it to the public around the beginning of March. The "stapler" logo is supposed to refer to the most common library question, but it seems like I’m the only person who gets that… oh well. Branding is not my strong suit. So far almost all the questions have been "seeded" by us librarians. Only three have come from the public, and one of these was withdrawn soon after being posted. I’m using Twitterfeed to auto-post an RSS feed of the posts to our Twitter account. (Yes, the product generates a bunch of RSS feeds, so you can play with that to make widgets if you like.) I’m actually allowing users to answer questions if they like, though I don’t think that’s necessarily ever going to happen.

Screenshot of the SCC Library Answers site. Shows a question that came from a student and that does not make sense.Obviously this approach has some disadvantages compared to using a service like Springshare’s. I probably spent a good deal more time getting this running than I would have configuring LibAnswers, and I’m now responsible for backing up the SQL database, updating the software as needed, etc. If I need support, I go to the Question2Answer Q&A site and hope for the best.

Then there’s performance. Springshare seems to do pretty well on this score, likely using Amazon or some other cloud service, whereas I’m hosting this on a cheap commercial shared account that our instructional technology team recently got to allow people to start Web projects without going through the grind of marshalling IT support.

layout tab from site control panelBut on the other hand, you have a great deal more control over the look of the thing (I’m not a fan of Springshare’s design so this is in itself appealing). You can add stuff to the header—e.g. Google web fonts, favicons, site header/footer etc.—and do whatever kind of add-on widgetry you like. In addition, I generally find tweaking CSS rewarding, simply because it remains relevant and I really don’t want to forget what I know about it.

Anyone out there reading this, please have a look at our site and let me know what you think!

State of Virtual Reference at SCC

Put together some nice (read:Microsoft default) graphs and charts showing where we’re at in our VR efforts and presented it at the most recent librarians’ meeting.

One surprise here, for me, was finding out that  you can embed PowerPoint using the Microsoft "WebApp." I guess this became available a few months back. They use images rather than Flash, which I like, although you then lose any links that may be there. It’s not social like Slideshare, and that’s is fine for a a lot of purposes—I don’t want to know how few people have viewed this sort of thing, or see links to irrelevant other slides when it’s done. I like Google Presentations because it preserves text as text, but it’s pretty inflexible. So, as a simple way to get something created in PowerPoint online, this one’s hard to beat.

Another nice thing about the MS product: you can, to a limited extent at least, edit the presentation without breaking embeds.

Redesign of Centers pages


The SCC website has special sections for our outreach centers. A couple semesters ago I put up web pages that outlined what services were available (requesting books via OPAC, off-campus database access etc.). Just recently I redid these, putting contact options at the top (with some big free icons I found via Smashing Magazine or Webdesigner Depot or something), and cutting some text out to make it less overwhelming. IM widget is now "above the fold"—this should drive a little more traffic.

Also created some more "friendly" URIs for them:

Unfortunately I found that when I view the pages on the iOS, the embedded YouTube video doesn’t display as they usually do! I assume this is caused by our CMS… So I’ll have to insert a link to them. (EDIT: I found that using YouTube’s dead-simple iFrame embed code fixed this problem.)

Also added Skype as a contact option, which I can monitor from my netbook. I don’t really don’t expect anyone to use it… I’ve also looked into TokBox and TinyChat—TinyChat is surprising powerful, with desktop sharing, whiteboard, and document collaboration built in—but, as Char Booth has suggested, these are all very possibly a waste of time and effort.

Using SurveyMonkey to make registration forms for a library orientation

First page of registration form

I gave some online webinar-style library instruction sessions over the last couple semesters and tried a few different registration options. Using SurveyMonkey worked pretty well, so I thought I’d share how I did it for the benefit of anyone in a similar situation.

Registration serves two different purposes in my situation. First, I needed to be sure to keep the number of students below a certain threshold. Second—and more important, since I’ve never hit the upper limit anyway—I needed to force students to show that they are able to connect to our web conference host, and generally that they are sufficiently competent with technology. We use Elluminate, which is provided to all California community colleges for free via the Chancellor’s office, and while it’s dandy for web conferencing, some people just can’t seem to get it to work on their computers. Wasn’t Java supposed to be this breakthrough cross-platform technology that was going to make operating systems obsolete? Am I showing my age by asking that? Well, that never happened, and it seems like every time I attend an Elluminate webinar, the first 5 minutes or more are taken up with technical hangups.

I also learned the hard way that you can tell people about system requirements and show them how to test their system—just as you can tell them to connect ten minutes early—but they won’t actually take those steps unless they are forced to.

SurveyMonkey is not an obvious choice for registration forms. I played around with EventBrite and even used it for one orientation in a previous semester. It’s a slick service, and free if you don’t charge anything for your events, but it automatically sent students a PDF “ticket” that some found confusing. I also liked the idea of a step-by-step sign up process, and EventBrite is a one-page thing. Google Forms could also work, since it allows question and page branching, but I found it difficult to wrangle for my purposes. Since Google has recently beefed up the logic branching on Forms, maybe it would work better now, but I haven’t played with it lately. Our library has an SurveyMonkey pro account, so I figured I’d give it a try. The following may be possible on a standard free account as well—I’m not sure what the limitations of the free account are.

Designing the form


I start the form (feel free to have a look) with some questions about the user’s system. First question is how much RAM their system has (low RAM is bad for a Java program…). If they don’t have enough, they’re sent to a page telling them they don’t meet the requirements. If they choose “Don’t know”, they’re sent to a page telling them they have to find out before doing the survey. I know, that’s harsh, but my guess is that people who don’t know this also don’t know what web browser they use, what Java might be, and so on—not crimes, but potentially indicators that they’re better off doing a library session in person rather than online.

If they succeed in telling me they have more than 256 megs—which might not be true, but these days it most likely is—it’s on to the next tasks, which it’s harder to fake.

I provide a link to Elluminate’s “dummy session” page, where you actually load the Java program and enter a classroom. (Here SurveyMonkey is superior to GForms, since you can insert links and other HTML code.) Once they load the Elluminate classroom, they can see a message on the virtual whiteboard. I have them type that message into the registration form. This way I know that they have successfully loaded the classroom at least once. If they’re using IE, this often means navigating beyond the helpful “blocked download bar” that frequently paralyzes unsophisticated users.

IE pop-up blocker. THANKS!!

Next, I have them copy a brief passage from the screen and paste it into the form. They’ll have to do this with citations during the session, plus this seems like a basic computer literacy thing—if they can’t do this, what else can’t they do?

Finally, I have them submit some basic info: name, e-mail, etc.

Setting up the collector

SurveyMonkey has an impressive number of configuration options for data collection, a few of which were important to set correctly. One default setting, understandable for a survey, is not to allow more than one submission per IP address. That has to be changed, obviously, since people could be signing up from computer labs.

Under “Change Restrictions,” I set a cut-off date/time. Since I needed to review all of the submitted registrations, I needed time to do that. So on the page people accessed the form from I made it clear that the registration form would close 6 hours before the session. I also set the maximum response count to 15. This can potentially cause a problem because incomplete forms count toward your total—I got many responses where only the first page was filled out (people apparently being either put off or flummoxed by having to open Elluminate). So, it becomes important to check the form submissions every day or two to delete incomplete responses, otherwise people might be told the session is full when it is not.

How did it work?

This process undoubtedly tripped up a few people; as I said, I got some submissions from people who did not get through the whole form. But that’s ok with me. The students I got in the sessions did very well with the technological hurdles, and I was able to jump right in to the orientation with (almost) no troubleshooting.

Confirming registration was a bit labor-intensive. I needed to log in to SurveyMonkey daily (there’s no e-mail alert a la GForms) and go to “Browse Responses” to skim the results. If someone registered but skipped the “copy message from classroom” step, as happened several times, I e-mailed them and said they were not yet registered and to try again. Once someone was registered, I e-mailed them with a message about how to connect to the session. I then needed to collect all the e-mail messages in order to send out a reminder (here a service like EventBrite really has advantages, but also entails some privacy concerns).


You could do more with this—collect information about people’s systems (OS, browser etc.) in order to help with troubleshooting in the future. Or could ask them questions to gauge what draws particular students to webinar-style orientations. I’m not totally sure though that people would want to answer all these questions or that I’d be able to use the information.

Or it may be that another tool exists that would simplify the confirmation and reminder process, or just be better in every way.

[go to top]