Week 7 Lecture Pod…

User interface visual design patterns

In this Lecture pod we were given a brief introduction of commonly used navigation patterns. UI designs are usually thought of being how the website or app looks like; however interface design is more than just colours and shapes, its showing the users the appropriate tools that will help them accomplish their goals. The creating process is time consuming as one must understand the future users through personas their scenarios and getting the motivations right to lead the interface design.

User interfaces are much more than what they appear to be. They are the connections between the user and the experience. The interface is the first impression the user will have with the interactive. Good UI design should have a clear balance between aesthetics and effortless interactivity. Great design interfaces should guide the user through the experience. The UI design principles are hard to obey as they are so simple, one might overthink or overdo it, through their design.

Below is a diagram that displays the UI design principles.

Screen Shot 2017-04-13 at 4.17.52 pm
Image: Waterson, S. (2016). UI design principles [photograph]. Retrieved from https://vimeo.com/161435877

The UX (user experience) is the abstract feeling people get from using the website.

The UI (user interface) is what people interact with which is apart of that experience.

It is important to remember when designing your interactive that you want your UX to  be positive as possible and you want the users to enjoy themselves as much as possible. A companies design team will work on the UI user interface in order to heighten the UX experience. This is done by implementing menu options, buttons, text, graphics, videos and the placement of these. This is what makes up the interface and all components should be planned. How they are used effects how the user feels.

Screen Shot 2017-04-13 at 4.13.39 pm
Image: Waterson, S. (2016).mapping of Scenario [photograph]. Retrieved from https://vimeo.com/161435877

Here we looked at the most common UI element patterns for navigation. Design patterns are standard reference points for experience user interface designs.

Common navigation patterns


Screen Shot 2017-04-14 at 11.29.30 am
Image: Waterson, S. (2016). Navigation patterns: Tabs [photograph]. Retrieved from https://vimeo.com/161435877
Tabs can be seen skeuomorphism. It is the design concept of making items represent or resemble their real world counterparts. This design is used in all different parts of design such as UI designs, web, architecture, interior design and ceramics.

When should you use them?

  • Use them when your content needs to be separated into sections and accessed using a flat navigation structure that gives a clear indication of current location.

  • Use them when section names are too short

  • Use them when you have between 2-9 sections of content that need a flat navigation mode.

  • Use them when you want navigation to take the whole width of the page

  • Use them when you want to provide a list of the highest available sections or subsections

When shouldn’t you use them ?

  • In blogs, displaying articles
  • Don’t use them when you want to single out a current selected option

  • Don’t use them when you you’re list of sections and categories require a more link.

Dropdown menu

Screen Shot 2017-04-14 at 11.29.47 am
Image: Waterson, S. (2016). dropdown menu [photograph]. Retrieved from https://vimeo.com/161435877

This navigation would be used when your users need to navigate amongst sections of the site but the space is limited or non-exist. Dropdown menu’s provide space and time by concealing information.

When should you use them ?

  • When you have between 2- 9 sections of content that needs a hierarchical navigation structure where functionality resembles a desktop application.

When shouldn’t you use them ?

  • Do not use it when you need to single out location of current item or section.

Fly out menus/ burger menu/ drawer menu

Screen Shot 2017-04-14 at 11.30.06 am
Image: Waterson, S. (2016). burger menu/ drawer menu [photograph]. Retrieved from https://vimeo.com/161435877

This navigation design is space saving and provides the user with quick access to all key menu elements at once.

Search bar with dropdown

Screen Shot 2017-04-14 at 11.31.35 am
Image: Waterson, S. (2016). Search with dropdown [photograph]. Retrieved from https://vimeo.com/161435877

Users can access a specific functionality, its quick for users to be able to find what they want. This shortcut decreases confusion amongst users.

When should you use them?

  • Use them as a shortcut to another hierarchical structure
  • When you need a specific functionality or pages that are more frequently used then others

Big footer

Screen Shot 2017-04-14 at 11.34.56 am
Image: Waterson, S. (2016). Footer [photograph]. Retrieved from https://vimeo.com/161435877

When users need a mechanism that will allow them to quickly access specific sections of a site or application.

When should you use them?

  • You should use them as a shortcut to another wise heretical structure.
  • Specific pages or functions that are more frequently used more then other sections.
  • They can be used as navigation when you are out of space; however this is rarely used due to being seen as poor navigation design.

Home button/ Link

The sites logo should always be a link to the home page or a start location for the user. The logo should be visible on all pages of the site or application.


Screen Shot 2017-04-14 at 12.00.14 pm
Image: Waterson, S. (2016). breadcrumbs [photograph]. Retrieved from https://vimeo.com/161435877
Breadcrumbs inform users of their location and displays the relation to the entire sites hierarchy. The structure of the site is easier to understand when its laid out in breadcrumb then put into a menu.

When should you use them?

  • Use them when the users needs to know their location and the websites hierarchical structure, this will allow them to browse back to a high level of the hierarchy.
  • Use them when space is limited as they take minimal space.
  • To hint out the sites structure and content location of the pages in question
  • When site has a strict hierarchical structure of similar formatted content.
  • When the structure of site is into sections which can be divided into more sub-sections.
  • use it when the user has to come to the page through a external source. e.g search engine or blog.

When shouldn’t you use them?

  • You wouldn’t use them on the home page or as a main navigation for the site.

Content navigation Patterns


Screen Shot 2017-04-14 at 12.08.11 pm
Image: Waterson, S. (2016). Carousels [photograph]. Retrieved from https://vimeo.com/161435877
Users usually need to browse through a set items to be able to select one of them. Implementing this design in a site or application allows users to concentrate and select a few items at a time without them being confronted with a substantial amount of content.

When should you use them?

  • When theres a large set of items to show.
  • When you want to entice the users of wanting more by showing that their are more items available then what is shown.
  • When space is minimal to show all items at once
  • When you are wanting to display highly visual items to display. E.g Posters, covers, ad, products, designs

When shouldn’t you use them?

  • When items are less visual such as link, text articles or PDF documents.
  • When content link to cannot be identified straight away by an image.

Tags and categories

Screen Shot 2017-04-16 at 11.46.40 am
Image: Waterson, S. (2016). tags and categories [photograph]. Retrieved from https://vimeo.com/161435877

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