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 , 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!
Top Stories
The Power of Storytelling: Improve UX Design by Telling a Story
What is the difference between these shot glasses?
The price is the same for a used shot glass with print and a set of six glasses with 22K gold trim and a tray.
The difference lies in the story. Story is what made a used glass purchased for $1 at a flea market be sold for $76 on eBay. It was a part of an experiment on storytelling.
100 random items of different levels of inutility and trashiness were bought at flea markets for $129 in total. Then, each of them got a personal story from a writer. All the items with their background stories were placed on eBay and sold for a total of $3,612.51. So, if you are still not ready to pay $76 for a used shot glass, try reading its story first.
The set of six glasses with 22K gold trim and a tray has no story in the description. And we still don’t know if it was sold.
Storytelling has penetrated all parts of human culture and communication. Instagram stories, books, advertisements, corporate blogs… We are a SaaS design agency and are want to tell you a story about storytelling in UX (in our blog, yes).
Beyond books. Telling stories about boring things
If you started wandering through the stories of 100 objects, I bet most of you were just skimming through and didn’t take the time to read each story thoroughly. Why are we like that? Because we are in the 21st century and we spend a vast amount of time on the web. To capture the attention of our inner ADHD monkeys, visual storytelling can be more effective than text.
Guess what this story tells us about? Here’s some context: this is growth.design, a project that collects case studies about psychology in UX design. So, what does “The Handmaid’s Tale” in the background haves to do with psychology in UX design?? You definitely need to click through the case study to find out.
This is a great example of storytelling. And spoiler — the case study tells us about Zeigarnik Effect that states: “People hate the tension created by incomplete tasks”. And that is one of the factors that make storytelling so powerful and the reason why we can’t stop watching TV series and scroll all the way through growth.design case studies. We are hooked on a story and we want to know what’s next.
“What is next?” is a good question to build a storytelling process around (and that’s why we put a call-to-action at the end of the articles).
In UX design, the Zeigarnik effect can work for onboarding. When there is a task that has to be finished, it motivates a user to go through all the steps and not abandon the onboarding process in the middle.
Examples of storytelling
There are many brilliant examples of storytelling among websites. For example, Slavery Footprint, a page that aims to educate people about modern slavery.
I spent about ten minutes entering lots of personal information to find out that there are 28 slaves working for me. Not many websites manage to hold millennial's attention that long.
The company says that after the launch, their website crashed soon because of too many visitors. So, what makes it so engaging?
The page opens with a hook:
From then, you can proceed with a test or read an explanation of how modern first-world countries are related to worldwide slavery.
The storytelling is all over the place here. Look at the navigation.
They make it very clear that the user is the character of the story. When you click on “your story”, a pop-up window appears. First, it gives some context, connecting the character and the topic. Next, it shows the challenge:
This topic is complex and difficult. Giving so much heavy information could bore users. Storytelling is what makes it digestible and gets readers to scroll till the end of the page – to find out how they can save the world together.
Now, let’s take a look at some elements that will help you understand how you can use storytelling in UX design. The list we provide is not exhaustive, as it’s all about creativity and out-of-the-box solutions. So think of it as just a start.
Things that make storytelling
The storytelling is used at different levels. It can form the overall principles of user experience or define the choice of menu icons. The most strategic storytelling starts at the very basis of product design and becomes a core of holistic user experience.
Customer journey map
This is the invisible side of storytelling in UX. We’ve had quite some articles on this blog about journey mapping, and if you take a look, you’ll clearly see what role storytelling has in customer journey maps.
When the relationship with the user is seen as a journey, it opens lots of opportunities to communicate that throughout the product design.
Let’s get into more details and see how separate elements impact storytelling.
Dialogue
Dialogue might not always tell a story, but as long as it tells something, it will drive attention. And it makes dialogues a powerful storytelling tool.
The page from Slavery Footprint, which explains the presence of slave work in our daily life, is made in a form of a dialogue with a person who can’t believe that they are somehow related to slavery.
The text is asking and answering the questions that probably go through the mind of a person visiting the website. Presented in this way, it captures the attention of the reader firmly.
Motion
Moving elements have great potential for storytelling. They are perfect for focusing the user's attention and connecting two episodes of a story.
Smart scrolling patterns, highlights, and micro interactions – all of these slight or not-so-slight movements impact the impression from the page.
Here is the header of the Figma landing page. It combines words and motion while showing the words as if they were edited in Figma in live.
Colors
Colors bring various associations. And they have an impact on unexpected levels. Studies found out that people tend to eat less food when it is served on red plates, and eat faster when the interior of a restaurant is red or orange (yes, that's what fast food restaurants have in common).
As for interface design, there are color "traditions" as well. Bright colors for CTA, blue for social and fintech. Using these associations along with the others, deeply rooted in human culture, makes color an essential element of visual storytelling techniques.
When making a redesign for Refera, a dentist referral app, we decided to switch from blue (very common in healthtech) to green (also common, but not too much).
Illustrations and photos
Over the last years, as illustrations are reclaiming the public space lost since the 1920s, we see it everywhere in digital products.
Refera used to have illustrations on their landing page. When we started working on the redesign of their app, we decided to put a photo of a doctor instead of abstract illustrations. It helps to create a character, a key figure in storytelling.
We are well aware that a photo of a smiling doctor on the landing page doesn’t look very trendy. But we also do know that a dentist referral app doesn’t need to be trendy. It has to appeal to dentists, not to the Awwwards jury.
Typography
Here is a story from one of our case studies, Planner. Initially, the junior designer who was working on the project wanted to use Poppins font, one of those that were trending at the time.
Later, a senior designer checked the design and recommended changing the font to Gilroy. If you see them next to each other, you see little difference. Yet, typography can tell a story. What story does Poppins tell? “I look cool, you might have seen me on some fashionable websites at Awwwards of 2021, whose names you can’t recall”. What about Gilroy? It tells a story of a font that is in line with trends, yet not trendy enough to be recognizable.
Whenever a designer picks a boring or “cool” font, there is a story behind it. If you are curious why there are few fonts that are used over and over in interfaces, read our article on typography.
What comes next?
It’s hard to stop once you start talking about storytelling. Now, we’ll just make a turn here and go to what was supposed to be the beginning of this article.
What is storytelling? We hear this word all the time, and most people assume they understand it since they know what "story" and "tell" mean. Fair enough!
Those who learned a bit more about storytelling know that it consists of exposition, rising action, climax, and so on. It is quite simple when we talk about text, but what about UX design? There is little text and the main elements are visuals.
Visuals are less eloquent, but they can tell something, too. There are so many stories told through art without a single word. And in UX, there is room for storytelling, too.
Such thing as the structure of a love story and dramatic arc find their place in user experience design. The more diverse the knowledge base of a designer, the wider their creative horizons. If you are looking for other sources of not-so-obvious UX design wisdom, check out our article about psychology in UX Design.
7 Useful Tools to Help with Your UX Audit
Did you decide to conduct the UX audit? Congratulations! You’re really serious about your business. Many SaaS entrepreneurs realize the importance of a seamless user experience for business growth. However, significant time and money spent make most of them keep this thought laying on the shelf.
I wouldn’t say that the UX audit, if being appropriately done, is a no-brainer. The good news is there are a few online UX testing tools you can use during your audit and benefit from them. In this article, we’ve prepared a list of UX tracking and analytics tools that proved to be helpful and insightful.
1. Google Analytics
Using Google Analytics for the UX audit may seem a bit of an unexpected solution. This tool typically comes to mind when we’re talking about market research and the digital marketing area. Yet Google Analytics can efficiently serve as a UX analytics tool, providing you with valuable insights regarding your website visitors, which you can utilize for user experience improvement.
Conversion is the most important indicator of website performance, and it’s not a secret that a great user experience has the power to make people take expected actions - leave their contact data, subscribe for a newsletter, or purchase. Based on various metrics, you will be able to better understand your audience’s behavior from the first minute they land on your website. For example, Google Analytics data will tell you where your potential customers come from and how long they usually stay on your landing page.
Behavior reports help you answer the questions:
- How many unique visitors visited your website?
- What were those CTAs customers reacted to?
- Which page performed the best in terms of customer engagement?
Data like demographics, interests, locations, languages, and devices let you adjust your user flow, CTAs, and overall UI. Our designers know that even the smallest detail in a page design can be a turning point leading either to checkout or to leaving a site.
By understanding users’ behavior, you can enhance a customer journey and ultimately lead more people to conversion.
As for mobile devices, Google offers mobile app analytics for Firebase that provides insights on mobile application use and customer engagement, being a good tool for UX audit.
2. Mixpanel
Unlike Google Analytics that tracks website visitors and is great to have a general understanding of traffic, Mixpanel is focused on actions users take on your webpage. This tool helps receive answers to questions like “how many users pushed the CTA button from the pricing page,” for example. The results may hit designers upon an idea of what needs to be changed in UX to improve conversion.
However, Mixpanel insights may be too one-sided, being based mostly on UX researchers’ assumptions. Thus, it would be more effective to compare Mixpanel with other analytical tools data to reach unbiased conclusions.
3. Kissmetrics
Kissmetrics is one of the most expensive web analytics tools, but it is definitely worth every penny. The tool offers robust analytics and customer behavior reports that help UX designers better understand customers and improve user experience.
The Kissmetrics functionality allows to:
- Find out what features customers use the most
- See key business metrics (churn rate, MRR, subscriptions, new trial starts)
- Identify the most viewed webpages
- Track the best customers and cohorts behavior
- Discover weak points in the onboarding funnel
Being not as detailed as Mixpanel but undoubtedly more profound than Google Analytics, Kissmetrics provides an effective mix of raw and interpreted data. Just press the “Analyze customers behavior” button and get insights helpful for your design audit.
4. HotJar
If you want to understand what people are doing on your website and what elements and information attract them the most, you can have a sneaky peek at their behavior. Nothing illegal, just a smart digital tool! Hotjar creates interactive heat maps of users’ clicks, scrolls, and moves to give you an idea of how users interact with your website.
Hotjar’s line-up consists of four products: heat maps, session recordings, surveys, and real-time feedback pools. However, heat maps are the product Hotjar is mainly associated with. The “heat” is a color scale highlighting the most popular “hot” webpage areas with red color and the least interacted or “cold” - with blue color.
Click maps show which CTAs users click the most. Also, you can find out that some non-CTA UI elements attract more attention and draw users away from taking expected actions. Being aware of these nuances, you’d probably decide to rearrange important buttons to improve user experience and increase conversion.
Scroll maps show how deep to the bottom of the page your website visitors usually go. If users don’t scroll down, it means they can miss some information you want them to know.
Move maps track mouse movements without clicking or scrolling. It can tell us what information a user finds interesting to check on your webpage.
Hotjar has a decent competitor with even more robust functionality to facilitate the UX audit.
5. Crazy Egg
Crazy Egg offers five reports analyzing users’ behavior from different sides. There are no chances something will remain hidden after Crazy Egg’s behavioral analysis.
Heatmap report highlights with different colors the most and least popular areas of your webpage. You can track whether the area where you place your CTA button falls into users’ attention.
Scrollmap report shows how far to the page bottom your website visitors go. If you think about putting your important CTA button somewhere close to a footer, you’d probably change your mind looking at the report’s results.
A lovely Confetti report displays each user’s clicks instead of a total number of clicks. You can create 22 customer profiles to have deeper insights into how each customer segment is performing.
Overlay report filters clicks by various criteria like new and returning visitors, device type, UTM campaign.
List report shows you the percentage of users who clicked on each clickable element on the webpage.
With the help of CrazyEgg UX testing, you can get a comprehensive picture of users’ interaction with your website and think about customer journey enhancement.
6. UXCam
“UXCam is the market leader in app experience analytics, empowering mobile teams with fast, contextual, and high-fidelity insights,” - states UXCam on the official website, and we have nothing to object to. This tool does have excellent capabilities for app analytics. Session recordings, heat maps, crash logs, and even integration with Firebase, a Google platform for creating mobile and web applications, makes UXCam a great addition to your UX audit toolkit.
Here is what UXCam can help you with:
- Record, analyze, and share sessions and events to identify if there are any users’ behavior patterns
- Track screen flow to overview how users interact with your app and what frictions they have
- Create heat maps to find out whether users encounter complication while using an app
- Log app crashes and UI bugs to communicate the issues to the product team to make necessary adjustments for the next app releases
The last tool in our list seems to be the greatest one as not figures, but real people tell you the truth.
7. UserTesting
UserTesting is not a conventional review site. It’s a platform where you can get prompt customer feedback on websites, mobile apps, and prototypes user experience.
You receive audio and video messages from your target audience once they will test your product and accomplish another task you assigned to them. Also, it’s possible to schedule live conversations, put questions, and get insightful answers with the help of which you can:
- Сheck market feedback on your design decisions before the product development stage
- Detect the bottleneck in user experience that causes frictions when using your product
- Make clear your customers’ needs
Small startups and large enterprises like Facebook and Grammarly are among UserTesting clients, so you can be sure it’s worth trying this tool for your UX audit.
A final word
UX audit can be a complex and time-consuming process, but with the right tools, it will reinforce the manual job your team or a third-party consultant does. However, it’s crucial to choose the tool that will serve the best to your project and accomplish the correct interpretation of findings.
We at Eleken have profound experience in doing UX audits for our clients working with various tools. Drop us a line if you ever need our assistance. Also, learn how to conduct a UX audit in our next article.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
