Graphic User Interfaces (GUIs) I

Christian Rodríguez Bustos

Edited by Juan Mendivelso
Object Oriented Programming

Graphic User Interfaces (GUIs)

 Agenda

2. Introduction to
1. Motivation User Interfaces
Theories

3. GUI principles
and trends

Graphic User Interfaces (GUIs)

1. Motivation

1.1 What are GUIs?

1.2 Why is important to make beautiful GUIs?

Graphic User Interfaces (GUIs)

1.1 What are GUIs?

Graphic User Interfaces (GUIs)

UI is the part of the system that you see, hear and
feel

Users do not see

internal structure of
software systems

Graphic User Interfaces (GUIs)

UI is the part of the system that you see, hear and
feel

For common users, systems

are what they see, hear and
feel.

Graphic User Interfaces (GUIs)

1.2 Why is important to make
beautiful GUIs?

Graphic User Interfaces (GUIs)

 Someone will desired it if

It works
rightly

$$$$
It looks
beautiful

Graphic User Interfaces (GUIs)

Sometimes products are
desired and bought only
because they look
beautiful

Graphic User Interfaces (GUIs)

 Remember

Look
beautiful

Good User
Interfaces
should

Graphic User Interfaces (GUIs)

2. Introduction to User Interfaces
Theories
2.1 Introduction to Color Theory
2.2 Introduction to Usability
2.3 Mockups and Sketches

Graphic User Interfaces (GUIs)

2.1 Introduction to Color Theory

Graphic User Interfaces (GUIs)

Introduction to Color Theory

Graphic User Interfaces (GUIs)

Introduction to Color Theory

Graphic User Interfaces (GUIs)

Introduction to Color Theory

Graphic User Interfaces (GUIs)

Color theory - Colors affect us

Colors affect us
in numerous
ways, both
mentally and
physically.

Graphic User Interfaces (GUIs)

 Color theory - Colors affect us

Color Wheel
P Primary T Tertiary
P
T T

S
S

Colors affect us
T
in numerous T
ways, both
mentally and
P physically. P

T T
S
S Secondary

Graphic User Interfaces (GUIs)

Color theory - Colors affect us

Warm colors are vivid

and energetic, and tend
to advance in space.

Cool colors give an

impression of calm,
and create a soothing
impression.
White, black and gray
are considered to be
neutral.

Graphic User Interfaces (GUIs)

Warm colors are vivid and
energetic, and tend to
advance in space.
Cool colors give an impression of calm,
and create a soothing impression.
 Red: Passion, Love, Anger Yellow: Happiness, Hope, Deceit

Orange: Energy, Happiness, Vitality Purple: Creativity, Royalty, Wealth

Green: New Beginnings, Abundance, Nature Brown: Nature, Wholesomeness, Dependability

Blue: Calm, Responsible, Sadness Black: Mystery, Elegance, Evil

White: Purity, Cleanliness, Virtue Tan or Beige: Conservative, Piety, Dull

Cream or Ivory: Calm, Elegant, Purity Gray: Moody, Conservative, Formality

Color Harmonies - Color schemes

Split-
Complementary Complementary
color scheme color scheme

Rectangle
Analogous color (tetradic) color
scheme scheme

Triadic color Square color

scheme scheme

Graphic User Interfaces (GUIs)

Color Harmonies - Color schemes

Complementary color scheme

Graphic User Interfaces (GUIs)

Color Harmonies - Color schemes

Split-Complementary color scheme

Graphic User Interfaces (GUIs)

Color Harmonies - Color schemes

Analogous color scheme

Graphic User Interfaces (GUIs)

Color Harmonies - Color schemes

Rectangle (tetradic) color scheme

Graphic User Interfaces (GUIs)

¿¿¿¿¿¿¿¿ WTF ??????????

¿
?

Graphic User Interfaces (GUIs)

Colors and games characters

Graphic User Interfaces (GUIs)

Colors and games playfulness

Graphic User Interfaces (GUIs)

Colors and games environments

Graphic User Interfaces (GUIs)

2.2 Introduction to Usability

Graphic User Interfaces (GUIs)

 Usability

Graphic User Interfaces (GUIs)

 Usability is the ease of use

Fit for use (or functionality). Ease of learning.

• The system can support the • How easy is the system to learn
tasks that the user has in real for various groups of users?
life.

Task efficiency. Ease of remembering.

• How efficient is it for the frequent • How easy is it to remember for
user? the occasional user?

