Motivation
It was an article about the use of an input field which caught my attention. In this case, a pretty well-known one, the Amazon search bar. It simply demonstrates that even to this day people tend to use it incorrectly and still don’t understand interfaces as we expected they would. The article can be found here: Article TLDR: People mix up the search bar with the browser address bar and enter complete URLs.
In this post I want to talk about an ongoing project called SteamCalculator and how we have improved our input over time. It’s the major interaction on the page. What is SteamCalculator? It’s a web application, which allows you to calculate the approximate value of a given Steam account. It first went online on hl-portal.de in June 2008 and became popular very soon and was even featured on PC Games.
The challenge
Lets have a closer look. We will ignore the captcha input field from the screenshot above for now:
The input field displayed above seems to be straight forward, right? Just complete the URL by adding your Steam ID at the end. There are some assumptions you can draw, like:
1. Will they know to complete the URL? Even thought it looks “technical” it actually does work. Also Paypal.me for instance lets you define the person and amount you wish to send via the URL. The URL would look like: paypal.me/person/amount
2. How do they know what to enter in the input field? Yes, it is still a problem to this day. We basically have written a brief introduction for it.
3. Where can they find their Steam ID? See point number two.
4. Will people just start typing in random stuff aka trial and error? A lot of magic happens in the background to at least minimize the error rate for the user. Things people type in:
* E-mail address
* Profile ID
* Custom URL
* Whole Steam profile URL
* Steam ID
* Steam ID 2
* Steam ID 3So we have two ways to help the user
- Make the UI clean, clear and as basic as possible and provide help when needed so the user always has a fallback.
- Try to correct their errors on the fly. In other words, all of the input possibilities described above should work as far as technically possible.
Interfaces and user behaviour changes over time and so should your product adapt. Lets have a closer look how Steam looked like for example in 2010:
The Steam ID can be found in the Steam URL address bar, which is shown under the Community category:
The Steam ID can be replaced through a custom URL. So instead of having a 17 digit number you can set up a custom URL by using your gamertag for example. As a guideline, we mention both possibilities in the input field. You can also notice that the Steam interface and the URL (“from /profiles/” to “/id/”) has changed over time:
The biggest shift and challenge was however when Steam announced on April 11th, 2018 that they will set all Steam profiles private per default. This means that SteamCalculator will no longer be able to calculate Steam profiles. Because the necessary information is no longer publicly available. Except the user sets his profile public again. Futhermore, Steam’s URL address bar, which we have seen before, has also been hidden. This means that we needed to extend our instruction even further. Seeing the following image:
Yey, the instruction got three times as long. And it even has a GIF animation, because many had trouble finding the setting despite the description. Besides demonstrating where to find your Steam ID we also had to show how to display the Steam URL address bar and how to make your profile public. The complexity and steps got out of hand.
How we respond and adapt over time
Initial input field of SteamCalculator: (2008 - 2012)
After a relaunch (2016) we went with a very minimalistic approach. We used the Input field placeholder as a hint that describes the expected value of an input field. The problem is that this approach requires prior knowledge to understand what a Steam ID or custom URL is and where to find it:
We then enhanced the CTA by adding “Enter” to the placeholder. Furthermore, we have inserted a little helper text directly below the input field. The bounce rate has dropped by roughly 35-40 percent. We are also considering putting a clear CTA in the button again:
There will always be People who tend not to use your product as intended. Therefore always aim to simplify the complexity for your users as much as possible. At the same time, this can mean that the complexity of your code increases in order to deliver the greatest possible experience to the users. Complexity shifts!
We have also looked for alternatives that go beyond the input field. So we have integrated the Steam login. The user now neither needs to know what to enter nor where to find his Steam ID. The only requirement now is that his profile needs to be public.
Current version
Input handling and beyond
The final version? For sure not. We are planning to perform A/B Testing to measure and refine further designs. We may also find another new entry point for the user, which will make it even easier and more convenient for him to calculate his account value.
*Edit 05.12.2021
Further change, we had to handle another input. People have started to enter their friend code, which you usually use to add people to your Steam friends list. This gave us the idea to ask specifically for the friend code in the first place, because everyone knows where to find it. The Steam ID only served to identify a profile, but not to be specifically found and sent. Furthermore, we can save a large part of the written instructions.