Connecting Colour-Coding and Hand-Drawn Interfaces for Study Resources, Menu and Navigation to Enrich Student Learning Experience

In this short paper, I present the theory behind a new innovative concept of connecting colour coding and hand-drawn interfaces, as well as their application in the development of the navigation system of the Study Skills Online Resources section. Next, I present the methods used to develop the navigation system. Finally, I explore the significance of this design and provide future directions for further study.


INTRODUCTION
In this short paper, I present the theory behind a new innovative concept of connecting colour coding and hand-drawn interfaces, as well as their application in the development of the navigation system of the Study Skills Online Resources section. Next, I present the methods used to develop the navigation system. Finally, I explore the significance of this design and provide future directions for further study.

THEORY
According to Keyes, colours distract users and create barriers to identifying information, when badly misused in user interfaces (1993). This study concludes that colour-coding is an effective solution because it helps students to categorize the instructional visual stimuli and process information (Lamberski and Dwyer 1983). My previous study explores the benefits of hand-drawn interfaces for the users and suggests that hand-drawn interfaces can potentially provide better online experiences (Pakalkaitė 2021). In this project, I connected the two User Interface elements of colour-coding and hand-drawn interfaces, to create a navigation system. Through this I aimed to enrich the student online learning experience for the Study Skills Online Resources section.

METHODS
After the expert review was completed, the brief was to create fifteen icons for each section on the Study Skills Online Resources menu page as well as enhance navigation for the students (Rosenzweig 2015). Firstly, I identified the colours from the University of Exeter's brand book, which will be used for each icon. Secondly, I drew the icons with a pencil to represent each category and then traced the outlines with a fine line marker over the pencil drawings (see Figure 1). Thirdly, I scanned the images and altered them on Photoshop. Then I used the Web AIM Contrast Checker online tool to identify whether a white or black outline is more accessible for each of the fifteen background colours from the University's brand book.

RESULTS
The final fifteen hand-drawn icon images were then uploaded into the main menu on the Study Resources (see Figure 2). Additionally, each of the fifteen sections had their own left-side navigation menu with small squares next to each one. Those menus inherited the colour of the main menu (see Figure 3). This project illustrates how colour-coding and hand-drawn interfaces can be created and successfully implemented for better menu online navigation and a 'warmer' digital experience.

IMPLICATIONS
Before starting to work on this project, I researched the equivalent of the Study Skills resources websites of 20 other research universities and explored the design of them. I identified four types of design: text-based link menu, same colourcoded sections with the type on it, photographs used as images accompanied with the text below and hand-drawn illustration with coloured background accompanied with the text below them (however these did not have all separate colour bur rather the same colour sections). However, I did not see the same use of colour-coding and handdrawn elements as in our project. Nevertheless, this sample size was too small to categorically state that no other institutions have utilised this concept. Although the theory suggests this method produces a better user experience, data would need to be collected and analysed to support this. This concept could potentially be useful, not only for the user, but also as a new methodology for the designers who create navigation menus for Study Skills resources.

CONCLUSION AND NEXT STEPS
This project illustrates how colour-coding and handdrawn interfaces can be created and successfully implemented for better menu online navigation. I hope this will potentially enrich the student online learning experience at the University of Exeter, when using the Study Resources section. This also potentially shows an innovative way of designing menus in a context of Study Skills resources. To establish this, I need and plan to collect the data from other universities' Study Skills Resources menus and feedback from students.

ACKNOWLEDGMENTS
I would like to thank my colleagues Dr Caitlin Kight, Kellie Cox and Jennie Fox for their invaluable help, support and feedback during this project as well as for implementing the icons and colours on the Study Resources pages.