User Interface Functionality

by Posted on

Menu Systems

For my chosen UI design pattern, I am focusing on menu systems. Due to my particular interest in information architecture, I felt it fitting to explore tierd menu systems futher. I am interested to see how companys have integrated multi-tiered menu systems into their web design and if they haven’t, explore why not.

Examples of Hierarchical Menus on the Web

1. Evernote

  • The drop-down box takes advantage of both colour and space
  • The information is organised in an easy to digest and logical way, in a plain white box with simple, on-brand icons
  • When the cursor hovers over an option, the selected box turns green
  • The left-to-right flow, flexbox style, 3-to-1 layout accentuates the compare option

2. Pluralsight

  • The user clicks ‘Courses’ to show drop-down box
  • The second-tier menu is listed on the left-hand side
  • These options can be hovered over to reveal the corresponding third-tier options on the right
  • Three categories on the right are always the same (‘Courses’ ‘Paths’ ‘Assessments’)

Wayfair

  • User hovers over the main menu bar at the top to show drop-down box
  • Second-tier options are broken down to third-tier options for a more precise categorisation
  • Space is utilised with relevant categorical advertising, displayed on the right

4. PlayStation

  • User clicks on a top-tier menu option to show a blue menu bar, filling the top strip of the page
  • Second-tier menu icons are all different shapes and sizes to draw particular attention to certain products/offers etc.
  • The menu bar is always the same height on the screen but the elements inside are arranged differently to fill the space

5. Booking Holdings

  • User hovers over the top-tier menu to reveal a black menu bar
  • User hovers over other top-tier options to present corresponding second-tier options
  • The menu bar stays the same height throughout

6. Object Design

 

  • When the user clicks on the hamburger menu icon, displayed in the top right of the homepage, it expands across the whole page to show the main menu
  • A visually hierarchical menu is displayed with showcased projects with large images to attract attention. Top-tier menu options are in plain white text
  • When menu options are hovered over by the user, the text is crossed out to signify selection

7. Buzz Worthy Studio

  • This hierarchy is shown across two full pages of content
  • Their landing page presents the user with a list of projects
  • When these options are hovered over, the whole screen changes to a background image of an example of the project
  • When the ‘Menu’ icon in the top right of the page is clicked, navigational options are listed
  • When these second-tier options are hovered over, the image on the left changes and the bubble container morphs

8. Iconinc

  • When the menu button, displayed in the top left, is clicked, the left half of the screen is filled
  • The second-tier menu is revealed when top-tier options are hovered over

9. Google

  • A well hidden, collapsible menu is grouped in the top right corner of the search engine’s homepage with additional navigation options
  • When the grid icon is clicked, a drop-down box shows hierarchical options with corresponding icons

10. Netflix

  • Netflix’s entire website is a menu of tv shows and films
  • Content is organised into genre categories
  • Netflix Originals are advertised with long poster images to promote their own brand, however, categories like ‘Watch It Again’ have smaller thumbnails
  • When thumbnails are hovered over, the box expands and a short preview is played

Analysis

Whilst each of these websites displays unique examples of hierarchical menu systems, there are some common themes to pay special attention to.

The drop-down menu box is generally common across the web but Evernote, Pluralsight, Wayfair, and Google, have all executed it well. Evernote’s example displays the diligent use of colour and space, giving the user the option to compare all the available price plans without navigating further than the homepage. Pluralsight showcases it’s own second-tier and third-tier options in a creative and interactive way by integrating an internal hierarchy, and Wayfair has chosen the best menu system for their circumstance because of the sheer amount of content they want to advertise.

A drop-down full-width menu bar appears on the PlayStation and Booking Holdings websites when the user clicks on or hovers over the menu icons and spans the whole width of the screen. PlayStation’s visual design approach of incorporating dual-coding (icons next to the text) works well to advertise their main products whilst also giving users the option to browse within the same category. Booking Holdings’ menu benefits from staying the same height as it’s longest drop-down list because the user will remain more immersed in the options. Relying entirely on text and smooth animations, this sleek design may function well but alongside the minimalistic colour scheme, this menu could be perceived as uninteresting.

A full-page menu has been used for more artistic examples, Object Design and Buzz Worthy Studio, to showcase their web design skills and creativity whilst navigating users around the site. This technique would not be useful on an e-commerce website as it is a confusing layout for general users. Alternatively, Netflix offers a luxury streaming service, so if the menu options were anything but full width, the design would be massively compromised.

Iconinc has used a half-screen menu, and even though it is the only example shown here, is a very popular web design trend. This extended version of a sidebar menu can only be used on desktop sites and is shown as visually dominant as it overlaps the main content. This technique can also be seen in gaming pause screens where players can still see their progress in the background but want more options in the meantime.

The two ways in which users can access a menu is by either hovering or clicking. Hovering can be beneficial because the user does not have to put any effort into revealing menu items but can also be frustrating when users are generally looking around. It can seemingly ‘pop out of nowhere’ and hide other important elements on the page. However, having to click almost has the opposite effect, where content can be hidden if the icon/button doesn’t stand out enough.

The Good and The Bad

