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

Week Three Lecture

Screen Design Basics + Design Patterns for Screen


In this lecture pod, it was discussed that conventions developed in terms of user interface and conventions developed in terms of page composition go beyond and style and just visual repetition.

According to Christopher Alexander, “…Each pattern represents our current best guess as to what arrangement of the physical environment will work to solve the problem presented.” Screen Shot 2017-03-07 at 10.34.34 pm

It discussed the common patterns in web user interface and how they should not need to be changed as they are widely used and simply serve their purpose on the web. Screen Shot 2017-03-07 at 10.37.23 pm

It then delved deeper into these various patterns and styles by listing and explaining each type. These include:

Hamburger MenuScreen Shot 2017-03-07 at 10.38.57 pm

Account Registration Screen Shot 2017-03-07 at 10.44.34 pm

Card Layouts Screen Shot 2017-03-07 at 10.47.45 pm

and many such as long scroll, hero images, animation, material design, responsive and flat design.


Through this lecture pod I have learnt what the names of various features on interactive sites are called and how to identify them. These elements are often overlooked and I was intrigued that an abundance of careful planning and evaluating has been used to produce content that all users would interact with.

Week Three Lecture

Week Two Lecture

Process and Context


This lecture pod navigates through process and context within interactive design and thoroughly explains the process undertaken when designing an interface for an interaction.

The process is highlighted through identifying the problem to be solved and clarifying what the goal is in order to plan out what the designer needs to do to be able to achieve that. According to Verplank, the design process can be summed up into the following steps: error > idea > metaphor > scenario > task > model > representation and interaction/manipulation. The process is started through rough notes and diagrams, which can be referred to as early visualisation. This will assist in selecting potential paths for the project but also making sure it will lead to the proposed goal/outcome. Prototypes should be utilised by actual users to prove the design effective in reaching the final result.

This is to achieve context through the design’s users. Techniques to engage contextually can be done via precedent research, observing people, asking them questions and test prototypes. Context is important in designing a successful interaction. Questions to consider include: what are people doing, how they may try to do it, what gets in the way or can help, and where might they be doing it.

The purpose of interaction design is to facilitate the behaviours of users so that they may engage with the design to achieve a successful interaction.


This lecture pod has effectively paved the path in which I should consider in my own process and when I complete my own tasks. I would not have thought to go through a thorough process when designing and it would prove that specific research would ensure a more successful design. The useful breakdown gave me a new perspective on how I would research and to also consider how other people and designers may view my work.

Week Two Lecture

Week One Lecture

Introduction to Interactive Design


This lecture pod provided the fundamental base in the process of understanding the concept of interaction design. It has touched on topics starting from various definitions and from a range of sources. These definitions allowed the freedom of interpretation as the full depth of interactive design cannot be described in just one way.

Verplank addressed three questions: do, feel and know. This is his interpretation of how designers search what users need, and how they respond to certain things. This way, the designer is able to provide them with choices/outcomes that is within their control and it should be executed in a way that allows users to interact comfortably and easily.

Interactivity is a broad term that has many interpretations. As a whole, it usually involves engagement and reaction from various parties. Interaction design must cater to the different cognitive ways of thinking as each user perceives the world and processes information differently.


This was an interesting and engaging first overview on interactive design. It has introduced new perspectives that I would not have considered before watching the pod. It has enhanced my understanding of interactive design which then prepare me for further reading and allocated tasks.

A quote that I found eye-opening was “Interactive media is not about information, its about experience” and how it is creating experiences for ourselves and others. This allowed me to view interactive media in a more meaningful light.

Week One Lecture