Mac Apps With Beautiful Interfaces

http://designshack.co.uk/articles/software/10-fresh-mac-apps-with-beautiful-interfaces-and-what-we-can-learn-from-them

by phalien • 16 years ago

80 42 16 years ago

designshack.co.uk

rbritton• 16 years ago

1. wunderlist. How is this beautiful? They crammed a wood-styled UI into OS X's standard window chrome. The toggle switches at the bottom are not the OS-provided ones and look like they're intended to match the iPhone app more than the OS they're running on. Things is a far better example here.

2. Reeder. See http://danielkennett.org/blog/2010/12/analysing-a-touch-to-d...

3. Sparrow. These are not OS X toolbar icons -- they're UIKit icons! They look as out-of-place on OS X as OS X ones would on an iOS device.

5. DaisyDisk. The UI here is very unique and usable. The mouse-over support on the file graph is actually very, very useful for determining where storage space is being used.

6. Transmit 4. I personally found Transmit 3's favorites interface and syncing interface to be more usable. The animations they've added slow down use and some buttons (e.g., disconnect) are far harder to reach than in T3.

7. Courier. While the interface is novel and interesting at first glance, I have to question how useful it is for repetitive tasks. I have not used the app, so I can't comment there, but more often than not fancy graphics get in the way of speed.

8. 1Password. This one I love. It's useful and very usable. I've used multiple versions of this program and the UI changes they've made with the current one far outshine the previous versions both in terms of appearance and usability.

My only gripe still would be with the browser plugin. I've tried setting up other less computer-savvy people to use it, and the menu does not make it immediately obvious to them which item to select to log in -- the top several options are too crammed together visually.

phalien• 16 years ago

I agree with #6. Also I was so used with having the Cmd+J keyboard shortcut for "Edit with ..".

ugh4• 16 years ago

2. I don't get how that invalidates Reeder in any way? Seems like a minor niggle ("buttons should be larger").

tvon• 16 years ago

Yeah, I can't really get with that analysis since I've dropped both NetNewsWire and the Google Reader web interface in favor of Reeder. It's short a few keyboard shortcuts but otherwise it's a lovely app to use.

sjs• 16 years ago

And in a better spot. I'm not that thrilled about Reeder for Mac even though I love it on my iPhone and iPad, and a lot of it is due to the awkward position of the share button and such. The UI is really good looking but not usable enough.

babeKnuth2• 16 years ago

wunderlist allows you to change the background (i dislike the woody theme myself).

plus, wunderlist is open source:

https://github.com/6wunderkinder/wunderlist

lmz• 16 years ago

4. It's not that unique, is it? I used KDE's FileLight[1][2] some years ago and it had that same visualization.

[1] http://www.methylblue.com/filelight/

[2] http://kde-apps.org/content/show.php?content=9887

burgerbrain• 16 years ago

Exactly, and FileLight was hardly the first to have it either. This sort of disk usage visualization is quite old.

Derbasti2• 16 years ago

Only of course, Daisy Disk actually animates beautifully. Have you ever seen it in action? Its animations really bring it to life.

huhtenberg• 16 years ago

> http://danielkennett.org/blog/2010/12/analysing-a-touch-to-d...

Jeez, where did you find this junk? Ridiculously lopsided and it reads like the Reeder's designer peed in author's morning coffee at some point.

> The user is moving towards those (quite small) buttons from a fair distance away, and are therefore likely to overshoot.

Likely to overshoot? Really? I take if buttons were larger, the user would just hit them with one flick of the wrist, no correction, not slowing down half way through, no undershooting or overshooting. Just one motion with a beautifully smooth acceleration curve every user is so striving for.

The app is optimized for better reading experience, and the blog guy makes no attempt to account for what the app's primary and routine usage is. It is - suprise - reading. Not clicking the buttons. Reading. Make buttons larger - and you just introduced extraneous visual noise and took away from the screen real estate in the app that (won't hurt repeating) is for reading.

> Someone came out with a Mac OS application that’s clearly a touch UI crowbarred into a point-and-click universe

Someone came out with a pretentious blog post crowbarred into a formal UX analysis format.

> This is NOT how to make Mac apps, guys.

And this is now not to... ah, nevermind.

riobard2• 16 years ago

Interesting. I've discussed that silly article last week in a mailing list. Here's the body of my post there:

I disagree. I've been using Reeder like crazy since the first beta is publicly released, and up till now my experience is: it is the best OS X app I've ever used. The UI is not flawless on a screen without touching, but it's the most efficient and elegant interface I've ever seen on a desktop app.

Complaining those little buttons are hard to reach is kinda pointless for two reasons:

