MODULE – I

[10 PERIODS]
Introduction: Importance of user Interface – definition, importance of good design. Benefits of good
design. A brief history of Screen
design.
The graphical user interface – popularity of graphics, the concept of direct manipulation, graphical
system, Characteristics,
Web user – Interface popularity, characteristics- Principles of user interface
----------------------------------------------------------------------------------- ----------------------------------------
INTRODUCTION:
Human–computer interaction (HCI), alternatively man–
machine interaction (MMI) or computer–human
interaction (CHI) is the study of interaction between
people (users) and computers.

• With today's technology and tools, and our motivation

to create really effective and usable interfaces and
screens,

why do we continue to produce systems that are inefficient and confusing or, at worst, just
plain unusable?
Is it because:
1. We don't care?
2. We don't possess common sense?
3. We don't have the time?
4. We still don't know what really makes good design?

DEFINITION
"Human-computer interaction is a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and
with the study of major phenomena surrounding them."

Why HCI Important?

 In the past computers were expensive & used by technical people only
 Now, computers are cheap and used by non-technical people (different backgrounds,
needs, knowledge, skills)
 Computer and software manufacturers have noticed the importance of making
computers "user-friendly": easy to use, save people time, etc.

Goals of HCI

A basic goal of HCI:

 improvetheinteractionsbetweenusersandcomputers
 makingcomputersmoreusableandreceptivetotheuser'sneeds.

A long-termgoalofHCI:
– to design systems that minimize the barrier between the human's cognitive
model of what they want.
 – To accomplish and the computer's understanding of the user's task.

HCI Scope contents

 Use & Context:Find application areas for computers

 Human: Study psychological & physiological aspects
e.g., study how a user learns to use a new product,
study human typing speed
 Computer: Hardware & software offered
e.g., input &output devices,
speed,
interaction styles,
computer graphics
 Development: Design, implementation 86 evaluation

DEFINING THE USER INTERFACE

 User interface, design is a subset of a field of HCI
 HCI is the study,planning, and design of how people & computers work together
So that a person's needs are satisfied in the most effective way.
 HCI designers must consider a variety of factors:
– what people want and expect,physical limitations and abilities people possess,
– how in formation processing systems work,
– what people find enjoyable and attractive.
– Technical characteristics and limitations of the computer hardware and software must
also be considered.

 Theuserinterfaceisto
– The part of a computer and its software that people can see, hear,touch,talk to,or
other wise understand or direct.
The user interface has essentially 2 components:input and output.
  Input:how a person communicates his/her needs to the computer.
– Some common input components are the keyboard, mouse, trackball, one's
finger, and one's voice.
 Output:how the computer conveys the results of its computations and requirements
to the user.
– Today, the most common computer output mechanism is the display screen,
followed by mechanisms that take advantage of a person's auditory
capabilities:voice and sound.

 The use of the human senses of smell and touch output in interface design still
remain largely unexplored.

 Proper interface design will provide a mix of well-designed input and output
mechanisms that satisfy the user's needs, capabilities, and limitations in the most
effective way possible.

 The best interface is one that it not noticed, one that permits the user to focus on the
information and task at hand, not the mechanisms used to present the information
and perform the task.
THE IMPORTANCE OF THE USER INTERFACE
 A well-designed interface and screen is terribly important to our users. It is their
window to view the capabilities of the system.

 It is also the vehicle through which many critical tasks are presented. These tasks
often have a direct impact on an organization's relations with its customers, and its
profitability.

 A screen's layout and appearance affect a person in a variety of ways.

If they are confusing and inefficient, people will have greater difficulty in doing
their jobs and will make more mistakes.

 Poor design may even follow some people away from a system permanently.
It can also lead to aggravation, frustration,and increased stress.
IMPORTANCE OF GOOD DESIGN
 With today's technology and tools, and our motivation to create really effective and usable
interfaces and screens,
why do we continue to produce systems that are inefficient and confusing or, at worst, just
plain unusable? Is it because:
 We don't care?
 We don't possess common sense?
 We don't have the time?
 We still don't know what really makes good design
 A design is said to be good if it consists of a combination of well designed input and output
procedures which fulfils the user's requirements in a successful manner.
 A good design is one which possesses the following features.
