Some thoughts on UI design

As I mentioned the other day, I’ve been messing with OS X lately and I must say one thing: this is a pretty well designed UI right there. You can say a lot of bad things about Apple and their policies but they do seem to know a thing or two about UI design. I can’t really help but be impressed by the simplicity and consistency across all system components and features. The user experience just seems less… Cluttered. The design seems to be clean, organized and neat and the complexity is carefully hidden away from the user.

My desktop on the eMac

I actually find int interesting that while most people do recognize this fact, most (including UI developers) can’t really figure out what. When OSX came out years ago, everyone seemed to be enamored with “The Dock”, and tried to duplicate it on other platforms. To me however, The Dock is only useful because it is the default launcher/task manager for the OS, and it is deeply integrated into it. Most other platforms already have their dedicated launchers (desktop icons, quick start toolbar, Start menu) and their dedicated task manager. But that didn’t stop people from bolting a Dock clone onto that infrastructure. In fact, Dell still insists on shipping computers with the Dell Dock, even though Windows 7 task bar has duplicated all of the Dock features without actually sacrificing the native Windows UI look, or loosing the tray and clock.

Your average Windows user may now have a whole bunch of locations from which to launch programs: some will have shortcuts on the desktop, some will have shortcuts on the Dell Dock, some will be pinned to Windows task bar, and the rest will be in Start menu. Clutter, chaos and duplication of functionality! This is probably not an issue for a seasoned user, but in comparison a person using OSX only has the dock, and the application folder to worry about.

Good UI designs are minimalistic, and streamlined. It is almost impossible to make something easier to use and more intuitive piling more shit on top of it (even useful shit). You usually increase usability by reducing complexity. But that’s only one part of the equation. Minimalistic UI is not necessarily synonymous with intuitive one. In fact, the successful UI design lies at the intersection of technology and psychology. We tech people often forget that there is a human element that need to be factored into the design and this is why most interfaces we have right now suck so much. Open Source projects are especially guilty of this, because their focus lies elsewhere. With exceptions of the projects that specifically target UI innovations, the goals of most open source products are stability, interoperability and extensibility – UI design often being an afterthought.

Sometimes though, complexity and bad UI design can be a selling point. No, I’m serious. Have you ever heard about Bloomberg Terminals? They are specialized systems for market traders – a unix based back end, and custom built windows based thin clients that look like this:

A Bloomberg Terminal

Their most recognizable feature is it’s sheer ugliness and complexity. The UI is a byzantine, key-stroke driven maze that has not changed in like 20 years. It is hard to navigate, hard to understand and outright hostile to new users who have not yet memorized the 100 page abridged quick start version of the manual.

Bloomberg actually wanted to update their “blast from the past” systems, streamlining the UI, adding navigational features, mouse driven menus and black on white color scheme (to replace the eye straining yellow and orange on blue). Huge usability improvements should yield productivity gains, no? One would think that their clients would be all over this. But they were not. Everyone seemed to hate the idea with a passion.

Granted, every time you update the UI there will be old, entrenched power users that will declare the new version dummbed down abomination but in most cases these type of users are merely a vocal minority. The majority votes with their wallets and the upgraded UI sells like hotcakes. The problem was, that Bloomberg did not have regular users. Their whole user base was composed of cranky, power users. You had to become one if you actually wanted to do anything useful with the system.

In fact the Bloomberg UI was so horrible that navigating it became a marketable skill. Once you learned that shit, you could put it on your resume, and claim to be a Bloomberg guru. It was something that would set you apart from your colleagues. Bloomberg skillz was serious business. So the plans for the redesign were scrapped and the terminals are still pain in the ass to use – and their customers wouldn’t want them any other way.

We can all laugh at the silly tradesmen with their favored byzantine software system but… Well, they are not really that much different from you and me, are they? We are power users, hackers and tinkerers and we love complexity. We thrive in the clutter of busy counter intuitive interfaces, and prefer to do things the hard way. And we have good reasons too – for example I use Vim because nothing else (well, except for Emacs) really compares with it when it comes to power and flexibility. When I build software I don’t ofter think very deeply about UI presentation – I just go with what I’m used to, and what I think will work. Most of us work this way. Then one day we sit down and start using some product released by Google or Apple and are completely blind-sided by simple, and yet incredibly intuitive design choices – their sublet effects compounding to create superior user experience.

Anyways, this is just something to think about.

This entry was posted in technology. Bookmark the permalink.



