Week Seven Lecture

User Interface Visual Design Patterns


The interface design can be described as presenting users with the right tools to make sure the users achieve their goals when visiting the site. The key to a good user interface is the connection between the user and the experience. A good UI should strive for aesthetics and effortless interactivity.

Screen Shot 2017-04-09 at 10.25.39 am.png

User Experience

  • Look
    • Credibility
    • Trust
    • Harmony
    • Spirit
  • Feel
    • Joy of use
    • Interactions
    • Reaction
  • Usability
    • Functionality
    • Individuality
    • Predictability

The user interface patterns are common solutions to solve problems. These are navigation types commonly used on websites to assist a user in navigating through content with ease.
Nav Types:

Screen Shot 2017-04-09 at 12.07.46 pm

  • Tabs – navigation, module
    • Skeuomorphism – the design concept of making items represented resemble their real world counterpart
    • Used when content needs to be separated for a purpose and when there is a flat navigation needed

Screen Shot 2017-04-09 at 12.07.57 pm.png

  • Menus – horizontal dropdown, vertical dropdown, accordion
    • Used when user needs to navigate to sections of a website but space is limited
    • Ideal when there are 2-9 sections that need to be placed in hierarchical structure
    • Search bars with dropdown suggestions are also included

Screen Shot 2017-04-09 at 12.08.16 pm.png

  • Jumping in hierarchy – shortcut dropdown, fat footer, home link, breadcrumbs
  • Content – carousel, event calendar, article list
    • Used when needing to browse through a set of items and possibly select one
    • Not ideal if items are non-visual such as text links and titles

Others Include

  • Big footer
    • Used to quickly access specific parts that need to be found right away rather than navigating through search bar
  • Home Button
    • Used to provide a constant link to the starting page ‘home’ page
    • Usually link is placed on the website’s logo on every single page
  • Breadcrumbs
    • Used to notify the user of their location in a hierarchical structure
    • Generally used when the user has been linked in from an external-site and is deep into the linked site
  • Tags and thumbnails
    • To organise content visually


This lecture pod provided useful information and things to consider when creating a successful interactive for users. The detailed explanations of common navigation menus really helped in pointing out when or when not to use certain features; it provided a clearer understanding on elements I have usually overlooked.

Week Seven Lecture

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