ThousandEyes User Interface

I haven't felt the need to post anything for a really long time - so the blog has been stagnant for a while.  A few days ago though, a friend of mine linked me to his company's blog post that talked about how their product was able to easily detect the root cause of an AWS outage (route leakage by Axcelx, ICYMI).  In the post, it had a few links to some working demos of their UI that was supposed to illustrate how "easy" it was to detect the network faults.  I put "easy" in quotation marks as I honestly was a bit surprised (sorry, R, going to apologize first) how unintuitive the UI was.   When I got to the UI, I was at a complete loss at what I should be focusing on or what the UI was trying to tell me.  Yes, it had a lot of information and it was pretty darn performant for the amount of data it was rendering, but it just felt difficult to understand.  I know I am not the typical user of this product (network admin/guru I am not), so my frame of reference may not be exactly correct, but I do think that even without understanding the goals of the target users (of which I am sure there are at least two personas), there are lots of changes that can be made to this UI to make it much better.

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!

  

Thinking outside the box - for me.

Recently, I had a conversation with my TL about selecting a subset of items from a large list of items (100s, 1000s?). The problem we were running into was that displaying all of the items at once was hanging the browser. Specifically, the widget we were using would completely hang IE7 when there is more than 200 items in the widget. I commented that this was a showstopper since we officially support IE7 and that we had to solve this, and the TL just responded with "If IE7 cannot handle such a large number of items, then we can't support this request." At first, I was annoyed at his flippant attitude since this basically meant we weren't going to be supporting a feature that seemed very likely (e.g., supporting a large list of items that needed to be selected), and he was the TL. He was supposed to help me solve this problem! Couldn't we do paging? Maybe we could do some fancy smancy scrolling + AJAX to get data in multiple sections! We could NOT just throw up our hands and say "Oops, this is a problem. Sucks for you."

After adamently arguing for a while, I realized that my TL wasn't really saying what I thought he was saying - which was "Give up." Instead, he was telling me to think outside the box of what the user is actually trying to do. Specifically, it doesn't seem likely that the user would ever want to be shown 100s of items at once so that he can make a selection. If he's looking at 100s of items and only wants to select a few, there must be some sort of criteria that he is using that we could probably leverage to help make his selection easier. By limiting his selection of items based on some filtering criteria, not only do we make the user's life easier (no need to see 100s of items when he only is looking for 3 items), we also completely sidestep the browser constraints when showing 100s of items! Looking at it this way definitely makes much more sense than insisting that "we must support showing 100s of items at once via
some fancy widget!"

I think the main "caveat" of going with this type of solution instead of the "fancy widget" solution is that each developer will now need to figure out how to create a useful filter for the user for each time there is a large data set. There is no way to find a "silver bullet" filter that will correctly (usefully?) filter large data sets in all cases. The "fancy widget" solution would definitely solve the problem with all large data sets since it'll always be able to (somehow) show all of the data, but upon thinking about user goals just a little bit more, it just doesn't make sense to build a fancy widget that does exactly what we think it needs to do, but completely misses the user goal's of why he is looking at this data set in the first case.

Vanguard

Let me start off by saying that I love Vanguard.  I love index funds, and Vanguard definitely has quite a selection.  Plus, low expense ratios are nice.   They were also one of the first companies that had an online website (Not having to call to make transactions?  Genius).  And in general, even if Vanguard hasn't entirely embraced Web 2.0, they still seem to make a decently usable (albeit somewhat slow) website that gets the job done.

Yet..there are a couple of things that I feel that could vastly improve some of the user experience:

1.  The location of the "Automatic Investments".  This is Vanguard's current navigation structure.

I'm generally used to going to "My Portfolio" to (naturally) look at my portfolio.  Considering how the primary/first level tabs are laid out, the only tab that seems to be geared to my account is "My Portfolio".  Then under the secondary tabs, "Accounts & Activity" seems like a natural location for everything there is to be said about my different accounts (Individual Accounts, IRA Accounts, etc).  Here is the what that looks like now:

And in general, I'm pretty happy with this overview of my accounts and funds.  The problem comes when I actually want to set up a recurring bank transfer to any of these accounts.  Notice that it's pretty easy to perform certain actions on this page "Buy & Sell", "Transaction History", and "Cost Basis".

