Slashdot Mirror
GUI Design Book Recommendations?
jetpack writes "I've always hated writing user interfaces, and graphical user interfaces in particular. However, I suspect that is largely because I have no clue how to write a good one. I don't mean the technical aspects, like using the APIs and so on. I mean what are the issues in designing an interface that is clean, easy to understand, and easy to use? What are things to be considered? What are things to be avoided? What are good over-all philosophies of UI design? To this end, I'd like to pick up a book or two (or three) and get my learn on. I'd appreciate some book suggestions from the UI experts in the Slashdot crowd."
Doesn't matter, neither does anyone else.
There is one important rule in creating a GUI: follow the same design principles as the target OS and applications with similar functionality as yours.
Be prepared to use at least two design styles. There's the Mac way (and you'll find a lot of good guidelines in their Human Interface Guidelines for that), but, follow those on Windows and X11 and your applications will look rather strange and not at all platform native; even when using native UI controls.
I don't have any suggestions for books on good design, but, here's a classic site which covers some bad design mistakes: The User Interface Hall of Shame. The examples are fairly dated now, but, the principles remain true.
There are a lot of things driving people from Vista, but it's interface generally isn't one of them (I did say generally, just to counter those 3 people who respond immediately with "But I did!"). Microsoft has invested a lot into user interfaces, and most people find their programs VERY nice to use. Microsoft's problems come from DRM, poor security, traditionally poor stability, and anti-competitive practices. Those are all good reasons to look at something different. I wouldn't knock their interface though.
"People who think they know everything are very annoying to those of us who do."-Mark Twain
Study Microsoft design for good design in the same vein as going to webpagesthatsuck.com/ for learning good design. For example, if you have the "options" uder "file" in version 1.1 of your program, don't move it to "edit" in 2.1 and "tools" in 3.1 as Microsoft is wont to do.
-mcgrew
From the linked site (and I haven't put all the checklists in, because slashdot's horrid design gives an error message about too few characters per line):
mcgrew's razor: Never attribute to stupidity that which can be explained by greedy self-interest
I've been tasked with coming up with a GUI that involves data visualisation and report presentation, where before I've mostly done very discrete back-end or embedded systems stuff.
Because there's real-time data visualisation (as well as historic stuff), I've heard about the Tufte books before and so bought all four available at bookware.com.au - Beautiful Evidence, Visual Display of Quantitative Information, Envisioning Information, and Visual Explanations.
Still waiting on them, probably won't be able to appreciate them all in time, but hopefully I can make my app suck less than the existing solutions I'm tasked to replace.
My application is loosely what might be traditionally known as SCADA... but for various reasons we're not using traditional SCADA packages. We're presenting industrial process data, traditionally there are real-time figures and "dials"/bar graph gauge type indicators, along with graph plots that resemble the paper and pen chart recorders this software replaced many years ago.
Any particular one of the four books that people might know to be most useful for me, or a suggested reading order anyone might have?
That's a good start, but one thing that I find essential is to make it customizable. Make as many elements as possible moveable and resizeable. For instance in the Firefox window I am using right now, I'd love to have my tab bar be vertical instead of horizontal. I'd love to have a search button that expands into a search box when I mouse over it. I'd love to resize the button bar and search bar. I'd love to be able to reposition the scroll bar into a two buttons on the top of the page so that one button allows smooth scrolling up and the other allows smooth scrolling down. Can I do any of this? Nope - I'm not a programmer or expert in GUI design, but I'm an extensive user of this GUI and I know what would make it easier to use. A way for the enduser to easily move, resize and re-align elements would be a huge step in user friendliness of GUIs. Even in the games I play, that's one of the nicest things to be able to do - I love that in WoW I was able to fully customize my UI. In LoTR Online, I can move and resize all the UI elements just by holding down a button. It's really sad when game interfaces end up being more customizable and user friendly than actual apps we use far more often.
I'm probably setting myself up for a some abuse here, but has anyone other than myself tried out Office 2007 (which is available at my workplace)? I'm curious what the general consensus was - or even some personal anecdotes... Personally, after getting over a bit of a learning curve, I've actually found the whole context-sensitive ribbon system to be pretty innovative, and I actually prefer it now to older versions. I recall a similar concept used in CorelDraw, where specific toolbars would change based on which particular drawing tool was currently in use, and what type of objects in the drawing were selected.
http://blogs.msdn.com/jensenh/archive/2006/08/22/711808.aspx
I've read some documentation (some interesting videos too, but I can't seem to find them) on the justification for the shift in thinking - about how, for example, the explosion in the sheer volume of functionality makes packing every single function into a static menu structure somewhat impractical. To be honest, when I look at some other modern applications with their enormous menu systems, I'd actually have to agree.
While one may or may not argue the benefits / drawbacks of a specific implementation such as Office 2007, I think an interesting point of discussion is the growth of dynamic interfaces in general - that is, interfaces that adapt to the context of the current work that is being done, to display the functionality most important to a user based on that specific context. Adaptability may even be appropriate, as a computer learns what tasks a user attempts in specific circumstances, and then adjusts itself to try to make accomplishing those tasks easier in fewer steps.
Computers are becoming more and more powerful, and it should be an interesting challenge to try to package all this functionality in a way that doesn't overwhelm users with more and more complex interfaces.
Irony: Agile development has too much intertia to be abandoned now.
The Design of Everyday Things has a lot of great info, and is highly recommended, but first read:
"Don't Make Me Think" by Steve Krug
It's a short, brilliant read, is mainly focused on web usability, but the principles can be extended to any UI design.
Really first-rate book - all content, no BS.
+1 for Joel. +10, actually, if I'm allowed. I really recommend reading the above linked (online, free) book. And if you've got the time, you should pretty much read everything he's ever written. Even his stories about buying office furniture or shipping packages has little hints and clues, not about GUIs per se, but about all the little things that make any experience good or bad. And there's lots of good other stuff too, like dealing with people, creative approaches to problem solving, etc.
Even when he's wrong, the stories are still good. He has a series called 'Working on CityDesk' that has lots of little bits of good info. Despite the fact that his company's web-editing app CityDesk tanked ("nobody wants to compose in a big TEXTAREA on an HTML page") and they now focus on selling the bug-tracking software that they originally developed for in-house use, there is still a lot of good info. I love this bit about XML and databases. (About 2/3 the way down.)
And one other important thing to remember is to NOT go all by one source. Find some others. (Joel frequently mentions others in the industry.) As we saw above, Joel was as wrong as could be, and Norman, despite having lots and lots of good info, is a little too detached from reality most of the time. Forget Designing Web Usability, go read Design of Everyday Things instead.
Dear Slashdot: next time you want to mess with the site, add a rich-text editor for comments.
It's a benefit when you want your OS to be flexible. For example as plenty of people point out, you can run Linux on anything from a washing machine to a supercomputer without too much messing about, because of its modular nature and the amount of people out there that do work to improve or customise it, often just for fun.. a world without choice quickly goes stale.. look at what was happening with IE until Firefox got big, and what was happening with Intel until AMD got their Athlons out the door :)
which is totally what she said
Don't forget to have a good look at the Interface Hall of Shame for examples of what not to do.
-- Ed Avis ed@membled.com
In reality, none of these are that important. You see, there's one thing everybody here failed to mention, and it's the fact that the thing using the USER INTERFACE is a human. As much as this is widely disputed at some points during the software development lifecycle, the fact remains that PEOPLE will be using this product. And you have to pay more attention to human psychology!
Be careful in choosing the right colors, know what a color means, and which feelings it induces to the user. There's an important difference in perception of even hard vs. oval edges. Know how users tend to use the program and try to solve their problem first. Then minimize things, see what you can automate, but not annoyingly smart -- like Word's Clippy. Then, make the thing look good. That's how you should design a good user interface. Never the other way around.
There's one more thing I'd like to point out. A lot of people here pointed out HCI as a good starting point. Well... It's nice to know the things already done on this, but If you have a radical new idea that you think can "shift the paradigm of user interfaces", don't just ignore it. Obviously don't just put anything in, do some testing, prototyping first, see if it fits the above, but don't just let it go, because it's not standard practice!
If you want to whiz off your users...
.
From http://toastytech.com/guis/uirant.html
General application user interface guidelines:
* Always use cute icons, buttons, and graphics. Everyone loves big red hearts, pink bunnies, and yellow smiley faces.
* Don't be afraid to experiment with colors!
* Your application should play fun sounds while operating to keep the users entertained.
* Never, ever, under any circumstance use the OS-native graphical controls or widgets. Users get bored of the same old buttons, text boxes, and stuff.
* When possible, disable window management and use unusual, oddly placed graphics for the windowing functions such as the window close option.
* When writing your own controls or widgets, make absolutely sure they look and feel nothing like the OS-native widgets or anything else the user might expect. Otherwise you might accidentally make the user think that your application is actually designed for their OS.
* Use your own creative ideas on how a "save as" dialog should look and work. Built in ones are always too limiting.
* It is important that the user should never be able to tell the difference between a checked and unchecked check box or option box.
* Always use obscure or poorly drawn graphics for your tool bar buttons, and never put text on them.
* Avoid including a preferences or options dialog. Instead, let the user use the standard OS provided text editor or an editor of their choosing to edit text configuration files.
* Users need time to think about what they are doing and get coffee. Your application should always take at least 5 minutes to load even on the fastest available computer.
* Make sure an accidental double-click on a single-click item does something really nasty or unexpected.
* Tool tips are the perfect way to display critical information.
* To get the most screen space, force your application to always run maximized.
* Always make the default positions of floating properties windows cover something important.
* Use the most exotic fonts you can find.
* Your application's user interface should be flexible and customizable to the point where if the user accidentally sneezes on the mouse or keyboard they will have to spend the next half an hour setting things back.
* Let a 5-year old draw your graphics, including your corporate logo.
* File browsing dialogs are not needed, users can easily remember and type in long file paths.
* Design your application so it requires the user to set their tiny monitor to 10512*7430.
* Always crash at a critical step and then display a fake apology to the user.
* It is a mistake to make use of application hooks in the native desktop environment such as new file templates, file associations, or program menu icons.
* The exception to the above is placing icons in the system tray. Place as many icons as you can in the system tray and make sure that the user can not remove them.
* If your program implements keyboard shortcuts be original and make them completely different from any other applications.
* Rent extra UI space in your application out for advertising. Advertising benefits the users and y