Monday, August 1, 2016

Improved HTML Navigation - Behind the Scenes

Last week we wrote about the new GUI of Machinery, which integrates all views in one consistent navigation scheme. How did we get there? This post gives some insight into the design process we went through to create the new interface.

Why?

Before, Machinery provided three different GUIs, accessed through the browser, each initiated by its own command: one for listing all available descriptions, one for viewing a single description and one for comparing two different descriptions. There was no easy navigation between these views. To give the user a way to navigate through all descriptions while showing their details or comparing different descriptions without having to leave the graphical interface we decided to create an integrated navigation concept.

How?

A typical design process consists of several phases: identifying the problem to solve, creating ideas for solutions, converging on prototypes for the most promising solutions, testing the prototypes, and implementing the best solution.

We knew what problem we had to solve so we went for a brainstorming session to create as many ideas as possible for how to do a consistent navigation between system descriptions and their comparisons. Our whole team had a meeting together with one designer for additional expertise. We split up in four groups spreading across the same number of rooms and created different mock ups, like these examples:

Tabs:

Drop down:


Burger Menu:


Each group presented their suggestions and described their thoughts and ideas behind each of their respective drafts. The whole session took not more than an hour and it was a lot of fun.

After some debate two possible solutions emerged and we decided to create prototypes of both the drop down and burger menu variants. We used the same technologies as we already had used for the implementation of the GUI, Bootstrap and HAML, for implementing the design decisions we have taken. Using these technologies as foundation made it easy to create the two prototypes quickly.

To get some data about how well the both variants worked we conducted usability tests with both. This resulted in the drop down variant being better received and understood than the other candidate.

What?

After the decision based on the usability test results the chosen prototype was polished. This first iteration was discussed and refactored and this process was repeated a second time until the final result was released.

One of the main features of the new interface is that the navigation stays the same on all different views so the user is able to switch between those using the same and familiar way of navigation and is at any point aware what the current state is. Selecting a system description is done through a popup window, which is shown in a similar way for selecting a description to show its details and for selecting the descriptions to be compared.

Comparison view showing two system descriptions


Especially for the comparison view we thought about a way to integrate both the navigation and the name of the system description, saving additional elements to not make it appear cluttered. An additional advantage of this design is that at any point the layout is structured and it is visually determined where the displayed information belongs.

The design process led us to a nice improvement of the user interface, driven by the feedback we got from users. By doing it iteratively with low-cost prototypes, we were able to check out quite a number of alternative ideas giving us a great base for selecting the best solution without spending too much time on ideas that didn't work well. All in all it was a fairly quick process. We will use it again for future design work.

If you are interested in the exact changes check out our Github repository where you are also welcome to suggest new features or submit pull requests.