Skip to main content

Effective Interface Design

 



Having created many interactive slides and digital notebooks this past year and a half of online learning, I often times get asked, "How do you just know what to put together?" My coworkers have asked time and time again for me to teach them, but can one really teach spatial intelligence and the knack for visualizing graphics? 

So with my department in mind, the aim of this project (or blog post and eventual presentation) is to support the science department goals to increase social learning, and create effective interactive interfaces to support student learning in a hybrid environment. 


Effective interface design is key to keeping learners engaged, and within self-paced courses, an easy-to-use interface enhances navigation because it is intuitive. By assessing the needs of the target audience, and understanding the needs of the learner, your interface can provide opportunities for social learning.

Interface design includes visuals and graphics, decisions about navigation, the information design and architecture of a page, usability, multimedia, and interaction at the screen and software level. Interface design is multifaceted.

Important themes to remember when creating your designs:
  1. Universal Design for Learning
  2. Reducing Cognitive Effect (Richard Mayer's 12 multimedia principles)
  3. Storyboarding/Mind Mapping

THEME 1: Universal Design for Learning

The goal of using universal design for learning, is to produce learners who are purposeful and motivated, resourceful and knowledgeable, strategic and goal-oriented. By ensuring that there are multiple means of representation, engagement, action and expression, learners can easily recognize the "what", "why" and "how" of learning (CAST, 2018). UDL provides a variety of opportunities for learners to access, build and internalize information, and this is essential in allowing students autonomy in learning. By giving student choice, learners can access learning according to their learning preferences, and demonstrate their learning using the mode of representation best suited to their style.

For more details on using universal design for learning approaches, visit their website here.

You can download the UDL graphic organizer here.

THEME 2: Reducing Cognitive Effect

When presenting information, it is important to reduce cognitive effect and overload. There are two channels for processing information - visual and auditory - and in order to reduce cognitive overload, both channels for receiving and processing information should not be bombarded. People can only process a few pieces of information at any one time (Mainero, 2016). The underlying message when using graphics, media and design is this,
If it doesn't support learning, don't use it.
Richard Mayer outlines 12 multimedia principles for reducing cognitive overload which you can view from the videos below. 

 

Nothing beats a "quiet design". When choosing graphical elements, the end result should be an interface that is not distracting.
Think critically about what needs to be presented.
Some pointers when designing:
  1. Stick to relevant graphics - if it does not support learning, even if it may seem interesting, there is no need for it.
  2. Simplify visuals - Ask yourself "What’s the message I'm sending?". Simplified representations are just as effective.
  3. Put related text near visuals.
  4. Avoid distractors! The user interface should be deliberate and guide attention to important information.

THEME 3: Storyboarding and Mind Mapping

When planning your material, it helps to see the full picture and know what you want to capture in a lesson. One way to help create a mental picture of what your course or even slide presentations will look like, is to use a storyboard or mind mapping tool. One of my favourite free tools to use is StoryboardThat which allows me to use icons and placeholders so I can get a feel of what my presentation will look like.

I recall a task I had in a course I completed recently where we had to design a game or interactive task, and I decided to use Google Slides to create a completely interactive exercise to help students recall and diagnose the symptoms of respiratory diseases. Planning the design for the activity was simplified using a storyboard, because I could visualize what would happen each time students advanced to a next slide, put the text they would see, and determine what interactions should follow.

Have a look at the storyboard I created to plan my activity here Storyboarding a learning gameYou can also view the progress I made, using my storyboarding template and translating it into Google Slides here Respiratory Diseases Interactive.

Interface design should not hinder student learning.
Aesthetics are everything! The instructional graphics used must support the learning. Media should be relevant, and the usability of your design is top priority. 
Stay tuned as I explore more themes related to instructional design.

stay tuned

References
CAST. (2021, April 9). Universal design for learning guidelines version 2.2. UDL: The UDL Guidelines. https://udlguidelines.cast.org
Mainero, R. (2016, December 4). Cognitive theory of multimedia learning [Video]. YouTube. https://www.youtube.com/watch?v=qQ8luZR9NoM 








Comments