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
Square the Tabs like the current Edge.
Implement Transparency
Add ability to move the Profile button to the hamburger menu.
Remove the several pixel gap between Tabs and the top / side of a window. (Gap highlighted below. It is a waste of valuable space!)
nasonexguy and sgilder, I disagree about the removing the padding space above and to the left of the tabs. You need that space to drag the window when it's not maximized (when it is, that space is removed already). This is appropriate the way it is and it should not change. The only other part of the window you can grab to drag the window is the space between the + to add tabs and the minimize button, but you can't use that if you want to drag that part of the window off the right edge of the monitor (which I do frequently).
The only other way I know of to move the window is to pop-up the universal window control (by pressing Alt-Space) and select "Move," then use the arrow keys to start the window moving (then the mouse will work), which I suspect very, very few users even know exists as an option. If you grab a tab, it separates the tab from the window and creates a new window. That's not viable.
Padding is necessary with the current UI and must remain.
I believe the space between the new tab button and the windows controls was left there specifically for moving the window.
I'm not sure what you were referring to when mentioned not being able to use that part to drag the window off the right edge of the monitor, is that in reference to touch controls or just in general? I ask because I can move the window, using the space between the tab and window controls, to another monitor or for split window view without any issues.
Honestly my biggest issues are the UI size (based on a 24", 1080p monitor at work) and the fact that fullscreen Edge on Mac still has the gap between the top of the tab and the window, unlike Edge on Windows. I'm not too picky on the spacing when the window isn't maximized or in fullscreen mode but if the window is maximized or in fullscreen mode, Edge shouldn't really have gaps between the screen edge and the tabs in my opinion.
sgilder, I agree with you that those do seem like wasted pixels on a Mac, unless that's for consistency with something else (I don't run Edge on a Mac). On Windows, those pixels do disappear when maximized, which is fine, because they serve no purpose when maximized.
To your point that you can drag the window with the space between the Add Tab + button and the Minimize button for the window, yes, that works... until your drag point reaches the right-end edge of your right-hand monitor. Common issue: you want to view part of the browser window while working in another window. You drag the window off the screen to the right, hiding the ads or other noise you don't need on the right side of the window. If the "handle" you're using to drag the window is on the right side of the window you want to drag, you can't drag off the screen. The window stops moving to the right as soon as your drag handle reaches the edge of the monitor. This is true for both mouse and touch users. The ONLY way I know of to overcome this on Windows is with the keyboard window Move controls. You could also effectively expand the drag handle by peeling off a single tab, giving you a much wider space you can use to drag, so you can move it further (but still not all the way to the edge of the monitor), but both of these are poor solutions that are much more easily solved via the pixels above the tabs functioning as a drag handle.
When the drag handle spans the entire width of the window by preserving those pixels above the tabs, then there is a single consistent and obvious handle to drag the window wherever desired.
Gotcha, I guess I've never really run into that just because I don't really hide part of my window off-screen. I see what you're saying though.
Having some tab space in non fullscreen window of edge would make more sense then.
