Do you have some good analytics that could be helping customers out....if they gave you the right inputs up front? Today's lesson is about using your analytics to facilitate the process of completing a form that requires users to type in specific values to complete a task.
I work on technical and analytics-driven products frequently, and often times, there will exist tasks that require a user to enter some values in order to get some future value, set a threshold, limit or facilitate some future automation, etc. Sometimes, these fall into what i call "magic number" form fields whereby the customer may not know what the right value is to enter, without some useful comparison information.
A good example of this could be something like "maximum spend per click" when buying advertising. In this case, the customer wants the most clicks with the least cost; but at some point, they're only willing to spend a certain amount per click. What many advertising sites do well is to help the customer understand, during form entry, "what performance can I expect for $___ spend per click?" In the software UI design field, we talk about "right information...at the right time." And, since analytics is about providing "insights" that people can take action on, how can we design for "insightful information at the right time" in the context of form fields?
Below are four examples of a design pattern for entering a numeric threshold value, each example containing gradually more insight for the customer intended to facilitate their entry of a fictitious "My threshold" value. While none of the examples is the right/perfect choice for every instance, what I want you to take away here is "how much friction does each of these UI design tactics remove in helping users type in the right value?" UX nerds call this friction "cognitive load," and minimizing load is an attribute of good design.
Take a look:
Here are some design thoughts on each of the four options:
Example 1:
No analytics assistance is given. The user is entirely responsible to know the ramifications or value of typing in a particular number without any help. On a positive note, the UI is low on ink, and noise free.
Example 2:
This is better; the UI at least allows the user to check the value against some software/analytics which would return back a qualitative result of some sort. The problem with this UI is that the user can end up in a circle of "type, check, erase, change" if the scale of the possible values is not clearly understood (for example, non-linear scale). This tactic is sometimes required if a laborious computation must be run each time the value is changed; just know that this choice favors "engineering" needs over the users' and while sometimes that's required, it's usually not optimal. I will also add that, when applied with care and precision, this example with the required interaction (button click) could actually increase delight and provide an element of "fun" in the UX, if the button is likely to return favorable results.
Example 3:
I like this example a lot: as with many ad-spend UIs, it helps me understand something about what the system believes is a beneficial range. However, it doesn't really clarify what the possible outcomes are as a result of entering a value within the suggested range.
Example 4:
This option gives me very clear guidance on what the possible outcomes are for each threshold range. The user is much more likely to enter "correct" values here, however the downside here is that the UI has a lot more ink now, and repeating this pattern multiple times on a single form could get noisy. For technical products, I would generally suggest erring on the side of "more information," but this also means you need to be aware of the graphic/visual design quality of the form. More information on the page increases the importance of having elegant UI design that ensures the noise factor and perceived complexity of the design stay low.