Another UI Bites the Dust

June 15th, 2006

It’s been a little while since I critiqued (or mercilessly attacked, depending on your perspective) an application’s UI. Actually, it hasn’t been that long at all, but I just downloaded and tried the Mac OS X version of Meetro, and we might as well learn from some of their successes and mistakes. Let me just warn anybody loyal to Meetro that this entry will not be high-fives all around.

Like most things in life, it’s easier to spot the mistakes after they’ve been made. I’m sure that anybody looking at the products of my labor would spot problems that I just gloss right over because of my familiarity with them. The criticisms are just my opinion, but they are opinion formed from a long association with the Mac and with understanding pretty well how things are conventionally done. When I see an application with elements that stand out like a sore thumb, I try to learn from it. What could they have done differently to make this application more usable and attractive? Hopefully both Meetro’s authors and the Mac developer community can learn with me as I go over some of this application’s less desirable points. By learning and reinforcing our conception of what makes a good application, even less successful application releases can provide us with some service.

I think I started out in a bad mood because I clicked the big “Download Now!” image and expected to start downloading. Call me crazy but when I see the words download I think of files coming to my computer, not filling out an enrollment form. The image should read “Register Now!”

But I was curious so I went through the registration. Soon enough I was looking at a very pretty DMG mounted on my desktop:

Cute! Nice retro font. Bubbles. Whee! Note the exclamation point at the end of the install advice: it’s a foreboding warning of intensely enthusiastic phrasing soon to come. My only criticism of the DMG is that it asks the user to drag the icon to the Applications folder, but doesn’t offer them a convenient alias to it. At some point within the past few years, some genius figured out that you can put an alias to the Applications folder right on your DMG, so the user doesn’t have to fish around for the folder to perform the drag. I think I first saw it in Fetch, but I’m not sure if that’s where it originated. At this point, it’s caught on enough that I’m disappointed when an application doesn’t have it. At least if you’re not going to have one, don’t emphasize the folder in your advice. Omni products for instance don’t have the convenience, but they at least let the user know that you can drag it anywhere you want to. Lesson: Make it mind-numbingly easy for the user to perform the expected action.

Upon first launching Meetro, it presents a login dialog, similar to what you’d see when running any other chat program:

Pretty nice looking. I might make some little tweaks, but at least it flows well and has a pretty good balance. Now for the numerous nits to pick. The “Status” box looks kind of PC-ish to me, why not just use a static text? Worse: clicking on the text makes it disappear. The group box is probably unnecessary but if it’s used I would like to see an equal amount of whitespace on all sides. The unconventionally narrow margin at the bottom seems to work with the streamlined look of the floating dialog, but what’s with the fat margins on the sides? The dialog has a close box but clicking it doesn’t do anything. Is “screenname” a word? Finally, take note of the number of exclamation points in this dialog: more foreboding! Lesson: Comply with standard Mac UI unless another technique improves the user experience.

But the real problem with this dialog is what happens when I enter my information and click “Log me in!” It doesn’t log me in!!! ZOMG! Now if I’m a normal user I have to sit here and wonder what the hell happened. But since I’m a nerdy user I pop over to the Console to see if the application has spewed anything informative to the standard output. Sure enough, a number of debugging strings have been presented, culminating in:

LLNETNetworkThread: no data received in 65 seconds. Assume disconnected
LLNETNetworkThread: unforced disconnect detected. Do full disconnect, then re-connect!
LLNETOpenConnexion: successfully connected to server 0

So I’ll give Meetro the benefit of the doubt and assume they’re having a bad server day. But this condition was detected so beautifully by the code, only to be trapped inside the application and never conveyed to the user. What was the point of all that careful error handling if you’re just going to leave the user hanging? Even something vague like “There was a problem connecting to Meetro, please try again later” would give me some clue. Lesson: Translate runtime exceptions into meaningful error messages the user can act on.

While I was looking at this failure to login, I thought I’d follow-up on what a regular user might do in such an event. The Help menu beckons.

OMG!!! I totally need help. In fact the severity of the application’s failure right now makes the extreme enthusiasm sort of appropriate, but in general it’s not polite to add such enthusiasm to verbs. Let the user decide whether the amount of help they are seeking is “three-bang level” or not. Users like to have unemotional control over their their tools. Can you imagine how ridiculous it would be if all the other devices you use had exclamation points following all the verbs? Honey, we should totally watch TV!!! Yes, I will get the remote!!! Wait, how do I turn it on? Oh Yeah! Just press the “On!!!” button. As a developer, when in doubt, just look at what every other application of note does. Have you ever seen a “Help!!!” menu item before? Lesson: Use emotion-agnostic language in your UI. Don’t attempt to artificially depress or excite the user.

