Having started with making interactive simulations or visualisation apps with Easy JavaScript Simulations (EJsS) under the guidance of Senior Specialist Lawrence Wee from ETD in Nov 2016, I next learnt about GeoGebra in 2017 from my ETD colleagues who taught Math (shoutout to Loh Yan Xiang and Toh Wee Teck). I would like to share via this post a few guidelines that I have come up with when designing interactive apps for students
1. Fast and Minimalist Designs
Since picking up the necessary skills, I have been generating a number of interactives during my free time in preparation for my eventual return to teaching after my stint in ETD from Jun 2017 to Dec 2019. I continued to do so, often in tandem with the upcoming topics that I need to teach for JC1 and IP3 Physics – mainly Mechanics topics.
To balance creation of apps with fulfilling all my other duties, I needed to produce them in a minimalist and very targeted just-in-time manner. Working off templates help a lot as I do not have to redesign the buttons or re-code the animations triggered by the buttons. There is no need to spend one whole day working on an app to beautify it if all it needs to do is to demonstrate the motion of an object based on its acceleration-time graph, for instance.
2. Start with the Minimum Viable Product.
Most of the time, I need to go off to class with a minimum viable product (MVP) in software development speak – a workable no-frills version of the interactive that communicates the ideas or allows the visualisation that I intended. This will then allow me to receive quick feedback from my students on what works and what does not. I will then be able to make quick changes before the next class or in preparation for the next cycle of teaching.
3. Avoid Overloading Interactive Elements
I am a strong believer in displaying just enough buttons and sliders to do the trick. Each app should not have more than 3-4 interactive elements to avoid distracting the students from the main relationships or interactions that they need to learn.
The use of GeoGebra allows for me to make quick clones of an app and then modify it quickly to generate a new scenario, instead of adding more interactive elements to allow for multiple scenarios within a single app.
I also try to avoid giving too much information on the app itself, as I feel the content delivery should be done outside of the app, whether via the Student Learning Space, Google Classroom or even face-to-face classroom interactions.
4. Optimising for Small Screens
I try to keep to an app size of 640 px wide by 480 px height so as to optimise the app for the Student Learning Space. These dimensions also make it easy for students to view and interact with the app from their mobile phones, even when held in portrait mode.
5. Use Pastel Colours
Instead of using the traditional bold primary colours, I try to use pastel colours or more “soothing” colours to highlight key information or elements. These are the softer versions of the primary colours and I prefer to use them as it gives the key elements a pleasant accent despite the rest of the app being mainly grey, black and white.