Since I created this blog exactly for the purpose of educating other designers about what’s good and what’s bad when it comes to user experience and interfaces, I decided to start a series of articles that will touch commonly made mistakes by many young ui designers.
For this webisode I decided to talk a bit about readability or legibility.
Below (Fig 1a) you will see an image which from graphical point of view (at least to me) looks great ! Nice and soft shadows, the right amount of color to non-color. Anyway, you get the idea.
From the user experience point of view though, it is absolutley dismal. It sucks bigtime. While the text describing the username has enough contrast to be legible adequately, the field below doesn’t, and that’s bad ! Say i was a user and I am working on my phone in sunny weather conditions. That means that if I have a fairly decent android phone or tablet device, which has light and proximity sensors, it will lighten the screen just a tad, so I can distinguish some writing on the screen. In that case I will be looking at this form and trying to bash my head against the wall because I would not be able to know what that field is for. Should I put in my username ? Should I put in my password ? The text is just too faded. For it to work properly, it should have more contrast. Not so much as to make the user confuse between inactive help text and actual user text, but significantly more than it is now.
Hah, but some of you will come and say:”We don’t need that much contrast ! Its a field that everyone knows intuitively ! Why bother going the extra mile and re-confirm this to the user ?”
It’s quite simple really. A interface has to work equally well for people that work with that program often, as well as for first time users. And as of late, people of varied ages use all sorts of programs ! Which means you have to be VERY careful and take older people into consideration as well. They too go into your demographic and mean something when designing the ui, and for them it is crucial that a field is “reconfirmed” visually. For them having the field say “Password” as a idle text is better than having an empty field. Same goes for the user !
In the example above (Fig 1b) you can see that we already have better contrast ! I can easily distinguish between field and background, and the idle field text has increased in legibility. This is far better than in case of the image in Fig 1a. The text acting as a username has also improved because it has a bigger size now and is easier to see. All in all the image below is far better than the first from user experience point of view. Also, the second one, is a very good compromise between graphics and usability.
I hope this article was useful to you and helped you understand why sometimes its required to sacrifice graphics in order to achieve good usability for your program. In the end this is what makes or breaks a program. How often and successfully it is used.
Today’s lesson was: Contrast. Whenever you are dealing with a hard choiche, remember to put contrast at the top of your list ! Everything comes after that !
Fig 1a courtesy of paco http://dribbble.com/shots/730943-Login
Fig 1b courtesy of ididi http://dribbble.com/shots/731668-Login-Style
Have a good one, and don’t forget to rate if you liked or found the article helpful ! 🙂