Subjective satisfaction. Understandability

• How satisfied is the user with the • How easy is it to understand
system? what the system does?

Graphic User Interfaces (GUIs)

Usability is hard to measure

Graphic User Interfaces (GUIs)

Usability is the ease of use

Usability is hard to measure,

but is a success factor
nowadays

Graphic User Interfaces (GUIs)

 Systems continuously evolve to be more usable

1998

Source: http://www.archive.org/

Graphic User Interfaces (GUIs)

 Systems continuously evolve to be more usable

1999

Source: http://www.archive.org/

Graphic User Interfaces (GUIs)

 Systems continuously evolve to be more usable

2006

Source: http://www.archive.org/

Graphic User Interfaces (GUIs)

 Systems continuously evolve to be more usable

2009

Source: http://www.archive.org/

Graphic User Interfaces (GUIs)

 Systems continuously evolve to be more usable

2011

Source: http://www.archive.org/

Graphic User Interfaces (GUIs)

 Remember

Look
Be usable
beautiful

Good User
Interfaces
should

Graphic User Interfaces (GUIs)

2.3 Mockups and Sketches

Graphic User Interfaces (GUIs)

User understanding is a hard task

Graphic User Interfaces (GUIs)

 Mockups and sketches

We can “approximate” the user needs creating mockups

and sketches

Graphic User Interfaces (GUIs)

Mockups and sketches

Mockups and sketches are

optimal tools for understand
user’s needs

Graphic User Interfaces (GUIs)

There are free sketching and prototyping tools

http://pencil.evolus.vn

http://balsamiq.com/

Graphic User Interfaces (GUIs)

 Remember

Be
usable
Satisfy
Look
user’s
beautiful
needs

Good User
Interfaces
should

Graphic User Interfaces (GUIs)

3. Principles Of Effective UI Designs

Graphic User Interfaces (GUIs)

How do users think?

Users don’t
read, they scan.

Graphic User Interfaces (GUIs)

 Don’t make users think

Be obvious and self-explanatory

Graphic User Interfaces (GUIs)

 Manage to focus users’ attention

The human eye is a highly non-

linear device, and users can
instantly recognize edges,
patterns and motions.

Graphic User Interfaces (GUIs)

Make use of effective writing

 use short and

concise phrases

 use scannable
layout

 use language
correctly

Graphic User Interfaces (GUIs)

 Design for Consistency

Be consistent along the system

Graphic User Interfaces (GUIs)

Use shortcuts to facilitate usability

Graphic User Interfaces (GUIs)

Be visual, use representative icons or images

Graphic User Interfaces (GUIs)

Do not overload users with too much controls

Graphic User Interfaces (GUIs)

 Use modals messages to show important
messages

Use modals messages to show

important messages, to force an input
by user or to select an option.

Graphic User Interfaces (GUIs)

Group common tasks

Graphic User Interfaces (GUIs)

Keep it simple and elegant

Graphic User Interfaces (GUIs)

 Remember

Satisfy
Be
user’s
usable
needs

Follow
Look basic UI
beautiful Design
Good User principles
Interfaces
should

Graphic User Interfaces (GUIs)

Follow UI
trends
Touch
Descriptive
screens
icons

Vivid color schemes

Social
content

Big Buttons

Graphic User Interfaces (GUIs)

 Design resources

http://www.iconarchive.com/

http://www.smashingmagazine.com/

http://www.iconspedia.com/

Graphic User Interfaces (GUIs)

 Remember

Satisfy
user’s
needs Follow
basic UI
Be usable
Design
principles

Good
Look User Follow
beautiful Interfaces trends
should

Graphic User Interfaces (GUIs)

 Remember

Satisfy
user’s
needs Follow
basic UI
Be usable
Design
principles

Good
Look User Follow
beautiful Interfaces trends
should

Happy User
Graphic User Interfaces (GUIs)
 References

Color theory for designers http://www.smashingmagazine.com/2010/01/28/color-theory-

for-designers-part-1-the-meaning-of-color/

Color Theory http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

Principles of Good GUI Design

http://www.classicsys.com/css06/cfm/article.cfm?articleid=20

User Interface Design Tips, Techniques, and Principles

http://www.ambysoft.com/essays/userInterfaceDesign.html

Game And Swatch – Color Theory For Game Designers Part 1

http://howtonotsuckatgamedesign.com/?p=1669

10 Principles Of Effective Web Design

http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-
effective-web-design/

Graphic User Interfaces (GUIs)