Uid Mod 1

Download as pdf or txt
Download as pdf or txt
You are on page 1of 10

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

and computers work together so that a person's needs are


design of how people
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.

I n p u t is how people communicate his needs to the system using keyboard or any
result to user
pointing device and output is how the system returns processing
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


effective
today's rich technologies and tools are unable provide
we to
Inspite of
and usable sereen 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 through
which complex tasks can be performed.

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


are confusing and inefficient, people will have greater difficulty in doing their

jobs and will make more mistakes.

P o o r 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

Prof. Radha R, Dept. of ISE, SVIT, Bengaluru Page1

18CS734 The User Interface-Introduction


good

design principles reduced decision-making time by about 40 percent, resulting


in a savings of 79 person-years in the affected system.

O t h e r 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

and frustration reduced.


aggravation are

Another benefit is, ultimately, that an organization's customers benefit because


of the improved service they receive.

Identifying and resolving problems during he design and development process


also has significant economic benefits.
GUI versus Web Design

Characteristics GUI WEB


Devices User hardware variations User hardware variations
limited. User hardware enormous.
characteristics well defined Screen appearance
Screens appear exactly as influenced by hardware
specified. being used.

User Focus Data and applications. Information and navigation.


Data Typically created and used Full of unknown content.
by known and trusted
Information Sources are trusted. Source not always trusted.
Properties generally known. Often not placed onto the
Typically placed into system Web by users or known
by users or known people people and organizations.
and organizations. Highly variable
organization.
User Tasks Instal, configure, Link to a site, browse or read
personalize, start, use, and pages, fill out forms,
Open, use, and close data upgrade programs. register
files. for services, participate in
transactions, download and
Familiarity with applications save things. Familiarity
often achieved. with many sites not
established.

Presentation Windows, menus, controls, Two components, browser


data, toolbars and page
Presented as specified by Within page, any
designer combination of text, images,
Generally standardized by audio, video, and animation.
toolkits and style
May not be presentedas
specifications. specified by the designer
guides.
dependent on browser,
monitor, and user
Little standardization.

Navigation Through menus, lists, trees, Through links, bookmarks,


dialogs, and wizards. and typed URLs.
Interactions such as clicking Basic interaction is a single
Interaction menu choices, pressing click. This can cause extreme
buttons, selecting list changes in context, which
choices, and cut/copy/paste may not be noticed.
occur within context of active
program.

Response Time Nearly instantaneous Quite variable, depending on


transmission speeds, page
content, and so on. Long
times can upset the user.

System Capability Unlimited capabilityLimited by constraints


proportional to imposed by the hardware,
sophistication of hardware browser software, client
and support and user

software. willingness allow


features
because of
response time, security, and
Privacy concerns.
Task Efficiency Targeted to a specifieLimited by browser and
audience with specific tasks. network capabilities.
Only limited by the amount Actual user audience usually
of programming undertaken not well understood. Often
to support it. intended for anyone and
everyone.

Consistency Major objective exists within | Sites tend to establish their


and across applications. own identity.
Aided by platformtoolkit and Frequently standards set
design guidelines. within a site.
Universal consistency in GUI | Frequent ignoring of GUI
products generally guidelines for identical
created through toolkits and
design guidelines.
Components, especially
controls.

User Assistance Integral part of most No similar help systems.


systems and applications. Accessed through standard
Documentation, both online mechanisms
and offline, The little available help is|
Customer service support, if built into the page oriented to|
provided, usually provided. product or service offered.
Personal support desk also
usually provided.

Prof. Radha R, Dept. of ISE, SVIT, Bengaluru Page 11

18CS734 The User Interface-Introduction

Integration Seamless integration of all Apparent for some basic


applications into the functions within most Web
platform environment is a sites (navigation. printing.
major objective. and so on.) in
accomplishing this objective
Sites tend to achieve
individual distinction rather
thanintegration.
Security Tightly controlled, Renowned for security
proportional to degree of exposures.
willingness to invest Browser-provided security
resources and effort. options typically understood
Not an issue for most home by average users. When
PC users. employed, may have
function-limiting side
effects
Reliability Tightlycontrolled in Susceptibleto disruptions
business systems, caused byuser,telephone
proportional to degree of
willingness fine and cable
providers, Internet service
providers, to invest
resources and effort.
Hosting servers, and
remotely accessed sites.
Characteristies of the Graphical User Interface

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. I 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 a graphical


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

T o identify a proposed action is commonly referred to as pick, the signal to


perform an action as click.

Prof. Radha R, Dept. of ISE, SVIT, Bengaluru Page 6

18CS734 The User Interface-Introduction


T h e 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

