The ZURBlog is where we discuss interaction design and strategy.

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'

A few days ago I got what might be the best designed app for the iPhone I've seen so far. Believe it or not it's a port of a game now 17 years old.

Back in 1992 iD Software released a pretty revolutionary game called Wolfenstein 3D – the 3D part wouldn't really pass muster today, but for the time it was knock-your-socks-off cool. Wolfenstein was arguably the original first person shooter, grandfather to what must now be thousands and thousands of games. So what's so great about this app on the iPhone?

It's not the presentation

These are the original graphics, 2D sprites and horrible sound quality and everything. The game is fun, no doubt about it, but not exactly "current." No, what makes it such a great iPhone app is the consideration that John Carmack (iD Software founder and game programmer savant) put into this port when really, he didn't have to. People would have bought Wolf3D pretty much as-is. Still, Carmack considered the medium and made strategic design decisions that reflected his experience with the platform.

For example, Wolf3D doesn't have an animated loading screen, or three different studio icons in a row, or some other obnoxious load screen. Wolf3D loads to the main menu in under 3 seconds, and you can jump right into the game in another second or two. This by itself is huge and Carmack, in his design notes, mentions that even though in this case it was almost accidental (Wolf3D is very small) it's worth designing for in the future.

Carmack understands how people use the iPhone.

In addition to fast, casual-friendly load times Wolf3D has something else going for it. If a call comes in the user won't have time to get to a save point, or go to the main menu and save. Wolf3D just saves, quickly and automatically, any time the user navigates away from the game. Phone calls, text messages, or just exiting to the home screen with the iPhone's home button all trigger an instant save and quit. Every app for the iPhone should behave exactly like this.

Outside-In and Inside-Out

Recently at ZURB we had Luke W from Yahoo! come for ZURBsoapbox – he gave a great talk about outside-in design: design seen from the side of the user, not the designer. iD in this case is a great example of outside-in design (or Design for People, as we like to say). They considered the iPhone platform not just as developers but as users who expect certain behaviors and accommodations from the device.

More than just that they are a great example of effective inside-out design: from the standpoint of developers they understand the technical limitations of the platform and designed to the fullest extent possible. Meshing those two views creates a powerful experience.

Carmack's design notes are full of other great anecdotes about iPhone development and user testing and make a good read for anyone that designs for the iPhone or any platform (including the Web). Carmack and his team really understand the iPhone as a platform and not just as a revenue stream. They managed to take one of the oldest games around and create a refined, pleasant user-experience on a cutting-edge device.

As designers we should always have a thorough understanding of any media we work in to be sure we're applying the same thoughtfulness and consideration that Carmack and co. applied to a 17-year-old game.

At first blush that seems like a pretty insulting question, but don't worry, we're not calling you a liar – not quite. I recently read through Edward Tufte's phenomenal Visual Explanations: Images and Quantities, Evidence and Narrative and came away with a lot of great ideas and points to think about, but one really stuck with me. Data visualization not only needs to be clear and informative, it needs to be honest.

There's a lot of data display out there that is dishonest, and that doesn't imply any sort of nefarious motivation: data display is tricky, and the best of intentions can still lead to display that doesn't tell the whole story, or maybe tells the wrong story altogether. Tufte's object lesson was the investigation into the Challenger disaster.

The complete analysis of the Challenger disaster is pretty complex – the abstract is that launch day was unusually cold and the rubber rings that joined the segments of the solid rocket boosters were too cold to move into a proper seal as the rocket flexed under the fuel pressure. Fuel escaped and destroyed the seal; the plume of escaping fuel ignited and forced the booster into the main fuel tank. Robbed of its aerodynamics the vehicle fell apart under the pressure of acceleration.

The disaster itself was bad enough; worse was that Tufte posits it could have been avoided if the initial data display had been honest. That's not to say there were evil schemes involved, or people lied to get the shuttle launched on time – Tufte doesn't address those points. However the firm responsible for the manufacture of the O-rings sealing the booster presented data to NASA which was improperly displayed – it did not correctly identify the correlation of low temperature to O-ring failure.

For the complete picture you should read Visual Explanations . There's great material in there on ways to lead users through a flow, display actions and layers through illustration, and a variety of other topics. What I took away was the importance of honest data display, something we should all be sure we bring to our projects.

We love the small interactions that add that extra wow to any project. Somehow the tiniest of details make the biggest impression and seem to have the longest half-life. You'll always remember how a small detail made an experience worthwhile—and boy do I keep reminiscing about TypeTees.

TypeTees is a site dedicated to (you guessed it) t-shirts with nothing but witty sayings with cool typography. Run by Threadless, they have a knack for some killer visual styles. Although a relatively simple site, one small interaction caught our eyes above everything else: the hover effect on their t-shirt thumbnails.

How cool is that? Getting the fullview of t-shirts is usually such a pain in the butt, but with this creative approach to showing an entire t-shirt on hover, TypeTees makes sure it stands out and is remembered long after you've visited the site. It's true—I'm still thinking and talking about that hover state two weeks after I first saw it.

We're always looking for golden opportunities to really make a project sing, and it's always the small things that have the most impact. Keep looking for them in your projects as you think not only about what customers want, but what will keep you on their mind for a long time.