Webbin' Rebels

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!

Effective January 2010, Urchin 6 will become the default/primary web traffic analysis tool forthe library.  Due to migration issues, Urchin 6 will not have the historical data currently available in version 5.  Urchin 5 will be available for sometime until an official decommission date is determined.

Link to Urchin 5  (Traffic Data from July 31.2006 to present)

Go to the Web Site Statistics page on the staff wiki for the username and password.

If you need additional information or have a question about Urchin, please contact Kee Choi.

The library also uses Google Analytics to analyze traffic on commercial systems and on certain sections of the library web site.  Much of the functionality in Google Analytics will be available on Urchin 6 so many of the GA users can choose to migrate after January 2010.  A comparison chart of Urchin 5, Urchin 6, and Google Analytics is available here.

Recently, the WMC put out a call for volunteers to participate in the Going Mobile Interest Group.  The group had its first meeting in October and a good cross section of the library were represented.

Minutes from the October 20 Meeting

The group spent some time talking about FAQs so it stood out as a topic of interest for everyone at the meeting.  There are existing FAQs scattered about the library's web site but the group agreed that a separate FAQs, targeting our mobile device users, is needed.

Brian's wireframe/prototype includes a Policies section but that will be changed to FAQs.  The FAQs will include answers to policy related questions.

Examples:

Can I eat and drink in the library?
What are the library's hours?
Where are the branch libraries located?
How do I get on the wireless network?
Do you have laptops available for use?
What are the Book'n Beans' hours?
Can I get reference help when I'm way from the library?
Where can I find out about jobs in the library?
How much does it cost to print and make copies?
Where can I find directions to the Library?

Can you think of any other frequently asked questions that would be useful to our mobile device users?  Post your suggestions as a comment.



 

The web is an exciting profession because of just how rapidly things change. Within the last few years, one phenomenon has made the lives of web designers much easier: Cascading style sheets, more commonly known as CSS.

CSS is an incredible technology because it allows designers to quickly and easily control the look of a multiple pages without touching the content. CSS can also be applied within a variety of contexts, such as for mobile browsers, regular web browsers, print, and in the future, screen readers.

As pointed out by Kee earlier this week, the latest update to our templates caused printing problems for a number of pages. Years ago, this problem would have struck fear into the hearts of designers. But today, thanks to the adoption of CSS, providing printer-friendly pages is as simple as making a few updates to our CSS files.

So that’s what we’ve done. Earlier this week, I went through our CSS files and wrote a bit of extra code to alter the output of printed pages. Now when you print something off our website, you should get clean printouts that remove all of the unnecessary elements from the page, such as navigation, quick links, and breadcrumbs, leaving only the important content for print display. Overall, this should improve readability and save ink!

Give it a try! Navigate to any page on the website and run a “Print Preview.” You should see the new print interface in all its glory! If you have any suggestions for improving the display of printed pages, please let me know in the comments!

While they may be trite and self-helpy, I’ve always enjoyed the 7 Habits of Highly Effective People. One habit I find particularly useful is the seventh: Sharpening the Saw. The basic principle is that one must continually strive for improvement in a variety of areas in order to maintain a healthy lifestyle. When applied to our web site, sharpening the saw means continually improving the look and functionality of our site to maintain a great site for our patrons.

We do this with larger-scale projects, such as enhancing our digital collections with dmBridge or the updating the home page and website template. It is just as important that we focus on smaller improvements as well as large. Smaller updates include improving the look of our maps, updating older looking pages to reflect our new template, or simply modifying the text on a page to be more accessible for screen readers.

These updates may not be as noticeable or glamorous, but it is crucial we continue to make these small improvements. We made a very good start with the latest template change, but there are still a lot of areas with room for improvement. Much of our site doesn’t quite conform to the style guide, which gives our site a piecemeal feel at times. Furthermore, our site used to be extremely difficult for screen readers to interpret. I’ve tried to simplify the code of our web site a great deal to aid this, but if text isn’t formatted correctly, that can pose a major challenge to those with disabilities. With the latest update, we created a new style for menus, and some menus still don’t quite conform to that style. Finally, there are just some things that are ugly and should be fixed.

And that’s the purpose of my weekly updates. I maintain a running list of pages that I’d like to improve, select two each week, and update the pages. So far, I’ve made a few changes, such as overhauling our directions page (old version), updating the EZProxy pages (also improved error feedback), made minor text updates to the circ pages and faculty FAQ, and converted a number of old menus into the new style.

