Simon de la Rouviere

So. I plan to now and again (when the vibe takes me) post a blog of UX gripes I encounter in the wild.

First up is Hootsuite’s Dashboard. I’ve been using Hootsuite as my primary Twitter client for a while. Twitter’s main site kept behaving badly, and I was already using hootsuite to check up on other Twitter activity (multiple accounts, ie @tweeklyfm and @twimemachine).

One thing that irritates me about Hootsuite is the position of the refresh button.

It’s position is there to indicate that if you press the refresh button, it will refresh the current tab (as opposed to all the tabs). I don’t use automatic updating, because I don’t like Twitter “continuing”/”updating”/”refreshing” in the background. Apps that have notifications distract me. When the apps don’t have notifications, I still choose to refresh manually, because having it refresh automatically creates a sense of urgency that I have to check it every now and then, which is equally as bad (for me).

Fitt’s Law: “…the time required to rapidly move to a target area is a function of the distance to the target and the size of the target”.

The refresh button being where it positioned means that often times you can overshoot the mouse pointer and then ‘reverse’ to the button. The mouse is usually to the right of the button when it has to start traversing.

The problem is, is that if you overshoot and, your cursor hits that left sidebar… and if you stay on it for a second or so (estimated a second), the sidebar pops open to reveal more information on the icons. Like this:

 Which means, I now have to move my mouse out of the region (so the sidebar collapses) and then slooowly move back to the refresh so that I don’t overshoot again. It slows me down, is downright irritating and not well thought out.

How would I fix it?

The other buttons (“choose refresh time” and “+Add Stream”) to the right of the refresh button isn’t used a lot, not nearly comparable to refresh button. I can imagine use cases where users won’t really use the refresh as much as I do, but I can’t image it being used less than the buttons next to them. In other words, I don’t see why it should be grouped so closely to those buttons. It should be close (especially the ‘arrow’ button), but it need to be close so that you accidentally click on it. Also the grouping of icons so close to all the side-bar icons might make it more difficult on the user as well. It is kinda jumbled.

I would move the refresh button all the way to the right of the screen.

That bar there is used to shift how many tabs you want to have on your screen. The further right, the more can fit in. Again, that control element won’t be used as much as a refresh button.

The problem with shifting things to the right, is the possibility of a scroll-bar interfering if you overshoot. On Chrome and OS X, there is no scroll-bar (because Hootsuite uses a fixed layout). I am not sure if it is the same on other environments. Even if a scroll-bar interferes, it is still substantially better than a sidebar constricting access to your refresh button. Also: Why be shy of space? The above mention slider, refresh button, refresh options button and ‘add stream’ is the only control elements in that bar.

Move the refresh button to the right and make it larger.

This way, the refresh button is still on the same level of hierarchy (on a tab), it is larger, it won’t interfere with a sidebar and it isn’t jumbled amongst the other (possibly confusing) icons.

If you have any inputs, please share them. Would like to learn of other places to put it!