Top Banner
DEFINING FORM A strategic and analytical process to visual interface design CREATED BY: MIKE ROY, APRIL 1, 2009 Building on the work of Alan Cooper, Robert Reimann, and David Cronin
36
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Defining Form

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

Page 2: Defining Form

OK, LET ’SBUILD SOMETHING

Page 3: Defining Form

TOTAL POSSIBLE

ELEMENTS

Page 4: Defining Form

ELEMENTS TO BE

INCLUDED

WITHIN THE DESIGN

Page 5: Defining Form

IDENTIFYING

FUNCTIONAL

ELEMENTS

IDENTIFYING

DATA ELEMENTS

Page 6: Defining Form

IDENTIFYING

HIER ARCHY

4

5

6

3

1

2

Page 7: Defining Form

ESTABLISHING

HIER ARCHY

THROUGH POSITION

1

2

3

4

5

6

Page 8: Defining Form

ADJUSTING SIZE AND POSITION

GROUPING REL ATED FUNCTIONS

1

2

3

DATA ELEMENTS

FUNCTIONAL ELEMENTS

Page 9: Defining Form

ESTABLISHING A BOUNDARY

BET WEEN INSIDE AND OUTSIDE THE INTERFACE

Page 10: Defining Form

ADJUSTING THE SHAPE IN REL ATION TO ITS CONTENTS

Page 11: Defining Form

VALUE IS ADJUSTED,

FIGURE-GROUND REL ATIONSHIPS COMPARED

Page 12: Defining Form

FUNCTIONAL ELEMENTS

GROUPED BY A

L ARGER SHAPE OF

A CONTR ASTING VALUE

Page 13: Defining Form

SHAPE AND POSITION

ARE CHANGED

Page 14: Defining Form

REL ATIVE SIZES ARE CHANGED

Page 15: Defining Form

FIGURE-GROUND REL ATIONSHIPS ARE ADJUSTED.. .

Page 16: Defining Form

FIGURE-GROUND REL ATIONSHIPS ARE ADJUSTED.. .

Page 17: Defining Form

FIGURE-GROUND REL ATIONSHIPS ARE ADJUSTED.. .

Page 18: Defining Form

SYMBOLS ARE ADDED TO CONTROLS

Page 19: Defining Form

GROUPING AND POSITIONS INVESTIGATED

Page 20: Defining Form

GROUPING, POSITIONS, AND SIZE ADJUSTED

Page 21: Defining Form

VALUE OF CONTROLS ARE ADJUSTED

Page 22: Defining Form

FIGURE-GROUND REL ATIONSHIP

ADJUSTED ON SECONDARY CONTROL

Page 23: Defining Form

TEX TURE ADDED TO SECONDARY CONTROL

AND SHAPE OF SLIDER TR ACK IS ADJUSTED

Page 24: Defining Form

SHAPE OF CONTAINER ELEMENTS ADJUSTED

Page 25: Defining Form

Jurass Finish First

Quality Control

1:15 –4:15

DATA ELEMENT SHAPES

ARE REPL ACED BY ACTUAL CONTENT

Page 26: Defining Form

Jurass Finish First

Quality Control

1:15 –4:15

REMAINING DATA ELEMENT SHAPE IS REFINED

AND VALUES ARE ADJUSTED

Page 27: Defining Form

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

Page 28: Defining Form

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

Page 29: Defining Form

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

Page 30: Defining Form

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

Page 31: Defining Form

Jurass Finish First

Quality Control

1:15 –4:15

HUE OF THE DATA ELEMENT CONTAINER

IS ADJUSTED TO FURTHER SUGGEST IT IS A “SCREEN”

Page 32: Defining Form

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

Page 33: Defining Form

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

Page 34: Defining Form

Jurass Finish First

Quality Control

1:15 –4:15

AN ADDITIONAL FUNCTIONAL ELEMENT IS ADDED

TO THE DATA ELEMENT CONTAINER

Page 35: Defining Form

Jurass Finish First

Quality Control

1:15 –4:15

Page 36: Defining Form

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