I present to you what I call the GTFO UI Design Philosophy. There are many books written on designing good user interfaces, appropriate methodologies, approaches and techniques. People talk about different UI paradigms, styles and etc. To me UI design roughly boils down to this: “get the fuck out of my way and let me do whatever I’m doing”. That’s it! Everything else just adds polished feel to your design. Knowing when to GTFO and let the user work in peace however is what separates a good UI from an annoying one.
When designing user interface please keep these 10 things in mind:
- Making Me Wait is Annoying – every second you make the user wait for your app to launch is a second they are using to imagine strangling you with your own intestines. Seriously. When I start an application, I want to use it immediately. Not in 5 minutes, not in 30 seconds but now. Make sure the UI pops up immediately, and that the controls are functional as soon as possible. Then if you need to load some plugins, or libraries put a throbber somewhere in the corner. As you are loading, let me do easy stuff like open the file dialog and etc… Gray out the shit that is not ready yet, or something.
- Stealing Focus is Evil – don’t you just love when you typing something when all of a sudden your IM client or some other app pops into the foreground? While an your app might potentially need to steal focus from it’s own window to display a dialog, it should never, ever attempt to steal focus from other applications. It’s annoying, and it interrupts my work flow.
- Modal Dialogs Suck – sometimes modal dialogs might be necessary, but they should be used very sparingly. There is absolutely no reason to make the common save, open and properties dialogs modal. Why? Because modal dialogs not only steal your focus, but also hold it hostage. And stealing focus is evil
- Splash Screens Suck – I can’t tell you how many times I said to myself: “boy, I love how this application shows me this big fucking ugly splash for a full minute every single fucking time I start it up”. Seriously, just think about it? Do you like staring at splash screens? No? Then why THE FUCK do you put them in your software? If your Splash screen is there because your application takes 5 minutes to load, and you need to use a progress bar of some sort then maybe consider #1 on this list. Start with a basic UI and update it dynamically as the shit is loading.
- Your UI Icons Suck – you can hire a world renowned artist to design icons and buttons for your UI so incredibly beautiful that mere glimpse of them will make people ejaculate rainbows – someone out there will still think they are fucking ugly. Provide functionality to hide that shit – either via some minimalistic text only UI or skinning. What the button does is more important than how it looks, and your power users will probably use the keyboard shortcuts anyway.
- No One Wants a Fat, Ugly Toolbars – if your toolbar, status bar, and sidebar take up so much space that there is hardly any left for the actual work area, you fail at UI design. I’m looking at you MS Ribbon, and assorted legion of ugly ass GTK apps. See the rule about icons – no one fucking wants your shitty UI elements in their face. If you absolutely must have big bulky toolbars, provide a mechanism to hide it, skin it or configure it. Otherwise it’s just a distraction and annoyance.
- You Do Not Need and Icon in the System Tray – nor do you need to start with windows. Unless you are an app that needs to be on all the time (like a firewall, or on-access AV) you have no business there. If I want you to always be on and start with windows, I will configure it. I’m talking to you Quicktime, WinZip and OpenFuckinOffice and every single crappy piece of shit that comes preinstalled on Dell machines. GTFO! Oh, and dear AV and Firewall makers – if your application does not have a disable and exit button that will kill all your processes, you are no better than the fucking malware you are trying to protect me from.
- No, I Don’t Want to See More Tips on Startup – here is a tip: go fuck a duck. How is that for a tip? No one uses these things, they are annoying as shit and serve no real purpose. Note: if your tips are delivered by a talking paper clip, you need to kill yourself.
- Don’t Freeze – when your UI locks up and becomes unresponsive most users assume that your app has crashed. In most cases it didn’t – it was simply to busy doing something else to register UI clicks. This is bad as most people will just kill your process leading to data corruption and various other fun side effects. Not only will they think you released a piece of shit that crashes all the time, but will also blame you for losing the data. I’m telling you, that fucking “Not Responding” notification in windows is a death sentence. Linux users on the other hand will just -9 your ass without even thinking about it. Use threads, or forked processes, and always display some sort of progress bar, or throbber animation when busy. As long as shit is moving on the screen the lusers probably won’t even be tempted to click on the UI.
- Did I Mention that Splash Screens Suck? – seriously people, lay down on the Splash bullshit. Especially if the bitmap splash image is actually bigger than your core binary. Get a grip!
So here you have it. Follow these 10 simple tips, and your users will love you. Unless of course your app sucks anyway – but I can’t really help you there.
Btw, profanity is there to emphasize the point. We all know that all these things suck for the users. I dare you to take any of these points and argue why doing opposite from what I’m telling you would be better for the user. Sure, some of these things might be related to development costs (making an UI that doesn’t lock up on intensive IO might be harder than creating one that does) but don’t tell me that splash screens, startup tips and ugly ass toolbars that can’t be resized or hidden really save so much time and money.
Every one knows these things. Everyone hates the apps that do them. And yet, every other piece of software on the market (proprietary and free alike) violates at least one, if not all of the tenets of GTFO UI Design outlined above. Why is that?
[tags]ui, gui, ui design, gtfo, splash screen, toolbar, user interface, graphical user interface, splash, throbber, progress bar, taskbar[/tags]
Crappy UIs piss me off, I agree with you on every point.
Bad day? Yikes, I wouldn’t want to be in your way if something wasn’t going right. In any event, I think you’re right. There are so many common ui defects we don’t even notice them.
I think greying menu items (while better than leaving them functional looking) is a ui mistake. If you are going to grey out my menu item – tell my why! How many times have you found something you needed greyed and spent hours fiddling and reading documentation or other help to try and figure out how to use the greyed menu item (photoshop, I’m looking at you greying all kinds of stuff for having the wrong color profile – rgb/cmyk). Even only spending minutes is more than should be necessary. This should apply even to “obvious” things – if the user can’t use that item tell them why not.
A tooltip might do the trick, but I often find these annoying. How often has this happened to you: “oh no, I jiggled the mouse and the tip is gone before I was done, now I have to find the exact right spot again and take my hand off the mouse so I can read the dang tooltip.” Removing the greyed out items destoys ui consistency, so that’s out. Not greying out dead menu items is a terrible idea too. The best I can think of is this – when the use clicks on the greyed item a small blurb comes up and explains why the item is greyed and (preferably) how to get it ungreyed. The blurb goes away when you click back in the work area, or on another menu item, or when the app loses focus.
There are a ton of these little niggling things. I’m curious what particular (or set of) app(s) incited your post? Like I said, Photoshop is one of my least favorites, but Gimp has a ton of your pet peeves too – load time, splash screen, tips on startup, big ugly toolbars, and such. What is the worst for you?
@jambarama – actually, this post was originally written sometimes last week, so I’m not even sure what set me off originally. It might have been combination of Gimp, OpenOffice, the bloated, unresponsive McAfee UI and ClamWin deciding that it needs to show an ugly Splash screen for 3 seconds every time you open Outlook. :P
But you are right. I didn’t think about it at the time, but graying out menu options for no apparent reason also pisses me off. I think that needs to go on the list as #11. ;)
I had a good laugh over most of these points, especially #6 :mrgreen:
They’re all very true… Thankfully almost all of my applications don’t do/have any of these problems :D
hmmm….so tell me, do you think splash screens suck? *grinchuckles*
Great article. I’m alllll over #1. I have zero patience.
~TC
BTW, I really just wanted to leave you a comment ’cause I liked the name of your blog.
All good points, and I think the reason these flaws persist is that most windows users simply don’t care about UI; they just live with whatever they have. Myself, I care a lot about UI, and that’s part of the reason I use a Mac.
Also, in point 9, I think you meant to type losing, not loosing – losing is to lose something, loosing is to set it loose (just a little pet peeve of mine).
I’ll give it a burl:
#1: Waiting until something is fully loaded before presenting itself to you is what linux does. Windows presents itself to you before it’s finished loading, and if you try to do stuff before it’s fully loaded, you get frustrated at slow response times and half-arsed functionality. While it is annoying to wait excessively long times to load (hello OOo) for really fringe shit to load, it’s also annoying to try something and then have it wait just as long until that module is loaded.
There needs to be a balance somewhere between an application being half-arsed and being a total arse.
#4: Splash screens suck if they’re taking more time than it takes to load the app in question. If they’re just there while the app is loading, who really cares? If anything, it’s helpful for support since splash screens invariably list version and build numbers, which is useful for situations where the app crashes before you can Help > About… or have an extra-clueless user.
#5: UI icons are important. Admittedly not as important as the function the button performs. There’s not a lot of difference between an average icon and a good icon, but there’s a world of difference between a bad icon and an average icon. I’ve just finished testing some software that has three buttons on the same toolbar that all look like a page with a folded corner, and they all do markedly different things. Each individual icon makes sense in what it refers to, but even I still occasionally have to mouse over them to remember which one is which.
#8: Tips on startup almost always have a checkbox you can untick. If you don’t like them, you see them once. Having them on by default gives new users the knowledge that there’s a resource available. And I defy anyone to say that help documentation is undesirable.
Greyed-out menu items: I’d much rather an unavailable menu item grey out than have it look available and ‘just not function’ when selected. If greying out is done correctly, it helps you get an idea of what menu items are available in different modes of the software, just through random exposure to other items on the menu.
I thoroughly agree with #6, but #2 is the best thing on the list. Stealing focus from other applications is one of the most evil behaviours around.
Tobias: Unfortunately, we ‘losers’ are losing out to the ‘loosers’ online. It’s so insanely prevalent on the net that it will eventually become an alternate spelling. But keep fighting the good fight.
@Terminallycute hehe – your blog has a cool title too. ;)
@Tobias – thanks. I tend to do that lose/loose thing a lot. Somehow my brain got wired the wrong way for these things. One day I hope it will finally click in and I will stop doing that stupid mistake.
@varci – you make a very good point about #1. I totally agree that there needs to be balance. I think when I wrote that I was thinking about applications like Adobe Reader which wait to load every single plugin and feature before displaying the UI. They could just as easily start rendering page and just activate the plugins in the background. Or IE waiting and blocking till it loads the whole page, vs. the Gecko rendering the page as it loads. But yeah – sometimes it pays off to wait.
#4 – splash screens almost always cause the load process to be longer. The graphic must be fetched from HD, displayed on the screen and etc. If you skip these steps you can sometimes shave off even up to a second from the startup process which may not seem much but it does make a difference.
#5 – this is why skinning is such a nice thing to have. If the icons are confusing you just apply a different skin. :)
#8 – yeah, I know that this is the idea behind the tips on startup. But I seriously haven’t seen anyone ever use these things. People always either disable them or ignore them. No one reads them or clicks that “next tip” button. I’m saying this based on observing coworkers, and my students over the past few years. It’s really better to have good documentation available from the Help menu, or that “what is this” context menu option than randomized, tips on startup.
For example, instead of displaying “Did you know you can save your document using Ctrl+H” it’s better to have a clearly labeled “Keyboard Shortcuts” help page listing them all in one place, or better yet, a key binding menu where you can review and change these shortcuts.
Love it. I agree on all points. This is why I went out and searched for alternatives to bloatware like Adobe Reader. Not only does it have the craptacularily annoying splash screen, but the fucking thing takes up 60 to 70 MBs of HD space…to do what?!? I found an app called Foxit PDF Reader…it does all the same stuff and is only 2.5 Mb or so…and no splash screen.
One of the biggest annoyances, for me, is what you described in #7. Webcam drivers are famous for this. Why the hell do I need all the drivers running IF I AM NOT USING THE FUCKING THING? Why? For fun? I use Starter to turn this shit off, and only turn the resource hogs on when I need them…which is hardly ever.
I
Foxit rules. I always install it on my windows boxen.
Funny thing – on Linux acroread by Adobe is actually a semi-decent, albeit a bit dated PDF viewer. On windows it’s a bloated horror!
You forgot the worst one ever (other then microshits new interface for word)
I DO NOT WANT HELP FROM A FUCKING PAPER CLIP…. EVER
:D
@Travis – LOL! That’s definitely going to be rule #12
Only tangentially related to your posting, but reading it brought to mind the Firefox Vimperator plugin…took a bit getting used to, but now I see it as essential. It basically gives you a vi interface to firefox…death to toolbars, icons, and menus. The only thing that remains is the website and your tabs. Everything is done using single character shortcuts and :commands for more complex things. If you try it out, just keep in mind “I” is the shortcut for turning off vi mode…which can be very frustrating when typing in something AJAXy and every “o” tries to open a new page, etc.