5 Principles of UI Design in Higher Ed

How might we align the utility of UI design with the work of higher education?

There are a number of pieces which breakdown UX and UI, including different definitions, examples of either at work, and frameworks for conceptualizing their meaning and utility. I personally like this setup from Jeff Wang: “UX design is what makes an interface useful, and UI design is what makes an interface beautiful.”

Now, in a previous piece, I broke down what UX means for higher ed. In this one, I’d like to do the same, but for UI. I’ll begin by first considering the basic principles of UI Design, using this framework; and then second, considering ways each principle might exist in higher ed. The goal here is not to propose what should happen in higher ed, but rather to begin to consider what we do in higher ed and how we do it from a UI lens.

Basic Principles of UI Design

1. Clarity comes first Explore possibilities for the user, but reduce ambiguities. A good rule of thumb is the 80/20 rule, where 80% of a device’s usage derives from just 20% of the available features. Clarifying these 20%, such as making them more visible and easier to navigate to, will better connect users to what they are trying to accomplish.

2. Provide clear, meaningful feedback Whether it be tactile (the click of a button), visual (a button indenting when you hover over it), or something else, feedback is important as users consider and weigh decisions during their interaction. This feedback doesn’t have to be complex — in fact, simpler responses reduce white noise and provide the user a clearer signal.

3. Consistency matters As more products follow the lean thinking process, software updates and new versions are becoming the norm. And while these are intended to deliver a better deal to the user, “better” should not be conflated with “different”. Updates should reduce the number of differences presented to a user in order to minimize the extent to which a user has to “relearn” the product.

4. When in doubt, use established design patterns I’ll quote directly from my source here, because he says it best: “Don’t get me wrong here — innovation is awesome and encouraged, but it shouldn’t have to be at the expense of the user experience. There’s no need to reinvent the wheel if the wheel is doing a great job at doing its job. For example, if you’re ever unsure if an icon accurately or intuitively represents a word, just use the word in its place. Or adhere to common color patterns, such as a shade of red to warn/alert a user, or green to mark something complete.”

5. Use visual hierarchy Our eyes have evolved not to depict the world accurately, but in a way that is most useful. From jumping out of the way when a object comes hurtling towards us to pausing our movement when a snake comes into our view, a lot of our responses to visual stimuli occur subconsciously. Good UI design integrates and leverages this human reality, such as using dark colors to identify information we want to see set against a light backdrop that does not obfuscate that information.

UI Design Applied to Higher Ed

1. Less is more Between changing demographics and growing competition, schools are constantly finding ways to meet different students needs, wants, and interests. While the spirit of this is good and has improved engagement and success outcomes, not all of this proliferation has yielded positive results: at some point, the options of majors and minors have become longer than a menu at the Cheesecake Factory. At my alma mater, the list of majors is no fewer than 146. This array, while seemingly being a good thing because it provides more options to students, actually obfuscates the decision-making process, creating ambiguities that foster misdirection and poor choices. And this isn’t just anecdotal, as the research suggests that providing too many choices overwhelms students and harms success. In this instance, UI calls for clarity through fewer options.

2. Meeting academic requirements Navigating which classes to choose, paired with needing to meet general ed and major requirements, creates an academic maze for even the most dedicated of students. Often times, even after confirmations with advisors and cross-checking with course catalogues, students are still not entirely sure whether a particular course meets a particular academic requirement. Having visualized, instant feedback upon registering for a course — before starting it, and way before nearing graduation — will provide relevant information for students to help them know they are on track to graduate.

3. Common financial exchange It doesn’t matter whether you purchase a cheap pen or an expensive car part: The navigation through the buying process on Amazon.com is always the same. Colleges, however, tend to fracture how students interact with it when it comes to financial matters, having different portals, web designs, and even login names when a student goes to purchase textbooks, pay tuition, register for housing, order a parking pass, and so on. Yes, these are different departments, but creating a consistent experience would dramatically improve the utility of each.

4. Website eye tracking Don’t reinvent the wheel (or worse, ignore the fact a wheel has already been invented) every time when designing a new webpage. While IT and content professionals should test for and learn from boundary-pushing ideas, it also makes sense to begin with the assumption that users will follow common eye-movement patterns across a webpage (top-middle →scan the right →scan the left →lower middle). Using these gets you to a simple, experiment-able Version 1.

5. Course registration Information is often presented in large blocks and with all content treated equally (course department, number, instructor, days/times the class meets, class title, etc.). What if users could select which information is important to them, and then have differences becomes bolded? For example, if a student selects “only Tuesday/Thursday” courses in a particular department, then course titles, instructors and times become bold and pop-out. While it will take a lot of testing to learn what information different users value, in the meantime the breadth of information on course registration should not be presented uniformly.

Conclusion

Like UX, UI can emerge in the organizational, cultural, financial, and social functions of a college. As with my other posts on applying design thinking to higher ed, this is less about “identifying best practices and telling people what to do” and more about challenging current thinking, pushing mindsets, and considering choices from alternative conceptualizations. As with any industry being up-ended by Big Data and digitalization, schools in higher ed can get ahead of the curve by thinking about their work in new ways, like those above.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.