Improving the way users compare product performance
Quite a bit of my work is looking at the “big ticket” items in the User Experience. While I love this strategic work, there are times when picking up a small part of the experience and doing something tactical can produce results.
Note: The following has been reworked to protect client confidentiality. All images open in new windows.
Part of a responsive website allowed the user to compare the performance of 3 products against one another. This was intended to allow them to see trends and make informed decisions about how they managed their accounts.
Key data that was coming out of the user feedback and research included:
- the date selection approach was clumsy and required users to constantly adjust dates to see basic information
- charts were being used to compare relative performance and trends, not for any detailed analysis
- if users did want to see a specific value at a specific date in time they had to use a different tool to get it
- analytics showed users were predominantly looking for one week or one month views on data.
Ditching the date picker
I trialled a four pre-sets approach, choosing day, week, month and year focus points based on today’s date. Early tests put it at the top of the page as tabs. This didn’t work as well as placing it under the chart and the default was set as a weekly view.
There was also an experiment where there was no title, although again this was a little confusing for users. Placing a title at the top and adding dates to it helped the user to understand what they were looking at.
The existing UI used a line chart to show the progression of numbers, with each product displayed as a different colour. Initially the desire was to replace this with a bar chart approach with bars placed side by side to give direct comparison.
For a narrow time horizon this worked well. At a month, however, the chart was difficult to interpret and at a year was close to unreadable. Tests suggested anything over a fortnight would be easier to read and interpret as a line chart.
Showing the numbers
Putting the numbers front and centre on the UI proved more problematic. Although it was possible to do it on a one day horizon, longer ones quickly became unreadable.
Given the user research suggested numbers were used to spot check, I decided to add some interactivity to the chart. The could tap on a part of the chart and the respective values would appear next to their key.
This idea quickly fell apart for two reasons. The first was it wasn’t intuitive; rather than see data where the finger was placed, the eyes had to shift down. The second was a practical problem as the finger could easily cover the values.
Instead I settled on a hover-over where the data (and date for clarity) would appear. Proposed interactions were a second tap to dismiss it, or the ability to drag it to change the values being displayed.
Putting it all together
Individual mock-ups are great for putting across the concepts, but I wanted to test the flow and make sure it was as simple as possible. Using Keynote I created a simple PDF prototype that you can access here.
My tests showed there are areas where further improvements could be made. In particular I would want to introduce a way for the user to select dates and potentially introduce some horizontal grid lines to help distinguish where values lie. Even without these amendments the reaction has been positive enough to suggest it would still be a major step forwards.
This was an experiment that took a few hours to target a niggle factor in a user experience. While it’s tempting to only hit the big ticket items, there’s usually scope to slot in some smaller things that chip away at problems in your UX.