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 am going to write down what the topics are in bold and my views/opinions normal sized, also the headings that are blue are the ones not summarized in the last paragraph, to make it easier to skim through
- Ability to add distinct color or color themes to the main browser interface.
- This would be good to make browsing with Edge more customized
- Add transparency or other material effect to the main browser interface.
- This would be good but sometimes the background acrylic can look ugly as a result of the stuff behind the browser, so try to make it appealing to most
- or make an Appearances setting/New setting page called 'Themes' or something similar, where there are options for the default theme currently used, dark theme, and varying levels/types of acrylic or other materials in Fluent Design Language this would be good idea as not everything appeals to everyone so if there's choice something will appeal to the users, in the 'Themes' setting instead of having a dropdown menu, have a grid with a small screenshot of what it looks like and it's name, kind of like how Microsoft Store displays products or like how Opera shows it's themes, but making it squared with the acrylic effects used in MS Store, so it's as if MS Store is displaying it.
- The corners of the tabs and browser buttons have been rounded too much.
- I don't think the tabs have been rounded too much, as it is square enough to differentiate it from Chrome, but squarer tabs with a smaller radius curve would not look bad if rounded at a good size, I would suggest making concepts with different levels of rounding (0px-fully rounded), and displaying on a discussion as a vote which is best.
- I think the Browser Buttons are also not too round, except for the InPrivate Button, which sticks out from the rest of the UI, making it squarer and making it blue like IE/Edge Legacy would be good as well (or being able to choose color using color picker/set number of colours)
- Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
- Personally, it is good as it is, however for those that find it bad I would suggest the following options to put in Settings or Flags (this would make Edge more customizable):
- I would say to make the shrink optional (as in a setting or flag).
- I would also say a possibility of using auto hiding browser UI elements on touch and non touch devices but again optionally.
- Also an option to auto shrink the Toolbar elements if mouse cursor is not near/on touch devices making it shrink until drag down like hide is used in mobile chrome - I've only seen mobile chrome as no one I know uses mobile edge and I can't get it - would be good idea (scroll down on non-touch might be good) (however both the versions should be optional) and as GrahamJockey said, a proximity sensor on the Surface line of products to make it auto shrink unless hand is near.
- I also would recommend a size slider for all of the taskbar/toolbar UI elements (buttons, extensions, spacing), whilst enabling address bar resizing without extension icons sent to menu reappearing on tool bar.
- Update or add animations to user interface.
- This would be good if done well, although an option to enable/disable it would be good
- Add a reveal effect to highlight on mouse hover.
- This would be great at making the UX more interesting alongside good animations
This last paragraph is sort of a summary of what needs to be added/changed to make it more customizable
I would like to add that, like Extensions can be added to the Extensions page, making Themes in 'Themes' page downloadable from MS Store/other webstores but have built in themes that include the current Light and Dark themes, alongside varying types/levels of Material from Fluent, this if shown in a Grid like MS Store shows it's products, except instead of details it has only name and image of what it looks like, alongside having a slider for size of all Taskbar/Toolbar elements, and an option to select what colour the InPrivate browsing button is, would make Edge one of the most customizable browsers.