Does Your GUI Clack or Rattle?
By seapegasus on May 16, 2006
OK, here is my brainstorming about what Karsten Lentsch said at JavaOne about Swing GUI Design Dos and Don'ts. He had a weird kind of dry humor that made the audience laugh while he kept a straight face. Oh and I will also sum up what he said about the NetBeans GUI builder Matisse in this context.
- The GUI mustn't distract the viewer's attention. Visual representations are like poetry: Be aware that people intuitively try to assign meaning to every constellation of color, position, shade, blinking, movement, weight, size, alignment, they encounter: So don't send a message you don't want to send! (E.g. the fact that components are not aligned can be interpreted as that they don't belong together.)
- Fancy is not cool: Avoid sprinkling the GUI with blotches of saturated colors, noisy backgrounds, large or bold fonts, or fonts of different families (unless you want the reader to focus on only this odd-one-out, which you ususaly don't). Everything that strays from the standard is in the spotlight. If suddenly everything is in the spotlight, the users is blinded and stumbles around without guidance.
You usually only want the workflow to be in the spotlight -- This is e.g. why headlines are few, short, bold, large, and in a different font.
- Be consistent with icons, theme, colors - also with respect to the OS. Don't swap/move positions of items if you have multiple dialogues or menues (e.g. don't swap "save" and "delete".) "Muscle memory" makes people associate positions with actions, so don't waste their time by forcing them to regather this information for every screen. Think of walking up a staircase where every step has a different height, you'd hate that!
- If the component/label doesn't add essential information, skip it! Can the user tell in one glance what the tool does? Make a Squint test to find out what stands out first. Be clear (remove noise), concise (nobody is ever going to read that). A GUI is not a 3-minute pop song, it's a tool in your hand that you use to accomplish something: If a button doesn't do what expected, you'll want your money back.
- One of Lentsch's metaphors was, if you brush over the interface with your fingernails, it should clack, not rattle. So no unnesessary lines: No double lines/borders between components, no nested titleborders, no gratuitous pseudo-3D effects. Use white space to group components instead of separator lines. Subtle gradient backgrounds can help to counterbalance other components' overhead weight.
- Symmetry, Grid & Alignment: Align components that have something in common! The user will thank you for this additional information. Align textfields to the fontbaselines. All fields should have the same size and spacing -- unless you want to convey the message that textfields of certain lengths are meant for contents of certain lengths (phone numbers, ZIP codes). In the latter case, constrain yourself to max. 3 sizes (small, medium, large textfields.)
If the component's content is known and fixed in size, use static component sizes; dock or split windows only if necessary. Use a few aesthetic aspect ratios when spreading the components.
In Matisse he saw a great step in the right direction (e.g. it nicely aligns to fontbaselines), but he pointed out some weak spots: Matisse lacks guided alignment of components in multiple panels/windows/components, and it allows aligned components to have different heights. (When I'm back I need to try whether InterfaceBuilder can do that?) So don't count on a tool to do all the thinking for you.
So why are all these aesthetics relevant? Isn't the tool's function way more important? Unfortunately, humans tend to interpret good looks as health, and balanced GUI design as clear bugfree programming... Just flip the coin: If the GUI looks brittle, confused, clumsy, careless, users will have prejudice against it: "What is this klutz tool going to do with my precious data?" Oops, just lost a customer.
I'm well aware there are "ugly" but popular applications, but these often merely lack professional graphics, while their layout is intuitively clear and easy to use (and that counts).