Java Notes

User Interface Design

Emergence of design concerns. We use GUIs, but don't think much about their design until we have to build our own. At first we're happy to get something working. Soon we notice that our GUIs are often unattractive or difficult to understand and use. Paying attention to just a few factors can yield major improvements.

Some of the most important factors are listed below. There are references for those who want to go further.

GUI design tips

Grid design
Empty space - borders and gaps

Creating window borders and gaps between components makes more attractive appearance.

  • No borders. Windows with large areas for display (eg, a browser), or large working areas (eg, IDE, word processor, photo editor) typically have no window borders because the user wants to be able to use the as much of the screen space as possible.
  • Borders. Windows that are unlikely to be maximized typically have a border. Components which are directly against the edge of a window often produce an uncomfortable feeling. Dialog boxes almost always use borders. The size of a border typically is 10-12 pixels.
What happens if the window is stretched
Text in labels, buttons, etc.
  • Labels - Sentence capitalization, left align, append colon (:).
  • Buttons - Book capitalization.
  • Title bar - Book capitalization.

What not to do

Avoiding mistakes is as important as using good practices.

The observant designer

You see GUIs all the time. Start paying attention to their borders, gaps, layouts, ... and you'll soon develop a good sense for what works and what doesn't.

Links

Books