[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Large Web Forms

Posted on 2006-11-03
12
Medium Priority
?
231 Views
Last Modified: 2006-11-18
I have a client with a web application that have several LARGE forms. these forms have to be on one page but end up being very very ugly. Does anyone have any recommendation on designing around large web forms? Or any examples they can point me to?

Requirments:
1) must stay visible on one page.
2) Variable width to adjust to the window
3) Every form of input is used, textboxes, textareas, lots of checkboxes, lots of radio buttons, etc. They all must flow as best as it can.

Design and usability is key.

Thanks in advance.
0
Comment
Question by:TonyTone1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
  • +2
12 Comments
 
LVL 5

Expert Comment

by:consulteware
ID: 17869554
0
 

Author Comment

by:TonyTone1
ID: 17869580
I have tried explaining to my client about tabs, but no go :( I guess i'm looking for a method of organizing the form that is visually pleasing, usable and intuitive. while being all on one page.
0
 
LVL 16

Expert Comment

by:manav_mathur
ID: 17869602
I'd say its upto  you and your client, because we havent seen the form. Maybe you could organize the form elements into 2 columns??
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 5

Expert Comment

by:consulteware
ID: 17869603
Did you try one wizard like option, spareted in steps?
0
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 1500 total points
ID: 17869856
Without knowing details, but conforming to the requirements you gave (where I note a "wizard" approach is not an option):

1.  Make good use of the <fieldset> and <legend> tags if you're not already.  This at least groups related chunks together (the oldest Human-Computer Interaction trick in the book).

2.  If possible, use Javascript to hide irrelevant parts of the form as the user begins making selections.  If, for example, I check somewhere a box that indicates I'm a US citizen, hide fields asking for my country of citizenship and passport number.  This may violate the client's "all visible on one page" criterion.

3.  If you have a whole bunch of radio buttons for a single question, perhaps a <select> would be more appropriate.  I read an article this morning, though, noting that <select> fields draw the immediate and prolonged attention of the user (on the scale of milliseconds here), so push <select> elements farther down the page if you can manage it.

4.  If you can't get away with hiding irrelevant content, you may be able to guess perfectly at some things, thus eliminating the need for an extra control.  If I have to fill out one of two sections (maybe to provide either home or business contact information, but not both), there probably doesn't need to be a pair of radio buttons or a <select> box to pick "Home" vs "Business" -- the receiving script can figure it out by which one is filled out.



Generally long forms don't bother me much from a "look and feel" standpoint.  What bugs me is the knowledge that nothing in my browser inherently lets me save my partially completed choices, so a browser crash is deadly.  If there's an option to save and recover where I left off (perhaps using a cookie and anchors throughout the page) I'd be content.


Just a few suggestions off the top of my head.
0
 

Author Comment

by:TonyTone1
ID: 17870025
@manav_mathur
there is already two columns (it's still large vertically and horizontally)

@consulteware
That's already done as well. I'm looking for more advance design tips. like maybe a form you've seen using a unique method of making large forms more usable.
0
 
LVL 5

Expert Comment

by:consulteware
ID: 17870038
Did you try to do a form in Java or ActiveX?
0
 
LVL 16

Expert Comment

by:manav_mathur
ID: 17870062
Then you could see Voteydisciple's post. Excellent idea on hiding parts of form using javascript, although the client may complain that it still is more than one page.
0
 

Author Comment

by:TonyTone1
ID: 17870065
@VoteyDisciple

Fieldset/legend tags are in good use.
The form is so large that it lags hard when options are selected it makes changes to the rest of the form, revealing or removing other options.

3&4 good ideas i will review them further.

I am still however interested in more suggestions.
0
 
LVL 5

Expert Comment

by:consulteware
ID: 17870085
You can use the "AutoPostBack" option if you are programming in ASP.Net, this will allow you to hide or show some options that should not be available to users depending on the options that they choose, can be one sugestion.
0
 
LVL 16

Expert Comment

by:manav_mathur
ID: 17870154
This is really a tough question for us to answer, primarily because the form "look and feel" is not standard, and secondly because we havent ha d alook at your form. If you can post a link, it would receieve better suggestions.
0
 
LVL 15

Expert Comment

by:bpmurray
ID: 17870997
The worst I've seen was a page from a Japanese bank that had literally 100's of fields. However, this truly horrible form was OK for the users, because it was that they knew and were comfortable with. This is crucial to whatever you produce: it must work for the folk who have to use it. While it sounds like you're using "progressive disclosure" already, any large form is going to require oodles of JavaScript to reveal parts of the page that are relevant to the user's requirement.

No, there is no easy answer, and I believe the solutions will only be varying degrees of awkwardness.

Sorry to say it, but rather you than me trying to find a good solution for this one!
0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question