You and Your GUI

Jessica Porpa, Instructional Designer

First of all, you might be wondering, “What is a GUI?” GUI, pronounced gooey, stands for Graphical User Interface. It is used to help learners easily interact with a course through the use of visual indicators. In terms of the courses we design here at CypherWorx, the GUI is the interface that appears around the perimeter of the slides in our courses, and includes clickable buttons and tabs, player controls, and customizable color schemes. 

GUI designed for NeighborWorks America.

Most learners and clients perceive these features as an afterthought, but from an instructional design standpoint, the GUI is an important aspect of all eLearning courses, and can make or break a learner’s experience. Think of it this way: How would you get from one slide to another without a Next button? How would you navigate from one topic to another without a menu? How would you know when a slide is complete without a seek bar? These questions alone illustrate why your GUI should be more than just an afterthought, and knowing what features will work for your clients is crucial. 

GUI created for a fifth grade curriculum kit, Expedition Ocean.

You first need to consider what navigational features to include. Features differ from one client to another, but a typical GUI has Play, Pause, Replay, Previous, and Next buttons, as well as audio controls and a course menu. Some clients may require the use of a resources or glossary section. Many of our clients here at CypherWorx like to include a narration section, which contains a text transcript of the audio narration. A majority of these features are most likely built into the software you use, but depending on the client, you may decide to create custom buttons and features. As a designer, you need to be sure all GUI elements are clearly labeled and easy to locate. A learner shouldn’t struggle to find the course menu, or become frustrated when figuring out how to proceed from one section to another. Your GUI should be intuitive, so that learners can move effortlessly through the course.

GUI designed for the Pennsylvania Key.

Once you’ve decided on the features you’re going to use, you need to decide if certain features will be restricted or not. Perhaps your client doesn’t want the learner to skip ahead in the course. This would require you to restrict the use of the course menu, seekbar, and/or Next button until a slide is complete. 

GUI designed for the Finger Lakes Geriatric Education Center (FLGEC), in affiliation with the University of Rochester.

Now, it’s time for the fun part: customizing your GUI! While adding features to your eLearning course is important, you don’t want your GUI to overpower the course content. However, this doesn’t mean you need to restrict the use of color in your GUI. Most clients will be pleased to see that you incorporated their company branding into your GUI design. Just keep in mind that the use of colors should be kept to a minimum. I recommend keeping your GUI monochromatic. Begin with a single color, preferably from your client’s logo, and expand on it using different shades and tints of that same hue. However, there may be instances where adding an accent color is necessary. Don’t be afraid to make your GUI visually appealing—just be sure that it doesn’t become too distracting to the learner. After all, the learner’s true focus should be on the content itself. 

Remember, the GUI is what guides your learners and helps your course function, so take pride in it, and make it one of a kind!