UI design of funnels tab

Hi

I think that the UI design of the funnels could/should be improved.
Right now, the setup is horizontal, with vertical bar charts.
In general, vertical bar charts give problems with longer labels (and as you combine both the identifier and the step into one label, the labels get really quickly really long!)
Besides, with many steps (well, not so many actually), you have to scroll horizontall, something that is not so good usually.
Lastly, vertically aligned bits of information are easier to scan for a human then ones placed horizontally, next to each other.
Therefore I would like to suggest something like this:

Code (CSharp):

1. step1      ::::::::::::horizontal bar chart::::::::::::::::::::
2. step2     :::::::::horizontal bar chart:::::::::::::::::
3. step3     :::::::::horizontal bar chart:::::::::::::::
4. step4     :::::::horizontal bar chart:::::::::::::::
5. step5     :::::::horizontal bar chart::::::::::::::

EDIT: in the docs the setup looks much better?? Why is it not like this? This is how it should be! And what happened to the date picker?

 

For reference: this is what I see.

 

@Jelmersb

Great feedback, I do see your point and perhaps having a way to toggle between each style would be better.

The vertical layout was how we used to format the funnels. The horizontal layout that you now may have been more preferable for developers. It does have the capability to display more data.

In regards to the format of the text in the graph; I know that as you have more funnel events, the text does format better, as shown in the screenshot I've uploaded.

I'll put this to our dashboard developers to see their thoughts.

 

Hm, interesting. Could you elaborate on how the vertical bar charts are preferred by developers?
Also, working as an interaction designer myself, I really wonder how the vertical chart could have been chose over the horizontal one, if you take readibility into account. Those 45 degree angled texts are not exactly a generally accepted "good" example :/

What kind of user testing has been done when redesigning the panels? (just out of interest on your design process )

 

@Jelmersb Your points are valid and we learn best from feedback.

I spoke to our dashboard team and put your questions to them. Here is what they said....

We've talked to a number of unity developers that felt the vertical funnel was easier to visual in determining the drop off. They used Facebook analytics, Heap and google analytics as all good examples of vertical chart funnels. I think the toggle idea of picking vertical or horizontal would be great, and something we can explore in our next release. I’ll talk to the team about adding the date picker back.

We understand preference can be different for professionals such as yourself and it is part of our mission to help make everyone's life easier.

 

Thanks for checking, i see that you do have changed how labels are shown in the graph. This is a big improvement for the problem I described above, so for me personally I think the toggling between horizontal and vertical is not necessary. It was mostly about "how to make sense of the graph", which is solved. thanks!

(date picker or a way to see how the conversion rate has developed over time would be useful I think)

 

I'm happy I could help. Thanks again for bringing this to our attention.

Have a great day!

 

It seems that the design has changed on the bar charts, for the worse. Now labels are cut off again. Even on mouseOver the labels are cut off. I'm sorry but this is amateurism when it comes to UX design.

You are not following WCAG2.0 either (too low contrast, for exmaple). In some countries, that is against the law. And it's a good indicator of the capability to create good UX solutions.