USER INTERFACE

DESIGN
The interface is the part of the computer system
with which the user interacts in order to use the
system and achieve his or her goal.
KEY DEFINITION :The user interface defines how
the system will interact with external entities.
- The system interfaces define how systems
exchange information with other systems

USER INTERFACE : It is the part of a computer and
its s/w that people can see, hear, feel and talk
to.
-The goals of UID are simple, to make working
with a computer easy, productive and
enjoyable.



IMPORTANCE OF USER INTERFACE :
1. Proper interface design will provide a mix of well designed input and
output mechanisms thats satisfy user needs capabilities and limitations in
the most effective way possible.
2. The best interface is one that permits the user to focus on the information
and tasks at hand not the mechanism used to present the information and
perform the task.
3. Attention to user interface has increased considerably.
4. People no longer accepts products with complicated procedures and
incomprehensible screens that mes up their lives and put their work on
risks.
5. A variety of new display and interaction techniques wrapped into a
package called GUI.
6. All GUI PLATFORMS PROVIDES STYLE GUIDES TO ASSIST PRODUCT DESIGN.
7. World wide web is everyday life of possible..
8. More than 50% OF PROGRAM CODE IS NOW DEVOTED FOR UI.
The user interface has two components input and
output.
-input is how a person communicates his or her needs
or desires to the computer. Some common input
component are keyboard, mouse,trackball, ones
finger (for touch sensitiive screens) and ones voice.
- Output is how the computer conveys the result of its
computations and requirements to the user. Some
common output mechanism is display screen.

Understanding the User Interface:
Physical aspects of the user interface
Devices touched by user, manuals, documentation,
and forms
Perceptual aspects of the user interface
Everything else user sees, hears, or touches such
as screen objects, menus, and buttons
Conceptual aspects of the user interface
What user knows about system and logical
function of system

IMPORTANCE OF GOOD DESIGN :
It is the window to view the capabilities of the system
Critical tasks are presented.

BENEFITS OF GOOD DESIGN :
Usability
Productivity
Training cost time reduced
Customer satisfaction
Economic benefits


HUMAN COMPUTER INTERFACE :
- Focus on interaction between user and computer
called human-computer interaction (HCI).
- It is the study, planning and design of how people and
computer work together.
-A human and a computer communicates.
A human usually has 5 senses:
Sight,
Hearing,
Touch,
Taste,
Smell,
A computer hasnt any senses as such, it is machinery, with
electrons running around in and out of component
devices.

COMP MATCH
A good interface match would include as many
senses as possible.
Computer input and output is basically seeing
what we enter and what is displayed.
Sound can be added to some programs, either
by giving instructions by voice, or listening to a
commentary / music.
Touch can be in the form of using the mouse, a
joystick, or a drawing tablet.

HCI DESIGNER MUST CONSIDER A VARIETY OF FOLLOWING
FACTORS
1. What people want and expect.
2. What physical limitations and people posses.
3. How their perceptual and information processing system
works.
4. What people find enjoyable and attractive.

History of Human computer interface:
- The lowest and most common level in HCI is movements and
gestures.
- Movements and gestures are language independent , that is
they permit the people who do not speak the same language
to communicate with one another.

- The next higher level , in terms of universality and complexity is
spoken language.
- Most people can speak one language, some two or more.
- A spoken language is very efficient mode of communication if both
the parties to the communication understand it.
- At the third and highest level of most complexity is written
language.while most people speak, not all can write.
- In modern times we have typewritter, another step upward in
communication complexity, significantly fewer people type than
write.
- Now adays the human computer dialog reflected the computers
preferences, consisting of one style or combination of styles using
keyboard, commonly referred to as command language, question and
answer, menu selection and function key selection.
- VOICE AND HANDWRITTING : Exists with varying degree of success,
but still lack the universality and richness of typed input.
GUI(GRAPHICAL USER INTERFACE ):
- In graphical interface, the primary interaction mechanism is a
pointing device of some kind, an electronic equivalent to human
hand.
CHARACTERISTICS OF GRAPHICAL USER INTERFACE :
- The user interaction is performed using a collection of elements
refered as objects. They can be seen . heard., touched, or
otherwise perceived.
- Objects are always visible to user and are used to perform tasks.
The operation performed on objects are called as action.
- The operation include accessing and modifying objects by
pointing selecting and manipulating.
Popularity of graphics :
The field of graphic is popularised because of following reasons.
i. Text based screen- one dimensional.
Graphic screen :
1. Screen mechanisms and commands are executed through
menu bars and pull downs.
2. It provides 3D look, floating windows.
3. Information could appear and disappear as needed and in
some cases it can be replaced by graphical images called
icons.
4. It reduces the memory load.
5. It permits faster information transmission between
computers.



