An obsession for perfection
This was originally published on my blog (no longer online) on Feb. 21, 2013.
Here’s an insight into the nightmares that wake me up at night.
While looking over the login screen for Knowmedge’s mobile design, I noticed that I had used a typical “user” icon for the form field. This is common practice, and I put this element in like it was a routine. At most, I thought about whether I should use a silhouette of our mascot, or if I should use a generic person. As you can see below (left image), I chose a generic person. Likewise, I didn’t put much thought into the “log in” button beyond the way it looked: flat vs gradient, what color it should be, etc.
There’s nothing about these two elements that will hinder a user from a usability point. The “problem” that I had was that I think they can be improved. If you look on the image at the right, you’ll notice two things:
1. I changed the user icon to an image of an envelope. This is because this field has always been for an email address, so having a user icon didn’t really make sense.
2. I felt that a login screen is so common that there’s no need for a button to say “log in”. I want users to get used to seeing an icon represent something that means “you’re going in”. This is similar to the way that when you see a button with a magnifying glass, you know what it is without even thinking. Your mind sees the “search” button so often that you probably don’t even realize you’re hitting that button. I want users to get used to a login button in the same way, so I used an icon of a key.
Changing the user icon to an envelope is a no-brainer. That’s a UX issue that I should’ve seen from the beginning. The button edit is slightly different. People aren’t used to seeing an icon on a button for logging in, but I expect that it won’t hinder them, and it’s my hope that more and more people start using an icon as a login button. Using an arrow key would’ve made a lot of sense as well, and I really struggled over the decision. The issue with a simple arrow is that it doesn’t convey the peace of mind of a key. This is probably a minor thing, and simply me overthinking things, but I stuck to the key to test it out anyway. Maybe a key is not the best representation of a login button, and if not, then use something else! Perhaps what you use will catch on. Whatever it is, it’ll be better than simply writing out “log in”.
Why is this important? Because thousands of years of human and language evolution beginning with cuneiform taught us that a visual cue is so much more powerful than text. Okay, that last sentence was bullshit I just made up, but c’mon, it sounded damn convincing. The truth is, I like visual cues because they’re instantly recognizable. Yes, you can read “log in” quickly, but it’ll never be as quick as recognizing a universal symbol. It may be that this will only speed the process up by a mere 0.00000000000001 second faster. So what? Right?
It’s not these exact changes that matter, it’s the peek into the inner workings of my mind that should tell you: here’s a guy that cares about every element that goes on the page. The examples presented here may make virtually no difference to an end-user, and yet I care about it. Imagine how much I care about the bigger problems. This level of detail is what separates a passionate designer with everyone else.
Here’s another thing. I didn’t spend hours and hours trying to come up with this idea. It just came to me, and I felt it made sense. I’m not saying that as if to say that it’s a brilliant idea that I’ve discovered. There’s probably someone out there that’s already done this. Heck, it may not even be an improvement, but a detriment! But that’s not the point. The point is there was no cost for it on a client’s part. If you don’t care that your users are 0.00000000000001 second less hindered in getting to that next screen where they might give their money to you, if you can’t appreciate that level of detail at no cost to you, look somewhere else for a designer.
Everyone else, send me your proposals and cupcakes, please.