#like at least it's 90% prefilled so it's not a long thing. but also.

[other-peoples-coats]

Oh hey fellow aussies tax deadline's 31st Oct, which is monday; if you haven't already, lodge your fuckin tax return.

[luxus4me]

Smashing Magazine Feed http://j.mp/2sUNhkV

Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form. Forms remain one of the most important types of interactions for users on the web and in apps. In fact, forms are often considered the final step in the journey of completing their goals. Forms are just a means to an end. Users should be able to complete them quickly and without confusion.

In this article, you’ll see practical techniques that have been gleaned from usability testing, field testing, eye-tracking studies and actual complaints from disgruntled users. These techniques — when used correctly — enable designers to produce faster, easier and more productive form experiences. There’s a way you can create and design your own prototypes: All you need to do is to download Adobe XD1 (for free) and get started right away. At the end of the article, you’ll also find new ways to design forms.

Further Reading on SmashingMag: Link

The Components Of Forms Link

The typical form has the following five components:

Structure This includes the order of fields, the form’s appearance on the page and the logical connections between multiple fields.

Input fields These include text fields, password fields, checkboxes, radio buttons, sliders and any other fields designed for user input.

Field labels These tell users what the corresponding input fields mean.

Action button When the user presses this button, an action is performed (such as submission of the data).

Feedback The user is made to understand the result of their input through feedback. Most apps and websites use plain text as a form of feedback. A message will notify the user about the result and can be positive (indicating that the form was submitted successfully) or negative (“The number you’ve provided is incorrect”).

Forms may also have the following components:

Assistance This is any explanation of how to fill out the form.

Validation This automatic check ensures that the user’s data is valid.

This article covers many aspects related to structure, input fields, labels, action buttons and validation.

Form Structure Link

A form is a type of conversation. And like any conversation, it should consist of logical communication between two parties: the user and the app.

Ask Only What’s Required Link

Make sure to ask only what you really need. Every extra field you add to a form will affect its conversion rate. Always consider why you are requesting certain information from the user and how you will use it.

Order the Form Logically Link

Ask details logically from the user’s perspective, not from the application or database’s perspective. Typically, asking for someone’s address before their name would be unusual.

Group related information into logical blocks or sets. The flow from one set of questions to the next will better resemble a conversation. Grouping together related fields will also help users make sense of the information they must fill in. Compare how it works in the contact information form below.

6 Group together related fields (Image: Nielsen Norman Group7)

One Column Vs. Multiple Columns Link

One of the problems with arranging form fields into multiple columns is that users will likely interpret the fields inconsistently. If a form has horizontally adjacent fields, then the user must scan in a Z pattern, slowing the speed of comprehension and muddying the path to completion. But if a form is in a single column, the path to completion is a straight line down the page.

8 On the left, one of many ways to interpret how the form fields relate when they are arranged in a standard two-column layout, versus on the right, a straight line down the page.

Input Fields Link

Input fields are what enable users to fill in a form. Various types of fields exist for the information you need: text fields, password fields, dropdowns, checkboxes, radio buttons, date-pickers and more.

Number of Fields Link

A rule of thumb in form design is that shorter is better. And this certainly seems intuitive: Less effort on the part of the user will lead to higher conversion. Thus, minimize the number of fields as much as possible. This will make your form feel less loaded, especially when you’re requesting a lot of information. However, don’t overdo it; no one likes a three-field form that turns into a 30-field interrogation. Displaying only five to seven input fields9 at a given time is a common practice.

10 Combine multiple fields in one easy-to-fill field. (Image: Luke Wroblewski11) (View Large version12)

Mandatory Vs. Optional Link

Try to avoid optional fields in forms. But if you use them, at least clearly distinguish which input fields may not be left blank. The convention is to use an asterisk (*) for required fields or the word “optional” for non-required fields (which is preferable in long forms with multiple required fields). If you decide to use an asterisk for mandatory fields, show a hint at the bottom of the form explaining what the asterisk is for, because not everyone understands what it means.

13 MailChimp’s mailing-list subscription form.

Setting Default Values Link

Avoid setting defaults unless you believe a large portion of your users (for example, 90% of them) will select that value. Particularly avoid it for required fields. Why? Because you’re likely to introduce errors. People scan online forms quickly, so don’t assume they will take the time to parse through all of the choices. They might skip something that already has a value.

But this rule doesn’t apply to smart defaults — that is, values set based on information available about the user. Smart defaults can make form completion faster and more accurate. For example, preselect the user’s country based on geo-location data. Still, use these with caution, because users tend to leave preselected fields as they are.

14 An intelligently preselected country in the checkout form

Input Masks Link

Field masking is a technique that helps users format inputted text. A mask appears once a user focuses on a field, and it formats the text automatically as the field is being filled out, helping users to focus on the required data and to more easily notice errors. In the example below, the parentheses, spaces and dashes are applied automatically as the phone and credit-card numbers are entered. This simple technique saves time and effort with phone numbers, credit cards, currencies and more.

