Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Graphic Design
The look & feel portion of an interface
What someone initially encounters
Graphic Design Conveys an impression, mood
Design Philosophies
Graphic Design My personal preferences:
Design Philosophies Economy of visual elements
Graphic Design Principles Less is more
Economy of Visual Elements Clean, well organized
Coding Techniques
Typography Graphic Design Principles
Fonts
Color Metaphor Alignment
Icon Design Clarity Proximity
Consistency Contrast

Graph Design 1/20 Graph Design 2/20

Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Metaphor Clarity
Every element in an interface should
Tying presentation and visual elements to some have a reason for being there
familiar relevant items
Make that reason clear too!
e.g., Desktop metaphor
If youre building an interface for a grocery
Less is more
application, maybe mimic a person walking White space
through a store with a cart Leads the eye
Example Overdone? Provides symmetry and balance
through its use
Strengthens impact of message
Allows eye to rest between
elements of activity
Used to promote simplicity,
elegance, class, refinement

www.worldwidestore.com/Mainlvl.htm

Graph Design 3/20 Graph Design 4/20

1
 Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Example Consistency
In layout, color, images, icons, typography,
text,
Within screen, across screens
Stay within metaphor everywhere
Platform may have a style guide
Follow it!

Example
www.santafean.com

www.schwab.com Clear, clean

appearance
Home page Content page 1 Content page 2
Opinion?

Graph Design 5/20 Graph Design 6/20

Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Alignment Grid Example

Western world
Start from top left

Allows eye to parse display more easily

Grids
(Hidden) horizontal and vertical lines to
help locate window components
Align related things
Group items logically Alignment
Left, center, or right
Minimize number of controls, reduce
clutter Here is Here is Here is
some some some
Grids - use them
new text new text new text

Choose one, use it everywhere

Novices often center things
- No definition, calm, very formal

Graph Design 7/20 Graph Design 8/20

2
 Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Proximity Contrast
Pulls you in
Guides your eyes around the interface
Supports skimming
Items close together appear to have a
relationship Take advantage of contrast to add focus or to energize an
interface
Distance implies no relationship Can be used to distinguish active control

Time Can be used to set off most important item

Allow it to dominate
Time:
Ask yourself what is the most important item in the
interface, highlight it
Use geometry to help sequencing
Name Name
Name
Addr1
Addr1 Addr1
Important
Addr2 Addr2 element
Addr2
City City City
State State
State

Phone Phone
Phone
Fax
Fax Fax

www.delta.com
Graph Design 9/20 Graph Design 10/20

Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Economy of Visual Typography

Elements
Characters and symbols should be easily
noticeable and distinguishable
Less is more Avoid heavy use of all upper case
Minimize borders and heavy outlining, section Studies have found that mixed case promotes
boundaries (use whitespace) faster reading

Reduce clutter
Minimize the number of controls HOW MUCH FUN IS IT How much fun is it
TO READ ALL THIS TEXT to read all this text
WHEN ITS ALL IN when its all in
capitals and you
Coding Techniques CAPITALS AND YOU
NEVER GET A REST never get a rest

Blinking
Good for grabbing attention, but use very Readability
sparingly How easy is it to read a lot of text
Reverse video, bold Legibility
Good for making something stand out How easy is it to recognize a short burst of text
Typeface = font
Again, use sparingly
(not really, but close enough)

Graph Design 11/20 Graph Design 12/20

3
 Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Typography Fonts
Serif Decorative
Times, Bookman Comic Sans

Script
Sans serif
Tahoma, Arial

Monospaced
Serif font - readability Courier, Lucida
Sans serif font - legibility
Guidelines
(both are variable spaced)
Use serif for long, extended text; sans serif for
headlines
Monospace font Use 1-2 fonts/typefaces (3 max)
Use of normal, italics, bold is OK
Never use bold, italics, capitals for large
sections of text
Use 1-3 point sizes max
Be careful of text to background color
issues

Graph Design 13/20 Graph Design 14/20

Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Font Control Color

We see the world via a reflective color model
Light strikes a surface and is reflected to our
Which do you prefer? eyes--Properties of surface dictate color
Printers
CRAFTS AND GAMES
ARTS FESTIVAL Colors on display follow the emitted model
OF ATLANTA AND DECATUR
SEPTEMBER 19-24
On monitors, typically RGB scheme
COME AND ENJOY
0-255 value each red, green, blue

R: 170 G:43 B: 211

Use it for a purpose, not to just add some color in

Crafts and Games
Arts Festival
Of Atlanta and Decatur Color Attributes
September 19- Hue
24
native color, pigment
Come and Enjoy!
Saturation
relative purity, brightness, or intensity of a color
Value
lightness or darkness of a color
Applies lots of these principles
Graph Design 15/20 Graph Design 16/20

4
 Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Color Color
Color Guidelines
Color Guidelines Color is good for supporting search
Display color images on black Do not use color without some other
background redundant cue
Choose bright foreground color Color-blindness
(white, bold green,) Monochrome monitors
Avoid brown and green as background Redundant coding enhances
colors performance
Be sure fg colors contrast in both Be consistent with color associations
brightness and hue with bg colors from jobs and cultures
Use color sparingly--Design in b/w Limit coding to 8 distinct colors (4
then add color where appropriate better)
Avoid using saturated blues for text or
Use color to draw attention, small, thin lines
communicate organization, to indicate Use color on b/w or gray, or b/w on
status, to establish relationships color
Avoid using color in non-task related To express difference, use high
ways contrast colors (and vice versa)

Graph Design 17/20 Graph Design 18/20

Interaksi Manusia dan Komputer Interaksi Manusia dan Komputer

Color Icon Design

Color Suites
Designers often pick a palette of 4 or 5 colors Design task
Represent object or action in a familiar and recognizable
Professional manner
Limit number of different icons
Monochromatic Make icon stand out from background
Ensure that singly selected icon is clearly visible when
surrounded by unselected ones
Southwestern
Make each icon distinctive
Make icons harmonious members of icon family
Color Associations Avoid excessive detail

Red Yellow
hot, warning, happy, caution, joy
aggression, love Brown
Pink warm, fall, dirt, earth
female, cute, Green
cotton candy lush, pastoral, envy
What do each of these signify?
Orange Purple
autumn, warm, royal, sophisticated, Almost always want to accompany your icons
Halloween Barney by a text label

Graph Design 19/20 Graph Design 20/20