UNIT - 1

INTRODUCTION TO HCI AND GUI

 INTRODUCTION

 IMPORTANCE OF USER INTERFACE, DEFINITION

 Human-Computer Interaction (HCI) is the study of how people interact with computers and
how to design systems that are easy and useful for them.

 Importance of Human-Computer Interaction:

− HCI helps to create systems that are simple, fast, and easy to use.

− It makes sure the system is designed by keeping users in mind.

− It increases user satisfaction and reduces mistakes.

− It helps people of different abilities to use systems easily.

− It improves the overall success of the software or system.

 Factors affecting Human-Computer Interaction:

− People’s skills, needs, and expectations affect how they use systems.

− Physical issues like eyesight or hand movement can change how a system should be designed.

− If a system is slow or confusing, it becomes harder to use.

− If the task is complex or repeated often, the design should make it easier.

− Things like lighting or noise in the room also affect how well someone can use a system.

 User Interface (UI) is the part of a computer or software that the user interacts with through
screens, buttons, sound, or touch.

 Input is how a user gives commands or information to the system, like using a keyboard,
mouse, or voice.

 Output is how the system shows the result, like through a screen, sound, or printout.
 Importance of User Interface:

− A good interface makes the system simple to use.

− It helps users finish their work quickly and easily.

− It saves time and effort for the user.

− It makes the system easier to learn.

− It helps the system or app become more popular and successful.

 Chronological History of Graphical User Interface (GUI)

1970s:

The idea of GUI began in the 1970s. The Xerox Palo Alto Research Center (PARC) played a major role
in developing the first graphical user interface. They introduced windows, icons, menus, and
pointing devices (like the mouse). This was a major step away from text-based systems.

1980s:

In the early 1980s, Apple used GUI in its Apple Lisa computer and later in the Macintosh, making
GUI more popular and available to regular users. Around the same time, Microsoft introduced
Windows, which also used GUI. This decade saw the shift from command-line to graphical systems
in the personal computer market.

1990s:

GUI became common and more advanced. Microsoft Windows versions (like Windows 95) became
very popular. GUIs started supporting more colors, better icons, improved interaction, and
multimedia. Computers became more user-friendly.

2000s:

Graphical interfaces became more stylish, interactive, and touch-based. Operating systems like
Windows XP, Mac OS X, and Linux with GUI desktops became widely used. GUIs were also used in
mobile phones and other devices.

2010s and Beyond:

Modern GUIs became more focused on touchscreens, gesture control, and voice interfaces.
Smartphones, tablets, and smart devices rely heavily on GUI. Designs became cleaner and more
focused on user experience.

 IMPORTANCE OF GOOD DESIGN

 A design is said to be good if it is a combination of well-planned input and output procedures

that successfully meet the user’s needs.

 A good design helps the user focus on the data and activity, and provides the necessary
information to perform tasks without needing any special instructions.

 Importance of Good Design

1. A good design is very useful in analyzing system performance because it connects users to the
system clearly.

2. It acts as a main part in completing several common tasks in the system through its layout and
look.

3. If the design is confusing, users face problems and may stop using the system altogether.

4. Bad design can cause health problems like stress, frustration, or aggressiveness in users.

5. Developers should focus on producing designs that are fast, clear, and help users complete
their tasks easily.

 BENEFITS OF GOOD DESIGN

1. It increases the manufacturing rate and demand of the product in the market.

2. If screens are unclear, users take more time. So, good design offers improved clarity.

3. Researchers reduce screen clutter by putting distinct items together, helping clarity.

4. Some screens help users finish tasks with fewer errors and in less time.

5. Good design helps users take faster and better decisions.

6. Proper layout of data improves system performance and reduces company costs.

7. Good design reduces training costs.

8. It increases user satisfaction and reduces stress, frustration, and anger.

9. It saves money by fixing design errors early instead of after product release.

10. It reduces development time by using fewer corrections and rework.

 Impact of Inefficient Screen Design on Processing Time

