But before I dive into some of the usability issues I see, which would require layout changes, I wanted to first talk a bit about whitespace (and maybe some horizontal lines).
Here is a screenshot of what the UI currently looks like:
This is only the top half of the UI. To see the whole thing, go here.
Let's first discuss whitespace.
At first glance, the UI looks like it is broken up into five main sections:
Focusing on the top left half, maybe the sections are actually broken up like this:
as it seems that sections have a section title followed by a horizontal line. But then again, maybe not as the other two sections (orange and brown do not have section headers). But let's assume that the latter is what the sections are supposed to be.
So, if these are indeed the different sections and they all have the same "weight", then it would seem that the section titles should all line up (and have the same font).
But as you can see with the green vertical line, the titles of the three sections do not line up. So, maybe what they really mean is that the two sections below are actually subsections. Those two should line up then, right?
No luck there either. The last go of it would be that the "Quick Selection" (blue) is actually a subsection of the "Netflix -site" (purple) section. If *that* is the case, then why do the horizontal bars that mark each section all align the same?
Just with these little horizontal lines and differing white space, on this lefthand panel, I am getting conflicting information about what are the sections in this page.
Now, let's move over to the right hand graph section. I don't see a section title here so I'm not quite sure what the graph is trying to show me. Only by looking at the legend do I have any idea what the chart is trying to illustrate. (Side note 1: did you know that you can change the chart by clicking on the buttons list labeled "metric" on the lefthand side? Didn't realize that these two sections were even related, but they are. Subject of another post! Side note 2: Do you know what that vertical grey bar in the chart is trying to tell you? That's the date that you have selected. Holy crap that took me a very long time to figure out...)
Secondly, let's look at the section right below the chart that, by whitespace, looks like it should be modifying the graph above it. Unfortunately, it does not. It actually modifies the section to the left ("Quick Selection") and below it (brown section as there is no title).
I'm not sure why it is indented in such a way that seems to imply that it is a subsection of the above section, but that is what the whitespace is telling me. Additionally, the brown section below, with its horizontal line that spans across the entire interface, seems to show that the information below it is independent of any of the sections above it:
However, as I mentioned above, the search panel above actually modifies what is shown below. It is a bit jarring to see controls that seem to be related to one section actually modify another.
And you know - the more I looks and play with this UI, the more I realize that my initial thoughts via the whitespace about each of these sections are completely wrong. This could simply mean that I just don't know what's going on, but I also think it may indicate just how confusing the layout already is and we're still not talking about actually using the UI yet...
I have a lot more thoughts on the UI, but this post is getting pretty long. I have thoughts on how to fix some of these white space issues, but I'll probably have to leave that to another post!
