User Interface Design & Benefits
User Interface Design & Benefits
Introduction
User Interface Design Definition
• User interface design is a subset of a field of study called 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. The user interface has
essentially two components: input and output.
• Input is how people communicate his needs to the system using keyboard or any
pointing device and output is how the system returns processing result to user
through screen or sound.
• The best interface is one which has proper design with combination of effective
input and output mechanisms.
Importance of Good Design
• Inspite of today’s rich technologies and tools we are unable to provide effective
and usable screen because lack of time and care.
• A well-designed interface and screen is terribly important to our users. It is their
window to view the capabilities of the system and it is also the vehicle trough
which complex tasks can be performed.
• 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 chase some people away from a system permanently. It can
also lead to aggravation, frustration, and increased stress.
Benefits of Good Design
• The benefits of a well-designed screen have also been under experimental
scrutiny for many years. One researcher, for example, attempted to improve
screen clarity and readability by making screens less crowded. The result: screen
users of the modified screens completed transactions in 25 percent less time and
with 25 percent fewer errors than those who used the original screens.
• Another researcher has reported that reformatting inquiry screens following good
design principles reduced decision-making time by about 40 percent, resulting in
a savings of 79 person-years in the affected system.
• Other benefits also accrue from good design (Karat, 1997). Training costs are
lowered because training time is reduced, support line costs are lowered because
fewer assist calls are necessary, and employee satisfaction is increased because
aggravation and frustration are reduced.
• Another benefit is, ultimately, that an organization’s customers benefit because of
the improved service they receive.
• Identifying and resolving problems during the design and development process
also has significant economic benefits.
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 and 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.
The term used to describe this style of interaction for graphical systems was first used by
Shneiderman (1982). He called them ―direct manipulation‖ systems, suggesting that they
possess the following characteristics:
• 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.
• 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,‖
• 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.
• Incremental actions are easily reversible: Finally, actions, if discovered to be
incorrect or not desired, can be easily undone.
• In practice, direct manipulation of all screen objects and actions may not be
feasible because of the following:
• Greater design complexity: Controls and basic alternatives must be chosen from
a pile of choices numbering in excess of 50. This design potential may not
necessarily result in better design unless proper controls and windows are
selected. Poor design can undermine acceptance.
• 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 because meanings of icons or using
pointing device have to be learned.
• Lack of experimentally-derived design guidelines: today there is a lack of
widely available experimentally-derived design guidelines. Earlier only few
studies to aid in making design decisions were performed and available for today
now. Consequently, there is too little understanding of how most design aspects
relate to productivity and satisfaction.
• 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.
• 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.
• Window manipulation requirements: Window handling and manipulation times
are still excessive and repetitive. This wastes time
• 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.
• 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.
• Inefficient for touch typists: For an experienced touch typist, the keyboard is a
very fast and powerful device.
• 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.
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
• 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.
Visualization
• 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 subobjects. For example, an object may be a
document and its subobjects 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.
• Application versus Object or Data Orientation An application-oriented
approach takes an action: object approach, like this:
Action> 1. An application is opened (for example, word processing).
Object> 2. A file or other object selected (for example, a memo).
An object-oriented object: action approach does this: Object> 1. An object is chosen
(a memo).
Action> 2. An application is selected (word processing).
• Views: Views are ways of looking at an object’s information. IBM’s SAA CUA
describes four kinds of views: composed, contents, settings, and help.
• 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.
• Web interface design is essentially the design of navigation and the presentation
of information.
• 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. It
is more difficult because of the availability of the various types of multimedia,
and the desire of many designers to use something simply because it is available.
It is more difficult because users are ill defined, and the user’s tools so variable in
nature.
The 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. Slow download
times, confusing navigation, confusing page organization, disturbing animation,
or other undesirable site features often results in user abandonment of the site for
others with a more agreeable interface.
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.
• 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.
• 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.
— Avoid modes since they constrain the actions available to the user.
— Permit the user to customize aspects of the interface, while always
providing a proper set of defaults.
• Directness
— Provide direct ways to accomplish tasks.
▪ Available alternatives should be visible.
▪ The effect of actions on objects should be visible.
• 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.
— Anticipate the user’s wants and needs whenever possible.
• 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.
• 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.