Rethinking the Traditional Topbar Menu

I posted recently about my efforts to convert a quiz app project from class into my own MEAN-stack REST-ful website.  A big part of this project was adding features common to a website but not to a class project, like navigation to get from one view to another.

I started the app with a traditional black topbar with my five main views written across it in text.  But my page content is fairly sparse, with lots of white space and minimalist lines.  The topbar felt incredibly heavy, distracting from the content and weighing down the aesthetic.  I started to think about other options.

A number of liabilities present themselves with topbar navigation, including:

  •  The topbar effectively cuts off the viewing space of the screen by 1/2 inch, which is particularly problematic since height is desktop screens’ smaller dimension.
  • In a day of flat ui, a solid topbar competes with the solid content blocks.
  • As the first thing the site visitor sees reading from the top-down, the topbar menu can take away from the wow moment you want someone to have when they visit your site.
  • When the mouse is spending a lot of time on the scrollbar, the topbar navigation system is not always quick to get to.

By contrast, the nav system I settled on — the right-hand vertical bar — allowed me to put the navbar close to the scrollbar and out of the way of the content, so no need to maneuver around the navigation (see screenshot below)!  I chose common icons with tooltips on hover to explain each one.  The hidden tooltip feature allowed me to cover a lot of information with minimal permanent space usage.  When I compared their pixel footprints, my topbar used NINE TIMES as much screen space as my vertical bar — +1 for the vertical bar!  Finally, my vertical bar complemented the overall aesthetic instead of competing with it.

I’d like to see the design dialog re-opened to look at non-traditional options for the navigation that are easy to hide and easy to access.  Here’s my idea.  What’s yours?

 

questionsthree

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s