Week 7 Lecture: UI Visual Design Patterns

This week’s lecture was about UI Visual Design Patterns. UI design is about presenting the user with the right tools to achieve their goals. It is also about providing:

  • as much effortless interactivity as possible
  • a good user experience or UX
  • balancing these elements with aesthetics and graphics

The above images list important points about user experiences and user interface.

Common Navigation Patterns.png

The rest of the lecture covers common navigation patterns and elements as listed in the above image.


These replicate the idea of actual file tabs in a filing cabinet. They are useful when content must be separated into sections and accessed using a flat navigation structure. They are however not useful when you need to show specific data e.g showing latest articles.

Dropdown Menus

These are useful when user navigation is required but there is limited space. They help usability but can be difficult at times to use. They are not useful when you need to single out current item or section location however.

Flyout Menus

These are similar to the tray, tray or hamburger menu system. They have the advantage of saving space while giving access to all key menu items at once.

Jumping in Hierarchy

These help users go to different places in a website regardless of hierarchy location. These can appear in the form of a dropdown menu or search box. They are useful shortening the time spent looking for certain content and giving access to frequently used parts of a website.

Big Footer

This helps users access important or frequently accessed parts of a website that may be on a different hierarchical level. Big footers bypass navigational structures set up at the top of a site.

Home Button

This is a button that brings the user to the homepage of a site or section of a website regardless of their hierarchical location. This button commonly takes the form of a clickable logo image that sits at the top of a site typically to the left.


These are a trail that indicates the position of a page within a site’s hierarchy. These are extremely useful if a page was accessed from an external source like a search engine. These help users access higher levels of a site’s hierarchy. These shouldn’t be used however on top level parts of a hierarchy like a welcome page. They also shouldn’t be the sole or main form of navigation for a website.


These are useful when there are a series of items a user may want to look at but only a few at a time in detail. These should be used for visual items like products or movie poster but not for non visual items like links or text articles.

Reflection/The Most Important Point

What I considered to be the most important part of the lecture the last point presented. This is the point that there are many more types of UI elements in existence. I feel that this point is important to consider because it points out the need that designers constantly need to do more research.


UX vs UI diagram [image]. Retrieved 12/04/17 from https://vimeo.com/161435877

User Experience Diagram [image]. Retrieved 12/04/17 from https://vimeo.com/161435877

Common Navigation Patterns [image]. Retrieved 12/04/17 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