Classroom in Your Hand


The quality of the digital content is the key point for the Classroom in Your Hand. It is the content that represents the lecturer, and it should engage the students, not to bore them. 

The content must also be clear and details to deliver the fundamental concept of a theory, as if we design the digital content itself to be sufficient for the students to learn themselves, even without face-to-face learning with the lecturer. The role of the lecturer is therefore to design the learning (a learning designer) and to facilitate the students for the higher-order thinking activity in the class (a facilitator, not a lecturer). 

This following sections explain what I have done in developing the interactive  contents for the Classroom in Your Hand. 

They are:

  1. Design and Visual Communication
  2. Engaging Animation Whiteboard Videos
  3. Interactive HTML Animation
  4. Multi-touch book 

1. Design and Visual Communication

I think everyone agrees 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.

What do you think about the lecture note below?

Typical lecture note used to teach in the classroom and given to students as lecture hand-out.

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!).

Steve Jobs (1955-2011) is often referred as the master of presenter. He delivered powerful narration accompanied with powerful images in his presentation (Photo from Unsplash).

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.

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.

TED Talk can be referred as one of the events where best presentations are delivered with powerful narration and simple, elegant slides.

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.

Example 1

Comparison between Sildumentation and Slide.

(Swipe right: Slidumentation, Swipe left: Slide)


  • Texts are too much

  • The focus of the slide is on the texts

  • The intention is for this slide to also be the handouts for the student (slidumentation)

  • Do we expect the students to read this text when we deliver the lecture? Or pay more attention on our narration of the story of the monochord device?

Presentation Slide

  • Almost no text presented

  • The focus is on the monochord device

  • The attention of the students will be on our narration/story

  • It ‘connects’ the lecturer and the students

Example 2

Comparison between Sildumentation and Slide.

(Swipe right: Slidumentation, Swipe left: Slide)


  • Packed with texts

  • Too many ‘main points’ in one slide

  • No space for representative image to explain each point

Presentation Slide

  • Minimum texts highlighting the main point 

  • Breach into several slides. One slide, one main point 
    to create focus 

  • Use relevant images with good resolution 

2. 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.

Another type of video is where 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 movie shows how I transformed the slide about the monochord device into the whiteboard videos. I used Videoscribe software. These live drawings are generated by the software, including the hand holding the marker. 

Below are two of my whiteboard videos for my taught subject Mechanical Vibration (BMCG3233).

A whiteboard video can also be produced by recording the screen activity in iPad (or PC screen). This is similar as a lecturer delivering explanation in the class while scribbling on a whiteboard.

With only an iPad and Apple Pencil or 3rd party stylus, producing this type video has never been easier. For the examples of the following videos, I used Explain Everything app in iPad. 

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 thrilled to receive positive feedbacks from students worldwide.

I hope 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 5,700+ subscribers (March, 2023)

Screenshots of comments from students worldwide in my YouTube channel.

3. 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 in our content by adding an animation where it gives response based on the input. For example, by clicking or tapping a particular button, the dynamics of an object is changed based on the chosen parameter.

Below is the example of the interactive HTML animation I created for my students.

HTML animation to illustrate the units of amplitude, frequency and phase in a vibrating machine.

The intention of the animation is to for the students to be able to visualise the concept of three main units in vibration: amplitude, frequency, phase. 

The animation allow the student to change the amount of each unit (from low to high input value) and the behaviour of the system is changed based on the input. 

This is important as in practice, it is often difficult to see by naked eye the difference, for example, between a machine vibrating in low and high frequency.