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

Drag & Drop on the web

Posted: January 13th, 2010 | Author: | Filed under: Patterns, Usability fail | Tags: , , , , | 3 Comments »

For God’s sake, if you use it, please offer an alternative.

This the “add to playlist” Grooveshark system:

grooveshark_drag

Very neat, clean. Unfortunately, if you don’t already know that’s how you do it, you have absolutely no hint to help you guess how you add a damn song to a damn playlist:

grooveshark_hint

Yeah, i asked a fiend who found out from another friend of his. That’s not usability, Grooveshark.


Amazing lookup feature on NYTimes Blogs

Posted: November 2nd, 2009 | Author: | Filed under: Good practices, Patterns | Tags: , , | 1 Comment »

I was reading One Hundred Things Restaurant Staffers Should Never Do on a NY Times blog and i had no idea what the heck “amuse-bouche” is. I selected the word so I can copy and google it.

The instance I selected the text a question mark appeared. Yeah, I don’t know what’s that. I click on the question mark and it opens a popup with a dictionary lookup on the word.

lookup_word

OH, how natural this was!!!

PS: Turns out the “amuse-bouche” is some kind of appetizer.


So wrong on so many levels

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

I have update the “All in one seo pack” for wordpress and it insisted that i update the configuration page. I went and checked the page an this is what i have found:

seopack

It amazes me how awful is this form made, I think it’s deliberately made so you fuck up. Let’s see why:

1. the “Reset” option in on the right. (I’m not saying the submit must be on the right, but it’s the most common that way)
2. the “Reset” button is bigger and has the same design as the “Update” button. That and 1. makes it most likely to be pressed first
3. both buttons have the same design, hence they are equally important? i don’t think so, the call to action button must be the “update” button. Keep in mind that “Reset” is a destructive action.
4. what’s with the “>>” ? the arrows on the first button point to the second, which kindda’ makes the second the call to action, but the arrows on the second? there’s no extra step, there’s only a form.


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.


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


Edit in place

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

Since the AJAX and web 2.0 madness a new edit option appeared on the web (used for many years in desktop software though): “edit in place” or “inline editing”. It’s basically used to edit a thing and one thing only, a “one field form” if you like.

It’s not for computer naive users and it’s better to avoid it for simple applications if it’s not really obvious how to use it.

There are two distinct parts of this action: triggering the apparition of the field and the submitting of the action.

Triggering the field can be done in a few ways:
holding the mouse cursor on the text to be edited (the same as the desktop way) – simple but not obvious, you can’t know about this feature without reading the help or a proper training. (For example see the IPB (invision power board)). I don’t recommend this method for the web, it’s not intuitive enough.

ipb

clicking the text – hovering the text, the background of the text becomes yellow – a convention that nowadays seems to mean “click me, something will happen”. Used by Yahoo, Google, WordPress etc it’s a convention that is becoming a standard. Though it’s better than the previous one, it can be done better.

flickr

right click on element shows a menu with edit/rename option. Again, the user is not used to right click on things on the web, maybe on pictures to download them but that’s about it. Cool but not usable enough. See the Google Docs example:

g_docs

just showing an edit button is the best solution i ever saw, straight forward. If the aesthetics don’t allow that, show the edit button/link only when hovering, but keep the yellow background on the text all the time. WordPress admin does a good job with the post slug editing:

wp1

The field must appear in the same place the text is before triggering the edit. Jenifer Tidwell says in her book “Designing Interfaces” that the field must be set only as a border on the text to be edited, the position/font/color of the text should not be changed. Although it’s a very good point, it’s hardly possible to achieve this technically when working with dynamic text and user generated content.

g_docs2

Some people choose to select all the text inside (like in windows explorer) to make the text replacing faster, but it’s very easy to delete the text and many users won’t know how to recover from this (it’s important that on click outside the field the action is canceled and the initial text restored).

wp2

Submitting the form is easy, either you insert a “save” button, or let the user hit “enter” (IPB for example). I prefer and recommend the first one, but make sure it works with “enter” too. A very good idea is to provide a “Cancel” button, it gives the user self confidence.

UPDATE: a few examples on quince.


Overview on login forms

Posted: March 24th, 2009 | Author: | Filed under: Good practices, Patterns | Tags: , , , , | 5 Comments »

We discussed the other day about the login with email vs. username and I came to the conclusion that it depends on the type of the application, if it’s social, you’ll want username, if not, it’s better to only ask for the email.

Today we’ll take a look at login forms as a whole. We’ll see the good practices, the “dos” and “donts” with examples from a few major sites on the internet. I’m not saying there’s a right formula for all the sites but there are some things that need to be on every one of those login forms.

So, let’s cut the crap and get this going (because some of you only look at pictures and read bold text, and i know that).

Examples:

amazon

Amazon.com get’s it simple. Two fields, a button and a “forgot password” link. That is all there is mandatory on a login form and that is what the guys at amazon put there, no more, no less. Authentication is made by email and password.

cnet

The next example is from cnet.com. They have a few more options: a register/join link (if you don’t have an account), a remember me checkbox and a feature i started to see on many websites, connect with facebook. I didn’t try but i guess you can use your facebook account which is great.

digg

Digg adopts a different way to show the form, a modal window. I personally hate modals, i think they require useless clicks. They have also a “create new account” as an alternative and offer a recover username option. Looks nice and clean.

ebay1

