Project Type:
Instructional User Interface

Time Span:
February - April 2020

Project Overview

The goal of this project is to teach the user something new. By applying the principles, laws, and theories learned in my User Interface II class, I created a web-based interface that teaches the user how to clean their desktop or laptop computer. By creating an easy to follow guide, my intention is to help users commit this process into their long-term memory, which has no capacity limit.

The final draft can be accessed here.

Mayer's Multimedia Principles

A lot of my design decisions were influenced by  Mayer's Principles for Multimedia Learning. Many people learn best when pictures and text are combined in a way to enhance the material they are learning from.

Spatial Contiguity Principle

Mayer's Spatial Contiguity Principle asserts that people learn better when text and images are presented in conjunction with each other. This principle helps enhance the user's germane cognitive load by creating this association between text and images.

In these examples, I labeled common parts of the computer for users to recognize. This benefits users with little prior knowledge of computer parts and components.

Coherence Principle

The Coherence Principle helps minimize extraneous cognitive load because it states that there should be no extra unnecessary information in a piece of multimedia.

The introduction only shows the importance of the process and then prompts the user to select a computer type for the set of instructions. The operating system has no bearing on how to do this, so that information was not included.

Signaling Principle

As the name implies, the Signaling Principle states that visual cues help a user learn material much more effectively.

These cues can include using guiding words (such as "first," "next," and "lastly,") as well as bolding important information.

Laws of User Experience (UX)

In order to design an interface that is effective and easy to use, I had to refer to my learning of these UX laws. These laws are concerned with how a user processes the information presented to them and how they may interact with a digital interface.

Hick's Law:

In this interface, there are only two choices for the user to choose from. Hick's Law states that the number of choices presented to the user impacts the amount of time they spend making a decision.

Since there are only two choices, the user will spend little time deciding on which type of computer they want to clean.

Miller's Law

Miller's Law states that a user can hold 5 to 9 items in their working (active) memory.

This influenced my choice in only having 7 steps total for each process.

Tesler's Law

Also known as the Law of Conservation of Complexity, Tesler's Law states that there is a certain level of complexity in a system that cannot be removed.

Laptops come in so many configurations, shapes, and sizes, and I couldn't make individual guides for each possible variation. So I made the decision to split the laptop cleaning guide in two; one for laptops with a removable battery, and one for laptops with a non-removable battery.

Fitt's Law

In order to improve the user's experience, I made a design choice that followed Fitt's Law. This law states that the time to acquire a target is influenced by the size and distance to it.

The "Previous" and "Next" buttons on each slide are relatively large and grouped together, so the user can click them with ease.

Jakob's Law

Another important part of my design process was following Jakob's Law. This law states that people prefer to use interfaces that are similar to ones they already use.

That means that common design conventions and the schemas users have to be put into consideration when designing to follow this law.

Specifically, at the end of each instruction set, I used replaced the "Next" button with "Back to Top" to allow users to go back to the beginning. This kind of navigation is common in sequential media, such as slideshows and DVDs.

Law of Proximity

This law states that objects that are close together in proximity suggest that they belong together in a group. By chunking similar sets of information, I was able to follow this law in my instructions.

The materials list (and their corresponding images) are grouped together nicely so the user can immediately distinguish their relationship. Chunking also makes concepts easier to memorize by reducing the intrinsic cognitive load.

Closing Thoughts and Takeaways:

I chose this specific topic not only because of the ubiquitousness of computers in the personal and professional lives of people, but also because computer care and maintenance is an important topic to me. From early childhood, I was instilled with a passion for computers by my late father. This project in part serves as a way to honor his memory and all the things he has taught me that helped shaped me into the person I am today.

This project was pretty intense. I am grateful for the feedback given to me at every checkpoint and during in-class work sessions by both my professor and classmates. Creating this interface in Figma was enjoyable as usual, and I would definitely like to keep working on this assignment, even after the due date.

Thank you so much for following along with me!