Clase 15 - Interfaz Gráfica I.pdf

Graphic User Interfaces (GUIs) I Christian Rodríguez Bustos Edited by Juan Mendivelso Object Oriented Programming

Graphic User Interfaces (GUIs)

Agenda

1. Motivation

2. Introduction to 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 P

Color Wheel

Primary

T

P T

T

S

T

P

S

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

T S

S

Secondary Graphic User Interfaces (GUIs)

T

P

Tertiary

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

Complementary color scheme

SplitComplementary color scheme

Analogous color scheme

Rectangle (tetradic) color scheme

Triadic color scheme

Square color 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 tasks that the user has in real life.

• How easy is the system to learn for various groups of users?

Task efficiency.

Ease of remembering.

• How efficient is it for the frequent user?

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

Subjective satisfaction.

Understandability

• How satisfied is the user with the system?

• How easy is it to understand 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 beautiful

Be usable

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 user’s needs

Look beautiful 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 nonlinear 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

Be usable

Look beautiful

Satisfy user’s needs

Good User Interfaces should

Graphic User Interfaces (GUIs)

Follow basic UI Design principles

Follow UI trends Descriptive icons

Touch screens

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

Be usable

Look beautiful

Good User Interfaces should

Graphic User Interfaces (GUIs)

Follow basic UI Design principles

Follow trends

Remember

Satisfy user’s needs

Be usable

Look beautiful

Good User Interfaces should Happy User Graphic User Interfaces (GUIs)

Follow basic UI Design principles

Follow trends

References

Color theory for designers http://www.smashingmagazine.com/2010/01/28/color-theoryfor-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-ofeffective-web-design/

Graphic User Interfaces (GUIs)