Week 7 – User Interface Visual Design Patterns


User Experience VS User Interface

User Experience VS User Interface
  • UI Design is the connection between the user and the experience, the first impression and the lasting impression that either makes a website familiar and helpful or forgettable and annoying
  • Good UI Design should strive for a balance between aesthetics and effortless interactivity, well designed interfaces should guide the user through the experience
User Experience diagram
  • User experience is the abstract feeling we get from using a website whereas User interface is what people interact with as part of that experience
  • User interface is designed to be positive for the user to heighten the user experience
  • Menus, buttons, text, graphics, videos and where each are placed on the page make up the interface and should all be meticulously planned, these are the components of the User Experience and how they’re used directly affects how the user feels

Design Patterns

  • Design patterns are recurring solutions that solve common design problems and act as standard reference points for experienced user interface designers
Common Navigation Patterns


  • Tabs are an extremely common navigation pattern and they come from the real world example of actual tabs in a filing cabinet
  • They can be seen as an example of skeuomorphism which is the design concept of making items resemble their real-world counterparts

You should use it when…

  • Your content needs to be separated into sections and accessed using flat navigation structure that gives a clear indication of current location
  • There is between 2 – 9 sections of content that need a flat navigation mode
  • Section names are relatively short
  • You want navigation to fill the entire width of the page
  • You want to provide a list of the highest available section or sub sections of the website

You shouldn’t use it when…

  • There’s no need to single out the currently selected option
  • The sections or categories call for a “more link” (consider another navigation type)

Dropdown Menu

  • Saves space by concealing information
  • Not regarded as a technique that increases usability as they can be difficult to use

You should use it when…

  • A user needs to navigate among sections of a website but the space is limited
  • Functionality resembles one of a desktop application

You shouldn’t use it when…

  • You need to single out the location of the current item or section of the site, you would then use navigational tabs

Flyout Menu

  • Space saving and quick access to all key menu items at once

Search Bar with Dropdown

  • Users can access a specific section or functionality of the website in a quick way regardless of hierarchy
  • Hierarchical structure of a website can at times, impede the path to a specific functionality of a website
  • By adding a shortcut to the most frequently use functionality, the path can be shortened and the number of clicks lessened, and the confusion decreased

You should use it when…

  • You need a shortcut to an otherwise hierarchical structure
  • There are specific functionalities or pages that are more frequently used than other parts of the website and use the shortcut box to show these choices in order to shorten the path of the user

Big Footer

You should use it when…

  • Users need a mechanism that will enable them to quickly access specific sections of the site or application and bypass the navigational structure you set up at the top
  • You want a shortcut to an otherwise hierarchical structure
  • There are specific pages or functions that are more frequently used than other parts of the website
  • You want to use shortcuts on different hierarchical elements of the page

Home Button

  • Normally a front page of the site or section of the site
  • Always use a home button or clickable logo
  • Should be situated in the same location on all pages


  • Shows the user their location within the website’s hierarchical structure in order to browse back to a level in the hierarchy
  • Informs the user of their location in relation to the entire site’s hierarchy
  • More easily understood rather than put into a menu
  • Takes up minimal space

You should use this when…

  • The website uses a strict hierarchical structure of similar formatted content
  • The structure of the site is partitioned into sections which can be divided into more sub-sections
  • The user has landed onto the page from an external source e.g. from a blog or search engine

You shouldn’t use this when…

  • You intend to implement this as the main navigation or on the top level of the hierarchy e.g. on the home page


You should use it when…

  • The user needs to browse through a set of items and the user needs to select one of them
  • There is a large set of items to show but allow the user to concentrate his or her attention on a few select items at a time
  • You want to tease the user, letting them know there are more items available than is currently shown
  • There is not enough space to show everything at once
  • Using display items such as movie posters, album covers, products, designs (highly visual items)

You shouldn’t use it when…

  • The items are non-visual elements such as links, articles or pdf documents
  • Content isn’t easily identifiable with an image


This week’s lecture pod was worthwhile as it guided us through the relationship between the importance behind designing a user interface and how it influences the user experience. This is a concept that our own projects for Assessment 2 are heavily based on and it provided clarity in how to approach this. I also found the breaking down of design patterns with the use of navigational patterns as examples, very valuable for understanding how something like menus vs search bars can greatly affect easy usability and the user path. This information helped solidify my choices in navigational tabs for my interface and if it was appropriate to apply a dropdown menu for my third navigational tab.

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