UX – Putting it all to use!

You have seen me blogging endlessly about user experience design, today you get to see some of what that all goes toward!

I’m very excited to share with every one a project I am working on! I am fortunate enough to be a part of an extremely involved web development program at Clark College. Not only is my user experience class taught by Robert Hughes, the director of my program, but many of my other classes are taught by people who are truly working in the industry. I am taught WordPress by Lorelle VanFossen,  who helped develop WordPress itself! I learned all of my coding skills from Bruce Elgort, who owns a software company called Elguji among many other successes (to say the least). The project I am working on now has so much support that we have had the library staff and even the president of Clark College come into class and see what we are up to.

So what are we working on?

Our class is working with the library to rework their search page! A seemingly simple task that much is going into. We are not only changing the look but doing so is correlation with the movement toward  a new way of connecting users with the material they are looking for. What we do will be the face of a the libraries’ next big step to accommodate changing times and technologies. There is an article on Clark’s site covering what we are doing if your interested!

Here is what we are working with…

clark library site (looks rough)

Here is what our group envisions to be best…

our mock up of what the site should look like
*This is of course a mock-up, to be developed much further

Amongst a group of me and three other students ( including Jesse Byars) this is what we came up with. Later this week we will combine several groups efforts to further development. I am excited to share with you what other great ideas the class comes up with!

So why did we do what we did to the site?

The following is a short explanation we formed, giving insight as to why we were motivated to change things the way we did:

We ran across many issues when first looking at the Clark College library site, though functional it could use several improvements. First and foremost it was clear that much was left in the hands of the user as far as memory load. Countless fields and tabs in the search area were both confusing and overwhelming, much simplification was needed. Furthermore there was a lot of “jargon” being used, opposed to semantic labels that could be easily interpreted by any one. We also found that there were many divisions below and around the search that were probably important but only served to clutter the page, these items that were news appeared more like ads and we overlooked them. We were happy to be able find the library hours easily but noted a lack of a help section, which could serve to orient and assist those using the search.

With these issues in mind, we set off to address them and create a much improved page. Our goals were to make the page fit well with the banner, navigation, and header area and have each section of it not only clearly locatable but also intuitive to use. We started it the search area, arguably the most important aspect of the page. We decided that you could find your material using one of two tabs, a search of the catalog or an A-Z index of  databases. Within the search a default label would say, “Everything” reducing the stress on the user and ensuring no memory load issues. Clicking on the drop down would indicate that you could search “Everything” or “Library only” which we find to be self-explanatory and intuitive. Users should not have to get caught up in which medium is being used to get material to them as far as summit or PRIMO which would likely be insignificant terminology too them. The next most important thing we did was create an image slider below the search area. This is to serve as a news area, articles from before such as the, “New password required”, “News paper updates”, “Library news” and so forth. In lining these up we found that the previous “Hours” section could be embraced and beneath it we could fit a “Help” section.

We really capitalized on “affordance” and “visibility” in our design. Our search area being the primary example. We included trigger words and very functional drop downs to filter search methods. We left nothing to the user that would create any ambiguity. The search field jumps right out at the user and needs no explanation as to how it should be used.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s