Conversation
|
I like this update in many ways, probably because I share @zorgiepoo 's desire to minimize wide expanses of blank space, and because the updated design looks "fresh" but also "familiar." One key change I'd recommend is to limit the content from the release notes to the "safe area" (to borrow a term from Apple) of the window. I like the edge-to-edge layout of the release notes area but I think a borderless web view that imposes a margin against the window would look nicer and be more scannable:
There were some questions in the conversation on #2731 about how closely this design matches the Tahoe alert style, and whether it will appear "native" or not. As I said there, to my eye this already looks pretty native to me, but I also haven't seen too many examples of panels with comparable complexity that have been updated by Apple for Tahoe. The Print panel leaps to mind as something to possibly take inspiration from, though its UI is unhelpfully more akin to Settings with its vertically scrollable options. Another loosely comparable UI is that of the "Connect to Server" panel in the Finder:
If anybody discovers macOS Tahoe based panels with some interactive complexity, it would be interesting to make more comparisons. As to the question of preserving backward compatibility, I wonder if it might be both preferable from a UX point of view, and easier technically, to split the panel UI into two discretely loadable choices, and only load the "modern" UI either by request from the developer, or by default based on the OS and/or AppKit link version. Adopting the AppKit link version approach would mirror the way that Apple's own UI defaults only apply to apps that have been built against the macOS 26 SDK, on the assumption that developers would have had the opportunity to update the rest of their app's UI to match. |
|
We can play around with adding margins. I think we'll need some sort of box or custom view, but we need to move away from the legacy box view style Sparkle uses today and be more aesthetically pleasing. Currently the PR is using custom 1-point divider views on top/bottom. Do you know if we can get a box view like in noah's mockups? (May have time to look later today / tomorrow, not experimenting at the moment). I'd prefer not having an option to go to an old mode because I don't want to maintain it and there's little point if it's mostly inferior. Currently there are no new APIs being used but I still need to check the UI on a more older OS. Many/some of these changes could have been done back in 10.10 or 11.0 days. We can see how this plays out. |
|
That makes sense about keeping it simple and avoiding an "old mode". I'll probably not find the proposed design too jarring once I see it in context on an older OS. I'm not sure I understand why we would need a box or custom view, unless you want to add a border to the release notes? I was thinking just to have the content indented, which could be achieved with a simple custom view or else a custom box if there is something about boxes we desire, more than the functionality of a border. |
I really like the updated design, Zorg! Would like to second Daniel's suggestion, those same margin insets occurred to me as well. |
|
I just removed the window title and release notes label, made the button sizes regular < Tahoe. The custom vertical spacing between "groups" is 12 currently (maybe will bump to 15?). Horizontal is standard (likely 20). It seems like at this point this will be very close to what it'll be. |
|
This looks really nice! The only big thing I'd still like to see change is window width: the current size is too wide, I think, for best legibility. Narrower line length would make reading release notes more pleasant. |
This accounts for the horizontal space removed.
|
To be honest I think it's already narrow enough, and I think I'm happy with the initial sizes after trying several languages. I'm more concerned about the window size and not making it too narrow, rather than the release notes view. The minimum and default sizes seems to be influenced by the intrinsic size of the header fields and may differ based on language. What width the release notes view is at isn't a compatibility issue (unless it's too small?) and can be dynamic based on message, language, and past user resizing. |
|
That's fair! And I'm realizing now, I can always just use some CSS to enforce a certain legible width, if necessary. |
|
I'm merging this. Thanks for everyone's help here. If you see any minor issues / touch-ups feel free to make a follow up issue/change. I updated the first post here with updated screenshots. |
This reverts commit 97bea2f.
This reverts commit 9c5c469.
|
Hey Zorg, thanks for the update and thank the both of you for all your work! I sat down today and went over all the pixel values to see if I could make anything look slightly better. I ended up with this: I'm not sure it's actually better, and the differences are very subtle. But it's the best I could come up with after going over everything. The visual balance and margins were already very good I think. Here's the original for comparison: Explanation of the changes and of the 'theoretical considerations' that went into them: Click here to reveal(These notes should be detailed enough to allow for pixel-perfect recreation of the mockup, while explaining the thinking behind everything. But I'll also attach the Sketch file below, and can also try to implement things myself if you give me the go-ahead.)
Note:
I also tried some more variations:1.Click here to revealHere's a variation with 25 px margins on all sides of the icon (except the right side). This matches native NSAlerts: I think this way the title looks a bit less 'neat' and 'clean', but more more 'bold' and exciting .... Maybe I've been staring at this for too long lol.
2.Click here to revealThis variation has a line under the traffic lights, possibly making it easier to tell where the window can be dragged from. I think this also makes it easier for the eye to pick up some of the symmetries, which makes it feel very 'neat' and 'friendly' and 'cleaned up' and 'geometric' to me. But maybe also slightly 'boring' or even a little old-fashioned. One thing that came to mind is that IIRC, out of my previous mockups, number 6. seemed to get the most positive reception from the others – and that one also had a line under the traffic lights. (Not sure if that's why people preferred it but it just came to mind.)
3.Click here to revealThis is a combination of 1. and 2. It has a line under the traffic lights along with with 25px margins around the icon. This makes things feel a bit more 'airy' and dynamic than 2. while making the title stand out a bit more. I think it strikes a nice balance between making the title feel punchy but still feeling neat and cleaned up, and not having too much whitespace. I think I'm liking this one the best right now.
4.Click here to revealHere's a weirder one with:
Discussion:
Update: (Thought of another reason to put a "line under the traffic lights" as in 2. and 3.) I thought that under Sequoia, having the traffic lights as well as the top content all sit on the darker-gray window background felt a bit unusual. I think in other windows you see across macOS, when there is no line below the traffic lights, it's usually because there's a combined background for the titlebar and toolbar where the traffic lights sit along with the window title and toolbar items. But I don't think I've seen the traffic lights just sit on top of the window background directly like this? Now on Tahoe, I think this looks fine and not weird, perhaps because all the backgrounds are white. But on Sequoia, it does look a little strange to me to have the traffic lights sit on the darker-gray window background directly, when you'd expect to see them sitting on a lighter toolbar/titlebar background. It's subtle, but something to consider perhaps.
The only small maybe-problem I noticed which is that when you build the 2.x branch, it seems to use the older, rounded Sparkle logo and it ends up in squircle jail:
I think Zorg mentioned that users never see the logo anyways so it might not matter, but I thought Zorg's new logo looked neat, and it was squircle shaped indeed. Finally, here's the Sketch file: It's the same one that I posted previously just with some updates. Again, thanks for your work and collaboration! I hope and believe that our efforts will make a positive impact on the Mac that will reverberate through the community and and make the platform just a little bit more awesome. |
|
Should I open a new issue for this? |
|
By the way, is there a way to sponsor the Sparkle project? So many apps benefit from Sparkle being great, so I think quite a few people would love to contribute something back. |
That's a very interesting point!
I think you're right, but it might cause slight usability issues. The first line of the current placeholder text: Has 75 characters. The optimal characters-per-line for the best readability are 50-75 characters according to this website: https://baymard.com/blog/line-length-readability So it may actually be a good idea to allow the update window to be a bit narrower. (I think my app also uses a smaller font than the placeholder, which would excacerbates this.) But I think with the current design, you'd have to shorten the subtitle text or make it wrap, to allow for this, I think? I totally get if this is out-of-scope now – but perhaps it will be interesting to keep in mind for the future. |
That's a smart idea! That should solve the legibility problem. Perhaps it would look a little weird if the text doesn't fill the full width of the update-notes-box? Haven't played around with that. |
|
Yeah if you want you can create a PR with the very subtle changes and we can review them (no guarantees but I'll review them). I do not have time to review these at this specific moment :). I was running into CI failures all of a sudden with the AssetCatalog tool using the AppIcon #2757 so I had to, at least temporarily, remove it from the test app. (Funny that it was passing here, then started to fail all of a sudden on subsequent builds..)
I think following the project, pull requests (I don't have much code review in general), and contributing to discussions or changes is most helpful. I think Sparkle has always just been a spare time hobby project; at least for me that won't change in foreseeable future. |
|
Alright Zorg, I opened a pull request! (#2759) I tried to make all the information easily available so it's easy to understand everything and make decisions. Of course I understand if it it'll take a while to review or if it doesn't align with your goals right now.
Hmm that sounds mysterious. Maybe something weird with the Xcode Beta toolchain or something like that?
That makes sense. I think for some companies it might be easier to give money than to have their engineers submit pull requests directly? But I'm just speculating at this point.
Oh ok. I think I saw that there was a request for review on this pull request, but since I'm not a maintainer I didn't think I had the 'rights' to do that or something.
Gotcha, thanks very much for your work on the project! :) |
It's not about PRs or money so much as it is about having people involved in the project so it doesn't rely on a single person :). For further discussion about the UI or 2.8 I created a discussion here #2761 . This thread is a long one, and the PR is resolved, so I think I'll lock the discussion before I think it might go out of hand. |



















This modernizes the update alert which shows release notes and provides options to install an update. This does not make any major change in functionality / behavior.
On Tahoe betas, screenshots of old and new are as follows on my Intel Mac:
Sequoia
--
(Old initial prototype)
This also updates the Sparkle Test App icon (originally by @1024jp) to be more squircle fitting and use Icon Composer. I also updated the old Sketch file. The icon was under MIT license, I may have to still update that somewhere. The icon on the website will eventually need to be updated as well. (Note the icon is no longer used in Sparkle.framework and I'm not a great icon designer).
I also made minor changes to the check for updates alert. The update alert now uses a NSStackView so it should be easier to customize. I also updated the release notes in the Sparkle Test App to use more interesting release notes text rather than the "Lorem ..." template text which did not give me a feel of how the alert will function in practice.
Fixes #2731 and more discussion of mockups is there.
If you want to suggest changes, feel free to make a branch off this one, make changes, and/or post screenshots.
A hard requirement is still using Obj-C/AppKit and maintaining compatibility back to 10.13/10.14 (but I don't mind having specific changes for newer OS's).
Changes in localized text would require discussion to ensure it's really worth the cost of changing.
So far, these changes are not really Tahoe or liquid glass specific. I'm not sure if liquid glass related changes need/can be made here.
Misc Checklist
Testing
I tested and verified my change by using one or multiple of these methods:
Tested updating app.
macOS version tested:
26.0 Beta (25A5295e)
macOS 15.5
10.14 VM