20 Responses to Some thoughts on UI design

  1. you are mostly right… apart from the “apple makes great UI”-Part.
    I don’t mean that OSX has the worst UI ever or even that it just should be worse then Windows.

    I more think of somethin along the terms of “apple” knows how to make a pretty looking UI and really watches over how the user finds the really important things. But if you look deeper, if you really need something not-so-important, they often produce annoying, incoherent shit. Like: have you ever tried controlling OSX just with Keyboard? It’s impossible! Even Windows does this, Gnome/KDE do it really great, but OSX just sucks if you try this.
    And no, i don’t really want to do everything all the time with the Keyboard, but every ninth or tenth time i use a function, its just after i typed some text and want to type text afterwards. Then under OSX i have to use my hand over to the mouse and back to the Keyboard, before i can continue.

    Keyboard does seem to be not pretty loved by Apple at all… ever looked at the way most shortcuts (like what pos1 or end do on Windows/Linux) differ from every programm to the next?

    A strange habit for a system that’s telling me that i don’t need more than one button on my mouse too. *g*

    Just did a much longer rant about OSX some weeks ago, and got a lot more points (most important: i hate the most users of iAnything), but the sad thing is: it’s in german. :-/

    Reply  |  Quote
  2. Luke Maciak UNITED STATES Mozilla Firefox Linux Terminalist says:

    @ Dr. Azrael Tod:

    Interesting. I haven’t really been playing with OS X long enough to notice these flaws. It is definitely not a perfect system – there is no such thing of course. That said, keyboard shortcut inconsistency across different applications is sort of par for the course on all platforms.

    My own little frustration with OS X is lack of a plain text editor. The course I’m teaching includes section on HTML and my Mac users always run into trouble with TextEdit opening them in WYSIWYG mode. Yes, you can easily disable that, but you have to keep in mind that for all intents and purposes my class is much like herding cats. Teaching a Gen-Ed requirement at a University and working in IT sector taught me that people’s ability to follow instructions is very, very limited.

    So I tried looking up free Notepad like editors for OSX and… There aren’t any. There are bunch of editors aimed at programmers, and bunch of editors that handle rich text but so far no Notepad like alternative. Weird.

    Reply  |  Quote
  3. Tino UNITED STATES Mozilla Firefox Ubuntu Linux Terminalist says:

    Great post, except I really do not recognize myself in “We thrive in the clutter of busy counter intuitive interfaces, and prefer to do things the hard way.” I *really* prefer the graphical UI to be very simple, and think power user features should be hidden away until needed. I actually like how e.g. firefox handles it, with a huge “configuration editor” one can go to for the power user adjustments.

    That said, we had a lot of old macs (system 9 and earlier) on my university, and they always felt too locked down, with nothing configurable. I thought this would be much better with OSX. However, when we tried to set it up on a big TV, we immediately run into the problem that one apparently cannot change the system font size (especially for the top menu). This made the system unusable on that screen with the intended distance. I mean, seriously?

    Reply  |  Quote
  4. Luke Maciak wrote:

    @ Dr. Azrael Tod:

    Interesting. I haven’t really been playing with OS X long enough to notice these flaws. It is definitely not a perfect system – there is no such thing of course. That said, keyboard shortcut inconsistency across different applications is sort of par for the course on all platforms.

    My own little frustration with OS X is lack of a plain text editor. The course I’m teaching includes section on HTML and my Mac users always run into trouble with TextEdit opening them in WYSIWYG mode. Yes, you can easily disable that, but you have to keep in mind that for all intents and purposes my class is much like herding cats. Teaching a Gen-Ed requirement at a University and working in IT sector taught me that people’s ability to follow instructions is very, very limited.

    So I tried looking up free Notepad like editors for OSX and… There aren’t any. There are bunch of editors aimed at programmers, and bunch of editors that handle rich text but so far no Notepad like alternative. Weird.

    curse on all platforms? i beg to differ. If i use strictly GTK-based Applications its much more standardised than if i use OSX, same goes for QT and even Windows does a pretty good job on using everywhere pretty much the same combos nowadays. (at least if we speak about text-editing and such. Just try to mark wordwise in a textwindow! This is not even the same at applications from Apple itself -> safari/xcode/…)

    a lot people speak about textmate as editor, a coworker of mine uses smultron.
    It’s pretty much more common to pay for software under OSX then it’s under Windows or even more extreme Linux/BSD. I think this has a lot to do with the much lesser aviable Freeware and the more money that a common Mac-User has then compared to a Windows-User.
    The last point might just be thinking in stereotypes, but i’m pretty shure that if money is of big importance for you, you are less likely to buy yourself a mac (and lots of “creative” users like Designers still use OSX what is based on some kind of self-fullfilling-prophecy about mac beeing good for print-/design-things. These pretty often earn good money in theier dayjobs.)

    Reply  |  Quote
  5. nitro2k01 SWEDEN Mozilla Firefox Mac OS Terminalist says:

    Yo dawg, i herd you like Macs, so we only put one pedal in your car!

    Jokes aside, my own pet peeve is the lack of consistency when it comes to switching between documents in multi-document applications. Windown has its alt+tab for primary level windows, and ctrl+tab for second level windows. Add shift to the mix to go backwards. No such thing in OSX; different key combos to do that in every application. I suppose Apple want you to press F10 and use Exposé…

    Generally, like Herr Tod pointed out, Apple don’t like the keyboard, as it seems. There’s no way to move the focus around between elements and “click” a button with space. No way to access menus via keyboard accelerators, similar to “Alt+x” in Windows.

    Furthermore, the lack of a (good) text editor. Smultron, when you’ve used it for a while, turns out to be a frickin’ joke with little bugs all over the place. Ever had your line numbers misaligned in a big file? TextMate looks good, but I haven’t bothered to try it yet. And it’s not freeware, of course.

    Overall, I like OSX, however. But it seems that they’re trying to turn the Mac into an iPhone with the upcoming Lion version, which I’m not very keen about.

    Reply  |  Quote
  6. road UNITED STATES Google Chrome Windows says:

    @ nitro2k01:

    Cmd-tab switches applications.
    Cmd-~ (tilde) switches windows within an application. I think (?) that’s universal throughout OSX.

    Reply  |  Quote
  7. Mart SINGAPORE Mozilla Firefox Windows Terminalist says:

    Besides the lack of a nice freeware text editor, I also can’t find a nice OSX alternative for Paint.Net on Windows. GIMP is a bit too complicated for me to use. Others like Seashore is a bit too simple for stuff that I want to do.

    Maybe I’m just too spoiled with Notepad++ and Paint.Net on Windows.

    Reply  |  Quote
  8. nitro2k01 SWEDEN Mozilla Firefox Mac OS Terminalist says:

    @ road:
    You’re actually right. As it turns out, Cmd+` does work, and is AFAICT universal. How come I didn’t know about it? That’s where my criticism continues. As it turns out, Cmd+` does cycle through windows, and even goes backwards if you hold down shift. Good so far. However, with my keyboard layout (Swedish) you actually have to press Shift+´ to get `. That restricts the window order to one direction (since you have to hold down shift to reach the character in the first place!) So I guess I’ve tried that combo once at some point and then given up on it, since it didn’t seem very useful to me.

    So when writing that comment, I surveyed the applications by looking in their window menus. And there, the combo (and menu item) is missing in random applications, even when (as I know now) the combo works. And there are still consistency problems. In Preview, the combo doesn’t work at all with the Swedish keyboard layout.

    Then there’s the real gear-grinder: Terminal. Cmd+` does work, but you need to hold down Alt, (which you don’t need to in any other application) apparently because ` is a dead key and alt bypasses the deadness and types the accent directly.

    What about switching tabs in Terminal, then? It’s not Ctrl+tab. It would make sense not to use Ctrl+tab if it actually sent a different signal to the application running in the terminal, which it doesn’t. (I double-checked this by inputting both combos into hexdump on the terminal.) Instead it’s Cmd+{ and Cmd+} which is reasonable enough on a US keyboard (Cmd+Shift+[) but again, a frickin’ three-modifier combo with the Swedish keyboard layout, Cmd+Shift+Alt+8 and 9. (Shift+Alt+8 and 9 = { and }) Why didn’t they just use Cmd+[ and ] to switch tabs, I hear you ask? Well, those are also used to cycle through windows (but only in Terminal) and they are of course not indicated in the menus. Terminal can also cycle through windows with the novelty shortcuts Cmd+left arrow and right arrow, which are of course also not listed in the menus and unique to Terminal.

    Ok, I just figured out that my problems might stem from the fact that I’m using English as the system language, but Swedish as my keyboard layout. Turns Cmd+< does actually cycle through windows, when using Swedish as the system language. is explicitly listed to do this in the the window menu.)
    2) The Swedish combo doesn’t work in applications that don’t have a menu item for it. This includes Safari, TextEdit and probably a most others.

    Bottom line, it seems like they didn’t think through their keyboard design philosophy. To wrap it up:
    1) Lack of consistency through applications. (Which means there probably aren’t any
    2) Dependent on using the same keyboard layout as your system language.
    3) Broken implementation in non-US keyboard layouts. (Swedish surely can’t be the only language affected…)

    Reply  |  Quote
  9. nitro2k01 SWEDEN Mozilla Firefox Mac OS Terminalist says:

    Reposting this paragraph as it got messed up because of the tag characters.

    Ok, I just figured out that my problems might stem from the fact that I’m using English as the system language, but Swedish as my keyboard layout. Turns out Cmd+< does actually cycle through windows, when using Swedish as the system language. < is in the same place as ` on a US keyboard. So perhaps I could just use Swedish, which I could do, even though I prefer English. But no…
    1) You still can’t hold shift to go backwards. (Except, notably, in the X11 app where Cmd+> is explicitly listed to do this in the the window menu.)
    2) The Swedish combo doesn’t work in applications that don’t have a menu item for it. This includes Safari, TextEdit and probably a most others.

    Reply  |  Quote
  10. nitro2k01 SWEDEN Mozilla Firefox Mac OS Terminalist says:

    Also, it seems like I’m getting “500 internal server error” every time I ost a comment, although the comment is posted just fine.

    Reply  |  Quote
  11. copperfish Opera Linux Terminalist says:

    ditto on the 500 error

    Reply  |  Quote
  12. nuroten CANADA Netscape Navigator Mac OS says:

    Interesting blog, been reading it for a while. :) First time out of the woodwork.

    On keyboard control, there’s a list of OS X shortcuts at creativebits.
    – To access the top menu, the shortcut is Ctrl + F2.
    – To move focus between button elements in a dialog, Ctrl + F7 to toggle keyboard access to all controls then Tab to move focus.
    – There’s an app launcher called Butler, like Quicksilver that another poster mentioned (though they are different species) that lets you assign hotkeys for certain actions, say Alt+Cmd+T to launch a terminal window. It’s not freeware and there’re probably other apps out there that let you do the same, but the older version (4.1.6) was donationware and works fine with Tiger.

    Imho, some of the “intuitiveness” of keyboard navigation is acquired through experience, and that most if not all OSes require some level of adjustment on the user’s part when starting out (this from a “non-technical” user.) Alt+F4 to quit an app might be quite natural to Windows users, but alien to a Mac user who’s used to Cmd+Q. Similarly, the behaviour of the close button in application windows on a Mac used to make me pause, because with some exceptions, it doesn’t make the app quit. It would sit happily in the Dock and I’d forget it was still running. On the other hand, it’s all right if what you really wanted was to move the window aside so that you can do something else, but be able to return to what you were doing later on without having to restart the app. Part of it comes down to understanding the behaviour and how/whether it fits in your action flow.

    Plain text editors: TextWrangler and CotEditor are nice picks, if programming-oriented. If you just wanted something very simple, NovoEdit might fit the bill. (Check MacUpdate for them.)

    Graphic editor: Cinepaint?

    Reply  |  Quote
  13. Luke Maciak UNITED STATES Mozilla Firefox Windows Terminalist says:

    @ Tino:

    Oh wow, that’s interesting. One would think that increasing the system menu font size would be a must-have feature…

    @ Dr. Azrael Tod:

    Re: inconsistent shortcuts – I was thinking more along the lines of IE vs Firefox vs Opera for example. Copy and paste is the same in all of them, but stuff like jumping ot address box, or opening new tab depends on the application. But yeah, I get what you are saying.

    As for the “macs are good for graphic designers” thing, I never got that. I honestly don’t see how it would make any difference. I mean, is Adobe suite magically better on a mac somehow?

    I think it is brilliant stealth marketing by Apple. They somehow managed to start this thing, and clueless people just keep on repeating it. :P

    @ nitro2k01:

    Yeah, that “we want to make it more like iPod” worries me. Why would I want my desktop/laptop UI be more like the UI of an oversized iPhone? That UI works great on a handheld device, but I fail to see how it could make desktop experience any better.

    @ nitro2k01:

    I’m getting the internal server errors too. Not sure what is causing it. I’m trying to track it down.

    Thanks.

    @ nuroten:

    Oh, NovoEdit is exactly what I was looking for – an idiot proof notepad replica so my Mac using students can sort of have similar experience coding HTML as the windows using students.

    Thanks for the tip!

    Reply  |  Quote
  14. Kim Johnsson SWEDEN Google Chrome Windows Terminalist says:

    As I remember it, once upon a pixel Macs were superior in music/video-related stuff. Or rather, all the awesome applications were released for Mac first/exclusively. Unfortunately people tend to not realize that things change, so no matter what we tell them they still believe this is true. I’ve seen it first-hand many times. An extreme case would be a friend’s sister, who insisted on buying a Mac because – and I quote – “I want to listen to music, and Macs are better at music”. It’s kinda sad.

    Reply  |  Quote
  15. nitro2k01 SWEDEN Mozilla Firefox Mac OS Terminalist says:

    Macs at least have a reputation of just working. And I think there’s a grain of truth there. It’s an all-in-one package that comes with…

    * Solid hardware. (For example, the firewire chipset has a reputation of giving a low latency for audio applications.)
    * Software that is tuned to work with said hardware. (No driver hassle for the hardware in the computer.)
    * Comes with a calibrated display. (Important for graphics work.)

    Not that a PC couldn’t do these same things, but it would take more effort and research.

    Tino: You have a couple of options.

    1. Hold ctrl and scroll to zoom.
    2. Use a lower resolution.
    3. Use Front Row to operate the computer while on the TV.

    Reply  |  Quote
  16. Tino UNITED STATES Mozilla Firefox Windows Terminalist says:

    @nitro2k01
    Thanks for trying to help! Let me clarify: we were setting OSX up for collaborative use in a conference room. We tried a number of suggestions from google, but couldn’t find a satisfactory solution. Regarding your suggestions:
    1. To zoom in and out may be ok if one just want to e.g. start/stop movies. For normal programs it is more or less unusable.
    2. In this specific case it was not an option to run the tv at lower resolutions, as this was an interlaced 3D tv with every second pixel row polarized differently, so it had to run at optimal resolution for the 3d features to work. But in general, doesn’t running monitors below optimal resolution look quite poor?
    3. Front Row is just for media use, right? Again, in our case we wanted to collaboratively run regular programs.

    Maybe it is because I am primarily a Linux user, but the part I couldn’t get over is that a workaround is needed at all. Why isn’t there just a “menu font size” config option somewhere?

    Reply  |  Quote
  17. vacri AUSTRALIA Mozilla Firefox Linux says:

    @ Luke Maciak:

    TextEdit is a plain text editor.

    Reply  |  Quote
  18. vacri AUSTRALIA Mozilla Firefox Linux says:

    @ Dr. Azrael Tod:

    I have to agree here. Longtime windows user migrated to medium term linux user/admin, and in a mixed office am now picking up OSX support duties.

    So many times I’ve gone to help an OSX user and had to rope in another person to help because either a) Apple does things differently to everyone else, just for the sake of being different; or b) what you want to do is simply disallowed by Apple. The very idea that you might want to do it goes against ‘simplicity’ and is verboten.

    Occasionally there is simply no way to do what I need to do in the gui, so I break down to the command line and do stuff there, which completely confuses even experienced OSX users if they’re non-technical. The main backup guy I rope in for all these little pecadillos is an Apple fiend (seems to get a Foxconn box every week) and I’m constantly asking “okay, how do I do this in the gui”, only to get “you can’t”. Eventually I’ll crack at a point and just exclaim “that’s just shit”… and he’ll agree that many of these restrictions are needless.

    Apple’s UI is simple. It is integrated. It is not comprehensive. It is not enabling. It is needlessly controlling.

    I would say that OSX is pretty, but not beautiful, because to me beauty in a system involves elegance – and something isn’t elegant if you’ve got there simply by chopping out functionality.

    I still recommend OSX for new computer users since Win has management overhead to stay safe and Lin just has management overhead… and if they’re new users, they’ll never know just how constrained they are by OSX if they never get to try something else :)

    Sorry, just a bit ranty because I had another run-in this morning with OSX :)

    Reply  |  Quote
  19. vacri AUSTRALIA Mozilla Firefox Linux says:

    (sorry, brainfart – missed that you had dismissed textedit. It does have Vim, though, king of the text editors…)

    Reply  |  Quote
  20. Luke Maciak UNITED STATES Mozilla Firefox Windows Terminalist says:

    @ vacri:

    Yes, it is limiting. I was more or less impressed with it when looking at it from a technological neophyte angle. Sort of trying to put myself in my students’ or coworkers’ shoes.

    I wasn’t really worried that much about the restrictiveness of the GUI because it has a unix running underneath it. So if I need to do something complex, I can always hack it on the command line – or so I figured. That’s what I usually do on Linux too because sometimes the GUI’s are a bit shaky. For example, I still use aptitude from the command line because Synaptics or whatever the KDE equivalent is used to love crashing in the middle of installation leaving the system in a funky state. :P

    As for Vim – did you look at the screen-shot I posted? Have you not recognized the Vim icon in my dock? That was the first thing I installed on that machine. I hardly use anything else for my text editing.

    I was looking for a Notepad like editor that I could give to my students when I’m going to be teaching them HTML. I tried telling them how to disable the rich text editing thing in the properties dialog but in the end they would just bring me their laptop and make me do it. I figured dragging an .app file into the applications folder may be easier.

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>