Image: Waterson, S. (2016) UX vs. UI [Screenshot]. Retrieved from https://vimeo.com/161435877
In this weeks lecture it focuses on introducing, the common UI element navigation patterns. Web and User Interface (UI) design is sometimes mistaken with how the website looks, the graphic design. But interface design is not just about the colours and shapes, but also about presenting the user with the right tools to accomplish their goals.
User Interfaces are just more than about buttons, menus and forms for users to fill out. It is the connection between the users and the experience, the first impression and the lasting impression that either makes a website feel familiar and helpful or at best invisible, forgettable or annoying.
Good UI designs should strive from balance of aesthetics and effortless interactivity. Well user interfaces should guide the user through the experience.
Image: Waterson, S. (2016) User Experience [Screenshot]. Retrieved from
User experience is the abstract feeling people get when using a website. User interface is what people interactive with is part of that experience. When designing a website it is critical to use user experience to be positive as possible and want users to enjoy being on the website.
Designers usually work on the user interface (UI) to heighten the user experience (UX). Menu options, buttons, text, graphics and videos and where each element is placed on the page, resulting in making the interface.
Common UI element navigation patterns refer to the common solutions that solve common design problems. Design patterns are standard reference points for experienced user interface designer
Common Navigation patterns include:
Image: Waterson, S. (2016) Common Navigation Patterns [Screenshot].
Retrieved from https://vimeo.com/161435877
Image: Waterson, S. (2016) Tabs [Screenshot]. Retrieved from
Tabs are commonly used navigation patterns and is an example of a skeuomorphism which is a design concept of making items resembled real world counter parts. Skeuomorphism is commonly used in many design fields including user interface (UI) and web design, architecture, ceramics and interior design.
Using tabs is usually applied when your content needs to be separated into sections and accessed using a flat navigation structure that gives a clear indication of current location.
Designers would also use them when there is between 2 to 9 sections of content that need a flat navigation mode, when:
- Section names are short
- When the whole navigation will fill the entire width of a page
- When wanting to provide a list of the highest available sections or sub sections of website.
It is essential to not use tabs when:
- Wanting to show content specific data e.g. showing latest articles in a blog.
- Singling out the current selected option
- When list of section or categories call for a more link. If wanting a more link, will need to consider another navigation pattern.
Image: Waterson, S. (2016) Dropdown Menu [Screenshot]. Retrieved
Designers would use dropdown menus when the user need to quickly navigate among sections of a website, but the space structure is limited. It saves space by organising and concealing information. Drop down menu does not regarded as a technique that increases usability as they can often be difficult to use.
Fly out menus only allow to show top levels of the page hierarchy permanently. Designers would use dropdown menu when there 2 to 9 sections of content that need a hierarchical navigation structure.
Designer can use dropdown menus when:
- Functionality resembles one of the desktop applications and that they imitate that metaphor.
It is essential to not use dropdown menus when:
- Need to single out the location of the current item or section of the sight, then use navigation tabs.
Below are examples of fly out menus (also known as drawer menus, hamburger or tray menus)
Image: Waterson, S. (2016) Fly Out Menus [Screenshot]. Retrieved
Jumping in Hierarchy
Shortcut drop down – Search bar with Dropdown
Image: Waterson, S. (2016) Search bar with Dropdown [Screenshot]. Retrieved
Using search bar dropdowns, users can access specific functionality of a website in a quick way regardless of hierarchy. The often hierarchical structure website can at times impede the path of specific functionality of a website and by adding a short cut to the most frequently used functionality. The path can also be shortened and the number of clicks can be lessened and confusion decreased.
Designer can use search bar with dropdown menu when:
- Short cut to a hierarchical structure
- Specific functionality pages that are more frequently used than other parts of a website.
- The short cut box to show the choices in order to shorten the path for users.
- Shortcuts to pages that are possibly on different hierarchical levels of the page.
Image: Waterson, S. (2016) Big Footer [Screenshot]. Retrieved
Designer can use big footer when:
- Users need a mechanism that will enable them to quickly access specific sections of a site or application and by-pass the navigational structure set up on the top.
- Short cut to hierarchical structure or different hierarchical structures on page
- Specific pages or functions that are more frequently used than other parts of a website.
- Use the shortcut box to show the choices in order to shorten paths for users.
Home Button (or Link)
Image: Waterson, S. (2016) Home Button [Screenshot]. Retrieved
It is usually a standard design where the design logo is linked to the home page. The home page is generally the front page of a site or start section. Always using a home button or clickable logo is essential and to do this, designers should create a link or starting point or front page of website on the site’s logo on every single page on website. If site doesn’t have logo it is essential to create a link button that titled “Home” to bring users back to the front page.
Image: Waterson, S. (2016) Breadcrumbs [Screenshot]. Retrieved
Breadcrumbs inform users location in relation to the entire sites hierarchy. The structure of the website is more understood when its laid out in a breadcrumb than if it is put into a menu.
Breadcrumbs take up minimal space and even though not all users use them, they still hint at the structure of the website and the current location of the page and question.
Designer can use breadcrumbs when:
- Users need to know where their location is on the website hierarchical structure in order to browse back to a high level of hierarchy.
- The website is using strict hierarchical structure of similar formatted content.
- The website is partitioned into sections which can be divided into more subsections.
- The user is most likely landed on the page from an external source e.g. a link from a blog or search engine.
- There is top navigational structure
It is essential to not use breadcrumbs when:
- Wanting to put it as the top most level of the hierarchy, typically on the welcome page.
- Wanting to use it alone as the main navigation for the website
Image: Waterson, S. (2016) Carousel [Screenshot]. Retrieved
Designer can use carousel when:
- The user needs to browse through a set of items and possibly select one of them.
- Large set of items to show, but wanting to let the user concentrate on their attention only on a selected few items at a time.
- Tease the user by letting them know that there are more items available than what is show.
- Don’t have enough space to show all of the items especially if highly visual based such as images.
It is essential to not use carousel when:
- The items non-visual such as links to text articles or PDF documents.
- The content link to cannot be immediately identified by an image
“I think the most important aspect of the lecture would be for designers to clearly identify what types of design patterns that fit their user interfaces, because with clearly figuring out aspect of things like drop down menus, search bars etc. Allows the site to look aesthetically pleasing whilst being functional tool for users to use. This as a result will allow users experience to be positive”
Therefore it is essential that all designers must consider the design patterns that are found in the user interfaces for, with a clear user interface, users are able to have positive user experiences with the interactive site.