tags:

views:

374

answers:

10

Say for instance I'm going to do some seat of my pants coding adding a feature to an enterprise app. What are some good examples/tenants/cardinal rules a person can follow for making a fairly complex setup/config screen not look like feet.

What I'm looking for is along the lines of "Don't put one thing in a group box". But I'd also like some help with symmetry if anyone knows what layouts are most likely to achieve a relative amount of good looks that would be helpful.

+1  A: 

Start from the setup/config UI of an existing application that you feel is both simple and usable.

Most tenants/cardinal rules apply to UI in general and fill hundreds and hundreds of pages in UI design and HCI books, so you probably want to just work your way by example for now, while trying to capitalize on existing user experience (habits), i.e. obeying the rule of "least surprise": e.g. if your application is a Windows application, use the Installation Wizard pattern, if it's an ncurses app for a particular flavor of *nix follow the style of that particular OS's actual installation UI, etc.

Cheers, V.

vladr
A: 

You might be interested in the book "Don't Make Me Think," (author's web site) or "About Face 3.0". Both come highly recommended for reading about how to design interfaces.

tvanfosson
+1  A: 

Since you use the term, "seat of your pants," I'm assuming that you don't want to spend too much time on the UI. If you are willing to devote some time to the UI, you may want to look into custom control or UI development that will suit your situation. Like Firefox's Options UI or the .NET project properties in Visual Studio 2008.

If you are looking for something using standard controls, it is probably best to separate out different sections of related items into tabs or some other type of stacking control (i.e. Ribbon control). A good example of the tabbed version would be the Notepad++ Preferences UI. Many other programs use a similar scheme.

bsruth
Well if you think Nodepad++'s config screen is good then I guess I'm pretty well off! One thing they have that I don't is a lot of white space and centering, I think that's probably a good idea.
Peter Turner
Well, for a quick UI, it is better and more usable than "The Dialog": http://www.codinghorror.com/blog/archives/000734.html Something more elegant would be much more ideal though.
bsruth
Wow, that's blunt, I wish he had some advice in that blog post, some of use aren't so lucky as to have "Graphic Designers" who know anything about designing UI. Where do those people live? Probably not Wisconsin.
Peter Turner
Glad to see a fellow Badger on this site.
bsruth
The Krug and Cooper books suggested by tvanfosson are both really good if you want to spend time working on and learning UI. Most of these suggestions are really good, mine was just based on your "seat of the pants" comment.
bsruth
+4  A: 

This is actually a huge topic. I frequently go to the Microsoft UX Guide for reminders on how to do this.

Some basics:

  • Make your app read like a book: left to right, top to bottom
  • Use goal-oriented language instead of technology oriented language
Matt Brunell
+4  A: 

Not a cardinal rule but a great resource:

Apple UI Guidelines (good info for any OS)

EDIT: Re: achieving symmetry - things don't have to be perfectly symmetrical, but you want a feel of balance. Take a step back and get a sense of whether the page or form feels like it's leaning/falling to the left or right.

E.g., with stackoverflow, the main content is to the left, but it's nicely balanced by the extra stuff on the right.

fig
+6  A: 

Here's a cardinal rule you asked for: line up the controls vertically /horizontally and equally space the various related elements. And use correct spelling on your labels!

We've all come across screens where there are misaligned controls (even a couple pixels is noticeable) or misspelling on labels. When this happens to me I can't help but subconsciously look for other mistakes, plus it decreases my confidence in the application I'm using!

Jay Riggs
+2  A: 

Some basic rules for you.

  1. Try to make effective use of whitespace. Don't cram everything together in an effort to get as much stuff on screen as possible. This will make grouped controls more clear and text more legible.

  2. Basic typography. Limit your use of fonts to 1 or 2. Don't use bold too much or it loses its emphasis.

  3. The same goes for colours. Don't use too many, the fewer the better most of the time.

  4. Don't just use icons to save space. Tiny icons with no explanation are useless.

  5. Copy. Not wholesale of course, but if you are not well-versed in UI design yourself, it makes sense to take elements of interfaces you know work and apply them in your own designs.

  6. Be clear about the purpose of the interface. How does it fit within the broader application for example? And what are the specific objectives you are trying to satisfy with it?

  7. Get people to test it for you, early and often. I don't know what setup you are working with, or what kind of organisation you are in, but getting some kind of human feedback on your work will always be helpful, even if you lack the time and expertise to conduct proper usability evaluations.

Sam Murray-Sutton
+2  A: 

I find that paper is my friend. I like to write out a list of objectives the form has to accomplish, and then sketch the form by hand, labeling the parts. Drawing it out lets me get away from making sure it looks perfect and that everything is aligned just right, and lets me focus on making sure that all the components I need are placed, hopefully somewhere logically. It also forces me to lay out the UI twice, so by the time I open my UI designer, I've already designed the form once and you hopefully know what I am doing

rotard
When you say "By the time I open my UI designer" that means you're not a Delphi programmer right? Heh, anyway that's really good advice, I'd write essays like that in college and it would usually save me time proofreading.
Peter Turner
+1  A: 

The best way to get a UI that makes sense is to follow Joel's advice:

Eat your own dog food.

Do it a few times to your own UI, and you'll notice some things you didnt think of intially.

Neil N
Yeah, we're pretty addicted to dog food here, problem is... Dogs like dogfood.
Peter Turner
+1  A: 

I've found that a really good test is getting someone non-technical to use your GUI. Watching someone use it for 5-10mins normally gives me a very good idea about what is/isn't easier to understand.

This series by Joel Spolsky is a pretty good read and Jakob Nielsen's stuff Usability and Web Design is pretty useful.

Specific rules I try and use are:

  • Put items in logical groups
  • Line everything up
  • Use sensible images/icons
  • Spend 5-10 mins thinking through why things are the way there are
  • Only use words that make sense to the user not to you!
Matt Warren
I totally agree about watching people use your stuff, but I'm not sure that all that web design stuff translates to config screens for an enterprise app. Although I have had a rough time trying to figure out how to set up Gmail in the past.
Peter Turner
Yeah you're right the Jakob Nielsen stuff is mostly for web design, but a lot of the same principles apply for enterprise app. You just have to read through it to find the relevant bits, but it is worth it.
Matt Warren