{"id":1433,"date":"2015-03-26T15:51:46","date_gmt":"2015-03-26T15:51:46","guid":{"rendered":"http:\/\/projectsimply.com\/?p=1433"},"modified":"2015-04-20T15:56:22","modified_gmt":"2015-04-20T15:56:22","slug":"rethinking-form-design-for-the-user","status":"publish","type":"post","link":"https:\/\/projectsimply.com\/rethinking-form-design-for-the-user\/","title":{"rendered":"Rethinking form design for the user"},"content":{"rendered":"<p>All too often we see websites in which it appears that the design of a form was an afterthought. We see forms which are visually confusing, inaccessible and even downright unusable. A form is often the first point of contact for a user to interact with your business or brand &#8211; so why would we want to put obstacles in the way of something this important? How many times has your form unwittingly become a barrier to what could have been your next big sale? These questions and more, we needed to explore.<\/p>\n<p>I should start by saying that we, as an agency, endeavour to be the best at what we do and quite often this leads us to challenge the accepted norms. We feel this sets us apart from the others &#8211; those who think as design as purely a commodity; something to be sold time and again without thinking about the consequences for its client and end users.<\/p>\n<p>Times change, the internet evolves &#8211; and with it, the way that people use websites has evolved. Knowing this is key to understanding how people use and interact with elements of a website.<\/p>\n<p>We wanted to re-think the way in which forms would be used and to create a standardised form design which we could use on future projects. As an agency which focuses heavily on design, we know that great design should focus on experience, but balance creativity.<\/p>\n<p>With this in mind we needed to design a form experience which was:<\/p>\n<ul>\n<li>Usable<\/li>\n<li>Accessible<\/li>\n<li>Visually appealing<\/li>\n<li>Flexible<\/li>\n<\/ul>\n<p>We discussed what best practices we knew to be true, what information needed to be captured on the form and what the user needed to see to understand and complete the form correctly.<\/p>\n<p>Using our combined experience, tried &amp; tested methods and common sense &#8211; this was our process.<\/p>\n<h2>A basic approach<\/h2>\n<p>Starting with pencil and paper, we went back to basics and began by thinking about what a form was at a very high level.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1302\" src=\"http:\/\/projectsimply.com\/assets\/form-sketch.png\" alt=\"form-sketch\" width=\"870\" height=\"370\" \/><\/p>\n<p>Looking at the basic form field types, we looked at how we could apply a set of basic rules to these to create foundation &amp; consistency.<\/p>\n<p>How would the form elements look? Could we use colour coding to denote clarity and consistency? Would validation messages instantly convey understanding? Would the validation work the same across all the field types? How would accessibility concerns be addressed?<\/p>\n<p>These are some of the questions we needed to address to be confident we were doing what was best for the user.<\/p>\n<p>&nbsp;<\/p>\n<h2>Be clear<\/h2>\n<p>Thinking firstly about the layout of the form, we sketched a basic form structure. Knowing that users initially scan a web page with their eyes before making any kind of decision, we knew that keeping the form as linear as possible was common-sense and so we tweaked the form layout to reflect this.<\/p>\n<p>The reasoning behind this is so that the user has a clear goal &#8211; they can scroll down the form and know what they must do in order to get from A to B.<\/p>\n<p><a href=\"http:\/\/projectsimply.com\/assets\/linear-form.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1326\" src=\"http:\/\/projectsimply.com\/assets\/linear-form.jpg\" alt=\"linear-form\" width=\"870\" height=\"370\" \/><\/a><\/p>\n<p>We knew that having the user look vertically would keep the correct momentum &#8211; giving a sense of progression, whereas too many columns of fields would have the user looking horizontally (perhaps numerous times) &#8211; this would work the users eyes too much, potentially giving the user a sense of confusion and a lack of progress.<\/p>\n<p>However, we also knew that sometimes this could not be avoided and so we relied on Form Grouping to help with this (see \u2018Keeping it interesting\u2019).<\/p>\n<h2>Keep things succinct<\/h2>\n<p>Knowing that people initially scan and not read a web page, we also know that &#8216;the longer the sentence the greater the strain&#8217; &#8211; thus, if a sentence of text is too wide, the user will struggle to reach the end of that sentence and may even lose their place.<\/p>\n<p>Whereas if your text sentence is too short, your user will find their eyes moving from left to right too much trying to keep up, making the reader work harder than is necessary, thus breaking their flow. It is estimated that most users will only read around 25% of on-page content.<\/p>\n<p>It is, therefore, important get your point across as quickly as possible. Again, this is even more critical if your page is conversion led.<\/p>\n<p>We decided to apply this rule to form field widths. Where we only have 1 column of form fields, we would also make sure that the form fields were not the full width of the page \/ container &#8211; as this can not only look terrible and but would not be good for usability.<\/p>\n<p>Who wants to deal with a select field that is 1000px wide? Think about all that wasted space inside the element. That being said, there is a balance to be made when you have lots of space and only a small form &#8211; but that is an inherent challenge of design (and what keeps design so fascinating).<\/p>\n<h2>Keeping it interesting<\/h2>\n<p>Just as we wanted to reduce the complexity of the form and keep the users eyes motivated, we also needed to consider the overall length of the form. By this, I mean the number of fields the user will need to complete before being able to submit the form successfully.<\/p>\n<p>Common sense dictates that if the user becomes bored, their concentration will drift &#8211; this is true for forms. If the user lands on a page and scans down the page to find a very long form, this has shown to put some people off immediately. Again, if your form is conversion-led, then this could have dire consequences for your on-page goals and ultimately your service or product.<\/p>\n<p>Thus, we needed to keep the form length to a minimum. For those forms that need to be field-heavy or for those users that dare tackle such a form behemoth, there are certain design techniques we can leverage to make our form more usable and less daunting, these are:<\/p>\n<h3>Signposting<\/h3>\n<p>This technique is a way of giving feedback to a user about which stage they are currently at within the form process. This is often used on forms with multiple steps (such as multi-page forms) and is a great way of showing the user where they are and how far they have yet to go.<\/p>\n<p>See below for an example of this type of technique.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1304\" src=\"http:\/\/projectsimply.com\/assets\/signposting1.jpg\" alt=\"signposting\" width=\"870\" height=\"370\" \/><\/p>\n<h3>Form Grouping<\/h3>\n<p>Whilst signposting can be a clear indication to the user about where they currently stand, there is another powerful technique known as Form Grouping. This technique leverages the &#8216;Gestalt laws of form perception&#8217; and more specifically the &#8216;law of proximity&#8217;.<\/p>\n<p>This law posits that when we perceive a collection of objects, we will see objects close to each other as forming a group. What this essentially means for our form is that by placing form fields into groups (based on similarity) we can essentially indicate which fields are related &#8211; thus providing the user with a clearer view.<\/p>\n<p>HTML already provides a semantic structure for this called a &#8216;Fieldset&#8217; &#8211; this is used to visually (and semantically) group related elements within a form, so from a design perspective it made complete sense to leverage this on the visual side too.<\/p>\n<p>We can further improve upon this by adding visual cues to the form groupings. These visual cues can include group headings &#8211; something as simple as \u2018Personal Details\u2019 or \u2018Employment History\u2019 &#8211; therefore adding a title to describe what information is expected from the grouped fields. By adding a border around these groupings, we can further remove any doubt of which fields are related.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1305\" src=\"http:\/\/projectsimply.com\/assets\/grouping.jpg\" alt=\"grouping\" width=\"870\" height=\"370\" \/><\/p>\n<h3>Multistage forms<\/h3>\n<p>Splitting a form across multiple stages can have its advantages and disadvantages, and can ultimately help guide the user through an otherwise lengthy or complex form. There are 2 main ways a multistage form can work; on the same page and across multiple pages.<\/p>\n<p>Again, there are arguments for and against either of these options &#8211; we\u2019re not going to go into this in this article because it is outside the scope of what we are trying to do.<\/p>\n<h2>The design<\/h2>\n<p>Once we had considered our form\u2019s layout we then moved onto the visual design of it\u2019s elements. We weren\u2019t so much concerned with the exact styling of the elements, rather the design &amp; placement of the user feedback and validation in relation to the form fields.<\/p>\n<p>Because we were designing a form which could be re-used and form the basis of future forms, we needed to keep the exact styling to a minimum &#8211; this being left to the per-project design and branding stipulations further down the line.<\/p>\n<h2>Staying focused<\/h2>\n<p>We opted to add a pleasant border-radius to the inputs, then added a 2 pixel grey border. The text label &amp; placeholder colour was matched to the same colour as the 2 pixel border, this then set our default state for our input style.<\/p>\n<p>It was imperative that we provided clear feedback to the user and so we looked carefully at the styling of various input states. We designed for the following:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1306\" src=\"http:\/\/projectsimply.com\/assets\/states.jpg\" alt=\"states\" width=\"870\" height=\"195\" \/><\/p>\n<p>As you can see, we utilised colour coding and a change in border width to show a change in field states. Further consideration was given to designing for the visually impaired &#8211; see the \u2018Making it accessible\u2019 section for how we tackled this.<\/p>\n<h2>A valid argument<\/h2>\n<p>Validation is a cornerstone of form design &#8211; without it you risk confusing the user. Some simple visual feedback to the user shows when something isn\u2019t valid and is the difference between a user happily submitting a form and giving up because they simply can\u2019t figure out where they have gone wrong. Remember; don\u2019t just show the user where the issue is, you also need to tell them what the issue is.<\/p>\n<p>We came up with the following:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1307\" src=\"http:\/\/projectsimply.com\/assets\/incorrect.jpg\" alt=\"incorrect\" width=\"870\" height=\"195\" \/><\/p>\n<h2>Thinking outside the box<\/h2>\n<p>People tend to think of forms as an arrangement of text and boxes, whereas a form could be anything. The whole point of a form is to capture information from the user &#8211; so shouldn\u2019t this be the ultimate goal? I mean, this is obvious &#8211; isn\u2019t it? Sure, but sometimes something so obvious can become secondary to a maverick idea, poorly executed creative or just simply a CBA (Can\u2019t Be Arsed) attitude.<\/p>\n<p>Forms are not just great at giving the user a chance to provide some details about themselves &#8211; they are also a fantastic tool for letting the user make a choice. Multiple choice questions are a great example of this and are typically represented by a series of radio buttons or checkboxes. Is there anything we could do with our form to make this choice more usable? We designed a great alternative:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1308\" src=\"http:\/\/projectsimply.com\/assets\/beef-stew.jpg\" alt=\"beef-stew\" width=\"491\" height=\"186\" \/><\/p>\n<h2>An alternative approach<\/h2>\n<p>Another great alternative to the standard form we all know and love\u00a0is what codrops (<span style=\"color: #eb7973;\"><a style=\"color: #eb7973;\" href=\"http:\/\/tympanus.net\/codrops\/\" target=\"_blank\">http:\/\/tympanus.net\/codrops\/<\/a><\/span>) calls a \u2018Natural Language\u2019 Form. An example of this can be seen below. The idea being that you change the details of a structured sentence to build up to a completed response &#8211; ready to submit.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1309\" src=\"http:\/\/projectsimply.com\/assets\/alternative.jpg\" alt=\"alternative\" width=\"870\" height=\"195\" \/><\/p>\n<p>This can be an extremely intuitive way of gathering information from the user as it essentially guides the user to answer specific questions within a structured &amp; finite sentence. There is no room for error, no textarea allowing for vague answers or explanations.<\/p>\n<p>This approach can be used with select inputs to further constrain the user to a set of predefined variables &#8211; this is not necessarily a bad thing, as it keeps the form succinct and the potential for vague responses to a minimum &#8211; capturing only the information which is needed.<\/p>\n<h3>Making it accessible<\/h3>\n<p>Making the form accessible was at the front of our minds from the minute we started this project. We knew that to make the form as inclusive as possible we would need to combine accessibility with usability and creativity.<\/p>\n<p><strong>Note:<\/strong> We\u2019re not going to stray into development territory here so any accessibility considerations at the code level will be discussed at a later date.<\/p>\n<h3>Being inclusive<\/h3>\n<p>From a design perspective, we had some ideas about how best to tackle the issues of colour blindness and visual impairments &#8211; we would use colour coding and iconography. This is a much-used technique for forms but is also one which makes complete sense in its simplicity.<\/p>\n<p>For visual impairments such as those with poor vision, we would use the colours green and red to make a distinction between fields which were completed correctly and those which needed some attention.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1310\" src=\"http:\/\/projectsimply.com\/assets\/colours-only.jpg\" alt=\"colours-only\" width=\"870\" height=\"118\" \/><\/p>\n<p>Colour blindness was also a concern and so we added a green tick and a red cross to further clarify the difference between a fields status &#8211; a tick for OK and a cross for NOT OK.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1311\" src=\"http:\/\/projectsimply.com\/assets\/colours-with-icons.jpg\" alt=\"colours-with-icons\" width=\"870\" height=\"118\" \/><\/p>\n<h3>Label &amp; placeholder bugbears<\/h3>\n<p>Another issue with forms we see regularly are those which have no input labels and instead use placeholder text as labels within the form fields themselves &#8211; see below for an example.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1312\" src=\"http:\/\/projectsimply.com\/assets\/duff.jpg\" alt=\"duff\" width=\"870\" height=\"200\" \/><\/p>\n<p>This is bad. Why? Because the input label is there to inform the user about what information is required from them. What happens when the user clicks into the field and the label text disappears? What if they start typing and then forget what information was required? Does the user need to enter their name or their shoe size? There\u2019s no immediate way for the user to regain that vital information.<\/p>\n<p>Sure, they could delete the contents of the field and click out of focus, thus regaining the placeholder text &#8211; but this is very unintuitive and quite frankly silly. Why would we put the user through that?<\/p>\n<p>No, take it from us that this is an example of how not to design a usable &amp; coherent form.<\/p>\n<p>We needed to make our form fields as informative as possible, arming the user with as much information as possible to complete the form smoothly and without issue. We would have both a field title and an example of the information required set as the placeholder text. Example below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1314\" src=\"http:\/\/projectsimply.com\/assets\/nice.jpg\" alt=\"nice\" width=\"870\" height=\"200\" \/><\/p>\n<h2>Thinking ahead<\/h2>\n<p>Our team is always thinking ahead and when it came to the responsiveness of our forms, this was no different. At each stage of the form design process, we considered how the form would behave responsively &#8211; our main considerations were:<\/p>\n<ul>\n<li>Would field width be an issue?<\/li>\n<li>How would we keep the visual flow of the form, so as not to distract the user?<\/li>\n<li>How could we minimize the space taken up by any validation messages?<\/li>\n<\/ul>\n<p>We created a\u00a0mockup to visualise how the form would look on mobile, see below:<\/p>\n<p><a href=\"http:\/\/projectsimply.com\/assets\/mobile-form.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1328\" src=\"http:\/\/projectsimply.com\/assets\/mobile-form.jpg\" alt=\"mobile-form\" width=\"870\" height=\"370\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The key to making something work across platforms was to keep things simple from the beginning. Adding design complexity needlessly would almost certainly have posed problems for a responsive form design.<\/p>\n<p>We rounded off our form design process by considering how we could make the form even more powerful and intuitive for the user.<\/p>\n<h2>Taking the form further<\/h2>\n<p>As we\u2019ve said before, the web has changed. Websites are more advanced and forms have evolved alongside. Modern forms are an important part of many conversion goals. Whether this be for capturing as many users details as possible or for increasing e-commerce sales. Surely, if we could tailor the form for every user, this would make the form an even more powerful tool.<\/p>\n<p>We decided to leverage advanced form analytics and for this we wanted to use a 3rd-party service &#8211; there was no point re-inventing the wheel when there are some fantastic services out there waiting to be discovered.<\/p>\n<p>It may sound strange for a design-based article to drift into statistics, tracking and analytics &#8211; but anything that allows us to make informed design decisions to improve our form is not only a positive thing but is essential for our design to move forward.<\/p>\n<p>So, having identified some potential services, we made a comparison based on each of their offerings &#8211; we wanted a service which would allow us to:<\/p>\n<ul>\n<li>Track form users from start to finish<\/li>\n<li>See form users in real time, live on the site (we didn\u2019t know if this was even possible!)<\/li>\n<li>View individual form field statistics<\/li>\n<li>Make judgements on whether a form field needed tweaking based on these stats<\/li>\n<li>Be able to compile some solid data about form users and their usage habits<\/li>\n<\/ul>\n<p>After comparing services, we decided to use a service called Formisimo. This service stood above the rest as it clearly offered everything we needed. The Formisimo service provided very simple integration &#8211; just requiring that a code snippet be added to a form, which our developers kindly added onto the form for us.<\/p>\n<p>We logged into the Formisimo system and, when we started testing our new form, slowly began seeing test data feed through. Immediately, our team saw the power in these advanced form analytics and we knew that this would give us even greater visibility on our forms usage.<\/p>\n<p>Being able to track users from start to finish was pretty amazing. Through internal testing, we could see at which form field a user decided to abandon completing the form &#8211; allowing us to consider why this was and what we could do to ensure this was reduced.<\/p>\n<p>Reducing dropouts is clearly important and we found that using the Formisimo system we could even see if a user is struggling to complete the form &#8211; offering help by showing a helpful on-screen prompt.<\/p>\n<p><strong>Armed with a new, considered form design and some powerful form analytics, we were confident we had created a form for the user. One which put the user first and allowed us to leverage the latest techniques and ultimately pass these benefits onto our clients.<\/strong><\/p>\n<p><strong>How do you design forms? Do you follow trends or go your own way? Let us know by commenting below!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>All too often we see websites in which it appears that the design of a form was an afterthought. We see forms which are visually confusing, inaccessible and even downright unusable. A form is often the first point of contact for a user to interact with your business or brand &#8211; so why would we&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9,15,4],"_links":{"self":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/posts\/1433"}],"collection":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/comments?post=1433"}],"version-history":[{"count":0,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/posts\/1433\/revisions"}],"wp:attachment":[{"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/media?parent=1433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projectsimply.com\/wp-json\/wp\/v2\/categories?post=1433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}