1) It's secondary usage. One spends most of time in a feed reader scanning through headlines, or reading the actual content. How many times do you actually star an article? I don't believe I have a higher standards for articles, but I probably star 2~4 articles a day. Why do you want to clutter an elegant interface for such low value functionality? As for the management feature, sure you'll manage the feeds in Google Reader. Reeder is supposed to be just a, em, reader.

2) Those actions all have really really simple and easy to remember shortcuts. If you are a power user of feeds and you do a lot of unreading, starring, etc, the right way to do is to press the shortcut keys. M for marking un/read, S for starring. How hard is that?

What has Reeder got right as a feed reader, compared to, say, NetNewsWire or Google Reader? Layout and typography.

The 3-column layout is so much more efficient than the two-panel with right-panel split into headlines and body (a.k.a. Mail.app style). The left column to select categories and feed. This is the same in Reeder, NNW and GR. But the killer is the middle column.

In the headline views in both NNW and GR you get a single line to show the title and the first few words of a feed. This line is spanning too long horizontally, which makes it hard to scan through long lists of feeds due to the inability to quickly reposition visual focus back to the beginning of the next line. There is a reason why we have an “optimal line-width”.

In Reeder the middle column positions titles and the first few words vertically, which makes the line-width shorter (it has to make room for the right column anyway) and far easier to scan through. I believe this style is actually pioneered by Microsoft in Outlook. Look at any well-designed newspaper and you'll see the same design: narrow columns for quick scanning.

Plus, in NNW's Mail.app-style right column, the vertical screen asset for the actual feed content is significantly wasted when you want to read a long feed: by default more than half the vertical pixels are devoted to the headline view (although you can adjust this but then it conflicts with the headline view when scanning titles). Sure you can click and open a feed, but that extra one click kills efficiency. And because the content view is much wider, we get the same line-width issue before. Reeder's Outlook-style right column, being both taller and narrower, makes it much easier for reading feeds.

And don't even get me started on typography! In the official GR, the typography is basically a completely failure (as in nearly all Google products anyway). They don't even bother to provide a larger line-height! Reading in GR is just a painful experience.

sirn• 16 years ago

7. I have been using Courier for a while and found its interface to be less annoying than I thought it would. The envelop metaphor makes managing upload destination much more pleasant. You can also use Finder's contextual menu for repetitive uploads.

bradendouglass2• 16 years ago

Am 100% onboard with the Wunderlist comment. I can't stand the ui/ux on this app. If you want to break things down, this app has an amazing design FOR something built on Titanium...that's about it.

Samuel_Michon• 16 years ago

I agree that Transmit and 1Password are exemplary Mac OS X user interfaces. The other apps mentioned: not so much. To me, they look like iOS ports. Lots of chrome, wasted screen real estate.

My personal favorites:

Versions - http://versionsapp.com/

Kaleidoscope - http://www.kaleidoscopeapp.com/

Coda - http://panic.com/coda/

Espresso - http://macrabbit.com/espresso/

PixelMator - http://www.pixelmator.com/

BoinxTV - http://www.boinx.com/boinxtv/overview/

LittleSnapper - http://www.realmacsoftware.com/littlesnapper/

OmniFocus - http://www.omnigroup.com/products/omnifocus/

frou_dh• 16 years ago

Kaleidoscope is very pretty (as is its website), but the lack of ability to do any editing/merging once you view the diff is jarring. I wish they'd spend their time on that.

51Cards• 16 years ago

Daisy Disk isn't a new idea... the Windows Freeware 'Scanner' by Steffen Gerlach was the first I saw to implement this disk view 8-9 years ago. Still find that utility priceless to this day.

http://www.steffengerlach.de/freeware/

babeKnuth2• 16 years ago

try the new 2.0 beta. the "main viz" is essentially the same, but lots of little animation tweaks here and there.

Stuk• 16 years ago

Ahh yes, this tiny application is a permanent part of my Windows tool kit. Absolutely fantastic for finding out where all the disk space has gone.

vasi• 16 years ago

Filelight has also been doing this in KDE since about 2003. I still think it's slightly easier to use than DaisyDisk, since the labels actually point to the sunburst chart. But DaisyDisk does look much spiffier.

tumult• 16 years ago

The performance of some of these apps is appalling. The Sparrow GMail client idles in the background on my MacBook Air around 20 or 30% CPU usage on one core. If you try to scroll the list of mail, resize the window, or breathe on it wrong, it will chug, the graphics will stutter, and it will peg itself at 100% cpu for several seconds. If I have it running, it cuts my estimated remaining battery life from 4 hours to 1 hour.

Kiwi 2, the twitter client, uses 100mb of ram for one twitter account. What?

I know most people aren't going to check these numbers or care, but when I open an email client and feel my laptop getting warm underneath my hands, something is wrong.

callahad• 16 years ago

Sparrow may not be that terrible; on first launch, it fetches, caches, and indexes the entirety of your Gmail account. I'm hoping that the CPU usage will subside once it finishes that process, but I still have a few thousand messages to go...

