User Interface Design - Module 1 Introduction

MODULE 1
USER INTERFACE-INTRODUCTION
Referred Text Book:
The Essential Guide to User Interface Design (Second Edition)
Author: Wilbert O. Galitz
Subject Code:15CS832
USER INTERFACE DESIGN
VTU UNIVERSITY
BNMIT, Bengaluru

1. WHAT IS USER INTERFACE ?
The user interface is the part of software program that allow users to interact with computer
(system) and carry out their task.
Definition
▪User interface design is a subset of human-computer interaction (HCI). Human-computer
interaction is the study, planning, and design of how people and computers work together so that
a person’s needs are satisfied in the most effective way.
▪The user interface is the part of a computer and its software that people can see, hear, touch, talk
to, or otherwise understand or direct.

2. THE IMPORTANCE OF GOOD DESIGN
Even with today’s technology and tools, designers still ends up producing systems that are
inefficient and confusing or, at worst, just plain unusable? Is it because:
1. They don’t care?
2. They don’t possess common sense?
3. They don’t have the time?
4. They still don’t know what really makes good design?

A well-designed interface and screen are important to our users in following way:
1. To many users, User Interface is a system, where the different components of the
product are made visible to them.
2. It also acts as a vehicle to many users, 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.
3. 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.
4. Poor design may even chase some people away from a system permanently. It can also
lead to aggravation, frustration, and increased stress.

3. THE BENEFITS OF GOOD DESIGN
1. Good design reduces software complexity which makes the software easier to
understand and modify. This facilitates rapid development during a project and
provides the foundation for future maintenance and continued system evaluation.
2. It enables reuse. Good design makes it easier to reduce code.
3. It improves software quality. Good design exposes defects and makes it easier to test
the software.
4. Good design reduces the complexity of the system which reduces the security issues.
5. Benefits of Good Designed Screens are:
 Reduces decision-making time.
 Screen users of the modified screen completes the transactions in 25 % less time and with 25
% fewer errors then those who use the original screens.
 Screen users are about 20% more productive.
 One graphical window redesigned to be more effective would save a company about $20,000
during its first year of use.

6. Training costs are lowered because training time is reduced
7. Support line costs are lowered because fewer assist calls are necessary
8. Employee satisfaction is increased because aggravation and frustration are
reduced.
9. Another benefit is, ultimately, that an organization’s customers will be benefited
as they will be receiving the improved services.
10. Identifying and resolving problems during the design and development process
gives significant economic benefits.

4. THE GRAPHICAL USER INTERFACE
4.1 GUI Definition
• A Graphical user interface is a collection of techniques and mechanisms to interact with
different elements referred as objects.
• These objects can be seen, heard, touched, or otherwise perceived. Objects are always
visible to the user and are used to perform tasks. They are interacted with as entities
independent of all other objects.

4.2 POPULARITY OF GRAPHICS
• Graphics revolutionized design and the user interface. Graphics assumes three
dimensional look whereas text based system assumes one dimensional look.
• Information can appear or disappear through floating windows. Navigation and
commands can be done through menu or pull downs or screen controls.
• Increased computer power and the vast improvement in the display enable the user’s
actions to be reacted to quickly, dynamically, and meaningfully.
• If properly used graphics can reduce mental and perceptional load and increases
information transfer between men and machine because of visual comparisons and
simplification of the perception of structure.

Direct manipulation is an interaction
style in which the objects of interest in
the UI are visible and can be acted upon
via physical, reversible, incremental
actions that receive immediate feedback.
Example: On a mobile phone
you can pinch out to zoom into
an image and pinch in to zoom
out.
Direct Manipulation
of Graphical SYSTEM
Indirect Manipulation
of Graphical SYSTEM
Indirect manipulation substitutes words
and texts such as pull-down or pop-up
menus.
Example: The menu itself is a textual
list of operations representing
indirect manipulation.

4.3 CONCEPT OF DIRECT MANIPULATION OF GRAPHICAL SYSTEM
The style of interaction of graphical systems was first used by Shneiderman (1982). He called them ―
“direct manipulation” systems, suggesting that they possess the following characteristics:
1. The system is portrayed as an extension of the real world: 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.
2. Continuous visibility of objects and actions: objects are continuously visible. Reminders of actions
to be performed are also obvious. Nelson (1980) described this concept as ―virtual reality,‖ a
representation of reality that can be manipulated. Hatfield (1981) is credited with calling it
―WYSIWYG‖ (what you see is what you get) and Rutkowski (1982) described it as ―transparency.
3. Actions are rapid and incremental with visible display of results: the results of actions are
immediately displayed visually on the screen in their new and current form. Auditory feedback may
also be provided. The impact of a previous action is quickly seen, and the evolution of tasks is
continuous and effortless.
4. Incremental actions are easily reversible: Finally, actions, if discovered to be incorrect or not
desired, can be easily undone.

