November 30th, 2015 by inflectra
In accordance with the theme this month of user interface updates and user experience in general, we'd like to talk about some of the UI changes being made to our Rapise test automation product. These changes are based on the results of user testing and feedback from our customers. It's an interesting topic because it shows the dramatic impact the UI can have on an application.
As you may know, we're refreshing the user interface of SpiraTeam and KronoDesk in their next releases to be more modern, lightweight and easier to use. They are web applications and there are many tools at our disposal that weren't available in 2011 when their current UIs were developed - Bootstrap, KnockoutJS, jQuery to name just a few!
However when we started looking at the two embedded web pages in Rapise - the Start Page (designed to help new users get oriented) and the Spira Dashboard (designed to help you manage your test cases in Spira from the convenience of Rapise) we realized that they were also not as well designed as they could be and that it made sense to apply the ideas from SpiraTeam. In this case we were constrained to keeping the functionality as-is and to continue to use the older YUI web framework that was already in place.
The current Start Page was designed to mimic the colors and layout of the underlying Windows application, however we found that the overall impression was of a bunch of grey boxes with the headings that were hard to read and text that was too small to understand. Most users skipped over this page and starting using the ribbon at the top. This completely destroyed the purpose of this page, which was to make it easier for new users to get started!!
With the new Start Page, the same elements are in place, but we moved the guide for new users right to the top, rather than having it buried under the current test information. Once they choose to hide this guide, the order then reverts. We also removed many of the borders on the page and avoided having grey on grey headings to make everything more legible.
We use also mimicked the Bootstrap styling to make the page look more modern and also to be familiar to users of our website or SpiraTeam 5.0. Finally, increasing the body font size by several orders, make the content come alive instead of being buried under the UI chrome. The finished product looks like:
The Spira Dashboard was designed to make it easy for users working primarily in Rapise to be able to see their test cases and test sets in SpiraTest / SpiraTeam and be able to open, save and execute tests directly from within Rapise. This important idea was unfortunately lost to many users because it was not clear what this page was for and the positioning of the elements meant that the most important information (the test case / test sets) were displayed below the fold:
If you scroll down, you might see what you're looking for:
In addition, many of the same issues with the Start Page were also present, weak use of contrast and color meant that it was hard to see the information and the large numbers of similar looking buttons made it difficult for a user to see what were their primary actions.
In the modified version, we have simplified the SpiraTeam header and moved the less important widgets to the right-hand side. We also have added (+) prefixes to some of the buttons to make it immediately clear that they add something and we have differentiated between the primary buttons (which are in orange) and the secondary actions which are in white. To make them easier to scan, the grids now have lighter borders and striped rows as well as orange headers that more clearly mark out the test cases from the test sets:
As you can see, by making fairly modest changes, you can dramatically improve the usability of an existing application without having to completely re-engineer it.
Ask an Inflectra expert:
SpiraTest combines test management, requirements traceability & bug-tracking
SpiraTeam brings your teams together, managing the entire application lifecycle
SpiraPlan lets you manage your programs and portfolio of projects like never before
Orchestrates your automated regression testing, functional, load and performance
The ultimate test automation platform for web, mobile, and desktop applications
The help desk system, designed specifically for software support teams
Cloud hosted, secure source code management - Git and Subversion
Exploratory testing capture tool that automatically records your testing activity
Let us deal with the IT pain so you don't have to. Or use on-premise if you prefer.
Our customers work in every industry imaginable. From financial services to healthcare and biotech to government and defense and more, we work with our customers to address their specific needs.
Our products do not enforce a methodology on you, instead they let you work your way. Whether you work in agile development, Scrum and XP, Kanban and Lean, Waterfall, hybrid, or Scaled Agile Inflectra can help.
If you want to learn more about application delivery, testing, and more take a look at our whitepapers, videos, background papers, blog, and presentations.
Customers use our tools to help automate repetitive tasks and streamline their business processes using our Robotic Process Automation (RPA) solutions.
We collaborate with a wide range of teams to bring our customers a range of services (including load testing, training, and consultation), complimentary technologies, and specialized tools for specific industries.
Learn how different organizations have benefited from using Inflectra products to manage their software testing and application develooment.
Outstanding support is the foundation of our company. We make support a priority over all other work. Take a look at our support policy.
Discover great tips, discussions, and technical solutions from fellow customers and Inflectra's technical experts.
If you can't find the answer you're looking for, please get in touch with us: over email, phone, or online.
We are constantly creating new videos to help customers learn about our products, including through in depth webinars, all freely available along with a wide selection of presentations.
We provide a number of resources to help customers learn how to get the most out of our products, with free online resources, virtual classrooms, and face to face.
Read about Inflectra, our manifesto, and values. Meet our incredible customers who are building awesome things. We are focused on their success using our tools.
The Inflectra Blog contains articles on all aspects of the software lifecycle.
In addition we have whitepapers,
background articles, videos and
presentations to help get you started.
Events are a big part of our awesome customer service. They are a chance to learn more about us, our products, and how to level up your skills with our tools.
We actively partner with companies and individuals all over the world. We are also a great place to work and encourage you to explore joining our team.
Please contact us with your questions, feedback, comments, or suggestions. We'll get back to you as soon as possible.
When you need additional assistance (be it training, consulting, or integration services) our global certified solution provider partner network is ready to help.
At Inflectra, we are fully committed to provide our customers with the very best products and customer service.
We want to help developers extend and customize our tools to fit in with their needs. We provide robust APIs, sample code, and open source projects.