`Syllabus:-

Part 1 The User Interface-An Introduction and Overview

Chapter 1:- The Importance of the User Interface
Defining the User Interface
The Importance of Good Design
The Benefits of Good Design
Chapter 2:- Characteristics of Graphical and Web User Interfaces
The Graphical User Interface
The Popularity of Graphics
The concept of Direct Manipulation
Earlier Direct Manipulation Systems
Indirect Manipulation
Graphical Systems: Advantages and Disadvantages
Advantages
Disadvantages
Some Studies and a Conclusion
Characteristics of the Graphical User Interface
Sophisticated Visual Presentation
Pick-and-Click Interaction
Restricted Set of Interface Options
Visualization
Object Orientation
Properties or Attributes of Objects
Actions
Applications versus Object or Data Orientation
Views
Use of Recognition Memory
Concurrent Performance of Functions
The Web User Interface
The Popularity of the Web
Characteristics of a Web Interface
GUI versus Web Page Design
Printed Pages versus Web Pages
The Merging of Graphical Business Systems and the Web
Characteristics of an Intranet versus the Internet
Extranets
Principles of User Interface Design
Principles for the Xerox STAR
General Principles

Chapter 1: The Importance of the User Interface

 In recent times we are dealing with many modern usage tools like widgets, controls, links,
applets and we are using it as part of design process. We are now not bothered about complexity we
will be facing in the design and the methods used to overcome them. Now we are not tolerating any
mess with the software or the product used. Developers of recent times are well aware of new
technologies that they will be using to develop any applications/products. They will be using more
advanced GUI to make application/product more attractive and valuable to clients using it. With the
use of WWW web site design has added extra feature to application/product development for the
developers. Now once we design our application/product we are able to test the design using real
time values and testing methods with the help of advent in technologies. Even though we have
made vast development in the field of design, still lot of work has to be done regarding what is good
design and how to eliminate bad designs which lead to waste of time and money.

Defining the user Interface (UI)

UID is the branch of study human computer interaction (HCI), which is the study, planning and
design of how people and computer work together to satisfy person’s needs in a more effective way.
The factors considered are
 What people want and expect.
 Physical limitations and abilities people possess.
 Their perceptual and how they get and process information.
 What attracts people?
 Technical characteristics and limitations of computer hardware and software.

2 components of UI are
 Input
 Output
Input is a component through which person communicates requirements to the computer, using
keyboard, mouse, trackball, finger touch and voice.
Output is the component through which computation results are conveyed to the user through
display screen visualized through person’s audio and video capabilities. Outputs like sensing smell
and touch output need to be explored more.

The Importance of Good Design

With more advent in technologies and tools usage, motivation towards creating good designs still we
are producing systems which are inefficient/confusing/worst. The reasons are
 We don’t care?
This factor is having less effect as we care about the project or design what we do.
 We don’t possess common sense?
Different developers will be producing almost similar design for the same requirements with
support of design guidelines/standards. Users need well designed interface and screen to
view capabilities of the system, to design a system, present critical task. Screen’s layout and
appearance also plays major role, if it is poor people will stay away from it leading to
aggravation, frustration and increased stress.
 We don’t have the time?
We will be not dedicating required amount of time to get good design. We want just our
design to be ready and presented to the user in real time and meet the deadline.
 We still don’t know what really makes good design?
We the developers will not be sure what the good design is until it is tested by different
users and people. We fallow their comment and try to implant the ideas so that we get good
design finally.
The Benefits of Good Design

Here we see benefits in terms of

1) Well-designed screen---a design with poor clarity adds extra seconds to view the screen
properly and it may lead to more time if we need to view more screens in a limited time.
Benefits of well-designed screen are
o Clarity can be increased by making screen less crowded.
o Transactions are faster in modified screens compared to similar screens.
o Decision making times reduces with well-designed screens.
o Good formatting of information in the design will lead to good positive performance
of the application.
2) Well-designed web pages---home page of any website must be having enough information
to the user. The time required to search or get the required information must be less which
in turn increases hit rate of the website. Shopping websites with good design were highly
productive compared to websites with poor designs.
3) Training cost are lowered as training time is reduced, reduced assist calls and employer
satisfaction is achieved as their frustration level is reduced.
4) Improved service results in better satisfaction of organization’s customers.
5) The problems identified and solved during design and development process will have greater
economic value to the organization.

Chapter 2:- Characteristics of Graphical and Web User Interfaces

Web interfaces and GUI Interfaces are both different and are used in different ways according to the
need of the applications. They are similar in the way and they are not advancements of UI.

The Graphical User Interface

Here the interaction mechanism is a pointing device, which is an electronic equipment to human
hand. Here the objects can be seen, heard, touched or perceived. Objects are always visible to user
and perform tasks. People perform actions on objects like accessing and modifying objects by
pointing, selecting and manipulating.

The popularity of Graphics

Graphics revolutionized design and UI. Compared to text based screen which was 1D, text-n graphic
screen assumed 3D, information floated in windows, small rectangular boxes were used, windows
cascaded over other windows, controls were used more effectively, lines appeared attached to
screen and information appeared and disappeared when required. Screen navigation and
commands operated through menu bars, selection fields like radio button, combo box were also
used. Screen objects were selected through mouse/joystick.
Increased computer power enabled faster interaction between application objects and new
interface represents desktop with scattered files, trays and trashcans arrayed on screen. It is also
referred as WIMP interface: Windows, Icons, menus and pointers. Graphics add dynamicity to object
interaction with menus. It also reduces memory loads of the application along with addition of
simplicity. We can transfer information between computers and people by providing more visual
comparisons.

The Concept of Direct Manipulation

This concept used to define style of interaction for graphical system was first used by Shneiderman
(1982). The characteristics are
 The system is portrayed as an extension of the real world: - here the person is familiar with
the working with the objects and actions of the environment where he is. Person can access
and modify these objects. Here the person will be working in a comfort condition without
worrying about application and just focusing on the application itself. Unfamiliar things are
hidden from the person to avoid distraction.
 Continuous visibility of objects and actions: - here the objects are always visible and action
remainders are also available. Labelled buttons are also used, cursor action and motion
occurs naturally. Nelson described the concept as “virtual reality”, a representation of reality
that can be manipulated. Hatfield (1981) called it as WYSIWYG (what you see is what you
get). Rutkowski (1982) described it has transparency, where one’s intellect is applied to the
task not tool. Hutchins, Hollan and Norman (1986) considered it direct involvement with the
world of objects.
Here there is no direct analogy on this desk for all the necessary operations. Windows can
shrink and grow but not piece of paper.
 Actions are rapid and incremental with visible display of results: - results of the actions are
displayed immediately on screen in their new form. Auditory feedback may also be used and
impact of previous action is quickly seen. Task evolution is continuous and effortless.

Earlier Direct Manipulation Systems

Earlier full-screen text editors had similar characteristics of graphical system. Screens similar to GUI
could be created. Editing was accomplished through rapid incremental actions and results were seen
immediately. Action reversal was also possible.

Indirect Manipulation

Direct manipulation of all screen objects and actions may not be feasible because
 We cannot conceptualize operations in the GUI easily.
 Limited graphics capability.
 Space defiency for the manipulation in the windows border.
 Difficult for the people to remember all the necessary operations and actions.

To overcome these indirect manipulations are used. It replaces words and text, for symbols and
substitutes typing for pointing. Menu is an example of indirect manipulation. Many window system
are combination of both direct and indirect manipulation. Which interaction to choose direct
manipulation or indirect manipulation or combination of both has to be decided by the user?

Graphical Systems: Advantages and Disadvantages

Advantages
 Symbols recognized faster than text.
Symbols used in the graphics can be more effective than the textual display. Whatever data
inserted inside the boxes like rectangle, square, etc. will catch the attraction of the users.
Whatever icons we use in the application or window will serve. more effectively. Actions and
reactions will appear on the screen as it happens and we will be able to visualize it in better
way.
 Faster learning.
It is easy to learn when teaching aids are pictorial, graphical and interactive.
 Faster use and problem solving.
 Visual representation of the information are easy to manipulate and retain. Problems can be
solved quickly and successfully.
 Easier remembering.
User can remember operational concepts which is represented pictorially.
 More natural.
Human minds remember images more than textual data. Before the arrival of textual
messages persons were communicating with the help of symbols and these symbols which
are used in GUI are easier to understand.
 Exploits visual/spatial cues.
Spatial relationships are understood faster than the verbal relationships.
 Fosters more concrete thinking.
Displayed objects are in their high level task domain or directly visible. There is no need to
further decompose them into smaller tasks.
 Provides context.
Displayed object provides better context in the window.
 Fewer errors.
By undoing the actions we can reduce the errors happening in the application and error
messages are less frequently needed.
 Increased feeling of control.
User can control the actions happening in the window.
 Immediate feedback.
By faster feedback we can set the next actions required and if it is not as per desired we can
change the action.
 Predictable system responses.
Enhances speed learning.
 Easily reversible actions.
User can easily reverse actions, by this user can gain more control over actions.
 Less anxiety concerning use.
Here user will be working in a normal way compared to other user who are more exited.
 More attractive.
Direct manipulation systems are more entertaining, cleverer and more appealing which is
important for cautious users.
 May consume less space.
In many cases icons speak more than words and they easily minimize the space required for
the window.
 Replaces national languages.
Language based systems are more complex and transactions between languages is difficult.
This is not the case with use of icons.
 Easily augmented with text displays.
In case of limitations of GUI, text based displays a effective role.
 Low typing requirements.
Mouse/trackball eliminate the use of typing skills.
 Smooth transition from command language system.
It is easy to move from command language to direct manipulation.

Disadvantages

Graphical representation and interaction is not always better. In some cases it may be poorer then
textual displays. By putting everything into graphical format it may be injustice to user’s creativity.
These systems have become more complex and sophisticated as expansion and sometimes even
more bizarre.
The disadvantages are
 Greater design complexity.
In terms of design, complexity will be checked by more excessive use of icons in the
windows. It should be greater than value 50 for choices. Here selection of design process
plays the key role with appropriate usage of icons in the windows and better thinking. Here
skill of developer is challenged to maximum limit.
 Learning still necessary.
With improvement in the design and use of more icons developer need to learn new things
very fastly and cleverly. There is no end for learning with advances in technologies and need
to use in more speed in complex application.
 Lack of experimentally-derived design guidelines.
Guidelines will not be provided to the user until the system is completely ready. Here the
developer will not be able to go in full fledge with new icons as he is unaware of limitations
of new icons and their usage. Full guidelines will not be provided since creator will lose
competitive edge over the icons used in the window. Guidelines provided will be for
particular functions or task and these will not be generalized for all tasks.it is difficult to
frame design alternatives with increase in design complexity.
 Inconsistencies in technique and terminology.
With next version of the system there will be differences in techniques, terminologies and
look and feel due to copyright and legal rules and our increased knowledge about interface.
Learning and relearning will be burden on designers and developers.
 Working domain is the present.
With direct manipulation context user must work in present and language will take out of
the current condition and present visually. Hulteen and Walker suggested this with
reference to WYSIWYG.
 Not always familiar.
Most of the users were unfamiliar with the use of icons in the windows and transforming
graphical into textual display will be difficult while textual can be easily represented in the
graphical form.
 Human comprehension limitations.
User thinking and limitations will be challenged to greater extent with more sophistication
and complexity in the design. The more the complexity more pressure on users illusion and
replicability. User will not be able to handle more pressure of applications leading to bad
design.
 Window manipulation requirements.
These task will waste time and interrupts the decision making required to perform tasks and
jobs.
 Production limitations.
Production of recognizable symbols that are legible is limited by excessive usage of current
symbols and lack of interest on new ideas.
 Few tested icons exist.
Icons must appear in different sizes, weights and styles. By developing icons and simply
minimizing and maximizing icons will reduce and increase screen area thus affecting the
normal working with the window. Icons must be flexible as typeface which emerged 300
years ago and then released to the market.
 Inefficient for touch typists.
The person expert with keyboard may find use of mouse difficult.
 Inefficient for expert users.
By using more objects and action in the screen concatenation for a command language is not
possible.
  Not always the preferred style of interaction.
It is not preferred always, some applications shifted to textual display.
 Not always fastest style of interaction.
It was in the case of automated bank teller machine where textual instructions played major
role.
 Increased chances of clutter and confusion.
In graphical display most of the users will be thinking of filling the screen leading to
elimination of clutter on screen. More the chances of clutter more the confusion with
working of the application. According to Mori and Hayashi visible windows degraded
performance in the window being worked on.
 The futz and fiddle factor.
These tools have benefits of how to use mouse, system and being familiar with it and must
be done in moderation. According to Stromoski Office time is useful when productive work is
done and boy playing games in PC. The most popular game played is solitaire.
 May consume more screen space.
There are applications which occupy more screen space which is less efficient then textual
representation as in case of telephone directory.
 Hardware limitations.
Insufficiencies with power, processing speed, screen resolution and graphic capability limit
form full realization of GUI.

Some studies and conclusion

Best conclusion was drawn by Whiteside, Jones, Levy and Wixon(1985) with comparison of usability
characteristics of 7 systems including the direct manipulation, menu and command language styles
of interaction. Here user performance was independent of system type. Huge differences were
found in learnability and usability of all 7 systems. Different interface styles will be having their
strength and weakness. Not all are suited for GUI and few of them will easily fit into GUI.

The conclusion drawn were

 Design of an interface is the best determinant of ease of use.
 User preferences must be considered in choosing interaction styles.
 In majority of cases, words are more meaningful to users then icons.
 Graphic screen content are critical to usefulness confused by wrong presentation/clutter
presentation.
 The success of a graphical system depends on the skills of its designers in fallowing
established principles of usability.

Characteristics of the Graphical User Interface

The concepts defined are

Sophisticated Visual Presentation: - it is the visual aspect of the interface, what people see on
screen. It permits displaying lines, drawings & icons, displaying variety of character fonts with
different sizes and styles, display of more than 16 million colors, animation and presentation of
photographs and motion video. Meaningful interface elements presented to the user include
windows (primary/secondary/dialog boxes), menus (menu bar, pull down, pop-up, cascading), icons
to represent on the screen like programs/files, assorted screen based controls (text boxes, list boxes,
combination boxes, settings, scroll bars and buttons) and mouse pointer and cursor.

Pick-and-click Interaction:- elements of a graphical screen upon which some action is performed
must first be identified. The motor activity required of a person to identify this element for a
proposed action is called pick and signal to perform an action is click. It is done through mouse and
its buttons. User moves the mouse pointer to the relevant element and action is signaled. Pointing
allows rapid selection and feedback with smooth coordination of eye, hand and mind. This is also
performed using keyboard as well.

Restricted Set of Interface Options: - here user is presented with alternatives available on screen and
what
May be retrieved. It is based on WYSIWYG.

Visualization: - it is a cognitive process allowing people to understand difficult information. It slowly

displays the structure/function of the system. Visualization method used depends on what data
people want from the system. Goal is to get desired information from the system. Effective
visualization results in increased production and more accurate use of data.

Object Orientation: - objects are what people see on the screen and are manipulated as single unit.
Well-designed system focus on object not on action. Objects contain subobjects. For example if
document is object then paragraph, sentences, words and letter are subobjects. IBMs System
Application Architecture Common User Access Advanced Interface Design Reference (SAA CUA)
breaks object into 3 meaningful classes: data, container and device.
Data presents information which may be either textual/graphical appearing in the body of screen.
These are screen based controls.
Container are objects to hold other objects grouping 2 or more related objects for easy access. 3
kinds of container are workplace, folders and workareas. Workplace is the desktop to store all
objects. Folders are used for long term storage and workareas are used for temporary storage.
Device represent physical object in the real world like printers used to print the file.
Microsoft windows specify the objects characteristics based on relationship among them, classified
as collections, constraints, composite and containers. Collection is simplest relationship sharing
common aspect, resulting from query or multiple selection of objects. Operations can be applied on
them. Constraint is a stronger object relationship, changes in one object affects another object.
Example is document organized as pages. Composite exists when the relationship between objects
become significant. For example range of cells organized into spreadsheets/ a collection of words in
paragraph. Container contains other objects. For example text in a document or document in a
folder. Container may add or suppress certain properties or operations of objects placed within it.
Persistence is the maintenance of state once it is established. An objects state should always be
automatically preserved when the user changes it.

Properties/Attributes of Objects: - properties are the unique characteristics of an object, describing

an object and can be changed by users. Examples are text styles, font sizes and window background
colors.

Actions: - people perform actions on objects, manipulating in their own way. Commands are actions
that manipulate objects performed through direct manipulation or through command button,
executed immediately. For example printing a document, closing/opening a window and quitting an
application. Property/attribute specifications actions establish/modify the attributes/properties of
objects. For example cascading of windows. Sequence of property/attribute specification is user
selects an object, user selects an action on the object and action happens.

Application vs Object/Data Orientation: - application oriented is a continuation of text based

systems. Application oriented approach takes an object in terms of Action as to open the application
and object as file/object selected.
Object-action approach permits easy focus on task and minimizes the visibility of the OS and
application. It is now easy to switch between applications in real time.

Views: - this is the way to look at objects information. IBM’s SAA CUA describes 4 kind of views-
composed, contents, settings and help. Composed present information and the objects contained
within an object. Contents view list of components of objects, settings permit seeing and changing
object properties. Help provides help functions.

Use of Recognition Memory: - this eliminates out of sight, out of mind problem.

Concurrent Performance of Functions: - multiple programs run simultaneously. Background tasks are
run concurrently with primary jobs. When we are running separate tasks, processing power is
divided into time slices using preemption. Data may be transferred between programs.

The Web User Interface

Web‘s roots were sown in a market-driven society searching for convenience and information. Web
interface design is design of navigation and the presentation of information focusing on content.
Proper balancing of structures and relationships of menus and contents. Design goal is to build
hierarchy of menus and pages well-structured and easy to use. It is difficult for reasons like its
underlying design language HTML which is limited in objects and interaction styles, browser
navigation used as pre-GUI without idea of back to where and forward to where, information
architecture and task flow which are not standardized due to use of various multimedia and ill
treatment of designers. Web interface is the victim of poor foundation, explosive and haphazard
growth.

The Popularity of the Web

Web has revolutionized computing, allowing millions of peoples to access information, publish and
be heard. People can control display and rendering of web pages. Decisions concerned with the
system, use of cookies and data transfer can be made by user. Number of Internet hosts has
increased from 1000 in 1984, 10000 in 1987, 100000 in 1989, 300000 in 1990 and crossed 1 million
in 1992. In 1993 internet traffic was expanding at 341,634 percent annual growth rate and in 1996
there were 10 million hosts online and 40 million connected people.
Downside were users concern about design, slow download times, confusing navigation and page
organization, disturbing animation and user abandonment of sites.

Characteristics of a Web Interface

GUI vs Web Page Design (Berry, 2000 and Nielson 1997a)

GUI Web
Device User hardware variations limited. User hardware variations enormous.
User hardware characteristics well Screen appearance influenced by
defined. hardware being used.
Screens appear exactly as specified. No assumptions about the UIs devices
Characteristics of interface devices like can be made.
monitors and modem are well defined. Differences in screen area between a
Differences in screen area between a laptop and high end workstation is
laptop and high end workstation is factor of 100.
factor of 6. WYSIWYG does not exists here.
 WYSIWYG exists here.
User Focus Data and applications Information and navigation.
Data/ Typically created and used by known Full of unknown content.
Information and trusted sources. Sources not always trusted.
Properties generally known. Often not placed onto the web by
Typically placed into system by users/unknown people and
users/known people and organizations. organizations.
Typically organized in a meaningful Highly variable organization.
fashion. Privacy often suspect.
A notion of private and shared data
exists.
User tasks Install, configure, personalize, start, use, Link to a site, browse/read pages, fill out
and upgrade programs. forms, register for services, participate
Open, use, and close data files. in transactions, download and save
Fairly long times spent within an things.
application. Movement between pages and sites
Familiarity with applications often very rapid.
achieved. Familiarity with many sites not
established.
User’s Controlled and constrained by program. Infinite and generally unorganized.
Conceptual
Space
Presentation Windows. Menus, controls, data, Two components, browser and page.
Elements toolbars, messages and so on. Within page, any combination of text,
Many transient, dynamically appearing images, audio, video, and animation.
and disappearing. May not be presented as specified by
Presented as specified by designer. the designer-dependent on browser,
Generally standardized by toolkits and monitor, and user specifications.
style guides. Little standardization
Navigation Through menus, lists, trees, dialogs, and Through links, bookmarks, and typed
wizards. URLs.
Not a strong and visible concept. Significant and highly visible concept.
Constrained by design. Few constraints, frequently causing a
Generally standardized by toolkits and lost sense of place.
style guides. Few standards.
Typically part of page design, fostering a
lack of consistency.
Context Enables maintenance of a better sense Poorer maintenance of a sense of
of context. context.
Restricted navigation paths. Single page entities.
Multiple viewable windows Unlimited navigation paths.
Contextual clues become
limited/difficult to find.
Interaction Interaction such as clicking menu Basic interaction is single click. This can
choices, pressing buttons, selecting list cause extreme changes in context,
choices, and cut/copy/paste occur which may not be noticed.
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.
Visual Style Typically prescribed and constrained by Fosters a more artistic, individual, and
 toolkit. unrestricted presentation style.
Visual creativity allowed but difficult. Complicated by differing browser and
Little significant personalization. display capabilities and bandwidth
limitations.
Limited personalization available.
System Unlimited capability proportional to Limited by constraints imposed by the
Capability sophistication of hardware and hardware, browser, software, client
software. support, and user willingness to allow
features because of response time,
security, and privacy concerns.
Task Efficiency Targeted to a specific audience with Limited by browser and network
specific tasks. capabilities.
Only limited by the amount of Actual user audience usually not well
programming undertaken to support it. understood.
Often intended for anyone and
everyone.
Consistency Major objective exists within and across Sites tend to establish their own
applications. identity.
Aided by platform toolkit and design Frequency standards set within a site.
guidelines. Frequent ignoring of GUI guidelines for
Universal consistency in GUI products identical components, especially
generally created through toolkits and controls.
design guidelines.
User Assistance Integral part of most systems and No similar help systems.
applications. The little available help is built into the
Accessed through standard mechanisms. page.
Documentation both online and offline Customer service support, if provided,
usually provided. Oriented to product/service offered.
Personal support desk also usually
provided.
Integration Seamless integration of all applications Apparent foe some basic functions
into the platform environment a m ajor within most web sites.
objective. Sites tend to achieve individual
Toolkits and components are key distinction rather than integration.
elements in accomplishing this
objective.
Security Tightly controlled, proportional to Renowned for security exposures.
degree of willingness to invest resources Browser-provided security options
and effort. typically not understood by average
Not an issue for mot home PC users users.
When employed, may have function-
limiting side effects.
Reliability Tightly controlled in business systems. Susceptible to disruptions caused by
Proportional to degree of willingness user, telephone line and cable providers,
To invest resources and effort hosting servers, and remotely accessed
sites

Printed Pages vs Web Pages

Printed Pages Web Pages
Page size Larger then web counterparts. Smaller then printed pages.
Fixed in size. Variable in size.
 Can be designed as one entity. Designed as complete entity with
Visual impact maintained in hard-copy presented as pieces of different
form. dimensions.
Visual impact is degraded and some
parts not visible.
Page rendering Superior to web pages. Inferior to printed pages.
Presented as complete entities and Rendered slowly depending upon line
their contents are available for transmission speed and page content,
reading/review immediately upon diminishing both reading and writing
appearance. speeds.
Page layout It is precise with attention driven. It is more an approximation
influenced by deficiencies in design
toolkits and characteristics of user’s
be browser and hardware.
Page Resolution exceeds that of screen Provide an easy way to print long
resolution characters and slower screen reading. web documents.
User focus Present people with entire set of Present people with individual
information. snapshots of information, providing
Estimation easily made for documents more details about structure and
with help of size and nature of material. sequence and less information about
Reading is sequential and partial. length and depth.
Unlimited body of web page
information leading to different
information paths.
Page Navigation is simple. Navigation requires link to be
Navigation Interaction is rare as process is fallowed.
sequential. Link may solve the user need or
problem.
Sense of place We drive where we are through a Moving cause radical shifts in location
mixture of graphic and editorial and context.
organization. Paging is using browsers back button.
It is an orderly process, sequential and No fixed memory locations leading to
understandable. confusion among users.
Interactivity Eyes traverse static information, Hands move the information in
selectively looking at information and conjunction with the eyes.
using spatial combination to make page Information relationships,
elements enhance. static/dynamic are expressed
chronologically as part of interaction
and user movements.
Page These pages are not independent as Web pages can be accessed from
independence they are sequential, standard and anywhere, they must be
provide a clear sense of space. freestanding.
Specific type of content are easily Provide informative headers and
found. footers on each web pages.

The Merging of Graphical Business Systems and the Web

Web is able to link databases and processing occurring on a different machines within an
organization. In a closed system, queries against databases can be made, internal communication
performed and useful information is made available for employees. Both graphical business system
and web will merge into a common entity, called as intranets.
Characteristics of an Intranet vs the Internet. (Nielson 1997b)

Intranet Internet
Users Know a lot about organization, its Customers will be using it and care
structure, its products, its jargon less about the organization.
and its culture. Characteristics and needs cannot
Characteristics and needs can be be specifically defined.
much more specifically defined
Tasks Tasks are complex transactions, Used to find information with
queries and communications which simple transactions.
are part of organization.
Type of information Detailed information about More stable information like
organizational functioning. marketing information.
Amount of Larger then organizational internet Smaller then intranet size.
information site.
10 to 100 times of internet site.
Hardware and Restricted kinds of PC, monitors, It can be used on any PC, monitors,
software browsers and software’s browsers and software.
Cross-platform compatibility is Cross platform compatibility is
eliminated. present.
Can run 100 to 1000 times faster Slower than intranet.
than internet. Faster download.
Use of rich graphics slows the
download.
Design Philosophy Implementation will have a user Implementation will be made on
model similar to GUIs, with removal the browsers which will be used
of useless features making it more for search.
effective than GUIs HTTPS provides secure search of
data.

Extranets

It is a special set of intranet web pages accessed from outside and organization/company. Examples
are letting customers check on an order’s status/letting suppliers view requests for proposals. It is an
blend of the internet and intranet.

Principles of User Interface Design

Interface must be a support to the person. Both system and software must reflect person’s
capabilities and satisfy needs. Interface must be better and faster than the previous solution
provided by the application. Interface should act as both separator and connector, by connector it
means that interface must be able to connect the concerned people/group of people to the
computer and by separator means
It should be able to minimize the number of users connected to the system to avoid the damages.
Here the damage maybe physical or psychological, physical damages happen due to frustration, here
the people may crash computer parts and psychological damage hurt person’s ego. These principles
define what we know today and what we think know today.

Principles for the Xerox STAR

The person’s involved in framing the principles for design of the Xerox STAR are Smith, Harshlem,
Irby, Kimball and Verplank from the year 1982 to 1988, leading the foundation for graphical
interfaces. These principles are
 The Illusion of manipulable objects: - Displayed objects created must be selectable and
manipulable. These objects must be represented in the meaningful way in the application.
Selected objects will be of focus of the next action and they must be selected in proper way.
Verplank calls this as “graphics with handle on it”. Standalone icons were able to fulfill this
and handles for windows were placed in the borders like window specific commands, pop-
up menus, scroll bars, etc.
 Visual order and viewer focus: - Attention on the important aspect of the application must
be drawn at the appropriate time to show major elements. By effective visual contract
between various screen components this is achieved and different attention mechanisms
like anim ation, user feedback and pointer can be used. STAR is monochromatic and
supports no color.
 Revealed structure: - the distance between user intention and effect must be minimized. The
major factor causing this problem is growth in technology and computing systems. We
should be able to minimize the gap between user requirements and technology of systems.
The requirements should support all the applications which are new in the market.
 Consistency: - consistency should be given in the field of element location, grammar, font
shapes, styles and sizes, selection indicators and contrast and emphasis techniques.
 Appropriate effect/emotional impact: - interface must provide appropriate emotional effect
for the product and its market in the fields of corporate, professional, secure business
system, etc.
 A match with the medium: - interface must provide the capabilities of the device on which it
will be displayed majorly affected by device’s resolution and color-generation capabilities.

General Principles

The principles here are fundamental to the effective design and implementation of all interfaces,
including GUI and web, applied on all aspects. There are 18 principles

1. Aesthetically pleasing:- we provide visual appeal by using presentation and graphic design
principles
 Provide meaningful contrast between screen elements.
 Create groupings.
 Align screen element sand groups.
 Provide 3D representation.
 Use color and graphics effectively and simply.
By fallowing these principles we will be able to make the screen elements visually effective
and attractive to the clients. A poor design will fail in this factor and lead to bad market
value. A good design must be visually pleasing and use color and graphics in meaningful way.
A disoriented design will be having lack of space between screen elements, whereas good
design will have proper spacing, power, functionality and simplicity.

2. Clarity: - interface should be visually, conceptually, linguistically clear with Visual elements,
functions, Metaphors and words & text. Visual elements must be understandable and relate
real world concepts. Functions should be realistic and simple. Words & text must be
unambiguous and must not contain computer jargon.

3. Compatibility: - We should provide compatibility with

  User: - design must meet the needs of users/client with appropriate methods.
Effective design understands users needs and their point of view. Errors that are
common among designers are they think users are all same and they think like
developers. Users will be having their own needs and thinking which should not be
linked to developers thinking. Here the principle fallowed is “Know the user”.
 Task and Job: - organization tasks must match with the task of the employee.
Employee should be given easy transaction between tasks and he must not be
forced to navigate between different applications to complete routine tasks.
 Product: - once the product is developed we should make users to use it in better
way. If we consider user stick on to previous methods of using product then he will
not be able to use the modified product, leading to loss of value in market. We
should educate them to how to use new product and what are the differences
between old and new one. We should see that the requirements of user are modern
and meets the new system requirements.

4. Comprehensibility: - user should learn the system easily and faster. User should know what
to look at, what to do, when to do it, where to do it, why to do it and how to do it. The
sequence of working of the application must be clearly known with easy. Explanations
regarding complex task should ne minimum.

5. Configurability: - user should be able to personalize, configure and reconfigure settings when
required. By doing this they will be having control over application and active role in
understanding the application flow. Some of them will try to experiment new things, some
will accept as it is and while some try until they are frustrated.

6. Consistency: - similar components should have similar look, users and operate in same way.
Same actions will yield same results always, with similar functions and position of standard
elements. It reduces need for human learning as same skills can used to another similar
application. Inconsistencies requires more specialization by system users, higher skills, more
preparation time and less production time, changes in procedures frequently, more error
tolerant systems, documentation work increased, more search time, demand on supervisors
and managers, going wrong many times and more learning with changes in design.
Inconsistencies in design are caused difference of opinions, forced by time constraints. Too
much of new learning to the system users will lead to performance breakdown and lack of
control over application. Inconsistency increases thinking time twice compared to
consistency. In 1980s guidelines were formed for GUIs, how to work with windows.
Some of the example of industry-produced guidelines are Apple’s Macintosh Human
Interface Guidelines (1992b), Digital Equipment Corporation’s XUI Style Guide (1988), IBMs
System Application Architecture Common User Access (1987, 1989a, 1989b, 1991, 1992),
Sun Microsystem’s OPEN LOOK GUI Application Style Guidelines (1990), Open Software
Foundation’s OSF/MOTIF Style Guide (1993) and Microsoft’s The Windows Interface (1992)
and The Windows Interface Guidelines for Software Design (1995). Organizations working on
traditional guidelines/standards include ISO, ANSI and Human Factors and Ergonomics
Society (Billingsley, 1996). Web design guidelines were under the focus in WWW consortium
(2001).

7. Control: - user must be able to control the interactions like actions resulting from explicit
user requests, quickly performing it, must be interrupted/terminated when required, user
 never interrupted for errors. User perspective context must be maintained. Goals should be
achievable with minimum skills of users and user must be allowed to customize the interface
aspects with proper defaults.
Control is the feeling of response to the actions. Machine controlling user is not acceptable
and user must be able to control the flow of the application in the way he/she wants. User
decides what to do, how to do and when to do the actions. Lack of control is identified by
unavailable systems, long time to response, long procedures and uncharacteristic behavior
of the system.

8. Directness: - task should be completed in direct ways with alternatives to execute it and by
making effects of actions on objects visible. User’s mental load should be reduced and fallow
object-action sequence where we select the object, select action and watch action being
performed on object.

9. Efficiency: - we should minimize the eye and hand movements and other control actions.
Transactions between various systems control should flow easily and freely. Short navigation
paths. Eye movement through screen should be obvious and sequential. Guess user wants
and needs. Web pages must be scanned easily. Avoid frequent transitions between
keyboard and mouse.

10. Familiarity: - use familiar concepts and languages. Interface should be natural, mimicking
user’s behavior. Use real world metaphors.

11. Flexibility: - system must be sensible to the different user needs, enabling a level and
performance type based upon user’s knowledge and skills, experience, personal preference,
habits and condition at that movement. There must be multiple ways to perform task,
through system customization with more user control and versatility. It appears desirable
only for experienced users. Flexible things will not be used by all the users, they will be
comfortable with existing setup and use that.

12. Forgiveness: - tolerate and forgive common and unavoidable human errors. Prevent errors
from occurring whenever possible. Protect against catastrophic errors and when error
occurs provide constructive messages. People like to explore and learn by trial and error.
Sensitive systems will prevent the user from exploring. Learning will be slow and cautious.
Fear of making mistakes and unrecoverable will lead to fear of using PC. Production gets
affected by cautious work. Peoples should be permitted to review, change and undo actions.
Avoid testing of tragic applications and present error correction information whenever the
error occurs.

13. Predictability: - user should be able to anticipate the task progression. User should provide
distinct and recognizable screen elements and predict the result of the action to be
performed. All expectations should be fulfilled uniformly and completely. Anticipation
should be done on user’s previous knowledge and experience. All actions should produce
user desired result. Distinct screen elements. Anticipation reduces mistakes and enables
faster task completion.

14. Recovery: - A system should permit commands/actions to be abolished/reversed and

immediate return to a certain point if difficulties arise. Ensure that users never lose their
 work due to their error and h/w,s/w or communication problems. User can retract an action
by using undo command, with return point as previous action/screen, a recent closure point
or beginning of some predetermined period. This is done to choose a correct track.

15. Responsiveness: - the system must rapidly respond to the user’s requests. Provide
immediate acknowledgement for actions like visual, textual and auditory. User requirements
must be responded too quickly. Knowledge of feedback is required, shaping human
performance and confidence. All requests to the system must be acknowledged. Feedback
must be visual. Screen should never be blank. Provide in-progress message for long delay in
the request processing.

16. Simplicity: -interface should be simple. 5 ways to provide simplicity are

 Use progressive disclosure.
Introduce system complexity gradually to hide full complexity initially. Teach
fundamentals first, then move towards advanced functions. This approach is called
layered/spiral approach of learning, described by Carroll and Carrithers (1984) who
called it Training Wheels System. This was done by disabling portions of the system
that lead to confusion.
 Provide defaults.
It is another form of system layering, provided for all system configurable items at
initial stage. New user will be able to focus on fundamentals. Defaults can be
changed on user experience.
 Minimize screen alignment points.
Large number of alignment points of elements displayed on screen are associated
with greater screen visual complexity. It minimizes visual complexity.
 Make common actions simple.
Actions should be easier to accomplish then uncommon actions, increasing
efficiency.
 Provide uniformity and consistency.
Inconsistency forces person to learn things that appear different but not different.
Simplicity is opposite of complexity, which is a measure of choices available at any point in
the HCI. Complexity is most often overwhelms and confuses new and casual users of the
system. Complex systems are used ineffectively. A system lacking complexity may be tedious
to use much. Complexity is 2 edged sword, to solve problems it must be present without
being apparent.

17. Transparency: -permit the user to focus on the task/job, without worrying about interface
mechanisms. Working and reminders of workings inside the computer should be invisible to
the user. User should not think about technical details of the system.

18. Trade-Offs: -final design will be based on a series of trade-offs balancing often-conflicting
design principles. People’s requirement always take precedence over technical
requirements. Vast design guidelines conflict with one another’s technical requirements.
Here designer must weigh the alternatives and reach a decision based on trade-offs
concerning accuracy, time, cost and ease of use, with through understanding of user and all
design considerations. Ultimate solutions will be blend of experimental data, good
judgement and the important user needs. Human requirements always take precedence
over technical requirements.