Share this article

With KB5043178 to Release Preview Channel, Microsoft advises Windows 11 users to plug in when the battery is low

Copilot in Outlook will generate personalized themes for you to customize the app

Microsoft will raise the price of its 365 Suite to include AI capabilities

Death Stranding Director’s Cut is now Xbox X|S at a huge discount

Outlook will let users create custom account icons so they can tell their accounts apart easier

Microsoft wants developers to enhance Windows 10 app user interface design with iconography

3 min. read

Published onJune 2, 2016

published onJune 2, 2016

Share this article

Read our disclosure page to find out how can you help Windows Report sustain the editorial teamRead more

When the Windows team made the transition from Windows 7 to 8, it bet heavily (arguably too much at the time) on typography and iconography in ushering in a new era of quick visual identification and representation for more dense information.

While the Windows team may have backtracked on its more aggressive design vision of Windows 8, the styling cues of itsMetro/Modern Designare still very much alive in Windows 10 and the team would like to help developers to make full use of them when engaging users.

In ablog post titledUsing iconography to enhance UX design, the Windows team walks developers through the nuances of leveraging icons, specifically how and when to replace text or copy within apps and services with images.

Iconography is a visual language used to represent features, functionality, or content. Icons are meant to be simple, visual elements that are recognized and understood immediately.

It perhaps goes without saying that, thanks in large part to the limited surface area and input methods beholden to smartphones and tablets, developers have had to exercise more creative methods for displaying information and menu options. The Windows team’s iconography tips include:

When to use custom iconography

Standard icon sets only go so far, however. In addition to OS or device-specific icons, your app may also need its own set of icons to represent app-specific functionality that the standard sets cannot accommodate without creating ambiguity for the user (e.g. recipe search, movie bookmark, image download).

This goes beyond the user simply not knowing what to do. If the user is likely to hesitate or expend any energy in order to figure out an icon in your app, then you will probably want to use a custom icon.

Where to find icons

Like fonts, icons are available for download. Icon sets are designed by professional artists and made available for you to use in your app. You may choose icons sets that are free (like vectoricons.org and freeiconsdownload.com) or icons that can be purchased (such as those on popular sites like istockphoto.com, shutterstock.com, and iconshock.com).

And perhaps most important, the team stresses being consistent. The last note the Windows team offers may go without saying, but a consistent typography and iconography where applied, goes a long way in helping users quickly develop muscle memory when navigating an app or service.

Likewise, consistency ensures that each icon has equal weight, drawing your users’ eyes equally. Take a look at Figure 3 below. Both the left and right images may look similar, but notice how the icon style on the left has both filled and unfilled shapes. This inconsistency pulls the eye of the user disproportionately to the filled icons—video, mail, and photo. In contrast, check out the icon set on the right. Those icons are consistent in both their thematic style and design elements. Each one engages the eye equally.

There are a few more details regarding iconography that are recommended, and developers can follow up on them in theBuilding Apps for Windowsiconography series. As Microsoft continues to court developers to its development tools and environments, the company is also benefiting from an industry that is also looking to leverage similar app design languages across platforms and services. No longer is larger typography and iconography-heavy navigations seen as an albatross of software design.

Kareem Anderson

Networking & Security Specialist

Kareem is a journalist from the bay area, now living in Florida. His passion for technology and content creation drives are unmatched, driving him to create well-researched articles and incredible YouTube videos.

He is always on the lookout for everything new about Microsoft, focusing on making easy-to-understand content and breaking down complex topics related to networking, Azure, cloud computing, and security.

User forum

0 messages

Sort by:LatestOldestMost Votes

Comment*

Name*

Email*

Commenting as.Not you?

Save information for future comments

Comment

Kareem Anderson

Networking & Security Specialist

He is a journalist from the bay area, now living in Florida. He breaks down complex topics related to networking, Azure, cloud computing, and security

With KB5043178 to Release Preview Channel, Microsoft advises Windows 11 users to plug in when the battery is low#

Copilot in Outlook will generate personalized themes for you to customize the app#

Microsoft will raise the price of its 365 Suite to include AI capabilities#

Death Stranding Director’s Cut is now Xbox X|S at a huge discount#

Outlook will let users create custom account icons so they can tell their accounts apart easier#

Microsoft wants developers to enhance Windows 10 app user interface design with iconography#