Fabric’s New Item Icon System
UX Theory behind our new Fabric item type icons
(Left) New item type icons for Fabric (Right) Fabric’s icon color palette analysis for accessible contrast ratios
Item types and the icons that represent them are the heart of Fabric—compiling sets of complex capabilities into powerful objects that allow you to seamlessly work with your data. As we aim to expand Fabric as platform, stewarding a scalable ecosystem of icons to represent this evolving set of capabilities is critical. In this post, I’ll cover how the Fabric UX team developed this ecosystem, emphasizing contextual categorization and intentional use of color as it now exists in Fabric.
Why rethink our icon system?
We’ve listened to your feedback leading into Public Preview, and the importance of a highly usable UI is a common topic—icons being a major contributor to this. While we initially launched with a set of mono-line icons consistent with Fluent (Microsoft’s design language), many of our users have mentioned having difficulty parsing through large lists of different items across their workspaces and quickly finding the item they’re looking for. This month, we’re releasing a new icon system that addresses this issue and creates a scalable future for icons across Fabric.
The role of semantic categorization
A foundational aspect of good UX is helping users form habits that reinforce core product functions which, in many cases, can be nearly invisible to the day-to-day user. Across the journey of working with data today, we believe semantic categorization can be a guiding principle for creating improved usability in a system that will only increase in complexity over time.
What does this mean in the context of iconography across Fabric? It’s all about ensuring that our icons convey meaning in a clear and consistent way, and naturally fall into relationship with one another according to a contextual categorization through color, style, and common patterns. In addition to every icon being recognizable and intuitively related to its function, it also belongs to a family of activity within the data journey of Fabric. These categories are based upon the semantics of item capabilities and functional places in the product. Beyond specific offerings encapsulated within Fabric, these categories align with core concepts across today’s modern data journey.
While we won’t explicitly surface what colors or patterns belong to these concepts and categories, we expect users will easily form an understanding around these families as they continue to use Fabric, and as the platform grows.
This new system is also important as we consider the evolution of Fabric’s capabilities. We intend for our platform to expand in scope and scale, and this approach empowers teams and organizations to do more with data and spend less time deciphering what each icon represents within a workflow.
Considerations of our icon system
Now that we’ve established the importance of semantic categorization and how we’re leveraging color and visual patterns to communicate this, let’s delve into some other key considerations for designing icons in Fabric.
Accessibility: Fabric is committed to offering an accessible and highly useable UI experience. Icons are core to comprehending and navigating our capabilities, and we put a primary focus on the contrast and readability of our icons for this reason.
Simplicity and recognizability: Icons should be simple, yet unmistakable. Complexity can hinder scalability. Our intention with this icon set is to quickly communicate the capabilities present in the item and the role they play in the data journey, while using bolder fills and distinct shapes to easily differentiate them from each other.
Visual cohesion: Consistency matters. Across an experience, icons should adhere to a unified design language—in our case Microsoft’s Fluent design language. Consistency builds familiarity across our product surfaces and enhances user understanding so that working becomes easier over time.
Scalability for the world of data: We believe that our icon system should deliver a recognizable and scalable system that quietly communicates cohesion through our visual language. With many items across platform capabilities today, and an expectation of evolution and expansion of Fabric in the future, we want our users to have a seamless experience while they’re navigating dozens of items and product places.
The importance of your feedback
Icons, like any design element, benefit immensely from your feedback. We heard your feedback about the last iteration of icons being difficult to quickly scan for differentiation, and we agree that while we had improved overall visual clutter, we overly impacted the usability of the UI elements in the product. We’re confident that this new update will vastly improve that issue, and we’re committed to continued improvements across the UI like this one.
We encourage you to continue to provide input on the interface and experience of using Fabric so we can continue to invest in improving it with you. We’re excited to keep an eye out for more feedback, and will continue to iterate and evolve as Fabric and it’s users do.