− Inefficient screen design increases processing time because users take longer to understand or
locate information.

− Poor layout and unclear elements cause more errors, which slows down task completion and
increases overall processing time.

− Confusing designs reduce user efficiency and delay the speed of interactions, affecting system
performance.

− Increased processing time due to bad design leads to user frustration and reduces productivity.

 A BRIEF HISTORY OF SCREEN DESIGN

 1970s Screen Design

 Inefficient screen design increases processing time because users take longer to understand or
locate information.

 Poor layout and unclear elements cause more errors, which slows down task completion and
increases overall processing time.

 Confusing designs reduce user efficiency and delay the speed of interactions, affecting system
performance.

 Increased processing time due to bad design leads to user frustration and reduces productivity.

 1980s Screen Design

 Screen designs improved with better layout and ordering of elements.

 Headings were used for different areas to make it easier for users to understand.

 Messages were clearer, but some commands still needed to be memorized.

 Prompts and instructions were added to help users choose actions.

 Some codes (like NN, CC, OOSD) were still shown to guide users.
 1990s and Beyond Screen Design

 Graphics and colors were added to improve the look and feel of screens.

 Elements like buttons, boxes, and lists replaced complex command keys.

 Users no longer had to memorize codes; controls were shown on the screen.

 Features like size, style, line thickness, and color were introduced.

 Screen designs became more user-friendly, organized, and easy to navigate.

 THE GRAPHICAL USER INTERFACE

 POPULARITY OF GRAPHICS

 A user interface is a set of techniques that allow users to interact with a system.

 A graphical user interface (GUI) is a type of interface where users use a pointing device, like a
mouse, to communicate with the system. In GUI, users interact through objects that appear on
the screen.

 Properties of Objects in GUI

1. Objects can be seen, heard, or felt and are easy to understand during use.

2. Each object works independently and does not rely on other objects to function.

3. Objects can be used through actions like opening, editing, or changing them.

4. Objects follow standard behaviors and look different from one another clearly.

 Graphics Popularity

− Graphics became popular because they changed how user interfaces looked and worked.
Earlier, screens had a flat, text-based design.

− With graphics, screens looked more like windows layered on top of each other. These small
window boxes made the screen more attractive and easier to use. The ability to move windows
and show different content made graphics more powerful and flexible.

 Features of a Graphical System

1. Graphical systems show movement when controls are activated, allow visibility or hiding of
content, and use icons (small images) instead of text for better understanding.

2. They support the use of menu bars, pull-down menus, and pop-up menus for navigating and
executing commands easily.

3. Users can interact using input options like radio buttons, checkboxes, list boxes, and palettes to
make selections or enter data.

4. Pointing devices such as a mouse or joystick are used to select objects and perform actions on
the screen quickly and easily.

5. These features improve information processing, reduce memory load, enable faster content
sharing between systems, and keep the content well-structured and organized.

 THE CONCEPT OF DIRECT MANIPULATION

 Direct manipulation is a type of user interaction in which users control objects on the screen
directly using graphical elements.

 Users can perform actions like selecting, dragging, or editing objects through visual tools,
instead of typing commands. This method makes the interface more interactive, simple, and
easy to understand.

 Features of Direct Manipulation

1. The system acts like a part of the real world. Users see familiar objects and can interact with
them directly. The system’s internal structure is hidden so that users stay focused on their task.

2. Objects and their actions are always visible on the screen. Buttons and labels are used instead
of complex commands, making the system easier to use.

3. Any action performed by the user shows instant results on the screen, often with visual or
sound feedback.

4. If a user makes a mistake, the action can be reversed or undone quickly.

 Problems with Direct Manipulation

− Direct manipulation can be difficult to perform for certain complex actions.

− The system may not support all graphical features needed.

− There may not be enough space on the screen to place all control buttons.
− It can be hard for users to remember all the actions and how to perform them.

 Indirect manipulation uses text or menu-based options instead of graphical actions. Users may
