Andrew L. Van Slaars

I’ve been visiting the Yahoo! Design Patterns Library periodically for the past couple of years, but somehow I only now managed to stumble upon UI-Patterns.com. It’s always good to have another resource to help create better user experiences, so I’m glad I found it. The site is very well organized and cleanly designed, making it enjoyable to use (just as you would expect from a site that focuses on UI/UX). If you do any work that involves a UI, you should check out this site.

Tools, Usability Resources, Tools, UI, Usability, UX

This is a “what not to do” type of lesson… I signed up for a twitter account a while back. I don’t use it much but I wanted to see how well it worked from my iPhone. As I was clicking pointing around, I was apparently looking at my list of entries and I clicked on the “follow” link. I received this message: “You can’t follow yourself!”, outlined in red. Not being able to follow yourself makes sense, so why did I have the option?

The red box and the exclamation point made it seem like the app was yelling at me for doing something wrong. Being a developer, I get it. I know what I did made no sense and I don’t take offense, but take another user and do that and they will feel as if they did something wrong. This is like putting a piece of steak on the floor and yelling at your dog when they try to eat it. Links are meant to be clicked, that’s what you do on the web.

On a similar note, a co-worker sent an email out the other day pointing out a button on one of our internal apps followed by a very verbose message explaining that the button should only be clicked once or the form would be submitted twice. There are a few problems with this. The first issue is that users on the web don’t read, they skim over content and if they are filling out a form, the button is the end. Why read after that? The second issue is that it would have taken nearly the same number of key strokes to write the javascript to disable the button on the first click as it did to write the warning that never gets read. I’ve worked with some people in the past that insisted on double-clicking hyperlinks, so issue number three is the number of duplicate submissions that have/will undoubtedly result from this design.

Why set your users up for failure? If a link performs a function that is not valid in a given situation, remove the temptation. Disable the link or remove it completely unless it is a valid option. If you want a user to click once, don’t let them click twice.

If a desired end-user behavior can be enforced in an application, it should be. This will provide a better user experience since your application won’t have to tell the user that they have done something wrong and you may avoid some unintended application behavior in the process.

Usability UI, Usability, user experience

There are quite a few sites (mainly blogs) out there that will highlight keywords for you if you landed on the site from a search. This “feature” drives me nuts. I find that black text on a white background with bright yellow background applied to every 10th word is difficult to read. There was a time where the technology behind this seemed really cool, and I may have had it enabled for my blog in the past, but I’m over it now.

I appreciate the thinking behind it and I’m sure those that use it have good intentions, but maybe the highlight color could be a little more subtle. Maybe it’s just me, but I don’t need any additional distractions when I’m trying to find an answer to my problem or research a new technology.

Do your readers a favor, if you have the highlighting thing happening on your site, consider turning it off or at least dim the lights and use a lighter shade of yellow.

Thoughts, Usability blogs, highlighting, search term, Usability

I log into Gmail and I can go to Google Reader without logging in again. It also works the other way around. The same behavior applies to Google Docs and Google Calendar. This makes sense, same service provider, same login credentials, same browser session.

Now, when I go to Google Analytics, it knows who I am, but I have to enter my password again… ok, maybe they are trying to make analytics more secure? Doesn’t make much sense to me, but ok.

Now if I go to AdSense (you know, to count my millions) it doesn’t even recognize me… you would think a company that can store, index and search ALL of the information, anywhere, would be able to create a consistent user experience across their applications.

It’s not a major issue, but it lacks the level of usability and consistency I would expect from the all-mighty Google.

Tools, Usability adsense, gmail, google, Tools, Usability

Users don’t follow directions. At least when I’m a user, I don’t.

If you have a text field on your website or in your application and there is a limit to the number of characters it can except, don’t just tell me about it, make sure that’s how it works!

