As a UX Designer, following the UX process is paramount for completing a successful project. An agile, iterative process is the best way to go about the project with cross-functional teams to collaborate on ideas to design a fully-functional digital user interface.

39 Tips on Creating User Friendly Forms

As a UX Designer, I find it useful to communicate these guidelines to program managers and other developers so that any critique I give has a set of design rules that are accepted as common design goals. The list of guidelines to follow when creating an online forms are suggestions to give the developers, and for them to keep in mind when creating the back-end development of the forms. I also included references from usability.gov site because these are also guidelines on site development on how to improve User Experience for User Interfaces.

39 Guidelines for UX Designers and Developers

Presenting and completing the Form (Part One):

Design for common browsers – Make sure the form is compatible on all browsers such as: Google Chrome, Safari, Firefox, older browsers, etc.
Make sure the form is responsive for multiple devices – Forms should be responsive across multiple devices and forms should be tested across many devices.
Avoid horizontal scrolling - Horizontal scrolling is a tedious and slow way to view the form. (Referenced from the usability.gov site)
The process on how the user will be able to log into the form, if
it's secure or not – Security is important when dealing with HIPAA and users privacy, compliance information.
Label push button clearly – Make sure the user can read each button legibly and there’s a contextual understanding to each button.
Put labels close to data entry fields – When designing a form grouping and aligning elements of the forms is great for creating an easy form that flows well.
Use radio button for mutually exclusive selections – Since radio button are “mutually exclusive, they should have a default value selected”.
Use familiar widgets – It will slow users down if using unfamiliar widgets and cause users not to use the widgets. (Referenced from usability.gov)
Use checkboxes to enable one or multiple selections from a list of choices – Checkboxes elicits the fastest performances. (Referenced from usability.gov)
Make sure there are Help Texts – Help text will help the users complete the form accurately.
Display default values – Use default values to help users to select example options and it’s better to use default values then error messages.
Provide auto-tabbing functionality – auto tabbing can reduce data entry times. (Referenced from usability.gov)
Minimize use of shift key – Shift key uses extra attention and time so it’s not necessary. (Referenced from usability.gov)
Define acronyms and abbreviations – It is good to define acronyms and abbreviations first, (if you can’t) have a site, which defines the terms.
When the system should be available - such as providing times of help hotlines or forms that need to be filled out at certain dates or times.
W3C Web Accessibility Initiative – helping people with disabilities to participate equally on the web.
What language used – Determine which World language is used for the form (or currency stated)
Line items must fit legibly in a table – If there are tables within the form make sure the text is legible and fits in each field correctly.
There are back, next and cancel buttons - cancel asks to exit form,
online form auto saves changes/updates to form. Back goes back a step.
Next goes to the next step if completed first step or user gets an
error message.
Contains: help and FAQ (link) – Incase a user needs help with a glossary to define terms in a form, or frequently asked questions about a form, or an open chat room to help someone fill-out a form, help and FAQ are great links/resources to have on every site. (Referenced from the usability.gov site)
Each step of the online form needs to be highlighted - when the user
is on the page and it shows specifically what page they are on also
using breadcrumbs or a navigation tool. Breadcrumbs show the history of the links the user navigates through. This help the users navigate easily through each step of the form.
Time Out Warnings – A user needs to know if the form will time out when they are not active on the form. This is a source of user frustration and often cited as a reason for user failure.
Avoid scroll stoppers –It’s “a graphic or other page element that may visually impede a user from scrolling to the true top or bottom of a page. Misplaced headers, horizontal lines, or sections of text in very small fonts may act as scroll stoppers.” (Referenced from the usability.gov site)
Distinguish required and optional data entry fields – A simple red asterisk and text communicating to the user required fields.
Ensure that double-clicking will not cause problems – A common source of frustration is to cause the user to accidentally leave the page.
Needs error message (how to fix/recover errors) - easy to fix and
understand alerts, error hints, info, highlights, prompts, and
messages.
User can attach all required documents – It is beneficial for users to have to option to attach all required documents to a form.
Limiting text field characters and validate how many are left when typing – The designer and developer should inform the user on how many characters are left when typing in a text field.
Fast pace (already existing data auto-populate) into the form elements – This speeds up the process of filling out a form.
Contains hints (?) - in circles for defining terms when needed
Inline Validation - confirmation of valid answers after providing
an answer, suggestions - a large of answers to pick from, quality
indicator to guide people to answer hard questions.

Look for next blog for more guidelines - Part two - After Filling Out the Form

Sources

I read two books and analyzed the methodology on creating user-friendly online forms (webforms) from, "Forms that Work: Designing Web Forms for Usability (Interactive Technologies)" by Caroline Jarrett and Gerry Gaffney and "Web Form Design" by Luke Wroblewski.

The book, "Forms that Work: Designing Web Forms for Usability talks about the process on how to create good forms in an easy to read format. The kinds of forms mentioned in the book are for registration, communicating, commerce, and for the government. The authors explain “how to deal with instructions, progress indicators, and errors”. There are great examples of form making in the book. It also gives tips to make sure the forms contain accurate data for the users and suggestions on how to user test the forms. This is a great book to read, and I used this book to help create my form making guidelines.

The author, Luke Wroblewski, of the book, "Web Form Design" has worked with many big name clients, such as Yahoo! and eBay. He gives great advice on how to make effective and engaging web forms. He goes over the details of form structure, form elements, and form interaction. This is also a fantastic book on how to make user-friendly forms and I also used this book in collaboration with the other book to create the guidelines below.

Usability.gov

I’d like to thank Jessica Enders Principal of Formulate Information Design, a leading - expert of fixing webforms. She had emailed me a suggestion to find these two wonderful books with her suggestions to include them to improve my process.