AlexAitken.net

Al­most all ap­plicatons we in­ter­act with on the web are form driv­en. User-sup­plied data in; sys­tem con­clu­sion out. To be sure, a dec­ade plus of ex­per­i­en­ce and in­nov­a­tion has seen UX im­prove by leaps and bounds. But we’re still build­ing forms, and to that end I al­ways en­joy re-vis­it­ing the ba­sic ques­tion of how to build them well. Here’s the es­sence of a re­cent stab.

Re­quire­ment

A con­fer­ence re­gis­tra­tion form to be used by ad­mins from at­tend­ing schools to sub­mit school info, names and de­tails for event at­tendees, and at­tendee ‘Pre-Con­fer­ence’ and ‘In­sti­tute’ choices for each of the con­fer­ence’s three days. Form sub­mit­tal de­liv­ers an email re­ceipt to the ad­min as well as the con­fer­ence or­gan­izers.

Chal­lenges

1. In­form­a­tion There was a lot. From form sub­mit­ters we re­quired school info, point of con­tact info, at­tendees’ de­tails and con­tact info, and at­tendees’ choices for each of the three days. We also needed to give a de­tailed break­down of the choices along with cost in­form­a­tion.
2. Ac­cu­mu­la­tion The form needed to ac­com­mod­ate mul­tiple at­tendees from a school, and track each at­tendee’s choices for each day of the con­fer­ence.
3. De­pend­ency While at­tendees would be able to choose only a single Pre-Con­fer­ence or In­sti­tute for each of the first two days of the event, it would be pos­sible to choose two In­sti­tutes for the third day. Pos­sib­il­it­ies for a second would de­pend on the choice made for the first.
4. Cal­cu­la­tion Cost de­term­in­ants in­clude a school’s ‘mem­ber’ status, the num­ber of at­tendees it sends, wheth­er its at­tendees are also ‘presenters,’ and which ses­sions its at­tendees re­gister for. Each of these vari­ables needed to be tracked so that be­fore form sub­mis­sion we can present sum­mary info in­clud­ing total cost.
5. Val­id­a­tion …as al­ways.

Solu­tions

1. Wiz­ard & Se­greg­a­tion Chunking long forms in to steps with wiz­ards is a tried and true ap­proach that works well here. And rather than blur the line between in­form­a­tion we are re­quest­ing and in­form­a­tion we are de­liv­er­ing, we sharpen it with two dis­tinct views (‘Con­fer­ence Re­gis­tra­tion’ and ‘Con­fer­ence & Re­gis­tra­tion De­tails’).
2. Ad­apt­ab­il­ity We handle mul­tiple at­tendees as they come, with a tabled lay­out. After an at­tendee has been entered with re­quired info, we let the form user ‘Add Next At­tendee’ by ap­pend­ing a new row to the ta­ble. With this ap­proach we al­low for an un­lim­ited num­ber of at­tendees but nev­er present more fields than are re­quired. In the single-page form, at­tendee ses­sion choices are re­cor­ded in a second ta­ble that synchs to the first.
3. Cus­tom Con­trols Ba­sic­ally we want drop­downs with Pre-Con­fer­ence/In­sti­tute op­tions for each of the three days… ex­cept that for the last day, mul­tiple se­lec­tions may be val­id. Here, a cus­tom con­trol emu­lates the stand­ard drop­down but ties lo­gic to each se­lec­tion/un-se­lec­tion so that the user can nev­er make an in­val­id se­lec­tion. For visu­al con­sist­ency and great­er flex­ib­il­ity, we use a vari­ation of this con­trol for the first two days also.
4. JavaS­cript The lan­guage has al­ways been great for cli­ent-side cal­cu­lat­ors. It still is.
5. Min­im­al, Some­times Live Feed­back We de­cided that val­id emails were im­port­ant and that bey­ond that, we simply wanted to en­force com­ple­tion of re­quired fields. This stripped down set of re­quire­ments meant we could de­liv­er a single, stand­ard mes­sage for all er­ror scen­ari­os. When an er­ror mes­sage dis­plays, val­id­a­tion switches to a ‘live’ mode that re­moves er­ror in­dic­at­ors as source data is cor­rec­ted.

Clos­ing Notes

Some as­pects of the design get a little bit cheated when presen­ted in the iframe pulled up by the demo but­ton above. For IE, we de­cided on re­quir­ing users to use an­oth­er browser or else to in­stall Google Chrome Frame. While Chrome Frame de­tec­tion works from with­in the iframe, Chrome Frame itself ap­par­ently does not.

ajax, demo, forms, JavaScript, minimalism, UX