Strategy Blog: Viget Labs

Kevin Vigneault - User Experience Designer :

The defining characteristic of a password field is that it abstracts text as dots. While the intention of this behavior is understandable (it makes users feel secure and protects from prying eyes), the unintended effect is that it creates a usability problem. Users can't tell if they've entered a password incorrectly until after the site's validation informs them. It's like typing with your eyes closed.

The most common solution for the password field problem on registration pages is to require people to confirm their password in a second field. Again, the intention is understandable (it cuts down on mistakes), but the reality is that sites are requiring people to deal with two password fields. Here's an example of the common solution with some JavaScript validation:

While this isn't a terrible experience, I think there are a few other ways to handle this problem worth exploring. With some inspiration from a post on IxDA.org, I've created three below. Of note, all of these proposed solutions load a password field when the page is generated, so the browser will initially treat them as regular password fields.

Solution #1: Users click a checkbox to show characters

Pros: The decision to show or not show characters is fully at the discretion of the user. Passwords can be edited while characters are displayed.

Cons: It doesn't automatically switch back to a password field. People could accidentally keep it checked while they're filling out the rest of the form, leaving the password susceptible to prying eyes.

Solution #2: Users hold down a button to temporarily show characters

Pros: Users are able to see their password characters if they'd like and cannot accidentally leave the field in the show character state. This solution potentially feels more secure to users than solution #1.

Cons: The downside is that users cannot leave the field in "Show characters" mode while they're editing the field. They can only see what they've entered when the button is pressed down.

Solution #3: The password field automatically changes to show characters

Pros: As a user, this approach would be my personal favorite because it's the easiest option, and you always see your password as you're typing it in. I don't really care about other people seeing what I type, since I rarely find myself in situations where I notice or would expect people to leer at my screen.

Cons: When users first select the field and start typing, it will look and behave like a regular text field -- which may be startling to some. Users will not see that it switches to a password field until after they've entered something and clicked off of it.

Conclusion

None of the solutions presented here are the silver bullet for how to handle password fields in all situations. Depending on your users, your goals for the form, and your willingness to try something a little extraordinary, one of these options may make sense for your site. If anyone has any other ideas for how to handle password fields, I'd love to hear about it in the comments.

Update! April 16, 2009

In response to this post, Stephen Lewis from Experience Internet put together a writeup and demo for another alternative to password confirmation. His works very similarly to the iPhone password input field where the last character is momentarily a character before automatically switching to password "bullet".

M. Jackson Wilkinson - Former Staffer :

As web application designers, we often work to design interfaces to be as simple as possible, focusing on the new, uninitiated user who wouldn’t necessarily be interested in using a sophisticated interface. On the other hand, developers, enterprise, and other experienced users appreciate those sophisticated interfaces for the power they can give to the user.

It’s a common situation to outgrow a web application. You sign up for a tool that appears to be easy to use, and it is. You adopt it as part of your toolkit or workflow, and continue to invest your time and interest into it. Over time, though, you begin to feel the limitations of the simple tool. Maybe you were using Basecamp and are finding that it’s not the best way to task other people on a project. Perhaps you’re getting frustrated by Twitter’s lack of privacy or group options.

As a designer, what’s the right way to go? Do you design the simple interface for the new user, or the sophisticated interface to offer power to the more advanced user? In creating simple web interfaces, we are often designing at the expense of power, and that power can be the key that makes software truly invaluable for users in the long term.

It's a false dichotomy. You do both.

Continue reading "Embracing the Curve"

Stephanie Hay - Project Manager :

Last December, I visited a financial planner.  It was well worth the time and hassle of tracking down recommendations from folks whom I trust.  It was enlightening but also daunting -- I had a lot of work ahead of me to get prepared for retirement at 30.  (Tsk, and some call me an idealist).

Anyway, among the many great recommendations was to explore investment opportunities available in any of a number of companies.  So, I started doing some research and now have intimately experienced the user flow and options available to me behind three major financial institutions, which I refuse to name because I don't want anyone to steal from me.

Here are some observations I've found in my micro-research:

Decision paralysis on the home page is alive and well. One of the companies had no visual or content hierarchy -- it was literally line item after line item of everything I could use them for.  This is OK if I'm just scanning for a certain keyword, but it's also anxiety-inducing.  Another company had much better visual hierarchy -- for example, there was a question on the home page that asked "New to Investing?" -- but then led me to a landing page with enough choices for a seasoned investor.  The conversion funnel could be more effective if I felt a guided experience rather than a free-for-all.

Two of three companies structured their user experiences around their own internal organization. This is amazingly annoying when I want to move money from point A to point B and have to sign into two different interfaces and have confirmations from both.  Why on Earth would you require your users to jump through these hoops just because your internal territories are so deep?  However, one company did invest obvious love and care into audience research and ease of use, which then made the other two seem even more bureaucratic.

Pop-up explanations are everywhere, but never seem to help.  Maybe this is just me, but I don't really need a glossary when trying to manage my banking online.  Instead, I need answers to questions that seem nowhere to be found (like, when setting up bill pay for an individual, does the date I choose dictate when the check is cut or when it's delivered?).  Or the answers are off on some page beyond my current view, which makes keeping things in context very difficult.  But, to remedy this, see the next point:

