Screenshot Tutorial
An web tutorial created to teach users how to take and edit screenshots on their mac computers. Instead of focusing on doing user research, this project relied on learning and implementing common UX laws and principles. The end result was a complete tutorial, and a paper explaining how I incorporated each principle.
Tools Used
Figma, Illustrator
Year
Spring 2023
Principles Used
Miller’s Law states that people can hold approximately seven objects in their working memory at a time (plus or minus two). Working memory, also known as short-term memory, is how users process what they are actively thinking about. I considered this by limiting the number of steps in both tutorials to six.
Something important that I learned was that in order for smart animate to work, the names have to match across frames. I ran into a roadblock when the animation was working for me, but I realized that the carousel has to have the same name from frame to frame.
Chunking is breaking information into smaller groups. This helps the user to understand the material easier. This concept was considered by putting each step on a separate page.
The Law of Proximity states that users perceive items in groups if they are spatially close together. I considered this when I designed the pagination feature. The circles are close to each other and therefore are perceived as being part of the same group.
The Von Restorff Effect states that users tend to remember any object that looks visually different than objects that are similar to each other. The Von Restorff Effect was taken into consideration by incorporating bolded, blue text in the instructions. Because the rest of the text is black, the blue text stands out. This was done so that the user can memorize the blue text, which is the action they must take.
The Zeigarnik Effect states that users remember a task more if they know it is unfinished. I took advantage of the Zeigarnik Effect by adding the pagination feature. Because the user can see that the tutorial is incomplete, they are more likely to finish it.
The Serial Position Effect says that users tend to remember what is first and last in a series more easily than the middle information. I utilized the Serial Position Effect by including an overview page and a review page. Because this information is what the user sees first and last, they are more likely to recall the information that is on those pages.
Long-term memory is where a user’s prior knowledge is stored. This information can be pulled into the short-term memory with prompting. The tutorial does expect some prior knowledge of computer basics, such as opening the laptop, turning it on, and using the mouse button.
Tesler’s Law states that there is a given amount of complexity for all topics. To manage this complexity, I focused on the user’s Intrinsic Cognitive Load. Intrinsic Cognitive Load is the mental effort users need to process essential content. I managed the Intrinsic Cognitive Load by chunking the material into smaller steps.
Fitts’s Law is a principle that says that the time it takes a user to click on an item is dependent on both the item’s distance from the mouse and the size of the item. I considered this law by keeping the navigation arrows in the same place on each page. This way, the user does not have to move their mouse. Additionally, I made sure none of the buttons were too small to easily click.
Hick’s Law is a principle that says that both the number and complexity of choices will increase the time it takes a user to make a decision. This is because the user’s intrinsic cognitive load is increased. I considered this by only giving the users two options on the home page: “Take a screenshot”, or “Draw on a Screenshot”.
Jakob’s Law is a principle that says that users prefer websites to work in the same way as the websites they are used to. Users can more quickly understand websites when they fit their schema. This law was applied by using common conventions for the interface, such as familiar icons.
The Coherence Principle states that users will learn best when extraneous material is not included. I applied this principle by only including essential graphics, and not adding any decorations. By not including decorations, the user’s Extraneous Cognitive Load is reduced. Extraneous Cognitive Load is the mental effort it takes a user to process meaningless content.
In contrast to Extraneous Cognitive Load, Germane Cognitive Load refers to the mental effort the user takes to process helpful but non-essential content. An example of how Germane Cognitive Load is managed on my website is by the incorporation of helpful graphics into each step of the tutorial.
The Signaling Principle states that people learn better when there are cues to show the organization of the material. I applied this principle by including overviews and bolded headings.
The Multimedia Principle states that people learn better with words and graphics rather than just words alone. I followed this principle by including graphics with each step of the tutorial.
The Spatial Continuity Principle says that users learn better when corresponding words and graphics are spatially close together. I incorporated this principle by having the inserted text as close as possible to the graphics they corresponded with.