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
Interesting articles.
Michelle
See my Drupal articles and tutorials or come check out life in the Coulee Region.
Wonderful resources
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
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.
Flexible
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
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
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.
Bevan/
Interesting
This eye-tracking stuff is very valuable. The bold labels being slower surprised me.
I would like to see more research, though:
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
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.
Bevan/
The menu settings fieldset
The menu settings fieldset was moved with very little discussion: http://drupal.org/node/151583#comment-569186
Meh. It makes sense for
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.
Bevan/
I have an issue againt 6.x
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
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.
Bevan/
Design and Development of Intranet
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