Ebay.com has 4 links in the login form, a bit too much if you ask me. They also have a “keep me signed in for today” option and some advices to avoid others entering your account or phishing attacks. They have a history there, it’s normal.

elance

Elance.com adds a radio button option because there are 2 types of accounts, there is one checked by default so it’s quite ok. There is a locked icon with no title on the link so a user does not know what it does until it clicks. Does it lock your account?

facebook

Facebook login is also simple: remember me, forgot password and login. I think they could do better than a blue button on a blue background.

google

Google accounts it’s also quite simple, they have a “remember me on this computer” checkbox, a “create account” alternative and a rather unusual link for password recovery named “i cannot access my account“. I think the title is quite natural.

imdb

IMDB has the ugliest login form i have ever seen, no CSS whatsoever, but, it gets the job done, i think. IMDB also lets you login with either username or email. Interesting, they let the user choose, or they switched a while back from username to email and that’s how they support the old accounts.

live

Live.com (msn, hotmail etc) has some rather confusing login: they ask for a “live ID” and give an email as a example (if it weren’t for the example the users were doomed) and two “remember me” options: one for this computer and one for the password. This cant be good for a naive user. They also have a link for “using advanced security” whatever that is.

myspace

Myspace has a really nice idea for offering an alternative to login, they made two tabs with login and signup, the login is the default (used more). I like it. Also like the contrast of the login button, well done.

newegg

Newegg is hustling as little the customers, it offers a “subscribe” checkbox on login, that can be frustrating when you log in often. They also offer the option to create a new account and they describe a little the benefits of doing that. I dont like the fact the buttons have the same weight. Which is more important, the login or the signin? :)

nytimes1

NYTimes.com moves the focus on new members (see the background, position, colors), i guess we know who’s more important for them. I don’t say it’s wrong, growing the userbase is the most important thing for a content website, so they act like it.

twitter

Twitter has a pretty weird login if you ask me, it has a confusing name (“sign in”) which sounds a lot like “sign up” and it has a big red “watch a video” button. C’mooon, if I have a twitter account I kind of know what it does, don’t I?

wordpress

WordPress has a nice simple form, and they have a tooltip with “This is a secure form” on the damn icon. Nicely done. They don’t offer a register alternative in the form but there’s no need, there’s a HUGE blue “sign up” button on the page.

wsj

Wallstreet Journal has a sliding form when you click login, nice and very space saving… buuut…. when you click login and the form slides down, it disables the register link, so you’ll have to wait until it slides back up or you click login again to toggle the form.

yahoo

Yahoo dealt with so much problems in the past (account stealing, phishing etc) that they made up a “seal” system to protect you, you upload a picture which will be saved and will set a cookie on your browser so when you come back to login you’ll see the picture and know it’s not a phishing site. I dont know how many people actually use this, I don’t.

Conclusions:

– keep it simple, the more options you add, the more confused your users will be
– I strongly suggest you keep a login form on every page of your website, if the site requires users to login often. One click away forms are … one click away.
– the button must be a button, a “call to action”, use colors, contrast, spacing
– make sure the form can be used from the keyboard and submitted with Enter
– password recovery option is mandatory
– offer a register alternative for users who don’t have accounts
– make it visible, look at the ebay page below, it took me a while to find the link with all teh red things there. I’m not saying the user will leave without finding it, but it grows in frustration, and there is a limit for that.

ebay_homepage


Product filters

Posted: March 16th, 2009 | Author: | Filed under: Good practices, Patterns | Tags: , , , , | 2 Comments »

I was talking the other day about pagination and David Hamill had a point there, those tiny numbers don’t send any message to the user, so what’s the alternative?

Well, a nice solution is the one used in Google Reader, when you scroll down to see the last feeds, if there are more, Google loads a few more and so on. Although this is a very nice idea, it’s not without disadvantages:

– you might not scroll all the way down and the feeds will not load
– it requires AJAX and that is not really SEO friendly, you want your products to be indexed by search engines
– it doesn’t work on browsers without javascript capabilities or with js disabled.

The most common alternative remains product filters. Just about everyone understands them and they are really easy to use. As I found some nice ones on getelastic and I knew a few other, I decided to show you the visual side of filters.

likecom likecom2

The first one is from like.com (one very very nice site btw) and it shows a shoe filter by style, you can see the visual icons on the left, not everyone knows all the names of the shoe styles, so that’s really helpful. The next one near it is from like.com also (you can see the resemblance) and it’s the most easier to make visual filter: showing the actual color near the color name. For the human brain it’s much faster to see colors than to read words (if you paid attention in science, color is a wavelength variation of light and we distinguish light very fast).

actionenvelope

I saw the next one on getelastic too, I really liked it and it’s found on actionenvelope.com. It shows an envelope filter by type/shape. Again, visual clues make the choosing much more effective.

ebay

This one is my personal favorite, it’s from Ebay and it shows a little car illustration for every type of car, because some people don’t know what’s a “hatchback” or a “coupe”, i’m guessing. Although I like this very much, I see a flaw, you can’t choose two of them if, let’s say, you want a sedan but you have nothing against hatchbacks too.

eastbay

The next one is a color filter with a twist: size. It’s from eastbay and it works like this: you find a shoe, hover the color variations and see below the available sizes highlighted. Pretty neat.

preciousglow

Here’s another one, from preciousglow.com, it’s a filter of diamonds by size, if you don’t know how marquise diamonds look like.

sonyericsson

The last one from this list is another shape/style filter from sony-ericsson, for the users more phone-naive, if i can call them like that.