General UI improvements #20086
Replies: 17 comments 23 replies
-
|
I'm going to move this into a discussion, as that seems like a better place to organize thoughts on this. |
Beta Was this translation helpful? Give feedback.
-
|
Here's what the top bar looks like for me (with gutters off, UI and Buffer font sizes set to 20):
In my humble opinion, the top bar looks great. It isn't very large compared to the rest of the UI, and its clean look helps me maintain focus on my project. Even with the window filling half a laptop screen, I don't ever feel like my work is being crowded out by the top bar. I do think that those status bar buttons are getting crowded, especially with the new REPL feature (which works great, btw!). While I understand why there are tab bar buttons separated from the status bar buttons, in practice they turn into a pile of icons along with the minimize/maximize/close window buttons and GitHub login dropdown. In my ideal world, here's what would happen:
This would leave selection controls and search at the top, as well as the REPL if it's enabled. I think this would be a lot cleaner and fit better beneath the tab bar buttons. I could see the REPL menu getting moved either to the gutter with inline assist, or maybe even down to the bottom next to the terminal button. However, I kinda like it where it is right now (though its spacing on the right could be improved) I haven't used the collaboration features much so I won't comment much on that. In general, it seems a bit awkward to put social channels inside editor windows, though ya'll have done a pretty neat job of it so far. Hope this helps, and thanks for your work on Zed. I've really been enjoying using it. |
Beta Was this translation helpful? Give feedback.
-
|
i've pointed out many problems with the zed ui numerous times in numerous places throughout the project, be it in issues, discussions, on the discord channel, etc... but it seems to go unheard so i gave up. i just came across this, and decided to give it a last chance hoping for anyone in the zed team to listen for once. zed is a bit secretive, we don't really know if someone in the team is prototyping and working on making the zed ui better as we speak, but in its current state i have to bring myself to say it, it's god damn awful. zeds ui is retro, it's ancient, it's not thought through. a lot of wasted space like the top bar, huge paddings, a lot of inconsistencies in buttons and font sizes, the list just continues... worst of them all imo is the layouts and widgets, i have no idea why the zed team thought creating a ui framework that looks as non-native as possible in the modern day where native is adored was a good idea. Edit: Here is a more detailed message i sent on the discord channel
|
Beta Was this translation helpful? Give feedback.
-
This is an odd claim. Zed is one of the fastest-moving development projects I've ever encountered. They release updates nearly every day, and you are free to browse their commit history in this repository. For example, the commit history for the gpui crate can be found here. I don't know why you feel entitled to know what Zed developers are working on next: they are releasing free software, on their own schedule, with their own money. You will always be able to contribute code yourself (assuming the Zed team likes your vision, and you agree to their CLA), or fork the project and make out of it what you want.
Yes, Zed is clearly not prioritizing a native MacOS feel. It's fair to want it to fit in better among your other MacOS apps but I feel it's disingenuous to describe Zed as "the opposite [of] elegant, modern." I can't help but think you're being intentionally inflammatory. The Zed devs have clearly put a lot of careful effort into the look and feel of this app (and their website) in a relatively short time.
It honestly just sounds like you'd prefer to use a different editor. I agree with some of your points, but it's hard to take you seriously. It is not my responsibility to enforce it, but I recommend you take a minute to review Zed's code of conduct. |
Beta Was this translation helpful? Give feedback.
-
That's true and i'm aware, it's an open source project after all. However, i don't see how that makes it less important for communication with the open source community that tries to contribute to zed, see #20068
And my point is precisely that that's a mistake.
The website is fine, i don't think there have been a lot of "careful effort into the look and feel of this app" given how many inconsistent parts there are throughout the app and how much screen estate is being wasted. |
Beta Was this translation helpful? Give feedback.
-
A MacOS design will feel less native on Linux |
Beta Was this translation helpful? Give feedback.
-
|
To be fair, it doesn't feel "native" on linux either. It feels like its own thing, and that's good imo. |
Beta Was this translation helpful? Give feedback.
-
|
I would say that how well Zed fits in on MacOS (or any particular OS) is a sub-point to a larger set of suggestions/critiques/criticisms of Zed's UI aimed at improving its usability, efficiency, consistency, as well as overall look and feel ("native UI" was indeed only point 5 of @nervenes reply). It's a valid one, but not necessarily the main one. I would love to see more UI prototypes from those with suggestions (kind of like those that appeared in #8499). Maybe a really compelling mockup would do the trick. And, it can't hurt to be said: the point is not to only pile on complaints and criticisms. There's a lot that's compelling in Zed or we wouldn't be here. The point is that when you sit down to use it for your work, you notice some things that are awkward or a little clunky that might eventually mean the difference between using Zed or forgetting about it and sticking to our existing tools (and we're rooting for them!) |
Beta Was this translation helpful? Give feedback.
-
|
The point about it not having a particular OS's look and feel is moot. If it did then there would be no consistency with Zed on other platforms. Many users use multiple platforms and they don't want a different experience with different limitations/constraints on each just to get work done. You either have it inconsistent with other apps, or you have it inconsistent with itself. Pick one. I'd much rather the former, and it's less work too. My own view is that Zed looks pretty good now, but I agree that the amount of chrome vertical height should be reduced, or bars combined somehow to achieve it. Ultimately having something as configurable as possible (where buttons can be moved etc) is the best bet to make everybody happy. I mostly agree with the OP but I think we need some mockups so we can visualise things. |
Beta Was this translation helpful? Give feedback.
-
This is how it looks here, I actually think the distribution is great and if there's anything missing it's just tiny icon spacing adjustments. The heights feel very good, there's nothing to shrink here in my opinion. |
Beta Was this translation helpful? Give feedback.
-
Yes I use a more minimal version, I also have a 14" Macbook and it's fine, my point is about the height of the elements like the titlebar seems actually bigger on your screenshot but maybe it's just a feeling from my part. But the meaning is some people prefer more relaxed spacing between elements giving them space to breath. I understand it can be too big in your case but you can also close tabs and access files in different ways or maybe could even be the selected typography, i feel mine has a smaller gap, have you tried to tweak with your ui_font_size ? It looks bigger than the buffer font size. |
Beta Was this translation helpful? Give feedback.
-
|
My ui font size is set to 15 and my buffer font size is set to 12, and that's to get roughly the same font size: With them both set to 12, the ui font size is incredibly small: Again, these are one of the inconsistencies issue i mentioned in my bullet list. |
Beta Was this translation helpful? Give feedback.
-
Small, but so beautiful :) I think there will be many opinions here, for me when I'm coding I even remove the navigation dock and just use the cmd p to access files, but the ui font makes a huge difference on those titles vertical spacing, maybe they could have ui fonts sizes for titles and ui font sizes for the remaining of the ui. I've always loved the look of Atom and I think Zed is actually better, with that small exception of the icon placements :) |
Beta Was this translation helpful? Give feedback.
-
|
Small, but barely readable. It's too small on my 13" :/ That 12 font size isn't actually 12, that has to be 8-9. I hope you can see that from the average user perspective, this isn't any good. |
Beta Was this translation helpful? Give feedback.
-
Like I've mentioned before, I think this will be very subjective in the sense that some people prefer to see the code bigger and the interface smaller or vice versa, I never used VIM but compared with other editors that I've used, Sublime, PHPStorm and VSCode which i still use occasionally Zed has the most beautiful polished interface :) I don't mind some of the things moving to the titlebar, as long as it's not overloaded... or that we can't disable, it would be fine by me. Enjoy the weekend :) |
Beta Was this translation helpful? Give feedback.
-
The linux and windows app already have different layouts compared to the macOS version, to some extent. See the left side bar and the title bar. So I don't see how that's an argument, given there are already os dependent ui implementations. |
Beta Was this translation helpful? Give feedback.
-
|
But I do agree with the set of those two rows of icons, that's why I've disabled the breadcrumbs and quick_actions. |
Beta Was this translation helpful? Give feedback.
-
|
Whatever you do, just don't add anything like that stupid left-hand-side vertical button bar thing in VSCode. |
Beta Was this translation helpful? Give feedback.
-
|
As for the side bars, status bar and title bar layouts, this is how zed is currently constructed: But ideally, this is how it should be: that is, for macOS applications. Linux and windows seems fine as it is. |
Beta Was this translation helpful? Give feedback.
-
|
I agree and after seeing this, it's absolutely how most macOS apps behave. Not sure why people are downvoting. Nice catch. |
Beta Was this translation helpful? Give feedback.
-
|
Zed is not specifically designed for macOS, meaning Zed does not need to comply with macOS development standards. However, even without adhering to such guidelines, I still think Zed's interface design is excellent. |
Beta Was this translation helpful? Give feedback.
-
|
They develop an application for macOS though, that on itself implies some standards to follows, of which is how macOS apps should behave and to an extent look like. You wouldn't really create a Windows XP like app today and expect the average users to pay for that on Windows 11, the only software that gets away with that are niche software that actually started in Windows XP and have became an industry standard somewhere. |
Beta Was this translation helpful? Give feedback.
-
|
Don't agree, the title bar should not change according to the left or right docks windows, ever!!! |
Beta Was this translation helpful? Give feedback.
-
|
well, just to make it clear, the freeform sketch wasn't a personal opinion, that's how the native apple frameworks implement the layout by default, that's the layout most macos ui frameworks try to follow, that's the layout most modern apps try to conform to, that's the layout apple is endorsing in their HIG. if you don't like it then maybe you might want to look for another operating system. the current zed layout should be second class on macos as a "custom" layout, while the proper style should be the default. stale title bars are not home on modern macos, keep that to windows and linux. |
Beta Was this translation helpful? Give feedback.
-
|
I would like to be able to disable it in settings, takes up far to much space. |
Beta Was this translation helpful? Give feedback.
-
|
IMO the biggest thing needs reworked is the breadcrumbs bar (or whatever it is you call the bar directly underneath the tabs). It uses up way more precious vertical space than it should. I also don' think that search/inline-assist/selection/controls toolbar buttons should be on the breadcrumbs bar, they should be moved somewhere else. IMO VSCode already has the height of the breadcrumbs bar nailed. |
Beta Was this translation helpful? Give feedback.
-
|
Zed UI does look and feel kind of clunky compared to other more established modern editors like Sublime and VS Code (pictured below). I have a few ideas that might help:
|
Beta Was this translation helpful? Give feedback.
-
|
It would be such a standout feature to move tabs into the title bar like browsers have been doing for ages. This seems like a no brainer, otherwise we have a whole row of precious vertical space just wasted. |
Beta Was this translation helpful? Give feedback.
-
|
This! 👆 
|
Beta Was this translation helpful? Give feedback.
-
|
I wouldn’t oppose, as it would go great with the macos layout i showed in above posts. |
Beta Was this translation helpful? Give feedback.
-
|
The placement of tabs within CSD may be a more efficient use of space, but it harms usability IMO. I would probably switch to a different editor over that alone. |
Beta Was this translation helpful? Give feedback.
-
|
It could be a setting. |
Beta Was this translation helpful? Give feedback.
-
|
How can we visualize horizontal and vertical splits in this case? This will work only if they are not present. |
Beta Was this translation helpful? Give feedback.
-
|
Yep, and it's even a setting in Safari (made by Apple, who notoriously does not have a lot of settings) |
Beta Was this translation helpful? Give feedback.
-
|
A run / play button that is actually a task trigger would be nice. When it is clicked on it reruns the last task picked and when it is shift-clicked it shows the task modal / picker menu. The menu could also be filled with all the common tasks like running files or selections within a file, this would also fast track newcomers instead of having them getting bogged down with task configuration right out of the gate. |
Beta Was this translation helpful? Give feedback.
-
Check for existing issues
Describe the feature
It might be good to open some discussion about general UI improvements to better utilize screen real-estate and functionality, building on #19537.
What could one do about this? Some possibilites for thought:
A) Some functionality could be shifted from the status bar to the title bar. The quick action buttons certainly could make sense there. Some buttons in the tab bar also could make sense, such as splitting and full-screening, since those features are not specific to the active tab.
B) The status bar itself seems like it could go into the title bar.
C) The title bar can gain additional, project-related functionality, where each project gets its own tab in the title bar. Currently, only one project can be open in a given window of Zed, but it's not too crazy to think you might jump between multiple projects.
grouped with project-specific features (project layout, outline, and project diagnosis) in the left-side panel. The chat panel, whose functionality is linked to the collaboration panel, however, is on the right-side panel. Thematically, this grouping doesn't make much sense, and the left/right panel placement of two things that are very closely connected feels awkward.
Probably a more UI/UX-centric person can be more helpful, but to me it feels like collaboration features (both the channel list and chat) belong in the right side panel.
If applicable, add mockups / screenshots to help present your vision of the feature
No response
Beta Was this translation helpful? Give feedback.
All reactions