6. Characterized as desktop with scatted notes, paper and files,
trays .
7. Also reffered as WIMP interface: Windows,icons, menus and
pointers.
A graphical system possess set of defining concepts. They are.
1. Sophisticated visual presentation.
2. Pick and Click interaction.
3. Restricted set of Interface options.
4. Visualization.
5. object orientation.
6. Use of Recognition memory.
7. Concurrent Performance of functions.


1. Sophisticated visual presentation :
- Visual presentation is the visual aspects of the interface. It is what people seen on the
screen,
-The sophistication of a graphical system permits the following.
1. Displaying lines, including drawing and icon.
2. Displaying variety of character fonts, including different sizes and styles.
3. Display 16 million or more color on the screen.
4. Displays animation, presentation and photographs, and motion video.

PICK AND CLICK INTERACTION :
- In some application an action is to be performed must first be identified and then the
action is performed. This interaction is known as pick and click interaction.
- The primary mechanism for performing this pick and click mechanism is most often
the mouse and its button.
- The user moves a mouse pointer to relevant element(pick) and the action is signaled
(click).
- The eye, hand and mind seem to work smoothly and effeciently together.
- The secondary mechanism for performing these selection actions is keyboard.
RESTRICTED SET OF INTERFACE OPTIONS :
- The array of alternatives available to the user is what is to be presented on the
screen.
- The concept used here is WYSIWYG(what you see is what you get).
VISUALIZATION :
- It is the cognitive process that allows people to understand information that is difficult
to perceive.
- Visualization conveys most relevant information.
- Maintain top to bottom and left to right flow through the screen for visualization.
Object orientation :
- A graphical syste m consists of objects and actions.
Object :
- objects are what people see on the screen.
- A well designed system keeps users focussed on objects, not on how to carry out
actions.
- A objects can be composed of subobjects. For eg : objects may be a document and
subobjects may be paragraph, sentence, word and letter.
Interface design classifies objects into three classes .
1. Data object.
2. Container object.
3. Device objects.

1. Data object.
- Data objects present information. This information is either text or graphics, normally
appears in the body of the screen.
2. Container object :
- An objects that hold other objects are known as container objects. They are used
to group two or more related objects for easy access and retrieval.
There are three kinds of containers.
1. Workplace desktop, the storage area for all objects.
2. Folders general purpose containers for long term storage of objects.
3. Work area temporary storage folders used for storing multiple objects currently
being worked on.
3.Device objects :
- Device objects represent physical objects in the vreal world such as printer or trash
baskets.


Characteristics of objects are specified based on the relationship called as
collection, constraints, composites, container and persistance.
1. Collection :
- it is a simplest relationship objects sharing a common concept.
- A collection might be the result of a query or a multiple selection of objects.
- Operation can be applied to a collection of objects.

2.Constraint :
- it is a stronger object relationship.
- changing an object in a set affects some other object in the set.
- eg : A document organized into pages.

3. Container :
- it ia an object in which other objects exist. Eg : text in a document.
- A container often influenced the behavior of its content.
4. Composite :
- The Agggregation itself can be identified as an object.
- eg : Range of cells organized into spread sheets.
Persistance :
- Maintenance of a state once it is established.
eg : window size , cursor location, scroll positions, etc.

Properties or Attributes of Objects :
1. Objects also have properties or attributes.
2. Properties are unique characteristics of objects.
3. Properties describes an object and can be changed by users.

