Library Hat Rotating Header Image

Web

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

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

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.

 

Tips for Everyone Doing the #codeyear

***   This post has been originally posted to the ACRL TechConnect blog.  ***

Learn to Code in 2012!

If you are a librarian interested in learning how to code, 2012 is a perfect year for you to start the project. Thanks to CodeAcademy (http://codeacademy.com), free JavaScript lessons are provided every week at http://codeyear.com/. The lessons are interactive and geared towards beginners. So even if you do not have any previous experience in programming, you will be able to pick up the new skill soon enough as long as you are patient and willing to spend time on mastering each lesson every week.

A great thing about this learn-how-to-program project, called #codeyear in Twitter (#libcodeyear and #catcode in the library-land) is that there are +375,443 people (and counting up) out there who are doing exactly the same lessons as you are. The greatest thing about this #libcodeyear / #catcode project is that librarians have organized themselves around this project for the collective learning experience.  How librarian-like, don’t you think?

Now, if you are ready to dive in, here are some useful resources.  And after these Resources, I will tell you a little bit more about how to best ask help about your codes when they are not working for you.

Resources for Collective Learning

Syntax Error: Catch the most frustrating bugs!

Now what I really like about #codeyear lessons so far is that some of the lessons trip you by trivial things like a typo! So you need to find a typo and fix it to pass a certain lesson. Now you may ask “How the hell does fixing a typo count as a programming lesson?”

Let me tell you. Finding a typo is no triviality in coding. Catching a similar syntax error will save you from the most frustrating experience in coding.

The examples of seemingly innocuous syntax errors are:

  • var myFunction = funtction (){blah, blah, blah … };
  • var myNewFunction = function (]{blah, blah, blah … };
  • for(i=0,  i<10, i++;)
  • var substr=’Hello World’; alert(subst);
  • –//This is my first JavaScript

Can you figure out why these lines would not work?  Give it a try! You won’t be sorry. Post your answers in the comments section.

How to Ask Help about Your Codes      

by Matteo De Felice in Flickr (http://farm4.staticflickr.com/3577/3502347936_43b5e2a886.jpg)

I am assuming that as #codeyear, #catcode, #libcodeyear project progresses, more people are going to ask questions about problems that stump them. Some lessons already have Q&A in the CodeAcademy site. So check those out. Reading through others’ questions will give valuable insight to how codes work and where they can easily trip you.

That having been said, you may want to ask questions to the places mentioned in the Resources section above. If you do, it’s a good idea to follow some rules. This will make your question more likely to be looked at by others and way more likely to be answered correctly.

  • Before asking a question, try to research yourself. Google the question, check out the Q&A section in the CodeAcademy website, check out other online tutorials about JS (see below for some of the recommended ones).
  • If this fails, do the following:
    • Specify your problem clearly.
      (Don’t say things like “I don’t get lesson 3.5.” or “JavaScript function is too hard” unless the purpose is just to rant.)
    • Provide your codes with any parts/details that are related to the lines with a problem.
      (Bear in mind that you might think there is a problem in line 10 but the problem may lie in line 1, which you are not looking.) Highlight/color code the line you are having a problem. Make it easy for others to immediately see the problematic part.
    • Describe what you have done to troubleshoot this (even if it didn’t work.)
      : This helps the possible commenter to know what your reasoning is behind your codes and what solutions you have already tried, thereby saving their time. So this will make it more likely that someone will actually help you. To believe it or not, what seems completely obvious and clear to you can be completely alien and unfathomable to others.

Some JavaScript Resources

There are many resources that will facilitate your learning JavaScript. In addition to the lessons provided by CodeAcademy, you may also find these other tutorials helpful to get a quick overview of JavaScript syntax, usage, functions, etc. From my experience, I know that I get a better understanding when I review the same subject from more than one resource.

If you have other favorite Javascript please share in the comment section.

ACRL TechConnect blog will continue to cover #libcodeyear / #catcode related topics throughout the year!  The post up next will tell you all about some of the excuses people deploy to postpone learning how to code and what might break the mental blockage!

Protest against SOPA and PIPA to protect the open Internet

***Protest against SOPA and PIPA to protect the open Internet.***

Digitizing current materials – notes (to be updated later)

Digitizing current materials

What if you want to proactively digitize relatively current materials of your institution?

- The opportunity to capture materials within the context and in communication with the contributors.

- Express digitization grant from the national network of libraries of medicine. 2010-2011

CHALLENGES

- scan or not scan?
Many variables to consider before making the items public because of the currency and the content of the materials
[ +33500 peocessed; 8000 scanned ]
- no institutional policy on copyright
- hard to form a complete collection
- hard to imagine use cases; too early to tell
- digital archiving / curation before the test of time.
- connecting the outcome to the institution itself

BENEFITS of proactive digitization

- library promotion
- certain context easily lost can be preserved
- materials previously unidentified or scattered are gathered together

Tech Skills for New Librarians & Me (seeking advice)

I was recently asked to write a short piece on what kinds of tech skills new librarians will need to have before going out to the job market.  So I got to put together a list of some of the basic skills for librarians regardless of specialization. While compiling the list, I was most surprised at how many technology skills I have counted as basic and how much more there is to learn beyond them.

Basic technology skills for new librarians

  • Computer operating system
    • Downloading and installing programs
    • Connecting an auxiliary device to a computer such as a printer, scanner, etc.
    • Understanding the system settings
  • How to troubleshoot anything
    • Knowing what to ask a library user who reports a technology-related problem whether it’s a hardware or software issue
    • Knowing how to replicate a problem
    • Knowing how to research a solution on the Web
  • How electronic resources work
    • Understanding what a persistent URL is and being able to tell a URL is persistent or not
    • Knowing what authentication and proxy means in the library setting
    • Understanding how an electronic resource is set up for access from a trial to the link placed in different library systems such as OPAC (Open Public Access Catalog), ERMS (Electronic Resources Management System), Open URL Link Resolver,  and the library web site
    • Knowing  how to troubleshoot remote access issues to electronic resources
  • Systems
    • Knowing what different library systems do and how they work together to provide users with access to information resources. (e.g. Integrated Library System (ILS), OPAC, discovery service, openURL link resolver, ERMS, digital repository system, content management system, proxy server, etc.)
  • Web
    • Proficiency in research tools available on the Web
    • Knowing how to properly use the WYSWYG editor in a blog or any content management system
    • Understanding  the difference between HTML and MS Word document
    • Understanding what a web browser does
    • Knowing how to make screencasts (video tutorials) and podcasts
    • Knowing how to create and edit images and video for the Web
    • Knowing what usability is and how it applies to a library
    • Knowing how to write for the Web
    • Knowing how to utilize social media such as Facebook and Twitter
    • Understanding the mobile devices and related technology that are applicable to a library

For those more adventurous:

Here is a random selection of cool technology skills one may want to check out:
(NB. Don’t be overwhelmed. This is by no means a list of required skills)

  • Markup languages such as HTML, CSS, and XML, XSLT, etc.
  • Programming languages such as JavaScript, PHP, Python, Perl, Ruby, etc.
  • JQuery and other similar JavaScript libraries
  • Relational database and SQL
  • Unix
  • Open source CMS (e.g. Drupal, WordPress, Joomla, etc.) installation, customization, upkeep, etc.
  • Proprietary ILS systems
  • Open source digital repository and indexing systems
  • APIs and Mash-ups
  • Semantic Web and linked data
  • Web analytics and statistics
  • Data mining and data visualization
  • And many more as you see the need for problem-solving…

Further reading:

Then vs. Now – some thoughts:

When I was a LIS student a while ago, I couldn’t wait to learn whatever new skills and to apply what I learned to work. I volunteered for all sorts of work to just test things at a real library setting: I made a foreign newspaper database after taking a relational database course, worked on the library’s digital repository system after taking the Digital Library course in which the whole class built a small digital library on the Web from the scratch, made podcasts and video tutorials, etc, etc.  Back then, I was interested in finding out what I needed to learn more. I was never too concerned about what I will do with what I learn. I assumed that I would use whatever I learn.  (Well, that isn’t always the case. And when you have little time to spare, picking what to learn becomes a very important matter. )

Now that I have been a librarian for close to three years being the technology manager of my small library, I realize that my wide-eyed enthusiasm of this kind has somewhat died down. Not because I do no longer love to learn new things but simply because the time I can spare for pure learning has become increasingly scarce. I have learned that often the technology you want (for the reasons of elegance, power, etc.) cannot simply be  brought into your environment because of many local conditions that cannot be changed. I also have learned that one has to be very strategic in managing time that one invests in learning.

One of the many mistakes I made and still make is to pick up random stuff I want to learn and invest time in doing so for a few weeks. All is good up to that point. But the problem occurs when the work gets very busy or some life changes happen.  I get completely swamped by other things. Unless there is a related project at work or an immediate need either personal or work-related, my learning takes a back seat and when I get back to it later on, I find myself starting all over again from the beginning. And of course, as a librarian, my technology-related work can be not-so-hands-on. Imagine writing reports, applying for grants, making inventories, supervising students, etc. Unused skills get rusty fast.

I still haven’t found any good way to deal with this problem. Information and resources for learning new stuff are almost abundant. Finding out what new coll tech stuff is out there to learn is not so difficult either. But setting up priorities and effectively managing my time is now on top of my To-Master Skills list above any particular technology. Many cite Google Time and say to invest at least 20 % of work time to a pet project. But in practice, this is easier said than done.

Should I be worried about my enthusiasm dissipating?  How do you manage to keep learning new things that are not directly related to your work? How do you keep your self-learning and pet project going continuously and persistently?

Personal Branding for New Librarians: Standing Out and Stepping Up

Tomorrow, I will be giving a webcast for ACRL 2011 Virtual Conference with Kiyomi Deards and Erin Dorney. The webcast is open to all attendees of either ACRL 2011 Conference or ACRL 2011 Virtual Conference. I have moderated a panel discussion program at ALA 2011 Midwinter on the same topic. But in tomorrow’s webcast, we will discuss more in depth about the right fit between one’s own personality / preferences and personal branding tools and practical tips to develop and  manage one’s own personal brand.  We will also have a lot of time dedicated for questions from the webcast attendees.

One thing that I have written before and want to re-emphasize is that personal branding is not an end itself.  It is more of a by-product of the successful pursuit of one’s own interest, contribution, and networking in librarianship. Many doubts and suspicions about personal branding stem from this misconception that personal branding is all about promoting oneself as if it could be an end itself. And it is not.

What the message of personal branding boils down to is: Be engaged in the profession, share your thoughts and ideas with peers, and contribute to the ongoing dialogue of librarianship. The new twist is that now with the rise of many social media tools, this can be done much faster and more effectively than before and even on the cheap (without even attending a conference physically).

Here are the slides for the webcast.  If you are attending ACRL 2011 conference, join us. Otherwise, share your thoughts!



Usability Express: Recipe for Libraries

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!


No-brainer Usability: the new Twitter iPhone app

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

Why Not Grow Coders from the inside of Libraries?

How fantastic would it be if every small library has an in-house developer? We will be all using open-source software with custom feature modules that would perfectly fit our vision and the needs of the community we serve. Libraries will then truly be the smart consumers of technology not at the mercy of clunky systems. Furthermore, it would re-position libraries as “contributors” to the technology that enables the public to access information and knowledge resources. I am sure no librarian will object to this vision. But at this time of ever-shrinking library budget, affording enough librarians itself is a challenge let alone hiring a developer.

But why should this be the case? Librarians are probably one of the most tech-savvy professionals after IT and science/ engineering/ marketing folks. So why aren’t there more librarians who code? Why don’t we see a surge of librarian coders? After all, we are living in times in which the web is the platform for almost all human activities and libraries are changing its name to something like learning and ‘technology’ center.

I don’t think that coding is too complicated or too much to learn for any librarian regardless of their background. Today’s libraries offer such a wide range of resources and services online and deploy and rely on so many systems from an ILS to a digital asset management system that libraries can benefit a great deal from those staff who have even a little bit of understanding in coding.

The problem is, I think, libraries do not proactively encourage nor strongly support their in-house library staff to become coders. I am not saying that all librarians / library staff should learn how to code like a wizard. But it is an undeniable fact that there are enough people in the library land who are seriously interested in coding and capable of becoming a coder. But chances are, these people will have no support from their own libraries. If they are working in non-technology-related areas, it will be completely up to them to pursue and pay for any type of learning opportunities. Until they prove themselves to be capable of a certain level of coding, they may not even be able to get hands-on experience of working in library technologies/systems/programming. And when they become capable, they may have to seek a new job if they are serious about putting to use their newly acquired programming skills.

It is puzzling to me why libraries neglect to make conscious efforts in supporting their staff who are interested in coding to further develop their skills while freely admitting that they would benefit from having a programmer on staff. Perhaps it is the libraries that are making the wrong distinction between library work and technology work. They are so much more closely intertwined than, say, a decade ago. Even library schools that are slow to change are responding and adding technology courses to their curriculum and teaching all LIS students basic HTML. But certainly libraries can use staff who want to move beyond HTML.

At the 2011 ALA Midwinter, I attended LITA Head of Library Technology Interest Group meeting. One of the issues discussed there was how to recruit and maintain the IT workforce within libraries. Some commented the challenge of recruting people from the IT industry, which often pays more than libraries do. Some mentioned how to quickly acclimate those new to libraries to the library culture and technology. Others discussed the difficulty of retaining IT professionals in libraries since libraries tend to promote only librarians with MLS degrees and tend to exclude non-librarians from the important decision-making process. Other culture differences between IT and libraries were also discussed.

These are all valid concerns and relevant discussion topics. But I was amazed by the fact that almost all assumed that the library IT people would come from the IT sector and outside from libraries. Some even remarked that they prefered to hire from the IT industry outside libraries when they fill a position. This discussion was not limited to programmers but inclusive of all IT professionals. Still, I think perhaps there is something wrong if libraries only plan to steal IT people from the outside without making any attempt to invest in growing some of those technology people inside themselves. IT professionals who come from the general IT industry may be great coders but they do not know about libraries. This is exactly the same kind of cause for inflexible library systems created by programmers who do not know enough about the library’s businesses and workflows.

So why don’t libraries work to change that?

One of the topics frequently discussed in librareis these days is open source software. At the recent 2011 Code4Lib conference, there was a breakout session about what kind of help would allow libraries to more actively adopt open source software adn systems. Those who have experience in working with open source software at the session unanimously agreed that adopting open-source is not cheap. There is a misconception that by adopting open source software, libraries will save money. But if so, at least that would not be the case in any short tem. Open-source requires growing knowledgeable technology staff in-house who would understand the software fully and able to take advantage of its flexibility to benefit the organization’s goals. It is not something you can buy cheap off the shelf and make it work by turning a key. While adopting open-source will provide freedom to libraries to experiment and improve their services and thereby empower lirbaries, those benefits will not come for free without investment.

Some may ask why not simply hire services from a third-party company that will support the open-source software or system that a library will adopt. But without the capability of understanding the source and of making changes as needed, how would libraries harness the real power of open-source unless the goal is just a friendier vendor-library relationship?

In his closing talk at the 2011 Code4Lib conference, Eric Hellman pointed out the fact that many library programmers are self-taught and often ‘fractional’ coders in the sense that they can afford to spend only a fraction of their time on coding. The fact that most library coders are fractional coders is all the more reason for having more coders in libraries, so that more time can be spent collectively on coding for libraries. Although enthusiastic, many novice coders are often lost about how certain programming languages or software tools are or can be applied to current library services and systems and need guidance about which coding skills are most relevant and can be used to produce immediately useful results in the library context. Many novice coders at librareis who often teach themselves programming skills by attending (community) college courses at night at their own expenses and scouring the web for resources and tutorials after work can certainly benefit from some support from their libraries.

Are you a novice or experienced coder working at libraries? Were/are you encouraged to further develop your skills? If a novice, what kind of support would you like to see from your libraries? If experienced, how did you get there? I am all ears. Please share your thoughts.

——————————

N.B. If you are a formally trained CS/E person, you may want to know that I am using the term ‘coding’ loosely in the library context, not in the context of software industry.  Please see this really helpful post “after @bohyunkim: talking across boundaries and the meaning of ‘coder’” by Andromeda Yelton which clarifies this. Will K’s two comments below also address the usage of this term in its intended sense much better than I did.  I tried to clarify a bit more what I meant below in my comments but feel free to comment/suggest a better term if you find this still problematic.  Thanks for sharing your thoughts! (2/22/2011)


Get Adobe Flash player