Good content is sometimes not enough, the users must reach it so they can see it's good!

Use search buttons

Posted: October 19th, 2009 | Author: | Filed under: Good practices, Patterns, Usability fail | Tags: , , | 6 Comments »

A basic usability test (very cheap also) is logging remote on another person’s computer and watching him/her use the app/website/tool. It’s eye opening.

So I have seen my mother (who is not a computer savy person) hovering the page in search of buttons. When she searches things she doesn’t use the keyboard, she presses the “Search” button, and when that’s not available she gets confused. If the search field has an arrow image background on the right side, she tries to click that arrow and gets puzzled when nothing happens.

use_search_buttons

So, please use search buttons.

Oh, and please don’t name them “Go” or “>>” or stuff like that, name them “search”, and even put a magnifying glass on them.


Form labels

Posted: October 19th, 2009 | Author: | Filed under: Patterns, Usability fail | Tags: , , | 8 Comments »

DON’T put your form labels inside the inputs.

labels

If i start writing into the input and i forget if i had to insert the username or the email address i have to delete everything, pray to god that the programmer made so the label appears again in the field once I click away, and after that complete the field again. It’s not nice.


Google Account login over the years

Posted: October 7th, 2009 | Author: | Filed under: Good practices, Patterns | Tags: , , , | No Comments »

A login account sounds simple but it’s not. I’ve been watching Google Account login form for a while and saw the changes they made over time. A login form has to accomplish several things:

- get the registered clients into the system fast
- make unregistered users to register
- convert a visitor into a user
- provide a way to recover an account

In time, the priority of those things changes, ie: at the beginning of a startup you want more new users, the register process must be the first thing a visitor sees in the page, after a while and a solid client base you want those clients to login fast and without issues.

Let’s see some of Google’s login forms now:

google-account-login

Size of the font and spacing changed for better focus on the link.

google-docs-login

Here come the blue buttons.  Call to action all the way. Unfortunately, I personally had problems logging in, I pressed the “new account” button instead of “login” multiple times.  Wasn’t very happy with those. The naming on the button changed a lot, “get started”, “pick a name” or simply “new account”

gmail-login-signup

Login_Full

The next one is the one i can see today on my browser, it really doesn’t have a actual call-to-action button, just a size priority. It’s better.

2009-10-07_1713

Note: I’m more than sure it depends on the OS/BROWSER/GOOGLE SERVICE etc.


Information and Architecture

Posted: June 15th, 2009 | Author: | Filed under: Good practices | Tags: , , | 1 Comment »

Two short films by MAYA Design about information and architecture.

Information

Architecture


Collapsible panels vs. Tabs

Posted: May 18th, 2009 | Author: | Filed under: Patterns, VS | Tags: , , | No Comments »

Both of these patterns are used for the same thing: squeezing a lot of content into a limited area of a (web) page. Although they can save a lot of space, the content you insert using them is limited to an amount by the size of the area you’re filling. Which is better? The one which suits your needs, let’s take them one by one:

TABS:

Tabs are one of the patterns known by about everyone. Designed well, they don’t make any problems to the user. The first use of tabs (I think) was the paper folders filing systems used in cabinets.

yui_tabs

Advantages:
- very familiar to users
- easy to use
- the height of the tabs area can be unlimited

yahoo_home

Disadvantages:
- tabs don’t work with long tab names
- they don’t do well in tight spaces either
- 2 tab bars is not an option so you are limited to a relatively small number of tabs

COLLAPSIBLE PANELS:

collapsible_dojo

A little tricky to use for beginner users, but still quite intuitive and sort of familiar (used in desktop applications and operating systems). Make sure they have a “collapsible hint” like “+/-” or a down arrow like this:

vista_collapse

Advantages:
- work well long names (as long as the width of the area)
- you can open two at the same time (if they are build that way and you afford the space)
- work well in tight spaces

adobe_collapse

Disadvantages:
- height consuming
- less obvious than tabs
- they look silly if used on full width
- it’s easier to mess their design and get a usability fail


Password requirements

Posted: May 14th, 2009 | Author: | Filed under: Good practices, Usability fail | Tags: , , , | 3 Comments »

Let’s face it! People use the same passwords on every site where they need an account. More exactly their email and computer login password :) You’ll be amazed how many of the users have only one password. It’s a bad thing but that’s how it is.

A while ago a friend of mine wrote on his blog about sites which demand a certain number of chars, demand to use both numbers and letters and even one of the weird signs on the number keys. Putting a maximum limit on the number of chars is plain stupid.

Please! don’t make users come up with a different password than they already use. Chances are they already use a password with more than 6 chars (due to restrictions allover the place). If you make the user invent a password with #$%^, he’s going to forget it. Then, he would have to recover/reset it – things that generates errors and frustration.

So PLEASE LEAVE PASSWORDS ALONEEE!!!111


Quick mockups

Posted: May 13th, 2009 | Author: | Filed under: Tips and tricks, Tools | Tags: , , , , , | 1 Comment »

I’m happy to show you a project that won the DevWorld Award the other day. The project is an Interactive Wireframes and Software Prototypes app. The soft is pretty neat, it’s a very good tool for wireframing and UI mockup. Here’s what i’ve done in 2 minutes:

flairbuilder

You can find it at http://www.flairbuilder.com/, give it a spin. You’ll like it.


Eyetracking & ux simple test

Posted: May 11th, 2009 | Author: | Filed under: Tips and tricks | Tags: , , | 1 Comment »

Here’s a trick to review your site’s focus areas, call to action buttons, spotlights and so on:

- Make a screenshot of your website/homepage/page, shrink it to the size of a thumbnail and see what it’s still visible.

Does your yellow button catches enough attention? Can you see the login form? Can you spot the logo in an instance?

If you know the layout by hart you probably will find all those things, so here’s the second step:

- Give the thumbnail to someone else, ask the person to tell you what he/she sees.


Links vs. buttons

Posted: April 26th, 2009 | Author: | Filed under: Good practices, VS | Tags: , , , | 3 Comments »

When dealing with webpages, some usability experts say we should use links when the user is gonna get on a different page and buttons when the user makes an action.

Link to another page »   vs.  

I don’t really care. I don’t care because users don’t care.

Let’s get things a little further, what’s a button? Does it have to have borders? Different color?

Is a icon followed by a link really a link or a button? I see those things like buttons, others see it like “fancy links” or “descriptive links” or “visual links”.

One thing i agree with, though: forms should have “hard to miss” primary action button, you cannot put a link there mainly because it will not be a “primary action”, there are other links on a page so the weight of a “submit link” won’t be so different.


Perfection

Posted: April 17th, 2009 | Author: | Filed under: Good practices | Tags: | No Comments »

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Antoine de Saint Exupéry