Exercise: Graphical Redesign
Identify the graphical layout problems in these two screens.
Use the principles of:
relationships between screen elements
legibility and readability
A Possible Solution
Step 1. Maintain visual consistency with GUI style
- components include title bar, window controls, dialog
- 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.