DEFINING FORMA strategic and analyticalprocess to visual interface design

CREATED BY: MIKE ROY, APRIL 1, 2009

Building on the work ofAlan Cooper, Robert Reimann, and David Cronin

OK, LET ’SBUILD SOMETHING

TOTAL POSSIBLE

ELEMENTS

ELEMENTS TO BE

INCLUDED

WITHIN THE DESIGN

IDENTIFYING

FUNCTIONAL

ELEMENTS

IDENTIFYING

DATA ELEMENTS

IDENTIFYING

HIER ARCHY

4

5

6

3

1

2

ESTABLISHING

HIER ARCHY

THROUGH POSITION

1

2

3

4

5

6

ADJUSTING SIZE AND POSITION

GROUPING REL ATED FUNCTIONS

1

2

3

DATA ELEMENTS

FUNCTIONAL ELEMENTS

ESTABLISHING A BOUNDARY

BET WEEN INSIDE AND OUTSIDE THE INTERFACE

ADJUSTING THE SHAPE IN REL ATION TO ITS CONTENTS

VALUE IS ADJUSTED,

FIGURE-GROUND REL ATIONSHIPS COMPARED

FUNCTIONAL ELEMENTS

GROUPED BY A

L ARGER SHAPE OF

A CONTR ASTING VALUE

SHAPE AND POSITION

ARE CHANGED

REL ATIVE SIZES ARE CHANGED

FIGURE-GROUND REL ATIONSHIPS ARE ADJUSTED.. .

FIGURE-GROUND REL ATIONSHIPS ARE ADJUSTED.. .

FIGURE-GROUND REL ATIONSHIPS ARE ADJUSTED.. .

SYMBOLS ARE ADDED TO CONTROLS

GROUPING AND POSITIONS INVESTIGATED

GROUPING, POSITIONS, AND SIZE ADJUSTED

VALUE OF CONTROLS ARE ADJUSTED

FIGURE-GROUND REL ATIONSHIP

ADJUSTED ON SECONDARY CONTROL

TEX TURE ADDED TO SECONDARY CONTROL

AND SHAPE OF SLIDER TR ACK IS ADJUSTED

SHAPE OF CONTAINER ELEMENTS ADJUSTED

Jurass Finish First

Quality Control

1:15 –4:15

DATA ELEMENT SHAPES

ARE REPL ACED BY ACTUAL CONTENT

Jurass Finish First

Quality Control

1:15 –4:15

REMAINING DATA ELEMENT SHAPE IS REFINED

AND VALUES ARE ADJUSTED

Jurass Finish First

Quality Control

1:15 –4:15

TEX TURE AND VALUES OF THE INTERFACE ARE REFINED

TO SUGGEST LIGHT SOURCE AND REINFORCE MANUAL AFFORDANCES

Jurass Finish First

Quality Control

1:15 –4:15

VALUE AND TEX TURE OF TERTIARY CONTROLS ARE

ADJUSTED, AND THE INTERFACE SURFACE COLOR IS ADJUSTED

TO BE CONSISTENT WITH THE SUGGESTED LIGHT SOURCE

Jurass Finish First

Quality Control

1:15 –4:15

HUE OF TERTIARY CONTROLS ARE

ADJUSTED TO GROUP AND SEPAR ATE THEM

FROM THE PRIMARY CONTROLS

Jurass Finish First

Quality Control

1:15 –4:15

VALUE AND INTENSIT Y OF TERTIARY CONTROLS ARE

ADJUSTED TO PUSH THEM FURTHER INTO THE BACKGROUND

Jurass Finish First

Quality Control

1:15 –4:15

HUE OF THE DATA ELEMENT CONTAINER

IS ADJUSTED TO FURTHER SUGGEST IT IS A “SCREEN”

Jurass Finish First

Quality Control

1:15 –4:15

THE VALUE OF THE DATA ELEMENT CONTAINER

IS ADJUSTED TO REMAIN CONSISTENT WITH THE LIGHT SOURCE

Jurass Finish First

Quality Control

1:15 –4:15

A DARKER BACKGROUND SHAPE IS ADDED,

AND ITS TEX TURE IS ADJUSTED TO FURTHER REINFORCE

THE PERCEPTION OF A LIGHT SOURCE, AND PHYSIC AL SPACE

Jurass Finish First

Quality Control

1:15 –4:15

AN ADDITIONAL FUNCTIONAL ELEMENT IS ADDED

TO THE DATA ELEMENT CONTAINER

Jurass Finish First

Quality Control

1:15 –4:15

THE END.For more information on some of the concepts presented here,check out About Face 3: The Essentials of Interaction DesignBy: Alan Cooper, Robert Reimann, and David Cronin