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

Week Six Lecture

User Scenarios


This lecture pod discusses how user scenarios may be effectively moderated in order to aid in designing a successful user interface by using a the story of a user and how they may interact or act. By considering the way certain types of users interact with a website, it will clarify what users are looking for when they visit the site. This is the testing process of a good design and it outlines who, how, when, why, where and when interactions on the site are used.

The proposed scenario indicates the users’ motivations and thought processes. A scenario as outline in the image refers to a narrative describing foreseeable interactions of users.Screen Shot 2017-04-09 at 10.22.33 am.png

However, the scenario is not a reliable prediction but it helps to highlight all possibilities that may occur when a user interacts with the site. Once there is an understanding of the person, the problem and the context in which the persona would use the product can be used to develop specifics of the design.

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

This simple design was made with only 2 screens as it considered the amount of time a user may have to interact with this design. Thus, it was designed to be a quick interaction and provide the user with what they are searching for.


This lecture pod greatly assisted in the completion of assessment 2 when conducting the persona research and placing ourselves into the shoes of the supposed user.

Week Six Lecture

Week Five Lecture

User Personas and Artefact Personas


This pod gave an insight in how to design for the upcoming assessment. It highlighted a particular process to follow.

Screen Shot 2017-03-21 at 6.17.54 pm

  • Steps to build an interface

      • User needs/site objectives
      • Functional specifications/content requirements
      • Interaction design/information architecture
      • Interface design/nav design/info design
      • Visual Design

It taught us we must consider what type of audience we’d be communicating with. Either ‘big’ or ‘small’ in terms of demographics.

big audience can mean any and all people would be find a need in the product/interface. This would be a universal design that targeted a core audience such as the site eBay for example.

small audience refers to a particular group of people who may find interest in the product or require its services. By intimately knowing the users are we able to create more specific personas and get more detailed feedback by users.

What to consider when building personas:

    • How they reach their target
    • Are they expecting cross-platform
    • Different personas for different platforms
    • Are they looking for specific item
    • Trust the site to serve what is expected
    • Direct users
    • Depends on user’s mindset
    • Task-dependent is simpler
    • User-dependent
    • Browse and searching available

The mental model describes how differently a youth or elderly person would approach a certain topic/interaction. Based on their assumed knowledge and intentions the reactions to an interface may be very different. It can illustrate how users approach your design and unveil how the user base interacts.

Screen Shot 2017-03-26 at 3.57.12 pm

Product Personality Questions:

      • What would he or she be like?
      • How would you expect users to react when they first view product
      • How would you describe this product to a friend
      • How is the product different from competitive products
      • Which celebrity (car, movie, etc.) is the product most like; least; why?


This pod was extremely helpful as it provoked me to think deeper about my target audience and focus on more than just an age-group. It also taught me new ways to thoroughly understand and research your specific audience. This has helped the process in completing assessment 2.

Week Five Lecture

Week Four Lecture

Instructional Design


This lecture pod reviews the purpose of instructional design in a screen-based platform. This is to teach a user “how to do something” or explain “how something works” through imagery/graphics with optional accompanying text.

The concept of cognitive load theory states that if attention is split between graphics and supporting text it is harder for the user to understand. The way the text and image is presented must be efficient enough so that the user does not need to remember a block of new information and then attempt to match it up with an image they may have necessarily had to experience with previously. This design was improved by considering the Gestalt principle of proximity where ‘things closer together are perceived by the viewer as being closely related’ and thus has proven to be more successful through user testing. Screen Shot 2017-03-19 at 10.58.29 am

The pod explains that photography may not be as useful as there may be too many elements in a photograph with the same visual weight. This instructional was then improved by increasing the simplicity and improving where the salient point in the graphic was by isolating using colours.
Screen Shot 2017-03-19 at 11.04.00 am

Kinds of Interactions:
Screen Shot 2017-03-19 at 11.40.22 am

  • Instruction: by clicking button
    • Eg. playing a virtual instrument by pressing keyboard buttons

Screen Shot 2017-03-19 at 11.40.32 am

  • Conversation: back and forth dialogue
    • Eg. entering data to receive data

Screen Shot 2017-03-19 at 11.40.40 am

  • Manipulation: drag and drop elements
    • Eg. placing items in folders; changing structures and appearances

Screen Shot 2017-03-19 at 11.40.49 am

  • Exploration: open, game-like
    • Wander freely to learn at own pace
    • May have an objective


After watching this lecture pod, I have a clearer approach that I would use for the assessment two design project. It helped me decide whether to use hand drawn graphics or photography, or even a mix. It also inspired me to add some features to the interface I had not thought about previously. The questions at the end prompted me to think in more detail about this project. It was a very helpful pod.

Week Four Lecture