NPTEL Course on
Human Computer Interaction
- An Introduction
Dr. Pradeep Yammiyavar Dr. Samit Bhattacharya
Professor, Assistant Professor,
Dept. of Design, Dept. of Computer Science
IIT Guwahati, and Engineering,
Assam, India IIT Guwahati, Assam, India
Indian Institute of Technology Guwahati
Module 2:
Interactive System Design
Lecture 3:
GUI Design & Aesthetics
Dr. Pradeep Yammiyavar
GUI: Graphic User Interface
The interface through which a user operates a program or an application or
an device
Consists of individual or group of ICONS,
buttons, scroll bars, menus, widgets, boxes,
status lamps, labels, instructions, visuals etc -
arranged on the screen in a pattern that is
visually pleasing as well as ergonomically
useable.
Very important and critical component in
facilitating user interaction with the software &
hardware inside the device / product.
GUI determines the Usability Index
of the product as a whole. Gives
the product an identity, personality
& character.
Requirements of a GUI
Should be
FUNCTIONAL:
Useable - Easy to operate ; locate what is required & where it is required
on the screen; and do what is expected of it – without need for learning or
training
AESTHETIC:
Pleasing to the eye ; Highest Visual Quality; Identifiable; Distinct ;
Recognizable, Recallable
COMMUNICABLE:
Express what it represents; how it is to be operated; Unambiguous;
Meaningful; Culturally & Contextually compatible
In GUI Design Aesthetics is about
Sensory + Empirical + Taste + Judgment
The Philosophical argument of aesthetics shown below is
incorporated into Interfaces through Graphic designing
Simplicity + Infinity + Eternity + Serenity = Beauty
Aesthetics is both Art as well as Mathematics.
It is both rational as well as emotional at the same time.
Aesthetics is a medium for User Experience
Appearance 2
Technology
Visual Quality Appearance Build Quality
Visual Quality
DESIGN
3
Interaction
Use Quality 1
Aesthetics (Look & Feel) +
Communication + Use ability
= Total UI Experience
35
Role of Aesthetics –
often misunderstood & underestimated
• Aesthetics is not mere beautification.
• It has as much to do with FUNCTION as with beauty
• Aesthetics is not the surface characteristics of a GUI It
is not decoration. It is not cosmetic
• A ‘good looking’ GUI needs also to function
to communicate
to express
to instruct
to perform
While the judgment of Aesthetics is subjective
the construction / configuration is not.
There are elements & principles of good
aesthetic configuration
ELEMENTS
Line, Shape, Space, Color, Form, Texture, Light
PRINCIPLES
Balance, Emphasis, Rhythm, Unity, Contrast,
Movement
Principles of design in Visuals
Design is composed of manipulating the physical
characteristics of size, shape, texture, proportion,
scale, mass and color.
Order & composition is the arrangement and organization
of elements in relation to each other.
Form follows function is a design approach wherein
the form (overall layout / composition/geometric shape)
of a GUI is determined by what function it does.
Ex: An arrow has a Form having a sharp angular face at one end
expressing the function of pointing to a direction.
An orderly arrangement of
Composition elements using the principles of
design
Principles of Design
Grammar of the visual language.
Rules for composing with the elements
• The Principles of Design can • Balance
be thought of as what we do • Unity
with the elements of design
to express and communicate • Proportion
a predetermined message • Harmony
of Usability, Reliability, & • Direction
Functionality in a harmonious • Rhythm
• Symmetry
fashion. • Pattern
• Emphasis
• Contrast
Notice that many of the terms on the right figure • Movement
are also used in Mathematics.
Design, therefore has both, Aesthetics and Mathematics, underlying it.
Description of some of the Principles
Rhythm & Movement
• Movement is the path the
viewers eye takes through
the artwork, often to focal
areas. Animation is often
used.
• Rhythm is created when one
or more elements of design
are used repeatedly to create
a feeling of organized
movement / direction.
Emphasis
This is the part of the design that
catches the viewer’s attention. Usually
the Designer will make one area stand
out by using the elements of design in
a contrasting way. There will be a play
with different sizes, colors, textures,
shapes etc.
Contrast
• Differences and Diversities.
• Highlighting similarities
High contrast Low contrast
Unity is an overall “sameness”
Unity throughout a screen.. How
harmoniously all the elements
blend together.
Example: Windows 8 GUI
.
Balance Visual balance. Are the various elements visually
balanced in terms of their Size, shape, weight, and
placement. Can the rhythmic order be visually
discernable ?
1.618
Proportion
Size relationships found within an
object or design. Also a comparison in The Golden Rectangle
terms of ratio of size, shape, etc with 1 ratio
neighboring elements. 1: 1.618
Example see proportions of various
buttons within Windows 8 screen
Proportion & Rule of thirds division of a screen
Proportion refers to the size relationship of
visual elements to each other and to the
whole picture. One of the reasons
proportion is often considered important in
composition is that viewers respond to it
emotionally.
• Colour is a vast subject of both Physics and Fine Arts.
COLOUR • Graphic Designers use metrics to specify colours.
Hue: refers to the names of the primary colours. (red, green and blue).
Value: lightness and darkness of the hue –
Shade: amount of white or black added.
Intensity: the purity or saturation of the colour
Monochromatic : use of one colour where only the value of the colour changes
Analogous colours: colours that are adjacent to each other on the colour wheel,
e.g. yellow and green are analogous.
Limitations of Technology
The Visible spectrum consists of
billions of colours, a computer
monitor can display millions, a high
quality printer is only capable of
producing thousands, and older
computer systems may be limited to
216 cross-platform colours.
The Psychology of Colours
WARM colours include:
yellows, red and orange we
associate these with blood,
sun and fire.
The Psychology of Colours
COOL colours include: violet, blue and green
because of our association with sky, water.
Colour Theme
Choices of colour
given to the User.
Simple Pick & Chose
does not confuse the
user with 100s of
colours to chose from.
A set of
colours are
carefully
decided upon
by a designer
which form a ‘
theme’ .
All screens will
have visual
elements from
the theme.
Graphic Design Principles: Example: mobile screen
The Clustering Principle:
Organizing the screen into visually separate blocks of similar controls,
preferably with a title for each block. Modern WIMP (Windows-Icons-Menus-
Pointer) systems are a natural expression of the Clustering Principle
Cluster 1
Grid lines
Cluster 2
Information on a screen which is not catagorised into some order ( right
hand screen in the above figure) can be confusing. GRIDS are therefore
used to not only to align & please aesthetically but also catagorise UI
elements according to functions .
Type size and font, for
example: the
Reduced Clutter Principle
would suggest that one or
two type styles are
sufficient.
Poor Font readability
Avoid fancy fonts totally
Safe Fonts
• Arial, Helvetica, sans-serif Regional Fonts still have unresolved
• Courier New, Courier, mono problems when used in low resolution
• Verdana, Arial, Helvetica, sans-serif & small displays screens.
• Geneva, Arial, Helvetica, sans-serif
ಜನ�ೕ ಜನ�ಭೂ�ಶ� ಸ��ಾ�ದ� ಗ�ೕಯ�ೕ ಜನ�ೕ ಜನ�ಭೂ�ಶ� ಸ��ಾ�ದ� ಗ�ೕಯ�ೕ
जननी जन्मभू�मश्च स्वगार्द�प गर�यसी जननी जन्मभू�मश्च स्वगार्द�प गर�यसी
ஜநந� ஜந்ம�மிஶ்ச ஜநந� ஜந்ம�மிஶ்ச
ஸ்வர்காதப� க�ய� ஸ்வர்காதப� க�ய�
Weight of font matters జన� జన్మభ��శ్చ స్వ�ాగ్ద�ి గ��య�ీ
ജനനീ ജന്മഭൂമിശ്ച
BOLD – some times , results in സ�ര്ഗാദപി ഗരീയസീ
poor smudged readability on જનની જન્મ� ૂિમ� સ્વગાર્ દિપ ગર�યસી
mobile screens - even on
AMOLED ਜਨਨੀ ਜਨ੍ਮਭੂਿਮਸ਼� ਸ�ਰ�ਾਦਿਪ ਗਰੀਯਸੀ
Screen resolution & aesthetics
Caption bar 26 pixels 25 to 30% of the
area is taken by
Address bar 23 pixels
buttons, etc.
Therefore only
about 229 X 255
Content is effectively
229 X 255 pixels available from a
320 X240
display.
Scroll bar 11 pixels
Menu bar 26 pixels
Some unsatisfactory GUIs.
Too many similar elements.
No colour contrast.
Monochrome colour scheme
is visually too heavy. No
differentiation . No identity.
Functional confusion. Poor
communication.
Difficult to use. Error prone.
No colour contrast.
Too many data fields Icon to depict ‘
undistinguishable. security’ has two
Use of same colour humans . Not
(orange) to for two representational &
different tasks. meaningful.
Confused verbal statement label.
The two buttons offer a dead end. By
executing the action the user is not
visually informed as to what to do.
Case Study 1 : Windows GUI
Aesthetic and minimalist design:
The system is not cluttered with excessive use of icons and buttons.
Tabs are used to separate different functionalities. A simple
rectangle composition arrangement is used to model information.
Recognition rather than recall: The use of colour schemes
and icons act to denote functionalities . Example ‘ Head
Phone icon”. This design feature promotes recognition of
rather than recall of system functionalities
Case Study 2 : Icon Design
Two simple icons communicating an activity in progress.
Both the icons are graphically simple, do the function
of informing the status & are not complicated to
understand.
They use gradient in colorus (monochrome) to depict
time progress through animation. The circular form
express the abstract concept of time.
The state of ‘please wait’ is expressed in a pleasant
peaceful unhurried manner.
In terms of construction, the icons do not take
expensive screen real estate; need very less
computing memory; are amiable to both pixel as well
as vector graphics.
The icon has achieved this by employing aesthetic
principles in their form, colour, shape, configuration,
motion & composition – all of them put together
holistically resulting in a simple ‘design’.
Graphic Design – Website Layout
HCI-Designers besides
being Engineers are
Artists in the sense that
they have to become
sensitive to the visual
language and master
the use of visual
elements in accordance Too much of order. Rhythmic spacing.
Different shapes create
to Principles Not Interesting
interesting lay out.
Graphic Design Case Study 3
A case study of a
Visual balance, Hierarchy
website’s visual quality
The principles of
Cognitive Science –
Gestalt laws govern
aesthetics.
Aesthetics
Ordered Grid -
Rows and Columns
Good composition –
Position with respect to area
Visual Balance –
Symmetry / Asymmetry
Low visual noise –
No clutter or crowding The U I -interface of a product is not a canvas for
Color & Graphics – art nor a surface for advertising.
Simple plain light reflective /absorbing colors
with no fancy labels.
• Aesthetics is a specilised
discipline.
• It has as much science &
technology in it as much as Art.
• It is qualitative as well as
quantitative judgment.
• Creative Designers are best
equipped to decide on aesthetics
as they are trained professionally.
Assignment 1
From any computer or mobile screen pick one GUI which you do
not like & one more GUI which you like.
Analyze their constituting graphic / visual elements by applying
principles of aesthetics and find out if you can attribute any aesthetic
reasons for your ‘like’ & ‘dislike’. Keep functional & usability aspects
out of the judgment for the time being.
Assignment 2
Sketch as many alternatives as you can visualise for the two icons that
depict activity progress happening in the background .
Conduct a quick survey from amongst your friends as to which of the
icon concepts, you have come up with, are ‘liked’ by them.
You can ask them to rate each design for 10 points and empirically find
out the one that is most likely to be accepted in terms of aesthetics &
function representation.
You can also ask them to point out one visual element from your design
that if changed will improve your design.