T h e 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
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 rele vant information. Effective visualizations
can facilitate mentalinsights,fncrease productivity, and foster faster and more
accurate use of data.

Object Orientation
A graphical system consists of objects and actions. Objecets are what people see

onthescreen as a singleunit.
Objects can be composed of sub objects. For example, an object may be a

document anditssub objects may be a paragraph, sentence, word, andletter.


Objects aredivided 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 afífect
the way another object appears or behaves. These relationships are called
collections, constrainis, 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, amemo).
An object-oriented object: action approach does this: Object> 1. An object is
chosen (a memo).
Action> 2. An application is sélected (word processing
Views: Views are ways oflooking at an object'sinformation.1BM s SAA
CUA describes four kinds
of views:
composcd, contents, setings, and help.
Use of Recognition Memory
Continuousvisibilityofobjectsandactionsencouragestoeliminateoutofsight, out of

mindlproblem.
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 preemptivee

multitasking.
Data may also be transferred between programs. It may be temporarily stored on a
Clipboad for later transfer or be automatically wrapped between programs.

The Web User Interface

.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.
Concept of Direct Manipulation
The term used to describe this style of interaction for graphical systems was first used
by Shneiderman (1982). He called them -direct manipulaticalsystems,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 adistraction.

Continuous visibility of objects and actions: objecis are continuously visible.


Reminders of actions to be performed are also obvious. Nelson (1980) described
this concept as virtual reality, are presentation of reality that can be

WYSTWYG (what yu is what


manipulated. sarecited
Hatfield (1981) witraling it
you get) and Rutkowski(1982)describéd it asransparency
see

Actions are rapid and incremental with visible display of results: theresuts
ofcurrent
actionsform.
are immediately displayed visually on the screen in their new and
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

incorrector not desired, can beeasily undone.


Indirect Manipulation
In practice, direct manipulation of all screen objects and actions may not be

feasiblebecause of the following:


The operation may be difficult to conceptualize in the graphical system.

o The graphics capability of the system may be limited.

o The amount of space available for placing manipulation controls in


the window border may be limited.

o It may be difficult for people to learn and remember all the

necessary operations and actions.

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.
Intranet versus the Internet

They differ, however, in some important ways as

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.

Tasks: An intranet is used for an organization's everyday activities, including

Prof. Radha R, Dept. of ISE, SVIT, Bengaluru Page 13

18CS734 The User Interface-Introduction


complex transactions, queries, and communications. The Internet is mainly used
to find information, with a supplementary use being simple transactions.

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.

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.
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. This allows
the use of rich graphics and multimedia, screen elements that contribute to very
slow download times for most Internet users.

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.
General Principles

Thedesign goalsin creating auserinterface 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.


U s e color and graphics effectively and simply.

Prof. Radha R, Dept. of ISE, SVIT, Bengaluru Page 15

18CS734 The User Interface-Introduction


Clarity
The interface should be visually, conceptually, and linguistically
clear, including:

Visual elements
Functions

Metaphors
Words and text

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

What to do
When to do it

Where to do it

Why 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

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.

In addition to increased leaning requirements, inconsistency in design


hasa number of other pperequisites 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.

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 intermupted 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.

Prof. Radha R. Dept. of ISE, SVIT, Bengaluru Page 17

18CS734 The User Interface-Introduction


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


b evisible.

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.


Forgiveness
Tolerate and forgive common and unavoidable human errors.

Prevent errors from occurring whenever possible.

Protect against possible catastrophic errors.

.Predictability
The user should be able to anticipate the natural progression of each task.

Provide distinct and recognizable sereen elements.

Provide cues to the result of an action to be performed.

All expectations should be fulilled uniformly and completely.

When an error does occur, provide constructive messages.

Recovery

A system should permit:

Commands or actions to be abolished or reversed.

Immediate return to a certain point ifdifficulties arise.

Ensure that users never lose their work as a result of:

An error on their part.

Hardware, software, or communication problems.

Responsiveness
The system must rapidly respond to the user's requests.

Provide immediate acknowledgment for all user actions:

Visual.

Textual.

Auditory.

Simplicity
Provide as simple an interface as possible.

Prof. Radha R. Dept. of ISE, SVIT, Bengaluru Page 19

18CS734 The User Interface-Introduction


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 ar the expense of uncommon


actions being made harder

Provide uniformity and consistency.

Transparency
Permit the user to focus on the task or job, without conceru for
the mechanics of the interface.

Workings and reminders of workings insidé the computer


should be invisible to the user.

Trade-Offs

Finaldesign willbebased on aseries of trade-ofs balancing


often- conflicting design principles,

People's requirements always take precedence over

technical requirements.

You might also like