4.4 CONCEPT OF INDIRECT MANIPULATION OF GRAPHICAL SYSTEM
1. In practice, direct manipulation of all screen objects and actions may not be feasible
because of the following:
 The operation may be difficult to conceptualize in the graphical system.
 The graphics capability of the system may be limited.
 The amount of space available for placing manipulation controls in the window border
may be limited.
 It may be difficult for people to learn and remember all the necessary operations and
actions.
2. When this occurs, indirect manipulation is provided. Indirect manipulation substitutes
words and text, such as pull-down or pop-up menus, for symbols, and substitutes typing for
pointing

4.5 GRAPHICAL SYSTEM ADVANTAGES
1. Symbols recognized faster than text: symbols can be recognized faster and more accurately
than text. An example of a good classification scheme that speeds up recognition is the icons.
These icons allow speedy recognition of the type of message being presented.
2. Faster learning: a graphical, pictorial representation aids learning, and symbols can also be
easily learned.
3. Faster use and problem solving: Visual or spatial representation of information has been found
to be easier to retain and manipulate and leads to faster and more successful problem solving.
4. Easier remembering: Because of greater simplicity, it is easier for casual users to retain
operational concepts.
5. More natural: symbolic displays are more natural and advantageous because the human mind
has a powerful image memory.
6. Fewer errors: Reversibility of actions reduces error rates because it is always possible to undo
the last step. Error messages are less frequently needed.

7. Increased feeling of control: The user initiates actions and feels in control. This increases user
confidence.
8. Immediate feedback: The results of actions furthering user goals can be seen immediately. If the
response is not in the desired direction, the direction can be changed quickly.
9. Predictable system responses: Predictable system responses also speed learning.
10. Easily reversible actions: This ability to reverse unwanted actions also increases user confidence.
11. More attractive: Direct-manipulation systems are more entertaining, cleverer, and more appealing.
12. May consume less space: Icons may take up less space than the equivalent in words but this is not
the case always.
13. Replaces national languages: Icons possess much more universality than text and are much more
easily comprehended worldwide.
14. Easily augmented with text displays: Where graphical design limitations exist, direct-
manipulation systems can easily be augmented with text displays. The reverse is not true.
15. Low typing requirements: Pointing and selection controls, such as the mouse or trackball,
eliminate the need for typing skills.

4.6 GRAPHICAL SYSTEM DISADVANTAGES
1. Greater design complexity: Controls and basic alternatives must be chosen from a pile of choices
which may not necessarily result in better design unless proper controls and windows are selected. Poor
design can undermine acceptance.
2. Learning still necessary: The first time one encounters many graphical systems, what to do is not
immediately obvious. A severe learning and remembering requirement is imposed on many users.
3. Lack of experimentally-derived design guidelines: Compared to earlier days, now a days there is a
lack of availability of experimentally-derived design guidelines, as a result there is too little
understanding of how most design aspects relate to productivity and satisfaction.
4. Inconsistencies in technique and terminology: Many differences in technique, terminology, and look
and feel exist among various graphical system providers, and even among successive versions of the
same system. So the user has to learn or relearn again while shifting to next terminology.
5. Not always familiar: Symbolic representations may not be as familiar as words or numbers. Numeric
symbols elicit faster responses than graphic symbols in a visual search task.
6. Window manipulation requirements: Window handling and manipulation times are still
excessive and repetitive. This wastes time.

7. Production limitations: The number of symbols that can be clearly produced using today’s
technology is still limited. A body of recognizable symbols must be produced that are equally legible
and equally recognizable using differing technologies. This is extremely difficult today.
8. Few tested icons exist: Icons must be researched, designed, tested, and then introduced into the
marketplace. The consequences of poor or improper design will be confusion and lower productivity
for users.
9. Inefficient for touch typists: For an experienced touch typist, the keyboard is a very fast and
powerful device.
10. Not always the preferred style of interaction: Not all users prefer a pure iconic interface. User will
also prefer alternatives with textual captions.
11. Not always fastest style of interaction: graphic instructions on an automated bank teller machine
were inferior to textual instructions.
12. May consume more screen space: Not all applications will consume less screen space. A listing of
names and telephone numbers in a textual format will be more efficient to scan than a card file.
13. Hardware limitations: Good design also requires hardware of adequate power, processing speed,
screen resolution, and graphic capability.

