zastica — one stop shopping for photography, programming, & general life lessons

If you have a site where users are able to have data associated with them, you probably have a login form. You may ask users to enter their email address, or a username for your site, or even an OpenID url. If they enter the correct information, they are granted access to otherwise protected areas of the site. But, if they don’t enter correct information for some reason, they get presented with an error message and have to try again. There are two major hurdles to login form design that I am going to address.

Show their username again

When a user’s login attempt fails, it’s a pretty standard practice to unset their username and password and force them to re-enter them both. This is a bad design pattern. Users should not be forced to remember and reenter their username. Consider this workflow:

• A user comes to your site, and enters their username and password. The username is entered into a regular text input, so it’s plainly visible to the user and anyone standing over their shoulder.
• The user’s information was incorrect, so the page refreshes, they see an error message. The user thinks, “Oh, I must’ve mistyped my password”. However, both the username and password fields are now empty.
• The user tries to login again, however they are momentarily disoriented by having to remember which username they use for this site. Sometimes, users might even have multiple logins for the site, so they have to remember which one they just tried to login with, and even if that username is correct.
• The user enters their username, and the password again, and hopes to get the information correct.

If the site left the username in the field, the user would not have to remember which username they tried to use, and could focus on typing the password correctly. By leaving the username in the form, you can eliminate a point of confusion for the user, and ultimately help users use your site.

Unmasking passwords

In one off his AlertBox columns, Jakob Nielsen takes the radical position that

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures. — Jakob Nielsen, June 23, 2009

Personally, I don’t agree with him 100%, but since he’s the world’s foremost expert in usability there must be something to his claim. Security considerations aside, masking passwords does hurt usability. (Masking passwords means displaying bullets instead of letters and numbers — ‘••••••••’ instead of ‘password’) Why? It’s because it forces your users to think about typing their password correctly, and thinking is bad for usability.

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice — Krug’s second law of usability

I don’t think that password masking is going away anytime soon, nor should it. It is still a security concern if someone can stand behind you and learn your login information. People routinely store all their life’s information in their email inbox, so if their email account was compromised by a nefarious individual… well it would be bad.

Neilsen goes on to say, “users are sometimes truly at risk of having bystanders spy on their passwords, such as when they’re using an Internet cafe. It’s therefore worth offering them a checkbox to have their passwords masked”. This is a Good Idea, and offers a sufficient compromise between security and usability.

So, for optimal login form usability,

• Don’t remove passwords after failed login attempts, and
• Unmask passwords by default, but give the user the option to mask the password, for example when someone is nearby.

Check out my new business card. I got tired of having to write down my email address or phone number on a random scrap of paper, so I went ahead and designed a “business” card for me. It’s not really for my business, since I don’t have one (except for my day job, and I’ve got other cards for that), it’s just a card for me.

Check it out:

It’s pretty simple, with just text, and the celtic knot on the right. On the other hand, it’s unique and the design is pretty striking. (If I do saw so my self.)

You might be wondering what those colored bars on top of my content are. And you’re right to wonder, because it’s kind of strange and out of place. While I was redesigning my site, I ran into a problem — I wanted to be able to add a little visual flare to my site, but I kept running into a dead end. I tried a featured photo thing from my vast collection of photography, but that ended up being too hard to maintain. Eventually, I settled on what you see now - a series of 9 colored bars, but I gave it a twist.

You see, the colors change everyday, and I don’t have to do anything to make it happen. I just defined 4 sets of colors, one for winter, spring, summer, and fall, and then wrote up some code to calculate the gradient between each set, and then I show the color set for any given day based on where today is on the line from season to season.

My base scheme looks like this (HSV values):

$this->schemes = array(
    $this->starts['winter'] => array(
        array(223, 58, 26), array(202, 53, 75), array(209, 11, 98)
    ),
    $this->starts['spring'] => array(
        array(0, 33, 69), array(83, 31, 84), array(187, 64, 66) 
    ),
    $this->starts['summer'] => array(
        array(93, 87, 100), array(349, 95, 100), array(33, 100, 100)
    ), 
    $this->starts['fall'] => array(
        array(0, 80, 85), array(35, 80, 85), array(45, 95, 60)
    )
);

I expand those sets of 3 into sets of nine by rotating the H value 36° to the left and right. Then I convert the values to RGB, and for each set I calculate the median values like this, with a distance of .5 (meaning half the distance between each point). This is done for each of the R, G, and B values.

foreach($from_vars as $i => $value) {
    if($value > $to_vars[$i]) {
        $diff = $value - $to_vars[$i];
        $from_vars[$i] = $to_vars[$i] + ($diff * $distance);
    }
    else {
        $diff = $to_vars[$i] - $value;
        $from_vars[$i] = $value + ($diff * $distance);
    }

    $from_vars[$i] = round($from_vars[$i], 0);
}

Basically, it just averages the two colors and applies those values to the date in between the start and end. It’s actually a lot more complicated than that, but that wouldn’t fit in one post.

Awhile back I did a little design work for a Seattle blues dancing organization called Burn Blue. Burn Blue is a Seattle based dance organization dedicated to teaching and promoting blues dancing.

I created a promotional business card to give to dancers, as well as partnering with about 4 other people to complete the flyer design. The business card was intended to serve as a way to entice someone into learning more (and eventually coming out to dance) about Burn Blue, while the flyer was intended as a fun way of telling people all they needed to know about the event and the space.

The flyer:

The business card:

This card was wildly successful. People love to give and receive them (obviously). The best parts of it are that it creates an emotional reaction in someone (You’re hot), and the follows up with an invitation/imperative (Come dance with me). Currently, Burn Blue draws about 200 people to the weekly (not bi-weekly like the cards say, it was expanded) dance.

I think my favorite part of this whole project was working with so many people to come up with a killer design. Also, I love that business card.