Between Two Form Tags
2 likes735 views
The document discusses best practices and key considerations for form design, including field size, layout, error handling, and accessibility. It raises various questions that designers should consider, such as the placement of labels, button functionality, and the use of visual hierarchy. The emphasis is on creating user-friendly forms that balance functionality with a clear and efficient user experience.
Between Two Form Tags
- 2. @dgcooley What forms questions do you get? 1.Β Size and shape of theΒ formΒ dialog/page. 2.Β Size of multi-line text fields 3.Β Conditionally required fields (a tough issue) 4.Β Required field indicator 5.Β Size of field 6.Β Error correction (sometimes as you exit a field, sometimes not until you finish aΒ formΒ if you are doing high-frequencyΒ forminput) 7.Β Workflow in theΒ form 8.Β Use of acronyms and abbreviations. 9.Β Location of labels 10.Β Spacing between labels and controls 11.Β Spacing between different items. 12.Β Translation/text expansion (no, the rule is not to allow for 100% more space) 13.Β Allowed formats in field 14.Β Hints and where to put them 15. Dealing with accented characters 16. Keyboard shortcuts inside aΒ form 17. Tab order 18.Β Accessibility ofΒ forms 19. Density of theΒ formΒ (you might or might not want a lot of white space) 20. Designing for the one-shotΒ formΒ versus designing for aΒ formΒ where someone is entering data many times a day. 21. Should every text field be a different size? Β (No). 22.Β Should every textΒ formΒ be the same size (No). 23.Β What are some "rules of thumb" for sizing text fields 24.Β Do you use a colon after a label? 25.Β What buttons do you use? 26.Β Where do you put the buttons (depends on de facto standards AND workflow). 27.Β How do you decide the order of fields? 28.Β How do you choose the right control for choosing a value (e.g., radio button versus drop-down list)? 29.Β What rules do you follow in ordering menus in dorms? 30.Β When do you use tabs inΒ forms? 31.Β How do you display long lists inΒ forms? 32. How do you provide user assistance at the control andΒ formΒ level? 33. What does it mean to design yourΒ formΒ for evolvability 34.Β When do you choose dynamic versus static controls (list box versus radio buttons) 35.Β What are the common errors associated with fields in aΒ formΒ or dialog. 36.Β What does consistency mean when applied toΒ formsΒ (layout, control consistency, etc.)? 37. What are the guidelines for spacing between buttons (e.g., if you have Β a DELETE FOREVER button, you may not want to have it 10 pixels from the SAVE button). 38.Β How will you deal with Hebrew , Chinese, and ArabicΒ forms? 39.Β How can you apply Gestalt principles (proximity, closure, figure-ground) toΒ formΒ design? 40.Β What capitalization style do you use for labels and text? 41.Β How do you indicate that a button is immediate action versus one that generates a sub-formΒ of sub-dialog. 42.Β When do you use an Apply button? 43.Β When do you save data in aΒ formΒ (as you go or when you click OK, Submit, Apply....)? 44.Β What techniques can you use to indicate whether you have a workflow that aids the user? 45.Β How do scanning order and hierarchy act in yourΒ form? 46.Β How do eye scanning patterns (e.g., Gutenberg diagram/F-Pattern ) affect the design of yourΒ form? 47.Β What kind of grid layout would be must useful for yourΒ form? 48.Β Why is microlayout important forΒ formΒ design? 49.Β Can you input and navigate with voice input systems (e.g., Dragon NS) 50. What kind of feedback do you provide to let the user know that he/she is successful at the item and theΒ formΒ level? 51. How do you expose dependency in aΒ form? 52. What color principles should you consider when designing aΒ form? 53. How do you assess the relative complexity of aΒ form? 54. How do "balance" and "symmetry" play together inΒ formΒ design? 55.Β In designing aΒ form, what constitutes "noise" and what constitutes "signal" (e.g., avoid extraneous lines, multiple fonts, etc.). 56. What are the general rules of "grouping"? 57. How can you use the principles of "abstraction" inΒ form/dialog design? 58.Β Should you concatenate fields so entry fields/control items read like sentences (could be bad for translation). 59.Β How flexible should input fields be? 60. How wide should common fields like Email be? 61. What is the best way to align radio buttons? 62. Do you provide a progress indicator for longΒ forms? 63.Β Language consistency (e.g., Β don't say "Fill Pattern" in once place and "Pattern" in another when those refer to the same thing. 64. Remove words that don't add any value in labels and text). Β
- 3. @dgcooley WHAT IF MY FORM IS REALLY LONG?
- 4. @dgcooley 2-columns arenβt usually the way to go. h"p://baymard.com/blog/avoid-Ββmul5-Ββcolumn-Ββforms Β Β
- 5. @dgcooley Paging vs. Scrolling β it depends. β’β― How often do users fill out this form? β’β― Do they need to save for later? β’β― Information chunking is important regardless. β’β― Progressive disclosure is also an option.
- 6. @dgcooley Progress indicators are critical when paging.
- 7. @dgcooley SHOULD I AUTO-ADVANCE BETWEEN FIELDS?
- 9. @dgcooley Not even for phone numbers.
- 11. @dgcooley What about submission buttons? β’β― There is no data on button -order-. β’β― Primary actions should be more prominent than secondary actions. β’β― Labels should be SPECIFIC. Go to Step 3 Cancel Β Submit Cancel
- 12. @dgcooley WHERE SHOULD MY ACTION BUTTONS BE?
- 13. @dgcooley Align your buttons to where your userβs visual path ends.
- 14. @dgcooley WHERE SHOULD I PUT FIELD LABELS?
- 15. @dgcooley β’β― DO NOT put them inside the fields β’β― DO make sure the label is next to the thing it is labeling. β’β― Above fields is typically best. h"p://www.uxma"ers.com/mt/archives/2006/07/label-Ββplacement-Ββin-Ββforms.php Β Image Β from Β Luke Β Wroblewskiβs Β Web Β Form Β Design. Β
- 17. @dgcooley Why are you asking a question if you donβt need the answer?
- 20. @dgcooley The Most Important Questions For EACH form question: β’β― Who in the org uses this answer? β’β― What do they use it for? β’β― Is the answer required or optional? ββ―If required, what happens to bogus answers? h"p://www.uxma"ers.com/mt/archives/2010/06/the-Ββques5on-Ββprotocol-Ββhow-Ββto-Ββmake-Ββsure-Ββevery-Ββform-Ββο¬eld-Ββis-Ββnecessary.php Β
- 21. @dgcooley Books!
Editor's Notes
- #5: When you use a two-column layout for form fields, you introduce the possibility of different interpretations. Are they related? Should I only fill out one column? Or both? Is there a certain sequence to the fields? You also introduce complexity in the realms of accessibility, keyboard support, and responsive design. Better to just avoid it, except in the VERY rare circumstance in which you are designing for a very specific subset of fully abled users for whom you have 100% control over their technical environment (screen size, screen resolution, operating system, browser version, etc.).
- #6: Depending on what form is being designed for what people and for what purpose, paging or scrolling (or progressive disclosure) may be more appropriate. If users fill out a form frequently, they probably prefer a single, longer form. If they rarely fill out the form, breaking it up into pages is probably more appropriate. Also, if the requirements of the form change dramatically based on what the user enters in the beginning (e.g., someone setting up a trust account at a brokerage firm), pagination will likely be beneficial. (Yes, you can do this with progressive disclosure and conditional fields, but in the example above, youβd have a full page worth of fields β or more - that would need to be displayed or not.) Regardless of whether you choose paging or scrolling, if you have a long form, itβs beneficial to chunk the form into meaningful sections, either just visually or in an accordion-like setup.
- #7: If you do choose paging, itβs critical to let your users know WHERE they are in the process. (We call this βgrounding,β and itβs true for any kind of navigation.) You must also let them know how much they have left to do. This is particularly important if they are required to complete the form in a single sitting.
- #9: Generally speaking, auto-advancing is not expected and makes both data entry and error recovery more difficult. An exception would be for expert users who access a specific system with incredible frequency (e.g., tax preparers, call center representatives), in which case auto-advancing can increase efficiency.
- #10: The best approach for user experience is to let the user type in the phone number using the format they are most comfortable with. Don't break it into separate fields, don't force a mask, let it be typed freeform. Then, after the user has finished entering the field (by leaving the field for submitting the data), format the number into a standard format for your purposes. (http://ux.stackexchange.com/questions/5675/friendly-format-for-phone-numbers)