Chapter 1

Figure 10.3
I got this by going to my To do list, tapping on the Edit menu item and then tapping on the
Preferences item in the menu pane.
One thing is immediately striking about this dialog: all its controls are in a vertical list. Labels
are right justified and controls are left justified so that controls and labels are centered neatly
on a vertical line. This is a key design decision. It makes many things easier for both user
and developer:
� Navigation from field to field is easy: just use the pointer, or the up and down
navigation keys.
� Dialog layout is easy: the only difficulty is establishing the width of the controls. In UIQ,
for example, all dialogs are exactly 208 or 240 pixels wide (depending on the
configuration), no matter how wide their controls.
� The width of the dialog limits the width of a control: if the Alarm sound field had a very
long item in its choice list, then this would be truncated and the last three displayable
characters would be replaced by an ellipsis to make it fit.
� Because layout is so easy, you don't have to specify the pixel coordinates of each field
in the dialog definition resource. In consequence, there is no need for a GUI-based
resource builder.
This dialog only has three controls. You can have more, but you need to make sure that they
don't overflow the screen vertically. In UIQ, for example, the screen height is 320 pixels, and
any dialog that has more than 8 controls becomes a scrollable dialog, with scroll bars
automatically added on the right hand side. In UIQ, and in many UIs, it is not a good style to
use scrollable dialogs. This has an important impact on dialog design:
� If you need more lines, you can use multipage dialogs (see below).
� Don't create monster dialogs that offer a bewildering set of choices to the user.
Experiment with a number of alternatives before committing a design to code – and
even then, be prepared for further change.
In UIQ, focus is not indicated except for text fields and numeric fields. For text fields, the
flashing cursor indicates the location of focus. For numeric fields, a highlighted background
indicates the location of focus.