“Innovation has nothing to do with how many R&D dollars you have. When Apple came up with the Mac, IBM was spending at least 100 times more on R&D. It's not about money. It's about the people you have, how you're led, and how much you get it.” - Steve Jobs

Functioning Form – Web Application Form Layout

Luke recently posted an article about form widget layout. It talks about the placement of labels in relation to the form input elements. I think he’s basically nailed it, but didn’t take it to the next level. He is right by suggesting that left aligned labels are ideal for longer forms where the data isn’t familiar to the user, but that leaves the labels sometimes too far away from the widgets themselves. Making them right aligned, means there is a left jagged edge and in English that impedes legibility.

My question is, how can I get the best of both worlds? Well … here’s how:
By adding in the two types of background colors, and using rules and frames to separate the cells you get both horizontal relationships and you get vertical rows to hold your eye in.

[note added: 1/24/05]
Luke added a section critiquing my post. I’ll stand by my comment responding to his original critique below. That I believe that while possibly aestheticly he is correct, from a usability perspective there is a contradiction here.

Be Sociable, Share!
  • http://www.lukew.com LukeW

    Dave, Sorry, but I actually disagree here quite a bit. By ading 2 different background colors and rules between tham you have added a total of 31 additional visual elements to the design. The rule in the middle, each gray box, and the lines that seperate the boxes vertically. From an information design perspective that is a lot of visual noise for a benefit I’m not seeing. As Tufte would say anything that does not add to your information takes away from it (chart junk). The reason I don’t think it add anyhting is that it does not solve the problem of right to left to right alignment: the chngin background colors and vertical line between them interupt your eye’s flow. Each visual element cause it to pause and consider. The same is true for the vertical (top to bottom) reading of the input fields. They are now competing for your attention with the shapes created by the background color and your flow through the text is interupted by the lines between.

  • http://synapticburn.com Dave

    I know you have a “less is more” perspective, but Tufte, designs information for consumption and not GUI displays, so I don’t want to either dismiss nor accept them out of context.

    What I do know from my experience in looking at people use interfaces is that most need guidenance in understanding the relationship between labels and widgets. When familiar this relationship is easier to keep and the types of grouping color I suggest woudl be a lot more heavy handed, but when the forms are not connected to well established norms this suggestion is a great way to teaching them these relationships.

    Lastly, you can take these tables and use them as the basis of groupings as well.

    I fall on the results of usability tests, where this layout is a lot less error prone than one that doesn’t add these 32 elements.

  • http://www.lukew.com Luke

    Dave, one last point and I’ll leave us to our differences on this one;)

    I too have a wealth of Usability data that backs up the points I made and don’t see the “usability perspective contradiction” you mentioned above??

    As an example, Yahoo, eBay, and Amazon combined do more usability testing of Web forms than any other source I could imagine- yet they do not add a grid to their form pages for increased ‘clarity’. These flows are essential to the success of such companies- it means millions lost if they get the design wrong.

    do you have a published report on this topic you can share that contradicts this? If so, I’d be really interested in seeing it, thanks.

  • http://synapticburn.com David Heller

    Ebay, Amazon, etc. are web sites and not Web Applications. Their forms are all the same and the data collection is familiar and contextualized in a way that has unique properties.

    Unfortunately, I can only say that the tests were done. I would argue that a test done on a different approach does not mean that the comparative was also done.

    My tests were done in specific communities with more closed audiences. The tests looked a success to completion while monitoring error correction along the way. With the added visual clues there was less error correction than there was without them. So this was comparative.

    I think it is REALLY dangerous to say that b/c Amazon does something we can assume they tested it. It’s like going to a really great restaurant and believing that the kitchen must be spotless. Rarely is that true. Show me the #’s (something these organizations rarely do) and maybe I’ll believe that they are doing their due diligence, but there is so much I hate about both Amazon and eBay, let alone Yahoo that I can’t believe they test everything.

    But again, I’m not a fundamentalist “less is more” kinda guy. I believe that complex interactions require more sometimes. Basically, sometimes “less leads to phone calls”. Phone calls cost my company money.

  • miles

    I am torn somewhere in the middle of this discussion. I do think that the suer benefits from help creating the spatial relationships between tag and widget, but I think that the example above is too ‘heavy’ and would benefit from subtler visual clues, such as Luke’s use of a dividing line to group related elements. I know it’s just an example but the greys above are just too heavy imho. I know that lighter shades might get lost on less contrasty displays but perhaps there is a oompromise here.

  • http://synapticburn.com Dave

    Miles, I appreciate your post. I can see how the gray is a bit starck and too attention grabbing. I have seen the basic direction taken with different hue and contrast approaches. I’ve seen one recently done w/ a mix of light blue and very light pink hues. As you’ve noted on laptops these colors almost became non-existent to the user.

    My main point in all this is that the rules especailly add a guiding eye to the added whitespace where the labels left aligned, thus loosing their interaction with the form element they are labeling.

    I also can see how these can turn into groupings as well.

    I think the one thing I can see is that there doesn’t need to be two shades of gray for this to work well.

  • http://www.germagic.de KMB

    Just read LukeWs web_forms.html and than reading this and I begin to wonder, why not using alternating rows instead of columns? You could seperate related content by using different colors, like

    bright green
    bright green

    bright red
    bright red


    This way it would be easy to connect a label with the related input-field and by using no borders at all the anoted distraction is absent too.

  • http://joelpittet.com Joel

    I have read through all the posts and there are many valid points on both sides of the discussion and by the way it is a very interesting one.

    The alternating colors that KMB brought up bring the number of visual element problem up again but as a good point will reduce the hard white line to a softer color change(depending on how it is implemented)

    I think that is great what LukeW is actually putting the thought and time into this subject matter. This type of detailed analysis has gone into typography and page layout why not form design too. Also allowing people to ask some interesting questions.

    The statement on GUI’s vs consumption was quite an odd statement as they both work hand in hand to provide a user with a full experience. Maybe you can expand on that for me.


The archives run deep. Feel free to search older content using topic keywords.