Again, the real problem is what happens when I actually select the help menu item. I’m taken to a web page called the “Meetro FAQ.” OK, fair enough. This is online help. But looking around I can’t help but notice that this is a general purpose FAQ, not one specific to the Mac client. I click on “Platforms” where I finally see mention of Mac OS X. It’s from December, 2005. The good news is that an alpha version is ready for testing. The bad news is that I still seem to be testing it now in June, 2006. Lesson: Lead the user to Help that is highly pertinent or else don’t lead them at all. Don’t bait and switch!

While we’re looking at the Help menu, let’s try out some of the other options. Maybe, even though this product was just announced, and I’m running it on the day of its announcement, I somehow have an outdated buggy version? That option to “Download latest version” looks hopeful. I love it when applications help me stay up to date. But selecting this option does exactly what it says it will do, it links directly to a dmg download, which on my machine causes Safari to start re-downloading the version I’m already running. I don’t need it if it’s the same! Thanks, though. This situation would be made better by using Andy Matuschak’s free Sparkle framework or Tom Harrington’s cool SparklePlus branch, which allows for optional collection of a user’s machine statistics. Since Meetro includes the Growl framework, I know that the company is not averse to open source solutions. Lesson: Empower your users by incorporating de facto standard open source packages. Don’t reinvent the wheel badly.

The “Changelog” menu item doesn’t read well. I’m used to seeing verbs and suddenly I see a noun. How about “View Changelog”? At any rate, when you select it, it takes you to a web page documenting the entire history of the application in all its informal glory. The latest entry is most telling:

v0.51 - Em ti, mprikia kollame; (2006/6/15) - md5: 1b9122f9a9d73037cc923e71545d0172
--------
coming after I wake up, coz I REALLY need sleep (6am)

Ouch! Sorry, whoever you are, and I hope you have a nice rest before waking up to discover that users can’t connect to the service and some snarky blogger just dissected your app. What can we learn from this? The author was so busy and sleep deprived trying to get this release finished that he or she couldn’t even copy/paste the notes of what was changed. This is probably a bad sign for the overall readiness of the release. Lesson: When in doubt, delay the release until adequate testing can be done. Actually, we get two lessons from this one! Lesson: Don’t publicize embarrassing details about your last-minute race to release the application

All told, the Help menu really didn’t help me at all. I still can’t log in and I don’t know whether it’s a problem with the whole service or just with my account. I tried a few more times by quitting and restarting the application, and then decided to check for the possibility of a pertinent Preference item. The Meetro Preferences are reachable through the conventional location, under the application’s self-titled menu in the menu bar:

Whoah, crazyville! What are all those items doing in there? You could argue that Meetro is being innovative here and simplifying the user experience by putting everything the user may need to do in one centralized location. The items listed here even seem somewhat consistent with Apple guidelines as they are “items that apply to the application as a whole.” But that doesn’t matter, because nobody puts this much random junk in the application menu. If there’s going to be a change in the tide, I don’t think Meetro is going to be the one to do it. I see this kind of stuff from time to time, where a developer will point out that their highly unusual UI is actual “according to guidelines.” But if nobody else’s applications interpret the guidelines in that way, you’re doing a disservice to users by bucking the system. In the real world, this application should probably have a “Chat” menu or something that houses these related-yet-global items. Lesson: Favor real-world trends over literal interpretation of Apple design guidelines.

Don’t think I’m done with that menu yet. Not matter where it lives, it’s got problems. What stands out in this menu and in the Help menu is the decision by Meetro to shun the conventional capitalization of words in a menu item’s title. You don’t have to look any further than the very menu these items live in to see instances of “proper” capitalization. “Hide Others” and “Show All,” for example. If that’s not enough, look in any menu of any application on your Mac. The lower-cased words in Meetro’s menu items stand out like sore thumbs! On the Mac we capitalize lots of words. It’s like a headline. I can’t imagine just not noticing that every other menu item on the system looked different, so I have to assume this was a conscious decision on Meetro’s part. Do they think their menu items are more correct? Maybe on a PC. Lesson: Do things the Mac way even if you feel it’s the wrong way.