4.7 CHARACTERISTICS OF THE GRAPHICAL USER INTERFACE
1. 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 displaying of a variety of character fonts, including different sizes and styles.
2. 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.
3. Restricted Set of Interface Options: 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.
• This concept fostered the acronym WYSIWYG.

4. 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.
5. 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.
• 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).
6. Use of Recognition Memory: Continuous visibility of objects and actions encourages to eliminate “out of
sight, out of mind” problem.
7. 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 preemptive
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.

5. THE WEB USER INTERFACE
5.1 WUI Definition
• Web interface design is essentially the design of navigation and the presentation of
information.
•Proper interface design is properly balancing the structure and relationships of menus,
content, and other linked documents or graphics.
•The Web is a navigation environment where people move between pages of information, not
an application environment. It is also a graphically rich environment.

5.2 POPULARITY OF WEB
• While the introduction of the graphical user interface revolutionized the user interface,
the Web has revolutionized computing. It allows millions of people scattered across the
globe to communicate, access information, publish, and be heard.
• It allows people to control much of the display and the rendering of Web pages.
• Web usage has reflected this popularity. The number of Internet hosts has risen
dramatically.
• Users have become much more discerning about good design. Web designs have
removed slow download times, confusing navigation, confusing page organization,
disturbing animation, or other undesirable site features.

5.3 CHARACTERISTICS OF THE WEB USER INTERFACE
5.3.1 GUI VERSUS WEB DESIGN

User Interface Design - Module 1 Introduction

5.3.2 PRINTED PAGES VERSUS WEB PAGES
1. Page size: Printed pages are generally larger than their Web counterparts. They are also
fixed in size, not variable like Web pages. The visual impact of the printed page is
maintained in hard-copy form, while on the Web all that usually exists are snapshots of page
areas.
2. Page rendering: Printed pages are immensely superior to Web pages in rendering. Printed
pages are presented as complete entities, and their entire contents are available for reading.
Web pages elements are often rendered slowly, depending upon things like line transmission
speeds and page content.
3. Page layout: With the printed page, layout is precise with much attention given to it. With
Web pages layout is more of an approximation, being negatively influenced by deficiencies
in design toolkits and the characteristics of the user’s browser and screen sizes.
4. Page resolution: The resolution of displayed print characters still exceeds that of screen
characters, and screen reading is still slower than reading from a document. Design
implication: Provide an easy way to print long Web documents.

5. Page navigation: Navigating printed materials is as simple as page turning. Navigating the
Web requires innumerable decisions concerning which of many possible links should be
followed.
6. Interactivity: Printed page design involves letting the eyes traverse static information,
selectively looking at information and using spatial combinations to make page elements
enhance and explain each other. Web design involves letting the hands move the
information (scrolling, pointing, expanding, clicking, and so on) in conjunction with the
eyes.
7. Page independence: Because moving between Web pages is so easy, and almost any page
in a site can be accessed from anywhere else, pages must be made freestanding. Printed
pages, being sequential, and providing a clear sense of place, are not considered
independent. Design implication: Provide informative headers and footers on each Web
page.

They differ, however, in some important ways as:
1. Users: The users of intranets, being organization employees, know a lot about the organization,
its structure, its products, its jargon, and its culture. Customers use Internet sites and others who
know much less about the organization, and often care less about it.
2. Tasks: An intranet is used for an organization’s everyday activities, including complex
transactions, queries, and communications. The Internet is mainly used to find information, with
a supplementary use being simple transactions.
3. Type of information: An intranet will contain detailed information needed for organizational
functioning. Information will often be added or modified. The Internet will usually present more
stable information: marketing and customer or client information, reports, and so forth.
4. Amount of information: Typically, an intranet site will be much larger than an organization’s
Internet site. It has been estimated that an intranet site can be ten to one hundred times larger
than its corresponding public site.
5.3.3 INTRANET VERSUS THE INTERNET