• It allows its users to focus on the data and activity.
• It provides data to its users for performing their activities without using any specific
procedures.
 The interaction design means designing interactive products to support people in their
everyday and working lives.
 A good-designed interface is very useful to its users for analyzing the performance of a system.
 It is a component that displays several complex activities given to the system.
 A window's layout and looks does leave an impact on the users.
 If the design is very complex, confusing and not sufficient enough then the persons will face
problems at their work and commit more mistakes.
 Improper designing may develop frustration in people towards the system and they may stop
using it.
 Several health problems may also arise like the people become aggressive, successful when
they do not get what they expect from the system, quickly and accurately
BENEFITS OF GOOD DESIGN
 Good design:
– Screen clarity
– Readability
– Screen less crowded (separate lines)
– 20% more productive
 Poor clarity forced screen users to spend one extra second per screen.
o Almost one additional year would be required to process all screens.
o Twentyextrasecondsinscreenusagetimeaddsanadditional14personyears.

 Thebenefitsofawelldesignedscreenhavealsobeenunderexperimentalscrutinyformany
years.
o Oneresearcher,forexample,attemptedtoimprovescreenclarityandreadabilityby
makingscreensless crowded.
o Separateitems,whichhadbeencombinedonthesamedisplaylinetoconserve
space,were placedonseparate linesinstead.
o Theresultscreen userswereabout20percentmoreproductivewith
thelesscrowdedversion.

 Properformattingofinformationonscreensdoeshaveasignificantpositiveeffectonperfo
rmance.
o Inrecentyears,theproductivitybenefitsofwell-
designedWebpageshavealsobeenscrutinized.

 Trainingcostsareloweredbecausetrainingtimeisreduced.

 supportlinecostsareloweredbecausefewerassistcallsarenecessary.

 Employeesatisfactionisincreasedbecauseaggravationandfrustrationarereduced.

 Ultimately,thatanorganization'scustomersbenefitbecauseoftheimprovedservice
theyreceive.

 Identifyingandresolving problemsduring thedesignand

developmentprocessalsohassignificanteconomicbenefits
 Howmanyscreensare used eachdayin ourtechnologicalworld?
 Howmanyscreensareusedeachdayinyourorganization?Thousands?Millions?
 Imaginethepossiblesavings.Properscreen
designmightalso,ofcourse,lowerthecostsofreplacing"broken"PCs.
A BRIEF HISTORY OF SCREEN DESIGN
 Initially, the cathode ray tube was used in screen designing.
 In the 1970s, IBM launched its 3270 cathode ray tube(CRT) text-based terminal.
 The 3270 was used in large number of ways in offices and companies for good screen
designing.
 During the 1970s less number of guidelineswere available for designing.
 Designing was implemented using hardware and telephone line transmission issues.
 The 1970s screen contained several domains with unclear and unintelligibleheadings.
 The screen was not properly order ed and had a command areathat required an
information to the filled and memorized by the user.
 A reference to a manual was needed for understandingthe unclear messages displayed on
the screen.
 The screens displayed green text on black background, thus restricted to monochrome
 Therefore the screen of the 1970s needed huge amount of toleration and exercise by users
in order to extract the best from the screen.

 In the 1980sa wide variety of design guidelines were launched in the market for
designing screens.
 The appearances of screens were made very clear by arranging and ordering the elements.
 An assistance to the user was provided by giving clear and useful headingsfor the areas
on the screen. Also the commands were listed nicely and were applied by function keys.
 Messages could be easily interpreted but the screen elements were not completely
ordered.
 The screens contained instructions and remindersas prompts for the users.
Certain codes like PR, ST, FU, MD were presented on the screen to help the users in
selection.
 In the 1990s the introduction of graphics contributed a lot in screen designing.
 Along with arranging and ordering the elements, borders were also included to usually
enhance groupings.
 The commands were now handled by buttons and menus rather than function keys.
 Elements had numerous features such as a var-iety of font sizes, styles, line thickness and
colors.
 List-boxes, drop-down combination boxes, spin-boxes were used for making entries.
 The users did not need to memorize anything as everything was listed in the controls
