The ZURBlog is where we discuss interaction design and strategy.

Go Directly to the Demo and Code →

We've all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it's hidden from you. It's the same issue with masked passwords, you enter some data and then poof, it's gone. And not gone like sexy was gone, this is the kind of gone that not even Justin Timberlake can fix.

The file input is going to look something like this:

Did I upload a new picture of my face? Or maybe something less professional. It's like buying food at the grocery store, except you can't see what you have in your cart. Wait, did I just buy the diapers or the case of Tantrum (read highly caffeinated beverage)?

The solution is to use a little bit of JavaScript to upload the image as soon as it's selected and display a thumbnail so we can easily review the form before we submit it.

Head on over to the ZURB code playground to see a complete demo and breakdown of the JavaScript we use to accomplish this. The code playground is where we do crazy awesome stuff with JavaScript, HTML, and CSS.

We've released Notable to the public, which means now it's time to start iterating, iterating, iterating to keep polishing the app. Recently we rolled out a change to the screenshot annotation toolbar; easier to use, more functional, and much better looking. As a result our note overlays started to look a little anemic: they couldn't hold up next to the new toolbar. So, we decided to redesign the overlays as well.

The Notable overlays are not a huge project, but they were a cool little learning exercise and an interesting microcosm of our process and how we go about solving problems here at ZURB, so we decided to dissect the process, why we did what we did, and how we implemented it.

First Steps: Defining the Problem

