It used to be the biggest problem Log In pages faced were forgotten passwords and accounts. People would regularly forget the password or email address they used to sign up or mistakenly believe they either had an existing account or didn't have one. Just how bad was it? User Interface Engineering's analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested passwords per day, and 75% of these people never completed the purchase they started once they requested their password. Ouch.

Third Party Sign In

"Single-sign on" solutions like Open ID, Facebook, Twitter, and more have tried to fix some of these issues by cutting down on the number of Sign In details people need to remember across the Web. With these services, one account (usually consisting of email and password) can get you into many different Web sites.

Signing In is faster too. When someone connects their Facebook or Twitter account to a Web site, they simply need to click the Sign In with Facebook or Twitter button to log in. Of course, they need to be signed in with the account provider to have things work with one click. But since 50% of Facebook's 500 million active users log on to Facebook in any given day ?odds are good one click is all it will take.

So the Sign In screen on Bagcheck put one click login actions front and center to make signing in easier. It also allowed people to sign in using their email address and password if they preferred to (below).

New Log In Problems

But with these new benefits come new problems as well. Most notably, people forget which account provider they used to sign up for a site, which makes them unsure about how to proceed. In the words of one of our friends on Bagcheck:

"Whenever I have to sign into Bagcheck, I'm filled with anxiety. Not because I don't love the service, but because of the log in screen. I cannot remember whether I signed up through Facebook, Twitter or if I should know some special entry credentials."

That's kind of the opposite of not making people think. Worse still, if someone picks the wrong provider instead of signing in they might end up signing up again and thereby creating a new account.

So while third party Sign In helps address some problems it also creates new ones. In an attempt to solve some of these new Sign In issues, we've been experimenting with a few new Log In screen designs on Bagcheck.

Forgot How You Signed Up?

Our first design approach tried to keep things quick and easy for people who knew exactly how they signed up and also gave people who were unsure a way out. To do so, we presented a set of one-click Sign In buttons at the top of the Sign In screen and an input field that said "Forgot how you signed up? Enter your name."

When someone started typing their name, instant search results would show up highlighting Bagcheck members that matched what they typed.

Once you selected your name from the list, the page would hide any Sign In options that wouldn't work for your account leaving only the options that would. So if you could not sign in using Twitter, that Sign In button would disappear. We also included a little snippet of text that explicitly told you how you could Sign In. This was done to cover the case where someone could sign in using any provider since no options would be removed.

While we liked the ability for people to recall how they signed up using the "Forgot?" text input, the rest of this design had some problems. It was strange how options above the text field would disappear and the fact we needed clarifying text to explain things told us the design was not there yet. Worst of all, we were still seeing people try to Sign In with accounts they had not yet connected to Bagcheck.

First Enter Your Name

Our latest Sign In screen design is a bit more aggressive at preventing errors (at the expense of one-click sign in). In this design, people are required to enter their name (or email address) in order to sign in. Once again, we use instant search results to match them to an existing user. This time, however, the options they have for signing in are not revealed until they select their name or enter their email address.

We allow people to find themselves using their email address as a way to cover multiple common names, and the off chance someone created an account with a variant of their name.

In this design, people can no longer sign in with one click. But this may be a worthwhile trade-off because:

• We keep people signed in until they explicitly sign out. So hopefully people rarely need to go through the sign in process.
• The amount of effort added to sign in is small ?just start to type your name (or enter your complete email address), select a search result, then click a Sign In button. It's not one click but it's not a lot of work either.
• It's no longer possible to try signing in with an account provider you have not set on Bagcheck because the login buttons don't show up until after you select your name.

You can try out the new design here: Sign In to Bagcheck.

Design is Never Done

Though we've made some progress in tackling these new Log In issues, design is never done. So please let us know what you think in the comments below. Did we go too far toward error prevention? Is single-click sign in important enough to justify the occasional mistake? Are there other design options we should consider?

We're happy to keep iterating based on your feedback! So thanks for any ideas you have.

UPDATE: Marty Moore created another design solution that also allows people to connect a new account or sign up using the same Log In screen. Interesting ideas!

Alan Cooper famously stated: ?where there is output, let there be input.? While this concept is pretty easy to get behind, it?s often hard to implement well everywhere. In fact, the best presentation of content is usually not the best interface for creating it.

Input vs. Output

During the time I worked at eBay it was not uncommon for someone to suggest a new way of creating listings (of items for sale) on the site. One of the most common proposals I heard was combining the output of a listing with its creation. In other words, people would get a blank version of a listing page and use that to fill in information about what they wanted to sell. The idea was that this would more accurately reflect the end result, and thereby make creating a listing on eBay easier.

No matter how many times I saw this idea tried, however, it never worked as well as a standard input form. As the image below illustrates, a sequential form walks people step by step through the information they need to provide in order to create a listing on eBay.

While the listing page displays all this information, its structure is designed to give prospective buyers an overview of an item, not to prompt a seller to enter everything required to list an item on eBay. The required bits of information are scattered across the page (instead of laid out linearly in a form) and presented in various visual styles reflective of their relative importance to buyers (instead of being presented equally as input fields in a form).