provided on the screen.
 The codes were removed from the screen and new listing control was inscribed.
THE GRAPHICAL USER INTERFACE
 A user interfaceis a collection of techniques and mechanisms to interact with something.
 In a graphical interface, the primary interaction mechanism is a pointing device of some
kind.
 This device is the electronic equivalent to the human hand.
What the user interacts with is a collection of elements referred to as objects.
Properties of objects
 They can be seen, heard, touched, or otherwise perceived.
 Objects are always visibleto the user and are used to perform tasks.
 They are interacted with as entities independent of all other objects.
 People perform operations, called actions, on objects.
 The operations include accessing and modifying objects by pointing,
selectingandmanipulating.Allobjectshavestandardresultingbehaviours
THEPOPULARITYOFGRAPHICS
 The design and the user interface are changed fundamentally with the invasion of
graphics.
 The older text-based screen possessed a one-dimensional, text-oriented, form- like
quality were replaced by a three-dimensional appearance graphical screen.
 Information floated in windows, small rectangular boxes seemed to rise above the
background plane

Features of graphical system are

o Windows could also float above other windows.
o Controls appeared to rise above the screen and move when activated.
o Lines appeared to be etched into the screen.
o Information could appear, and disappear, as needed, and in some cases text could be
replaced by graphical images called icons
o These icons could represent objects or actions.
o Menus “pop up” on the screen.
o In the screen body. selection fields such as radio buttons, check boxes. list boxes.
o drop-down menus and palettes coexisted with the reliable old text entry field.
o Pointing devices like mouse, joystick were used to choose objects and screen actions.
o These features have increased the graphics popularity the graphical interface is also
known as WIMP interface: windows, icons, menus, and pointers.
o the graphical screens cause persons information processing capabilities very much
effective in comparison with various methods.
o graphic minimizes the content recording and reframing on screen.
o it decreases the load on memory.
o graphical screens allow quicker content movement between computers and users due
to visual content.
GRAPHICAL SYSTEMS ADVANTAGES AND DISADVANTAGES
 Reducethememoryrequirements.
 Moreeffectiveuseofone's information.
 Dramaticallyreducesystemlearningrequirements.
 Experienceindicatesthatfor manypeopletheyhavedoneallthesethings.
ADVANTAGES
 Symbolsrecognizedfasterthantext  Immediatefeedback
 Fasterlearning  Predictablesystemresponses
 Fasteruseandproblemsolving  Easilyreversibleactions
 Easierremembering  Lessanxietyconcerning use
 Morenatural  Moreattractive
 Exploitsvisual/spatialcues  Mayconsumelessspace
 Fostersmoreconcretethinking  Replacesnationallanguages
 Providescontext  Easilyaugmentedwithtextdisplays
 Fewererrors  Smoothtransitionfromcommandlanguag
 Increasedfeelingofcontrol esystem
DISADVANTAGES
 Greaterdesigncomplexity.  Window manipulationrequirements
 Learningstillnecessary  Productionlimitations
 Replacesnationallanguages  Fewtestediconsexist
 Easilyaugmentedwithtextdisplays  Inefficientfortouchtypists
 Smoothtransitionfromcommandlan  Inefficient forexpertusers
guagesystem  Notalwaysthepreferred
 Lackofexperimentally- styleofinteraction
deriveddesignguidelines  Notalways fasteststyleofinteraction
 useapointingdevicemayalsohavetob  Increased chancesofclutterand
elearned confusion
 Workingdomainisthepresent  Mayconsumemorescreenspace
 Humancomprehensionlimitations  Hardwarelimitations
THE CONCEPT OF DIRECT MANIPULATION
Definition
Direct manipulation is an interaction style in which users act ondisplayed objects in the UIand
can be acted upon via physical,reversible, incremental actions that receive immediatefeedback.

The action of using your fingertips to zoom in and out of the image is an exampleof a direct-
manipulation interaction.
Another classicexample is dragging a file from a folder to another one in order tomove it.

Direct manipulation to describe an interface design strategy

