![]() ![]() Twitter separates its icons for doing (writing a tweet, taking a photo, and uploading an image) vs. Let’s take a look at what Twitter got right with this icon: ![]() Despite having no label, in our study, 80% of users correctly guessed what it would do. Twitter’s famous quill pen icon is a great example. Some unique icons are very effective at conveying their meaning for first-time users as well as returning users. That’s not to say you always have to stick with common icons if you want to create a usable interface. No matter how much sense an icon makes once you know what it’s supposed to represent, it can be a completely different experience for first-time users. How can you convey more abstract concepts-like viewing your upcoming trips, sending an audiobook to a friend, reviewing your order history, or tracking your sleep patterns-with a single symbol?Ī lot of designers try, and a lot of designers fail. One of the trickiest icon challenges is what to do when your product has unique functions beyond the standard actions of sharing, favoriting, uploading pictures, writing text, and so on. (You may laugh, but I’ve heard a small child ask her mother why the phone symbol isn’t shaped like a phone. Continuing to use icons like the floppy disk can make your brand feel old-fashioned to a younger user base.Įven the symbol for a telephone may have to evolve as younger users are less likely to recognize a phone receiver. Most of us who remember using floppy disks have no problem with the Save icon still seen in lots of applications, but many users born after 1995 just think it’s a strange quirk that old folks insist on clinging to. Lots of commonly used icons reference outdated or obsolete technology. If you’re not convinced on this one, just read this article showing 12 different variations of the Share icon, including several that could easily be mistaken for something other than Share. Standard bar icons can vary drastically from one OS to another, creating extra confusion for users. Consider these common icons that have multiple meanings:Įven in the context of the app itself, these symbols can be really confusing when the user is expecting one outcome and gets a different one.Īnd that’s not to mention the differences between iOS and Android conventions. Like the heart, there are quite a few icons we’re used to seeing in multiple contexts, but they perform slightly different functions from one product to the next. It’s clear that this icon is used to indicate that you like something.īut does it save that image or item to a list of favorites? Does it notify someone that you’ve liked it? Will it shape your preferences and add similar images or items to your feed? Or is it just a general expression of approval? What does this mean? What happens if you tap it? Imagine you see this icon below an image in an app. The trouble comes in when you’re implementing commonly-used icons that have contradictory or mixed meanings. Fancy or overly clever icons for basic functions can ruin the user experience. Your icons’ first job is to guide your users to where they need to go. You can rely on your other design elements to convey your brand message. In most cases, icons aren’t the place to be creative. It's a pretty safe bet that a house-shaped icon will take you to the homepage or home screen, and a shopping cart will let you purchase an item. Types of icons and their impact on the user experience Easy icons Some were less so, like a flag indicating group membership. Some of the icons were obvious, like a magnifying glass indicating the search function. We watched 35 users interact with 190 icons on a series of Android apps. ![]() We set up a remote usability study exploring the user experience with icons on mobile apps. Since so many apps and websites use confusing icons, we wondered: what does it take to make an icon user-friendly? But when done wrong, they can confuse your users, lead them down the wrong paths, and ruin their experience with your product. When done correctly, icons can help you guide users intuitively through a workflow without relying on too much copy. But more importantly, they’re there to aid your users. Sure, icons are there to save space on the screen. Any icon in your interface should serve a purpose, whether you’re designing a website or an app. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |