Designing Forms Sign Up Login, Forgot Password, Payment Forms - Algrim.co

Designing Forms Sign Up Login, Forgot Password, Payment Forms - Algrim.co Forms are an essential medium of collecting information. Any human activity that involves the gathering of data, be it for maintaining records, or research, demands the use of forms. They are a necessary form of data collection as they are cost-effective, self-explanatory and efficient at their task. Forms are, however, tedious. No one would waste their time on forms, filling out the details by jumping from field to field. But as an act of necessity, people do it. So, in comparison to other UX aspects, the form design poses a different kind of challenge to the designers. It is hard to consider that a simple layout of labels and text-boxes can affect customer conversions. Moreover, because of the perception that the act of filling forms is a necessary evil, people want reasons to quit interacting with forms. Hence, designers have to be very careful in designing out forms that positively influence the user but also achieve their task of collecting information. For this, designers need to keep check of some design pointers. Form design pointers Before embarking on any design journey, designers need to keep a few things in mind, and they are: • the form should make the process of information collection as short as possible • the form layout should allow easy comprehension of the required information • the form should only request for required user information • the form should ask for information in an orderly fashion All these points act as guidelines for form design with respect to the users’ interests. So, let’s get to know these guidelines a bit better. The short data collection process We are always in a hurry. People would not waste their time on something they are least interested in (filling up forms included). Hence, a form design should be such that it allows for fast data collection. Moreover, a form is the only element that stands in front of the content that piques the users’ interest. However, there's an exception in cases where the user needs to provide sensitive information. Apart from this, forms should not make the process dawdling. Understanding of requested information A form should be clear about its intent in the sense that, it should indicate what kind of information should the user provide to it. A user should know about the information forms are asking for and have an intention for sharing it. It should prompt a user to confirm an agreement for the corresponding use of the recorded information. Request for the required information In addition to being short, a form should also be precise. Precise in the sense that it should only invoke information that holds the highest value. For example, there’s no point enquiring about details like age or gender, where a name and email address would suffice. Incorporating optional elements will only hinder the process and might even affect conversions. Hierarchical information request A form should not ask for random data. Think about it. What if a someone comes to you and asks for your bank account number. Then, he asks your name. Isn’t that odd? Just like real-life, forms have to maintain an order in which they probe for information. So, a form should first ask for name, and then address or other details such as contact information. A form designed around these guidelines will undoubtedly perform better than its other counterparts. There’s a bit more to form design than just these guidelines which we will see next. Elements of form design Designing a form is much more than aggregating a bunch of labels along with text-boxes. There’s some amount of wizardly involved, mainly because of how we as human beings interact and perceive things. There’s: • Structure • Input fields • Labels • Call to Action (or CTA) • Validation of data and process (in the form of feedback or assistance) A form design strategy that involves guidelines along with these elements ensures that the form achieves its objective. Lets take a detailed look at the form design elements. Structure It is the way in which all the parts of the form such as fields, labels, and buttons get placed in relation to each other in the form space. Structure sets the tone of the form. Think of form structure like the order of questions you get asked when introducing yourself. You can say forms are printed versions of conversations bar the feelings. Answer this simple question. What keeps a conversation interesting? The questions and responses? The answer is order and relevancy â€" the order of collecting information and its importance. As stated earlier in the design guidelines, a form should ask for data in chronological order. Just like the way you start the introduction with your name, a form should begin by asking for the name. The order of rest of the details will depend on the purpose of the form. If it is a consultation form, name precedes contact information like e-mail address and phone number. If it is a registration form, name heads the sequence followed by residential address and contact information. Besides, forms should probe selectively for the required user information. Having a user to choose the number of family members would not be a good idea for an e-mail signup form. Keep relevancy to the information required and collected. Also, it’s a good practice to group related information. Segment out and categorize the various user information into groups. For example, personal info would consist of first name, last name and date of birth along with gender; contact information would include address, city, state, PIN code and phone number. Grouping information helps users acknowledge the form better. Last but not least, try to maintain a single column form layout. A single column layout helps for faster comprehension and continuation in the data entry process. Alternatively, multiple column layouts hinder the process by breaking the flow continuity, hence, resulting in an overall slower process. Input Fields Input Fields are the things that enable a user to fill out information in a form. It could be in the form of text-boxes, drop-down lists, checkboxes, or radio buttons. They hold the information provided by the user until it gets saved in the system server. A user has the most interaction with the input fields. Hence, there should be an assurance of a positive experience of users with the input fields to guarantee conversions and future interactions. Forms should have the least number of possible input fields because that would mean less effort from the customers. When involved with large amounts of data collection (let’s say 40 fields), you can segment the fields into groups of 5-6. There’s no need to cramming all fields on a single page. Not only it will reflect bad aesthetics but also overwhelm the users by overloading them with queries. You can make the task of filling forms easier for users by incorporating features like auto-fill, input masks, keyboard input match and auto-focus. Auto-fill helps make predictive guesses to user input, thus, saving the user from the whole input hassles. Input-masks and keyboard input matches are about aiding the data input process. nput masks are pre-defined input formats for specific fields. Examples would be the addition of hyphens between numbers when entering credit card information, or commas for currency inputs. Auto-focus gives a head start to the user by notifying and marking out the starting point for information input. The best example is the Amazon sign-in page. Upon loading, the page highlights the e-mail input field with a blinking cursor inside. Additionally, designers should indicate the optional and compulsory fields, in case they have incorporated optional fields. Labels Labels are the bit of text that goes with an input field and tells about the kind of information required in the input field. Labels and fields together work for gathering data. Labels are just meant to signify the type of data input. But this should be done subtly. Avoid long texts. The message should be short but descriptive and precise about what it expects from the user. Apart from indicating fields, there’s also some science involved with label alignment. An article by Matteo Penzo on label placement reveals that top-aligned labels make for faster form processing. That’s because top-aligned labels would go with various field sizes while maintaining a uniform single column layout. Alternatively, left-aligned labels summon slow process times as the user has to focus on a larger space, going in a zig-zag pattern. But it has its forte when working with sensitive user information by slowing down the users to ensure they provide data correctly. Then there are placeholder texts. These texts act as additional guides for data entry which disappear when a user inputs any information into the field. Call to Action (CTA) Call to Action is in the form of buttons. It helps achieve the objective of form fill up, like a ‘submit’ button for submitting details, or ‘sign up’ button for registering. With regards to design, there should be a clear differentiation between button functions. For example, if you design a sign-up form with identical buttons for ‘submit’ and ‘cancel,’ it is bound to create some confusion in users. Thus, the chances of users mistakes loom high and even worse, a failed conversion. Therefore, it is essential that the call-to-action buttons not only differ in their functions but also in their appearance to draw out a clear divergence between the button functions. Also, make buttons look like buttons. While retaining their different purposes, the buttons should visually look like the function as a button. Even button locations and their names dictate how good they are at their job. A wrongly or misplaced button has the potential of causing unwanted users errors and affecting the user experience. Alternatively, a button should be named after the purpose they serve. A ‘Submit’ button won’t suffice. If creating an account, the end C2A button should say ‘Create Account.’ Validation of data Forms are meant for collecting ‘right’ information. With collecting data, forms should also be able to identify errors in the user inputs and notify the user of the same. There are several ways to this notification system like validating input with each keystroke or data entry. However, the most efficient and non-intrusive method would be to verify data after entry if the field was previously in a valid state else, if the input is in an invalid format, it should be validated during the entry. Use of forms Forms find their application in various instances, like in sign up or login pages or even checkouts. Let’s focus on some of their implementations. Logins Login pages are the first step to initializing customer conversions. In the case of apps, login pages are the first thing the user encounter once they open an app. Its design will give an initial impression of the digital product to the user. Hence, it is vital that login pages are simple and effective. The primary function of a login page is to get user onboard with the help of forms. This process needs to be done with no fuss or lag. So, as stated earlier, forms should be to the point. Meaning, it should only ask for the necessary information like username, e-mail address or phone number along with the password. Sign up processes are more complicated than logins. That’s because, in addition to providing information, users have to do an additional task of confirming the account. E-mail confirmations were excellent at some point in time, but now we are surrounded by better options in the form of voice calls, SMS, or any other chat app. So, designers need to provide multiple ways of account confirmation that could be used based on circumstances. Providing multiple login options is something that has become a norm, especially with the rise of social media houses like Facebook. And add to the fact that people are forgetful of things in this busy life, providing an option to use your Facebook or Google account to log in isn’t a bad idea. The users will appreciate it. But make sure you don’t bombard them with six or seven options. Just two or three options will do fine. Additionally, you could also provide an e-mail login which is considered a much safer alternative. Another reason to not provide multiple login options apart from overwhelming users is limited screen space, especially in mobile phones. The limited screen space won’t make for a good canvas when you try to push these elements, suffocating the user experience. Password resetting feature. Streamlining the login design and process is good, but you should also put some focus on scenarios like when the user forgets their password. People appreciate you more if you help them in their troubles. So, designers are expected to deliver a system that allows for hassle-free resetting of the password by the user at any time. Payment forms & e-commerce cart checkouts Forms are involved whenever you buy goods online. For customers, their sole focus is on completion of the buying process. Hence, businesses have to ensure that this process is not disturbed as optimized to be as smooth as possible. The user journey when buying goods should not be demanding; else there’s a risk of losing the customer. Guest checkout provides the best of both worlds, assuring customers of smooth transaction and companies of making sales. Following are some of the benefits of guest checkout: • Low site abandonment rates • Straightforward for mobile users • Customers directed straight to payment forms • Pretention of checkout having less work • Provision of option for registration Users sometimes will leave a site if they have to create an account. Guest checkout addresses this issue. Also, it is a breeze for mobile users to shop online as they do not have to run through the tedious steps of logging in or registering an account. Guest checkouts take customers to the forefront of business by directing them to the payment page. Hence, it is a win-win for both, the customer and the company. Added to that there’s the perception of guest checkout involving fewer steps. There is some scope for user conversion as guest checkouts do provide an option for registration. Apart from the account creation, there are other reasons that make a customer ditch a site. One of them is lack of payment options. Companies are trying to incorporate these two elements together. Companies like Lego provide three options â€" guest checkout, login, and register after confirming the shopping cart. Alternatively, Nike and Lowe’s offer an additional form of checkout via PayPal or Visa. You can refer to this article by Graham Charlton for more examples. Innovations I emphasized a bit earlier in this article about forms being a conversation. Well, there has been some development of this front. Conversational Form is an open-source project based on a chat-bot interaction which turns forms on a web page into a conversational interface. The article reflects how forms are more than a congregate of labels and fields along with buttons, intended for data collection. It sheds some light on what goes into the form design and how they can be designed to suit scenarios like logins or checkouts.