consisting of three important components:
1) The objects
2) Action upon these objects
3) Immediately visible results of these actions
Principles of Direct Manipulation
1.Continuous representations of the objects and actions ofinterest with meaningful visual
metaphor
2. Physical actions or presses of labeled buttons, instead of complex syntax
3 Rapid. incremental. reversible actions whose effects onthe objects of interest are visible
immediately.
Direct manipulation systems have the following characteristics
i. The system is portrayed as an extension of the real world.
ii. Continuous visibility of objects and actions.
iii. Actions are rapid and incremental with visible display of results.
iv. Incremental actions are easily reversible.

Drawbacks:
– Some times the operations may be difficult to conceptualize.
– Capability of system may be limited
– Difficult for people to learn & remember all the necessary operations and actions
The system is portrayed as an extension of the real world (User Interacts with
artificial World):
 It is assumed that a person is already familiar with the objects and actions in his or her
environment of interest.
 The system simply replicates them and portrays them on a different medium or the screen.
 A person has the power to access and modify these objects, among which are windows.
 A person is allowed to work in a familiar environment and in a familiar way, focusing on
the data, not the application and tools.
 The physical organization of the system, which most often is unfamiliar, is hidden from
view and is not a distraction.
Example for direct manipulation:
 On a mobile phone you can pinch out to zoom into an image and pinch in to zoom out. The
action of using your fingertips to zoom in and out of the image is an example of a direct-
manipulation interaction.
 Another classic example is dragging a file from a folder to another one in order to move it.

DIRECTMANIPULATIONSYSTEMS:EARLIER
o The concept of direct manipulation actually preceded the first
graphicalsystem.Theearliestfull-screentexteditorspossessedsimilarcharacteristics.

o Screens of text resembling a piece of paper on one's desk could be created(extension of

real world) and then reviewed in their entirety (continuousvisibility).

o Editingorrestructuringcouldbeeasilyaccomplished(throughrapidincrementalactions)andthe
resultsimmediatelyseen.

o Actions could be reversed when necessary. It took the advent of

graphicalsystemstocrystallize thedirectmanipulationconcept,however.
 THE CONCEPT OF INDIRECT MANIPULATION
o Indirect manipulation substitutes words and text, such as pull-down or pop-up menus,
for symbols and substitutes typing for pointing.
Most window systems are a combination of both direct manipulation and indirect
manipulation.
o In practice, direct manipulation of all screen objects and actions may not be feasible
because of the following:
– i. The operation may be difficult to conceptualize in graphical system.
– ii. The graphics capability of the system may be limited.
– iii. The amount of space available for placing manipulation controls in the window
border may be limited.
– iv. It may be difficult for people to learn and remember all the necessary operations and
actions.

CHARACTERISTICSOFTHEGRAPHICALUSERINTERFACE
Sophisticated Visual Presentation
 Visual presentation is the visual aspect of the interface. It is what people see on the
screen. The sophistication of a graphical system permits displaying lines, including
drawings and icons.
It also permits the sizes and styles.displaying of a variety of character fonts, including
different
 The meaningful interface elements visually presented to the user in agraphical system
include windows (primary, secondary, or dialog boxes),menus (menu bar, pull down,
pop-up, cascading), icons to represent objects such as programs or files, assorted screen-
based controls (text boxes, list boxes, combination boxes, settings, scroll bars, and
buttons), and a mouse pointer and cursor.
The objective is to reflect visually on the screen the real world of the user as
realistically, meaningfully, simply, and clearly as possible.
Pick-and-Click Interaction
 To identify a proposed action is commonly referred to as pick, the signal to perform an
action as click.
 The primary mechanism for performing this pick-and-click is most often the mouse and
its buttons and the secondary mechanism for performing these selection actions is the
keyboard.

Restricted Set of Interface Options

 This concept fostered the acronym WYSIWYG(what you see is, what you get).
 The array of alternatives available to the user is what is presented on the screen or what
may be retrieved through what is presented on the screen, nothing less, and nothing
more.
Visualization
 Visualization is a cognitive process that allows people to understand information that is
difficult to perceive, because it is either too voluminous or too abstract.
 The goal is not necessarily to reproduce a realistic graphical image, but to produce one
that conveys the most relevant information. Effective visualizations can facilitate mental
insights, increase productivity, and foster faster and more accurate use of data.
Object Orientation
 A graphical system consists of objects and actions. Objects are what people see on the
