Interactive Visual Learning in Machine Learning: A Cognitive Learning Theories-Driven Approach

We present a complete standalone, web-based, interactive learning environment for machine learning (ML) concepts, including gradient descent and ROC curves. To design this environment, we made explicit design choices that promote self-directed learning and are aligned with online learning theories and design principles. Visual and interaction design principles inform the framework of this online resource. Multimedia Learning Theory informs the design of dynamic plots and animations that enable real-time interaction. Cognitive Load Theory structures how information is presented to help manage learners' cognitive load. Finally, based on Dual Code Theory visualisations are combined with textual explanations to engage multiple cognitive channels and enhance understanding. The learning environment follows an intuitive navigation system illustrating an effective design of affordances guided by user-centred design principles. To better assist learners, the visualisations are paired with guided learning cards which provide instructions on a sequence for active learning. To enhance the learning outcomes, we implemented the Manipulation of Content design principle by allowing users to adjust parameters and receive immediate feedback. The results of a survey targeting ML students indicates that the interactive visualisations positively impacted learning, with high ratings in usability and effectiveness, though some improvement areas were highlighted. We believe the developed framework holds promise for future educational experiences, not only in ML but across various subjects, emphasising interactivity and simplicity as key approaches.