15 (Image: Josh Morony16)

Desktop-Only: Make Form Keyboard-Friendly Link

Users should be able to focus on and edit every field using only the keyboard. Power users, who tend to use the keyboard heavily, should be able to easily tab through and edit fields, all without lifting their fingers off the keyboard. You can find detailed requirements for keyboard interaction in the W3C’s guidelines on design patterns17.

18 Even a simple date-picker should adhere to the W3C’s guidelines. (Image: Salesforce) (View Large version19)

Desktop-Only: Autofocus for Input Field Link

Autofocusing a field gives the user an indication and a starting point to quickly begin filling out a form. Provide a clear visual signal that focus has moved there, whether by changing a color, fading in a box, flashing an arrow, whatever. Amazon’s registration form has both autofocus and visual indicators.

20 (View large version21)

Mobile-Only: Match Keyboard to Input Link

Phone users appreciate apps that provide the appropriate keyboard for text being requested. Implement this consistently throughout the app, rather than merely for certain tasks but not others.

22 (Image: Google23)

Limit Typing (Autocompletion) Link

With more and more people using mobile screens, anything that can be done to prevent unnecessary typing will improve the user experience and decrease errors. Autocompletion makes it possible to eliminate a huge amount of typing. For example, filling out an address field is often the most problematic part of any registration form. A tool such as Place Autocomplete Address Form24 (which uses both geo-location and address prefilling to provide accurate suggestions based on the user’s exact location) enables users to enter their address with fewer keystrokes than regular input fields.

25

Clearly written labels are one of the primary ways to make a UI more accessible. A good label tells the user the purpose of the field, maintains its usefulness when focus is on the field itself, and remains visible even after the field has been filled in.

Number of Words Link

Labels are not help text. Use succinct, short, descriptive labels (a word or two) so that users can quickly scan your form. Previous versions of Amazon’s registration form contained a lot of words, which resulted in slow completion rates. The current version is much better and has short labels.

26 (View large version27)

Sentence Case Vs. Title Case Link

In most digital products today, there are two ways to capitalize words:

title case: capitalize every word. “This Is Title Case.”

sentence case: capitalize the first word. “This is sentence case.”

Sentence case used for labels has one advantage over title case: It is slightly easier (and, thus, faster) to read. While the difference for short labels is negligible (“Full Name” and “Full name”), for longer labels, sentence case is better. Now You Know How Difficult It Is to Read Long Text in Title Case.

Avoid All Caps Link

Never use all caps, or else the form will be difficult to read and much harder to scan quickly, because there will be no variation in character height.

28 All-caps labels are very hard to read.

Alignment of Labels: Left Vs. Right Vs. Top Link

Matteo Penzo’s 2006 article on label placement29 suggests that forms are completed faster if labels are on top of the fields. Top-aligned labels are good if you want users to scan the form as quickly as possible.

30 Left-aligned, right-aligned and top-aligned labels (Image: UX Matters) (View Large version31)

The biggest advantage of top-aligned labels is that different-sized labels and localized versions can more easily fit the UI. (This is especially good for screens with limited space.)

32 (Image: CSS-Tricks383533)

The biggest disadvantage to left-aligned labels is that it has the slowest completion times. This is likely because of the visual distance between the label and input field. The shorter the label, the further away it will be from the input. However, a slow completion rate isn’t always a bad thing, especially if the form asks for sensitive data. If you are asking for something like a driver’s license number or a social security number, you might deliberately want to slow down users a bit to make sure they enter it correctly. Thus, the time spent reading labels for sensitive data is insignificant. Left-aligned labels have another disadvantage: They require more horizontal space, which might be a problem for mobile users.

34 (Image: CSS-Tricks383533)

The big advantage of right-aligned labels is the strong visual connection between the label and input. Items near each other appear to be related. This principle isn’t new; it derives from the law of proximity36, from Gestalt psychology. For short forms, right-aligned labels can have great completion times. The disadvantage is discomfort; such forms lack that hard left edge, which makes it less comfortable to look at and harder to read.

37 (Image: CSS-Tricks383533)

Takeaway: If you want users to scan a form quickly, put labels above the fields. The layout will be easier to scan because the eye will move straight down the page. However, if you want users to read carefully, put labels to the left of the fields. This layout will slow down the reader and make them scan in a Z-shaped motion.

Inline Labels (Placeholder Text) Link

A label set as a placeholder in an input field will disappear once the field gains focus; the user will no longer be able to view it. While placeholder text might work for two-field forms (a simple log-in form with username and password fields), it’s a poor substitute for visual labels when more information is required from the user.

39 (Image: snapwi40)

