Lecture Seven: UI Design Patterns


  • UI design doesn’t only focus on the aesthetics of an interactive but rather it gives the user the right tools to carry out goals.
  • UI is more than buttons or tools for the user, it should guide them and give them a positive experience. It connects the user with the interactive by allowing them to experience it hands on and give a lasting impression.
  • UI and UX is a good balance between aesthetics and interactiveness.
  • UX focuses on the way the user feels when using the interactive as well as how the elements of the design are placed, effects the way the user feels.
  • UI design patterns refers to the common problems that have common design solutions. The patterns are just reference points.
  • Common Navigation Patterns:
    • Tabs: Nav tabs and module tabs.
      • Tabs are a representation of real-world filing tabs. This idea is referred to as ‘skeuomorphism‘, known as the design concept of making items represent their real-world counterparts.
      • Tabs are ideal when content needs to be organised into sections and when it will fill the entire width of the screen. It also shows the user which part of the content is displayed. However, they wouldn’t be used when displaying articles i.e. a blog. Or when your content has a read more link, another navigation would be more appropiate.
    • Menus: Horizontal, vertical and accordion menus
      • When there is limited space on a website within extensive amounts of content, dropdown menus are ideal as well as displaying hierarchical navigational structure.
    • Jumping in Hierarchy: shortcut dropdown, fat footer, homelink and breadcrumbs.
      • Hamburger menus are a beneficial when the goal is space-saving and quick access.
      • A search bar with a dropdown menu that displays shortcuts to the most frequently visited sites of the user.
      • A fat footer allows users to quickly access specifics of a site without searching through navigation. However, most probably the more popular functions are displayed, but should not be used to the extent of a navigation as this would be deemed as poor web design.
      • Having the website title or brand logo set up as link to the home page is important, or even having a link placed somewhere on the page that links to the home page is helpful. Though, ensure it is displayed in the same spot on every page.
      • Breadcrumbs allow the user to understand which navigational buttons brought them to their current location, in a hierarchical structure, with the ability also browse back. This is a quick form of navigation, however it shouldn’t be the main or only form.
    • Content: Carousel, event calendar, article list. 
      • Carousels are used to show extensive amounts of items, particularly visual items i.e. movie posters, products etc.

Lecture Six: User Scenarios


  • Persona = fictional user of the interactive.
  • Scenario = the context within which they use it.
  • Similarly to how a script is written for theatre or films, designers must create a user scenario, which predict how users (user personas) may interact with an interactive in a particular situation.
  • It helps the designer understand what future users may look for when engaging with an interactive.
  • Every scenario is detailed in different ways, however they should essentially include the who, what, where, why and how of the usage.


Image Source: http://www.uxforthemasses.com/scenario-mapping/

Lecture Five: Personas


  • Developing personas for a potential audience allows the designer to fully understand who their creation is aimed at.
  • Creating user personas embodies characteristics and objectives that potential users of the intended interactive may have.
  • Generally, user personas include information such as age, sex, occupation, relationship status, hobbies, likes/dislikes, goals, skills, attitudes etc.
  • Developing several personas of your audience is ideal. This can be tough as one doesn’t know who may see the project, however personas of the intended audience is enough.
  • Detail and refine the persona as much as possible.
  • Even adding a persona to the actual product as well as the user, a great method of practice.
  • When creating a product persona (referred to as Artefact Persona) the following questions should be asked:
    • If the product were a person, what would he/she be like?
    • How would users be expected to react upon first impressions of the product?
    • How would you describe the product to a friend?
    • How is the product different from other competing products?
    • Which celebrity, movie, car etc, would you compare the product with?
  • Developing these personas are the building blocks of any design process.