Designing Login Boxes: 6 Examples Of Good And Bad Design

Posted on March 27, 2008 by Alexis Brion

A login box should be simple, easy to use and should make users’ life easier. It’s not that simple to achieve that, believe me. Not only the login box functionality and design are important but also the environment: avoid distractions and those users will log in.

Here I collected a few examples of design and behavior.

The login design to the WordPress blog administration (not the WordPress.com website) is just perfect. The page is in white and only what the user needs at that moment is displayed: the login box. There is no way to confuse users. An expression of simplicity.

Wordpress Login Box Design Example

The WordPress login in detail:

Wordpress Login Design

Lets see what happens with some of the Google services.

If a user has a Google Mail account is going to be very probable that she is going to be logged in most of the time. If she wants to login into Google Analytics she will be required the password anyways. This is done, probably, because many users have an account for Google Mail and another one for Google Analytics. This works fine here, although I would add a "keep me logged in" for those users using the same account for both services.

Google Analytics Login Design

Google AdWords login works in a different way. When a user is already logged in at Google Mail and he goes to adwords.google.com, he will be automatically logged in with that account (if he is also registered at AdWords with it.) This is just great except for the fact that many users would not use the same account for those services.

The problem is even bigger if the user is not register at Adwords at all with the Google Mail account. In this case he is redirected to a page to create a new account but no login box is displayed.

Google AdWords Login Page Design

The user is somehow trapped, he is redirected to a page without login box and going back to the previous page is not possible. The only solution is to go to Google Mail, logout and try again at AdWords. This kind of behavior is well intended but if it is not design properly it could confuse users.

Google AdWords Login Design

Why do I like the FotoFlexer login?

Well, it has some nice details to improve usability:

1. Login happens through the user’s email address. Many users might set the account at FotoFlex with the same password they use for the email account. But many would not do that, to make clear that they are not requiring the email account password they ask for the "FotoFlex Password". I’m sure this avoids a lot of confusion.

2. Huge login button.

3. Huge "Register Here" button.

Problem:

"Forgot Password" and "Change Password" should look like links (underlined and blue).

FotoFlexer Login Design

Auctomatic.com developed a minimalistic login box. As the user clicks on "Login" the login box appears above the menu. In my opinion this does not look very good but that’s only personal taste. The problem it might appear is the "Forgot?" link. This website could be used by a lot of secretaries with only a little experience using the web. Using just "Forgot?" could confuse users…

Auctomatic

Maybe using a less minimalistic "Forgot Password?" could be a less confusing option.

Auctomatic Login Design

The Dash.net login box looks nice but it could have a problem. When the user clicks on the input box to write in the username or password the title of the input box disappears. This could be trouble for some users, of course they will find the way to login but it is nicer when a user-friendly design avoids mistakes and saves users’ time.

Dash.net login box example

Dash.net Login Box Exmaple 2

I don’t want to criticize this websites, they are mostly nice ones. I’ve just used them as examples (of good and bad design). Please keep in mind that design mistakes could be the result of the lack of time and money.

Google Analytics Benchmarking: Information Party

Posted on March 22, 2008 by Alexis Brion

Finally Google Analytics Benchmarking was activated on my account. Some days ago I got an email about it but the feature was not immediatly activated. I was not sure what that could be… now I’m a little bit impress.

I like Analytics Benchmarking. Basically, it compares the performance of the tracked website with other similar sites. In order to compare information it requires the user to allow Google to "anonimouslly" analyze the information. Now I understand why this feature was not available at the beginning, they had to ask the people to share the data first.

I take this opportunity to write about the Google Analytics interface:

This graphic shows the average time on site for a website compared to average data from other similar ones. In my opinion graphics at Google Analytics are very clear, with the important information in a prominent typography.

Time on Site Graph

When the user hover over an specif part of the data line additional information is displayed on a floating window. This is an excellent approach, the behavior is what a normal user could expect and pop-ups are avoided.

New Visits Graph

Google Analytics is great but the only thing I don’t like about this new feature, Analytics Benchmarking, is that too many graphics are placed together. At one point I didn’t know which numbers belong to which graphic. To improve usability, a solution could be to place graphics and information in boxes or divide them with a simple line. (This is just an extract, the size of the browser window.)

Several Graphs

Do you like the Google Analytics interface?

Simplicity On The Web: Designing To Hide Features

Posted on March 19, 2008 by Alexis Brion

Making websites easy to use is something desired and appreciated by users. No wonder why. Computers are becoming more and more powerful but humans not. Accepted or not, human processing power has not been growing as fast as technology -we suppose we improved, at least a little bit, right? right??- For this reason, as designers we should try to keep websites as simple as possible.

Many companies have build successful empires thanks to simplicity of their products: Microsoft in the 90′s, Apple and Google in this decade. Making simple products is a totally viable business model, you don’t have to add more features to improve the value of a product.

Sometimes we have the problem that a feature is not really necessary for all our targeted users but it has to be there for some of them. One of the rules to make websites simple or to make websites look simple is to hide features.

Hiding features is a trick used by many successful companies. Here I show you some example tricks:

Can you see the "customize" link on the embed link? YouTube hides some extra features (and complexity) in this link.

YouTube Design Example A

YouTube Design Example B

AOL is also hiding some extra information and features under those buttons.

AOL Design Example A

AOL Design Example B

Basecamp is simplifying the search results making the search by default for only one project. In this example, Basecamp is not "graphically" hiding a feature, it’s simplifying through functionality.

Ebay is hidding a huge category list under one single button (Categories).

Ebay Usability Example A

Ebay Usability Example B

Facebook simplifies the homepage a great deal hiding some of the applications under the "More" link.

Google is really good at this. Under the "more" link they hide many product offers (Upper left corner). "Advanced Search" and "Preferences" are hiding a lot of complexity and options for the Google search.