Research Links: List of Databases, Course Reserves

Quick Search: Articles, newspapers, books and ebooks, videos and more. Results primarily available online but may also include books available in the library or articles that can be requested for email delivery from ILLiad.
Books: Print and online books available from UNLV Libraries or by ILLiad request.
Articles: Articles from academic journals, magazines and newspapers.

Library Information: Pages on library web site, for example research guides, library policies and procedures, hours and events.

The Evolution of a Kiosk Interface

By Brian Egan on November 20, 2009 6:08 PM | Permalink

Updated Below!

With the help of the Media Department and Systems, we recently launched the LabMaps kiosk, located on the first floor next to the copier. The kiosk shows patrons the number of computers available on each floor, and if a patron clicks on one of the floors, a LabMap will display showing a map of where the available computers are located. If you didn’t see the kiosk before 5:00pm, you’ll have missed the first interface I made for it, and that saves me some embarrassment =)

First Interface

But I’m gonna embarrass myself anyway. The first interface was incomplete, and came at the problem from the wrong angle. For those of you who didn’t get a chance to see it, here are a couple of screenshots to give you an idea of how it worked.

Opening Screen, the user would click on one of these links to go into a LabMap:

LabMap Screen, shrunk to fit. The big gray box is the “Back” button.

Design Pros

  1. Focuses on large, clickable links that should be easy to touch with your finger on the kiosk screen.
  2. That’s about it.

Design Cons

  1. Hard to read from a distance. While there was a focus on “large” links, large is a relative term. The text appears quite large on a screen that you’re sitting next to, but wasn’t readable from more than 5 feet away.
  2. Hidden Information? I was thinking in terms of the web when I made this interface. The links are underlined, the boxes are a subtle gray. It doesn’t look like something you could walk up to and press, and I wanted to convey instantly to people that there was more information hidden that you could access by clicking a button.
  3. Hideously ugly. Nuff said.
  4. Thinking in the wrong context. It functioned like a web page, not a desktop application. Click a link, it takes you to another page, and then you click another link to go back. I would say, overall, thinking in the wrong context was my biggest problem with the first interface.

Second Interface

Considerations

After thinking about the cons of my previous design, I began thinking about what I could do to address the problems, and here are the solutions I came up with:

  1. Think about it from a kiosk, not a person sitting at their desk perspective. Fonts need to be larger, people should be able to understand the information from a distance, the interface should be “touchable.”
  2. Use much, much larger fonts. Increases readability from a distance.
  3. Reverse the foreground/background contrast, so that the background was dark and text white. This made the text stand out much more vividly from a distance than traditional black text on a white background.
  4. Remove the header. In order to make the header readable, it would have to take up far too much of the screen. Because we have a sign on the machine which acts as a header, I figured it would make sense to just take it out, leaving more room for the buttons & maps.
  5. Make buttons. The user should see the interface and know they can “press” a button, presumably to give them more info.
  6. If that isn’t immediately noticeable, add a note to the screen informing users there is more info.
  7. The maps are quite large, and need to fit on one screen. Scrolling on the kiosk is a pain. Rather than putting each map on its own page, using a web-style workflow, I thought I would create "overlays", which pop the map above the button interface. This is a somewhat minor change, but I thought worked better for the kiosk interface, and it looks pretty badass.
  8. Make it pretty. No more ugly!
  9. Make it resemble the Catalog interfaces somewhat. I figure I might as well keep some design consistency between our interfaces on the floor =)

Preview

If you haven’t seen the new interface, you can check it out live on the kiosk or by visiting the live page on your current computer! Note: The interface is designed for the browser on the kiosk, Internet Explorer 8, and may not function well with other browsers, such as Firefox, Safari, or Google Chrome.

Conclusion

I have to say, designing the new interface was a bit tricky for me. It provided a lot of fun challenges and got me to think outside of my normal web designer box. If you have any comments or suggestions for how to improve the interface further, I’d love to hear them in the comments!

Updates – 25 Nov 2009

Thanks to all who have provided suggestions for improvement thus far! In addition to the above changes, I have now added the following features:

  1. “You are Here” icon. This should help orient patrons on the first floor when they’re looking at the kiosk interface.
  2. Changed “Reference” to “Research & Information". Hopefully this will make the map a bit clearer, and make it easier to orient yourself.
  3. Added Headings to the Maps. Before, once you clicked on a map, it didn’t indicate which map you were looking at. This was done to save space, but I was able to cram it in there without causing the user to have to scroll.

Add new comment