I can’t help but notice that they’ve claimed some awfully ubiquitous keyboard shortcuts for some of their menu items. On a Mac, Cmd-S means “Save” and Cmd-P means “Print.” It’s really confusing to a user for these shortcuts (and Cmd-C, Cmd-V, etc) to be used for anything else. What’s funny here is obviously Cmd-P was claimed for “Photo,” but why was Cmd-S claimed for “Open drawer profile”? And what does that even mean? I assume they meant to call the item “Open Profile Drawer.” Lesson: Avoid conflicts with universally-known keyboard shortcuts.

At this point I’m getting pretty lonely because I still can’t login. So I decide to play around with these menu items. Maybe I can sneak onto the Meetro network through the back door. Whoops! Another UI defect, I mean lesson. Although these menu items are enabled, most of them do nothing in my current state. I thought maybe changing my location or trying to “reset the user” would tickle the system and let me in. But each of them just does nothing. Ditto for all the items, with the exception of “Invite friends.” More bait-and-switch! Lesson: Always disable UI elements that, when selected, will do absolutely nothing.

So what happened with the one item, “Invite friends,” that actually did something? It took me to a web URL where supposedly I would be able to, you know, invite some friends or something. Instead I found the grandaddy of all bad UI: the 404 page not found error:

Page Not Found!

Hrmm... I can't seem to find what you're looking for!

Ouch! But at least it came with that charming Meetro exclamatory tone. Hrmm… we totally screwed up. Have a groovy day! The root of the problem here is probably during development there was a planned invite page, and when it finally got implemented it happened to reside at a different URL than originally planned. This kind of stuff is caught in that simplest of all QA phases: try every menu item once. Lesson: Triple-check external dependencies before releasing your application.

At this point I’ve written quite a lengthy tome and haven’t even been able to login to the service, yet. As I was writing this I hoped that by the time I got this far I’d finally be able to log in and would then see how the rest of the application’s UI stacked up. I suppose it’s a gift from the heavens that I wasn’t able to, since it helped to keep this entry at a nice manageable length.

There you have it, I’m excited to try Meetro and looking forward to a revised edition that lets me log in, among other things. In the mean time, I’m glad to have been reminded of some things to look out for while putting the finishing touches on the 1.0 of a forthcoming application. If I keep it up with entries like this, my product’s release will probably be met by a well-deserved round of criticism. And that will be a beautiful thing, because it means my 1.1 release will totally kick ass.

Update: I finally got logged in. I guess the server is just getting swamped today and the client app is not prepared to handle that very gracefully. Now that I’m logged in I can appreciate the innovative aspects of the application, but it’s a good thing I didn’t get logged in earlier or there’d be a lot more questionable UI to talk about.

I’m going to limit it to just two complaints: it should save my login information and my location between launches. It’s ridiculous to make me type my login when the system keychain is made for exactly this kind of thing. Lesson: Any value likely to stay the same forever, or for a very long time, should only need setting once.