It wasn't just that the notes didn't look good enough (though they didn't) but they had some major usability problems. The visual notes overlay put a heavy yellow hue on the selected section which was great from a detection perspective and terrible from a visual feedback perspective. If you needed to call out that something was the wrong color, well...of course it was, it was yellow.

Defining a problem like this is how we solve everything here at ZURB. Without constraints how do you reach a solution? We could have just said 'we don't like these notes, so let's make cooler ones' but we could have gone down a hundred different paths instead of the 5 or so we ended up with. Defining the problem and the constraints on the solution keeps us focused and efficient.

So we knew what we wanted to fix in the current overlays, and what the new ones would need to do:

• Not obscure the visual design hue
• Clearly call attention to where the notes were on the page
• Be easily resized and have clear selection and focus states.
• Look awesome.

Framing the Solution

We had our marching orders, now it was time to make it happen. In most cases at ZURB we start with some quick sketching; it's low investment, quick and helps us clearly state our intentions and give each other feedback. With this little project we jumped into Photoshop to knock out some fast visual iterations. The problem was clearly defined and with such a small project the devil would be in the details.

These are three of the iterations we went through before we reached a final mockup. Once we've got the page element started we go through iterations quickly, grabbing a layer set and riffing on it again and again until we've built up a good sized set of options and refinements to make some decisions around. As with our clients our goal is to provide what we need to come to a decision and execute on it.

After some internal discussions (and a healthy bit of swapping the mockups around) we arrived at this final mockup:

Our final version met the criteria we set in the first phase:

• It doesn't obscure the visual hue like our old notes
• It clearly calls attention thanks to big, eye-popping orange borders
• They are easy to grab and resize thanks to larger hit areas and large resizing handles (twice as big, in fact)
• It looks awesome. We were pretty giddy about the glass effect. You've got to love the little things.

Fast Iteration to an Awesome Solution

This project only took a couple days, and that with a number of other projects and client work on our plate. We have to move fast at ZURB and this was no exception — in fact we've discovered that most times when you have to get something done in a short stretch you'll do a better job than if you can just noodle on it for days and days.

Coming Up Next...

In part 2 we'll look at how we implemented our visual mockup and some cool code tricks we learned in the process. You can see the implementation yourself by checking out this public Notable post!

As an interactive designer, it is easy to get carried away. Part of being a good designer is knowing how and when to use the techniques at your disposal. While there are tons of great tips on how to do certain things on the web, these few tips aim to help designers of any experience level avoid problematic situations by getting back to the basics.

Don't Forget That Your Users are Human

One of the most important aspects of a website is its usability. Don't forget your audience is human. When you forget this you don't communicate your message effectively.

A great example of this principle applied is found in form design. Ryan Singer outlined 10 ways to make forms better, one of which being the language that you use when a error occurs. We've all had it happen, you forget to fill out one of the questions on a form and when you submit it you get a nasty error screen that makes you feel like you've done something illegal.

Error: Not all of the fields were completed! Self-destructing in 5...4...3...2...

You have to consider that many people aren't as comfortable online as you and I. Errors that aren't friendly and informative are scary to users.

A Better Approach

Remember to be conversational in your errors/notifications. So what if they messed up a little bit? Gently let them know they skipped a field and move on.

It looks like you forgot to tell us your first name.

This allows for a better user experience that communicates to your users what you'd like them to do, not to mention it treats them with a little respect.

Don't Jump Straight Into Photoshop

So, you're excited about a new project and you start out by opening up a crisp white canvas in Photoshop. You've launched yourself into a huge ocean of tools without a good idea where to begin. By doing this you can end up with a design that is not very well informed and it makes it very difficult to create a successful web experience.

A Better Approach

Resist the temptation! At a minimum you should always map out the goals for each design and start by simply sketching out ideas.

Sketching is an efficient and effective way to explore concepts because you don't have to focus on typography or making everything pixel perfect. Photoshop is great for executing a design, but not so great for exploring broad ideas.

Design Sites That are Both Necessary and Useful

One of the highest priorities of any project should be to make it usable. If people can't use your site then what good is it? Many designers lose perspective of big picture goals and focus instead on just making something that looks good. Designing with no purpose in mind makes it hard to know where your going.

A Better Approach

Believe it or not the Shakers came up with a design philosophy that can be perfectly applied to design on the web.

"Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful."

The Shaker Design Philosophy

The most beautiful site in the world can also be the most useless. As with all forms of design, the best work has a foundation of usefulness.

Got it. Now What?

These tips may seem like common sense, but unfortunately, many people don't consider them in their day to day web work. If you're just starting out, these tips can take some designers years to pick up so learn them now.

If you've been an interaction designer for a while, try to examine your daily routine to see if you can apply these tips. You may be surprised at where you've neglected the basics.

Apple is notorious for creating great products with whimsically awesome interface design—ones that have certainly turned this old PC fanatic into an Apple fanboy. More than the finesse of the physical products or the sparkling chrome, it's refined and iterated design decisions that create great experiences for consumers.

As I was taking another mouthwatering look at the new unibody laptops, I was reminded of just how important those design decisions can be for how things work. The new unibody MacBook Pros come with fresh hotness all around, and the one design decision we all have been applauding at the ZURB office is the new laptop lids.

Push to Open is So Last Year

One of the biggest gripes we all have about the previous generation of MacBook Pros—the ones we use here—has been the lid latch. Here's a look at the culprit:

We all know it, but let's get this off all our chests—almost all laptop lid latches suck. There are those obnoxious sliders, tiny buttons, and clasping plastic contraptions that almost always break. Design decisions like these just make for bad experiences. You have to position your finger nail just right or you risk broken nails, pinched fingers, and frustrations abound. And when people are frustrated with their computers, bad things happen.

Aesthetics Don't Always Mean Great Interactions

The old MacBook Pro (MBP) lid latch was designed to compliment the general aesthetic of a great looking product. The short and wide design amplifies the perceived slimness of the machine, which is really cool, but not that functional. After continued use, the latch looses its "oomph," meaning you have to push harder, often with only a finger nail because your finger tip is too big.

When to comes down to it, the lid latch is just a bad experience for most users—even worse on some laptops, too! So where is the great interaction design? It's on the new unibody MBPs where Apple has rolled out an entirely new laptop latch.

Laptops Are Meant to be Opened

Apple has taken all the other great design decisions about the last generation of MBPs and made them that much better with this new unibody design. By far the one that stands out the most is the new lid latch.

And you know why it's so great? I'll tell you:

1. First, there's no tiny button that requires a finger nail to open.
2. Second, it maintains the magnetic clamp style from the last generation—and with just the right amount of magnetism.
3. Third, the design affordance (the interaction we expect from just looking at the latch) is much greater—just lift.
4. Fourth, it's just one motion. No push, then lift to open. Just open it.
5. And finally, it's still effortless to open. You can lift the lid with one finger and not worry about the rest of the laptop lifting with it.

Design is How It Works

While maintaining the ease of use of the previous generation of laptops, Apple has managed to increase the design affordance and the durability of a single element to make a better experience for their consumers.

Remember: design isn't just how stuff looks. Design is how it works. Consumers rely on great design decisions to make products worth buying and using. Acknowledging that in your work (hardware, software, online, etc) will almost always take it from good to great for everyone involved.

Jakob Nielsen made quite a stir not long ago suggesting that password masking should go the way of the dodo:

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

Nielsen argues that providing feedback and an indicator of current status is a basic premise of usability. More importantly from a business perspective he argues that failed logins are costing businesses time in support as well as lost users. That may be true, but here's why we need to mask passwords anyways.

Passwords Mean Security

Passwords are all about security – In some cases passwords are simply about the reassuring appearance of security. A site that has password protection is, to many users, secure – whether the site is really secure or not. When you eliminate masking you might be saving your users a few seconds irritation, but you'll be damaging your own credibility.

Nielsen's research was largely based on mobile devices, but mobile devices have one advantage that desktops do not have – ease of obfuscation. If a phone didn't mask passwords it wouldn't be the end of the world, because users can much more easily conceal their actions on a tiny device than a full size machine.

The (Awesome) Solution

Many smartphones, including the iPhone, solved (part) of this issue by showing the most recent character of a password field with a delay of a second or two. You can see what you just typed, but not the entire password. This provides Nielsen's much vaunted feedback and status, while still retaining the majority of the field's appearance of security. Just one problem: browsers don't do what mobile devices do. So, we'll make them do it with some fancy javascript and a little behind the scenes trickery.

View the Demo »

How to Implement It on Your Site

Here's how we'll help your visitors keep their security while improving password masking—with just some javascript and CSS magic.

1. Put a standard text input where the password input would be and label it 'password' for the user.
2. Create a real, hidden password field which the javascript will copy the password into with a type and ID of password.
3. When the user submits the form, send the username and real password fields, while discarding the fake one they typed into. (Since the field they typed into has been converted to bullet characters we can't submit that field).

The Code

This version of the solution is written as a Prototype behaviour and requires the lowpro behaviours plugin, but the code isn't terribly complex and could be adapted to most any system. Here's the behaviour itself:

With that in place you simply have to attach the behaviour when the page loads:

Solved! Sort of.

Does this solve the problem? Well, mostly. It's a nice interaction and it does seem to strike a middle ground between fully masked and Nielsen's total unmasking rallying cry. Security expert Bruce Schneier actually backs this Blackberry/iPhone method, as he refers to it, as an "excellent compromise."

However, it also introduces a few problems: it doesn't work well in older browsers and doesn't play nice with browsers trying to autofill the saved password. The ideal solution is in the hands of the browser manufacturers, and making type=password fields act this way by default as they already do on mobile.

Security online will only become a bigger deal as we and our users invest more and more of our lives in other sites. There will come a day when passwords are seen as hilariously antiquated, and retina scanning or voice identification (or colonic maps, yikes) are the truly secure ways we identify ourselves. Until then we'll keep looking for awesome solutions.

---

See also:
Super awesome labels
Nielsen's Alertbox on Password Masking
Bruce Schneier 'I was probably wrong'