When we refreshed the editing interface in the content management system last month, the new element menu bars were a big hit. It was nice to update from the intentionally neutral look and feel to something with a little more of a high-end application look. Still there were a few minor tweaks that didn’t make it into the final release that I wanted to get back to.
Add me
The first update was to the layout of the Add Element control that sits at the bottom of every element. The original version (somehow I don’t have a screenshot of this) was a bit jumbled layout-wise, lacking proper spacing between the items. I've also added a clear title to the top making it easier to differentiate between "add" and "share".
Drag me
The new UI refresh introduced the ability to drag and drop elements between regions on the page. Our rockstar programmers knocked this out quick and just a little CSS made it all come together. But the active area of the control bar menu and the drag-able area conflicted, making things a bit confusing. The solution turned out to be pretty easy. I slimmed up the active area of the menu link to be just a bit wider than the text label. This left the rest of the bar available for dragging, making the operation easier to perform. The addition of the infrequently used CSS cursor property gives the user feedback that the item is drag-able by changing from the standard cursor to the system move cursor.
Here the active area of the menu and drag-able bar are clearly separate.
Make it pop
The biggest issue was that the newly-dark control bars got a little lost when displayed on design templates that had dark or black backgrounds. There was a sight grey gradient from top to bottom that at least popped them off the background, but it still wasn’t as good as it could be — especially as in the example below in which the background color uses precisely the same grey value as the control bar highlight.
The solution was to add a bit of a rim around the controls so that they had the proper definition no matter which background they appeared on. So, I added a very subtle grey (matching the highlight) border around the bottom and sides of the graphic. The 3D effect is much like a rim light that slightly illuminates the edge opposite the light source and actually improves the overall dimensional look. But adding just the grey border wasn’t enough. On light backgrounds it made the edges fuzzy and it still would disappear when displayed on a similar grey. The next step was to add a second border outside of the grey — this one black ?? to create more contrast with the background. The end result is much more effective. The control bars now look great on grey, black and most any other color. And what is best about the solution is the subtle, deep greys are nearly invisible on white so the original look remains intact. Take a look at a before and after comparison below:
The old menus are on the left, and the new on the right.
How’d you do that?
Of course, this is the web, so even this innocuous little change was a bit tougher than I expected. The original solution used five small PNG images, some extra mark-up, and CSS to to create transparent, rounded-corner, bars. The new look required another element in the mark-up and one more image to complete the effect. The solution is interesting enough that I’d like to write about the specific technique in my next post. It builds upon the popular Sliding Doors technique which doesn’t work with true transparency. Look for that in the coming days.