12 Responses to “Another UI Bites the Dust”

  1. Michel Fortin Says:

    Interesting, two of the design flaws makes me think of an application made by someone for whose primary language is not English. I don’t know about all languages, but in at least in French menu items are never capitalized (because in French, headlines are not either), so it would make sense that this could be the mistake of someone used to non-capitalized menu items. The “Open drawer profile” mistake which should be “Open Profile Drawer” made me think of the same.

    Then I loaded the Meetro website, and found this in their Contact page: Palo Alto, CA.

  2. Johannes Fortmann Says:

    I think the linking-on-disk-images trick may have originated on the BeOS, where people would put links to /home/lib in .zip files with instructions to drag libraries there.

  3. Daniel Jalkut Says:

    Michel: great observation – and it’s possible that language issues might be a factor, even though the company is located in Palo Alto. By the way I visited your site and the French/English toggle is very slick. I especially like how you worked it out so that French and English comments would reside separately. Now that’s an example of some stellar web UI. Great work!

    Johannes: interesting trivia, and somebody on IRC also mentioned the same thing to me. Thanks for sharing it publicly.

  4. Andy Kim Says:

    More random oddities about the Meetro Mac client.

    - Keyboard shortcut for zooming in windows: Command-+
    - Preferences item in the menus, but disabled. Why have it at all if the user can\’t choose it?
    - The main window title shows the version #.
    - Horrible use of fonts. Too small
    - Consistently lacks whitespace in the UI. Combined with the small fonts, this app is a real headache-inducer.
    - The logo at the top of the window is taking up precious screen real estate without serving a useful purpose. Considering their hate of whitespace, it almost seems like they\’ve planned to use that space for something else. Ads?

    I\’m stopping because I could go on forever with this thing. But, the weirdest thing is that there\’s a dedicated section in the contact list for people associated with Meetro called MeetroHQ. Yes, you guys are cool because you made this thing, but I want to take you off the list and can\’t.

    Apparently this is a barely working version that they decided to ship (duh, version 0.51). The bad UI decisions run so deep though, I wonder if the guys at Meetro have the aesthetical senses to even realize what\’s wrong with it. Looking at this gives me the goose bumps because it reminds me of the Windows AIM client. I thought Web 2.0 companies were Mac savvy by definition. Very strange. At least it mostly works, and that will be all that matters for a lot of people.

    P.S. Daniel, I didn\’t realize that you had a new look to the blog since I read it mostly in NNW. Cool design! I\’m loving it. Just one minor quibble: the high position of the g in blog at the header makes it look like a B. Red Sweater Blob :)

  5. Daniel Jalkut Says:

    Andy: Great points all around. I’m glad you summarized some of the problems with the main UI because I’m sure I would have rambled on and on if I tried.

    Yeah I sort of snuck the redesign in and meant to write an entry about it, especially about how Python/NodeBox facilitated the creative effort. But I haven’t gotten around to it. Thanks for the feedback about the “blob” … funny, if it was mistakeable for any other word I’d probably be more inspired to fix it. I kind of like the notion of it being a blob :)

  6. Blake Seely Says:

    From now on, I will refrain from using exclamation points, but instead describe my excitement with a “Bang Number” – because it sounds great and has a hilarious sexual innuendo. When it catches on (and I know it will), I will tell everybody that it originated here.

    (I’m at least two-bang excited to post here right now and take some time away from Xcode.)

    (I’m THREE-BANG excited about Red-Sweater Blob.)

    -Blake

  7. Jonathan Wight Says:

    I think Blake is getting pushed too hard at his new gig…

  8. Kevin Ballard Says:

    Just to note, “Open drawer profile” is actually exactly what it meant to say. It’s confusing, but it’s accurate. What it does is opens the profile for the user currently displayed in the drawer (said drawer opens when you select someone).

  9. Rainer Brockerhoff Says:

    Thanks Daniel, these UI discussion are always very inspiring. Do more! :-)
    FWIW, I remember chancing upon symlinking to /Applications in 2003 (for XRay 1.0). When did Fetch start using this? http://emperor.tidbits.com/webx/TidBITS/Talk/650/4

  10. Conor Dearden Says:

    The link to the applications folder is great, but I find internet enabled disk images better for most users. Especially when you have one single application or folder that needs dragging; like Meetro. Let Safari do the hard work of mounting, copying, ejecting and deleting the disk image. For users that don’t have open safe files enabled or use Firefox you can add the nice background graphic with instructions. Like many things in life it depends on your audience, but I find that internet enabled disk images are few and far between and few developers take advantage of them.

  11. Taybin Says:

    I hate to join the conversation almost a year later, but I think one issue is a cultural difference. If you come from a linux/open source background, release early/release often makes a lot of sense. They want comments like yours (especially at 0.51).

    It seems on the mac platform, many users want indie software presented fully formed, like how Apple presents their software.

    (Coming from linux/oss myself, this is an urge I’m fighting against. I have this huge desire to show off Gusto even though it’s nowhere near done. I’m thinking of trying to get the “best” of both worlds with a large, private alpha test group.

  12. Daniel Jalkut Says:

    Taybin: I think the ideal solution for the Mac is to release a fully formed product early and often.

    In other words, instead of aiming for a 3.0 product and hashing through a million public 0.x releases, just aim for a simpler 1.0 and get it right.

    This is an area where I think Mac and Unix/OpenSource type development teams could learn from each other. The attitude I sometimes encounter in the Unix world seems to be that it’s OK to add half-features because they will get sorted eventually. Of course, half-completed things generally stay that way forever.

Comments are closed.

Follow the Conversation

Stay up-to-date by subscribing to the Comments RSS Feed for this entry.