Project Type:
Instructional User Interface

Time Span:
February - April 2020

Project Overview

Over the span of my User Interface Design II class, my classmates and I were introduced to a large vocabulary of theories, laws, and concepts that dealt with the psychological aspect of designing user interfaces. While having a visually appealing interface gives the user some satisfaction, if the interface is confusing to use or generally complicated, the visual appearance falls to the wayside.

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.

These simple tasks should help move an important process to the user's long-term memory, thus helping them prolong the life of their computers.

---

Original Idea

the extremely rough wireframe, done in Figma.

When I began the project proposal, I wanted to create a large guide for users to be able to complete five tasks because Miller's Law states that users can retain five to nine items in their working (active) memory, as that is the average capacity of the user's short term memory.

As shown in the screenshot, there were plans to make a guide on how to physically clean your computer, clean out junk files, organize your folders, back up your data, and reinstall your operating system.

However, I soon realized that there would be levels of complexity I could not remove. Tesler's Law (the Law of Conservation of Complexity) states that in any given system, there's an amount of complexity that cannot be removed. For example, I would have to create a separate guide for Windows-based and Macintosh-based systems, or separate guides for desktop and laptop computers.

---

Narrowed Down: Just Cleaning

For simplicity's sake, I decided to just create a guide that will teach the user how to clean dust from their computer. The benefit of this was that these tasks are platform agnostic (meaning it can apply to computers that run Windows, macOS, or even Linux), and there would only need to separate instructions between desktops and laptops.

The decrease in task selection follows Hick's Law, which states that the amount of choices a user is presented with impacts the time spent in making a decision. With only two choices available to them, the user can hone in right away on how they would like to clean their computer.

First Prototype: Vertical Scroller

the interface, using a vertical scrolling layout. (click to enlarge)

This was one of the earlier iterations of my prototype. I soon learned that there were several problematic aspects to this design that needed to be addressed:

• The "light switch" button on the upper left corner of the prototype had no indicator of what would happen if the user clicked on it. I made this decision based on my own schema, and didn't account for other users who may have this same association with that element.
• There would be a lot of blank space on the right side of the instructions layout.
• The excessive scrolling and large walls of text would increase the user's extraneous cognitive load and would hinder their ability to commit the things they learned to their long-term memory.
  

Going forward, it was suggested I tried presenting my instructions in the form of a slideshow.

Slideshow Format: First Attempt

This attempt was much more successful. There was very little blank space and the text was easier to read. My significant other and I took photos of our computers as we performed these tasks for the users.

Of course, there were still problematic aspects to this iteration as well:

• The text was a little sloppy and too wordy.
  • Let's Begin! (the button that takes you to the next step) and Back to Menu (the button that takes you to the prompt that asks you if you would like to clean a laptop or desktop) were positioned in a way that disrupted the flow.
• Since we didn't have a photography studio set up, the pictures were a bit too busy and hard to follow.

Slideshow: Improvements

Going back to the feedback I received, I modified the prototype in several ways, giving much needed improvements, such as:

• Tracing over the images in Photoshop, eliminating unneeded clutter from the original photos.
• Chunking instructions into easier to read sections.
  
• Improving readability by bolding important actions and keywords.
  • I followed the signaling principle by emphasizing words such as "begin", thus giving the user a sense of where they were during the process.
    
• Creating visual cues, such as adding arrows to signify the motion that the user's actions need to take.
  
• Following the multimedia principle by adding words and text to the instruction images would make it easier to commit these instructions into a user's long term memory.
  

Finalizing

I continued to build upon the successful parts of the interface and improve on the weaker aspects of it. Drawing over a computer is a meticulous labor and I wouldn't be as successful without the help of Adobe Photoshop and Adobe Illustrator to get those straight lines done properly.

A designer's work is never done, but you can access the deliverable Figma prototype here.

Closing Thoughts

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!