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.
- Don't position and size elements yourself - use a layout manager.
- Avoid "eye candy". First create an attractive, convenient user interface. If you want your interface to do something special, build the plain version first; it might actually turn out to be the best.
- Don't set component or background colors. This is almost always a mistake.
- Avoid dynamic layout changes.
Don't add/remove elements to/from a layout after the GUI has already
been displayed. If you want to display a different components,
use a
JTabbedPane
orCardLayout
.
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
- Sun's Java Look and Feel Design Guidelines (java.sun.com/products/jlf/ed2/book/ is an excellent place to start.
- AskTog - www.asktog.com
- User Interface Design for Programmers - Joel Spolsky. There is a more complete book, but much of it can be read online at http://www.joelonsoftware.com/uibook/chapters/fog0000000057.html
Books
- GUI Bloopers
- Designing Visual Interfaces - Mullet and Sano