Considerations for a Custom GUI

One of the components of ETEC565A Assignment 5, the Moodle Course Site, is a splash page with a custom graphical user interface (GUI) of at least four navigational components. As this is my first time creating this type of content, I decided to look into best practices of custom GUIs.

The Moodle User Interface Guidelines documentation page provides a helpful list of guidelines provided by the Gnome platform towards the creation of GUI. The list of page links reads like an set of best-practices in itself, and clicking through provides considerable illustration on how the best user experience may be achieved (Moodle, 2009a)

One common theme for usability principles is to only display information where and when it is relevant for functionality. In the words of Gnome Developer, “Keep it Simple and Pretty,” but in the Moodle Documentation, this may also be known as “progressive disclosure” (Gnome Developer, 2005c; Moodle, 2009b). Not only does this help to provide a more aesthetically pleasing experience, but it supports the interaction of the range of novice through advanced learners. If learners want to view more options, Moodle infrastructure can be configured to do so and will remember user preferences; but the primary default UI should be clean, simple, and “safe” and not overwhelm the learner.

Don’t assume that your user group will understand the meaning behind icon imagery.

Another guiding principle that comes from Gnome Developer is to ensure that your GUI matches the norms of your user group, which may include common vocabulary, jargon or imagery. (Gnome Developer, 2005a). I touched upon this concept in my Moodle Quiz assignment and reflection, noting the importance of high levels of fidelity in assessment to support interactions valued by learners. The Gnome Developer usability principles goes on to suggest judicious use of familiar real-world metaphors to help support imagery within a custom GUIs. The Moodle LMS itself includes a variety of built-in icons, for example, each activity is associated with a particular icon. When combined with any custom GUI choice and depending on one’s anticipated learner group, it could be a good idea to provide a walkthrough or tutorial covering the meaning of Moodle icons and any custom choices included by an instructional designer (Gnome Developer, 2005b).

The ETEC565A assignment states that the Moodle Course Site must include a splash page with a customized GUI.  Interestingly, splash pages are considered a “mortal sin” of website design, as I learned in my previous exploration of the ETEC565A eLearning toolkit section on HTML Authoring (Webpagesthatsuck.com, 2011). However, perhaps because this is a course site and not exactly a webpage, and armed with these best practices and design considerations, I will be able to create a splash page and GUI that is appropriate and comfortable for my prospective learner group.

References

Gnome Developer (2005a). Create a match between your application and the real world. Retrieved March 15, 2014 from: https://developer.gnome.org/hig-book/stable/principles-match.html.en

Gnome Developer (2005b). Don’t limit your user base. Retrieved March 15, 2014, from https://developer.gnome.org/hig-book/stable/principles-broad-userbase.html.en

Gnome Developer (2005c). Keep it simple and pretty. Retrieved March 15, 2014 from: https://developer.gnome.org/hig-book/stable/principles-simplicity.html.en

Moodle (2009a). Moodle user interface guidelines – moodledocs. Retrieved March 15, 2014 from: http://docs.moodle.org/dev/Moodle_User_Interface_Guidelines

Moodle (2009b). Progressive disclosure – moodledocs. Retrieved March 15, 2014 from: http://docs.moodle.org/dev/Progressive_Disclosure

Webpagesthatsuck.com (2011). Web redesign checklist part one from web pages that suck – learn good web design by looking at bad web design.  Retrieved March 15, 2014 from: http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html