4. Development of Interactive and Engaging Contents


DESIGN AND VISUAL COMMUNICATION


I think everyone aggress that the Power point slides are the ‘standard’ tool used by lecturers for delivering their lecture. They project the content trough LCD player, and start explaining (even worse only reading) stream of information in the slide.

The slides, at the same time is also intended as the reference notes for the students. No wonder, we can see almost slides packs with information like a text book. Full of texts with less meaningful images. Not to mention the contrast of the colour which can torture our eyes.  

I can say I had the same kind of slides for the first two years of my teaching. Because I thought as long as all the elements are there (texts and equations), it was already sufficient to be a lecture note. Besides, I also had seen similar slides from my professors during my undergraduate and postgraduate studies. No element of ‘design’ at all.  

Here my emphasise is more on the design of the slide, and I touch slightly on the delivery of the presentation (which is affected also by the way the slide is designed).


TED Talk is an example of how to use simple slide presentations, but creating meaningful impact.


My perception on the importance of design and visual communication is changed after I read the book by Garr Reynolds, Presentation Zen (2007). One among great books I have ever read.

The book first highlighted why most presentations using the Power point slides turn out to be boring, and ‘sucks rotten eggs’ as Seth Godin, marketing guru and a best selling author put it in his e-book Really Bad Power Point (2001).  

In the context of higher education, the main problem is the failure to distinguish between the slides and the documentations/handouts. The slides should be used only to highlight the key idea given by the lecturer, while the documentations are the contents to be read by the students (outside the class).

The ‘Powerpoint culture’ we have today is that we are forcing ourselves to compromise between the two. The slides are at the same time become the documentations (lecture notes) for the students. That is why we end up with slides full of information (read: texts) and this is totally misleading. With addition of bad design of the slides, things become even worse (Note: for the students, not for us!).

Professor John Sweller from the University of New South Wales was one of scientists who developed the cognitive load theory in 1980’s. In The Sydney Morning Herald in 2007 he said, “It is more difficult to process information (for the audience) if it is coming at you both verbally and in written form at the same time”.  

And he quoted, “The use of Powerpoint presentation has been a disaster. It should be ditched”.

Of course he didn’t say we cannot use the Powerpoint, but he criticised the way we design and deliver the presentation.


Like Zen art, the lecture slide must be simple, beautiful and balance.


Garr Reynolds summarises the main points from the Presentation Zen:

  1. Multimedia effect. Narration with pictures (visuals) are better than narration alone.

  2. Modality principle. People learn better when words are presented as narration rather than text.

  3. Redundancy principle. People learn better from narration & graphics rather than narration, graphics, & text.

  4. Coherence principle. People learn better when extraneous visual material is excluded. 


The Powerpoint is only a tool to deliver our ideas. The man on stage is the lecturer, not the slides. I highlight here some important tips in preparing the Powerpoint presentation:

  1. It is all about our students. Whatever we do during our lecture is at the end for the benefit of the students. If we make students fail to capture the messages we want them to ‘remember‘ because of our bad slides, then the fault is on our shoulder.    

  2. Reduce the text to an absolute minimum. The slides are suppose to support the narration of the lecturer. And ‘images represent thousands of words’. Remember the redundancy principle.

  3. Do not read the text word for word off the slide. The students can read. So why should we read long lines of text for them? This goes back to point No. 2 above. Again, why should we have a bunch of texts in our slides?

  4. Written documents (handouts/lecture notes) are for the expanded details. Handouts for the students are the additional reading supplements for the students. They can read these at home or outside the class. And like a book, we are free to put many texts to explain the details. 


Below are the example of transformation of my lecture slides after applying the Zen principle:




@@@@@@@@@@@@@@@@@@@@

ENGAGING ANIMATION WHITEBOARD VIDEOS


With the multimedia technology today, it is very much convenient for lecturers to record their lectures live in the class. The videos are then used as the main course materials for the (next) students, especially when the course is offered as an e-Learning course.

This type of video can be entertaining for students, but at the same time can also be dead-boring depending on how the lecture is delivered and how the video is recorded. Of course by watching the videos, it is like attending the class offline with duration of 1-2 hours (unless the video is edited appropriately). However students can skip and go to the main part and can repeat that part as many times as they like. We can see this example from renowned universities sharing the lecture videos for free in the Open Online CourseWare platform. 

Another type of video is where a lecturer records the voice and the main screen projects the Powerpoint slides. By optional, an inset of live video of the lecturer talking can be displayed at the corner to increase engagement with the students.  

There is a type of video which I like most and I think is much more engaging for the students, where the idea or the concept is shown by a series of live drawings. We call it animation whiteboard videos. 

The following videos are two of my whiteboard videos for my taught subject Mechanical Vibration. These live drawings are generated by the software, including the hand holding the marker.




A whiteboard video can also be made live by recording the screen activity in iPad (or PC screen). This is similar as a lecturer delivering explanation in the class on the whiteboard using a whiteboard marker. Using my iPad, I use an Apple Pencil or a stylus, which could never been easier.

Videos in Khan Academy are similar to this type of video. Below are two examples of my videos. 



Extending my reach

When we are talking about learning in the 21st century, the class can go beyond our classroom. Remember that there are also students out there searching of good contents for their study. 

I created my YouTube channel and upload all my animation whiteboard videos. Apart that the videos can be accessed by anyone, this is also an effective way to save the space of my online system. 

When I design the course, I can just provide the link to the students through the system.

I am surprise to see positive comments from students worldwide. 

Hopefully this one will be accounted as one of the three things with continuous reward until the hereafter, i.e. the knowledge by which people benefit from.


My YouTube Channel. Now reaching 3,200+ subscribers (November, 2019)


Below are some of the screenshots of the comments from the viewers in my YouTube Channel.



@@@@@@@@@@@@@@@@@@@@

INTERACTING WITH ANIMATION


The whiteboard videos are the ‘lecture’ materials. They are intended to replace the instructional content as in the conventional lecturer-centred approach. However, the students cannot interact with the videos (apart from stop, play and skip).

The conceptual understanding can also be improved by having an animation where it gives response based on the input from the students. For example, by clicking or tapping a particular button, the dynamics of an object is changed based on the chosen parameter. 

In iBooks, this is accommodated by using the widget called HTML. I design and create the HTML widgets using software Tumult Hype. This software has convenient GUI’s where the user who does not have background of HTML language (like me!) can use the software only by following the logic sequences.

The following page shows examples of the interactive HTML animations converted GIF (my previous website host can support HTML animation using iFrame. Unfortunately this current website is not).

Thus only students with Apple Device can play the animations in my iBook.


   This animation of a vibrating machine allows students to visualise the amplitude, frequency and phase. By the tapping the button "+" or "-", they can increase or decrease the amplitude and frequency, or to observe how the machine vibration with different phase. In this example, the machine is vibrating at 180 degrees phase between points A and B. 

 

This animation shows a vespa goes through a bump. Students can tap 'undamped' and 'damped' to observe how the vespa bounces after the bump.


I also utilise an animated graph for students to understand the vibration response when a vibration parameter is changed. DESMOS is one of an excellent graphic creator where the students can preview it online and we can also ask students to create themselves to gain more understanding on a certain mathematical function. See the example of my graph below.