Icon Usability

29 Jul.,2024

 

Icon Usability

Summary: 

View Details

A user&#;s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

In addition to conveying brand personality through color and style, icons must first and foremost communicate meaning in a graphical user interface. Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to mere eye candy &#; confusing, frustrating, eye candy &#; and to visual noise that hinders people from completing a task.

The benefits of icons in a graphical user interface (GUI) include:

  • Icons make good targets: they are typically sized large enough to be easily touched in a finger-operated UI, but also work well with a mouse cursor (in contrast to words, which can suffer from read&#;tap asymmetry on touch screens).
  • Yet they save space: icons can be compact enough to allow toolbars, palettes, and so on to display many icons in a relatively small space.
  • Icons are fast to recognize at a glance (if well designed) &#; particularly true for standard icons that people have seen and used before.
  • There is no need to translate icons for international users, provided that the icons are mindful of cultural differences (for example, mailboxes look very different in various countries whereas envelopes look the same, therefore an envelope is a more international icon for an program than a mailbox).
  • Icons can be visually pleasing and enhance the aesthetic appeal of a design.
  • They support the notion of a product family or suite when the same icons and style are used in several places.

Despite these potential advantages, icons often cause usability problems when they are designed without consideration for their many potential downsides.

&#;Universal&#; Icons Are Rare

There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the magnifying glass for search are such instances. Outside of these examples, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces. This absence of a standard hurts the adoption of an icon over time, as users cannot rely on it having the same functionality every time it is encountered.

The 3-line hamburger icon is an excellent example of an icon that is striving to become universally known. While the majority of interfaces use this icon to represent the main navigation menu, some use the same (or a very similar icon) to stand for a list. For example, the list-management app Buy Me a Pie uses the 3-line icon as the way to access a list of frequently added items. To further the confusion, the icon is placed to the right of a text field, a location usually associated with a submit button. (The text field and the list icon have separate functionalities: if you thought that entering text into the input field and then selecting the menu icon would provide a narrowed-down list of matching items, you&#;d be wrong.)

Other icons frequently misunderstood by users include the heart and the star. These icons are often used to represent favorites, bookmarks, featured items, and ratings from other users. Not only does the precise functionality associated to these icons vary from site to site, but these two icons compete with each other. As a result, these icons and their exact meanings are hard to memorize and interpret precisely. For example, the heart icon on the vacations listing site Combadi allows users to mark that they &#;love&#; a trip, but does not save that trip to a short list to ease future referencing. (Users in our recent usability study disliked that anyone can &#;love&#; a trip, as opposed to only people who had actually purchased it.) In contrast, the interior-design shopping site Fab uses the heart icon as a way for a user to save that item in order to find it easily later.

Even a slight difference in meaning and functionality hinders the ability for a user to understand and rely on an icon when it is encountered in future experiences.

Just last week, we reported our usability study of a website that employs a clock icon in its main navigation bar. While the graphic itself was easily recognizable as a clock, the meaning of the icon was completely obscure because it was a non-standard use of the concept of a clock or watch: the clock icon is used to symbolize navigation history and opens a drawer with the most recent pages that the user had visited. Not a single test participant clicked this icon. Obscure icon = wasted feature.

Icons Need a Text Label

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you&#;re using a standard icon, it&#;s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.)

Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don&#;t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.

The website Usability.gov uses navigation icons for Methods, Templates and Documents, and Guidelines on every page within the site. If I asked each person reading this article to send me an icon that represented Methods, I am sure I would receive a wide variety of designs. As we stated as part of our design guidelines for homepage usability years ago, &#;if you find you need to ponder to come up with an icon for navigation, chances are it&#;s not going to be easily recognizable or intuitive for users.&#; While the mobile version of the site recognizes that text labels need to accompany the icons to impart some meaning, the desktop version hides these labels until the curious user decides to hover over them. Fixing these navigational items to the left side of the page in order to remain available to users when they scroll indicates that the organization believes them to be important and useful. However, stripping these icons of text labels renders them completely meaningless and is counterproductive to the goal of providing easy access to content.

Relative Size Aids Noticeability

In general, icons tend to be more salient on mobile phones compared to desktop websites and applications. It is easy to assume that because an icon (for example, the hamburger) works on a mobile design, it will translate well to desktop. Alas, this is not the case! On mobile screens, there are fewer elements that compete for users&#; attention (simply because the screen is smaller and can fit less information). In contrast, desktop screens are bigger and usually contain a lot of content; users may easily miss some of it depending on what part of the screen attracts their attention. If the only elements currently in view on a consist of a logo, a headline, a single image, and a menu icon, that menu icon stands a much greater chance of being noticed by a user than the same icon presented in the upper corner of a desktop site full of attractive content.

Also consider the relative size of an icon compared to other visual elements presented on the screen. In a typical header for a mobile website, the hamburger menu icon consumes roughly 20&#;25% of the available screen width. When that design is scaled up on a larger device, the size of the icon generally remains about the same. As a result, on desktops (and larger tablets, especially in landscape orientation) the icon will be smaller and less salient compared to other elements on the screen. This issue can be avoided on larger screens (where there is usually plenty of space) by simply making the navigation visible rather than collapsing it under an icon. By doing so, not only will the menu options be more discoverable, but you can also avoid the many usability problems that arise from hiding the global navigation.

Tips for Designing with Icons

If you decide to include icons in your interface, do your research first! Familiarize yourself with icons used by your competitors and with icons commonly used on the platforms that you target, as those will be most recognizable to your users.

If you must design new icons, strive to make them easy to recognize and memorize by following these guidelines:

  • Keep the design simple and schematic. Reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image in order to speed up recognition. (Intricate details are difficult to distinguish at smaller sizes.)
  • Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.
  • Test the icons for recognizability: ask people what they expect the icons to stand for.
  • Test the icons for memorability: ask a repeat set of users if they can remember the icon&#;s meaning after being told what it represented a couple weeks earlier.

And always include a visible text label. As Bruce Tognazzini once said, &#;a word is worth a thousand pictures.&#;

The Evolution of Advertising and How it Has Improved Over ...

The evolution of advertising has experienced some major milestones over the years, as it&#;s had to adapt and change to suit new mediums and audiences constantly. Most significantly, it&#;s become much more personalized throughout history. The one medium that&#;s had the biggest impact on the history of advertising and advertising personalization is the internet, and its ability to collect billions of data points on users.

For starters, Facebook alone has 98 personal data points on its 2.2 billion users, totaling 215.6 billion data points.

Even more impressive is Google. Between the company&#;s seven unique products with over 1 billion monthly active users each, Google collects enough personal data from its users over the course of one year to equal 569,555 sheets of paper. If printed and stacked, this would measure more than 189 ft. tall.

Starting with the pre-internet days, the timeline below shows how it has changed since the beginning. Then, a deeper look at how online advertising has completely revolutionized the practice in recent decades.

Build personalized landing pages with Instapage &#;

The evolution of advertising: the very beginning

Although the very first signs of advertising are said to date back to the ancient Egyptians&#; steel carvings in BC, the first print ad was published in when William Caxton printed ads for a book and tacked them to church doors in England:

Fast forward to , the first newspaper ad was published in the U.S.:

Then, in , the first U.S. billboards displayed circus posters measuring over 50 sq. ft.:

Sears was the first company to focus more on personalization by advertising through direct mail. When they launched their massive direct mail campaign in with 8,000 postcards, it produced 2,000 new orders.

Then came the &#;Golden Age,&#; where advertising personalization began to take off even more...

Build personalized landing pages with Instapage &#;

The &#;Golden Age of Advertising&#;

Advertising became a whole movement when it came to radio and television in the early s. Since it was speaking to people directly through their radios and TVs, it felt more personalized.

Advertising first hit the radio in . Radio host H.M. Blackwell created his own &#;indirect direct&#; method -- a 10-minute talk about the virtues of living a carefree life at the Hawthorne Court Apartments in Jackson Heights, Queens. The cost for a 10-minute time slot was $50.

Personalization took another big leap in when Rosser Reeves introduced the idea of a unique selling proposition. Since a USP (aka unique value proposition) describes how your business will solve a customer&#;s problem, it should be very specific and highly personalized to differentiate your brand.

In , George Gallup introduced market research -- gathering information about consumers to better relate and advertise to them.

The next major milestone in the evolution of advertising timeline came on July 1, , when the first legal and continental commercial popped up on TV screens on WNBT. Although this Bulova Watch Company ad was brief (only a 10-second spot for a simple graphic and voiceover):

&#;it set the precedent for the next 70 years.

TV viewers began to feel optimistic, despite the 50s being tense for America during the Cold War. They started opening their wallets more as prosperity began to rise again -- and a large part of this was due to a change in advertising tactics (not just mediums). This was called the &#;Golden Age of Advertising&#; -- a time of big ideas and huge personalities during the s through the late s.

Companies began building characters around their products to establish more of a connection between viewers and brands. Tony the Tiger for Frosted Flakes, or the Snap, Crackle, and Pop gnomes for Rice Krispies -- both of which are still seen on cereal boxes today:

Famous faces, like the Marlboro Man from the s to s, were also often used to sell products:

XRPINK contains other products and information you need, so please check it out.

Among all the different characters that emerged, the ads at this time had one main purpose: to sell. While the characters played a major part in creating an ad culture for consumers, the product was always at the forefront.

That is until online advertising came about, and with it came several major game-changers in the evolution of advertising and personalization.

Build personalized landing pages with Instapage &#;

Online advertising

This next period was known for introducing new channels and mediums and a drastic shift in motive. Rather than selling, the evolution of ads lead to a focus on brand awareness and problem-solving. What is the consumer&#;s problem, and how can the product solve it? Now the product was no longer the centerpiece of the ad -- the consumer was.

This all started when internet usage took off in with the introduction of online services like America Online and Prodigy. When everyone suddenly began using the internet for personal reasons, advertisers jumped all over the opportunity to reach consumers there. They began shifting their attention to more digital ads, starting with display advertising.

The evolution of display advertising began with the very first banner ad from AT&T in :

About 44% of the people who saw the ad clicked it, and when they did, they landed here:

Although the page lacked any optimization, the ad set off a chain reaction that altered the course of the advertising industry, and banner ads caught on extremely quickly.

In , Yahoo transformed itself from a web directory to a commercial business. The company announced an advertising deal for their own primitive banner ads, with five sponsor company logos rotating daily across the top of the site:

During this same year, Yahoo also created the first keyword-based ad.

The chain reaction continued into the next year when Planet Oasis launched the first version of PPC advertising, and Open Text began selling paid ads.

Mobile advertising came next, as mobile phones came into existence.

The evolution of mobile advertising

The first mobile ad showed up in when a Finnish news provider sent free news headlines via SMS. This led to more experimental mobile ads and mobile marketing initiatives down the road.

When the original iPhone was released in , mobile advertising came to smartphones. However, still new to the medium, advertisers would simply reformat their desktop ads for mobile, meaning they weren&#;t well-designed and didn&#;t provide an ideal user experience. In response to widespread negative feedback from these first smartphone ads, advertisers began making their ads &#;mobile-first.&#;

The launch of the App Store in with the iPhone 3G allowed advertisers to take advantage of mobile app ads instead of mobile web browser ads. Then, as capabilities grew to include things like interactive gaming and GPS technology, mobile ads started incorporating these features for a more personalized and engaging user experience.

With the drastic evolution of online and mobile advertising, also brought challenges. Here&#;s a brief look at a few of them, along with the solutions that followed.

Build personalized landing pages with Instapage &#;

Digital advertising: challenges and solutions

Challenges

Lack of trust

Despite advertisers&#; best efforts to appeal more to consumers with new methods and mentality, many viewers remain wary of advertisements. In particular -- pop ups, auto-playing videos, ads that push the main content below the fold, full-screen ads, ads that increase load times, and deceptive ads.

Research shows that Millennials are the most skeptical of ads. And since this is the first generation to grow up attached to the internet, social media, smartphones, tablets, laptops, etc., they have the most purchasing power and are the most important audience for many businesses.

Ad blockers

Audiences actively choose to avoid ads while they browse the internet. People will even pay if it means they can bypass sitting through ads. In alone, this cost publishers up to $22 billion in revenue -- a clear sign that advertisers needed to change their tactics.

Fortunately for advertisers, they have since developed ad formats and marketing strategies to combat ad blockers.

Solutions

User-generated content

Most consumers trust other consumers before they trust brands. Hence the rise of user-generated content. Essentially, consumers have become a part of advertising, rather than just passive onlookers.

This marketing strategy became especially popular when social media advertising began in , starting with Facebook ads:

Consumers are much more likely to communicate their feelings over social media these days. They also communicate with one other far more than any ad campaign can communicate with them. For example, when evaluating a purchase, people often turn to friends and social networks to get additional opinions. That&#;s why it&#;s so important to build a community around your brand.

Facebook is perfect for this as it promotes user participation and engagement. When users find a product they show interest in -- they&#;re likely to share it, and then others tend to follow suit.

In the end, consumers want connectivity, trust, and assurance. They don&#;t necessarily want those from a brand. They want it from close, trusted sources -- and who&#;s more trustworthy than their own social communities?

Along with user-generated content and social media advertising, targeting options have also played a significant role in how digital advertisers reach prospects.

Targeting options

Advertisers today have billions of data points about consumers from Google and Facebook.

Over the course of one year, Google collects enough personal data from its users to equal 569,555 sheets of paper. If printed and stacked, this would measure more than 189 ft. tall. Google&#;s data points include:

  • Location
  • Apps used and websites created
  • Searches and bookmarks
  • Emails, contacts, and calendar data
  • Google Drive files
  • Google hangout sessions
  • YouTube videos
  • Photos taken on your
  • Music listened to

Facebook alone has 52,000 data points, including:

  • Every message you&#;ve ever sent or received
  • Likely interests based off things you&#;ve liked and commented on
  • Stickers you&#;ve sent
  • Every time you log in, where you logged in from, what time, and from what device
  • Every app you&#;ve ever had connected to your account
  • Access to your webcam and microphone at any time
  • contacts, emails, calendar, call history, messages, downloaded files, games, photos and videos, music, search history, browsing history, etc.

With so many data points available to advertisers, they&#;re able to create extremely targeted and personalized ads. Case in point, this one from Marvel Universe Live, who knows my geographical location and family make-up (mom of two boys):

Hyper-targeting is critical because if digital advertisers can access data points like these, but also birthdays, marital status, family composition, occupation, type of car owned, etc. -- then the ads people see will be more relevant to them.

Build personalized landing pages with Instapage &#;

The evolution of advertising includes the post-click stage

Advertising has experienced many changes from the ancient Egyptian etchings to print ads, to the Golden Age, to today -- where highly-targeted, personalized online ads are the only way to succeed in today&#;s marketing world.

Show ads and promote ideas that people want to see and hear. Because the more people don&#;t see your content as an &#;ad,&#; the more they&#;ll be attracted to it, engage with your brand, and eventually purchase.

The ad click isn&#;t the end goal, though. After optimizing the pre-click stage, the post-click stage must match it. Get the most of your post-click marketing optimization opportunities, sign up for an Instapage Enterprise demo today.

If you are looking for more details, kindly visit Personalized cultural labels.