Edit: After finishing caching everything, Sparrow's CPU usage dropped to ~0% when idle. Scrolling, however, causes it to rocket up to ~70-80% on a 2.66 GHz Core i7 MacBook Pro.

riobard2• 16 years ago

It also uses about twice as much memory as Mail.app.

Anyway the interface is so much better that I'm willing to make the tradeoff!

Derbasti2• 16 years ago

I'll trade processor time for usability any time. As long as animations don't get choppy or the app starts to feel sluggish or battery drain skyrockets, I couldn't care less if an app is using a lot of processor time.

Actually, Skype is a good example of how to not do it. Having Skype run in the background decreases my battery life by a good quarter. Actually talking to someone over Skype can easily get the laptop fans going. Skype even freezes for a few moments every now and then. And Skype is still a tremendously useful app, so I will even take this abuse. (The new design of the Skype beta for Mac is a different matter, though)

Sparrow on the other hand is smooth sailing.

leif2• 16 years ago

Get your downvoting fingers ready... ;-)

AL-motherf###ing-PINE

I swear, I've tried to get in to gui mail apps. I even got pretty far once with gmail's offline mode. I've tried so damn hard, but I can't stay away from alpine. It's so fast, so small, I never have to look for anything. All the commands are staring me in the face at all times. You cannot ask for a better UI.

[p.s. how do you emit literal asterisks here, I've never run across this problem before?]

ubernostrum• 16 years ago

I swear, I've tried to get into console mail apps. But I've yet to find one designed for the post-1975 era. Hint: I have a bunch of accounts, all using IMAP, and I don't run an SMTP server locally.

Mutt, Pine, sup, and everybody else: I'm looking at you.

lotusleaf1987• 16 years ago

DaisyDisk is really awesome, I use this app a lot on my Macbook Air because disk space is still relatively scarce compared to my other machines. I like it a lot and recommend it.

elblanco• 16 years ago

Far too many physical metaphors, I thought we got over that in the early 90's with MS-Bob.

Designers, please, if you are thinking of using wood paneling or shelves in your design, stop, move on to the next idea.

mattparcher• 16 years ago

My least-favorite trend in Mac app design: using Helvetica instead of Lucida Grande, the system font, often because Helvetica is the default on iOS (cf. Reeder, a Mac port of an iOS app).

Why is this wrong? 1) Lucida Grande was optimized for legibility on low- and medium-resolution screens [1], and Helvetica is a 50-year-old print font. 2) Lucida Grande is the system font, and other fonts stick out like a sore-thumb, contrary to the consistency designer’s strive for [2].

The problem, of course, is that Apple keeps using Helvetica in their own Mac apps, most recently across vast swaths of iPhoto, seemingly for the sole benefit of making it more like an iOS app (especially when full screen), disregarding much of what makes a Mac app unique.

[1] http://www.tug.org/store/lucida/designnotes.html

[2] http://blog.cocoia.com/2008/swiss-interface-syndrome/

Daishiman• 16 years ago

I'll probably get downvoted for this, but it looks like the UI for these Mac apps is wildly inconsistent and each app has a very idiosyncratic idea of how it should look, which many times doesn't seem to take usability into account.

I don't think it looks prettier, but to me most modern GTK apps on Ubuntu seem much more consistent and strict as far as respecting the platform UI guidelines.

cytzol• 16 years ago

> "it looks like the UI for these Mac apps is wildly inconsistent and each app has a very idiosyncratic idea of how it should look"

Have you used an iDevice recently? Their apps are designed around the fact that they can have the entire screen to themselves, and this sort of reasoning is bleeding out into computer application development. Some of the designs there could well be iPad apps, if it weren't for the window borders.

It's strange that when I used OS X, I was told that the proper way to do things was to use floating windows instead of having everything maximised, and now Lion is encouraging full-screen interfaces.

foobarbazetc• 16 years ago

The problem with a lot of Mac apps is that:

1. They have glossy websites that talk about how awesome they are. 2. They have copy that claims they have awesome UI. 3. You download them, try them, and realize they do almost nothing except look pretty.

It's pretty hard to find exceptions to this.

gcb• 16 years ago

ah yes, let's praise inconsistent user interfaces...

I only like the SweetFM. wich is nothing clever, they just copied the first version of the official lastFM desktop application (at least how it looked in linux). Probably the guys at lastFM did some usability research and ditched that old version for something more itunesque.

est• 16 years ago

Hate to say this, but it's been a while since there is any beautiful UI software on Windows.

ComputerGuru• 16 years ago

I would put as number one the new and still-in-beta "Tower" git client for Mac: http://www.git-tower.com/

Mac Apps With Beautiful Interfaces

Related Stories