I just filled out a form with a text field that was followed by the text “(max. 20 characters)”. How many characters does it let me enter? As many as I want! Adding the MAXLENGTH attribute to your input tag, maybe a little JavaScript to let me know when I’ve exceeded the limit. Maybe, just maybe, you could validate your form to make sure I haven’t messed the input up.

This particular form simply and without warning let me submit the text and cut it off at 20 characters. I happened to have entered 22 characters and now my output makes me look like I can’t speak English.

Creating a quality user experience requires a little work on your part to make sure the end user can be successful using your application, even when they don’t follow instructions.

Product Design, Usability design, Usability

Building software is challenging. Building usable software is hard work!

One thing that helps make your software more usable is making your user interface fit users’ mental models of how they should interact with your software.

Yahoo! is more than just search. They maintain several web applications and strive to keep their user interactions as consistent as possible(where appropriate). This consistency aids in usability as users come to expect specific types of UI layout and interaction.

In order to maintain this consistency, Yahoo! maintains a library of UI/UX design patterns. Some of them are exposed to the public. The act of sharing these design patterns is a win-win. Developers creating web applications get some help deciding how to handle specific user interactions. Yahoo! gets to spread their techniques across the web, contributing to a positive feedback loop of consistency, centered on their user interaction approach.

There are some items in the pattern library that I had never thought of. There were some things that seemed like common sense… that’s the point. Even if you don’t agree with the techniques used by Yahoo!, it’s always good to get somebody else’s take on a subject.

If you are involved in the design, development, maintenance, testing, marketing, etc. of an application, you should check out the Yahoo! Design Pattern Library.

The only thing I feel is lacking is a PDF version of each pattern for viewing outside of the browser. That’s pretty minor though.

Product Design, Tools, Usability design patterns, Usability, yahoo

I link to a lot of sites from this blog and most of the time it is because I agree with something on the other end of the link. I am usually praising a product or idea or just pointing to an accurate reference.

The ability to link to other information is great, that’s what the web is all about. If I could make it more obvious that these were positive endorsements, I think it would add value to my posts. In the event that I disagree with something, linking to it and making my intentions apparent there would be a benefit to those reading my blog.

Enter VoteLinks. The VoteLinks microformat allows you to markup your links with one of three voting values:

1. vote-for
2. vote-abstain
3. vote-against

These values are specified in the anchor tag as a value for the rev attribute. So a link to Wordpress, with a positive vote (of course) would look like this:

<a rev="vote-for" href="http://wordpress.org/"
   title="Wordpress - Blog Tool and Weblog Platform">Wordpress</a>

Once all of this code is in place, a little bit of CSS and/or JavaScript allows you to use these values to alter the appearance and/or behavior of these links. As VoteLinks are more widely adopted, search engines could use votes to calculate link relevance and with enough information compiled, tracking positive vs. negative traffic in site analytics could be come a valuable marketing tool.

I’m sure the future uses are abundant, pending wide spread acceptance. I will be applying VoteLinks and other microformats here and in my other work from this point forward (where relevant).

If you are not employing microformats yet, or haven’t really looked into them, you get a great deal of information on microformats.org.

Usability, Web Standards html, microformats, semantics, user experience, Web Standards

I have quite a few reference books that I flip through from time to time, but very few that I read from beginning to end. I started reading Designing the Obvious yesterday and finished today. I read every page and I couldn’t stop reading. The book was very well written and the tone made it easy to read completely without the normal “ok, get to the point” feeling that I get from highly technical books.

Every line either made a point or contributed to one, there was no fluff, just useful information. Given that one major point made in the book had to do with removing unnecessary elements from web applications, it looks like the author took his own advice when writing the book and it paid off.

This book should be on the book shelf of every designer, developer or anyone else who contributes to application development. Understanding the user experience is key to building a successful application and this book will help you do that.

I should also point out that the author, Robert Hoekman Jr., has another book hitting the shelves early in 2008. I will be pre-ordering my copy soon. How about you?

Books, Learning, Usability book, design, Usability