screen as a single unit.
 Objects can be composed of sub objects.
For example, an object may be a document and its sub objects may be a paragraph,
sentence, word, and letter.
 Objects are divided into three meaningful classes as Data objects , which present
information, container objects to hold other objects and Device objects represent
physical objects in the real world.
 Objects can exist within the context of other objects, and one object may affect the way
another object appears or behaves. These relationships are called collections,
constraints, composites, and containers.
 Properties or Attributes of Objects : Properties are the unique characteristics of an
object. Properties help to describe an object and can be changed by users.
 Actions: People take actions on objects. They manipulate objects in specific ways
(commands) or modify the properties of objects (property or attribute specification).
 The following is a typical property/attribute specification sequence:
o The user selects an object—for example, several words of text.
o The user then selects an action to apply to that object, such as the action BOLD.
o The selected words are made bold and will remain bold until selected and
changed again.
Use of Recognition Memory
 Continuous visibility of objects and actions encourages to eliminate ― out of sight, out
of mind‖ problem.
Concurrent Performance of Functions
 Graphic systems may do two or more things at one time. Multiple programs may run
simultaneously.
 It may process background tasks (cooperative multitasking) or pre-emptive
multitasking.
 Data may also be transferred between programs . It may be temporarily stored on a
clipboard for later transfer or be automatically swapped between programs.

THEWEBUSERINTERFACE
Accept input and provide output by generating web pages which are transmitted via the
Internet and viewed by the user using a web browser program
The expansion of the World Wide Web since the early 1990s has been truly amazing.
Oncesimply a communication medium for scientists and researchers, its many and
pervasivetentacleshavespreaddeeplyintobusinesses, organizations,andhomesaroundtheworld.

Web interface design is essentially the design of navigation and the presentation of
informationItisaboutcontent,notdata..

Proper interface design is largely a matter of properly balancing the structure and
relationships of menus, content, and other linked documents or graphics.

The design goal is to build a hierarchy of menus and pages that feels natural, is well
structured, is easy to use, and is truthful.

The Web is a navigation environment where people move between pages of information, not
an application environment. It is also a graphically rich environment.

Web interface design is difficult for a number of reasons.

 First, its underlying design language, HTML.
 Next, browser navigation retreated to the pre-GUI era.
 Web interface design is also more difficult because
 the main issues concern information architecture and task flow, neither of which is
easy to standardize.
 the availability of the various types of multimedia, and the desire of many designers to
use something simply because it is available
 users are ill defined, and the user’s tools so variable in nature.
THE POPULARITY OF THE WEB
Whiletheintroductionofthegraphicaluserinterfacerevolutionizedtheuserinterface,theWebhas
revolutionizedcomputing.

Itallowsmillionsofpeoplescatteredacrosstheglobetocommunicate,accessinformation,publish,an
dbeheard.

•It allowspeople tocontrolmuchofthe displayandtherendering ofWebpages.

Aspectssuchastypographyandcolorscanbechanged,graphicsturnedoff,anddecisions made
whether or not to transmit certain data over non secure channels
orwhethertoacceptorrefusecookies.

•Webusagehasreflectedthispopularity.ThenumberofInternethostshasrisendramatically:

•In1984,hostsonline exceeded1,000;
•in1987,10,000;
•in1989,100,000,
•in1990,300,000;
 •in1992hostsexceeded onemillion.

•Commercialization of the Internet saw even greater expansion of the growth rate. In1993,
Internet traffic was expanding at a 341,634 percent annual growth rate. In
1996,therewerenearly 10millionhosts onlineand40million connectedpeople(PBSTimeline).

•User controlhashad somedecideddisadvantagesforsomeWebsiteownersaswell.

•Usershavebecomemuchmorediscerningaboutgooddesign.
•Slow download times, confusing navigation, confusing page organization,
disturbinganimation, or other undesirable site features often results in user abandonment
of thesiteforothers withamore agreeableinterface.
•Peoplearequicktovotewiththeirmouse, andthesewarningsshouldnotgounheeded.
GUIVERSUSWEBPAGEDESIGN
GUI and Web interface design do have similarities. Both are software designs, they areused by
people, they are interactive, they are heavily visual experiences presentedthroughscreens,andtheyare
composedofmanysimilarcomponents. Significantdifferencesdoexist.

