Week 7 – User Interface Visual Design Patterns


User Experience VS User Interface

User Experience VS User Interface
  • UI Design is the connection between the user and the experience, the first impression and the lasting impression that either makes a website familiar and helpful or forgettable and annoying
  • Good UI Design should strive for a balance between aesthetics and effortless interactivity, well designed interfaces should guide the user through the experience
Continue reading “Week 7 – User Interface Visual Design Patterns”

Week 6 – User Scenario


What are User Scenarios?

  • The stories that your personas act out
  • Thoughts and exercises, in which you predict how different users will interact with your website in a given situation in order to complete a given goal
  • Let you understand what your future users will look for when trying to complete tasks on your site
  • Provides visual representation of your problem when a user fails to perform the task to solve later
  • Allows you to test your site structure before it’s fully developed and isolate problems before they become problems
  • They should outline the Who, What, Where, When, Why and How?
Example of user scenario mapping with posted notes
Continue reading “Week 6 – User Scenario”

Week 5 – Personas


User Personas

Above provides two diagrams, the first being an overview of the interactive design processes and the second being a refined version of the prior into a user experience design model.

User Persona: Fictional users representative of our real users who we reference throughout our creative process to inform and validate our design and user experience. They represent the goals and behaviour of a hypothesised group of users, synthesised from data collected from users, including behaviour patterns, goals, skills, attitudes, and the environment or context with a few fictional details to make them realistic.

Continue reading “Week 5 – Personas”

Week 4 – Instructional Design


  • We interact with different instructional designs everyday e.g. refilling toner in a printer
  • Cognitive Load Theory is based on how think and how we remember, applying that research into creating the most effective ways to deliver instructions
  • Working Memory refers to how we manipulate information stored in our short-term memory

The image below refers to how our working memory affects our ability to efficiently carry out instructions. The “Before” image shows a chunk of text on the left hand side providing steps for the viewer to follow, paired with a diagram on the right with letter labelled parts that blend in with aspects of the illustration. These labels also have a key of reference located elsewhere on the manual, making this extremely difficult for the reader to retain and execute. The “After” image however, portrays the redesigned manual, where the steps have been summarised and the diagram is larger and labelled properly, creating an easy experience for the reader.

Continue reading “Week 4 – Instructional Design”

Week 3 – Design Patterns


  • Provided a brief introduction to screen design basics and design pattern
  • Christopher Alexander states that design patterns and interactive design go beyond style and are more than just visual repetition, they’re similar and reusable solutions that have a working function often seen in interface and software design
  • There are nine types of design patterns commonly used as described below:
    • 1. The Hamburger Menu: 3 parallel horizontal bars, used as a button, usually displayed on the top left or top right of a website and typically results in a menu of pages or options. They’re favoured for saving space on the screen.
    • 2. Account Registration: A pattern for registering an account which might include either a form fill out or social account button to sign up. People are more likely to start a small process when presented with a small step rather than engage in a long list of steps presented all at once.
    • 3. Long Scroll: A technique that works well for sites that want to lure users with storytelling as the entire site is laid out through one continuous scroll. You can mimic multipage site layouts by breaking the scroll into clear sections.
    • 4. Card Layouts: A site layout using only cards, pioneered by Pinterest. Cards are everywhere on the web because they provide information in bite-sized chunks and they each represent one unified concept, usually including a title, a username, a picture and various icons. These are useful for responsive layouts as their rectangular container makes it easy to rearrange on different devices.
    • 5. Hero Images: A large banner image used to grab the user’s attention. Often used above the scroll followed by either a zig zagging section or card spaced arrangement.
    • 6. Animation: Split between large scale and small scale animations used to enhance a site’s storytelling. Large scale animations are primarily used as an attraction tool and have more impact on the user e.g. parallax scrolling and pop up notifications. Small scale animations are used to entertain users during tedious processes and include spinners, hover tools and loading bars which don’t require any user input. Check out this article about websites utilising parallax scrolling: https://speckyboy.com/parallax-scrolling-web-design-inspiration/
    • 7. Material Design: In 2015, Google launched it’s new style language, “material design”, utilising shadow effects, and the concepts of movement and depth to create designs that appear more realistic to the user. The goal was to create a clean design that will focus on user experience.
    • 8. Responsive Design: Can easily restructure to fit any breakpoint or screen size. Great to work with cards.
    • 9. Flat Design: The absence of 3-Dimensional effects such as drop shadows to create a user interface that only uses simple 2-Dimensional elements and bright colours. Check out this article about websites utilising flat design: https://speckyboy.com/flat-web-design/
Continue reading “Week 3 – Design Patterns”

Week 2 – Process + Context


  • Discussed the relationship between process and context behind Interaction Design
  • Bill Verplank’s 8 distinct faces of Interactive Design:
1) Invention Stage: Error –> Idea, 2) Design Stage: Metaphor –> Scenario Development, 3) Engineering Stage: Task Analysis –> Modelling, 4) Representation Stage: Graphic Presentation –> Interaction/ Manipulation
  • Project ideas start with early visualisation such as diagrams or flows to help identify direction or missing information and the most appropriate next steps and a consensus about what the problem is that is being solved and what goals you are trying to achieve
Continue reading “Week 2 – Process + Context”

Week 1 – Introduction to Interactive Design


Week one’s lecture pod provided a brief introduction into the field of Interaction Design by defining what it is alongside an explanation of what other types of design and design principles are at play within this field. Bill Verplank’s video clip provided some more insight into Interaction Design by explaining the three key questions that Interactive designers get asked frequently and how this affects the Interactive designer’s approach to their work. Gillian Crampton’s interview went a bit more in depth with this topic by tying in the mindset created by the three frequently asked questions with real life examples of Interaction Design and how people react to it. Experience Design was also touched upon through a flow chart explaining how Data becomes Wisdom and how this philosophy relates to the approach of Interaction Design.

This chart portrays the various design disciplines that contribute to Interactive Design
Continue reading “Week 1 – Introduction to Interactive Design”