Web Form Layout and Design Resources

libsys-gdo's picture

Web Application Form Design
http://www.lukew.com/resources/articles/web_forms.html

Web Form Design in the Wild, Part I
http://www.uie.com/articles/forms-fairmont-hotel/

Web Form Design in the Wild, Part 2
http://www.uie.com/articles/form_design_wild/

Luke taught an interface design class I took back in grad school, which is why I was initially aware of his work. I was happy to learn, given the context of the ongoing discussion in this group, that he has spent an inordinate amount of time writing and thinking about form design. He's now Senior Principal of Product Ideation & Design at Yahoo! and has a book on form design in progress.

I found the short article on Web Application Form Design above to be fairly useful, so I figured I'd just register these resources for the ongoing discussion.

Comments

Thanks

Michelle's picture

Interesting articles.

Michelle


See my Drupal articles and tutorials or come check out life in the Coulee Region.


My blog, mostly about Drupal: Shell Multimedia

Wonderful resources

eigentor's picture

So now we should make use of it and investigate the present state of forms in drupal. A thorough analysis might lead to a list of obvious points on which we could work.

It's good to see that people on the web are already doing research in that field. So one does not need to start from zero.

Life is a process

Life is a journey, not a destination

Lining up lables

Michelle's picture

One thing I found interesting is they seemed to favor the Drupal approach of labels on top. Personally, I find that a lot harder to read. I read an article a while ago that right aligned lables reduced the amount of eye movement needed and that is why they felt that was better. I themed all the forms on my site and used right aligned labels. I like it much better that way.

Michelle


See my Drupal articles and tutorials or come check out life in the Coulee Region.


My blog, mostly about Drupal: Shell Multimedia

Flexible

elv's picture

Top labels can be considered more flexible, as even very long labels will fit. Another drawback is that it makes for longer pages, which can already be a problem in Drupal.

top or left

gaele's picture

As I read the article top labels are better for filling in a form top to bottom, using all fields, while left aligned labels are better for scanability, i.e. if you don't use all the fields. Which brings us to the question: do people normally use all fields in the edit node form?

(Note: Joomla uses left aligned labels.)

Eye-tracking research on

Bevan's picture

Eye-tracking research on this topic: http://www.uxmatters.com/MT/archives/000107.php

Drupal seems to have this one right. Any variations can be handled at the theme-layer on custom sites.

Interesting

gaele's picture

This eye-tracking stuff is very valuable. The bold labels being slower surprised me.

I would like to see more research, though:

  1. How about forms that only need to be partially filled in? (e.g. title, body, publishing options, submit; skip the rest)
  2. How about experienced users that already know the form by heart?

Regarding 1, I wonder how the location of the "menu settings" - in Drupal 6 between title and body - affects the usability of the node edit form. Will it slow down users?

IMO, putting the menu

Bevan's picture

IMO, putting the menu fieldset in between the title and body is confusing for most (but not all) node types.

Users that know the forms by heart know it so well because they are drupal developers or work with drupal a lot. They might grumble a bit about any change, but will learn the new way quickly. I don't think this should be a major consideration when redesigning for usability in drupal.

The menu settings fieldset

gaele's picture

The menu settings fieldset was moved with very little discussion: http://drupal.org/node/151583#comment-569186

Meh. It makes sense for

Bevan's picture

Meh. It makes sense for page-like nodes, but not story/blog/article-like nodes. And I suspect most node-creation is for the latter type.

I have an issue againt 6.x

catch's picture

I have an issue againt 6.x which deals with one aspect of this - the order of primary and secondary tasks on the node and comments formsform. Often "Preview" comes before Save. Or Save can be in the middle of a group of buttons. This is dealt with in the first linked article.

Standardise 'Save' 'Preview' etc. button placement

Cool! There is a larger

Bevan's picture

Cool!

There is a larger issue around tabs, local tasks, and form-submit buttons though that needs addressing in drupal 7. Basically, drupal needs a better framework to separate page-level navigation elements (like tabs; view all, view drafts, settings, etc), page-level actions, like 'Add a Foo', 'Delete', and content-level actions, like submit/save, preview, etc.

Design and Development of Intranet

musa-gdo's picture

Dear Members,

any one can provide me with more information about the following Items? I am engage in designing and development of our organisation's intranet and system is new to most of our members in the organisations. I need to know more about the issues.The Items are:

Developmental Stages
Structure of Chapter
Developmental Procedure
Research and Information collecting
Planning
Developing a Preliminary Form of the Product
Preliminary field testing
Main product revision
Main field testing
Final product revision
Dissemination and Implementation
Thanks

Musa

Usability

Group organizers

Group categories

UX topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: