Recognition Rather Than Recall in Adobe Photoshop
By: Julia Bohse
The first time I used Adobe Photoshop I removed the original background from a photo and replaced it with a solid black, studio-like background. As a novice Photoshop user, I remember painstakingly erasing the background with the “eraser” tool before manually coloring the background black using the “brush” tool. Any moderately experienced Photoshop user could tell you that this method is definitely not the best way to accomplish this, from an efficiency perspective or from a quality perspective. I know now that there are a multitude of other tools available in the Photoshop interface that would have provided me with a quicker, and cleaner result.
So why did I do it this way?
Overwhelmed with the sheer number of tools in the toolbar, I latched on to the ones with icons that allowed me to clearly recognize the functionality of the tool. Because the brush icon looks like a real paintbrush and the eraser icon looks like a real eraser, I quickly understood what they did with minimal thought.
It is easier for the human brain to recognize the things we perceive over recalling information from memory without the help of perceptual cues. (Johnson) In my case, the eraser and brush icons acted as a visual cue that allowed me to quickly recognize the functionality of the tools. However, it is no coincidence that all of the tool icons within Photoshop are designed to hint at their function. Usability expert Jakob Nielson’s 6th usability heuristic challenges designers to promote recognition over recall in user interfaces to reduce mental strain on users. (Nielson)
As designers, one of the best ways to understand the impact of the application of usability heuristics in user interfaces is to analyze good examples of the principle in practice. In addition to being an excellent example of successful integration of recognition over recall, Photoshop is a particularly interesting case, as it primarily caters to artists, designers, and photographers. In this article, we will examine how Photoshop takes on the challenge of designing software for creatives by creating a virtual studio interface in which the emphasis of recognition rather than recall promotes a more efficient design workflow.
Why is recognition more favorable than recall?
Before diving into the example of Photoshop, it is important to first understand why recognition is more favorable than recall in user interfaces. As we experience the world around us, we perceive things through our senses. These sensory inputs send signals to our brains, which in turn activates patterns of neural activity, with each pattern of neural activity corresponding to a different memory. The more frequently a specific pattern is activated, the easier it becomes to reactivate.
This is the premise of recognition - when we perceive something familiar in a similar context, the same neural pattern is activated as before. This is a far easier process for the brain than recalling a memory, which essentially requires us to reactivate an existing neural pattern from scratch. (Johnson)
If recognition is baking a cake using a boxed mix, recall is baking a cake from scratch with none of the ingredients on hand. As you can imagine, it is much easier to successfully make a cake when presented with a pre-made mix than coming up with a recipe and acquiring all of the ingredients on your own.
So how does this relate to user interfaces?
As UX designers, we must be conscious of the amount of cognitive load we are subjecting our users to when they interact with the systems we design. Cognitive load can be defined as the amount of mental resources expended while using a system and there is a limit to the amount of cognitive load humans can handle. While imposing some level of cognitive load is necessary, as designers, we want to minimize the amount of cognitive load required of users so as not to overwhelm them. (Whitenton) As we discussed, recognition requires fewer mental resources than recall, so promoting recognition in your designs reduces cognitive load on your users.
How can we design with recognition in mind?
At this point, you may be wondering what a recognition-friendly user interface looks like.
There are multiple strategies that designers can use to promote recognition, such as:
Use easily recognizable icons to convey the functionality of different components to prevent users from having to recall their purposes. (Interaction Design Foundation)
Make all actions and options visible within the interface so the user does not have to recall all possible choices. (Nielson)
Incorporate on-demand tutorials so that users do not have to memorize the functionality of everything within the interface. (Harley)
Provide relevant tips in context to aid in learning new commands within the system. (Harley)
Help users pick up where they left off in a task by displaying recently edited or visited items. (Budiu)
To help illustrate these strategies, I will go more in depth with specific examples for each from the Photoshop interface. It is important to note that the key idea, as expressed by Jakob Nielson’s “recognition rather than recall” heuristic, is ultimately to reduce the amount of information that users need to remember within the system. (Nielson)
Use Easily Recognizable Icons
Being able to see the eraser and brush icons and recognize their functionality based on my previous experiences of using these tools in real life was what helped me get started with Photoshop. All of the tool icons within Photoshop are designed to either look like their real-life counterparts, or give some visual indication of what the tool does. Tools like the brush, eraser, magnifying glass, and pencil clearly resemble what these items look like in real life which directly allows users to recognize their functionality.
Brush, eraser, zoom, and pencil tool icons. (Photo via Photoshop)
Tools like the gradient, shapes, crop, and frame promote recognition by illustrating what the tool does. For example, the gradient icon is a gradient and the icons for each shape are their respective shapes. Even if users are unfamiliar with Photoshop’s terminology for these tools, the illustrations are recognizable and provide more visual cues than just seeing the name of the tool.
Gradient, ellipse, frame, and crop tool icons. (Photo via Photoshop)
Some tools, such as the eyedropper, healing brush, sponge tool, and clone stamp, use the recognizable imagery of real-life objects to hint at the functionality of these tools in Photoshop. The icon for the healing brush, for example, is a bandage. While using the healing brush tool in Photoshop does not actually apply a bandage to your canvas, it helps users quickly understand that the tool will somehow help them fix or remedy something within their art.
Eyedropper, healing brush, sponge, and clone stamp tool icons. (Photo via Photoshop)
Whether they directly depict the tool, illustrate the function of the tool, or use a real-life analogy to help users understand what the tool does, Photoshop’s tool icons draw on previous user experiences to promote recognition, thus reducing cognitive load.
Make All Actions and Options Visible
If you are familiar with the phrase “I don’t know what I don’t know,” you can understand the frustration of realizing that there is something you do not know, yet having no idea what information you need to locate in order to improve your understanding. The same goes for user interfaces. Photoshop has dozens of different tools and options - can you imagine using Photoshop without menus or toolbars? How would you know what options you have when creating art or editing a photo if Photoshop did not tell you exactly what it was capable of doing? Luckily, Photoshop has extensive menus and toolbars that display all of your options when working in the program.
Toolbars and menus (highlighted in red) display all options. (Photo via Photoshop)
When designing a user interface, remember that it is easier for your users to select from options on a list and that such lists should be grouped and organized in a logical way that makes it easy for users to find what they are looking for. (Interaction Design Foundation) In the Photoshop toolbar, each primary tool has a drop down menu that displays other related tools. For example, if you click on the lasso tool, Photoshop will also show you the polygonal lasso tool and the magnetic lasso tool. With all of your lasso options visible, it is easy to recognize and select the one most relevant to the task at hand.
Lasso menu displaying all lasso options. (Photo via Photoshop)
Given a menu of all of their options, users will never have to recall all of the dozens of creative functions Photoshop provides.
Incorporate On-Demand Tutorials
Have you ever opened up a program for the first time and been bombarded with a long, multi-step tutorial that you either skimmed, skipped altogether, or watched intently only to immediately forget everything when it came to actually using the program?
If so, it is not your fault if you then struggled to understand the program, as these types of tutorials are not conducive to recognition and instead force users to recall a substantial amount of information on top of the already heavy cognitive load of learning a new program. One way to combat this while still providing educational content for users is by incorporating on-demand tutorials into your designs. In Photoshop, when you hover over a tool icon a quick video pops up to show you what it does and gives an example of how to use it.
Pop-up tutorial for the “lasso” tool. (Photo via Photoshop)
Instead of having to recall the functionality of all of the tools from the initial tutorial, or remember the uses for all of the tools without easily accessible tutorials, users are able to quickly get started with the program and recognize the functionality of relevant tools as they go. (Harley)
Provide Relevant Tips in Context
As discussed earlier, context also plays a huge role in recognition. Similar perceptual inputs in a similar context will trigger the same neural activity pattern, or memory. (Johnson) In the years since I made the novice mistake of manually erasing and coloring the backgrounds of my photos, I learned a lot about the functionality of Photoshop and got to the point where I started using keyboard shortcuts to help speed up my workflow. I found that the hardest thing about using keyboard shortcuts is remembering the keystrokes for different functions. Once I realized that Photoshop includes the keyboard shortcut next to the tool name in the menu, it became much easier for me to learn them, as they were displayed in a contextually appropriate area of the interface and I no longer struggled to recall them.
Tool menus display keyboard shortcuts, such as “B” for brush. (Photo via Photoshop)
Used to opening up the different tool menus, I began to remember the shortcuts because they are always displayed right next to the tools. From there, I recognized and associated them with the name of the tool, which reinforced the memory of each shortcut until I was able to successfully implement them into my workflow.
Help Users Pick Up Where They Left Off
Have you ever walked into a different room to get something only to immediately forget what you were looking for?
Without relevant perceptual cues reminding you of your goal and your progress, it can often be difficult to complete a task. We can design user interfaces that prevent “walking into a new room and forgetting what you were doing” by displaying recent tasks the user completed or files that they recently edited. Photoshop does this by displaying thumbnails of all recently accessed files on the home page upon opening the program.
Recently accessed files displayed on the home screen. (Photo via Photoshop)
Using thumbnails rather than just file names promotes recognition by providing more perceptual cues to distinguish between files. There is no need to recall the difference between Final.psd, FinalV2.psd, and FinalFinal.psd when the thumbnails are there to reference. Additionally, the idea of showing all recently accessed files makes it easy for users to recognize where they left off the last time they used the program and promotes task completion.
Photoshop and the Desktop Metaphor
Within user interfaces, the desktop metaphor is the idea of replicating elements of a physical desktop or workspace within a digital environment. It is the reason you use a trash can to throw away items you do not need anymore, file folders to organize your work, or a desktop where you can place files in both your physical office and your virtual workspace. (Johnson) As discussed earlier, using familiar icons and functionality within our user interface designs promotes recognition and reduces cognitive load for users. (Interaction Design Foundation) Paralleling the look and feel of a physical desktop within a virtual one allows users to more easily recognize functionality because they can draw from past experiences.
As Photoshop caters to creatives, their digital workspace is more of a studio than a desktop. If you picture a painting studio in your head, you may imagine a canvas on an easel, various paint brushes and writing implements within close reach, and maybe a palette to mix paint. In looking at the Photoshop interface, you may begin to notice parallels between your imagined studio space and the layout of Photoshop.
Centered in the middle of the Photoshop workspace is the canvas and all of your brushes, pens, pencils, palettes, and other tools are organized around the canvas for quick access. Using the Photoshop palette, you can “mix” colors similarly to how you would with physical paint. Photoshop’s layering system and blending modes are also reminiscent of how paint and other physical mediums can be layered on a canvas.
Another way Photoshop tailors the virtual studio experience to their creative users is by providing the option to switch between workspace layouts that are optimized for different workflows. For example, users can toggle from the default workspace to the “3D,” “Graphic and Web,” “Motion,” “Painting,” and “Photography” workspaces, which adjust the layout slightly and reposition relevant tools to better cater towards these more specific subsets of users. After all, a photography studio will look different from a painting studio and a photographer will prioritize different tools than a painter.
Difference between “Photography” workspace (left) and “Painting” workspace (right). (Photos via Photoshop)
These considerations show Photoshop’s commitment to promoting recognition over recall by designing with their users’ creative backgrounds in mind to help them more easily transfer creative tasks into a virtual workspace.
Recognition Rather Than Recall and Design Empathy
As designers, having empathy for our users is key in creating functional designs. As we discussed, recognition is an easier process for the human brain than recall because it is assisted by perceptual input while recall is not. (Johnson) The promotion of recognition in a user interface can look like using familiar icons, displaying all relevant tools and options for users to select from, and being cognizant of context when organizing an interface. Your users will have an easier time figuring out your interface if it is familiar to them in some way, similar to how Photoshop parallels the layout of a physical studio space to tailor the experience to their creative users. The next time you use an app or website, take note of the information and perceptual cues the system provides you with and try to imagine how difficult it would be to complete your goal or a relevant task without them. If you use this same empathy when crafting your interface designs, your users will thank you.
Budiu, Raluca. “Memory Recognition and Recall in User Interfaces.” Nielsen Norman Group, Nielsen Norman Group, 6 July 2014, www.nngroup.com/articles/recognition-and-recall/
Harley, Aurora. “Instructional Overlays and Coach Marks for Mobile Apps.” Nielsen Norman Group, Nielsen Norman Group, 16 Feb. 2014, www.nngroup.com/articles/mobile-instructional-overlay/
Johnson, Jeff. “Chapter 9: Recognition Is Easy; Recall Is Hard.” Designing with the Mind in Mind Simple Guide to Understanding User Interface Design Guidelines, 3rd ed., Morgan Kaufmann, Cambridge, MA, 2021, pp. 143–152.
Johnson, Jeff. “How Faithfully Should The Electronic Office Simulate The Real One?” ACM SIGCHI Bulletin, vol. 19, no. 2, Oct. 1987, pp. 21–25, https://doi.org/10.1145/36111.36113
Interaction Design Foundation - IxDF. “What is Recognition vs Recall?” Interaction Design Foundation - IxDF. 2 Dec. 2023, https://www.interaction design.org/literature/topics/recognition-vs-recall
Nielson, Jakob. “10 Usability Heuristics for User Interface Design.” Nielsen Norman Group, Nielsen Norman Group, 15 Nov. 2020, www.nngroup.com/articles/ten-usability-heuristics/
Whitenton , Kathryn. “Minimize Cognitive Load to Maximize Usability.” Nielsen Norman Group, Nielsen Norman Group, 22 Dec. 2013, www.nngroup.com/articles/minimize-cognitive-load/