Content Graphical User Interface Web Page Design

Devices User hardware variations User hardware variations enormous.
limited.,Screens appear exactly as Screen appearance influenced by
specified. hardware being used.
User Focus Data and applications. Information and navigation.
Data /Information Typically created and used by known Full of unknown content. Source not
and trusted sources., Typically placed always trusted. Often not placed onto
into system by users or known people the web by users or known people and
and organizations. Typically organized in organizations. Highly variable
a meaningful fashion. A notion of private organization. Privacy often suspects.
and shared data exists.
User Tasks Install, configure, personalize, start, use, Link to a site, browse or read pages, fill
and upgrade programs., Open, use and out forms, register for services,
close data files. participate in transactions, download
and save things. Movement between
pages and sites very rapid.
User’sConceptual, Controlled and constrained by program. Infinite and generally unorganized.
Space
Presentation Elements Windows, menus, controls, data, Two components browse and page.
toolbars, messages, and so on., Many Within page, any combination of text,
transient, dynamically appearing and images, audio, video and animation.
disappearing., Presented as specified by May not be presented as specified by
the designer., Generally standardized by the designer dependent on browser,
toolkits and style guides. monitor, and user specifications. Little
standardization.
Navigation Through menus, lists, trees, dialogs, and Through links, bookmarks, and typed
wizards. Not a strong and visible URLs. Significant and highly visible
concept. concept.
Context Enables maintenance of a better sense of Poorer maintenance of a sense of
context. Restricted navigation paths. context. Unlimited navigation paths.
Interaction Interactions such as clicking menu Basic interaction is a single click. This
choices, pressing buttons, selectinglist can cause extreme changes in context,
choices, and cut/copy/paste occur within which may not be noticed.
context of active program.
Response Time Nearly instantaneous. Quite variable depending on
transmission speeds, page content, and
 so on. Long time can upset the user.
Visual Style Typically prescribed and constrained by Fosters a more artistic, individual and
toolkit. Visual creativity allowed but unrestricted presentation style.
difficult. Little significant Complicated by differing browser and
personalization. display capabilities and bandwidth
limitations. Limited personalization
available.
System Capability Unlimited capability proportional to Limited by constraints imposed by the
sophistication of hardware and software. hardware, browser, software, client
support.
Task Efficiency Targeted to a specific audience with Limited by browser and network
specific tasks. Only limited by the capabilities. Often intended for anyone
amount of programming undertaken to and everyone.
support it.
Consistency Major objective exists within and across Sites tend to establish their own
applications. Universal consistency in identity. Frequently standards set
GUI products generally created through within a site. Frequent ignoring of GUI
toolkits and design guidelines. guidelines for identical components
especially controls.
PRINCIPLES OF USER INTERFACE DESIGN
• An interface must really be just an extension of a person. This means that the systemand its
software must reflect a person's capabilities and respond to his or her specificneeds.
• Itshouldbeuseful,accomplishingsomebusinessobjectivesfasterandmoreefficientlythantheprevio
uslyusedmethodortooldid.
• Itmustalsobeeasytolearn,forpeoplewanttodo,notlearntodo.
• Finally, the system must be easy and fun to use, evoking a sense of pleasure
andaccomplishmentnottediumandfrustration.
• Theinterfaceitselfshouldserveasbothaconnectorandaseparator
• a connector in that it ties the user to the power of the computer, and a separator in
thatitminimizesthepossibilityofthe participantsdamagingone another.
We will begin with the first set of published principles, those for the Xerox STAR.

Principles for the Xerox STAR

