UI Visual Design Patterns – Week 7

User experience vs User Interface;

User Experience is defined by:

  • Personas
  • User stories
  • User research
  • Usability testing

User Interface is defined by:

  • Layout
  • Visual design
  • Branding

They are both linked through wireframes

User Experience is broken down into: Look, Feel and Usability

  • Look: Credibility, Trust, Harmony and Spirit
  • Feel: Joy of use, Interaction and Reaction
  • Usability: Functionality, Individuality and Predictability

Common navigation patterns include:

  • Tabs (navigation and module tabs)
  • Menus (horizontal and vertical dropdown menus and accordion menus)
  • Jumping in hierarchy (shortcut dropdown, fat footer, home link, breadcrumbs)
  • Content (carousel, event calendar, article list)

Using these navigation patterns:

  • Tabs: when there’s 2-9 navigation modes and you want them to take up the entire width of the page. Don’t use when you want to show content specific data
  • Dropdown menus: when users need to navigate between sections of a website. They save space by organising and concealing information
  • Drawer menus: they are space savers and allow for quick access
  • Search bar with dropdown: users can access specific action or functionality of website
  • Big footer: users as shortcut to hierarchical information
  • Home: create safe space for users to know they’ll be redirected to a familiar page
  • Breadrumbs: take up minimal space and hint to layout of page
  • Carousel: when users need to browse through set of items

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