Week 12 - Frustrating Forms

If you've been browsing the Web for more than a day, you've used a form. Whether it's registering for an account, completing a purchase, or leaving a comment it seems like most sites have at least one form. The first thing I remember doing on the Internet was doing a search for Cartoon Network: entering a search term into a text box and clicking the submit button.

But if you've been browsing the Web for a while you've probably run into a form that made things difficult. The following things really grind my gears when I'm trying to fill out a form:

"What do you want?"
The label for this form input doesn't make sense. It's either too brief to be clear or the wording is just confusing.

Make form labels as clear as possible by:

• Avoid using jargon (unless it's jargon your target audience is familiar with)
• Use verbs or sentence completion
• Use complete questions or phrases
• Clearly differentiate form fields asking for the same information but for a different reason
  For example: shipping information vs billing information

"What do you mean it's wrong? What's wrong with it?"
The form won't let me submit but doesn't tell me why. Yes, the phone number field turned red but since I put in a full phone number I don't know why it isn't accepting it.

Help users enter information correctly by:

• Placing any formatting requirements next to the input
  Example: xxx-xxx-xxxx or "no dashes, dots, or spaces - numbers only"
• Place an example in an input field that would otherwise be empty
• Consider adding code that formats the user's input for them

Related item: Tell the user their input is wrong after it loses focus. It can be irritating to reach the end of the form and find out half of it is wrong.

This is probably just me but...
Quick! Where's the search on this site? (Click for large image)



If you picked the larger text input to the right of the Sony ad then, congratulations! You have the same dis-function that prevents me from realizing that the text "Got a tip for us?" does NOT mean "Hey, this is a site search!" But maybe it makes sense to make that form more prominent. The regulars on the site are probably used to it.

The search form is actually the small on at the very top of the page to the right of the word 'login'. Wait, what? Is it me or does the login link end up looking like it's the label for that text box?

Placing form elements (or entire forms) in unexpected places or placing them too close to unrelated content can confuse people like me.

Avoid this problem by:

• Clearly separating forms from regular page content
• Clearly separate forms from each other if there's more than one on a page
• Follow conventions: if most sites place an element in a certain location then do the same thing

To be fair, Gizmodo did follow convention by placing the site search in the upper-right hand corner. (I wasn't being sarcastic when I said this is probably just me.)

It broke, now what?
The form tries to submit but it fails. It either hangs there trying to reach the next page or it goes to an indecipherable error page. It may even crash the browser entirely. In any case the user has no idea whether the information they entered got to where it was supposed to go.

I'm not going to put a list of how to prevent this; it isn't something that's necessarily in your control as a web developer and that isn't the point anyway.

What I'd like to see is an error message that makes sense for the user and instructions for what to do now. "An error occurred while processing your transaction. Please contact [DEPARTMENT] at xxx-xxx-xxxx or help@company.com" If it's known that a certain kind of error only prevented the next page from coming up but the order when through put that on the error page. If it definitely means the order failed say that. (Is it even possible to know? If so, that'd be awesome.) Put instructions on what to do if the submission hangs in your Help section.

A "Whoops, we don't know what happened" is better than nothing.

Week 11: Responsive Web Design

Something awesome happened at work last week.

During our team meeting our manager said that we would move forward with using some of the new features in HTML5 and CSS3 even though not everything is supported in every browser. We're not just letting go of pixel-perfect similarity between browsers, we're not worried about having the exact same visual effects and features. Instead of designing everything for the least capable browser the templates will be designed based on what's possible in modern browsers. Furthermore, the sites will be designed for multiple devices.

It's the most exciting thing since we dropped support for Internet Explorer 6 and I'm not even a designer.

So it seemed like rather good timing that J. Cornelius (VP of Operations at Coffee Cup and President of the Atlanta Web Design Group) came to speak to our class that same week and touched on the same thing.

Why is this good?

• Less time spent tweaking
• Deliver the best possible design regardless of browser
• Deliver design meant for mobile
• Things that are used are kept and improved
• More pressure on browsers to adopt standards

I won't dwell on the first item since I've already ranted about it in a previous post. But the point made by John Allsopp earlier and reiterated by Cornelius last week applies to the second item as well: most people only use one browser. The person using IE7 doesn't care that the person using Opera or Firefox gets rounded corners and a different font. However, the people using Opera and Firefox will like how nice sites look that make full use of the standards those browsers support. There's really no reason those users should get less than what's possible.

But let's say for a second that a lot of people do use multiple browsers. If they have a browser the site looks better in wouldn't they just use that one rather than complain that the other browser doesn't show all the same stuff?

A lot of people already design for mobile but sometimes what happens is that a separate version of the site is built for mobile devices. Using CSS to make the existing site adjust for different devices will make maintenance much easier.

Another point is that it is important to use the new standards in order to keep them around. The W3C abandons things that aren't implemented by the browsers and the browser companies won't implement things unless there is pressure to do so. We can't wait for every browser in existence to support something to use it because that will never happen. While we're waiting for more support, W3C and the browser companies see little to no interest and the existing support gets dropped.

The major browser companies are using the W3C standards and the modern versions of their browsers have some level of support for HTML5 and CSS3. Since the browser wars are no longer about whose interpretation of the standards is correct the browsers have to compete based on who delivers the best experience. If a lot of sites start using something that's only supported by Mozilla that pressures the other browser companies to implement it as well.

Example Sites

Amped - Amped is the hack day that wrapped up Web Week in Atlanta. Currently, if you look at it in Firefox (3.6.4) you get the gradient background with the circular stripes. You don't see the stripes in Opera (10.63) but you do still see the effects with the font and text. In IE9 (9.0 beta) you lose the background stripes and font/text effects (but still looks cooler than how it does in IE6).

Robot or Not - This is the site our manager showed us right after coming back from An Event Apart (the conference put on by A List Apart). Designed by Ethan Marcotte, it is an excellent example of a site that adjusts to different browser window sizes.

More Information

A List Apart: Responsive Web Design

The Big Web Show: Episode #9

Responsive Web Design presentation on SlideShare

Week 10: My Thoughts on a SpoolCast episode

SpoolCast talked to Luke Wroblewski back in October in an episode titled "Luke Wroblewski and Innovations in Web Input" (transcript available).

As the title suggests, they discussed some of the newer ways forms are handling user input and the newer ways users are able to input data. The main topics in the interview (in order):

• Google Instant Search
• Yahoo's experience with a similar product "Live Search"
• Other sites using different versions of this search
• Input from anywhere
• Ping for iTunes

It's a good interview where many good points are made but there were three that stood out for me.

A feature added to your site should solve your specific problem

Google's Instant Search may be cool and useful but that does not mean that every web site should change their search to do the exact same thing in the exact same way. An instantaneous* response can backfire. The example given in the interview was a form immediately throwing an error when the first character for a user name was entered because 'L is not a user name'.

As a counter-example some registration forms, like the one for Twitter,  put indicators next to the password field indicating their strength. As you type in the password and add in characters that meet the requirements (numbers, symbols, mixed case) the indicator goes from red and 'weak' to green and 'strong'. You know that your password is good enough as you're typing it: not after you've attempted to submit but you're not being interrupted by an error message either.

New features should help the user do what they need to easier and faster without frustrating them. This means doing some research and user-testing even when it's not something you're building from scratch.

Keep It Simple, Silly

Not a new lesson but sites like Facebook and LinkedIn are helping other sites let their users skip the registration process entirely. Services like Facebook Connect lets you log into an entirely different site using your existing account. The third party site avoids losing the user in the registration process, Facebook increases the value of their service to the user, and the user doesn't have to do anything other than log in to use the third party site.

Manage and Meet User Expectations

If Luke Wroblewski's opinion of Ping is typical of the people who used it then it seems that most of the problem was that people got something other than what they expected. Wroblewski was expecting his Ping account to pull information from his iTunes account but it didn't. He was also expecting it to work the way most other social sites do where there is very little limitations on what name or photo you use and no limit to what you can say that you like.

Part of this could have been avoided if people had known that their Ping accounts wouldn't be pre-populated with any data. User expectations can be managed by explaining what a new service will have, do, and be used for when it's announced. Demos are a good idea: they can make it clear what a service can't or won't do. I don't know what Apple did or didn't do with Ping before it was launched so this isn't to say that they didn't do any of this.

But another thing to do is to meet user expectations. I've honestly never heard of a social site or service that required you to not just use your real name but use it exactly how it appears on your credit card. I've also never heard of one that requires you to submit your user image for approval first. That's just odd. If they really didn't want to bother with having moderators check for anything inappropriate they could have just done what AdultSwim did and have a set of images for users to choose from.

This is all just my opinion and certainly not a substitute for listening or reading the interview so check it out if you haven't yet.

*I know people use the term "real time" but it sounds odd to me for anything that doesn't use some kind of alternative timing. We're not talking about an awards show on a 30 second delay or a video game where 3 minutes in real life is an hour in the game. We're talking about web sites. It'd be like getting on a slow elevator and saying, "I wish this elevator could get me to my floor in real time!".

See how that doesn't make sense? Clearly it wouldn't even be an elevator at that point but a teleporter.