My favourite example here has to be Evernote, purely because the information flows nicely from left to right and it solves such an awkward problem for a lot of websites. We have all had a choice of multiple products and had to navigate an awkward comparison selection system and having it in the main menu massively minimises time and effort.

The weakest link is, unfortunately, Buzz Worthy Studio. I appreciate all of the points I have pointed out above but on the whole, it was the least user-friendly for wider demographics. It caters to a small user group of technically competent customers and whilst this may be their target user group, this could impact their chances of gaining new customers.

Reflection

Going this deep into researching menu structures was challenging. The most difficult part was always having to keep technical functionality as the core idea. It was easy to get distracted by colour and form, but stripping these frills away showed me that menu designs can be organised into the four main categories listed above. Becoming aware of the organisation of information on a website is something that really interests me and I hope to get more involved in this subject in the future.

SSStyle

With the brief to invent a menu style that had never been done before, the idea for SSStyle is based on a hybrid of UI patterns featured in my last research post. I noticed that a majority of the menus cover a part, half or even all of the screen when hovered over or clicked. Taking inspiration from the seamless flow of Evernote and the artistic flare of Object Design, I wanted to see if I could create a unique, innovative, AND user-friendly menu system. The challenge was yet to come.

I started the process by writing down some key points. These included:

  • User Group: Teens/Young Adult/Adult
  • Mechanic: Tiered menu
  • Menu style: Full-page menu
  • Sector: E-commerce
  • Platform: Desktop

I thought of some creative design elements to incorporate along with some transitional icons to reveal the menu tiers and a colour that I associate with each theme.

Hand-written design specs

The natural progression was to draw up a wireframe. I like to draw up my ideas on paper first, so I sketched 4 screenshots. One of the main landing page, one of the full-page menu display, one of the information button and one of an example product search page.

Hand-drawn paper wireframes

On the reverse side of the paper, I annotated each screenshot to give context to the images.

Hand-written texts for the paper wireframe

Digital Mock-Ups

To digitalise my ideas, I needed to choose the best program for the job. I chose Adobe Illustrator because it’s very familiar to me so I could have more creative freedom in a short timescale, but mainly, I wanted a higher fidelity mockup than what is achievable in Adobe XD.

For the landing page, I copied my paper wireframe almost exactly. As I was designing, I came up with more ideas to incorporate and the result is displayed below.

SSStyle landing page pt.1

SSStyle landing page pt.2

  • The user is greeted with the top landing page
  • The text zooms down to the bottom of the page and the white opacity filter is lifted from the background
  • When the user hovers over each side it expands slightly, overlapping the other half of the page to show visual dominance
  • The user can then click anywhere on either half of the page to open menu options

I went on to draw up the concepts for the full page menu. This is very rough design to get my ideas into a digital format and needs a lot of work, but in general conveys my idea well.

SSStyle menu page pt.1

SSStyle menu page pt.2

SSStyle menu page pt.3

  • In the first screen, the user clicks on the water icon to reveal the first tier menu
  • Once an option on the first tier is clicked, the second tier is shown
  • If the user needs to go back, they can just click on an option from the previous tier
  • Show me more brings them to main e-commerce pages

For the last set of mock ups, I have created wireframes for the main content pages. These are shown when the user clicks ‘Show me more…’ and contains product images, prices etc. I have clearly labelled the main elements of the page.

This menu style is unique because it enables the user to still view a full page of products whilst being shown additional options. It can work well for a smaller website, with minimal links, but could run into trouble when tested on a website with a larger menu scope.

SSStyle sales page pt.1

SSStyle sales page pt.2

  • The main logo is placed in the top left and is linked to the homepage
  • The members area options are in the top right
  • Next to the member area are the surf/snow icons. When the user clicks this, they are directed to the opposing section
  • The menu in the top bar is the top tier menu section (as seen in part 1)
  • When the user clicks on a top tier menu option, the second-tier menu bar appears at the bottom (as seen in part 2)

Pros and Cons

Whilst drawing up my design, I noticed some critical pain-points and areas for improvement in my idea. As an e-commerce website, this mock-up does not let the company advertise products or offers on the homepage. Additionally, the menu icons are not in an intuitive place, therefore some substantial code-breaking would have to be executed by the user. Having said this, some nice pros to this example are, that the client is offered a fully immersive experience, and there are minimal options to choose from, so decision making is generally a lot easier.

Reflection

Upon reflection, there are two main downfalls to my practice in this project.

Firstly, even though I thoroughly enjoyed using my design skills, my creativity went too wild in this project. I wanted to create a completely unique experience but as I was wireframing, it quickly became clear to me that this would not be user-friendly for my chosen audience. This technique would work a lot better for a more creative setting, for example, a portfolio website or gallery. I try to apply an iterative process to my projects so I can find things that work and those that don’t, but unfortunately, in this instance, I just didn’t have enough time.

Secondly, I didn’t have enough time because the wireframes I produced were too high fidelity for this stage in product design. If I had stuck with black and white wireframes, I would have more time to think of functionality before aesthetics. This is a valuable lesson that I am glad I have learnt early in my career and will be keeping this in mind from now on.