Library Hat Rotating Header Image

usability

Big Type and Readability

May 30th, 2012
by Bohyun (Library Hat).
Comments are off for this post

** This blog post has been originally published in ACRL TechConnect 0n May 30, 2012.  **

The Big Type

Jeffrey Zeldman published a post that explains his choice of big type in his website/blog last week.  If you are curious about how huge the type is in his site, see below my screenshot (or visit his site: http://zeldman.com).  It is pretty big. Compare it to any Web site or this current site of mine. Yea, the type is huge.

zeldman.com

He says people either hate or love the big type and the simplistic/minimalist layout of his site or just spends time processing them. I found myself loving it because hey, it was so fr**king easy to read without any other distraction in the site. As Zeldman himself says, “It’s over the top but not unusable nor, in my opinion, unbeautiful.” And in my opinion, being fully functional counts to a great degree in favor of beauty.  

Readability

The strange satisfaction that I felt while reading the articles in his site set in the big type has led me to realize how hard it is to read the main content of any common web page. It is usually so hard that the first thing I do before reading any Web page is to increase the font size inside a Web browser (thereby also removing the top navigation and all other things on both sides except the main content out of my sight). Sometimes, I also use the ‘Print’ preview, just to read, not to print anything (since this removes all ads and images etc.). Also handy is a plugin like Readability. Zeldman’s site was the first site where none of these actions was necessary.

The Web design convention with must-have items such as a top navigation, header image, navigation on the left, ads and numerous links on the right forces us to take out those very items by manually manipulating the browser in order to make the main content simply readable! This is an irony that is more than fully appreciated by those who build and manage Web sites in particular. We (the universal we as Web workers) follow the convention as something canonical because we want to build a Web site that is usable and pleasant to interact with. But while interacting with any such conventional site, our own behavior reveals that we try to eliminate those very canonical elements.

It’s not that we can or should eliminate right away all those conventional items. They are useful for various purposes. But the point is that no matter how useful they are, those things are also great distractions in reading. In a Web site or a page where reading is the primary activity, the readability of its content is a greater problem than other sites or pages.  Zeldman’s Big Type experiment would be simply bizarre if it is applied without any modification to, say, the WSJ homepage. But it probably is not a bad idea to apply it to an individual article page in the WSJ Web site.

Zeldman’s experimental design with the big type reminds me of what the application, Flipboard, does. (See below the demo video if you are not familiar with the Flipboard app.) It strips off elements that are distracting to reading and re-formats the page in a way that is attractive and functional. Where the design fails to help one to read a Web page, an app comes to rescue.

Now you may ask how all these relate to libraries. My question is: (a) how much of the main function of a library Web site is reading, and how much is not, (b) what parts of a library Web site is to be read and not, and (c) how we can balance and facilitate those different uses of a library Web site. Rarely a Web site is designed solely for reading, but reading is an important part of almost always a certain section of any Web site. So this is an issue that is worth thinking about and matters to not only library Web sites but also any other Web site. Just asking these questions could be a good step towards making your Web pages more usable.

In the next post, I will discuss how we read on the Web and how to design and serve the content for the Web in a user-friendly manner.

Usability in Action (2) – The Role of a Homepage

Mar 16th, 2012
by Bohyun (Library Hat).
1 comment

What to place and where to place the many elements of a website’s homepage is often the result of a delicate negotiation and compromise between what users want and what the site owner wants.  While the most ideal case is surely when these two things completely match, this doesn’t happen often for reasons you can easily guess.

I have recently worked with a vendor of a database called UpToDate to implement their new feature of automatic CME (Continuing Medical Education) Credit tracking through the EZproxy of my institution. This new feature brought some interesting changes to their database homepage, which I thought would be a great example to discuss in the context of Web usability.

Their homepage used to look like this. Very clean and to-the-point. Their Googole-like homepage offered exactly what users want most, searching their database for the information they need often at the point of (medical) care.

Previous Homepage

After the introduction of the automatic CME tracking feature, however, their homepage has changed as shown below. To be exact, they show the new homepage first-time when a user enters the site and then every 15 days or so to prompt users to register.

New Homepage

 

There are some pretty obvious usability issues in this new homepage due to the prominent Log in box and Register box as well as the big heading that reads “Earn CME with UpToDate.”

  • To a new users, the whole purpose of this database appears to be Earning CME.
    (I am pretty sure this is not the first impression this database wants to give to its first-time visitors no matter how well known the database is!  The most important role of a homepage is to answer the question for a user: “What does this site do for me?”)
  • To a user who just got to this database, seeing another Log-in vs. Register box makes them doubt if their initial authentication was successful.
    (If you run a website, you do not want to make your user  worry if their first action to get into the site was a failure!)
  • To experienced users, it is confusing where to do what they used to do, which is what they really want from this site. That is, running a search for clinical information.
    (You don’t want your user to “THINK about” how and where to do the most primary action in your site, ever! It should be obvious.)

In designing a homepage, try to provide satisfying answers to these three questions. Then you are on the right track. If you need to add additional information, do so without making the homepage fail to answer these questions first.

  • What does this site do for me?
  • What first action should I take to try what this site promises?
  • Where and how do I do that action (at this second without a need to think)?

Now that you have given a thought about the usability of this example, how would you re-design this page while providing information about the new feature that requires log-in and registration? I will leave that as something for you to think about!

 

Usability in Action (1) – Don’t Offer Irrelevant Options in the First Place

Feb 2nd, 2012
by Bohyun (Library Hat).
3 comments

Many assume that adding more information would automatically increase the usability of a website.  While there are cases in which this would be true,  often a better option is to make that needed information not necessary at all for a user to make the right choice in the first place.

I found a good example recently at work. All state university libraries in Florida started allowing students in any state university to borrow from other state university library. This service was launched with the name, U-Borrow. It’s faster than the traditional ILL (interlibrary loan). It also offers a longer borrowing period.  It’s a great service for library user

In order to advertise this service and make it easier for users to discover, the search result screen in the library catalog now shows the U-Borrow option as a link (as shown below).

Search Result Screen from the Library Catalog

Search Result Screen from the Library Catalog

If the user clicks the U-Borrow link, the computer presents the search search result done in the union catalog. This allows the user to see what state university library may have the item s/he is looking for that is not available in her or his own university library, and to request the item from the closest library from his or her own.

But there is one problem.  Since the original search in the user’s own library catalog was not restricted to a particular format, the U-borrow link also presents items in all formats that match including online resources(see below). But(!) the U-borrow service does ‘not’ apply to online resources.

The Search Result from the Union Catalog

So the current solution is to bring this information to a user’s attention when the user actually clicks any record for an online resource in the search result list.  See below the screenshot where it says “this item is not available through the UBorrow Service.”

Catalog Record with a Note about U-Borrow Restriction

Catalog Record with a Note about U-Borrow Restriction

This is a solution. But not the best solution. If a user gets to this page, s/he is likely to just click the link on top and get frustrated instead of examining the record fully by scrolling down and recognize the note at the bottom.

So in this case, the best solution would be to make the U-Borrow link in the first screenshot result in only the items available through the U-Borrow service. This will obviate the need for the user to heed later the note about certain items are not available. By removing irrelevant options in the first place, we can allow users to make the right choice without making a conscious choice.

Can you think of similar examples like this? Guiding people to make the right choice by providing information is good. But all the better if the right choice can be automatically selected based upon the previous option.

 

Two Simple Ways to Upgrade the User Experience of Your Library

Jan 8th, 2012
by Bohyun (Library Hat).
Comments are off for this post

If you ever had the feeling that your library space might look somewhat dull and unexciting, there might be some relatively simpler ways to change that.  The university I work at has two separate campuses and I work at one of them.  But this week, because of some committee work, I spent time at the other (BBC) campus. This was actually the first time that I had time to look around the library there. And I immediately noticed these colorful chairs on the first floor.

Colorful Chairs

Colorful Chairs at Florida International University BBC Campus Library

The library building at the BBC campus has a pretty traditional look. The building is clean and neatly kept, but the colors of the wall and the carpet are neutral and conservative. While this might induce the sentiments suitable for serious study and concentration, the uniformly neutral colors may also create an impression that the library is dull and boring.

I was quite impressed by how these several colorful chairs do a great deal in counteracting such an impression. Considering that re-painting or re-carpeting is quite expensive, adding some color chairs like this can be a simple and effective way to create a more positive impression about library space to users.

While I was hanging out at the first floor, I was looking for a power outlet to plug in my laptop.  The BBC campus library has power outlets on the floor in addition to some on the walls. This is a great feature because often users would be studying in the middle of the library space where they would be too far away from the walls.

Power Outets

Hard-to Notice Power Outlets

However, the power outlets are not very visible in its white color. Considering that a lot of library users look for power outlets, it would be great if they are made visually more prominent.

To come to think of it, hard-to notice power outlets are a problem in other places. At any coffee shop, the tables near the wall where power outlets appear are often the first ones to be taken.  The same goes for the chairs near power outlets at an airport.  I would be delighted if I can easily locate a free power outlet at a coffee shop or an airport. This means that easy-to-notice power outlets are one sure way for coffee shops and airports to win me over as their client.

Granted power outlets are not the major function of a coffee shop or an airport. But if it is an amenity that is highly sought-after by users, then why not make it easy for them to find and use it?

I wonder what other secondary functions or non-major amenities of a library are frequently used by library patrons and how we can make them stand out more. Perhaps, libraries can match those features with services or resources that they want to promote for a better marketing effect.

 

Usability Express: Recipe for Libraries

Mar 19th, 2011
by Bohyun (Library Hat).
2 comments

Here is the slides for the presentation I am doing with my colleague, Marissa, at Computers in Libraries 2011 conference this coming Wednesday.  I cover the first half in which we look at the common usability flaws in library websites and discuss cheap and quick fixes. I may tinker a bit more since the presentation is still a few days away. But the slides are done.

Do you plan to do or have you done any library website usability improvement project? Share your thoughts and experience or plan!

Usability Express: Recipe for Libraries 


No-brainer Usability: the new Twitter iPhone app

Mar 6th, 2011
by Bohyun (Library Hat).
3 comments

I am presenting about usability issues in library websites in Computers in Librareis 2011 in a few weeks. So needless to say, I have been thinking a lot recently about usability. Today, having updated all apps on my iPhone, I noticed that the Twitter iPhone app finally made some changes in its new message user interface (UI) which makes it more usable.

However, the new UI fails in some respects, and the new app introduces a different usability problem, which is often the case with website redesign. So let’s pretend the new Twitter app is a re-designed library website and see what its pluses and minuses are in terms of usability.

Old Twitter App

When the arrow is pressed down

This is how the old Twitter iPhone app’s new message screen looked like. (Screenshots thanks to @bmljenny.)  It is very basic until you press the “140 â–¼” button on the top right corner over the keyboard.

Once you press that button, however, the whole new world of functionalities unfolds. Taking a photo, inserting an already-taken photo, geo-tagging, adding Twitter user by his/her Twitter username, adding a hashtag, and shrinking a URL is all just one touch away.

Unfortunately, not many people noticed this button; many users weren’t able to take advantage of these useful functionalities.

I must say, the design of hiding these functionalities behind the “140 â–¼” button is both clever and stupid. Clever in the sense that it made the new message UI clean and simple. But quite stupid in the sense that the button that holds these functionalities don’t stand out at all that it resulted in those functionalites being often completely unknown and undiscovered to users.

One of the great usability principle is, in my opinion, is this :
Stop being clever and make things super-obvious.

New Tweet screen in the Twitter iPhone app

The new Twitter iPhone app followed this principle and corrected the issue by removing the “140 â–¼” button. Instead it added a gray bar with four icons that stand for usernames, hashtags, camera, and geotag. I would say this is an improvement since users can now clearly see the icons when they are in the new tweet screen.

However, these icons are not the same as the previous icons used in the old Twitter app. Geotag icon has changed the appearance and the camera icon now functions for two previous features of taking a photo and adding a photo from the photo library.

One of the pitfalls of re-design is that even when improvements are made, often the web team (designers in particular) are not satisfied with just fixing the existing issue. They are tempted to make changes ‘for uniqueness’, which tends to raise rather than solves a usability problem.

So now Twitter seems to have gotten rid of perfectly useful two icons — photo library and shrink URLs.

If I were to redo the screen, I would keep the same icons in the previous app.  After all, some users have discovered and used these hidden functionalities. Why now force them to change their pattern of use?

My version of New Twitter screen

While I was evaluating the new Tweet screen, I realized that the new Twitter app has also introduced a new usability issue to it. The new trending hashtag notification. It appears on top of the tweet timeline.

As quite likely to be intended, since it appears on top and written on a black bar, it stands out.  The problem is that it actually stands out more than what users need. It is downright annoying.

This can be easily corrected if the bar appears at the bottom rather than the top. It would be still noticeable enough for those who take interests in the trending hashtag but would not annoy the majority of users who want to quickly scan the timeline from the top to the bottom.

 

New Twitter Timeline

My version of Timeline

 

 

 

 

 

 

 

 

 

Because of this this new and  un-user-friendly trending notification, the overall reaction to the new Twitter app would be more negative than positive.

Furthermore, what was really interesting to me is that even after the re-design, the new Tweet screen of the new Twitter app does still slightly fall short of the new Tweet screen of the Tweetdeck app. Compare my revised version of the new Twitter app above with the following Tweetdeck’s new tweet screen below. Pretty much what I have done ended up making the Twitter app look almost the same as the Tweetdeck’s existing new tweet screen.

Sometimes, a good design comes from benchmarking a competitor’s product and from following conventions that users are already familiar with.

Can you think of an example of a library website that failed to be user-friendly while trying to be clever and/or from poorly benchmarking another library website?  If you work with a library website, this is a good thing to think about.

Tweetdeck