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

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.


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.


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


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


Login with email vs. username

Posted: March 7th, 2009 | Author: | Filed under: Good practices | Tags: , , , | 13 Comments »

Today we’ll discuss why is much better to ask the user to login with email/password instead of username/password. I’ll be short and punctual, i don’t like long blabbing articles the essence of which can be written in a line, so:

  1. The email address can’t be already registered (obviously), and if it is, you registered it and you can request a new password
  2. As a consequence of the above, the user can’t forget his email. You may be having what, 2-3 email addresses? You can’t forget them
  3. One less field on the register form. Everybody hates long forms
  4. You make the users use a real name, instead of s_87757 or pinkygirl1995 or other crap like that

If you think of something else, drop a line and i’ll add reasons.