Site Bar

11 June 2015

In a previous post, we touched on the unique issue of offering admin tools when you’ve turned your back the admin panel. Our initial solution to this was a persistent menu in the top right-hand corner that is hidden by default, but slides out on command to display a few select actions. A tiny Barley banner lived in the corner of the screen and acted as a target for this menu. Because this is where you would actually sign in, this target appeared on all sites, for all visitors. 


Because anyone could build their own template, we used gradients and shadows to account for various background colors, images, and patterns (say what you will about skeuomorphism, but gradients help things stand out across vastly different backgrounds). These styles, as well as layout considerations, conflicted with customers’ template styles at times, causing difficulties in understanding or using pieces of the menu. 

To save vertical space, keeping as much of a user’s site visible as possible, some menu items were nested in accordions, creating an extra click to get to a desired link and hiding the actual options.

All interactions were animated to appear less jolting to the user, but over time, seemed slow. Waiting for an animation to finish was soon a chore, which simply doesn’t work considering they are a luxury in this context.

It became more and more apparent that this menu was much more significant than we had anticipated. Using it, especially when developing a template, became painful. It had to go. We identified the following main issues that needed to be addressed:

  • Unreliable across different templates due to structure, styles
  • Branded tab visible to everyone, always
  • Visual style became dated
  • Shadows, gradients, colors created too much cognitive load
  • Actions, buttons hidden, cumbersome to reveal
  • Structure/order of items seemed arbitrary, made little sense
  • Slow, animations were tedious
  • Not extensible 

No longer beholden to a “hidden” solution, we were free to attack these pain points from a different angle and, a couple of weeks ago, we released our replacement. 

 


The new Site Bar is always visible across the top of a site when a user is logged in, allowing them to accomplish global tasks as well as page-specific ones.

It is simply there when you need it. No sliding in or fading out. No tab visible to site visitors. There are fewer moving parts that can break and the amount of clicks needed to accomplish tasks was reduced. Its simple style and location cut down on cognitive load and help it be much more stable, playing nicer with more templates. The new bar is also more extensible—we can (and plan to) add new actions when necessary. A great example of this is the draft count that is now displayed on hover. 

We’ve laid out actions across an axis of immediacy—higher-level items to the left, more granular items to the right. This helps create expectations of where things are located and hopefully will make a little more sense to our users.



We’re by no means finished—the iconography needs to be tweaked a bit and we have a few new actions and capabilities mapped out. But, it is important to get it into the hands of our users. We’re excited to see how they adopt it and how we can fine tune it to their workflow. As users ourselves though, we feel that the new Site Bar is an enormous improvement—one that will only get better.

Follow Along:   @getbarley | support@getbarley.com

Join Our Mailing List:

Activate Site

test.getbarley.com will become accessible to the public