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:
Size of the font and spacing changed for better focus on the link.
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”
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.
Note: I’m more than sure it depends on the OS/BROWSER/GOOGLE SERVICE etc.
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.
Advantages:
- very familiar to users
- easy to use
- the height of the tabs area can be unlimited
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:
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:
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
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
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.
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:
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.
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.
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.
- 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.
- 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:
- 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:
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.
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).
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.
I was reading an article on Useful Usability and opened all 15 links to save the PDF files on my computer. I don’t have the time to read them now but i hope to find some in the near future. (It’s basically like writing things on a CD, you’ll never insert that in the optical unit ever again ).
Anyway, I saved almost all of them in a directory on my computer. Looking at them later I realized many of them have names which don’t say anything about the content of the file, one of them is named “johnny.pdf”. The title of that particular article/study is “Why Johnny Can’t Encrypt: A Usability Evaluation of PGP 5.0″. While “johnny” is part of the title, left alone it doesn’t say anything about the usability evaluation in the file.
When dealing with files on the web, name them according to the content. You don’t know where they may end up, you want exposure after all, help that exposure with a content descriptive name.
Another important reason: SEO. It’s one thing when Google Bot crawls a picture of a blue book named “blue_book.jpg”, and another when it crawls “ds7d6s9ad99s9s76d6s.jpg”. Your picture will end up higher on the Google Images Index and generate you more traffic.
The main reason though, has to be the user. To a human being “ds7d6s9ad99s9s76d6s” doesn’t say anything about the content, “blue_book” does.
Developer note: For huge applications dealing with many files it’s quite hard to avoid duplicates (that’s why developers use hash strings like “ds7d6s9ad99s9s76d6s”), take flickr.com for example, all their image names look like that. For the rest of the applications developers can use some kind of hybrid naming like “blue_book_7d7s8767.jpg”. It’s much better than to use only the hash string.
You’ll be amazed how many of the users have only one password. It’s a bad thing but that’s how it is. 
