.png)
Developer tools have been a rather small niche compared to other professional instruments, like design or sales tools. Some call it a typical “cobbler’s children” effect. However, with the rapid growth of the software development sector, things have changed. There are more and more offers on the developer tools market, and the potential is huge.
Our designers got to work with two products made for developers, creating UX design for them from scratch. After diving deep into the world of developer tools design, we discovered that there are so many challenges and issues specific to this type of software. This experience has led us to many insights, some of which we would like to share.
Why is user experience often neglected in developer tools?
The logic is very basic: developers have been active software users long before UX was a thing. As professionals, they easily recognize quality and put functionality before anything else when choosing a product to use (or so we assume). That is why many dev tools look complex and hard to understand for inexperienced users. There’s no point in making an app look sleek and pretty for people who know very well the “dark” side of the software.
Developers often tend to oppose themselves to the users. In this case, by “users” we mean people who interact with software on the very basic level, don’t get the things that are behind the user interface, and believe that most issues can be solved with the "Reset" button. Yet, developers become users, too, when they use the product. Of course, they would make less of the typical user’s silly mistakes, but the rules of the UX design apply to them as much as to any other person.
Also, product owners who make tools for “serious work” tend to invest less in design because they think that there is no need to make such products “fancy”. However, UX design is not about making things pretty.
Think of Adobe products as an example. This is not a developer tool, but it’s a product that most of us are familiar with. Different Adobe products, such as InDesign, Photoshop, Illustrator have quite a complex design that looks serious, professional, and a bit old school. Despite having different functions, all the products follow the same structure and logic so that designers who use all of them won’t get confused. These classical products were created in the nineties. In 2016, when Adobe XD, a tool for UX and UI designers, was launched, its interface was quite different, as the standards of usability have changed, too.
But when it comes to developers tools, good UX doesn’t necessarily mean modern and sleek UI. Let’s take Vim, a code editor developed decades ago that hasn’t changed its look much since then. You have to spend time to learn how to use the software, but it doesn’t seem a problem because, well, that’s part of learning how to code. What is important for developers compared to other solutiona, the tool is functional, light, and adjustable. You can change its look according to your needs.
And here is Sublime, a code editor developed in 2000s. It is quite fast and has introduced new features such as multiple cursors. Developers value it for neat UI and UX. Would you expect Vim and Sublime, two products from distant digital epoques look as different as first and last MacOS do? Let’s take a look: if you are not well familiar with these products, interfaces of both Vim and Sublime don’t look that different.
Most developer tools start with a programmer noticing they have a problem, imagining a way to fix the problem through software automation, and then writing the code that implements that automation. Building for yourself means you get to wear the hat of product manager, engineer, and customer simultaneously.
Beyang Liu, CTO, co-founder of Sourcegraph
Owners of products for developers are often developers themselves. Naturally, they are well-aware of the challenges that their colleagues face, and they have the ability to build a solution to solve them. So, they often end up testing the product themselves, and as a result, the product seems to have no UX flaws at all — because people who have been developing it know the logic and structure well and won’t be confused with the interface: their focus is to test functionality.
As a UX design agency, we always advocate for quality design based on proper UX research and user testing. It’s not just because our job depends on that. Here are some arguments for the importance of UX in tools made for the developers.
Reasons to pay attention to user experience in developers tools
Working efficiency. Good UX decreases the task time, making the work of a developer faster and more productive. This one reason could be enough, but we have a couple more.
High competition. In the past, having a unique technology or functionality was enough to be on top. Nowadays the market is growing faster than ever. No matter how unique your product is, alternatives will appear sooner or later (maybe even sooner than you expect). And that is when usability can play a crucial role, helping you to keep the market without having to lower the prices.
Product owners who think strategically don’t leave design for “later”. That is what our client SlamData did. They developed Reform, a product that can load data from any source and transform it into a comfortable-to-use form. When we started working on the design, we realized that there were no analogs to use as a reference: the idea was completely new.
Developers often launch their product without thinking much of the design because they want to reach the market before competitors do, but it’s a good idea to make a redesign before starting to lose clients.
Simplifying the onboarding. There’s no doubt that developers are tech-savvy enough to operate a complex user interface faster than other people would. But do you know how much time they spent practicing? They have been using this interface daily for many years. Every product owner wants the onboarding to be as fast and smooth as possible, and UI/UX design is a key to that.
Advantage at sales. We have to remember that not all developer tools are sold to individuals. Often the audience includes managers, directors, and other specialists who make the purchase decision. They might have a bit different perspective than developers, and it is likely that a good-looking app will have more points in their eyes (even if they don’t say it directly). A similar effect works with pitch decks: investors are more willing to trust a product with good design, which signals there has been real work input in the project.
This was the case with Tromzo, a code security app. The founders of Tromzo are developers themselves and they had a very clear image of the product when they came to us. What they needed was a good-looking prototype that they could present to the investors. There are quite some code security apps on the market, so quality UX and UI are a way to stand out.
Developers are humans, too. Tools are made to make the work easier, so why not make the developer's working process more enjoyable? We all like user-friendly and good-looking apps in our daily life, so why do we make developers use those cluttered and clumsy designs at work?
So, how do you design tools for developers? Here are some pieces of advice that we found useful while working with Polaris and Reform by SlamData (with examples).
Three golden rules of UX design for developers tools
Organizing a large amount of information
In many dev tools, you will face large amounts of information. And these are not the things that you can hide in the burger menu: all of them are important for the proper functioning of the app. To not overclutter the screens, you have to use different ways of visual organization.
Here are some examples. In Tromzo, we used heatmaps to give a fast overlook of large depositories. Below there is a long table of vulnerabilities, which would be hard to analyze without some visualization. Heatmap draws the attention of the user to the most problematic repositories, teams, or projects by coloring them in bright red.
On the dashboard of Tromzo that contains a few blocks of information, we used separated cards for each and visualized trends with a graph. In addition, all the most important numbers are shown with big font sizes.
Another way of visualizing a complex system is intelligence graph: each separate element is shown in connection with team, project, vulnerabilities, and so on.
Keeping lots of data on one page
Developers often work with two monitors showing different data that they need to check regularly. Unlike “average” users who easily get lost when they have too much information in front of them, developers are used to it. Even more, some of them would consider it inconvenient to spend precious time switching between different apps or clicking buttons to get to another screen.
One of the solutions can be creating keyboard shortcuts, preferably the combinations that are familiar to the users of other popular software. However, there are more ways to fit big information clusters in an accessible way.
Look at the screen in Reform below: it shows a sequence of steps/choices for setting data conversion variables. We chose point-and-click card-based user interface instead of alternatives such as wizard pattern (each step opening on the new page, like when entering shipping and billing data in a typical online shopping process). This way, each variable is shown at the same time and can be changed within the same screen.
Minimalist colors and visuals
After all, this is a tool for professional developers, so the fewer distractions, the better. Don't use more than one bright color, keep fonts classic and readable, and avoid decorative elements. This advice comes very logically after the previous ones.
For both Tromzo and Reform, we've chosen minimal color palettes with neutral basic color and one accent. Green, red, and yellow are used occasionally when they have a certain function, such as signing the status of items in the list or showing trends: increase or decrease in indicators.
Final thoughts
Designing developer tools is a real challenge: complex software with lots of important information. It may look like “strictness” and “minimalism” constrain creativity, but we think it is the opposite: these requirements stimulate designers to find original solutions and create developer tools with the level of UX that they deserve.
Would you like to get a consultation from experienced UX designers about your product? Contact us!