Once the user clicks on the input field, the label will disappear, and so the user cannot double-check that they wrote what was being asked of them. This increases the chance of error. Another problem is that users could mistake placeholder text for prefilled data and, hence, ignore it (as Nielsen Norman Group’s eye-tracking study41 confirms).

42 Placeholder text as field label

A good solution for placeholder text is a floating label. The placeholder text would be shown by default, but once an input field is tapped and text is entered, the placeholder text fades out and a top-aligned label animates in.

43 (Image: MDS44)

Takeaway: Don’t just rely on placeholders; include a label as well, because once a field has been filled out, the placeholder will no longer be visible. Use a floating label so that users are sure they’ve filled out the correct field.

Action Buttons Link

When clicked, an action button triggers some activity, such as submission of the form.

Primary Vs. Secondary Actions Link

A lack of visual distinction between primary and secondary actions can easily lead to failure. Reducing the visual prominence of secondary actions minimizes the risk of error and reinforces people’s path to a successful outcome.

45 Equal visual weight versus visual distinction (Image: Luke Wroblewski)

Button Location Link

Complex forms usually need a back button. If such a button is located right below an input field (like in the first screenshot below), a user could accidentally click it. Because a back button is a secondary action, make it less accessible (the second form below has the right location for buttons).

46 (View large version47)

Naming Conventions Link

Avoid generic words such as “Submit” for actions, because they give the impression that the form itself is generic. Instead, state what action the button will perform when clicked, such as “Create my account” or “Subscribe to weekly offers.”

48 (View large version49)

Multiple Action Buttons Link

Avoid multiple action buttons because they might distract users from their goal of submitting the form.

The Reset Button Is Pure Evil Link

Don’t use a reset button. This button almost never helps users and often hurts them. The web would be a happier place if almost all reset buttons were removed.

50

Visual Appearance Link

Make sure action buttons look like buttons: Indicate that it is possible to click or tap them.

51 Shading indicates that it is possible to click. (Image: Vadim Gromov52)

Visual Feedback Link

Design the “Submit” button in a way that clearly indicates the form is being processed after the user’s action. This provides feedback to the user while preventing double submission.

53 (Image: Michaël Villar54)

Validation Link

Form validation errors are inevitable and are a natural part of data entry (because users are prone to making errors). Yes, error-prone conditions should be minimized, but validation errors will never be eliminated. So, the most important question is, How do you make it easy for the user to recover from errors?

Inline Validation Link

Users dislike having to go through the process of filling out a form, only to find out upon submission that they’ve made an error. Especially frustrating is completing a long form and upon pressing “Submit,” you are rewarded with multiple error messages. It’s even more annoying when it isn’t clear what errors you’ve committed and where.

55 (Image: Stack Exchange56)

Validation should inform users about the correctness of text as soon as the user has inputted the data. The primary principle of good form validation is this: Talk to the user! Tell them what is wrong! Real-time inline validation immediately informs the user about the correctness of their data. This approach allows them to correct any errors faster, without having to wait until they press the “Submit” button to see the errors.

However, avoid validating on each keystroke because, in most cases, you simply cannot verify until someone has finished typing an answer. Forms that validate during data entry punish the user as soon as they start entering data.

57 Google Forms states the email address isn’t valid before you’ve finished typing. (Image: Medium636058)

On the other hand, forms that validate after data entry do not inform the user soon enough that they’ve fixed an error.

59 Validation in the Apple Store is performed after data entry. (Image: Medium636058)

Mihael Konjević, in his article “Inline Validation in Forms: Designing the Experience61,” examines different validation strategies and proposes a hybrid strategy to satisfy both sides: Reward early, punish late.

If the user enters data in a field that was in a valid state (i.e. previously inputted data was valid), then validate after data entry.

If the user enters data in a field that was in an invalid state (i.e. previously entered data was invalid), then validate during data entry.

62 A hybrid approach: Reward early, punish late. (Image: Medium636058)

Protecting Data Link

Jef Raskin once said, “The system should treat all user input as sacred.” This is absolutely true for forms. It’s great when you start filling in a form and then accidentally refresh the page but the data remains in the fields. Tools like Garlic.js64 help you to persist a form’s values locally until the form is submitted. This way, users won’t lose any precious data if they accidentally close the tab or browser.

65 (View large version66)

Conversational Interfaces: New Ways Of Designing Forms Link

Recently, we’ve seen a lot of excitement around conversational interfaces and chatbots. Several trends are contributing to this phenomenon, but one in particular is that people are spending more time in messaging apps67 than on social networks. This has led to a lot of experimentation with supporting a range of interactions, such as shopping, in threaded conversations, often in a way that mimics messaging. Even as established an element as a web form has undergone a change under this trend. Designers are looking to transform traditional web forms into interactive conversational interfaces.

Natural Language Interface Link

