Task Description:
We were asked to first create a moodboard based on “Dave Smith’s” user persona (see below) and then create two of our own user personas based on the target audience we chose for Assessment 2.
Moodboard & User Persona
Assessment 2 – Outcomes
Task Description:
We were asked to come up with 10 different outcomes for our interactive, mind map it, and have a peer choose their favourite 3 and why.
Outcomes Mind Map
Mind map of interactive outcomes
Week 4 – Instructional Design
Summary:
- 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”Indicating Interactive Change
Task Description
We were asked to implement our user interactive into a hypothetical website about toast and demonstrate the interactions the user would have within the site demonstrated by change between two images. We had to create a wireframe of the site and then refine it from there.
Wireframing
Hypothetical Toast Website
Sitemap
The Instructions page will act as the home page/landing page as it serves as the main purpose of the site. The other tabs that branch off from this are all extras that might need to be addressed separately on their own page such as the safety aspects behind making toast or if you’re unsure of what cooked toast looks like (is it cooked?).
Interface sketch
For my interface sketch, I have chosen to have my interface within the “Safety” page as it’s based on the safety protocols enacted when making toast.
Continue reading “Hypothetical Toast Website”Assessment 2 – Peer Feedback
Task Description
We were asked to review each other’s project ideas in groups of three and provide opinions on the positives and negatives while offering useful suggestions.
Project Idea (summarised)
To create an instructional interactive website that educates users about the cause and effect overfishing has on the marine environment (areas include decline in commercial/non commercial species’ population, unbalanced ecosystem & fishing industry) for adults ranging from the ages of 20-40. This would be done via an interactive that showcases a simulated marine environment where users can engage by clicking any section that represent a key area overfishing affects, prompting a pop-up that provides an in-depth explanation about said area, for e.g. clicking on the boat will prompt a pop up explaining how overfishing effects the fishing industry or clicking on the net below the boat would prompt a pop-up informing users about commercial and non-commercial species’ population/treatment.
Continue reading “Assessment 2 – Peer Feedback”Week 3 – Design Patterns
Summary:
- 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/
Making Toast – Steps and Flowchart
During Week one’s studio session, we were tasked with creating a detailed step by step instructional process on how to make toast and to then map out a flowchart based on these steps. We did this to grasp the concept of Interactive design and how the interactions work and the context behind them.
Week 2 – Process + Context
Summary:
- 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 1 – Introduction to Interactive Design
Summary:
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.
Ethan's Blog 