Action :
- People take actions on objects . They manipulate the objects by using commands or
modify the properties of the objects by using an property or attribute specification.
- A series of actions may be performed on a selected objects. It also encourages
system learning through exploration.
Action can be classified as follows.
1. Commands
2. Property/ Attribute Specication.
Commands :
- Commands are action that manipulate objects .
- It may be performed by direct manipulation by a command button.
- they atre executed when selected.
Eg: opening a document , closing a document.
Property/ Attribute specification :
- property/ Attribute specification actions establish or modify the attributes or
properties of objects.
- When selected, they remain in effect until deselected.
- Eg : particular font styles, color.
Application versus object or data orientation :
- Ealier text based systems are called application, whereas graphical systems are purely
object based. Because first an object is developed and then act upon them.
- An application oriented approach takes action : object approach . For example
Action An application is opened (eg word processing)
object A file or other object is selected (eg . A menu)
- An object oriented approach takes object : action approach. Foe eg
Object - An object is chosen ( a menu)
action An application is selected ( word processing ).
VIEWS :
- Views are used to represent the object information
Four kinds of views :
-1. Composed view - composed view present information and the object within an
object.
2. Content view it list the component of objects.
3. Setting view It permits seeing and changing object properties.
4. Help view - It provides all the help function .

Use recognition Memory :
- Continuous Visisbility of objects and actions encourages use of a persons more
powerful recognition memory.
- Out of sight, out of mind Problem is eliminated.

Concurrent performance of function :
- Graphic system may do two or more things at one time .
- Multiple programs may run simultaneously.
Direct manipulation:
Direct manipulation describes he style of interaction for graphical systems.
The direct manipulation has the following characteristics.
1. The system is portrayed as an extension of real world.
2. Continuous visibility of objects and actions.
3. Actions are rapid and incremental with visible displays of results.
4. Incremental actions are easily reversible.

1. The system is portrayed as an extension of real world.
- The system replicates objects and actions in the working environment on
the screen.(Familiar).
- A person has power to access and modify these objects.
- The physical organization of the system, is unfamiliar to the user and hence
hidden from view.


Continuous Visibility of objects:
1. Objects are continuously visible(desktop)
2. Remainders of action to be performed as obvious.
3. Labelled buttons replaced complex commands and syntax.
4. Cursor action and motion is physically obvious and natural.
This concept is reffered as :
1. virtual reality(nelson 1980)
2. WYSIWYG(Hatfield 1981).
Actions are rapid and incremental with visible display of results.:
1. Tactile feedback is not possible yet, but immediate visual feedback of the
outcome of ctions are provided.
2. Auditory feedback may also be provided.
3. Evolution of tasks is continuous and effortless.
Earlier Direct manipulation systems.
1. Concept of direct manipulation actually preceded the first graphical
system.
Eg : Earliest full screen text editors.
Screen texts resembled paper on desk(real world extension).
Text reviewed in their entirely(continuous visibility).
Editing or reconstructing easily done.(rapid incremental action).
Actions should be reversed when necessary.
INDIRECT MANIPULATION:
Direct manipulation of all screen objects and action may not feasible because of
the following.
1. Operation may be difficult to conceptualize in the graphical system.
2. Limited graphics capability of the system.
3. Space limitation for placing manipulation controls within window border.
4. I it may be difficult for people tp learn and remember all the necessary
operations and actions.
- For such cases 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.
- Most window system use a combination of both. Eg : Menus icon, etc.
ADVANTAGE AND DISADVANTAGHE OF GRAPHICAL SYSTEM.
Advantage :
1.Symbol recognized faster than text.
2. Faster learning.
3.Faster use and problem solving.
4. Easier remembering.
5.Provides Context
6. Fewer errors
7. Easily reversible actions.
8.Consumes Less space.
9. More naturals.
10.More attractive.
11. Low typing requirements.
12. Immediate feedback.

Diadvantage :
1. Inefficient for touch typist.
2. Inefficient for expert users.
3. Not always familiar.
4.Working domain is the present.
5. Human comprehension limitations.
6. Not always preferred style of interaction.
7. Greater design complexity.
8. Learning skill necessary.
9. Product limitations.
10. Fewer tested symbols exist
11. Not always faster style of interaction.
12. Hardware limitations.

