Form Nightmare

So what went wrong with the form? Here are few questions to consider (answer these in your PE 4 submission).

1. How should you request information like names, dates, phone numbers, etc.?
2. What is gained by restricting or validating user input in a field? What is lost?
3. How do different types of form elements limit the type of information they can solicit?

Usability

In addition to web usability standards, forms should be easy enough to navigate with both a mouse or phone/tablet. Consider the following radio button:

Windows 7

You have to click the radio button input area, which is very small (only 13px x 13px). However, if you wrap the input element with the label element, you can click on the label or button to select that option:

Windows 7

You can also increase the area and define it with a border:

Windows 7


Mac OSX


Linux/Ubuntu

On drop down items, remember to limit choices and list them in a logical order. Don't create seemingly random long lists that users must pick through:

Choose your stop: Select 4900 S State 5000 S State 5200 S State 6200 S State 8237 S State Navy Pier Terminal State & 11th Street State & 13th Street State & 14th Place State & 14th Street State & 16th Street State & 18th Street State & 23rd Street State & 24th Street State & 26th Street State & 27th Street State & 28th Street State & 29th Street State & 30th Street State & 31st Street State & 32nd Street State & 33rd Street State & 34th Street State & 35th Street State & 36th Street State & 37th Street State & 38th Street State & 40th Street State & 41st Street State & 42nd Street State & 43rd Street State & 44th Street State & 45th Street State & 46th Street State & 47th Street State & 48th Street State & 51st Street State & 53rd Street State & 54th Street State & 56th Street State & 57th Street State & 58th Street State & 59th Street State & 60th Street State & 61st Street State & 63rd Street State & 64th Street State & 65th Street State & 66th Street State & 68th Street State & 69th Street State & 70th Street State & 71st Street State & 72nd Street State & 73rd Street State & 75th Street State & 76th Street State & 77th Street State & 78th Street State & 79th Street State & 80th Street State & 81st Street State & 82nd Street State & 83rd Street State & 84th Street State & 85th Street State & 86th Street State & 87th Street State & 88th Street State & 89th Street State & 90th Street State & 91st Street State & 92nd Street State & 93rd Street State & 94th Street State & 94th Street State & 9th Street State & Adams State & Balbo State & Cermak State & Cullerton State & E. Wacker State & Garfield State & Garfield State & Harrison/Ida B Wells Drive State & Kinzie State & Lake State & Madison State & Marquette Rd State & Pershing State & Randolph State & Roosevelt State & Van Buren