Lecture Topics in HCI, by Saul Greenberg
Back to:	Graphical Screen Design

Exercise: Graphical Redesign

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

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.