What is the purpose of this project? 

My team and I developed a comprehensive user interface project to help students use Handshake to build professional profiles and apply for jobs. We mapped key screens and user flows, applying established UI/UX principles such as Miller’s Law to manage cognitive load, Hick’s Law to simplify choices, and Jakob’s Law to ensure familiarity. We also used the Zeigarnik and Serial Position Effects to encourage task completion, the Von Restorff Effect and Signaling Principle to highlight important actions, and the Laws of Proximity and Spatial Contiguity to improve visual clarity. Our goal was to enhance usability, reduce friction for new users, and create a more intuitive, confidence-building experience.
​

Our Final Project: 



























Our Final Presentation: 


​​
​
​
​
​
​​
​
​
​
​
​
​
​
 
​​
​
​
​
​

How We Applied Design Principles:

 

Miller's Law says that the typical user is able to keep seven, plus or minus two, items in their working memory at a time. Working memory, also referred to as short-term memory, has a limited capacity and refers to processing the information the user is currently thinking about. Keeping Miller's Law in mind, we ensured that our instructions had only six steps. These six steps fall within the Miller’s Law range and allow for a smooth process of information in working memory.

 

Chunking involves breaking down information into smaller sections, or chunks, to make it easier to read and navigate. Chunking is the only way to manage their Intrinsic Cognitive load. Intrinsic cognitive load refers to the effort required to process essential or required content. Our task of creating a Handshake profile is divided into six steps, or chunks. This ensures that all essential content is easier for the user to process in their working memory.

 

The Law of Proximity says items that are close in distance are perceived as a group in the user's mind. We placed the headings and body text close to each other so the user would be more likely to perceive them as a group. Additionally, the titles for our two lessons on the home page are directly underneath the images for their respective lessons; therefore, they will be clearly visible as two separate groups.

 

The Von Restorff Effect states that when multiple objects are similar, the one that is visually different tends to be remembered more. Taking advantage of the Von Restorff Effect, we changed the color of the text in the instruction paragraph that correlated with key actions, thereby making key actions more memorable to the user.

 

The Zeigarnik Effect states that people tend to remember tasks that have been interrupted or left incomplete. Considering the Zeigarnik Effect, we created a carousel that visually tracks the completion of steps within our tutorial. When completing the tutorial, the user will be able to remember what needs to be accomplished because the carousel will indicate which steps are completed and which steps are still incomplete.

 

The Serial Position Effect states that users often remember the first and last items in a series better than other items. We took advantage of the Serial Position Effect by listing our six steps at the beginning and the end of the tutorial so they can be processed and stored in the long-term memory. With these placements, the user will be able to remember the steps more easily. 

 

Tesler's Law states that every application contains essential information that cannot be removed and must be addressed. Considering Tesler's Law, we ensured that all essential information was still present and utilized chunking to effectively handle the key information.  

 

Fitts’s Law states that the time needed to click or tap on a clickable object depends on the object’s size and distance from the cursor. We considered Fitts’s Law by incorporating big navigation arrows on the sides of the screen. Having a bigger clickable area allows users to be less precise with their clicks and click their option faster. In addition, our project does not make users scroll; therefore, reducing the amount of time it takes for users to click their target.

 

Hick’s Law says if the number and/or complexity of choices increase(s), the time to make a decision increases. Considering Hick’s Law, we only included a few simple clickable objects on each page to decrease the time needed to make decisions. These objects include the tutorial buttons, the carousel indicator, front and back buttons, and the home button. Additionally, because these clickable objects are very similar to the objects in other websites, the options remain simple.

 

Jakob’s Law says that users tend to prefer websites that work similarly to websites they have used previously. We adhered to Jakob’s Law by having a navigation bar located at the top of the screen. Having top navigation is a convention of other websites, meaning users can quickly understand how to navigate through our tutorial.

 

The Coherence Principle states that users tend to learn better when meaningless content – like decorative graphics – is removed.  We followed the Coherence Principle by only implementing information that helps learn the tutorial. Eliminating information that is not helpful reduces extraneous cognitive load. Extraneous cognitive load is the mental effort used in the working memory to process non-essential and meaningless material.

 

The Signaling Principle says people tend to learn more effectively when there are cues that highlight how necessary information is organized. We followed the Signaling Principle by creating a numbered list of our tutorial’s steps. The listed steps showcase the structure of the tutorial, making the structure easier to understand.

 

The Multimedia Principle states that people tend to learn better when words and pictures are used together rather than words alone. We adhered to the multimedia principle by providing text and images in our instructions that explain the same information. Providing images and text enhances the germane cognitive load of the user. Germane cognitive load is the mental effort used in the working memory to process helpful but non-essential material. Even though images are not a requirement for learning because users are able to learn from just text; however, pictures can aid in the learning of the text.

 

The Spatial Contiguity Principle says people tend to learn more effectively when pictures have relevant text merged with them. We applied the spatial contiguity principle by integrating text that helps understand the images; therefore, understanding the overall content. For instance, a lot of our slides have “tap” positioned above zoomed in graphics; therefore, aiding users in learning what they need to tap.