Icons are more than just pretty decorative graphics for sites and applications, they are little miracle workers. They summarize and explain actions, provide direction, offer feedback and even break through language barriers. — Jon Hicks
Icons are ubiquitous and for a good reason. They help create visual hierarchy, highlight essential ideas and communicate complex information using minimal space. Like images, icons lack language making them more universally-recognized than words.
Before creating new icon designs, it helps to reflect on some existing icons that you use on a regular basis. I’m a landscape photographer and shoot with a Nikon D850 — an advanced DSLR. The camera body packs a lot of functionality into the manual controls that give photographers on-the-fly access to settings without the need to dig into the menus.
Five Noteworthy Icons on the Nikon D850
Illuminated Buttons
As one gets accustomed to the controls, they become better at remembering where things are by touch. Getting comfortable with the controls comes in handy for shooting at night when daylight is minimal. Turning on a flashlight can destroy the exposure. This brings us to our first icon, the illuminated button switch.
This illuminated button icon (yellow arrow above) is one of the less obvious on the camera. With a little experimentation, the user realizes that the icon is a light that turns on the back buttons. A switch is used that already has a purpose, but in this case, the user must hold the switch in the ‘on’ position. The second icon to the left symbolizing ‘hold’ improves the clarity of the message. Sometimes multiple icons can be used together to communicate more complex ideas. I’m not sure how well the line and oval communicate ‘hold.’ But, it does serve the purpose of making the user aware of some alternative way of interacting with the switch.
Photo / Video
Here, two icons signal the primary functions of the camera: photo and video. Nikon chose to map the camera and video recorder functions to a switch rather than a button. Using a switch helps reduce mistaken button presses. To draw attention, icons use solid white fills, unlike most others which incorporate simple outlines. Now you might wonder why the more modern ‘play’ button isn’t used for video. In this case, it serves as the playback icon. So in some cases, one icon can represent many meanings depending on the context.
Magnifier
The magnifying glass is a widely-recognized icon. It shares the basic outline with the more prevalent ‘Search’ icon and then adds a ‘+.’ This icon serves a dual-purpose of zooming in on photos (taken) as well as zooming into the LCD during live-view capture. Someone new to a DSLR might assume that it can also zoom (change the focal length) the lens, but it does not. Having one icon represent two related functions can be confusing, but it is a win from an engineering standpoint. Multi-mapping is rarely seen in web design elements. In web design, it’s more common to find consolidation in elements such as drop-downs and hamburgers.
Some other camera manufacturers use toggles on the front of their cameras (side not facing user) going left to right. This is a mistake since people do not associate left and right with more or less like they do with up and down. Placement of icons and buttons matters!
Self-timer
For people to recognize icons, they don’t need to be exact copies. Like words written in different typefaces, icons can vary from design to design and still be useful. From one company or design to the next, we can make sense of icons as long as they are similar enough. Congruency and brand consistency matter much more when we are using multiple icons in one context, i.e., a website.
When attempting to use a lesser-known symbol, it can help to draw on existing icons with similar meaning. The camera’s self-timer icon implies a time of some sorts. New users may be unsure which of the three types of camera timers functions this symbol refers to, but they probably have a hunch that it is a timer of some sort.
Info / i
Last, but not least, are the confusing and overlapping “info” and “i” icons.
One enters the info of shooting settings, while the other enters live-view settings. Not only are these icons similar, but they are also placed right next to one another and without context that could point or hint towards a more complex purpose. How about ‘infoS’ for shooting? Even an ‘info1’ and an ‘info2’ button would allow users to associate a number with the corresponding meaning. Nikon, what are you thinking?
Wrap It Up
The icons on the D850 have a similar although not entirely consistent styling to them. Nikon designed these icons using only one color except the ‘format SD card,’ where they use red as a warning. The thickness of the stroke was well thought out so to provide good readability. Some icons are familiar while others are specific to the photography industry, requiring a reading of the manual for novices. Most of the icons are outlines, while some had fills. Most likely, the decision came down to a combination of priority (fills > outlines). Or some icons are more readable in one form or the other.
The Nikon D850 is a perfect example of the power of icons, and also demonstrates the importance of using them correctly. While text could have been used in some cases, we would have to give up significant space and readability, and so by using icons have a much better experience.