Page Design

CMPT 281

Announcements

Outline

• Graphic design• Components of visual languages• Design factors in interfaces• Techniques:

– Clustering– Grids– Visual economy

• Graphical redesign exercise

Graphic design

• Must account for:– a comprehensible mental image– an appropriate organization of data, functions,

and tasks– quality appearance characteristics

• the “look”

– effective interaction sequencing• the “feel”

Components of visual language

• Layout– formats, proportions, and grids

• Typography– typefaces and typesetting

• Imagery– signs, icons, symbols– concrete to abstract

• Sequencing– how the interaction unfolds

Components of visual language

• Visual identity– unique appearance

• Animation– dynamics of display

• Color and Texture– convey complex information and

pictorial reality

Design factors for interfaces

• Visual organization• Visual consistency• Navigational cues

Visual organization

Visual organization

• Which elements to put on the screen?• Clustering of widgets or data• Use of white space and alignment

Visual organization

• http://en.wikipedia.org/wiki/Gestalt_psychology

Visual organization

• What components must be in the display?– what are the necessary visual affordances– frequent actions

• use direct manipulation for core activities• use buttons, forms, toolbar, or special tools for frequent and

immediate actions• use menus or property window for less frequent actions• use secondary windows for rare actions

• How are components related?– organize related items as “chunks”

• What are familiar and expected idioms?– cross-application look and feel

Visual organization

Visual organization

• Link related elements, separate unrelated– create clusters based on related functionality– use white (negative) space– use alignment– provides implicit structure to the information

Visual organization

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

ü

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

û

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Visual consistency

Visual consistency

• internal consistency– same conventions and rules for all elements of the

GUI (unless a good reason not to)– application-specific grids encourage consistency

• external consistency– follow platform and interface style conventions– use platform and widget-specific grids– deviate only when it provides a clear benefit to

user

Visual consistency

Warning

mmmm mmmmmm

Okay

!

Help

mmmm mmmmmm mmm

Okay

?

Tip of the day: Monday, Mar 12

mmmm mmmmmm

Dismiss

ü û

Visual consistency (?)

http://www.mikeroweworks.com/

Navigational cues

Navigational cues

• Where should people look first?– provide an initial focus– direct attention to important, then secondary

items– assist in navigation through material– order should follow a user’s conceptual model of

sequences– people read top-bottom, left-right

Navigational cues

ü û

Navigational cues

• How can window navigation be reduced?– avoid long paths– avoid deep hierarchies

Navigational cues

http://www.shmarketing.co.uk/system-for-success.php

Techniques

• Clustering• Grids• Visual economy

Clustering

Clustering

Grids

• Window components organized on horizontal and vertical lines– aligns related components

• Organization– contrast to bring out dominant elements– grouping of elements by proximity– show organizational structure– alignment

• Consistency– location– format– repetition– organization

Grids

Grids

Window to widget

spacing

Widget to widget

spacing

No Ok

Message text in Arial 14, left adjusted

Standard icon set

Fixed components

Format of variable contents

No Ok

Message text in Arial 14, left adjusted

Standard icon set

No Ok

Do you really want to delete the file “myfile.doc” from the folder “junk”?

?

ü Ok

Cannot move the file “myfile.doc” to the folder “junk” because the disc is full.

!

û

Apply

Cancel

The file was destroyed

Two-level Hierarchy•indentation•contrast

Grouping by white space

Alignment connects visual elements in a sequence

Logic of organizationalflow

Haphazard layoutfrom mullet & sano

Repairing a Haphazard layoutfrom mullet &sano

Redesigning a layout from mullet & sano

Visual economy

• minimize the number of controls– include only those that are necessary

• eliminate or move others to secondary windows

– minimize clutter • so information is not hidden

Visual economy

NNNN

MMMM

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

MMMM

NNNN

ü û

Repairing excessive display densityfrom mullet & sano

Visual economy

• Tabs– excellent means for encapsulating related items– but can be overdone!

Graphical redesign exercise

• Redesign a window using a grid• Create a grid emphasising:

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

Slide Show Options

Timer

Wait for clickTimerSeconds:______

Sound

Play soundChoose sound file...

Options

Loop modeRandom overlayFit in window

Show menu bar

CancelSort

OK

Sort by...

Done Cancel

Caption

Direction

AscendingDescending

A possible solution

• Step 1. Maintain visual consistency– locate standard components including title bar, window

controls, dialog boxes... – create the grid:

• organizes elements into rows and columns• also shows where generic components will appear

– these generic components may have their own grids

• Step 2. Determine visual qualities– navigational layout– white space– legibility– typography

The grid

Slide Show OptionsTitle bar - see other grid

Image in empty column

First order labels: - 10pt Bold Arial

Radio / checkboxes - standard widget set

Second order controls - 10pt Normal Arial

Spacing between groups

Dialog box controls - see other grid

Using the grid

Browse…None

Slide Show Options

Timer Wait for clickWait ___ seconds

Sound

Options

Sort

Cancel

Browse…

Loop modeRandom overlayFit in windowShow menu bar

OK

None

AscendingDescending

• Step 3. Determine relationships and navigational structure – map navigational

structure onto the grid

• Step 4. Economize– collapse two windows

into one – trim sound dialog

Finished version

Browse…None

Slide Show Options

Timer Wait for clickWait ___ seconds

Sound

Options

Sort

Cancel

Browse…

Loop modeRandom overlayFit in windowShow menu bar

OK

None

AscendingDescending

Browse…None

Slide Show Options

Timer Wait for clickWait ___ seconds

Sound

Options

Sort

Cancel

Browse…

Loop modeRandom overlayFit in windowShow menu bar

OK

None

AscendingDescending

Slide Show Options

Timer

Wait for clickTimerSeconds:______

Sound

Play soundChoose sound file...

Options

Loop modeRandom overlayFit in window

Show menu bar

CancelSort

OK

Sort by...

Done Cancel

Caption

Direction

AscendingDescending

Further economization

Browse…None

Slide Show Options

Timer Wait for clickWait ___ seconds

Sound

Options

Sort

Cancel

Browse…

Loop modeRandom overlayFit in windowShow menu bar

OK

None

AscendingDescending

• Step 5: can we remove other elements?– can remove image– compare two versions

Reading

• Text:– Pattern group I: Designing Effective Page Layouts

• Pages 631-657