Instructional design

Lecture pod 4 explores instructional design and how this relates to and impacts interactive design. When using interactive design to instruct a user the interactive will be more effective if principles of instructional design are applied as this creates an easy experience for the user.

When designing instructions it is important to keep the instruction simplified and to not overload the user’s memory. Keeping instructions simplified is important as it allows for isolation of key elements and therefore does not confuse the user with unnecessary elements e.g. a photo of a step has a lot of information and is harder to interpret.  Another thing to keep in mind when designing instructions is to not overload the user’s memory e.g if legends are used or the user has to refer to a separate image they must remember multiple elements to gain a sense of understanding of the instruction. A way in which this memory overload can be avoided is simplifying and keeping relevant information together e.g. keep images close to the relevant text.


Screen Shot 2016-09-27 at 10.41.04 pm

Instructional design I have created illustrating how to make origami balloons 


Most important idea from this pod

Creating instructional design through interactive media does have its limitations such as screen size and screen resolution but the way in which it offers layers and time interaction creates endless opportunities.


Design Patterns

Lecture pod 3 explores design patterns that are used throughout interactive content. A design pattern is a solution that designers can use in multiple situations to solve a design problem. Design solutions are useful to designers as they have been pre designed and they have previously been successful and therefore can offer the designer success in their own work. However there are some downfalls to using design patterns, it can lead to many websites and other digital media looking the same and therefore it can be harder for designs to stand out.

Pattern examples include:

  • Hamburger menus
  • Account registrations
  • Long scroll
  • Card layouts (most commonly associated with Pinterest)
  • Hero images
  • Animation
  • Material design
  • Responsive design
  • Flat design



Faisal, M. (n.d.). We Heart Trees [Example of flat design from We Heart Trees]. Retrieved May 7, 2017, from

Most important idea from this pod

Design patterns are good to take inspiration from as they have been proven successful however they are not a “one size fits all” it is important to make sure that the design pattern works well for the content and context you are designing for.

UI Screen Designs

After having worked through descriptions, flowcharts, storyboarding and UI charts a design can be transferred from paper to screen.

Below is a mock up of my ‘Making Toast Interactive’, created using Adobe Illustrator.

First I created the grid and basic wire framing within the outlines of the media the interactive is designed for, in this case the iPad.


Screen Shot 2017-03-13 at 9.34.04 am

Basic wireframing for making toast interactive


Once the wire framing was in place I added in the main content.

How To Make Toast Ipad content

Making toast interface with main content


After the content had been added I created the interactive elements such as the buttons and the progress bar.


Screen Shot 2017-03-13 at 9.35.15 am

Making toast interactive with buttons and progress bar



The next layer in my illustrator file included the highlights, the highlights in this interaction occur when the user touches certain elements. This is illustrated bellow with a bold yellow.


Screen Shot 2017-03-13 at 12.10.41 pm

Making toast interactive with brighter yellow highlights


The last layer in my illustrated mock-up was a gestures layer, showing the gestures used to navigate through the content.



Making toast interactive with gestures


Making Toast Mini Site

After creating a text description, flow chart and storyboard I continue to plan out my making toast interactive on paper through creating UI flow, a sitemap and sketching out an interface design.

UI flows

UI flows are useful in mapping out a user’s journey through an interactive and planning out how you will design the interactives navigation. Based on the storyboard I produced previously here is my making toast UI flow below, it features the buttons in the interface that the user clicks through to get through each step.


Making toast ui flow

UI flowchart for making toast


Extending content

After creating UI flows it is easier to see where you can extend the content of the interaction and therefore enhance the user’s experience. As shown below I have been able to extend the user’s experience by creating sections such as “What type of bread?”, “The toastiness scale”, “Topping ideas” and “Don’t like the result”. These sections can be accessed when the user reaches a corresponding step to the extended content.


extended ui flow

UI flowchart for making toast with extended content


Navigation and Sitemap

Once I completed the UI flow I was then able to create a list of primary and secondary navigational elements within the interface. The primary elements include the main elements that the user clicks through to find out how to make toast, whilst the secondary elements are the elements that users click through to reach extended content.

Primary Elements

  • Let’s Begin
  • Next
  • Back
  • Finish

Secondary Elements

  • What type of bread
  • The toastiness scale
  • Topping ideas
  • Don’t like the result

Listing the primary and secondary elements makes it easier to produce a sitemap as shown below.


Making toast sitemap

My sitemap for making toast


Interface Design

Once a sitemap is created an interface can be designed. As shown below I have created a sketch of my interface to map out where all my elements will be located and so I can have a clearer idea of what the interface will look like for the user.


Making toast interface design

My interface design for making toast


Whilst sketching out an interface design I was able to see areas of the interaction that could be improved e.g. I created a bar showing the user where they were up to in the process of making toast.

After planning out all these steps on paper I have gained a better understanding of what the interaction will look like and how it will work and therefore I am then ready to move on to create a digital mock up.


Although storyboards are most commonly used for films and animations, they are quite useful in the process of designing interactions. The storyboard allows the designer to express ideas and display sequences in a visual manner, this is helpful to a designer as they can organise their design on paper before committing to a design on screen.

Shown below is an example of storyboarding for an interaction on making toast.


Making toast storyboard@2x

Storyboard I created on how to make toast



Process and Context

Lecture pod 2 explores the process of creating an interaction and how important it is to understand the context in which users will use the interaction.


When creating an interaction it is important to start with low tech methods e.g. pen and paper. By sketching out ideas, writing out descriptions and creating flow charts it is easy to completely understand the activity or problem that you are designing an interaction for. Once you have completely understood the issue and explored ideas through pen and paper then it is necessary to use more high tech methods to fill in all the details and work towards creating the final product.

Bill Verplank’s 8 step process

Bill Verplank approaches an interaction design process within 8 steps as illustrated below.


[Bill Verplank’s interaction design process]. (n.d.). Retrieved from


To design successful interactions it is important to fully understand the context of which they will be used in. To gain this knowledge many questions should be asked and scenarios in which people will use the interaction should be created. There are many different questions a designer should be asking, such questions include:

  • What are people trying to do?
  • How are they trying to do it?
  • What gets in the way or helps?
  • Where they might be doing it?

Most important idea from this pod

When designing an interaction it is important to follow a good process that involves a lot of planning, thinking, researching, looking at precedents and exploring the context of an interaction. Without these things an interaction will not be as successful as the designer would not have put in the proper time to learn and explore their ideas to their full potential.



Flowcharts and Text Descriptions

When trying to understand or explain a process creating text descriptions and flowcharts are quite helpful as they make you think in detail about a process and make you think sequentially.

Text Descriptions

Text descriptions allow you to list the steps for a process in as much detail as you need

e.g. How to make toast

  1. Connect the toaster into a power point and turn it on
  2. Set the the toaster to your desired setting
  3. Take 1 or 2 slices of bread and insert into each of the slots on the toaster
  4. Pull down the lever underneath the slots in which you inserted the toast
  5. Wait for the toast to pop out of the slots
  6. Check the toast to see if it is to your likings and either discard the toast, toast again or continue to the next step
  7. Take the toast out of the toaster and add desired toppings


Before making a flow chart it is best to write out a text description so that you have a reference of all necessary steps. A flow chart can help you communicate a process and it can also help you identify any issues or loops in your instructions.

How to make toast (2 slice toaster) 




My flowchart created for how to make toast