User Interface

For Transloader’s upcoming version 3.0, I needed an NSMenuItem that not only showed a title, but also a subtitle, along with an optional image.

Because it took a bit of work and “reverse-engineering” (the click-on-an-item-selection-animation’s timing, in particular), I figured someone else might benefit from this.

Where to get it / Sample Project

It’s all pretty straight forward, and best shown / explained as an Xcode project, which you can download on Github.
This is basically all you need to do:

Screenshot the sample project's source code

That’s it!

Caveats

There are some things this implementation can not do, which the default NSMenuItem can:

  • There is no type select
  • The arrow keys can’t be used to go through the items
  • You can’t activate items with the space or enter keys

Basically, keyboard interaction is unavailable.

I do hope it’s useful to you anyways.
If you’re using this, I’d love to hear from you! 😊

Read more

Since I’ve had to go re-watch WWDC20’s “Adopt the New Look of macOS” session (at around the 07:03 mark), I thought I’d note it down here – for anyone else late to the update-for-macOS-Big-Sur-game 😉

What we want to achieve is go from this UI (basically standard on any macOS before Big Sur):

Screenshot of Yoink's preferences on macOS Catalina and earlier

to this UI (new UI for Preferences windows on macOS Big Sur):

Screenshot of Yoink's Preferences on macOS Big Sur

And it’s fairly easy to do so. All you need to call is (pardon the Objective-C, Yoink for Mac (and iPad and iPhone, for that matter), is still 100% Swift-free..)

self.window.toolbarStyle = NSWindowToolbarStylePreference;

and update your toolbar items’ icons, and you’re all set.

Screenshot of Xcode 24 09 2020 08 48 22

 

 

– Matthias
mail | website | twitter | instagram | facebook

Read more

About Oskar

Oskar is an independent Mac developer who is committed to enhancing the Mac experience.
Since founding Cindori, he has designed, developed and released several popular apps such as Trim Enabler, Disk Sensei and VR Desktop.

About Disk Sensei

Disk Sensei helps you monitor and analyze your Mac’s drives, enhance your Mac’s performance and clean your system safely and efficiently.

Info

What Oskar particularly likes in Disk Sensei:

Liked by Oskar

“Disk Sensei is all about optimizing your Mac performance, so I knew I wanted a way to let users find and delete large old files.
After settling on the idea to build a sunburst chart to visualize the file system hierarchy, I struggled for a long time to build something that was responsive, performant and beautiful.
Eventually, I turned to an unconventional solution: I built a component using D3, a JavaScript visualization library, and integrated it in Disk Sensei using a web view.
The end result was a beautiful sunburst chart with slick animations, at the cost of only a few hundred lines of Obj-C.”

and particularly dislikes:

Disliked by Oskar 1

Disliked by Oskar 2

“Disk Sensei offers features that are related to both hardware and software. In some cases, this means that the user must select the storage drive for which he wants to display data or perform actions on.
For example, the Health feature, which displays diagnostic data and predicts the remaining lifetime of your hard drive or SSD.

To avoid having to select a storage drive over and over when switching between features in the app, I opted for a global option and put a drive selection button right in the menu bar of the application window.
This made it very easy to toggle between drives from any view in the app. But it also created several problems:
It broke the conventions of the menu by having the button look like it’s supposed to behave like a menu option.
It created even further confusion by being accessible while using features that wasn’t related to the currently selected drive. As if that wasn’t enough, the button was just too small to fit the full drive name, creating cryptic titles such as “APPLE”.
All in all, this was a poor solution.”

Thank you, Oskar, for sharing 🙂

About the “Show and Tell” Blog Series

Show and Tell presents developers’ and designers’ most and least favorite elements of UI/UX in an app they helped create or design.
If you’d like to share, submissions are open! Submit your app here!
Thank you 🙂

Read more

About Michael

Michael is a student at Aalborg University, Denmark, studying Engineering Psychology — it’s about how to shape (technology mostly) products to fit humans. Although they don’t do a lot of visual design, he’s taken a personal interest in that on his own, hoping to land a job as a designer / user experience researcher at a medium sized company after he graduates this summer.

Info

About Amusic

Michael made the app with some of his fellow students, designing most of it on his own. Sadly, the app was actually never submitted to the App Store due to lack of time to finish it.

What he particularly likes about it…

“The two screens are actually the same — the player view. But unlike in the Apple Music app where the queue is an afterthought that is hidden beneath the cover art, in this design, you can choose whether to be utilitarian and use the queue view or have it look pretty. Easily change between the two. The player is beautiful either way. When you change, the song animates to its new position and stays there until you decide to change it again. Choose your style and forget about it if you like.

Better yet, the waveform slider is both pretty and SUPER useful as it lets you easily fast forward to your favourite part of the song.”

…and dislikes

For You

“I’m not very happy with the artwork on the “for you” screen. Also it should pack more content pr. screen estate.”

Thank you, Michael, for sharing 🙂

About the “Show and Tell” Blog Series

Show and Tell presents developers’ and designers’ most and least favorite elements of UI/UX in an app they helped create or design. If you’d like to share, submissions are open! Submit your app here! Thank you 🙂

Read more