If you’re reading this, I would bet that you have used some sort of computer program- whether it be a game, a text editor, or even the browser you had to open to read this article. I would also bet that at some point, you had to learn what the program did, and how to make it do whatever it is that you needed it to do. Or maybe it’s a program you don’t use very often, and you have to remind yourself how it works on the rare occasions you launch it. To help with this learning process (or re-learning process), there’s a best practice that UX designers and UX writers everywhere pay heed to: when you label a button, label it with what the button does. This week, I want to take a look at a few examples of buttons- the good, the bad, and the ugly.
The Good
First and foremost, Steam is a storefront. It’s primary purpose is to sell games to customers around the world, and make doing so as painless as possible. Shockingly, Steam has put quite a bit of effort into making sure customers experience as little frustration as possible, including making sure each and every action shoppers can take is clearly labeled.
Want to buy a game? Click the “Add to cart” button to add the game to your shopping cart. Want to add a game to your wishlist to buy later? Click the “Add to your wishlist” button. Click “Follow” to be kept apprised of the game’s updates, or “Ignore” to do the opposite. In case the labels on these buttons are not clear enough, hovering the mouse over each of these buttons provides a more detailed description of what they do. Making the labels clear and concise like this helps guide users towards their desired actions instead of necessitating a frustrating search around the UI. Similarly, the mouseover text preemptively provides answers to users’ questions, instead of forcing them away from the Steam Store and into Google.
The Bad
Modern digital video game stores generally work the same way. After going through the shop to find and purchase games, digital copies of the purchased games are added to the user’s library. Once in the user’s library, users are able to install, launch, and uninstall games at will. To launch games in Valve’s Steam libraries, this means clicking the large, green Play button. In EA’s Origin, this means clicking the large, orange Play button. In Blizzard’s Battle.net, this means clicking the large, blue Play button. In Epic Games’ launcher, this trend is abruptly altered.
Each game in users’ Epic Games libraries has four parts: a large graphic, the game’s title, a small launch icon and text, and an ellipsis. The ellipsis makes sense: it is a very commonly-used symbol for options menus all over, and Epic is no exception to this. Similarly, the small Launch button does exactly what it says. The problem is that clicking anywhere within the red area and outside the green area (both outlined below) launches the game. None of this is explained via mouseover text or a tooltip squirreled away (that I could find, at least).
Making almost the entirety of the game’s library entry into a play button without notifying users of this functionality, or giving them hints as to what clicking the large graphic will do, provides a really poor user experience. Looking at these library entries, the expectation is that the poorly outlined play icon and the “Launch” text, and nothing else, is the button that will launch the game. Additionally, if users misclick while trying to click the options button, it’s extremely unlikely they want the game to launch.
The Ugly
When perusing your steam library, games that are installed on your computer have a nice, large, green Play button that when pressed, opens the game for you to play. If the selected game is not installed, the play button turns blue, and says Install instead, prompting users to do exactly as the button implies. There is also a third option, however: Steam has a really cool feature that allows people to to play games that are installed on other computers, provided both computers are logged into the same steam account and are connected to the same router. When this is the case, the Play/Install button changes to say Stream, and allows users to stream the game from whichever computer has the game installed. An issue becomes apparent, however, when users want to install the game on a secondary computer instead of streaming it. The option users must select to install their game on their current machine says ”This machine”, with no indication as to what selecting it does.
There is actually logic behind why it is set up this way, however. The dropdown allows users to select which computer they want to access the game from. When the computer with the installed game is selected, the game may be streamed, and when the computer without the installed game is selected, it may be installed. The problem is that this is not clearly stated for the user, and must be experimented with for this functionality to become apparent. If everything else is very clearly defined, like the Play, Install, and Stream buttons, why not make this clearer for users as well?
In conclusion
Buttons are how we interact with a wide variety of programs in a wide variety of ways. Clearly labeling your buttons is essential to inform your software’s users of their functions. Adding mouseover text to further elaborate on what clicking the button does can help minimize users’ confusion and frustration. And please, please make sure your buttons are clearly defined. It’s rare to see “open” buttons that say “close” these days, but rarely seeing mistakes like this is still too common. We can do better.
In the meantime, I hope I didn’t push your buttons too badly, and I’ll see you next week!
-Mark