Lecture notes – week 7

UI visual design patterns.

  • mistakenly mixed up with the visual design itself they way the graphics looks
  • rather its about presenting the user with tools to achieve the goals or purpose they desire.
  • it is much more than just buttons to click and navigation to go through

it about the relationship between the user and the interface it is matched with.

A good design is matched with good aesthetics and effortless user interactivity.

  • well designed should guide users through the experiemce
  • the interface is what they interactive with
  • you want your users to enjoy your app or interface

from buttons, to menus, graphics and any extras should all be put to meticulous plan to achieve the “look, feel and usability” as part of the user experince.

common navigation patterns

  • tabs
    • navigation tabs
    • module tabs
  • menus
    • horizontal drop down menus
    • vertical drop down menus
    • accordion menus
  • jumping in hierarchy
    • shortcut dropdown
    • fat footer
    • home link
    • breadcrumbs
  • content
    • carousel
    • event calendar
    • article list

tabs are extremely common navigation patterns that are literally taken from the real-world examples from files in a filing cabinet.

you use tabs when content needs to be split in to sections. it opens into a flat navigation mode.

dropdown hides information, you use it when their are 2 to 9 sections placed in hierarchy. space saving and allows users to access all main section of the apps.

search bars with drop downs. used as shortcut to other sections, meaning the user has less clicks in order to receive the information allowing for ease of use.

Big footer allows user to access specific information in a quicker way, by passing the navigation layout you have set for them.



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