Exercise: Graphical Redesign

Identify the graphical layout problems in these two screens. Redesign them.
Use the principles of:

grids	navigational cues	visual consistency	imagery
relationships between screen elements	legibility and readability	economy

Screen 1:

Screen 2

A Possible Solution

Step 1. Maintain visual consistency with GUI style

components include title bar, window controls, dialog boxes...
The locations of some of these components are shown in the grid in the next step.

Step 2. Construct grid, including navigational layout + white space + legibility

The image now shows the annotated grid, including where generic components will go (such as title bars, and so on). Some of these other generic components may have their own grids.

Step 3. Determine relationships, navigational structure
Step 4. Economize by collapsing (two windows into one, trim text)

The image shows the example we started with the clarifies the navigational structure into the grid, and that tries to economize by collapsing some of the elements together (i.e., two windows were collapsed into this single one)
We also trimmed some text (e.g., the sound dialog)

Step 5. Evaluate by reconsidering actual examples

Here is the actual example with the grid removed

Step 6. Economize, check imagery

We removed the image icon from the upper left, which allowed us to shring the window. At this point, we can decide which we prefer.