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 =)
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.
- Focuses on large, clickable links that should be easy to touch with your finger on the kiosk screen.
- Thatâ€™s about it.
- 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.
- 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.
- Hideously ugly. Nuff said.
- 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.
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:
- 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.â€
- Use much, much larger fonts. Increases readability from a distance.
- 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.
- 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.
- Make buttons. The user should see the interface and know they can â€œpressâ€ a button, presumably to give them more info.
- If that isnâ€™t immediately noticeable, add a note to the screen informing users there is more info.
- 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.
- Make it pretty. No more ugly!
- Make it resemble the Catalog interfaces somewhat. I figure I might as well keep some design consistency between our interfaces on the floor =)
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.
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:
- â€œYou are Hereâ€ icon. This should help orient patrons on the first floor when theyâ€™re looking at the kiosk interface.
- Changed â€œReferenceâ€ to â€œResearch & Information". Hopefully this will make the map a bit clearer, and make it easier to orient yourself.
- 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.