Skeuomorphism is dead, long live skeuomorphism

- 1.1k shares
- 4 years ago
Iconography in user experience (UX) design refers to a visual language geared to product identity, where designers craft or adapt icons—simplified illustrations that help users navigate across digital environments. Designers create clear, unambiguous icons and use them consistently to communicate effectively so users can instantly recognize their meaning and achieve goals faster.
CEO of Experience Dynamics, Frank Spillers explains important points about Google’s Material Design, a helpful resource in the design of icons and more.
A very, very good source of guidance and inspiration comes from Google's Material Design. Google originally created this around 2014. And they've updated it since, so it's important that you look at the latest and greatest for the Material Design language or design system. It's interesting to note that one of the journalists said, 'The mind-numbing specificity of Material Design is a response of two factors:
one – if it's possible for them to ruin a UI, they will. and two, the alternative to good design isn't no design, it's bad design.' And so, Material Design brings this nice *balance of beauty as well as function*. And it's really important to understand that because underlying Material Design is an agenda for *clean affordances*. Affordances are those ways that your users know that the UI is there to interact with,
like a button looks like a button, a menu looks like a menu, search looks like search and so forth. You can see from the Material style guide that there are very specific UI guidelines, and that's why it's important to consult the UI style guide – Material, also Android, also iOS, depending on which platform you happen to be building for; probably you're building for all. So, you want to consult each one and align your UI to the best practices that are laid out in the style guides.
You'll see here in this example that Material Design is looking for *visual consistency* to reduce the noise, to reduce the clutter, and this is a nice example of that. The other thing that's typical of Material is kind of large fonts or large typography in order to enunciate or to bring attention to a task and to bring focus, really. Of course, *icons* are important, and the Material icons are maybe a little too materially too colorful.
So, one of the styles that's really emerged that's become more standard is this kind of flat and almost black and white or blue or – you know – or even filling in like a little corner of a notification or a mailbox, and then the rest of it is black or blue or something like that. So, going with a more simple style is definitely better. Material is asking for *high contrast* because Material also has accessibility guidelines.
And you should also look up Material accessibility guidelines. So, contrast is so important for all users but particularly users with low vision. They just can't see – no affordance, because everything blends together: grey on grey or red on some other lighter color. Motion graphics and animation are an important thing, so you can bring a lot of motion and a lot of play through animation and it can help highlight affordances.
Material is all about *bold colors*; it's all about the boldness. And Google actually offers a really nice tool for color contrast, so you can play with those. When we say bold colors, though, it's important that you stick to like *one or two primary colors* and then maybe *one or two secondary complementary colors*. You don't really want to add way too much color, and, like I said, the trend has been to go towards more of a simplified and less colorful type of approach, especially with icons.
Check out this example. Look at what might possibly go wrong here in terms of contrast, icons, affordances – you know – call to action, essentially icon navigation, just lost in this kind of colorful sort of – you know – low contrast; you see the yellow and the grey, the select. It's very hard for your eye to focus and Material is saying use color to bring contrast,
boldness and also, of course, beauty and a sense of style or a sense of crispness.
The definition of iconography—as well as the design and application of iconography sets—has evolved with computing and design over many years. Particularly with the advent of home computing in the early 1980s—and especially with the common use of the computer mouse—the need to represent interactive functionality on screens became profound. Icons are a vital component of any graphic user interface (GUI).
Icons are essentially a form of design language that encapsulate concepts in simple shapes. To a certain extent, they mirror pictograms in graphic design and infrastructure works—such as those inside buildings and on roadsides, like “for customers with disabilities” or “to airport”—for users to understand at a glance the function or content on their screens. Effective visual iconography is far more than a skill designers need to create visual elements to improve the user experience and interactive design of a digital product. Icons represent keys to accessing vast dimensions of usability in digital products. Without them—and unless voice-controlled user interfaces (VUIs) become the dominant form—users would encounter severe pain points and obstacles to their goals.
Google’s Material Design icons are customizable options.
© Google, Fair Use
In iconography for web design and apps, well-designed iconic symbols are vital cues for how a user interacts with a user interface (UI). The importance of icons for digital interfaces becomes even more apparent when one considers the relationship between a signifier and an affordance in the physical world. For instance, a door is an affordance. Meanwhile, the presence of a push plate—as opposed to a “Pull” handle—helps users realize what they must do to use the door in the right direction. If the plate also features the word “Push,” that’s the signifier that assures users of what to do. Other examples include the red “Exit” sign or a pictogram of a person running—set above a fire exit. Since icons on digital devices must offer more intricate functionalities—and more frequently on small screens—designers must leverage principles of iconography in UI design well to guide their target audience. They need to offer users the most effective types of icons to suit their needs for a multitude of tasks and goals.
Some iconography examples have become firmly entrenched in the modern user experience. The trash can—later the recycle bin—was an early example of an icon in an interface. It’s a skeuomorphic design. This means the trash can mimics its real-world counterpart. Early computer users also came to associate the icon of the then-common floppy disk with the function of saving work such as a text file. These two physical items—the floppy having long since fallen out of everyday use—are examples of how iconography becomes established and then indelibly stamped in the public consciousness. Icons that succeed and become “household names” are like shorthand for the brain to respond to—like muscle memory.
Some icons are mainstays of UI design, such as these ones that resemble their real-world counterparts.
© Interaction Design Foundation, CC BY-SA 4.0
Designers continue to create, adapt and use icons to:
One main purpose of icons is that they should be immediately recognizable—a quality that makes them effective for quick communication in user interfaces. Their ability to encapsulate information swiftly is especially valuable in environments where speed and clarity are vital. Especially in mobile contexts—the more common way users engage brands in the 21st century—this is a particularly important consideration for designers to accommodate in icons. When designers use a well-crafted icon style that users find familiar or can learn at a glance, it means users can navigate new interfaces more efficiently.
In digital design—especially on smartphone screens—space is a premium commodity. Icons are compact and allow a limited interface area to feature multiple functions. This space efficiency makes them indispensable in toolbars and menus where horizontal or vertical real estate is limited. So, designers can create clean and uncluttered user interfaces.
Icons transcend linguistic barriers, so they’re a universal component of digital communication. They eliminate the need for translation in global applications—particularly helpful for international software. An envelope icon indicates email, for example. Icons can form part of a seamless user experience across different cultures and languages—slashing the potential for confusion while boosting accessibility.
Author and Human-Computer Interaction Expert, Professor Alan Dix explains important points about how to design with culture in mind:
As you're designing, it's so easy just to design for the people that you know and for the culture that you know. However, cultures differ. Now, that's true of many aspects of the interface; no[t] least, though, the visual layout of an interface and the the visual elements. Some aspects are quite easy just to realize like language, others much, much more subtle.
You might have come across, there's two... well, actually there's three terms because some of these are almost the same thing, but two terms are particularly distinguished. One is localization and globalization. And you hear them used almost interchangeably and probably also with slight differences because different authors and people will use them slightly differently. So one thing is localization or internationalization. Although the latter probably only used in that sense. So localization is about taking an interface and making it appropriate
for a particular place. So you might change the interface style slightly. You certainly might change the language for it; whereas global – being globalized – is about saying, "Can I make something that works for everybody everywhere?" The latter sounds almost bound to fail and often does. But obviously, if you're trying to create something that's used across the whole global market, you have to try and do that. And typically you're doing a bit of each in each space.
You're both trying to design as many elements as possible so that they are globally relevant. They mean the same everywhere, or at least are understood everywhere. And some elements where you do localization, you will try and change them to make them more specific for the place. There's usually elements of both. But remembering that distinction, you need to think about both of those. The most obvious thing to think about here is just changing language. I mean, that's a fairly obvious thing and there's lots of tools to make that easy.
So if you have... whether it's menu names or labels, you might find this at the design stage or in the implementation technique, there's ways of creating effectively look-up tables that says this menu item instead of being just a name in the implementation, effectively has an idea or a way of representing it. And that can be looked up so that your menus change, your text changes and everything. Now that sounds like, "Yay, that's it!"
So what it is, is that it's not the end of the story, even for text. That's not the end of the story. Visit Finland sometime. If you've never visited Finland, it's a wonderful place to go. The signs are typically in Finnish and in Swedish. Both languages are used. I think almost equal amounts of people using both languages, their first language, and most will know both. But because of this, if you look at those lines, they're in two languages.
The Finnish line is usually about twice as large as the Swedish piece of text. Because Finnish uses a lot of double letters to represent quite subtle differences in sound. Vowels get lengthened by doubling them. Consonants get separated. So I'll probably pronounce this wrong. But R-I-T-T-A, is not "Rita" which would be R-I-T-A . But "Reet-ta". Actually, I overemphasized that, but "Reetta". There's a bit of a stop.
And I said I won't be doing it right. Talk to a Finnish person, they will help put you right on this. But because of this, the text is twice as long. But of course, suddenly the text isn't going to fit in. So it's going to overlap with icons. It's going to scroll when it shouldn't scroll. So even something like the size of the field becomes something that can change. And then, of course, there's things like left-to-right order. Finnish and Swedish both are left-to-right languages. But if you were going to have, switch something say to an Arabic script from a European script,
then you would end up with things going the other way round. So it's more than just changing the names. You have to think much more deeply than that. But again, it's more than the language. There are all sorts of cultural assumptions that we build into things. The majority of interfaces are built... actually the majority are built not even in just one part of the world, but in one country, you know the dominance... I'm not sure what percentage,
but a vast proportion will be built, not just in the USA, but in the West Coast of the USA. Certainly there is a European/US/American centeredness to the way in which things are designed. It's so easy to design things caught in those cultures without realizing that there are other ways of seeing the world. That changes the assumptions, the sort of values that are built into an interaction.
The meanings of symbols, so ticks and crosses, mostly will get understood and I do continue to use them. However, certainly in the UK, but even not universally across Europe. But in the UK, a tick is a positive symbol, means "this is good". A cross is a "blah, that's bad". However, there are lots of parts of the world where both mean the same. They're both a check. And in fact, weirdly, if I vote in the UK,
I put a cross, not against the candidate I don't want but against the candidate I do want. So even in the UK a cross can mean the same as a tick. You know – and colors, I said I do redundantly code often my crosses with red and my ticks with green because red in my culture is negative; I mean, it's not negative; I like red (inaudible) – but it has that sense of being a red mark is a bad mark.
There are many cultures where red is the positive color. And actually it is a positive color in other ways in Western culture. But particularly that idea of the red cross that you get on your schoolwork; this is not the same everywhere. So, you really have to have quite a subtle understanding of these things. Now, the thing is, you probably won't. And so, this is where if you are taking something into a different culture, you almost certainly will need somebody who quite richly understands that culture.
So you design things so that they are possible for somebody to come in and do those adjustments because you probably may well not be in the position to be able to do that yourself.
Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons
Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg
Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg
Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg
Designers tend to align the icon symbols they use on digital products like websites and mobile apps with the look and feel of their brand. It’s important to present users with iconography that’s familiar to them. However, if a designer can fine-tune this sense to match the personality of their brand—including a suitable color palette—they can welcome users and customers that much further into a seamless experience.
One of the keys to a seamless user experience is that users should not need to pause and think about the interface or its icons.
© Andrew Kucheriavy, Fair Use
Designers can utilize libraries like Google Material Design iconography or start working on their own from scratch. In any case, when designers embark on icon design, they should:
Establish a clear, consistent visual language: It should match the brand’s personality and the users’ expectations. So, it’s vital to conduct user research and follow the brand’s guidelines in a design brief. For example, a “traditional” bank website will call for a look that boosts trust, with a careful application of sedate colors and symmetry or visual balance. Meanwhile, an entertainment-oriented app can afford to embrace a certain degree of playfulness. In any case, designers should consider factors such as the following:
Line weight: For example, 2 pixels for a line weight is a common feature.
Fill style: Designers choose whether they want to stroke icons or fill them. If they stroke them, it’s important to have the same line thickness.
Strokes and fills—important considerations for a brand’s icon set.
© Interaction Design Foundation, CC BY-SA 4.0
Corner radius: This is the degree to which the icon has rounded corners.
This image marks the change when iOS app corners became distinctly more rounded.
© Appifier, Fair Use
Use a grid system to keep the alignment and balance effective: It’s vital to make sure that each icon is in harmony visually within the set.
The icon’s live area is the part visible to users. An icon 24×24 dp (density-independent pixels) in overall size would have an effective live area of 20×20 dp—so, with 2-pixel padding.
© Shriya Pandey, Fair Use
Make sure icons are ultra-quick for users to recognize: It’s best to use ones that users are used to. Familiar icons that have stood the test of time are there for consistent application. Designers can apply Home (house icon), Print (printer) and Search (magnifying glass) as reliable examples.
The Play button, along with next track and previous track symbols and others, are universal to recognize, on Amazon and Spotify, for example.
© Amazon, Fair Use
© Spotify, Fair Use
Use icons to save space but keep fat-finger friendly as a rule of thumb for mobile users: Users need to recognize icons in toolbars and elsewhere, so they shouldn’t be too detailed or hard to decipher. Plus, users need to be able to enjoy great accessibility, including with fat-finger friendly icon sizes (44 pixels).
Make icons describe function and purpose in visual terms: They’re not for decoration. Designers should consider if their product’s users could tell what an icon means without any help from labeling.
Always use a single icon set as per design and branding guidelines: In the same sense that microcopy needs to be consistent (e.g., “Remove item” or “Delete”), so do the icons on a site or app. One icon should have a single function, and there shouldn’t be multiple icons for the same function.
Label for clarity, as needed: On a toolbar, for example, be sure to label icons for clarity. Labels should go on the right of the icon or beneath it. Be sure to leave enough space between the icon and its label to maximize readability.
Beware of icons that might be ambiguous to users: Even if one thinks that sheer weight of usage over the decades should have indelibly stamped what some icons mean in the popular psyche, designers shouldn’t take the gamble if in doubt. For example, hamburger menus have historically proved problematic in this way—most interfaces implement hamburger icons to indicate the main navigation menu, but some don’t. Star and heart icons also run into grey areas in the sense that some users may not associate them with bookmarking and favorites, respectively.
Two icons can mean the same thing.
© Interaction Design Foundation, CC BY-SA 4.0
Keep icons simple: Don’t insert too much graphic detail or make complex arrangements. Icons need to be schematic and recognizable at first glance.
Use distinct shapes and colors: If users can recognize shapes and colors that represent distinct functions, they’ll be able to act accordingly and without confusion.
Use text labels if the need arises: Sometimes, there can be doubt over how to encapsulate a function within—or indicate content using—an icon. Text labels can serve either to complement the icon or to serve as a button in its own right.
Some brands apply a combination of text labels and icons—as with YouTube (above)—and some utilize more text buttons, like Bank of America, below.
© YouTube, Fair Use
© Bank of America, Fair Use
Remember visual hierarchy: Consider how the icons work as a set on each screen. It’s vital to arrange them so they complement the interface and deliver the most intuitive experience to users.
Watch our video to understand more about visual hierarchy:
Visual hierarchy refers to the arrangement or organization of elements within a design in a way that guides the viewer's eye through the content in a specific order of importance. It's about creating a clear and logical structure that helps users navigate and understand the information presented. You can use size and scale, color and contrast typography, white space
alignment, repetition, proximity, visual elements such as icons, images, textures and graphics and reading patterns. By using these principles effectively, Designers can guide the viewer's focus, ensuring that the most important elements are noticed first and create a more intuitive and engaging experience.
Test icons with real users: This is vital. As straightforward and intuitive as designers believe their icon creations may be, only through user testing can they get the feedback they may need to make refinement to icons—to ensure they’re intuitive and effective. Remember, simplicity in design aids user recognition and understanding. This is why effective icons remain an indispensable tool in UI design
UX Strategist and Consultant, William Hudson explains the importance of user testing:
If you just focus on the evaluation activity typically with usability testing, you're actually doing *nothing* to improve the usability of your process. You are still creating bad designs. And just filtering them out is going to be fantastically wasteful in terms of the amount of effort. So, you know, if you think about it as a production line, we have that manufacturing analogy and talk about screws. If you decide that your products aren't really good enough
for whatever reason – they're not consistent or they break easily or any number of potential problems – and all you do to *improve* the quality of your product is to up the quality checking at the end of the assembly line, then guess what? You just end up with a lot of waste because you're still producing a large number of faulty screws. And if you do nothing to improve the actual process in the manufacturing of the screws, then just tightening the evaluation process
– raising the hurdle, effectively – is really not the way to go. Usability evaluations are a *very* important tool. Usability testing, in particular, is a very important tool in our toolbox. But really it cannot be the only one.
When it comes to choices in iconography, Google’s Material Design is an example of a popular resource to work with. Designers who want to create their own icons have many options, too. The following tools are among the most helpful with features like collaborative work facilitation and plugin libraries:
Adobe Illustrator: Vector-based, this tool is good for designing icons, logos and more.
Figma: This is a popular choice to make UI elements with—and that includes icon sets.
Sketch: This vector-based software is easy to learn.
Designers can use icon templates as well.
© Gavin McFarland, Fair Use
Overall, a well-designed set of icons is a key part of product design. Users come to know—and love—the brands they choose to interact with through a journey of discovery. The best of these journeys invariably include those all-important seamless experiences. Like the logo, a brand’s iconography is a form of visual communication with its users and customers.
Many designers don’t venture out to create icons in a custom set for their client’s or brand’s digital products. However, the creations of designers who do stretch creatively to design system iconography, symbols and more intuitive ways to interact with a brand can be impressive. The most effective of these may prove to strengthen the links between users, customers and the brands they love in a more engaging and delightful UX. Some icons may join the core group of household symbols like the recycle bin, and through sheer frequency of use become iconic.
Take our Visual Design: The Ultimate Guide course.
Consult Guide to Iconography Design for Enhancing Your UX/UI Abilities by Bonnie Kate Wolf for further insights.
Go to Icon Usability - Best UX Tips and Design Guidelines by Andrew Kucheriavy for more information and guidelines.
See UI Icons: Explaining Every Single Type with Inspirational Examples by Sandra Boicheva for more details and tips.
Read How to Design Better Icons by Buninux for more insights, tips and information.
Refer to Google’s Material Design guidelines, including for icons.
To create effective UI icons, keep simplicity, clarity and consistency as your focus. Simple icons are things that users can recognize and understand quickly. Avoid unnecessary details—they can clutter your design and confuse users.
Use simple shapes and lines: Choose basic shapes that users can easily identify. Simplify the icon's design to its most essential form.
Maintain clarity: Make sure the icon's purpose is clear for users at a glance. Test your icons with users to confirm they understand each intended function.
Keep them consistent: Use a consistent style throughout the interface; that means consistency in line weight, color palette and size—for a cohesive and professional look.
Follow established conventions: Use familiar symbols that users recognize—for instance, a magnifying glass for search or a trash can for delete.
Test for scalability: Icons should be clear at various sizes. Test your icons on different devices and resolutions.
Add labels when you need to: If the icon's meaning isn’t clear immediately, add a label so users can understand the icon's function.
Keep an eye on hierarchy: See how the icons look together on the screen; is the hierarchy effective?
Take our Visual Design: The Ultimate Guide course.
Watch our video to understand more about visual hierarchy:
Visual hierarchy refers to the arrangement or organization of elements within a design in a way that guides the viewer's eye through the content in a specific order of importance. It's about creating a clear and logical structure that helps users navigate and understand the information presented. You can use size and scale, color and contrast typography, white space
alignment, repetition, proximity, visual elements such as icons, images, textures and graphics and reading patterns. By using these principles effectively, Designers can guide the viewer's focus, ensuring that the most important elements are noticed first and create a more intuitive and engaging experience.
Flat icon design and skeuomorphic icon design are different both in their visual style and the philosophy behind each.
Flat Icon Design:
Flat icons use simple shapes and colors—no textures, gradients or shadows.
Designers focus on clear minimalism—prioritize functionality over decoration.
Flat icons look modern and clean. Plus, they load quickly, which improves performance.
Skeuomorphic Icon Design:
Skeuomorphic icons mimic real-world objects. They have textures, shadows and gradients for a three-dimensional effect.
Designers aim to make digital interfaces feel familiar, so they replicate physical objects like magnifying glasses.
Skeuomorphic icons often look detailed and realistic. They can help users understand new technology since they relate it to real-world items.
Read our Topic Definition of Flat Design.
Read our Topic Definition of Skeuomorphism.
It’s best to approach this with a clear strategy. Try the following:
Make sure your colors are in line with your brand’s identity: Use brand colors consistently; it helps users recognize your icons quickly. Refer to your brand guidelines.
Think about color meanings and cultural differences: For instance, red often signifies urgency or errors, while green indicates success—or safety. Research your target audience so you know how they might look on colors.
Make accessibility a priority: Make sure there’s enough contrast between icon colors and backgrounds; it will help with visibility. Tools like WebAIM’s contrast checker will help you meet accessibility standards.
Use color sparingly: Too many colors can confuse users. Instead, use color to highlight key icons or show different states (e.g, active or inactive).
Test your icons in various contexts: View them on various devices and backgrounds to see that they remain effective.
Read our piece, Understand Color Symbolism.
Watch our video on accessibility to understand more about this vital subject:
Accessibility ensures that digital products, websites, applications, services and other interactive interfaces are designed and developed to be easy to use and understand by people with disabilities. 1.85 billion folks around the world who live with a disability or might live with more than one and are navigating the world through assistive technology or other augmentations to kind of assist with that with your interactions with the world around you. Meaning folks who live with disability, but also their caretakers,
their loved ones, their friends. All of this relates to the purchasing power of this community. Disability isn't a stagnant thing. We all have our life cycle. As you age, things change, your eyesight adjusts. All of these relate to disability. Designing accessibility is also designing for your future self. People with disabilities want beautiful designs as well. They want a slick interface. They want it to be smooth and an enjoyable experience. And so if you feel like
your design has gotten worse after you've included accessibility, it's time to start actually iterating and think, How do I actually make this an enjoyable interface to interact with while also making sure it's sets expectations and it actually gives people the amount of information they need. And in a way that they can digest it just as everyone else wants to digest that information for screen reader users a lot of it boils down to making sure you're always labeling
your interactive elements, whether it be buttons, links, slider components. Just making sure that you're giving enough information that people know how to interact with your website, with your design, with whatever that interaction looks like. Also, dark mode is something that came out of this community. So if you're someone who leverages that quite frequently. Font is a huge kind of aspect to think about in your design. A thin font that meets color contrast
can still be a really poor readability experience because of that pixelation aspect or because of how your eye actually perceives the text. What are some tangible things you can start doing to help this user group? Create inclusive and user-friendly experiences for all individuals.
There are several common mistakes in icon design you should be aware of, so you can make sure your icons are effective and user-friendly. These include:
Don’t use overly complex designs: Icons should be simple and recognizable at a glance. Complex icons can confuse users and don’t communicate their purpose quickly enough.
Avoid inconsistency: Use a consistent style, size and color scheme across all your icons. Inconsistent icons disrupt the visual harmony and make your interface look unprofessional.
Don’t rely solely on color to convey meaning: Users with color blindness might not distinguish certain colors. Combine color with other visual elements, such as shapes or labels, to ensure clarity.
Make sure your icons are universally understandable: Avoid culturally specific symbols that might confuse international users. For example, a mailbox icon might not make sense to users in countries where physical mailboxes are uncommon.
Test your icons on different devices and screen sizes: Icons should look clear and sharp on all resolutions. Blurry or pixelated icons can frustrate users and spoil the user experience.
Watch as Author and Human-Computer Interaction Expert, Professor Alan Dix explains why it’s important to design with culture in mind:
As you're designing, it's so easy just to design for the people that you know and for the culture that you know. However, cultures differ. Now, that's true of many aspects of the interface; no[t] least, though, the visual layout of an interface and the the visual elements. Some aspects are quite easy just to realize like language, others much, much more subtle.
You might have come across, there's two... well, actually there's three terms because some of these are almost the same thing, but two terms are particularly distinguished. One is localization and globalization. And you hear them used almost interchangeably and probably also with slight differences because different authors and people will use them slightly differently. So one thing is localization or internationalization. Although the latter probably only used in that sense. So localization is about taking an interface and making it appropriate
for a particular place. So you might change the interface style slightly. You certainly might change the language for it; whereas global – being globalized – is about saying, "Can I make something that works for everybody everywhere?" The latter sounds almost bound to fail and often does. But obviously, if you're trying to create something that's used across the whole global market, you have to try and do that. And typically you're doing a bit of each in each space.
You're both trying to design as many elements as possible so that they are globally relevant. They mean the same everywhere, or at least are understood everywhere. And some elements where you do localization, you will try and change them to make them more specific for the place. There's usually elements of both. But remembering that distinction, you need to think about both of those. The most obvious thing to think about here is just changing language. I mean, that's a fairly obvious thing and there's lots of tools to make that easy.
So if you have... whether it's menu names or labels, you might find this at the design stage or in the implementation technique, there's ways of creating effectively look-up tables that says this menu item instead of being just a name in the implementation, effectively has an idea or a way of representing it. And that can be looked up so that your menus change, your text changes and everything. Now that sounds like, "Yay, that's it!"
So what it is, is that it's not the end of the story, even for text. That's not the end of the story. Visit Finland sometime. If you've never visited Finland, it's a wonderful place to go. The signs are typically in Finnish and in Swedish. Both languages are used. I think almost equal amounts of people using both languages, their first language, and most will know both. But because of this, if you look at those lines, they're in two languages.
The Finnish line is usually about twice as large as the Swedish piece of text. Because Finnish uses a lot of double letters to represent quite subtle differences in sound. Vowels get lengthened by doubling them. Consonants get separated. So I'll probably pronounce this wrong. But R-I-T-T-A, is not "Rita" which would be R-I-T-A . But "Reet-ta". Actually, I overemphasized that, but "Reetta". There's a bit of a stop.
And I said I won't be doing it right. Talk to a Finnish person, they will help put you right on this. But because of this, the text is twice as long. But of course, suddenly the text isn't going to fit in. So it's going to overlap with icons. It's going to scroll when it shouldn't scroll. So even something like the size of the field becomes something that can change. And then, of course, there's things like left-to-right order. Finnish and Swedish both are left-to-right languages. But if you were going to have, switch something say to an Arabic script from a European script,
then you would end up with things going the other way round. So it's more than just changing the names. You have to think much more deeply than that. But again, it's more than the language. There are all sorts of cultural assumptions that we build into things. The majority of interfaces are built... actually the majority are built not even in just one part of the world, but in one country, you know the dominance... I'm not sure what percentage,
but a vast proportion will be built, not just in the USA, but in the West Coast of the USA. Certainly there is a European/US/American centeredness to the way in which things are designed. It's so easy to design things caught in those cultures without realizing that there are other ways of seeing the world. That changes the assumptions, the sort of values that are built into an interaction.
The meanings of symbols, so ticks and crosses, mostly will get understood and I do continue to use them. However, certainly in the UK, but even not universally across Europe. But in the UK, a tick is a positive symbol, means "this is good". A cross is a "blah, that's bad". However, there are lots of parts of the world where both mean the same. They're both a check. And in fact, weirdly, if I vote in the UK,
I put a cross, not against the candidate I don't want but against the candidate I do want. So even in the UK a cross can mean the same as a tick. You know – and colors, I said I do redundantly code often my crosses with red and my ticks with green because red in my culture is negative; I mean, it's not negative; I like red (inaudible) – but it has that sense of being a red mark is a bad mark.
There are many cultures where red is the positive color. And actually it is a positive color in other ways in Western culture. But particularly that idea of the red cross that you get on your schoolwork; this is not the same everywhere. So, you really have to have quite a subtle understanding of these things. Now, the thing is, you probably won't. And so, this is where if you are taking something into a different culture, you almost certainly will need somebody who quite richly understands that culture.
So you design things so that they are possible for somebody to come in and do those adjustments because you probably may well not be in the position to be able to do that yourself.
Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons
Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg
Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg
Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg
Take our Visual Design: The Ultimate Guide course.
You can do several things, such as:
Match your icon style to your brand identity: If your brand feels modern and sleek, use minimalist and clean icons. If your brand feels playful and fun, opt for colorful and whimsical icons. This alignment creates a cohesive visual experience for users.
Consider the context of where you’ll use the icons: For example, use simple and clear icons for mobile apps so users can read easily on small screens. For websites, you might have some more flexibility to use somewhat more detailed icons.
Keep things consistent: Choose a style and stick with it across all icons to keep a harmonious look. Mix-and-match styles can confuse users—and make your interface look unprofessional.
Make clarity a priority: Icons should communicate their purpose without your needing to include text. Don’t use abstract designs that might confuse users.
Test your icons with your target audience: Get and collect feedback to see if users understand—and appreciate—the style. Make adjustments according to their input so you make sure your icons meet their needs.
Take our Visual Design: The Ultimate Guide course.
UX Strategist and Consultant, William Hudson explains important points about usability testing:
If you just focus on the evaluation activity typically with usability testing, you're actually doing *nothing* to improve the usability of your process. You are still creating bad designs. And just filtering them out is going to be fantastically wasteful in terms of the amount of effort. So, you know, if you think about it as a production line, we have that manufacturing analogy and talk about screws. If you decide that your products aren't really good enough
for whatever reason – they're not consistent or they break easily or any number of potential problems – and all you do to *improve* the quality of your product is to up the quality checking at the end of the assembly line, then guess what? You just end up with a lot of waste because you're still producing a large number of faulty screws. And if you do nothing to improve the actual process in the manufacturing of the screws, then just tightening the evaluation process
– raising the hurdle, effectively – is really not the way to go. Usability evaluations are a *very* important tool. Usability testing, in particular, is a very important tool in our toolbox. But really it cannot be the only one.
Iconography plays a crucial role in branding; here are some ways:
Icons help users recognize your brand quickly: Unique and consistent icon designs create a visual identity that users associate with your brand. For example, Apple’s simple, sleek icons mirror its innovative and modern brand image.
Icons communicate messages efficiently: They carry complex ideas in a compact visual form. For instance, a shopping cart icon immediately tells users where to find their purchases.
Icons help users as they guide navigation and highlight important actions: Clear and intuitive icons help users interact with your product effortlessly—a hallmark of a positive experience.
Icons support accessibility: They give visual cues that go beyond language barriers. Universal icons, such as the envelope for email, make sure that users around the world understand their functions.
Read our piece, Understand Color Symbolism.
Watch our video on accessibility to understand more about this vital subject:
Accessibility ensures that digital products, websites, applications, services and other interactive interfaces are designed and developed to be easy to use and understand by people with disabilities. 1.85 billion folks around the world who live with a disability or might live with more than one and are navigating the world through assistive technology or other augmentations to kind of assist with that with your interactions with the world around you. Meaning folks who live with disability, but also their caretakers,
their loved ones, their friends. All of this relates to the purchasing power of this community. Disability isn't a stagnant thing. We all have our life cycle. As you age, things change, your eyesight adjusts. All of these relate to disability. Designing accessibility is also designing for your future self. People with disabilities want beautiful designs as well. They want a slick interface. They want it to be smooth and an enjoyable experience. And so if you feel like
your design has gotten worse after you've included accessibility, it's time to start actually iterating and think, How do I actually make this an enjoyable interface to interact with while also making sure it's sets expectations and it actually gives people the amount of information they need. And in a way that they can digest it just as everyone else wants to digest that information for screen reader users a lot of it boils down to making sure you're always labeling
your interactive elements, whether it be buttons, links, slider components. Just making sure that you're giving enough information that people know how to interact with your website, with your design, with whatever that interaction looks like. Also, dark mode is something that came out of this community. So if you're someone who leverages that quite frequently. Font is a huge kind of aspect to think about in your design. A thin font that meets color contrast
can still be a really poor readability experience because of that pixelation aspect or because of how your eye actually perceives the text. What are some tangible things you can start doing to help this user group? Create inclusive and user-friendly experiences for all individuals.
Here are some main ones; icon libraries:
Save you time: Designers can access a wide range of pre-made icons and not have to make each icon from scratch.
Make sure of consistency: All icons in a library share a unified style—and so keep a cohesive look across your project, improve users’ experiences, plus make your design appear professional.
Offer variety: They provide numerous icons for different purposes, allowing designers to find the perfect match for their needs. This variety ensures that you can cover all aspects of your design without compromising on style.
Make for easy customization: Designers can often adjust the size, color and other icon properties for their brand-specific requirements.
Frequently update: Regular updates give you access to the latest design trends and technologies—helping keep your project modern and relevant.
Take our Visual Design: The Ultimate Guide course.
Read our Topic Definition of Design Systems for more on icons and other relevant subject.
Icons are important for this since they guide users' attention and clarify information for them. More specifically, icons:
Draw the eye to important elements: For icons that are next to key actions or information, these elements stand out—for example, a trash can icon highlights the delete function.
Help organize content: They break up text-heavy sections and give visual cues. Users find it easier to scan and understand, then.
Indicate what the functionality is: They show users what actions they can take, such as play, pause or share—helping them understand at a glance what to do.
Create emphasis: Larger or more colorful icons draw more attention, so helping users to prioritize information, such as a red warning icon for critical issues.
Keep the visual hierarchy clear: When they’re in consistent use and follow a cohesive style, icons are part of a structured and professional design.
Take our Visual Design: The Ultimate Guide course.
Watch our video to understand more about visual hierarchy:
Visual hierarchy refers to the arrangement or organization of elements within a design in a way that guides the viewer's eye through the content in a specific order of importance. It's about creating a clear and logical structure that helps users navigate and understand the information presented. You can use size and scale, color and contrast typography, white space
alignment, repetition, proximity, visual elements such as icons, images, textures and graphics and reading patterns. By using these principles effectively, Designers can guide the viewer's focus, ensuring that the most important elements are noticed first and create a more intuitive and engaging experience.
Try to follow these steps:
Use dual-tone icons: Make two versions of each icon—one for light mode and one for dark.
Make high contrast a priority: Make sure your icons contrast well against both light and dark backgrounds. Don’t use colors that blend into the background.
Outline your icons: A border or outline on your icons helps keep visibility high on different backgrounds, and can give a clear edge whatever the background color is.
Test your icons in both modes: Fine-tune any adjustments to make sure of a high level of consistency and readability.
Use adaptive icons if you can: Get icons that automatically adjust based on the user’s mode preference.
Take our Visual Design: The Ultimate Guide course.
Read our Topic Definition of Dark Mode.
Silvennoinen, J. (2016). Aesthetic Appeal and Visual Usability in Four Icon Design Eras [PDF]. Typeset.io.
This publication looks at the influence of different icon design styles from various eras on aesthetic appeal and usability experiences. The study uses the method of primed product comparisons in its analysis as to how users perceive and evaluate icons from different design eras. The main theoretical and methodological contribution is the analysis of visual usability and appeal as a cognitive process—and it sheds light on the partly unconscious process by which people find pictorial representations visually appealing and usable. The paper discusses the multi-dimensional nature of aesthetic appeal and the relationship between familiarity, novelty and aesthetic preferences. It also explores the implications of icon design styles on visual search and user interface design principles for creating visually usable and aesthetically pleasing interfaces.
Spiliotopoulos, K., Rigou, M., Sirmakessis, S., & Tsakalidis, A. (2018). A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective. Multimodal Technologies and Interaction, 2(2), 31.
This publication investigates how users perceive and experience the two dominant design approaches in user interface design—skeuomorphism and flat design—specifically at the level of icon design. The study examines icon recognizability, recall, effectiveness, as well as overall aesthetic appeal and perceived usability of the two design styles through a series of experiments and eye-tracking data. The main contribution is an analysis of the potential effects of the design approach on various usability metrics like task completion time, errors, as well as subjective assessments of usability and aesthetics. The paper aims to provide insights into the ongoing debate around skeuomorphic vs flat design—through empirically evaluating user perceptions and performance with each style. The findings have implications for designing visually usable and aesthetically appealing user interfaces.
Remember, the more you learn about design, the more you make yourself valuable.
Improve your UX / UI Design skills and grow your career! Join IxDF now!
You earned your gift with a perfect score! Let us send it to you.
We've emailed your gift to name@email.com.
Improve your UX / UI Design skills and grow your career! Join IxDF now!
Here's the entire UX literature on Iconography by the Interaction Design Foundation, collated in one place:
Take a deep dive into Iconography with our course Visual Design: The Ultimate Guide .
In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.
In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs.
In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use.
In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers.
In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.
You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”
Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.
In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.
You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.
You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!