type commands or select options from a list rather than directly clicking or dragging objects.
Both direct and indirect methods are used in systems like Windows.

 Example: When a user points at a menu and clicks to open it, that is direct manipulation. When
they choose a command from the menu using the mouse or keyboard, that is indirect
manipulation.

 GRAPHICAL SYSTEM, CHARACTERISTICS

 A graphical system is a user interface that allows users to interact with the system through
graphical elements such as windows, icons, menus, and pointing devices.

 Characteristics of a Graphical System

1. Advanced Visual Presentation

Graphical systems support high-quality visuals, including more than 16 million colors, animations,
photos, and motion videos.

The interface provides several meaningful elements to make interaction easier, such as:

− Windows: Primary, secondary, and dialog boxes

− Menus: Menu bars, pull-down, pop-up, and cascading menus

− Icons: Visual representations of files, programs, or actions

− Screen-based controls: Text boxes, list boxes, combo boxes, scroll bars, and buttons

− Pointer and cursor: For selecting and interacting with on-screen objects

2. Interaction Using Pick and Click

The user interacts by selecting (pick) and confirming (click) elements on the screen using a mouse.
For example, to perform an action, the user moves the pointer to an icon (pick) and presses the
mouse button (click). The same actions can also be done using a keyboard.
3. Visualization
Visualization helps users understand large or complex data by using graphical images. These visuals
don’t just show real-world pictures but are designed to make important information clear. This
improves accuracy and speed of understanding and increases productivity.

4. Behavior of Objects
A key feature of graphical systems is the interaction between objects and actions.

 Objects are visible elements that appear on the screen, such as documents, icons, or images.

 Actions are operations that users perform on these objects, such as opening, editing, deleting,
or moving them.

Users mainly focus on manipulating the objects rather than on how the system processes the
actions internally. Objects may also contain smaller sub-objects (e.g., a document contains
paragraphs, sentences, and words).

 Types of Objects:

a. Data Objects: These display information like text or images directly on the screen.

b. Container Objects: These are used to store or group other objects to simplify management and
retrieval. Types of container objects include:

− Workplace: A long-term area like the desktop where multiple objects are stored.

− Folders: Used to group and organize related files or objects.

− Work Area: A temporary space where currently active or open objects are placed for short-term
operations.

c. Device Objects: These represent real-world devices (e.g., printers, trash bins). They are linked to
certain actions—for example, placing a file into a printer icon prints the file.

 Object Relationships:

a. Collection: This relationship involves a group of objects that share common features or belong
to a selected group. For example, the results of a search can form a collection.

b. Constraint: In this relationship, a change in one object affects another object in the same group.
For example, editing a document may affect how pages are arranged.
c. Composite: This relationship treats multiple objects as one single object due to their strong
connection. For example, a paragraph is a composite of sentences and words grouped together
meaningfully.

5. Extensive Use of Recognition Memory

Graphical systems reduce the need to memorize commands by keeping important objects and
actions visible at all times. This makes it easier for users to recognize and use features without
confusion.

 Advantages of Graphical Systems

1. Graphical systems are easy to use because they allow users to work through pictures, icons, and
menus.

2. They reduce the need to remember commands, as actions can be done by clicking on visual
elements.

3. They give clear visual feedback, helping users understand and complete tasks correctly.

4. They help users see and understand large or complex information quickly and accurately.

5. These systems allow users to work on more than one task at a time and improve overall user
experience.

 Disadvantages of Graphical Systems

1. They need more computer memory and speed, which may slow down older or basic systems.

2. Creating graphical systems takes more time and money compared to simple text-based
systems.

3. They may not be suitable for expert users who prefer faster control through typed commands.

4. Too many icons, windows, or options on the screen can confuse the user.

5. They are not always ideal for tasks that are repeated many times or done in large groups.

 WEB USER INTERFACE POPULARITY, CHARACTERISTICS

 A web refers to a collection of information where users can access unlimited data through web
interfaces.
 Web interface design is about creating a layout that manages the flow of data and shows it
