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)