Every interface is a conversation. Traditional forms (the ones we design every day) are quite similar to a conversation. The only difference is the way we ask the questions. But what if we designed our forms to ask questions in a format that more closely reflects real human (not machine) conversation? So, instead of communicating with a machine on its own inhuman terms, you would interact with it on yours. The form shown below creates a conversational context, facilitating understanding without relying on the traditional elements of web forms (such as labels and input fields).

68 This form design from Codrops69 uses a conversational pattern to better resemble the task. (View large version70)

Conversational Form Link

Conversational Form71 is an open-source concept that easily turns any form on a web page into a conversational interface. It features conversational replacement of all input elements, reusable variables from previous questions, and complete customization and control over the styling. This project represents an interesting shift in how we think about user experiences and interactions, leaning more towards text-based conversation to help users achieve their goals.

72

Conclusion Link

Users can be reluctant to fill out forms, so make the process as easy as possible. Minor changes — such as grouping related fields and indicating what information goes in each field — can significantly increase usability. Usability testing is simply indispensable in form design. Very often, testing with just a few people or simply asking a colleague to go through a prototype can give you good insight into how usable a form is.

This article is part of the UX design series sponsored by Adobe. The newly introduced Adobe Experience Design CC (Beta) tool is made for a fast and fluid UX design process73, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance74, and also visit the Adobe XD blog75 to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free76.

(ms, vf, al, yk, il)

1 https://adobe.ly/2rVwVsU

2 http://ift.tt/2evMboA

3 http://ift.tt/2clwyyA

4 http://ift.tt/20agnYy

5 http://ift.tt/2dBbn0p

6 http://j.mp/2rWTQGI

7 http://j.mp/2rX9Mst

8 http://j.mp/2sUUVvR

9 http://j.mp/2sUNhBr

10 http://j.mp/2sUMGQe

11 http://j.mp/2rWOfAd

12 http://j.mp/2sUMGQe

13 http://j.mp/2rWYFzs

14 http://j.mp/2sUxaUv

15 http://j.mp/2rWTUGs

16 http://j.mp/2rWImCU

17 http://j.mp/2nMkboT

18 http://j.mp/2sUUYrx

19 http://j.mp/2sUUYrx

20 http://j.mp/2rX88a5

21 http://j.mp/2rX88a5

22 http://j.mp/2sUxbb1

23 http://j.mp/2oyCUkO

24 http://j.mp/2rWU5l8

25 http://j.mp/2rWHC0F

26 http://j.mp/2sULXi9

27 http://j.mp/2sULXi9

28 http://j.mp/2sUNxR4

29 http://j.mp/2rWLrmv

30 http://j.mp/2rX5sJy

31 http://j.mp/2rX5sJy

32 http://j.mp/2rWP1wS

33 http://j.mp/2rWYG6u

34 http://j.mp/2rWLkaG

35 http://j.mp/2rWYG6u

36 http://ift.tt/2bYXgS1

37 http://ift.tt/2qDYSIs

38 http://j.mp/2rWYG6u

39 http://ift.tt/2rn4tjF

40 https://www.snapwi.re/

41 http://ift.tt/1QbnjlT

42 http://ift.tt/2qE1kPe

43 http://ift.tt/2qE7SNN

44 http://ift.tt/Uv08ZT

45 http://ift.tt/2qE1mqk

46 http://ift.tt/2rnRGgY

47 http://ift.tt/2rnRGgY

48 http://ift.tt/2qDRTQ0

49 http://ift.tt/2qDRTQ0

50 http://ift.tt/2qDESWu

51 http://ift.tt/2rnvyTL

52 http://ift.tt/15w7LUK

53 http://ift.tt/2qE1pm0

54 http://ift.tt/2dEROSe

55 http://ift.tt/2qDSbX9

56 http://ift.tt/2cCjJ48

57 http://ift.tt/2qDHzHr

58 http://ift.tt/2dadfyr

59 http://ift.tt/2qE81kj

60 http://ift.tt/2dadfyr

61 http://ift.tt/2dadfyr

62 http://ift.tt/2rnHRPV

63 http://ift.tt/2dadfyr

64 http://garlicjs.org

65 http://ift.tt/2rnErg4

66 http://ift.tt/2kK5ilp

67 http://ift.tt/1QI9XNq

68 http://ift.tt/2rnnL8C

69 http://ift.tt/2qE827R

70 http://ift.tt/2rnnL8C

71 http://ift.tt/2gCbFBW

72 http://ift.tt/2qDmc9z

73 https://adobe.ly/2rVwVsU

74 http://ift.tt/2qqE3Qv

75 https://adobe.ly/2rOmEi0

76 https://adobe.ly/2rVwVsU

↑ Back to top Tweet itShare on Facebook

http://ift.tt/2qDJ1ps via Smashing Magazine Feed URL : http://ift.tt/22K27Z8