clearly so that it is easy for users to understand and access. A good web interface maintains a
proper structure and balance between menus, content, and links (such as documents or
graphics), helping users view and analyze the information easily.

 Difficulties in Designing Web Interfaces

− HTML, which is commonly used for web design, can only be used by technical users. Common
users find it difficult to use because it lacks easy interaction and does not present content in a
very effective way.

− Before graphical systems, browsers required users to remember command lines, which made
movement and structure difficult to understand. GUIs removed this issue by using menus.

− There are two types of movement in browsers: 'Forward' and 'Back'. Since users often don’t
know where they are going or coming from, it becomes hard to keep track. Buttons and targets
may also be invisible, making navigation confusing.

− When dealing with online forms like filling, submitting, or resetting, users need proper
interaction methods. These forms require a clear design for smooth communication between
user and system.

− Designing and displaying large amounts of information is difficult. It requires a good level of
understanding from users to properly use and understand the web content.

 Web Popularity

− The web has changed how computing works. It allows users across the world to interact, get
content, and share their own content. Every user can now control how their data looks and is
displayed.

− Some of the common features that increased web popularity include font styles, colors, alerts,
and controls like accepting or rejecting cookies. As the internet became more widely used, the
number of users increased from thousands to millions over the years.

 Characteristics that Differ in Web Interface and Graphical User Interface

1. User Focus:
GUI systems are designed for applications, transactions, and processes. Users need a complete
understanding of the interface to finish their tasks.

Web interfaces allow users to gather information from different websites and sources without
needing to understand how the system works.

2. Movement:

GUI uses structured navigation paths such as menus, lists, trees, and dialogs. Movement is guided
by design rules and is consistent.

Web interfaces use links, URLs, and bookmarks. There is no fixed structure, so users may lose their
sense of direction while browsing.

3. Content/Data:

GUI content is mostly provided by trusted sources such as the user's organization, ensuring data
privacy and clarity.

Web content is provided by unknown sources and cannot always be trusted. Data privacy is
uncertain.

4. Reliable:

GUI systems are more reliable because organizations invest in their performance and resources.

Web systems may face issues like connection failures, restricted access, or service outages, making
them less reliable.

5. Security:

GUI provides better data protection, with proper authorization and access control.

Web interfaces are less secure. Data is shared over public networks, which may expose users to
threats.

6. Efficiency of Task:

In GUI systems, tasks are supported by well-designed programs and are efficient for repeated tasks.
Web task efficiency depends on the user's understanding and the performance of browsers and
internet speed.

7. Assistance to User:

GUI offers user assistance through help keys, messages, and menus. It guides the user with system
feedback.

Web systems offer limited or no assistance. Customer service is often needed to resolve issues.

8. Visible Styling:

GUI design follows toolkit limitations, and screen customization is minimal.

Web design allows artistic and flexible styling, but it depends on browser capability and may cause
layout issues.

 Compare the Print Page Design and Web Page Design

1. Size of the Page:

Printed Pages are fixed in size and usually designed as complete documents.

Web Pages adjust according to the user's browser and screen size, making them scrollable and
dynamic.

2. Resolution of Page:

Printed Pages have high-resolution text, making them easier to read and sharp in detail.

Web Pages also support high resolution but can be slower to load due to page size and internet
speed.

3. Movement of Pages:

Printed Pages are flipped sequentially like a book, which is predictable and linear.

Web Pages involve clicking on links to navigate, which may confuse users if link destinations are
unclear.

4. Sense of Place:
Printed Pages give a clear idea of document layout and design, making it easy to know where you
are.

Web Pages often make users lose track of their location in the document due to multiple links and
pages.

5. Interaction:

Printed Pages allow passive interaction—reading or highlighting.

Web Pages allow active interaction—scrolling, expanding, clicking, and exploring different sections.

 The Internet is a global network that connects millions of computers and devices around the
