Forum Discussion
Discussion - Updating our interface with Fluent touches
Thank you so much for all your feedback on the overall design of the new version of Edge, as it is invaluable to our getting the experience right. A common thread through this feedback has been a lot of discussion about the definition of “Fluent” design, and how it should apply to Microsoft products, so we wanted to share an update to provide some clarity. As opposed to a specific or static set of design rules, Fluent is intended to be an ever-evolving design system across Microsoft products. As the world around us continues to evolve, including devices, interaction models, user habits and expectations, the Microsoft design system must also evolve to meet the changing needs of our users. This means Fluent will not necessarily always represent everything that it did several years ago when the look and feel of the legacy version of Edge was first developed. You can learn more about the current direction of Fluent by visiting the Fluent Design System Page, which provides a summary of the design system as a whole, as well as how it applies to different platforms, applications and controls across Microsoft.
If you browse through the Fluent guidance at the link above, you’ll note that the new version of Edge is aligned with the current direction Fluent is going, and we will continue to evolve along with the design system and Microsoft as a whole. While Edge may be one of the first to put some of these new Fluent elements into practice, you will continue to see other products across the company update to reflect this direction as well. For example, you’ll notice that the latest Fluent designs are characterized by rounded corners across objects and controls, and the new version of Edge is consistent with that guidance. Another example is that there isn't a pivotal focus on transparency in the latest Fluent designs, and surfaces of the new version of Edge reflects this.
This is not to say we will never consider incorporating such aspects into our designs going forward, or perhaps offering options to customize the look and feel, but there are no plans to incorporate these elements into the default experience for all users at this time. However, there are other design investments on our roadmap to continue aligning with the broader Fluent direction, such as updating icons and illustrations across the product. Please continue to send your feedback on the overall Edge look and feel, including preferences and pain points, as we are always open to learning more and updating our direction based on the needs of our users.
- The Microsoft Edge Team
I think in the brewing holy war of readability vs conservation of space, I am going to have to rationally side with readability for everyone, and conservation of space for no one.
I don't know that crunching down controls to their absolute minimum pixel space actually does anyone any favors or improves the usability of a product. A product must be comfortable to use. Yes, available space should be used efficiently, but not at the expense of usability or the day-to-day experience of the product.
Whether a browser bar or a button uses two pixel rows too many has lost relevance over the years, especially as physical pixels have shrunk in size and screens increased in size. Thus, the paradigm has shifted: when you have this much real estate to work with, UI/UX becomes the primary concern. In other words: you have the room, so make your product comfortable.
Additionally, I argue against a configurable visual density at the application level. Allowing user preferences down to the pixel level has generally turned out to be a bad thing for developers and users. Developers have too dive too deep into testing each preference combination. In the former, users suffer "choice fatigue" which reduces product stability. In the latter, we lose product satisfaction.
Graphic designers over the last 100 years have mastered the art of using negative space to visually inform users of the relative importance of elements on a page/screen, where we should look for information, and to describe the general tone or aesthetic of their subject. This is why prestige designs don't Cram. Every. Little. Space. With. Information., while your local coupon circular packs it in as tightly as possible. Why? Because they perform different functions. For circulars, every bit of space translates to $. Bargain hunters brains' light up relative to the number of "deals" they see. Maximum density on the page equals maximum returns -- an absolute necessity for a low profit margin industry. Prestige designs take a different approach to lighting up brains: they must efficiently communicate their value proposition. This requires subtle, but carefully thought out design cues: space, negative space, font size, color, all of it, all the way down to stroke width.
So, if your prestige design only needs to communicate a very specific value proposition, why not make your design as small as possible and make room for other information? Because you are the information. You need to command a specific amount of attention with your use of space. Negative space around an element literally communicates, "this is my importance compared to the things around me."
It's why Morpheus is the sole element in a featureless white room. It's not about showing off a "construct." What he has to say is so important that he needs to command your whole attention. Whoa.
All of this is to say that designing a UI/UX isn't just about space efficiency or its strict utility. Your design sells your product. Your balance of buttons and space and tools and colors all communicate your product's value proposition. Could a browser minify itself to give content as much real estate as possible? Sure. But not enough people will want to use it because not enough people will understand it. A minified UI/UX is a value proposition that appeals only to a very specific audience. We need to shoot for actual market share.
Why does a product have to sell itself via its UI/UX? It's worth it to go back and study what choices informed UIs of the past. For example, remember when Word 2.0 introduced their toolbar buttons? Why did they do that at the cost of being able to see less of the page on the screen, my very angry nerd friends asked. (They were SO. MAD.) But think about it, Word was growing its feature set rapidly to catch up to WordPerfect. They needed a way to simultaneously communicate their feature set and make that feature set easier to use than WordPerfect's four row matrix of Shift/Ctrl/Alt and Function keys. (Remember printing that thing out and taping it to the top huuuuuuge bezel of your IBM Model M keyboard? How quaint.) The clickable toolbar on screen was a breath of fresh air, by comparison. Buttons that tell me when bold is on, or whether I'm making bullet lists or number lists? Come on, that was amazing! It looked great on the standard 640x480 screens of the day. The trade-off between tools and content real estate had huge advantages for users who needed a more comfortable experience. Word's toolbar said, "what do you need to memorize function keys for? I'm here for you."
I think Edge is well served by being a comfortable experience. Edge should be easy to find, easy to learn, and easy to interact with. Toolbars and menus and tabs should not be crowded, lest they be ignored or overlooked. Like, imagine you're learning a new product, and you didn't even realize a super-important feature existed because you didn't have enough of a visual clue that it was there and that it did something? I can fully appreciate why Edge's toolbar and menus are sized as they are. The design says to me, "[contented sigh] it's ok. We don't have to prove anything to each other. Here's what I do. I'm easy. Let's just chill and enjoy some sites."
Make your apps comfortable.
JasonLovesMicrosoft I have, but one word for your polemic on UI/UX design theory: Brilliant
Obviously not everyone will agree, but IMO if you don't already work at Microsoft, some smart manager should be preparing a job offer with all the haste they can muster.
Thanks! You're right, I'm sure a lot of people will find something to pick apart in what I said, and many things they say will be good points that deserve consideration. And, a lot of what I think will be irrelevant as new technology emerges and changes the way we interact (like touch vs mouse). I'm always excited to learn that I don't always know what I think I know. You know?
Hey there some smart manager, I'm happy and well paid at my current work. But that doesn't mean I can't be lured away to something really cool.
JasonLovesMicrosoft (Uhh, somehow I nuked my post when I edited it for a typo. I don't want to actually lose it, so I'm posting it again.)
I think in the brewing holy war of readability vs conservation of space, I am going to have to rationally side with readability for everyone, and conservation of space for no one.
I don't know that crunching down controls to their absolute minimum pixel space actually does anyone any favors or improves the usability of a product. A product must be comfortable to use. Yes, available space should be used efficiently, but not at the expense of usability or the day-to-day experience of the product.
Whether a browser bar or a button uses two pixel rows too many has lost relevance over the years, especially as physical pixels have shrunk in size and screens increased in size. Thus, the paradigm has shifted: when you have this much real estate to work with, UI/UX becomes the primary concern. In other words: you have the room, so make your product comfortable.
Additionally, I argue against a configurable visual density at the application level. Allowing user preferences down to the pixel level has generally turned out to be a bad thing for developers and users. Developers have too dive too deep into testing each preference combination, and users suffer "choice fatigue" which reduces product stability, and ultimately product satisfaction.
Graphic designers over the last 100 years have mastered the art of using negative space to visually inform users of the relative importance of elements on a page/screen, where we should look for information, and what the general tone of any particular subject is. This is why prestige designs don't Cram. Every. Little. Space. With. Information. while your local coupon circular packs it in as tightly as possible. Why? Because they perform different functions. For circulars, every bit of space translates to $. Bargain hunters brains' light up relative to the number of "deals" they see. Maximum density on the page equals maximum returns -- an absolute necessity for a low profit margin industry. Prestige designs take a different approach to lighting up brains: they must efficiently communicate their value proposition. This requires subtle, but carefully thought out design cues: space, negative space, font size, color, all of it, all the way down to stroke width.
So, if your prestige design only needs to communicate a very specific value proposition, why not make your design as small as possible and make room for other information? Because you are the information. You need to command a specific amount of attention with your use of space. Negative space around an element literally communicates, "this is my importance relevant to the things around me."
It's why Morpheus is the sole element in a featureless white room. It's not about showing off a "construct." What he has to say is so important that he needs to command your whole attention. Whoa.
All of this is to say that designing a UI/UX isn't just about space efficiency or its strict utility. Your design sells your product. Your balance of buttons and space and tools and colors all communicate your product's value proposition. Could a browser minify itself to give content as much real estate as possible? Sure. But not enough people will want to use it because not enough people will understand it. A minified UI/UX is a value proposition that appeals to a very specific audience. We need to shoot for actual market share.
Why does a product have to sell itself via its UI/UX? It's worth it to go back and study what choices informed UIs of the past. For example, remember when Word 2.0 introduced toolbar buttons? Why did they do that at the cost of being able to see less of the page on the screen, my very angry nerd friends asked. (They were SO. MAD.) But think about it, Word was growing its feature set rapidly to catch up to WordPerfect. They needed a way to simultaneously communicate their feature set and make that feature set easier to use than WordPerfect's four row matrix of Shift/Ctrl/Alt and Function keys. (Remember printing that thing out and taping it to the top huuuuuuge bezel of your IBM Model M keyboard? How quaint.) The clickable toolbar on screen was a breath of fresh air, by comparison. Buttons that tell me when bold is on, or whether I'm making bullet lists or number lists? Come on, that was amazing! It looked great on the standard 640x480 screens of the day. The trade-off between tools and content real estate had huge advantages for users who needed a more comfortable experience. Word's toolbar said, "what do you need to memorize function keys for? I'm here for you."
I think Edge is well served by being a comfortable experience. Edge should be easy to find, easy to learn, and easy to interact with. Toolbars and menus and tabs should not be crowded, lest they be ignored or overlooked. Like, imagine you're learning a new product, and you didn't even realize a super-important feature existed because you didn't have enough of a visual clue that it was there and that it did something? I can fully appreciate why Edge's toolbar and menus are sized as they are. The design says to me, "[contented sigh] it's ok. We don't have to prove anything to each other. Here's what I do. I'm easy. Let's just chill and enjoy some sites."
Make your apps comfortable.