Live chat works.  I feel weird typing this, but it's true.  On each of the three companies I was researching, I used the live chat option and found stellar results -- one of which was so pleasurable thanks to friendly customer support that they earned my business.  (A follow-up call afterwards gave me the warm fuzzies, too.)

Overall, I was amazed that two of three financial institutions I surveyed are capable of managing millions (billions?) of dollars for people but aren't better equipped to manage their users' experiences intuitively.  Maybe I'm expecting too much?

Jackson Fox - Former Staffer :

Way back in December my colleague Mindy set out her web design goals for 2009 , and included "Continue to improve my understanding of User Experience design" at #4 on her list. We've got a well-stocked UX bookshelf a Viget South, and Mindy's post got me thinking about the books I recommend to people who want to learn more about user experience design, information architecture, usability, and interaction design. I set my own goal of putting together a "UX canon" that I would be able to share. Well, it's nearly March and I've yet to finish my reading list. Thankfully, the design faculty at the School of Visual Arts did me a favor and posted there own interaction design reading recommendations. It's a pretty good list, and has most of the books I had in mind to include in my own reading list. I highly recommend that you check it out, and in the spirit of sharing, I do want to recommend five books that didn't make it onto the SVA list:

The Inmates are Running the Asylum by Alan Cooper — I think you could call this the book where I found religion. Inmates isn't a practical book, but it embodies all of the frustration about interface design that I felt as a Computer Science student in college.

The Human Interface by Jef Raskin — Raskin has a fondness for oddball interface paradigms, but this is another book that is more about the spirit that embues user experience design than the actual practice of the craft. Fun Fact: Raskin's son Aza is now leading UX efforts for Mozilla.

Tog on Interface by Bruce Tognazzini — Bruce "Tog" Tognazzini was part of the legendary design team at Apple during the early years of the Mac OS, and this is an engrossing look at much of the thought and effort that went into crafting many of the fundamental interface elements we now take for granted.

Contextual Design by Hugh Beyer and Karen Holtzblatt — SVA is a design school, so I guess it isn't surprising that they don't have much in the way of design research books. Contextual Design presents the case for ethnographic research methods in UX design.

Information Architecture for the World Wide Web (3rd ed.) by Peter Morville and Lou Rosenfeld — Finally, I want to recommend the classic and definitive Information Architecture for the World Wide Web. Effective organization of information is critical to creating usable designs, especially on the web, and this is the book that formalized IA as a practice.

Todd Bayliss - Project Manager :

Ok, so I had a great (and effective) marketing tactic used on me this morning. I’m a relatively new coffee/espresso drinker, but I noticed pretty quickly that the barista at this new, non-[major franchise] shop had forgotten the hazelnut syrup I had requested. But, because I still need my sugar fix, I turned around at the end of the parking lot and went back in with the intention of just grabbing a few sugar packets rather than making a fuss. The barista recognized me though, and I felt compelled to mention the oversight. He apologized emphatically and added the syrup; which is really the best I would have hoped for.

The manager, however, overheard the exchange and stepped in to offer me a free sandwich for the error; which, to me, seemed excessive, but an extremely gracious gesture that was good for his up-and-coming business. I protested slightly, but then he hooked me by saying, “Really, it’s fine – you’re a regular.” Now, I’ve only been in this shop four times (granted, three of them were this week), so I’m hardly a “regular.” But, by calling me one, I now felt pressured to actually BE one. On top of that, I was quick to mention the experience to the first person I ran into this morning. I’m spreading the word.

Here at Viget, we strive every day to not just get people to our clients’ sites, but to make them “regulars” on those sites. We propose marketing and social strategies, blogs, content revisions, and design updates to grab people, draw them in, and, hopefully, keep them coming back for more. But, in a fickle, ever-changing online world, how can we ensure that we’re connecting with our core audience? We’ve written before about ways in which customer service and brand personality effect online experiences, but allow me to add another case study to the list.

The Lefsetz Letter focuses largely on the music industry; but, in a post this week, Bob Lefsetz recounts an experience he had with one of my personal favorite e-commerce sites for outdoor gear.

I immediately received an e-mail confirmation that said "Get stoked - most items ship within 24 hours." That’s how they talk on the hill. But most e-commerce sites use the traditional phrases, vetted by attorneys to avoid any and all lawsuits. These companies are not run by humans, but computers. Just try to complain when you’ve got a problem. And then, three hours later, came another e-mail. With the above quote. Yes, "Holy crap. Your stuff just shipped." Wasn’t I supposed to wait ten days for them to make money on my money? They ship within twenty four hours? But what truly sold me was the irreverence. Real people work at Tramdock.com. Or at least real people wrote the computer scripts.

And those are the keys. Mr. Lefsetz was not only able to make that connection between the company that was trying to make money from him and the people who are actually behind that company, but they exceeded his expectations as well.  So with a necessary focus on keywords and SEO to get people to our sites, how do we bridge the gap between marketing and personality in order to keep them there?

Bob closed with this:

Play to your core. If you deserve to be bigger, your fans will spread the word. And don’t be afraid of offending those not in the loop. They don’t matter.

In the end, he “gets” what I “get” about this site. Backcountry gear isn’t for everyone, so why try to speak to everyone? Find a voice that speaks to your core audience, exceed their expectations, and your “regulars” will do the work for you.

Easy enough, right?