world. It allows people to access websites, send emails, and share information using unique IP
addresses. Users can open websites by typing their domain names, which are translated into IP
addresses for access. The internet is open to everyone and can be accessed publicly, but the
data security is not always guaranteed.

 An Intranet is a private network used within an organization. It connects the computers and
resources like printers or files, but only authorized users within that organization can access it.
Intranets are managed through internal web servers and protected by firewalls. They are useful
for secure communication, document sharing, and internal operations, making them efficient
for delivering company-specific information.

 An Extranet is an extended version of an intranet. It allows controlled access to certain parts of

a company’s internal network to external users like business partners, suppliers, or customers.
Extranets use security methods like firewalls, encryption, and VPNs to ensure safe data
exchange with trusted users outside the organization.

 Difference between Extranet and Internet:

The Internet is open and public, allowing anyone to access information freely. In contrast, an
Extranet is private and secure, giving limited access only to selected external users. While the
internet serves general communication, the extranet is used for secure business collaboration
with outside parties.

 PRINCIPLES OF USER INTERFACE

1. Pleasing Appearance and Understanding

A good user interface should look attractive and well-organized. The layout should be neat and
should help users easily understand where to look and what to do. A pleasant and clear
interface reduces confusion and helps users complete tasks with comfort and confidence.
2. Compatibility

 User Compatibility: The interface should match the skills, habits, and expectations of the user. It
should feel natural and easy to interact with.

 Task and Job Compatibility: The design must support the actual tasks users want to perform. It
should help them complete jobs without unnecessary steps.

 Product Compatibility: The system should work well with other related systems or devices that
the user might already be familiar with.

3. Uniformity
Uniformity means using the same style, layout, and interaction method across all screens and
parts of the system. This helps users learn the system quickly and reduces the chances of
errors, because the interface behaves in a predictable way.

4. Efficiency
The interface should allow users to finish their work quickly and easily. It should reduce
unnecessary steps and provide shortcuts or automation for frequent actions. Efficiency
improves user satisfaction and system productivity.

5. Recovery
The system should help users fix their mistakes easily. For example, undo and redo options,
helpful error messages, or confirmation prompts before major actions. This makes users feel
more confident while using the system.

6. Simplicity
The design should be simple and clear. Too many elements or complicated features should be
avoided. Simple interfaces are easier to learn and use, especially for new users.

7. Feedback
The system should provide clear feedback for every user action. For example, when a button is
clicked or a file is saved, the user should get a response from the system. This feedback helps
users know whether their action was successful.

8. Flexibility
The design should allow different ways of doing the same task. This helps users with different
skill levels or preferences. For example, both mouse and keyboard shortcuts can be provided
for the same action.
 Xerox Star

− Xerox STAR was one of the first computer systems designed with a complete graphical user
interface (GUI).

− The system introduced many important interface design ideas that later became standard in
modern computer systems, like the use of icons, windows, and folders.

− Xerox STAR focused on making the computer easy to use by designing the interface based on
real-world objects and actions.

− Principles of Xerox STAR Interface Design

1. Illusion of Manipulable Objects

This means that only the important and useful objects are displayed on the screen. Unnecessary or
confusing elements are hidden. The user sees only what is required to perform the task, which
keeps the screen clean and focused.

2. Visual Order and Viewer Focus

The screen layout is arranged in a way that guides the user’s attention to the most important parts.
The order of items and their placement help users to understand what to do and where to look
first. 3. Revealed Structure

The design shows how the data and tasks are organized. It helps users understand how different
elements are connected or grouped. For example, folders contain files, and menus contain
commands — this structure is visually clear to the user.

3. Consistency

All parts of the system follow the same design rules. This means buttons, menus, and commands
work in a similar way across different screens. Consistency helps users learn the system quickly and
reduces errors.

4. Proper Effect or Emotional Impact

The system’s appearance and behavior should feel comfortable, trustworthy, and satisfying to the
user. It should not cause confusion or irritation.

5. Match with the Medium

The design should fit the device or platform where it is being used. For example, a desktop system
may use windows and icons, while a mobile app might use touch-based interactions.