The Iconography of Sharing
Windows has updated its share icon — here’s why it matters
Icons are charged with interpretative metaphors. The share icon in particular — and what it should look like — has been passionately debated over the past few years among web and app designers. The concept of sharing is a tough thing to communicate in just a few line strokes. As a result, many people have gotten used to whatever icon their mobile phone platform uses.
Recently, our own share icon got us thinking. Does the current visual representation convey sharing in the best way? From data in our usability labs, we’ve consistently seen people misunderstanding or looking past the icon in the user interface, especially when a label didn’t accompany it. When it stood alone, many people saw its circular shape and mistakenly interpreted it against other ring-shaped icons like sync or refresh or loading.
What to do? How do you define the metaphor, and better guide people to share?
Meaningful vs. Ubiquitous Icons
We believe an icon can be successful in two important ways. When it’s a meaningful icon, it’s a pretty literal representation. The icon does what it says it will do because it calls upon a real-world object or action. For example, a trashcan to mean delete, get rid of, or throw away is meaningful thanks to how we use trashcans in the real world.
An icon can also be successful in a ubiquitous way — something that’s universally accepted as a true representation regardless of its symbolic meaning. Think about the red octagon to represent stop in the United States and other countries. It works because it’s ubiquitous, not because an eight-sided shape means stop. If you live in Japan, the traffic sign is an inverted red triangle and in Papua New Guinea the stop sign is a curved shield. These things become understood, across a shared language.
With this in mind, we set out to explore a new share icon design. We wanted everyone to discover it, interpret it, and utilize it, without any confusion or clunky translation. Instantaneous, intuitive iconography. At the heart of it, we just want everyone to be able to easily share. After a round of thinking about what a meaningful icon could look like, there seemed to be less clarity rather than more. We considered different gift icons (gifting = sharing), we thought about how the word “share” translated in other languages, we sketched people handing each other objects and we even thought about hands grabbing pizza slices (we got weird about it), but they all seemed to stray from our goal of creating a simple, quickly understood icon.
Opting for Familiarity
In the end, we designed an icon that benefits from ubiquity and familiarity. We looked at the icons users were seeing out in the wild and tested similar variations to see which icons best represented what it meant to share. We A/B tested them against the old share icon in the Photos app, with and without labels. You may have seen us testing a few different kinds of icons in the past few months if you used the Photos app.
The best performing icon was our new icon, a rectangle housing a swooping arrow that indicates motion out of the rectangle. An exit, a movement, a share from one point to another. Your favorite websites and apps use this same “swooping arrow” in varying designs, which helped with the familiarity factor we were after. It performed beautifully in A/B testing, and made us confident that making a significant change would ensure usability and clarity for millions of Windows users.
It’s Official
The new share icon shows up in some of your favorite apps in the latest Windows Insider build. Universal Windows app developers will see this icon available in the Segoe font as a replacement for the old share icon. As always, we’ll keep listening to your feedback and embrace the opportunity to iterate and improve as needed. We hope all app developers and users alike will find the new icon a welcome usability change to Windows! Happy sharing, everyone.
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