CHARACTERISTICS OF WEB USER INTERFACE :
Web user interface :
It is a essential for navigation design and presentation of information..
Its about content not the data. The goal is to build a hierachy of menus and
pages that feel natural, well structured, easy to use and truthful.
- The web is the navigation environment, where people move between
pages of information, not an application environment.
Web interface design is difficult for the following reasons.
1. Its design language, HTML was never intened for screen design for general
population but for technical users.
2. Browser navigation continued to back and forward and address bar.
3. Information architecture and task flow are not easy to standartize.
4. Availability of various types of multimedia and usage of it without clearly
defined purpose.
Popularity of web:
1. It allow millions of people across the world can communicate, access
information, publish and be heared.
2. It allows people to control the display and rendering of web pages.
3. It provides security for the data transmitted using cookies concept.
Characteristics of a web interface.
A web interface design possess a number of characteristics , some familiar to
GUI interface.(Graphical user interface.)
GUI VERSUS WEB PAGE DESIGN.:
The characteristics specifies the similarities and dissimilarities existing between
the GUI and WEB design.
1. Devices:
- In GUI design, the characteristics of interface devices such as monitor and
modems are well defined.
- In web page design no assumption about the user interface devices.
2. User focus :
- In GUI system are about well defined application date.
- Web is about information and navigation.

Data/information.
-GUI data is created and used by known and trusted sources, people in the users
organization or reputed and rekliable companies and organization.
- Web is full of unknown content typically placed there by others unknown to
the user.
User Tasks:
- GUI system user install, configure, personalize, start, use, and upgrade
programs.They open use and close data files.
- Web user do things like linking sitesa, browsing or reading pages, filling out
forms, registering for services, participating in transaction, downloading and
saving things.
Presentation element :
- In GUI are windows, menus, control, toolbars, message and data. Many
element are transient, dynamically appearing and dis appearing based on
current context of the interaction.
- In webbrowser and webpage. Within a page itself. However any combination
of text, images, audio and video and animation may exist.

Navigation :
- In GUI user navigate through structed menus, lists, trees, dialog and
wizards.Navigation are standardized by toolkits and style guides.. GUI
design to provide a strong sense of navigation.
- Web users control theirown navigation through througn links, books and
typed Urls.
Interaction :
- GUI interaction consists of activities such as clicking menu choices,
presenting buttons,selecting choices from lists, keying data and cutting,
copyingor pasting within the context established by an open window and
as active program.
- The basic web interaction is the single click. The click can cause extreme
change in context such as moving to another site or changing the
displayed information within a site.
Response time :
- Response time in GUI systems are stable ans insatantaneous.
- in web, it is quite variable, depending on the trnsmission speeds, page
content, and so on.
Task Efficiency :
- GUI systems are targeted to a specific audience performing specific task.
- In web , the task efficiency is limited by browser and network capabilities.

USER ASSISTANCE :
- In GUI system , user assistance is an integral part. It can be accessed through
standard mechanisms. Documentation available in both online and offline.
- In web system no similar help systems. A little bit information built into thec page.
Customer service support is provided.
Consistency :
- In GUI system design , major objectives exists within and across application. Aided
by platform toolkits and design guidelines.
- In webpage design , sites tends to estabilish their own identity.
Integration :
- A primary goal of most GUI application is the seanless integration of all application
into the platform environment.
- Toolkits and component are key elements in accomplishing this objective.
- In Web design, apparent for some task functions within most websites.