and since "Set up automatic transfer" is not an available option, and technically, "automatic transfer" is "buying shares", I would naturally click on that selection.  However, this is not where "automatic transfers" is located.  And in actuality, this page really only allows you to "Buy, Sell, Exchange."  So, I head back to the original page.

I can tell you that after much frustration that "Set up Automatic Transfer" is no where on the "Accounts & Activity" page.  In actuality, I think it's probably in one of the most unintuitive locations possible: "Account Profile":

<

And I will admit that after much thought, I can understand why< this information might be located in this section, but I definitely never would have found this on my own (S had to call Vanguard to do this himself, and as he watched my frustration increase exponentially, he quickly told me its secret location before I exploded).

Note:I see now that (Is this recent because I definitely did not notice this a few days ago when I was trying to set up automatic transfers) that when I click on "Buy & Sell", the sidebar includes "Set up Automatic Transfers", but if I directly click the "Buy & Sell" primary tab, no such mention of "Set up Automatic Transfer" is there.  In actuality, it is a completely different page!  This may require some more investigation on my part (and I did, and this page is a complete mess!).  However, what I wanted to say is that all of this could be vastly improved by providing some way from the "Accounts & Activity" page to directly access the ability to set up the Automatic Transfers.

2. After completing any task, be it multiple steps or not, the last page of the action (the confirmation) simply ends.  It basically feels like a dead end and I have no idea where to go next.

I'm no longer in any type of navigational flow (Which secondary tab am I under?)  There doesn't seem like an easy way to "get back to where I was" (in this case, setting up automatic transfers).  Once I finish the task, I have no idea where to go next.  I feel a little lost and disoriented; the walkthrough for the automatic transfer was so focused (showing steps on the left and navigating me toward the end goal), that the end result which simply spits me out "randomly" feels even my disconcerting than it might normally have.

It seems like there could be two possible solutions to this problem: 

1) Send me back to the "Set Up Automatic Transfers" page with the confirmation at the top.

This may not be ideal if users usually print out their records.  I don't, but I might not be the normal user.  In that case, try solution 2.

2)  Have a link somewhere near the confirmation section that lets me go back to the "Set Up Automatic Transfers" page.

3. My personal pet peeve of the moment.  WHY is there not a space between "Portfolio of" and my name?!  This isn't a usability thing per se, but it drives me insane.  It makes the site look a little less professional.

There are quite a few other minor things that frustrate me about the Vanguard site (While playing around the site to figure out Issue #1, I discovered more issues with "Buy & Sell" tab), but these are my top three for the moment.  What are yours?

Sometimes, you gotta look at the big picture

In the beginning, all I wanted was a widget that would allow me to add, edit, and delete entries in a table.  This seemed simple enough:

The icons seemed pretty self explanatory: plus was to create a new entry in the table; pencil allowed the user to modify an entry (after selecting one) and X was for deletion.  In the cases where the table would not have very many entries, this seemed like a pretty logical way to get things done.  (Of course there are a couple of use cases such as multiple add that this does not address, which has come up, but that is a separate topic).  I even did a couple of quick user reviews of this widget and those queried felt that the widget was pretty intuitive.

Life seemed pretty good until I actually used the widget.  When I had decided to use this type of widget, I had not considered the context in which the widget would be placed.  This lead to some amount of unexpected ambiguity.  Enter the bigger picture:

Notice how the checkboxes now seem ambiguous?  When I select those checkboxes, does it mean that I want to select those times for the schedule (the bigger picture), or does it mean that I want to perform some actions on the table that have "nothing" to do with the schedule itself?   I can say, with a little bit of reasoning, that the checkboxes are for management of the table and that all items in the table are times that will be used in the schedule.  However, this answer doesn't simply jump out, and it definitely makes the user think more than he should have to.

I'm sure some simple outlining of the table with its actions could help a little bit:  

But I don't think this solves all of the problem.  I haven't come up with a better solution yet, but the takeaway from this is: Look at the big picture when you design common controls.  There may be interactions that you don't even notice that will affect the usability of that component.