5. Hardware and software: Since intranets exist in a controlled environment, the kinds of
computers, monitors, browsers, and other software can be restricted or standardized. The
need for cross-platform compatibility is minimized or eliminated; upgraded
communications also permit intranets to run from a hundred to a thousand times faster than
typical Internet access can.
6. Design philosophy: Implementation on the intranet of current text-based and GUI
applications will present a user model similar to those that have existed in other domains.
This will cause a swing back to more traditional GUI designs—designs that will also
incorporate the visual appeal of the Web, but eliminate many of its useless, promotional,
and distracting features. The resulting GUI hybrids will be richer and much more effective.
Extranets
• An extranet is a special set of intranet Web pages that can be accessed from outside an
organization or company.
• Typical examples include those for letting customers check on an order’s status or letting
suppliers view requests for proposals. An extranet is a blend of the public Internet and the
intranet, and its design should reflect this.

6. PRINCIPLES OF USER INTERFACE DESIGN
•Principles of user interface design should be useful, accomplishing some business objectives faster and
more efficiently than the previously used method or tool did.
•We will begin with the First set of published principles are those for the Xerox STAR.
6.1 Principles for the Xerox STAR
1. 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.
2. 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.

3. 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.
4. 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.
5. 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?
6. 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.

6.2 General Principles
Following principles are general characteristics of the interface:
1. 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 color and graphics effectively and simply.
2. Clarity: The interface should be visually, conceptually, and linguistically clear, including:
 Visual elements
 Functions
 Metaphors
 Words and text

3. Compatibility: Adopts to the user’s perspective. Provide compatibility with the following:
 The user
 The task and job
 The product
4. Comprehensibility: A system should be easily learned and understood. The flow of actions,
responses, visual presentations, and information should be in a sensible order that is easy to
recollect and place in context. A user should know the following:
 What to look at
 What to do
 When to do it
 Where to do it
 Why to do it
 How to do it
5. Configurability: Permit easy personalization, configuration, and reconfiguration of settings.
 Enhances a sense of control.
 Encourages an active role in understanding.

6. Consistency: A system should look, act, and operate the same throughout. Similar components should:
 Have a similar look.
 Have similar uses.
 Operate similarly.
➢The same action should always yield the same result.
➢ The function of elements should not change.
➢The position of standard elements should not change.
➢In addition to increased learning requirements, inconsistency in design has a number of other
prerequisites and by-products, including:
• More specialization by system users.
• Greater demand for higher skills.
• More preparation time and less production time.
• More frequent changes in procedures.
• More error-tolerant systems (because errors are more likely).
• More kinds of documentation.
• More time to find information in documents.
• More unlearning and learning when systems are changed.
• More demands on supervisors and managers
• More things to do wrong.

7. Control: The user must control the interaction.
 Actions should result from explicit user requests.
 Actions should be performed quickly.
 Actions should be capable of interruption or termination.
 The user should never be interrupted for errors.
➢The context maintained must be from the perspective of the user.
➢The means to achieve goals should be flexible and compatible with the user’s skills, experiences,
habits, and preferences.
8. Directness: Provide direct ways to accomplish tasks.
• Available alternatives should be visible.
• The effect of actions on objects should be visible.
9. Efficiency: Minimize eye and hand movements, and other control actions.
• Transitions between various system controls should flow easily and freely.
• Navigation paths should be as short as possible.
• Eye movement through a screen should be obvious and sequential.

10. Familiarity:
 Employ familiar concepts and use a language that is familiar to the user.
 Keep the interface natural, mimicking the user’s behavior patterns.
 Use real-world metaphors.
11. 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 experience.
 Each user’s personal preference.
 Each user’s habits.
 The conditions at that moment.
12. Forgiveness:
 Tolerate and forgive common and unavoidable human errors.
 Prevent errors from occurring whenever possible.
 Protect against possible catastrophic errors.
13. Predictability: The user should be able to anticipate the natural progression of each task.
 Provide distinct and recognizable screen elements.
 Provide cues to the result of an action to be performed

14. Recovery:
➢ A system should permit:
 Commands or actions to be abolished or reversed.
 Immediate return to a certain point if difficulties arise.
➢Ensure that users never lose their work as a result of:
 An error on their part.
 Hardware, software, or communication problems.
15. Responsiveness: The system must rapidly respond to the user’s requests and provide immediate
acknowledgment for all user actions:
 Visual.
 Textual.
 Auditory
16. Simplicity: Provide as simple an interface as possible. 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.

17. Transparency: Permit the user to focus on the task or job, without concern for the
mechanics of the interface.
 Workings and reminders of workings inside the computer should be invisible to the user.
18. Trade-Off:
➢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.
End of Module 1

User Interface Design - Module 1 Introduction

Recommended

More Related Content

What's hot (20)

Similar to User Interface Design - Module 1 Introduction (20)

Recently uploaded (20)

User Interface Design - Module 1 Introduction