Slashdot Mirror
What Makes a Good UI?
OSXCPA asks: "While there are plenty of OS business apps from accounting to ERP, they seem to share a common failing with "commercial" software - the user interface is terrible! Has anyone seen an application that has a UI that made you sit up and stare in amazement at the simplicity and effectiveness of it? For the techno-elite, drooly-gui may not be a priority, but I am working on a project (OS) where I have to show real savings (in task performance time and reduced data entry error) on a specialized accounting system via better UI. Am looking for some inspiration. Any ideas? Projects? Books?"
Has anyone seen an application that has a UI that made you sit up and stare in amazement at the simplicity and effectiveness of it?
Google
The biggest problem I have with programs, is the way they make you hop all over to input data. If you can just go from input box to input box, flowing continously, then its a good UI design.
Who cares about looks, I care about functionality, well, I guess I do care about looks somewhat, take proxomitron's default colors when it came out, ICK. The user interface is perfect as a program goes.
But back to flow, nothing bothers me more than something taking away attention when you are working, pop up boxes, something that takes focus away from your work. I think this is why so many people like ratpoison, windowmaker, icewm, you can do your work without the distractions.
ok, do I really need Internet explorer to pop up and tell me when my download is finished? When I'm in the middle of typing an email? No. Stay out of the way. Stealing focus, or making a user hop around is biggest problem in UI design IMHO.
Vim.
No, don't laugh.
Its base set of commands is simple enough, and its effective.
For example, take 'd'. 'd' is for delete. 'dw' deletes a word, 'dd' deletes a line, 'd$' deletes until the end of a line.
'y' is copy. 'yw' copies a word, 'yy' copies a line, and 'y$' copies until the end of the line.
'c' is to change. Guess what 'cc', 'c$' and 'cw' does.
Moreso, 2dw deletes two words, as 2yw copies two words, etc.
Once you learn how one set of commands works, and you know another command, you probably know how that command works and how to use that command to extend the commands you currently know.
For example, /string searches for the next occurence of 'string'. Guess what
d/string and y/string does.
Sure, vim might not be the easiest UI to learn, but I seperate 'ease of learning' from 'ease of use'.
Just my $.02
PS: This post composed in vim. (Its my default editor for w3m)
Simple, but not restricting. Allow me to pull out the complexity if i need to. However, dont bog me down with 100 steps. (
Common places to look:
- Anywhere involving the mouse. Operations like selecting or cutting and pasting are very time consuming, and open to a huge degree of errors.
- Anywhere involving manual communication between programs. "The cron job emails this file to me as an attachment, then I save it and import it into Excel to run this macro."
- Anywhere that the human is acting as calculator. "I click in this field and then I type today's date."
- Anywhere there's a handoff between humans. "I start the server, email Jim to tell him its up, and then wait for him to tell me whether there are bugs he wants fixed."
- Manual touch points that don't need to be there at all. "I generate the newsletters, which takes like 10-20 minutes, and then when that's done I upload them to the test server."
In short, if you are trying to improve efficiency, then your human is your weakest link and your job is to minimize your human's input into the system. Whittle down their input to the bare minimum that cannot be accomplished by the computer itself, and then do the rest for them.Note very importantly that this implies there is one major audience that uses your product for one primary thing. We're not talking about something like a Microsoft Word that is used generically by a universe of different people. You said you have to optimize productivity, which implies that you have some control over hacking away at features that do not impact productivity.
www.HearMySoulSpeak.com
... This is not meant as a slight to developers. Those who are intimately aware of how every detail of the program works cannot shift perspective and see it from the point of view of someone who neither knows nor cares about the inner workings. I've spent 15 years designing systems to be used in a manufacturing environment. Saying that any problems are due to lack of user training is a cop-out, one that will kill follow-on business. Industry has the operators they have and are not going to start hiring special people and paying them more to run my systems. It's just reality.
I'll give what I think are the biggest UI traps:
1) UI's that expose all the capabilities of a system. This is not good UI design, in fact it is lazy UI design. What you need to do is understand how your users are going to do with your system, and present them with as few choices as possible. Example: If you have a screen for looking up Customer records, and further allow it to be customized to show various fields, and further allow it to check or uncheck any field, you can end up with a screen that does not show the Customer ID (because it was accidently turned off). From the developers point of view you are adding functionality. From a user's point of view there is now a way to accidently render the screen useless, or at least annoying.
2. Beware of allowing users to customize (Wow - there goes my Karma...) Customization is fine for stuff you play with, but in a professional environment it is much more important to have consistency. It is important that people can walk away from something for a week or a month, and come back and get to work right away. It is important that telephone support can make assumptions about what the user is seeing. Floating toolbars, menu items that come and go with frequency of use, frames that can be moved from top to bottom, all of these make it difficult both for telephone support and for people who are "backups" i.e. they were trained once and only use the system every so often.
3. Don't be afraid of busy screens (Damn - there goes the rest of my Karma) Professionals get used to the layout and appreciate having all the information right at hand. (This makes number 2 - consistency - especially important). So err on the side of putting as much useful information as will fit. And prune mercilously anything that isn't useful or required. Don't you hate it when you go to a bank or an airline check-in counter and see the attendent typing endlessly, screen flipping, all at the speed of light, but... why exactly do they need all that commotion?
4. Keyboard shortcuts, labeled and encouraged. The mouse is great for a lot of things, but speed is not one of them.
5. Remember your audience. Are they people who sit in front of the screen all day, using your application as their primary function, or are they several times a day users who simply need it to perform a vital function but just want it to work and go away? Even if it is the former, what about their backup's or the third shift people? In any case, present what they need immediately and clearly and leave off the fluff and BS.
6. Most important. Remember that your application is not what the people do. It is a tool that helps (or hinders) them in doing what they do. A tool should not be their primary focus. The task is their primary focus. Whether a carpenter or developer, any time spent fiddling with a tool simply means less time to spend actually doing the task.
No, and neither will you. The sign of a real good user interface is that you don't notice it, you just use it.
The problem is that it takes a lot of very hard work to get that far and most application developers (Open source as well as commercial) don't bother and/or lack the skills to do it.
My opinion? See above.
I believe that a key to good UI design is allowing the extensive options and a high degree of control over the software through both a graphical user interface, and a command line interface.
With GUI design it is important to not throw up to many options at once but provide a rich and complete set of options but place the most commonly used ones on main screens, and then put lesser used ones on "advanced" or "expert" screens. Organise and categorise options and cofiguration settings, and features and make them all easily accessible, but with most commonly used ones most prominant. Include a toolbar with commonly used features, then on the menu bar you can include the commonly used options and advanced options in "advanced" menus and submenus. This way, the average user isnt bombarded with options, but the user if they desire can set the more advanced options and features if they wish. The software should give users complete flexibility and control as possible and let them configure everything, but only if they want to. If all the user wants to do is jump right in and start doing what the software is supposed to do, they should be able to do so and the software should use reasonable defaults. The idea is to give the user the choice and freedom, if the user wants to control every aspect of the program, they should be able to do so, but if the user just wants to start using it withonly having to make a bare minimum of choices, they should also be able to do so. You can give users both. The program should be as simple or as complex as the user wants it to be, and allow the software to work the way the user wants it to work rather than enforcing limitations and restrictions on the user.
The command line interface allows for the programs features to be more easily scripted and integrated into other programs and as well eisier remote ssh and command line access to the programs features for those who desire it. Agian, no one is forced to use it as it is an advanced feature, they can still use the GUI, but it is there if someone wants to use it.
Here is a great rule of thumb when designing a UI: No one wants to use your stupid flipping application. Once you get past the ego trip of 'my app is in front of everybody, it must be shiny and say something cool about me', things go much better.
The UI should get the heck out of the way and let the user do his work. Things should be intuitive. Use the right control for the right job. Be consistent between screens. Watch how your users do their job, and use your system. If there are unnecesary clicks because focus goes to one control when they really use another control, fix it!
Sometimes, it is necessary to design a form that a five-year old cannot use. When this is true, include helps and hints (tooltips for quickies), some type of pop-up when longer help is necessary.
Most important: Sit with your user and watch him do his job. Feedback is so important, but how you get the feedback is more important. If you solicit feedback, you will generally get a million stupid suggestions, and the important ones won't get brought up.
Identify your power users. These are the ones who figure out how to break your app, who give you the ten ways to improve your product (and generally have good throughts -- not, "the background color should be puce"). Talk with them, thank them for their input, follow up when you have incorporated your changes, ask them if the changes were what they had in mind.
Keep your audience in mind. For lower-skilled workers, I keep things simple and avoid complicating the process. I put a higher emphasis on warning if things 'don't look right' to the computer. For higher-skilled workers, I give the user more autonomy, and less hand-holding.
Most of good UI design revolves around knowing your user base and communicating with them.
There are a ton of books that talk about the nuts and bolts. But good people skills is what seperates the code monkeys (who have three times more coding skills than me) from the successful software engineers.
See my journal for slashdot ID's by year. Mine created in 2005. http://slashdot.org/journal/289875/slashdot-ids-by-year
While I am a strong Open-Source-Software user myself, I've found that quite often some of the biggest points of contention between the users and developers come with UI design/enhancements. If it's a programmatic bugfix the developers are happy to fix it, but if it's a UI/usability fix/change most developers seem to get their hackles up.
Developers of projects like the GIMP make a UI have long ignored user requests for things like an IDE environment, and when pushed both the developers and power users alike tend to get contentious.
Of course GIMP is just one example, many programs are like this. In the case of having something simple like an IDE, how hard would it be to simple allow an option to turn it on. It would satisfy both new and power-users, and put an end to many a flamewar...
One related point is how to ask users for data. The wizard approach is good for users who don't always know what they want. It provides a simple way to extract information and make decisions on what to ask next based on previous responses. But it sucks for speed. For a specialized app, like this one, your users probably know exactly what information they need to provide. Let them provide it all at once instead of spread out over 10 dialog pages. Since your users probably won't be entering exactly the same type of data all the time, present them with a simple choice, then give them the huge forms. It's not elegant design (lots of duplicated information) but it's fast as hell. And you can always lay out the forms in the same sort of way, so five tabs takes you to the same field no matter what form you're in, etc.
I mean, don't you hate those Web forms where you answer one or two questions per page? And the damn thing seems to go on for hours? Just give me a monster page with all the fields, I'm smart enough to know which ones are relevant and need to be filled in.
But make sure it really can be automated! There's nothing more frustrating than a program which does something you don't want it to with no convenient way to stop it. The key here is to know your audience. A common pitfall for developers is to build the application they want, instead of the application the users want. This plagues the OSS world in particular, for obvious reasons. Excessive configuration is often a crutch for uncertain design principles. If you know what your app needs to do, and you know how people will be using it, then users shouldn't need to configure anything at all. Fine, let them change the sort order of tables or whatever. But if you find your users need to tweak your program extensively before they're happy with it, you've done something wrong.This goes back to the "lots of options" point as well. The more options you give your users, the more confused they tend to get and the harder it is for them to find the stuff they need to.
Also note that allowing for customization adversely affects consistency. Even simple customizations can adversely affect the ability of one person to use another's copy of the application. In a place where there are more people than computers that's a serious problem. It's also a problem if you want to offer technical support, training, etc. In a way, let MacOS be your guide: "I don't care if it's the best way, but it's the way you're going to do it." And if you're designing an app which builds, at least to a certain extent, on other apps, you should probably choose to do things the same way the others do. That will be the way your users are used to doing things, so unless you expect to see some enormous improvement in efficiency or ease-of-use, don't rock the boat.
There are good UIs, which follow all of the official look and feel requirements. There are efficient UIs, which allow users to work at their maximum speed. Do not confuse the two. They may not and most often are not the same.
My wife works in accounting and is extremely fast at using one of those printing calculators. However, the user interface in her accounting software make her mouse or tab between fields, greatly reducing her speed of entering data. It looks nice, but is difficult to use quickly. The interface for DOS applications was often much more efficient than their Windows counterparts because it allowed the users to keep their hands in place and reduced hand/arm movement to just finger movement. Compare that with having to reach for the mouse all of the time.
Here are some quick guidelines for improving data entry speed in applications:
1) Minimize hand movement for numeric entry and forward navigation through numeric fields by encouraging use of the numeric key pad.
2) Minimize hand movement for character data entry and forward navigation through character fields.
3) Try to keep fields of similar data type in order (where appropriate) to facilitate use of #1 and #2.
4) Allow the use of the mouse but don't require it unless you absolutely have to. This can be aided by selecting field types which allow the most efficient entry of the data such as text entry for a date instead of a calender popup. If your hand is already on the keyboard, keys, even hot-keys, are faster than the mouse.
This all boils down to reducing the amount of motion required to perform a task. Generally speaking, reducing motion increases speed. As for inspiration, take a look at some of those efficient DOS apps and see if you can use the same keystrokes in a GUI version. You get bonus points for combining that efficiency with UI look and feel requirements.
You said: A UI that doesn't let you access all the capabilities of a system is a broken UI.
If you add the word "necessary" in there somewhere, I would agree with you. I'll give you a real world example: Print orientation in industrial inkjet printers (these are the kind that write the date on the bottom of coke cans - not anything like a Deskjet). Because these printers are non-contact, you can't predict ahead of time which direction the product will go past the printhead, whether it is upside down, and whether it is printing on the inside of something transparent in order to be read from the outside. There are 3 different parameters that give you all the 8 different combinations, and 7 of the 8 could be used in the real world. The traditional way is to give the user control over all three parameters and let them try to figure it out. The better way is to let them print a test message, then select the way the print acutually printed. The code figures out the settings that correct the orientation. More work for the coder, but much easier for the operator. When this second method was implemented it was considered by many to be an amazing leap in the printer technology, when in fact, the printer hadn't changed at all. Sold a lot of printers though.
The important thing is to understand what the end user wants to do, and present it in a way that makes intuitive sense to them. It is oftentimes more difficult to code, but it is really the only right way to do it.
So, before you even think about the UI, work out what people will be doing with the software. What things are they trying to achieve? Be specific. (This is where use cases can be very helpful.)
Then you can look at a UI, and judge how best people can do those things, with the UI getting in the way as little as possible.
So your request for a flash, impressive UI is pointless: the best UI will be one that you're not even aware of! And one which seems completely obvious -- but only after you've seen it...
Ceterum censeo subscriptionem esse delendam.