There are also UI elements that only pertain to buyers, such as the Bid and Buy buttons. And to top it off, not all the information required to sell an item on eBay is shown on the listing page. For these reasons and more, the listing page format was a pretty poor structure in which to create new listings. The linear input form worked much better (and still seems to now based on eBay?s current design).

Prior to Our Redesign

These issues were top of mind for us when we decided to try merging the display and creation of bags on Bagcheck. For those new to Bagcheck, a bag is simply a list of the things you use for playing guitar, skywatching, or even motorcycle touring. Structurally, it?s an ordered set of items with a title, description, category, and image.

Before this redesign, Bagcheck used one screen for displaying bags and another for editing or creating bags. The Edit screen didn?t reflect how a finished bag would look. Instead, it showed the contents of a bag in a condensed list on the right that made rearranging items (through drag and drop) easier. It also allowed us to use a simple animation to ?move? selected items from search results into this list.

While this design created a clear division between bag creation and bag display (like the eBay example earlier), it always felt a bit off. Updating a bag by adding, removing, or editing an item required shifting to ?Edit mode?. This removed immediacy. You couldn?t just edit what was shown on the screen and this created a barrier to interaction ?an extra and unnecessary step.

The New Inline Design

In an effort to reduce this barrier, we removed the Edit screen entirely and added a permanent ?Find Items? prompt to the bag page. This allows someone to start adding new items right away. As new items are selected, they appear directly below?right where they appear in the finished bag. These items can be rearranged and edited directly on this screen. No need to go to a separate ?Edit mode?.

This directness is also reflected in the image for a bag. As each new item is added to a bag, we automatically update the image to display the items in a bag. You change this image of course, but we like the way this immediately reflects your actions.

Though we made the process of adding items inline, we still depend on forms in a few places in the interface. As I mentioned earlier, forms are great for prompting people for a set of required information. We do this in three places in the new bag creation process.

Before a bag page is created, we use a dialog window to set a bag title and category. Depending on where people start this process, we try to pre-fill these answers. Bag suggestions, create similar, and category page.

When an item is added we use another dialog to ask people for a single, but very important, question: why are they including this item? Since this information makes the difference between a really informative bag and a nice list of stuff, we use a form to make input as clear as possible.

Lastly, we use a dialog to ask for a description (and soon tags) when someone is ready to publish their bag.

So forms still have their place. They are just broken into smaller pieces that are shown in context (as dialog windows) only when relevant. No long form to fill out, just a few bits of information when they actually matter.

And since, people are likely to ask... yes we did explore using inline editing instead of dialogs. But found the dialogs worked much better at prompting people at the right time for the right information.

Seeing it in Action

If you?ve made it this far, chances are you want to see the new interface in action. Of course, the best way is to go make a bag of your own. But if you?re not ready for the real deal yet, here?s a quick video of the current bag creation form in action.

Design is never done. So we know there?s a lot more we can do to continue improving our bag creation form and process. If you have any ideas or thoughts, drop us a note in the comments. We?d love to hear your ideas!

Profile and registration forms are everywhere on the Web. If crafted well, these forms not only welcome you to a service or community but they also allow you to decide how you want to be seen.

The information collected in these forms (like your name, location, and gender) can also be used to personalize the information and interactions on a Web site for you. That tends to create more comfortable places you?re more likely to revisit.

"If a user comes on more than once and is willing to give Facebook a very basic piece of information ? their gender ? that seems to be the strongest predictor of whether they will stay on the site." ?source

So small bits of information can make a big difference, which is why it?s worth taking the time to ensure the questions you ask people about themselves are appropriate and honest. To illustrate, let?s look at the gender question mentioned in the example above. In many Web sites, gender is a binary choice.

I am: Female Male

Occasionally, a third choice is included as well.

I am: Female Male Decline to State

While this gives people who don?t want to share their gender a way to opt out, it doesn?t really do much to address exclusion. More fundamentally, however, asking for gender in this way doesn?t make it clear why the information is needed or how it will be used.

So after a nudge from Livia Labate, information architect (and all around awesome person), we decided to rethink the gender question on Bagcheck and make it clear why we were asking it and what we?d be doing with the information. Here?s our current approach:

Preferred Possessive Pronoun:
Her His Their

With this design, we believe we?re being clear about why we are asking for gender and how it will be used. (And yes people on Bagcheck know what a possessive pronoun is!) We also like to think that we?re letting you know we care about your personal preferences. Though this is just one question on one form, it?s reflective of our broader philosophy about Bagcheck being a comfortable place for you to hang out and discuss the gear you love. (Yes we're geeks. As if this article on Web forms didn't clue you in!)

If that?s a philosophy you share... join us! And if you have any ideas or thoughts on the gender question let us know what you think.

Update: A few people have asked about why we selected the term "their". From the Wikipedia: "they/(their) is more often considered to be semantically indeterminate either in number, or in gender."