Instructional Design

Analysis, Instructional Design

Instruction design refers to any form of written or visual communication that assists someone to complete a task or explain how something works. Instructional designers must carefully consider their audience when designing any form of instruction. Things to consider are the type of imagery that’s used, how much text is needed, if any (think IKEA) and how easy it will be remembered. When creating instructional designs, simple illustration is preferred over photographs as they can clutter the end result. The spilt attention effect, explains how people recall information. Visual elements are easier to remember however, if overloaded with visuals, textual instruction and separate legends to understand the images, the person will more likely forget.

Waterson, S. (2019). GDIDMPOD04a [Online Lecture]. Retrieved from https://vimeo.com/319375981

Clients Tone. (2019). Government Agency. Retrieved from http://clients.tone.co.uk/natwest-fight-fraud-final/app.html
Empowability. (2019). Educational Source. Retrieved from http://www.empowability.com.au/courses/
Khan Academy. (2019). Educational Source. Retrieved from https://www.khanacademy.org/signup

These 3 examples of instructional / informational web design include the use of cards and forms. They include written directions which lead to graphics to help explain. They are primarily educational sources which aim to teach. The absence of photography is clear with these precedents as they would over complicate the instructions. They are effective examples as they use simplistic colour palettes and the focus is evident from the moment the user opens the site.

Week 4: Instructional Design

Analysis, Instructional Design, Lecture Review

In our daily lives, we are constantly following instructions. Whether it using a parking meter, the washing machine or cooking at home, we are surrounded by this type of design. It can be crucial in certain disciplines, like medical diagrams or airplane evacuation pamphlets. These types of instructional designs, like all, must carefully consider the audience, their background and presumed knowledge. This a reoccurring feature of design work, the user drives the design. As explained by Alberto Cario, the 4 main types of interaction include:

  • Instruction – (most basic means)
  • Conversation – (back and forth dialogue – SIRI)
  • Manipulation – (drag and drop – alters the appearance)
  • Exploration – (games)

Waterson, S. (2019). GDIDMPOD04a [Online Lecture]. Retrieved from https://vimeo.com/319375981

Interactive Design Precedent Analysis & Critique

Analysis, Instructional Design, Precedent Work

Below is the result of a collaborative analysis of the website ‘Beat Plastic Pollution’, which aimed to promote World Environment Day.
Group Members: Elyse Potter, Tracey Phan and Tara Pravica


What is the interactive about?

It is about bringing the awareness that usage of plastics use materials are causing our planet to be in risk.

Who is it designed for?

This site is designed on educating high school students and adults about the basic negative impact of plastic pollution it has on the world.

What knowledge does it assume of the target audience I.e. digital literacy?

The interactive site assumes that the user knows how to access the internet whether it’s using the computer, mobile, etc. It also assumes they know how to scroll and read through the website as well as clicking the buttons at the top of the page for language options.

Describe the type of user interactions, and the user interface.

The video at the end doesn’t work on my browser. There’s no audio or play/pause function. The user interface of this site has limited interaction as there is no title and menu bars to guide the users to seek the content and to reach their goals. It is very difficult to differentiate where would the users seeks the content and complete their goals due to zero interactivity. However, the interactivity map of the world through halfway scrolling clearly visualizes how much each country wastes plastics per day and the use of colours are useful to further explain it.

What can you say about the visual design- layout, colour, and typography?

Colour: The colour blue on the site doesn’t present well on screen. It’s too bright, which can be a little overwhelming, particularly when you scroll down to the stacks of plastic. Variations of colour in the graphics would also help distinguish the different images.

Typography: At the top part of the site (with the scroll interactive) the waterfall-like graphics distract from the text. Again, colour is an issue here. Lacks readability where the graphics fall behind the text. The choice of san serif typeface is very readable and appropriate to the audience but again, the movement of graphic images ruined the user’s focus on the important content of the plastic pollution timeline.

Layout: I do like the single column layout, however there is no structure to the information which makes this feature extremely frustrating – not user friendly

How would you describe the style?

It’s an informational website to help educate on plastic pollution to students and adults, with scrolling being its main function. This website uses a long scroll effect to represent their information, timeline, images and video through a single straight down motion, taking the user onto a journey. Animation of plastic is also used in the background of different sections of the site (falling down and moving left to right).

What improvements would you suggest?

  • They could add sub headings or sections to jump down to, the user has no option but to scroll through to find the content.
  • Remove the giant blank black screen at the end of the site.
  • The animated graphic added to the aesthetic on the content of the plastic timeline but removing the strong graphic will reduce distraction.
  • Keep the colour of the graphic images of plastic natural instead of intensifying with blue.
  • You could say the simple black text and blue graphics on the white background can be found a bit boring to the eye. They could’ve expanded their colour palette for the website to make it more appealing to the eye and added a different coloured or lightly patterned background.

Beat Plastic Pollution. (n.d.). Retrieved from https://www.unenvironment.org/interactive/beat-plastic-pollution/?fbclid=IwAR3mevwwWLSjeps7Pmjpz3_7tyg-KRnQmtOaSyKvvDqExgv09BWtHTor2J0