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.
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.
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/
Discussed the relationship between process and context behind Interaction Design
Bill Verplank’s 8 distinct faces of Interactive Design:
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
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.