The illusion of manipulable objects:Displayed objects that are selectable and manipulable
must be created. A design challenge is to invent a set of displayable objects that are
represented meaningfully and appropriately for the intended application. It must be clear that
these objects can be selected,
Visual order and viewer focus:Effective visual contrast between various components of the
screen is used to achieve this goal. Animation is also used to draw attention, as is sound.
Feedback must also be provided to the user.
Revealed structure:The distance between one’s intention and the effect must be minimized.
The relationship between intention and effect must be tightened and made as apparent as
possible to the user.
Consistency:Consistency aids learning. Consistency is provided in such areas as element
location, grammar, font shapes, styles, and sizes, selection indicators, and contrast and
emphasis techniques.
Appropriate effect or emotional impact:The interface must provide the appropriate emotional
effect for the product and its market. Is it a corporate, professional, and secure business
system? Should it reflect the fantasy, wizardry, and bad puns of computer games?
A match with the medium:The interface must also reflect the capabilities of the device on
which it will be displayed. Quality of screen images will be greatly affected by a device’s
resolution and color-generation capabilities.

General Principles
The design goals in creating a user interface are described below. They are fundamental to the design
and implementation of all effective interfaces, including GUI and Web ones. These principles are
general characteristics of the interface, and they apply to all aspects.
Aesthetically Pleasing
Provide visual appeal by following these presentation and graphic design principles:
· Provide meaningful contrast between screen elements.
· Create groupings.
· Align screen elements and groups.
· Provide three-dimensional representation.
· Use colour and graphics effectively and simply.
Clarity
 User interface must be clear in visual appearance,concept & wording.
 Visual elements should be understandable & related to real world concepts &
functions.Analogies should be simple.
 Interface words & text should be simple,unambiguous,& free of computer jargon.
Compatibility
Provide compatibility with the following:
· The user
· The task and job
· The product
Adopt the user’s perspective.
Comprehensibility
A system should be easily learned and understood. A user should know the following:
· What to look at · Where to do it
· What to do · Why to do it
· When to do it · How to do it
The flow of actions, responses, visual presentations, and information should be in a sensible order that
is easy to recollect and place in context.
Configurability
Permit easy personalization, configuration, and reconfiguration of settings.
· Enhances a sense of control.
· Encourages an active role in understanding.
Consistency
 Consistency is important because it can reduce requirements for human learning by allowing
skills learned in one situation to be transferred to another like it.
 Any new system must impose some learning requirements on its uses but avoid unnecessary
activity.
Control
 The user must control the interaction & never be interrupted for errors.
 Actions should result from explicit user requests & be performed quickly.
Directness
Provide direct ways to accomplish tasks.
· Available alternatives should be visible.
· The effect of actions on objects should be visible
Efficiency
 Transition between various systems controls should flow easily & freely.
 Navigation paths should be as short as possible.
 Eye movement through a screen should be obvious & sequential.
Familiarity
 Build into the interface concepts,terminology,workflows & spatial arrangements already
familiar to the user.
 Familiar concepts enable people to get started & become productive quickly.
Flexibility
A system must be sensitive to the differing needs of its users, enabling a level and type of
performance based upon:
· Each user’s knowledge and skills. · Each user’s habits.
· Each user’s experience. · The conditions at that moment.
· Each user’s personal preference.
Forgiveness
Tolerate and forgive common and unavoidable human errors.
· Prevent errors from occurring whenever possible.
· Protect against possible catastrophic errors.
Predictability
 All actions should lead to results the user expects.Current operations should provide clues as to
what will come next.
 Design consistency enhances predictability.
Recovery
 A person should be able to retract any action by issuing an undo command.
 The goal is stability or returning easily to the right track when a wrong track has been taken.
 Recovery should be obvious,automatic,easy & natural to perform.
Responsiveness
 A user must be responded quickly.
 Substantial or more informative feedback is most important for the casual or new system user.
 All requests must be acknowledged in some way

Simplicity
Provide as simple an interface as possible.
Five ways to provide simplicity:
· Use progressive disclosure, hiding things until they are needed.
Present common and necessary functions first.
Prominently feature important functions.
Hide more sophisticated and less frequently used functions.
· Provide defaults.
· Minimize screen alignment points.
· Make common actions simple at the expense of uncommon actions being made harder.
· Provide uniformity and consistency.
Transparency
 Permit the user to focus on the task or job without concerning the mechanics of the interface.
 Working & reminders of workings inside the computer should be invisible to the user.
Trade-Offs
 Final design will be based on a series of trade-offs balancing often-conflicting design
principles.
 People’s requirements always take precedence over technical requirements.
Application:
Online Banking system
Aadhar application
Railway Reservation