On the main Brandwatch blog we talked about the importance of Queries and gave you some tips and tricks to help you master Query writing.
Defining a good Query structure is without doubt important, but when it comes to typing and testing a Query definition users should be able to easily recognise possible errors and, most importantly, figure out how to quickly fix them.
In my previous post, Improving Query Builder Error Notifications (Part I) we described how we improved the Query validation system by analysing the previous user experience and highlighting the points of failure (pain points). Then we started thinking about which features we could put in place to provide our users with an effective and helpful Query validation.
Prototyping the new experience
After defining improved error cases for the Query validation, we, the UX designers started sketching some ideas gathered in the ideation phase and shared the created artifacts with colleagues, stakeholders and existing users. The rapid prototyping phase had begun, allowing us to test with real users and rapidly iterating again, thus enhancing the user experience.
Some of the early sketches we created
So, what’s new?
What features did we develop to achieve our goals?
The gutter area
The gutter makes for a great shelter
We introduced a gutter area for the Query editor. It has two great benefits, especially for long Queries:
- after testing their Query, if the system triggers some errors, users can scan the gutter area to quickly identify the lines where the errors are. When writing a new Query, we highly recommend our users to break the Query into many lines so that they will get better clues of where errors are located
- the line numbers can be a good reference when users collaborate with other colleagues in writing a Query or when they need support from Brandwatch
By scanning the gutter area users can quickly see in which lines errors are
Highlighting makes life easier
The gutter helps users find the error line, but that’s not enough. Highlighting single errors directly in the Query definition was our new goal. This task required a strong collaboration between UX, Front-end and Back-end devs. Usability tests, carried out with internal and external users, helped us find the best solution to enable our users to quickly scan for errors even in long Queries.
Notifications and tooltips
The right message can make the difference between… life and death
Providing an effective validation means not only showing errors but also suggesting ways to fix them. Tooltips could be useful to achieve our new goal. In our first approach error details were shown when users moved the mouse on the gutter area, but we soon discovered two pain points:
- users didn’t have any clue of the correlation between the highlighted error and the error detail shown in the tooltip
- providing a list of error details when multiple errors occurred in the same line increased the users’ cognitive load
Users didn’t have a reference between the error and the related detail
A list of error details contributed to increasing the users’ cognitive load
After starting a new iteration, we sketched an alternative way to solve the pain points that emerged in the usability tests.
Showing a tooltip directly on a highlighted error has the advantage of pointing users to the problem thus helping them to quickly fix it.
Tooltips pointing users directly to the problem
When we re-defined, improved and prioritised errors we also defined two different notification levels based on their impact on the overall validation process:
- Errors: high impact. They have to be fixed before saving the Query definition.
- Warnings: mid impact. Users can decide whether to address the issue or not.
The invaluable importance of our users’ voice
Improving the Query validation system required strong team collaboration across various disciplines (software engineering, product management, interaction and visual design and quality assurance). Usability tests and user surveys provided us with valuable insights into the users’ behaviour, helping us make Brandwatch better.