All of this should help our site shape up a bit, and hopefully bring about a more coherent, user-friendly experience for our patrons.

The following is my current list of “To-updates.” If you would like WDS to take a look at any of your pages, please let us know in the comments section or by sending us an email! I try to scour the website for sources of improvement, but hey, I’m only human. Furthermore, I always welcome critical feedback if you don’t like something I’ve done.

1. Serial Solutions Journal Titles Search – Bug in Internet Explorer that needs fixins
2. /about/history.html
3. /nvlasvegas/index.html
4. The Calendars (pretty ugly right now)
5. /webforms/work_request.html – some slight display bugs in various browsers
6. Singapore Resources (update do new menu style)
7. Minify and Compress CSS/JavaScript (this is a technical one, but will greatly speed up the site for users with slower connections)
8. Create sprites to reduce image calls (another techy one)
9. /about/dropboxes.html
10. ILLiad

As I’ve said, this is my current running list in which I’m constantly adding and checking off items. Please let me know if you’d like your page/site/folder/application added to the list, and lets keep striving for a better website!

What is "LabMaps" you say?  LabMaps is a part of the LabStats Suite of products by Computer Lab Solutions.  The LabMaps software provides a visual layout of the computers in the library and it's status in real-time.  Basically, our patrons will be able to locate available computers on all five floors from one computer/kiosk in the library.

Preview Link- Only accessible within the library.

Systems, Media and Computer Services, and WDS all collaborated on the LabMaps project.  Providing a dedicated LabMaps display in the public area is currently up for discussion.

OIT has already implemented LabMaps for a couple of their labs and I'm told that they are planning to expand to include more labs on campus.

Previous Week

Review of previous week tasks:

• #1 Primo Importante: Finish Digital Collections Mockup and Begin Review Process (Unfinished! What can I say? I'm fickle when it comes to designing!)
  
• Slay the beast that is Labmaps
• Collect Ideas for Mobile interface from Mobile Interest Group
• Weekly Updates: Rotating Ads on Home Page, Add PIN Creation to ENCORE Login Screen

Also:

• Updated my slideshow app for dmBridge
  
• Finished Rotating Images changes.
• Attempted to begin standardizing our <form> html
  
• Got mod_deflate configured with systems on the test server (provides big speed boost to our users!)
• General dmMonocle support & small updates
  

This Week

• Create Digital Collections/CML Mockup
• Convert Mobile Wireframes into web template for content porting
• Write real blog post - not just weekly updates.
• Finish Nevada Repositories
  
• Finish New Years cards
• Publish Labmaps
• Publish "Computing" page
  
• Finish Printing Functionality for dmMonocle
• Weekly Updates: Fix Serial Solutions Bugs, Update Calendar
  
• Rock the Hell out of Nevada Day! Who's with me!?
  

Previous Week

• Watch videos from Media usability tests & take copious notes :-).
• Watch Lynda.com Drupal tutorials.
• Help get together questions for WebOPAC/Encore usability tests.
• Add info on copying to the website "printing" pages.
• Begin compiling & editing existing content for new CML website.

First 2 items are half done :-( The first took WAY more time then I anticipated.

Also completed last week:

• Updates to External Relations pages
• Updates to Circulation pages

This week

Incomplete tasks from last week carry over, with these additions:

• Remove/fix references to 'circfaqs.html' page
• Review Nevada Repositories pages
• Finalize WebOPAC usability test 
• Complete initial CML content
  

Previous Week

Review of previous week tasks:

Take Screenshots and Finish Research Article

Finish Digital Collections Wireframes

Finish Digital Collections Mockups

Watch Media Usability Videos

Figure out workflow with Alex

Create Sandbox Environments for Drupal Testing

Also:

• Began work on a slideshow app for dmBridge
• Fixed the Resource of the Week blog, which had a slight error.
• Began updates for Rotating images, need to complete them
• Almost wrapped up the LabMaps project. Minor updates left.

This Week (shortened due to AL Thurs & Fri)

• #1 Primo Importante: Finish Digital Collections Mockup and Begin Review Process
  
• Slay the beast that is Labmaps
• Collect Ideas for Mobile interface from Mobile Interest Group
• Weekly Updates: Rotating Ads on Home Page, Add PIN Creation to ENCORE Login Screen

• Take Screenshots and Finish Research Article
• Finish Digital Collections Wireframes
• Finish Digital Collections Mockups
  
• Watch Media Usability Videos
• Figure out workflow with Alex
• Create Sandbox Environments for Drupal Testing