U, I and Everything In-between…

U, I and Everything In-between…

Thoughts behind the Axosoft UI overhaul

Until recently, some of our customers have been, shall we say, forthcoming in their feedback on our UI and their frustrations with it. Some were eloquent in their summaries. Here’s a good example:

OUCH. But fair.

We appreciate all criticism, and we take it seriously (especially because we don’t want to be responsible for thousands of designer deaths per day). We knew that the time was right for UI improvements, but the opportunity really presented itself recently, when Axosoft’s marketing team finished a rebrand with a new look and visual aesthetic. This was the perfect starting point for our designer to create a visual exploration of how a reimagined Axosoft UI might look.

And so the journey begins

With a laptop and a dream, the Axosoft team embarked on what would end up being a 4-month journey through a forest of UI and UX micro-improvements. There were arguments. There were certainly tears. There were moments when discussions about hex values produced faces in pure #ff0000. But we came through it, and the process helped us set the stage for the next version of Axosoft. Here is a rundown of what went into just a few of the many changes we made, and why we made them.

Colors… more colors!

The most noticeable change in Axosoft is the color palette that was applied across the system. The design and marketing team had developed the brand and provided general direction, using our internal style guide to help us apply things to Axosoft. One of the ways we applied color to enhance the experience was through making more visual distinctions between larger segments of the application to allow people to see groups of content more clearly and to make sense of a system with less thinking.

Principles like this are nothing new, and in fact, they correlate to a well-known theory in cognitive physiology: Gestalt. The mind wants to group things together that make sense, and in this case, the Organize panel’s behavior and functionally made it a candidate to visually separate it from the list of items in the main view of Axosoft.

Comparison of the color and tone of the UI before and after V17.
On the left (before), all 3 regions are of similar color and tone, suggesting equal relation. On the right (V17), the Header and Organize Panel are recolored to provide a visual connection between those panels. This reinforces the fact that these two panels contain UI elements that control the display of the Main Panel.

Additionally, many people often found themselves confused about why certain work items were not in view. It turned out that for most of these cases, certain selections and filters were applied without the user being able to clearly see that this was the case.

Utilizing color to help identify some of these states has made it easier to see that there is a change in the system and that your view has been altered. One area where this revision can be seen is in searching your work item list. Along with in-context search messaging, we added in some of the key alert-focused colors from the design system to make it easier to identify when a search is active in the UI.

Signal to noise, I can’t hear you. Is this thing on?

What are we looking at? This may seem like an obvious question, but it can be hard to answer if you work with any large-scale application. In an ideal world, the tasks and behaviors that are used most routinely are the ones most visible. We felt it was time to move some of the less used UI elements of Axosoft out of the main area so they would compete less with the more important elements. These lower-order elements are still easily accessible but aren’t clogging up the main area. The visible toolbars are the biggest areas where we applied these types of changes–reducing the number of visual options helps make it easier to choose the existing ones. We also increased the size of the components within the main toolbar, while reducing the size of surrounding elements to reflect the priority they should have when you’re using Axosoft.

By reducing the number of options in the main toolbar and removing the toolbars from individual panels in the UI, it is far easier to focus on relevant content instead of deciphering where things are and what they do.

I suggested the tagline “Axosoft, now with 72% fewer toolbars!” to the marketing team, and the enthusiasm in the room was palpable:

It’s the little things…

Some UI changes are more subtle than others, yet can have a huge impact on the day-to-day usage of an application. We made quite a few of these changes in version 17.

Counts for your item details

While we removed things that were less relevant, we also added some that were more so. Simply by adding a number next to each item in the right panel, it is now easier to see not only whether information exists or not, but also how much information is there. Knowing the difference between 2 work logs vs 14 can be important in understanding how much attention a particular work item is receiving compared to another.

Sorting, sizing and ordering your stuff

One of the most powerful aspects of Axosoft is its customized views, which can be set up and defined by each user. There were particular areas in the application that made it difficult to perform some expected adjustments (or did not allow it at all), such as moving content around within the Organize panel, or resizing the lower details when viewing an item in a new window. As these issues were identified, we tried to make it easier for users to manipulate the Axosoft UI for their needs.

The Organize panel sections now have menu options that can easily be repositioned within the group, and you can immediately sort your comments or history from within each detail section, instead of having to manage this elsewhere.

These changes may seem like subtle solutions to trivial issues, but such issues can add up to be considerable annoyances. Our aim is to continue making these improvements to annoy you less!

Stay on the cutting edge of software development by getting innovative tips, trends and stories delivered to your inbox every month!

Agile project management software
Plan, develop, review, and ship fast

Visit Axosoft.com

The downright luxurious Git client
For Windows, Mac & Linux

Visit GitKraken.com