Role

Solo UX Designer

Category

Desktop App (Macbook Pro)

Approach

Laws of UX

Duration

3 months

Tools

Figma

For my User Interface class, I designed a prototype desktop app in Figma for crochet beginners.

This step-by-step tutorial app explains and demonstrates the first two tasks to complete in order to start any crochet project.

View the Figma Prototype

VIEW THE DESIGN FILE

In order to design for the user, I followed Orielly's Laws of UX for teaching users new information and concepts. These principles for design were implemented in the prototype in the following ways:

Miller's Law

According to the theory of  Miller’s Law , people can only process about seven, plus or minus two, objects at a time in their working memory, or short-term memory. As such, with working memory, there is very limited capacity for what can be stored in our conscious thoughts. For this prototype, I considered Miller’s Law by only including seven steps to the instructions. This technique should help prevent the user from overloading their working memory.

Cognitive Load Theory

When discussing working memory, it is important to mention Cognitive Load Theory. Cognitive Load Theory divides information stored in working memory into three categories. The first and most important category is Intrinsic Cognitive Load, which is the effort needed to deal with essential content in the working memory. To help the user manage the essential content in this prototype, I broke things up into simpler steps using chunking. Chunking is a design technique for grouping information into smaller units. Chunking is also a helpful technique for moving essential content from working memory into long-term memory.

Law of Proximity

The Law of Proximity states that objects located near each other are typically perceived as a group. Taking this concept into consideration, I designed the navigation bar so that the menu items were close to each other. I placed the main content header, body text, and images proximate to each other as well. To distinguish the navigation bar and the main content as separate groups, I added more space between their sections.

Von Restorff Effect

Among similar objects, the one that differs from the rest is the most likely to be remembered. This concept is known as the Von Restorff Effect. This concept was incorporated into this prototype by changing the color of key words in the body text. The subject and verbs of each instruction were highlighted to help the user remember the key concept of each instruction.

Zeigarnik Effect

The idea that people tend to remember interrupted or uncompleted tasks better than completed ones describes the Zeigarnik Effect. This concept was implemented into the prototype with the inclusion of page nations at the bottom of each page to indicate how many steps the user has left to complete.

Serial Position Effect

The Serial Position Effect states that the first and last items in a series are the most memorable to the user. To consider this effect in the prototype, I included the full list of steps at the beginning and the end of the prototype. Reiterating the steps will help the user move this information from their working memory to their long-term memory.

Tesler's Law

According to Tesler’s Law, there is an inherent amount of complexity in every system that cannot be ignored or reduced. I took this law into consideration to deal with the unavoidable complexity of this prototype by utilizing all design concepts mentioned throughout this paper.

Fitt's Law

Fitts’s Law states that the time required to move to a target depends on the distance from and the size of the target. By this law, buttons should be large enough, so they are easy to click, and the distance from a button and its task-related area should be kept as short as possible. In this prototype, the locations of the navigation buttons are consistent across all pages, so the user hardly needs to move their mouse to navigate the app.

Hick's Law

Hick’s Law states that greater complexity and number of choices will increase the time it takes for users to make decisions. I considered this in the design of my prototype by breaking up the instructions into smaller, simpler steps. I also made sure to organize the content into categories represented in the navigation bar to reduce the complexity.

Jakob's Law

Jakob’s Law states that users prefer web applications that function similarly to what they are used to. To incorporate Jakob’s Law into this project, I took advantage of existing conventions wherever possible. For example, the home page button is in the top left corner of the page, which is standard for most websites.

Multimedia Principle

According to the Multimedia Principle, people typically learn better with the addition of pictures rather than just words. To take advantage of this principle, a photo demonstration was included in each step along with descriptive text. The addition of these graphics should enhance the Germane Cognitive Load of the user. This refers to the effort used in working memory to deal with non-essential but helpful information.

Spatial Contiguity Principle

The placement of descriptive text was considered regarding the Spatial Contiguity Principle. This principle states that people learn better when descriptive text is presented near the corresponding image, rather than far. I incorporated this principle by integrating corresponding words and images together with labels and directional pointers.

Coherence Principle

The Coherence Principle states that people learn better when irrelevant content is excluded. Aware of this principle, I made sure to be concise with my instructions and eliminated any unnecessary information to reduce Extraneous Cognitive Load, which is the effort needed to deal with meaningless content in the working-memory.

Signaling Principle

The Signaling Principle states that highlighting the organization of essential material with cues helps people learn better. In this prototype, visual cues such as headings and distinctive text colors were incorporated to highlight important concepts.