Tim Morgan's thoughts that are too big for Twitter
The failures of the Mac App Store’s UI, and that of its app, Twitter 2.0

I’m astounded that there hasn’t been a peep from Gruber about the problems and inconsistencies in the Mac App Store application, and those of the apps sold on it.  My first experience with the Mac App Store was a purchase of the new Twitter app, of which Gruber had this to say:

My new favorite Mac Twitter client.

I had a remarkably different experience upon opening the app.  Much like with the App Store itself, the head-scratching UI left me bewildered and confused more than once.

Let’s cover the App Store first.  The most noticeable divergence from the HIG is the toolbar.  In an apparent effort to save vertical pixels, the title portion has been removed; the toolbar buttons moved up, and the “stoplight” buttons moved down, for symmetry I guess:

App Store: Nonstandard toolbar and stoplight buttons

I can appreciate the desire to balance the vertical space by moving the stoplight downwards, but the result is a glaring attention-grabber.  Who didn’t notice the unusual placement of these buttons when they first opened the application?  Every other window has its buttons four pixels from the top, making these stick out like a sore thumb.

The Back/Forward buttons also stand out, in that they are colored exactly the same as the window background.  Compare to Safari’s navigation buttons:

Safaris navigation buttons

The color contrast helps set buttons apart from their toolbar backing, and frankly I’m not sure as to the reasoning in the head of the Apple engineer who wrote the code to override the default toolbar button style.

Also catching my irk was the login sheet I was presented with upon purchasing my first application:

App Store: Login sheet

Firstly, “Billing Info” is a noun and button names should generally be verbs or verbal phrases.  (What am I doing with my billing info when I click this?)  Worse in my mind, however, is the “Forgot?” hyperlink.  I’ve been seeing hyperlinks (or faux-hyperlinks) pop up in applications here and there and I’ve never been a huge fan of it in desktop applications.  Much like on the Web, these hyperlinks come in different colors, sizes, and styles; here in the App Store it’s just blue text (not even underlined!) that could easily be mistaken for a plain static text element (especially by the colorblind).

I am of the opinion that if you have a piece of text, and you want something to happen when the user clicks on it, there is one and exactly one way of doing it on the Mac: a button.  I see nothing wrong with having a “Recover Password” button alongside the “Cancel” and “Billing Info” buttons; there’s no need for the less accessible and less standard hyperlink.

The design flaws of the Mac App Store, however, are largely overshadowed by those of the first app I downloaded using it: Twitter 2.0.  Let me cover a few of the more egregious ones I’ve found.

The worst of the worst of these is the window dragging.  Look at the main Twitter window and tell me: Where do you click to move it?

Twitter: Main window

The answer is in the black areas, something you may not have expected, and is certainly not obvious from first glance.  You can also drag in the title bar, as you would expect, but the title bar is so small that finding a clickable area where you can drag is a real challenge.

Now look at the New Tweet window:

Twitter: New tweet window

To move this window, you also click in the black area.  But now the black area is along the bottom of the window, whereas in the main window it was along the side.  Notably, neither of these windows are moved by clicking along the top, which is the standard on OS X.

I should also mention that individual tweets are draggable too; you do this by clicking along the side of the tweet, though there’s no color difference that indicates the valid areas where you can do this.

Clicking on the different tabs in the main window (tweets, lists, mentions, etc.) reveals the corresponding content with a “slide out” animation.  Upon opening the application, you are presented with your timeline.  Click the “@” and your mentions slide out on top of the timeline.  Click the timeline again, and you would expect perhaps for the mentions to slide back in, revealing your timeline, but instead your timeline slides out on top of your mentions.  This endless sliding out creates a sensation of “stacking” UI views infinitely on top of each other, when in fact you are merely switching between six different tab views.

Like the App Store, Twitter has re-tooled the stoplight to suit their tastes, this time coating it in a deep graphite color no matter what your Appearance settings are:

Twitter: Stoplight Twitter: Stoplight hover

The first issue here is that these are deep grays, and not everyone has perfectly calibrated his monitor.  The buttons may be barely visible on some computers.  In addition, the Maximize button doesn’t actually do anything, but it’s not disabled.  (Not that you could tell if it were disabled.)

When Twitter is loading items, it displays an indeterminate progress bar.  Rather than being the standard OS X widget, they’ve chosen a small gray circle that widens repeatedly as content loads:

Twitter: Indeterminate progress bar

This may be fine on the Web, where people use any ridiculous animated GIF they find to indicate progress, but in my opinion, OS X should be about consistency of user experience.

Some other minor complaints include the inconsistent way that Twitter handles an empty list of items.  See, for example, an empty list of tweets:

Twitter: Empty list of tweets

… and an empty list of lists:

Twitter: Empty list of lists

When I first saw the latter, I thought some kind of network error had occurred, causing Twitter to misbehave.

Lastly, Twitter’s badge is also unusual: Whereas most applications badge themselves with a number indicating the amount of pending “things” (emails, notifications, etc.) the user should deal with, Twitter’s badge is always the same:

Twitter: Badge

Unlike the points above, I don’t actually think this is a bad thing, and in fact think John Gruber may rather appreciate it.

I fear that the App Store’s lax approach to user interface consistency, and its heritage from iOS, are causing developers to associate it with a new sort of freedom to design whatever UI they like with their apps.  This can sound like a good thing: A heterogeneous design environment like the Web can sport its share of beautiful, unique websites, so there’s no reason to believe that such a future for the Mac OS wouldn’t also produce such gems.  The problem is that we’d have to take the good with the bad, and as anyone who surfs the Web knows, there’s a whole lot more bad than good.

Gruber once said (and for the life of me I can’t find the quote) that the difference between the Mac OS and iOS is that you don’t need to be a designer to make a good-looking Mac app: Apple provides you the assets you need; if you adhere to common sense and the HIG, you will create a good-looking (if not unique) application.  On the iOS, all the best apps have had enormous amounts of design effort invested in them.  As the App Store (and OS X 10.7) blur the lines between iOS and Mac OS, I fear we may lose this distinction as well.

  1. photograghy-passion reblogged this from riscfuture
  2. taichi-routine reblogged this from riscfuture
  3. hedgefunds-eim reblogged this from riscfuture
  4. lincoln-sms reblogged this from riscfuture
  5. benefits-of-apps reblogged this from riscfuture
  6. bosch-mum-8 reblogged this from riscfuture
  7. roc-brilliance-eye-and-lash reblogged this from riscfuture
  8. website-traffic-tips reblogged this from riscfuture
  9. cainidevanzare reblogged this from riscfuture
  10. eliquidonlineshop reblogged this from riscfuture
  11. phuketwebdesign reblogged this from riscfuture
  12. freesamplesuk reblogged this from riscfuture
  13. mirjanagn reblogged this from riscfuture
  14. phuketwebsitedesign reblogged this from riscfuture
  15. quitar-manchas-de-las-axilas reblogged this from riscfuture
  16. riscfuture posted this