Menu Layout

23 June 2015

About six months after the launch of Barley, we added a system to embed videos to a page or post that allowed an author to access YouTube through an overlay menu. If someone had an embed code, they could paste it there to display a video. To make things easier, we set it up so that they could also simply paste the URL if they chose or even perform a search of all YouTube videos and browse their thumbnails. 

This interaction presented plenty of hurdles, but one in particular was how to layout the screen where all of this was to take place. If we’re trying to keep menus to an absolute minimum, how should all of this information be presented? We were already committed to using modal windows for nearly everything, so that was a foregone conclusion, but we needed a way to funnel users towards a particular option for adding video, then present them with the required information for that option.


As you can see, it could get fairly complex. We obviously don’t want to overwhelm any users, but it was also important to us to offer a number of options to cater to different workflows. Our solution was a multi-column screen, displaying options on the left and their unique requirements on the right. 


This was the most efficient use of space, allowing only the information for the active option to be displayed and, since both columns extend to the bottom of the window, they can easily scroll without too much confusion. Besides the space-saving qualities, the layout is likely already familiar for a majority of users. The structure is very common, appearing in nearly every system with a file structure—websites, applications, operating systems, you name it. People (especially ones updating a website on a computer) are already comfortable with it. 

Over time, the layout has proven itself—not just within Barley, but in computing interfaces as a whole. It works so well in so many instances that it has slowly taken over as the standard view for our menus. Our media library uses it, our new drafts menu uses it, and we plan on utilizing a similar system whenever and wherever possible. New and different ways of solving problems are great and, at times, absolutely necessary but sometimes things stick around for so long because they actually work. 

Follow Along:   @getbarley | support@getbarley.com

Join Our Mailing List:

Activate Site

test.getbarley.com will become accessible to the public