PRINTED PAGES VERSUSWEB PAGES :
1. Page size:
- Printed pages are larger than web pages.
- Printed pages are fixed in size, web pages are variable.
- Printed pages have integrated and complete look, web pages are
presented in pieces whose dimension differs depending on the users
technology(browser, monitor and so on.)
- The visual impact of printed pages is maintained in hard copy form. Web
pages exists as snapshots of pages areas and some parts are never seen
and require scrolling- visual impact degraded.
Design implication : top of a web page is most important and signals to users
must always be provided that parts of a page lie below the surface.
2. Page rendering :
- printed pages are presented as complete entities- their entire content
available for reading or review.
- Web page rendered slowly, depending upon transmission line speeds and
page content.
- if page download is slow, user may switch to a different site.
- printed pages are superior to web pages.
3 . Page layout :
- printed page layout is precise, web pages layout is an approximation-
affected by deficiencies in design tool kits and characteristics of users
browser and hardware perticularly screen sizes.
-Design implication : undersytand the restrictions, and design for the most
common user tools.
4. Page resolution :
- print character resolution exceeds screen character resolution.
- screen reading is slower than reading from document.
Design implication : provide an easy way to print long web documents.
5. User focus :
- printed pages present entire information with clear size aqnd nature of
material.
- Some printed pages may be read sequentially (a novel) and other partially
and some what sequentially(newspapers) and some other are skimmed in
a systematic way.
- web pages are snapshots with few cues as to structure and sequence ,
length and depth.

Page navigation :
- Printed page navigation is simple page turning, a motor skill learned early
in life.
- Substantial interaction between page israre, thr process being sequential.
- Web navigation requires innumerable decision like.
1. What is at the end of of this link.
2. Where is it.
3. Will it address my need or solve problem.
Design implication : provide overview of information organization schemes and
clear descriptions of where links lead.
Interactivity :
- printed page design involves letting the eyes traverse static information,
selectively looking at information and using spatial combinations to
enhance page elements.
- Web design involves letting the hands move the information (scrolling,
pointing expanding, clicking ) in conjunction with eyes.

Page independence :
- inn web page any page in a site can almost be accessed from anywhere
else, pages must be made freestanding.
- Printed pages, being sequential, organized and providing a clear sense of
place, are not considered independent.
Principles of user interface design:
- An interface is an extension of a person. This means the system and the
software must reflect a persons capabilities and respond to his or her
specific needs.
- It should be useful, accomplishing some business objectives faster and more
efficiently than the previously used method.
GENERAL PRINCIPLES :
- The design goals in creating the user interface is described below. They are
the fundamentals to the design and implementation of all effective
interfaces., including GUI AND WEB INTERFACE.
1. Aesthetically pleasing :
- Visually pleasing composition, is attractive to the eye.
- It provides meaningful contrast between screen elements.
- Visual appeal is provided by creating groupings, alingning screen elements,
providing threedimensional representation and using color and graphics
effectively.
- good design combines power, functionality, and simplicity with pleasing
apperance.
Clarity :
- The interface must be clear in visual apperance , concept and wordings.
- Visual elements should be understandable, relating to the users real world
concepts and functions.
Compatibility:
- Design must be appropriate and compatible with the needs of the client or
user.
Effective design starts with understanding the users needs and adopting the
users point of view.
Comprehensibility:
- A system should be understandable, flowing in a comprehensible and
meaningful order.
- A strong clues to the operation of objects should be presented.
Consistency :
- consistency is important because it can reduce requirements for human
learning.
- A system should look, act and operate the same throughout.
- Similar components have similar look, similar users and operate similarly.
Control :
- control is feeling in charge, feeling that the system is responding to your
actions
- User must control the interaction.
Directness :
- tasks should be permormed directly.
- Tasks are performed by directly selecting an object, then selecting an action to
be performed, and then seeing the action being performed.
Efficiency :
- Minimize eye and hand movements and other controls actions.
- navigation paths should be as possible as short.
Familiarity :
- Apply familiar concepts and languages that is familiar to the user.
Forgiveness :
- tolerate and forgive common and unavoidable humans errors.
- Prevent errors from occuring whenever possible.
- Whenever a error occurs, provide a constructive message and undo actions.
Recovery :
- A system should permit commands or actions to be reversed by using an
undo command.
- The goal is stability. Recovery should be obvious, automatic, and easy and
natural to perform.
Responsiveness :
- A user request must be responded quickly.
- provide immediate acknowledge for all user actions such as visual, textual and
auditory.
Transparency :
- Never force the user to think all the technical details of the system.
- permit the user to focus on the task or job.