Department of Computer Engineering

Lab Manual
Final Year Semester-VIII
Subject: Human Machine Interaction

Even Semester
Institutional Vision, Mission and Quality Policy

Our Vision
To foster and permeate higher and quality education with value added engineering, technology
programs, providing all facilities in terms of technology and platforms for all round development with
societal awareness and nurture the youth with international competencies and exemplary level of
employability even under highly competitive environment so that they are innovative adaptable and
capable of handling problems faced by our country and world at large.

RAIT’s firm belief in new form of engineering education that lays equal stress on academics and
leadership building extracurricular skills has been a major contribution to the success of RAIT as one
of the most reputed institution of higher learning. The challenges faced by our country and world in
the 21 Century needs a whole new range of thought and action leaders, which a conventional
educational system in engineering disciplines are ill equipped to produce. Our reputation in providing
good engineering education with additional life skills ensure that high grade and highly motivated
students join us. Our laboratories and practical sessions reflect the latest that is being followed in the
Industry. The project works and summer projects make our students adept at handling the real life
problems and be Industry ready. Our students are well placed in the Industry and their performance
makes reputed companies visit us with renewed demands and vigour.

Our Mission
The Institution is committed to mobilize the resources and equip itself with men and materials of
excellence thereby ensuring that the Institution becomes pivotal center of service to Industry,
academia, and society with the latest technology. RAIT engages different platforms such as
technology enhancing Student Technical Societies, Cultural platforms, Sports excellence centers,
Entrepreneurial Development Center and Societal Interaction Cell. To develop the college to become
an autonomous Institution & deemed university at the earliest with facilities for advanced research
and development programs on par with international standards. To invite international and reputed
national Institutions and Universities to collaborate with our institution on the issues of common
interest of teaching and learning sophistication.

RAIT’s Mission is to produce engineering and technology professionals who are innovative and
inspiring thought leaders, adept at solving problems faced by our nation and world by providing
quality education.

The Institute is working closely with all stake holders like industry, academia to foster knowledge
generation, acquisition, dissemination using best available resources to address the great challenges
being faced by our country and World. RAIT is fully dedicated to provide its students skills that make
them leaders and solution providers and are Industry ready when they graduate from the Institution.
We at RAIT assure our main stakeholders of students 100% quality for the programmes we deliver.
This quality assurance stems from the teaching and learning processes we have at work at our campus
and the teachers who are handpicked from reputed institutions IIT/NIT/MU, etc. and they inspire the
students to be innovative in thinking and practical in approach. We have installed internal procedures
to better skills set of instructors by sending them to training courses, workshops, seminars and
conferences. We have also a full fledged course curriculum and deliveries planned in advance for a
structured semester long programme. We have well developed feedback system employers, alumni,
students and parents from to fine tune Learning and Teaching processes. These tools help us to ensure
same quality of teaching independent of any individual instructor. Each classroom is equipped with
Internet and other digital learning resources.

The effective learning process in the campus comprises a clean and stimulating classroom
environment and availability of lecture notes and digital resources prepared by instructor from the
comfort of home. In addition student is provided with good number of assignments that would trigger
his thinking process. The testing process involves an objective test paper that would gauge the
understanding of concepts by the students. The quality assurance process also ensures that the
learning process is effective. The summer internships and project work based training ensure learning
process to include practical and industry relevant aspects. Various technical events, seminars and
conferences make the student learning complete.

Our Quality Policy

Our Quality Policy

It is our earnest endeavour to produce high quality engineering professionals who are
innovative and inspiring, thought and action leaders, competent to solve problems
faced by society, nation and world at large by striving towards very high standards in
learning, teaching and training methodologies.

Our Motto: If it is not of quality, it is NOT RAIT!

Dr. Vijay D. Patil

President, RAES
Departmental Vision, Mission

Vision
To impart higher and quality education in computer science with value added engineering and
technology programs to prepare technically sound, ethically strong engineers with social awareness.
To extend the facilities, to meet the fast changing requirements and nurture the youths with
international competencies and exemplary level of employability and research under highly
competitive environments.

Mission
To mobilize the resources and equip the institution with men and materials of excellence to provide
knowledge and develop technologies in the thrust areas of computer science and Engineering. To
provide the diverse platforms of sports, technical, cocurricular and extracurricular activities for the
overall development of student with ethical attitude. To prepare the students to sustain the impact of
computer education for social needs encompassing industry, educational institutions and public
service. To collaborate with IITs, reputed universities and industries for the technical and overall
upliftment of students for continuing learning and entrepreneurship.
Departmental Program Educational Objectives
(PEOs)
1. Learn and Integrate
To provide Computer Engineering students with a strong foundation in the mathematical,
scientific and engineering fundamentals necessary to formulate, solve and analyze
engineering problems and to prepare them for graduate studies.

2. Think and Create

To develop an ability to analyze the requirements of the software and hardware, understand
the technical specifications, create a model, design, implement and verify a computing system
to meet specified requirements while considering real-world constraints to solve real world
problems.

3. Broad Base
To provide broad education necessary to understand the science of computer engineering and
the impact of it in a global and social context.

4. Techno-leader
To provide exposure to emerging cutting edge technologies, adequate training &
opportunities to work as teams on multidisciplinary projects with effective communication
skills and leadership qualities.

5. Practice citizenship
To provide knowledge of professional and ethical responsibility and to contribute to society
through active engagement with professional societies, schools, civic organizations or other
community activities.

6. Clarify Purpose and Perspective

To provide strong in-depth education through electives and to promote student awareness on
the life-long learning to adapt to innovation and change, and to be successful in their
professional work or graduate studies.
Departmental Program Outcomes (POs)

Pa. Foundation of computing - An ability to apply knowledge of computing, applied

mathematics, and fundamental engineering concepts appropriate to the discipline.
Pb. Experiments & Data Analysis - An ability to understand, identify, analyze and design the
problem, implement and validate the solution including both hardware and software.
Pc. Current Computing Techniques – An ability to use current techniques, skills, and tools
necessary for computing practice .
Pd. Teamwork – An ability to have leadership and management skills to accomplish a common
goal.
Pe. Engineering Problems - an ability to identify, formulates, and s olve engineering
problems.
Pf. Professional Ethics – An understanding of professional, ethical, legal, security and social
issues and responsibilities.
Pg. Communication – An ability to communicate effectively with a range of audiences in both
verbal and written form.
Ph. Impact of Technology – An ability to analyze the local and global impact of computing on
individuals, organizations, and society.
Pi. Life-long learning – An ability to recognize the need for, and an ability to engage in life-long
learning.
Pj. Contemporary Issues – An ability to exploit gained skills and knowledge of contemporary
issues.
Pk. Professional Development – Recognition of the need for and an ability to engage in
continuing professional development and higher studies.
Pl. Employment - An ability to get an employment to the international repute industries through
the training programs, internships, projects, workshops and seminars.
 Index
Sr. No. Contents Page No.
1. List of Experiments 1
Experiment Plan ,Course Objectives & Course
2. 2
Outcomes
Mapping of Course Outcomes – Program
3. 4
Outcomes
4. Study and Evaluation Scheme 5
5. Experiment No. 1 6
6. Experiment No. 2 11
7. Experiment No. 3 16
8. Experiment No. 4 21
9. Experiment No. 5 25
10. Experiment No. 6 30
11. Experiment No. 7 37
12. Experiment No. 8 43
 List of Experiments
Sr. No. Experiments Name
To understand the trouble of interacting with machines - Redesign interfaces of home
1 appliances.

Design a system based on user-centered approach.

2
Understand the principles of good screen design.
3

4 Redesign existing Graphical User Interface with screen complexity

5 Design Web User Interface based on Gestalt Theory

6 Implementation of Different Kinds of Menus

Implementation of Different Kinds of Windows

7
Design a system with proper guidelines for icons
8

1
 Experiment Plan, Course Objectives &
Course Outcome
Course Objectives:

1. To stress the importance of a good interface design.

2. To understand the importance of human psychology in designing good interfaces.
3. To motivate students to apply HMI in their day – to – day activities.
4. To bring out the creativity in each student – build innovative applications that are user
friendly.
5. To encourage students to indulge into research in Machine Interface Design.

Course Outcomes:

CO1 To apply HMI in their day-to-day activities.

CO2 To analyze user models and develop user centric interfaces.
CO3 To understand importance of a good interface design.
CO4 To understand need of design principles and guidelines.
CO5 To apply the core concepts and implementation guidelines of Human Computer Interaction
to improve them.

Module Week Course Weightage

Experiments Name
No. No. Outcome
To understand the trouble of interacting with
1 W1 machines - Redesign interfaces of home CO1 10
appliances.

Design a system based on user-centered

2 W2, W3 CO2 10
approach.

Understand the principles of good screen

3 W4 CO3 06
design.

Redesign existing Graphical User Interface with

4 W5,W6 CO3 04
screen complexity

Design Web User Interface based on Gestalt

5 W7 CO4 10
Theory

6 W8,W9 Implementation of Different Kinds of Menus CO5 04

2
 W10, Implementation of Different Kinds of Windows CO5 03
7
W11
Design a system with proper guidelines for
8 W12 CO5 03
icons

3
 Mapping Course Outcomes (CO) -
Program Outcomes (PO)
Subject Course Outcomes Contribution to Program outcomes
Weight
Pa Pb Pc Pd Pe Pf Pg Ph Pi Pj Pk Pl
CO1: To apply HMI in their
1 2 2 1 2 1 1
day-to-day activities.
CO2: To analyze user models
and develop user centric 2 3 1 1 1 1 1
interfaces
CO3: To understand and
apply principles of a good 2 2 2 1 1 1 1
PR interface design.
40% CO4: To analyzes human
responses and develop
2 2 1 1 2 1 1
guidelines for the best user
experience.
CO5: To design interface and
apply the core concepts of
2 2 1 1 2 1 1
Human Computer Interaction to
improve them.

4
 Study and Evaluation Scheme
Course
Course Name Teaching Scheme Credits Assigned
Code
Human Theory Practical Tutorial Theory Practical Tutorial Total
CPC802 Machine
Interaction 05
04 02 -- 04 01 --

Course Code Course Name Examination Scheme

Term Work Oral Total
Human Machine
CPC802
Interaction 25 25 50

Term Work:

1. Term work assessment must be based on the overall performance of the student with
every experiment graded from time to time. The grades should be converted into
marks as per the Credit and Grading System manual and should be added and
averaged.
2. The final certification and acceptance of term work ensures satisfactory performance
of laboratory work and minimum passing marks in term work.

Practical & Oral:

1. Oral exam will be based on the entire syllabus of Human Machine Interaction.

5
 Human Machine Interaction

Experiment No. : 1

To understand the trouble of interacting

with machines - Redesign interfaces of
home appliances.

6
 Experiment No. 1
1. Aim: To understand the trouble of interacting with machines - Redesign interfaces of
home appliances like microwave oven, land-line phone, fully automatic washing
machine.

2. Objectives: From this experiment, the student will be able to

 To understand the importance of human psychology in designing good
interfaces.
 To encourage students to indulge into research in Machine Interface Design

3. Outcomes: The learner will be able to

 Apply HMI in their day – to – day activities.
 To analyze the local and global impact of computing on individuals,
organizations, and society.
 An ability to recognize the need for, and an ability to engage in life-long
learning.

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

Human-machine interface (HMI) is a component of certain devices that are capable

of handling human-machine interactions. The interface consists of hardware and
software that allow user inputs to be translated as signals for machines that, in turn,
provide the required result to the user. Design is concerned with how things work,
how they are controlled, and the nature of the interaction between people and
technology. When done well, the results are brilliant, pleasurable products. When
done badly, the products are unusable, leading to great frustration and irritation. Or
they might be usable, but force us to behave the way the product wishes rather than
as we wish.

Two of the most important characteristics of good design are discoverability and
understanding.

- Discoverability: Is it possible to even figure out what actions are possible and
where and how to perform them?
- Understanding: What does it all mean? How is the product supposed to be
used? What do all the different controls and settings mean?

7
With complex devices, discoverability and understanding require the aid of manuals
or personal instruction. We accept this if the device is indeed complex, but it should
be unnecessary for simple things.

Fundamental Principles of Interaction

1. Affordances: Convey the rules by leaving visual clues. To make sure that the
appropriate actions are perceivable, and non-accessible ones are not invisible. By just
the appearance of any object, its functionality must be clear to the user.
Example: by looking at the handles, we should know how the door opens.

2. Signifiers: This is a physical form of showing the functionality to the user,

such as a sound, printed word or image.
Example: writing word “PUSH” on a door is a clear way to tell the user that door
will open when pushed.

3. Feedback: The effect of every action. A feedback in any form is very critical
to the user.
Example: washing machine example, the user did not get any kind of feedback from
the system. That made the user assume the system is faulty. Every single user action
has to be acknowledged immediately.

4. Constraints: Prevent the user from making mistakes. Instead of having an

option for the user to make a mistake and then forgiving them, make sure your user
can never make a mistake.
Example, you want your user to enter a date. Show a pick-n-click calendar instead of
a textbox. This will eliminate all possibilities of syntax mismatches

5. Mapping: Mapping gives the set of possible relations between objects. There
should be Control-display compatibility between the objects visible. Mapping gives
the natural relationship between controls and displays. Example: mapping of stove
controls to elements.

Conceptual Model

 Conceptual models define a good design as the communication between the

designer and the user. The designer must be able to explain the entire product to the

8
 user by just appearance of it. These models are very critical for a good user
experience. If the end product does not map to the mental images of the user, the
product is not a success.

Design User's model

Model

User
Designer

System

System
image

Fig. 1: Conceptual Model for developing any product

 The affordance induces a thought of action.

 Signifiers affirm that thought.

 Mapping his action to a consequence provides a feedback.

 Good feedback encourages learning.

 Repeated learning creates a mental model in the user about system.

6. Procedure:

Select any home appliances like microwave oven, land-line phone, fully automatic
washing machine and understand the trouble of interacting with that machine.
Comment on design of that machine as good or bad design based on whether
interaction principles are matching with users mental model or not. Redesign the
interface for mention the change in design and reason.

7. Conclusion:

People have “mental models” of how things work, built from different interaction
principles. It is responsibility of the designers to first understand the mental model
and then try to make a product that will agree to it.

8. Viva Questions:

 What is human machine interface?

 What you mean by psychopathology?

9
  What are characteristics of good design?
 Which are different fundamental principles of Interaction?
 What is conceptual model and mental model>

9. References:

1. Donald A. Norman, “The design of everyday things”, Basic books.

2. Alan Dix, J. E. Finlay, G. D. Abowd, R. Beale “Human Computer Interaction”, Prentice Hall.
3. http://nptel.ac.in/courses/106103115/download/PGY/M4L2.pdf

10
 Human Machine Interaction

Experiment No. : 2

To design a system based on user-

centered approach.

11
 Experiment No. 2
1. Aim: To design a system based on user-centered approach

2. Objectives: From this experiment, the student will be able to,

 To bring out the creativity in each student – build innovative applications
that are user friendly.
 To motivate students to apply HMI in their day – to – day activities

3. Outcomes: The learner will be able,

 To analyze user models and develop user centric interfaces

 To analyze the local and global impact of computing on individuals,
organizations, and society.
 To engage in life-long learning development and higher studies.
 To understand, identify, analyze and design the problem, implement and
validate the solution including both hardware and software.

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

“Computer System Design is the process that consists of a user-oriented approach

where all meaningful activities are systematically framed together and utmost
importance is given to the person who is going to use that system”

Following are the activities involved in design process :

 Understanding user requirements.
 Understanding purpose of the user.
 Understanding the work environments.

In Human Machine Interface, we should make a conscious effort to consider

humanity. Here the major focus is to design system based on user centered approach.
The other alternate is system-centered approach in which importance is given on
performance of system.

12
 Fig. Difference between User- Centered and System-Centered Approach

The success of any product or digital design is totally dependent on how it meets the
requirements of stakeholders and the product itself. The designer should always
understand the user. It is not the case that the designer should understand who the
user is but the experience level of the user should be totally accommodated. The
deep knowledge of the user can not only be achieved by analyzing the numbers
obtained in quantitative study during market research but also the deep knowledge
(behavior, attitude, and aptitude) about the user will be obtained in various
qualitative research techniques.

Qualitative research helps us understand the domain, context and constraints of a

product in different and more useful ways than quantitative research does. It
also quickly helps us identify patterns of behavior among users and potential users of
a productmuch more quickly and easily than would be possible with quantitative app
roaches.

6. Procedure:

Know your client: Select anyone category of user and develop application
understanding the user who will be using your system. Comment on the category of
user selected and specific features given for the users and identify what kinds of
interfaces will they like and why?. Compare with existing system analyze and rate
them.

a. Children (4-5 years of age): An application to teach math.

 Perform analysis of children behavior e.g. their preferences, interests etc

13
 b. Teenagers: Design a digital diary for young teens to help them overcome
various social pressures they deal with during their teen years. The diary should also
be like a self help tool which would help them deal with incidents like bullying, peer
pressure, etc.. This is an open project and you can think in any direction to make the
children sail through their teen years while trying to discover life around them.

 Perform analysis of teenagers e.g. their problems, interests, needs, etc

c. Older generation: Folks from the older generation has been very wary of
using their credit card on the Internet. They have various concerns when it comes to
paying their bills. Also because of their old age, it will be beneficial for them to use
the internet and pay their phone, electricity, gas, etc. bills

 Analysis of old people e.g. their nature, interests, needs, etc

d. Rural people: ATVM for train ticketing in rural area

 Perform analysis of rural people e.g. their problems, interests, needs, language
etc

e. Mentally disabled: Design the interface of a game for mentally disabled

children.
 Analysis of mentally disabled e.g. their behavior, problems, interests…

7. Conclusion:

User-centered approach helps to study detailed, composite user archetypes that

represent distinct groupings of behaviors, attitudes, aptitudes, goals, and motivations
observed and identified for any user.

8. Viva Questions:

 What are steps required for goal directed design process?

 What do you mean by skill spectrum of users?
 Difference between qualitative and quantitative research.
 What does Persona means?

14
9. References:

1. Donald A. Norman, “The design of everyday things”, Basic books.

2. Alan Dix, J. E. Finlay, G. D. Abowd, R. Beale “Human Computer Interaction”, Prentice
Hall.
3. Alan Cooper, Robert Reimann, David Cronin, “About Face3: Essentials of Interaction
design”, Wiley publication.

15
 Human Machine Interaction

Experiment No. : 3

To understand the principles of good

screen design by heuristic evaluation.

16
 Experiment No. 3
1. Aim: To understand the principles of good screen design by heuristic evaluation.

2. Objectives: From this experiment, the student will be able to,

 To stress the importance of a good interface design

 To understand the importance of human psychology in designing good
interfaces.
 To motivate students to apply HMI in their day – to – day activities.

3. Outcomes: The learner will be able,

 To understand and apply principles of a good interface design.

 To analyze the local and global impact of computing on individuals,
organizations, and society.

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

The design goals in creating a user interface are described below.

1. Aesthetically Pleasing: Visual appeal is provided by following the

presentation and graphic design principles
- Provide meaningful contrast between screen elements.
- Create groupings.
- Align screen elements and groups.
- Provide three-dimensional representation.
- Use color and graphics effectively and simply.

2. Clarity: The interface must be clear in visual appearance, concept, and

wording.
- Visual elements should be understandable, relating to the user’s real-world
concepts and functions.
- Metaphors, or analogies, should be realistic and simple.

17
 - Interface words and text should be simple, unambiguous, and free of
computer jargon.
3. Compatibility: Provide compatibility with the following:
- The User: Design must be appropriate and compatible with the needs of the
user or client. “Know the user” is the fundamental principle in interface
design.
- The task and job: The organization of a system should match the tasks a
person must do to perform the job. The structure and flow of functions
should permit easy transition between tasks. The user must never be forced
to navigate between applications or many screens to complete routine daily
tasks.
- The product: Compatibility across products must always be considered in
relation to improving interfaces, making new systems compatible with
existing systems. As a result it reduces the necessity for new learning as user
is aware of the system.

4. Comprehensibility: A system should be understandable, flowing in a

comprehensible and meaningful order.
5. Configurability: Permit easy personalization, configuration, and
reconfiguration of settings.
- Enhances a sense of control.
- Encourages an active role in understanding.

6. Consistency: A system should look, act, and operate the same throughout.
- Similar components should:
 Have a similar look.
 Have similar uses.
 Operate similarly.
- The same action should always yield the same result.
- The function of elements should not change.
- The position of standard elements should not change.
7. Control: The user must control the interaction.
- Actions should result from explicit user requests.
- Actions should be performed quickly.
- Actions should be capable of interruption or termination.
- The user should never be interrupted for errors.

18
8. Directness: Provide direct ways to accomplish tasks.
- Available alternatives should be visible.
- The effect of actions on objects should be visible.
9. Efficiency: Minimize eye and hand movements, and other control actions.
- Transitions between various system controls should flow easily and freely.
- Navigation paths should be as short as possible.
- Eye movement through a screen should be obvious and sequential.
10. Familiarity:
- Employ familiar concepts and use a language that is familiar to the user.
- Keep the interface natural, mimicking the user’s behavior patterns.
- Use real-world metaphors.
11. Flexibility: A system must be sensitive to the differing needs of its users,
enabling a level and type of performance based upon:
- Each user’s knowledge and skills.
- Each user’s experience.
- Each user’s personal preference.
- Each user’s habits.
- The conditions at that moment.
12. Forgiveness:
- Tolerate and forgive common and unavoidable human errors.
- Prevent errors from occurring whenever possible.
- Protect against possible catastrophic errors.
- When an error does occur, provide constructive messages.
13. Predictability

- The user should be able to anticipate the natural progression of each task.
 Provide distinct and recognizable screen elements.
 Provide cues to the result of an action to be performed.
- All expectations should be fulfilled uniformly and completely.

14. Recovery

- A system should permit:

 Commands or actions to be abolished or reversed.
 Immediate return to a certain point if difficulties arise.
- Ensure that users never lose their work as a result of:

19
  An error on their part.
 Hardware, software, or communication problems.
15. Transparency

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

6. Procedure:

Identify 5 different websites catering to one specific goal (eg. Goal – on-line shopping
and 5 different websites – ebay, amazon, flipkart, zovi, myntra) and perform a
competitive analysis on them to understand how each one caters to the goal, the
interactions and flow of the payment system and prepare a report on the same.
Consider any 8 HCI principles and prepare the following table evaluating the
websites.

Sr. No. Principles Poor Average Good Very good Excellent

1 Aesthetically pleasing

2 ..

7. Conclusion:

The design goals in creating user interface are fundamental to the implementation of
all effective interfaces including GUI and Web ones. These principles are general
characteristics of the interface and they apply to all aspects.

8. Viva Questions:

 Difference between Graphical User Interface and Web User Interface.

 Which are different interaction styles?
 What are characteristics of GUI?

9. References:

1. Donald A. Norman, “The design of everyday things”, Basic books.

2. Alan Dix, J. E. Finlay, G. D. Abowd, R. Beale “Human Computer Interaction”,
Prentice Hall.
3. http://nptel.ac.in/courses/106103115/5

20
 Human Machine Interaction

Experiment No. : 4

To calculate screen complexity of

existing Graphical User Interface and
redesign the interface to minimize the
screen complexity.

21
 Experiment No. 4
1. Aim: To calculate screen complexity of existing Graphical User Interface and
redesign the interface to minimize the screen complexity.

2. Objectives: From this experiment, the student will be able to,

 To stress the importance of a good interface design

 To motivate students to apply HMI in their day – to – day activities.

3. Outcomes: The learner will be able,

 To understand and apply principles of a good interface design.

 To analyze the local and global impact of computing on individuals,
organizations, and society.
 To engage in life- long learning and match the industry requirements in HMi
domains

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

Simplicity, illustrated in Figure, is directness and singleness of form, a combination

of elements that results in ease of comprehending the meaning of a pattern. The
opposite pole on the continuum is complexity.

To achieve simplicity one needs to optimize the number of elements on a screen,

within limits of clarity. And minimize the alignment points, especially horizontal or
columnar.

22
Method for Measuring Complexity:

1. Draw a rectangle around each element on a screen, including captions, controls,

headings, data, title, and so on.
2. Count the number of elements and horizontal alignment points (the number of
columns in which a field, inscribed by a rectangle, starts).
3. Count the number of elements and vertical alignment points (the number of rows
in which an element, inscribed by a rectangle, starts).
4. Calculate number of bits required by horizontal (column) alignment points and
number of bits required by vertical (row) alignment points by applying following
formula for calculating the measure of complexity.

C, complexity of the system in bits

N, total number of events (widths or heights)

m, number of event classes (number of unique widths or heights)

pn, probability of occurrence of the nth event class (based on the frequency
of events within that class)

5. Calculate overall complexity by adding the number bits required by horizontal

alignment points and vertical alignment points.

Guidelines for reducing complexity:

1. The way to minimize screen complexity is to reduce the number of controls

displayed. Fewer controls will yield lower complexity measures.
2. Optimize the number of elements on a screen, within limits of clarity.
3. Alignment: Minimize the alignment points, especially horizontal or columnar.
Fewer alignment points will have a strong positive influence on the complexity
calculation. When things don’t align, a sense of clutter and disorganization often
results. In addition to reducing complexity, alignment helps create balance,
regularity, sequentiality, and unity.

23
6. Procedure:

1. Calculate Screen Complexity for existing Graphical User Interface (GUI).

2. Redesign the Screen by applying various guidelines to lower the complexity of
selected Graphical User Interface (GUI) to achieve simplicity.

7. Conclusion:

Good alignment is related to shorter screen search times and higher viewer
preferences for a screen. Misalignments and uneven spacing, no matter how slight,
can create bothersome unconscious disruptions to our perceptual systems.

8. Viva Questions:

 What is need of alignment and grouping?

 How alignment helps in reducing complexity of screen.

9. References:

1. Donald A. Norman, “The design of everyday things”, Basic books.

2. Alan Dix, J. E. Finlay, G. D. Abowd, R. Beale “Human Computer Interaction”,
Prentice Hall.
3. Wilbert O. Galitz, “The Essential Guide to User Interface Design”, Wiley publication.

24
 Human Machine Interaction

Experiment No. : 5

To design web user interface based on

Gestalt Theory.

25
 Experiment No. 5
1. Aim: To design web user interface based on Gestalt Theory

2. Objectives: From this experiment, the student will be able to

 To stress the importance of a good interface design.

 To understand the importance of human psychology in designing good
interfaces
 To motivate students to apply HMI in their day – to – day activities
3. Outcomes: The learner will be able to

 To analyzes human responses and develop guidelines for the best user
experience.
 To understand, identify, analyze and design the problem, implement using
current techniques and skills.
 To engage in continuing professional development and higher studies.

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

Gestalt is a German word meaning "essence or shape of an entity’s complete form",

and this single definition may be one of the most important rules of design. More
often than not, designers tend to focus on the web design’s details rather than the
overall look. They focus on curved edges, shadows, fonts…etc. all that is good but
may not really make any difference if the client doesn’t like the design at first glance,
what most people don’t understand is that the brain first sees the overall shape of any
design, then starts to focus on and see the details

1. Proximity: Proximity is similar to common regions but uses space as the enclosure.
When elements are positioned close to one another, they are seen as part of a group
rather than as individual elements. This is especially true when the elements in the
group are closer to each other than they are to any elements outside the group. The
picture below represents arrangement of boxes on the left are not close

26
 enough to have proximity, while the group on the right is perceived as a
single whole element

2. Similarity: From the name of this principle it is easy to understand that this will be
used in the case of those items that are alike. These objects will be perceived as
making part of a group and their similarity could consist of the size, color, form,
length, and so on. People find it easy to navigate web page thanks to the similarity
principle, which could be used either to make the most important elements stand out
or maybe to direct the attention of your audience towards certain links, icons or
images. In the picture below, we quickly perceive rows of circles and X's rather than
the individual letters.

3. Closure: Closure refers to the tendency to perceive the whole in objects, filling in
the necessary missing bits of information. For example, the below picture is
perceived as two faces or a vase rather than two symmetrical lines.

27
4. Continuity: Continuity refers to the inclination to see objects as continuous, a
smooth progression rather than parts. For example, in the below picture, we see two
lines intersecting rather than a series of small dots.

6. Procedure:

Design/Redesign web user interface based on Gestalt theories and comment on the
principle applied and justify. Also analyze one image in which Gestalt principle is
applied and comment.

Example:
Take a look at old IBM logo:

You recognize the letters as an I, a B, and an M, no problem there. But they aren’t
letters at all; the whole thing is a compilation of bright blue horizontal lines arranged
to create the perception of a set of letters.
Gestalt Property used here is Closure.
Closure means that we "close" objects that are themselves not complete; not only
completing the figure in our perception, but perceiving the figure as having an extra
element of aesthetic design; we look for a simple, recognizable pattern.

28
7. Conclusion:

At its simplest, gestalt theory describes how the mind organizes visual data. The
stronger the clarity of form, the more effective the design will be.

8. Viva Questions:

 Define Perception.
 Discuss how perception is biased by experience, goals and current context.
 Which are different Gestalt Principles?

9. References:

1. Jeff Johnson, “Designing with the mind in mind”, Morgan Kaufmann Publications
2. http://nptel.ac.in/courses/106103115/module8/3.pdf

29
 Human Machine Interaction

Experiment No. : 6

Implementation of Menus for Graphical

System

30
 Experiment No. 6
1. Aim: Implementation of Menus for Graphical System

2. Objectives: From this experiment, the student will be able,

 To stress the importance of a good interface design.

 To bring out the creativity in each student – build innovative applications
that are user friendly.

3. Outcomes: The learner will be able to

 To apply the core concepts and implementation guidelines of Human

Computer Interaction to improve them
 To understand, identify, analyze and design the problem, implement using
current techniques and skills.
 To engage in continuing professional development and higher studies.

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

A system contains large amounts of information and performs a variety of functions.

It should also provide some means to tell people about the information it possesses or
the things it can do. This is accomplished by displaying listings of the choices or
alternatives the user has at appropriate points while using the system. These listings of
choices are commonly called menus. Menus are a major form of navigation through a
system and, if properly designed, assist the user in developing a mental model of the
system.

Providing the proper kinds of graphical menus to perform system tasks is also critical
to system success. The best kind of menu to use in each situation depends on several
factors. The following must be considered:

 The number of items to be presented in the menu.

 How often the menu is used.
 How often the menu contents may change.

31
a. Menu Bar
- A menu bar consists of a collection of descriptions that serve as headings or
titles for a series of actions on an associated pull-down menu.
- The menu is typically arrayed in a horizontal row at the top of a window.
Occasionally a menu bar is referred to as a collection of menu titles. In reality
it is a menu in itself, and it is appropriate to simply refer to it as a menu. A
menu bar is the starting point for many dialogs. Menu bars often consist of a
series of textual words, as represented in fig.

Fig: Menu bar Composed of Text

- All primary windows must have a menu bar.

- All menu bars must have an associated pull-down menu containing at least
two choices.
- Do not allow the user to turn off the display of the menu bar.
- Position choices horizontally over the entire row at the top of the screen, just
below the screen title.
- A typical bar is composed of no more than about seven or eight choices.
- The menu item descriptions must clearly reflect the kinds of choices available
in the associated pull-down menus.
- Use mixed-case letters to describe choices.
- Use single-word choices whenever possible.
- Order choices left-to-right with:
 Most frequent choices to the left.
 Related information grouped together.
- Left-justify choices within the line.
- Help, when included, should be located at the right side of the bar.
- Indent the first choice one space from the left margin.
- Leave at least three spaces between each of the succeeding choices
- Keyboard cursor:
 Use a reverse video, or reverse color, selection cursor to surround
the choice.

32
  Cover the entire choice, including one blank space before and
after the choice word.

b. Pull-Down Menu
- Selection of an alternative from the menu bar results in the display of the exact
actions available to the user.
- These choices are displayed in a vertically arrayed listing that appears to pull
down from the bar.
- Hence, these listings, as illustrated in fig, are typically referred to as pull-
downs. Other identification terms may be used, such as drop-downs.

Fig: Menu bar pull – down

- Display all possible alternatives.

- Gray-out or dim items that cannot be chosen due to the current state of an
application.
- Position the pull-down directly below the selected menu bar choice.
- Must contain a minimum of two choices.
- Restrict to no more than 5 to 10 choices, preferably 8 or less.
- Use mixed-case, headline-style words to describe choices.
- Do not:
 Identify a menu item by the same wording as its menu title.
 Change the meaning of menu items through use of the Shift key.
 Use scrolling in pull-downs.
 Place instructions in pull-downs.
- Place frequent or critical items at the top.
- Left-align choice descriptions.
- Leave the menu bar choice leading to the pull-down highlighted in the selected
manner (reverse video or reverse color).

33
 - Physically, the pull-down menu must be wide enough to accommodate the
longest menu item description and its cascade or accelerator indicator.
- Align the first character of the pull-down descriptions under the second
character of the applicable menu bar choice.
c. Cascading Menu
- A cascading menu is a submenu derived from a higher-level menu, most
typically a pull-down.
- Cascading menus are located to the right of the menu item on the previous
menu to which they are related, as illustrated in fig.

- Place an arrow or right-pointing triangle to the right of each menu choice

description leading to a cascade menu.
- Separate the indicator from the choice description by one space.
- Display the indicator in the same color as the choice descriptions.
- Position the first choice in the cascading menu immediately to the right of the
selected choice.
- Leave the choice leading to the cascading menu highlighted.
d. Pop-up Menus
- Choices may also be presented to the user on the screen through pop-up
menus, vertically arrayed listings that only appear when specifically
requested.
- Pop-up menus may be requested when the mouse pointer is positioned over a
designated or hot area of the screen (a window border or text, for example) or
over a designated icon. In look, they usually resemble pull-down menus, as
shown in figure.

34
 Fig: Pop-up Menu

e. Tear-off Menus
- A tear-off menu is a pull-down menu that can be positioned anywhere on the
screen for constant referral.
- As such, it possesses all the characteristics of a pull-down. It may also be
called a pushpin, detachable, or roll-up menu.
- Its purpose is to present alternatives or choices to the screen user that are
needed infrequently at some times and heavily at other times.

6. Procedure:

Design an application which consists of different types of menus. Apply and explain
general menu design guidelines applied for formatting, ordering, phrasing, selecting
choices, and navigating menus for application which is designed.

7. Conclusion:

Menus are effective because they utilize the more powerful human capability of
recognition rather than the weaker capability of recall. Working with menus reminds
people of available options and information that they may not be aware of or have
forgotten.

8. Viva Questions:

 Which are different kinds of menus?

 Discuss guidelines for menus choices.
 What are different structures of menus?

35
9. References:

1. Wilbert O. Galitz, “The Essential Guide to User Interface Design”, Wiley publication.
2. http://www.nptel.ac.in/courses/106105087/pdf/m09L21.pdf

36
 Human Machine Interaction

Experiment No. : 7

Implementation of Different Kinds of

Windows.

37
 Experiment No. 7
1. Aim: Implementation of Different Kinds of Windows.

2. Objectives: From this experiment, the student will be able,

 To stress the importance of a good interface design.

 To bring out the creativity in each student – build innovative applications
that are user friendly.

3. Outcomes: The learner will be able to

 To apply the core concepts and implementation guidelines of Human
Computer Interaction to improve them
 To understand, identify, analyze and design the problem, implement using
current techniques and skills.
 To engage in continuing professional development and higher studies.

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

A window is an area of the screen, usually rectangular in shape, defined by a border

that contains a particular view of some area of the computer or some portion of a
person’s dialog with the computer. It can be moved and rendered independently on
the screen. A display may contain one, two, or more windows within its boundaries.

People’s tasks must be structured into a series of windows. The type of window used
will depend on the nature and flow of the task. There are two types of windows:
Primary Window and Secondary Windows.

Primary Window: The primary window is the first one that appears on a screen
when an activity or action is started. A primary window should contain constantly
used window components such as frequently used menu bar items and controls (for
example, control bars) used by dependent windows

38
Secondary Windows

Secondary windows are supplemental windows. A secondary window is typically

smaller than its associated primary window and smaller than the minimum display
resolution. Secondary windows may be dependent upon a primary window or
displayed independently of the primary window.

Dependent Secondary Window

 It can only be displayed from a command on the interface of its primary

window.
 It is typically associated with a single data object, and appears on top of the
active window when requested.
 It is movable, and scrollable.
 If necessary, it uses the primary window’s menu bar.
 In general, dependent secondary windows are closed when the primary
window closes, and hidden when their primary window is hidden or minimized.
Independent Secondary Window

 It can be opened independently of a primary window.

 An independent secondary window can typically be closed without regard to
the state of any primary window unless there is an obvious relationship to the primary
window.

TYPES OF SECONDARY WINDOWS

1. Dialog Boxes: Dialog boxes are used to extend and complete an interaction
within a limited context. Dialog boxes are always displayed from another window,
either primary or secondary, or another dialog box. They may appear as a result of a
command button being activated or a menu choice being selected, or they may be
presented automatically by the system when a condition exists that requires the user’s
attention or additional input.

39
 Fig: Microsoft Windows Dialog Box
2. Property Sheets and Property Inspectors: The properties of an object in an
interface can be displayed in a variety of ways, for example, the image and name of
an icon on the desktop. Secondary windows provide two other techniques for
displaying properties, property sheets and property inspectors.

Fig: Microsoft Windows Property Sheet Fig: Microsoft Windows Property Inspector

3. Message Boxes: Use for displaying a message about a particular situation or

condition. If a message requires no choices to be made but only acknowledgement,
include an ok button and optionally a help menu. If the message requires the user to
make a choice, include a command button for each option. Include OK and Cancel
buttons only when the user has the option of continuing or stopping the action.

Fig: Microsoft Windows Message Box

40
 4. Palette Windows: Palette windows are modeless secondary windows that
present a set of controls. Palette windows are distinguished by their visual appearance,
a collection of images, colors or patterns. The title bar for a palette window is shorter
and includes only a close button.

Fig: Microsoft Windows Palette Window

5. Pop-up Windows: Use pop-up windows to display:

- Additional information when an abbreviated form of the information is the
main presentation.
- Textual labels for graphical controls.
- Context-sensitive Help information.

Fig: Microsoft Windows pop-up window

6. Procedure:

For every window designed for the application explain:

- Purpose
- Description
- Components
- Kind window

7. Conclusion:

Using windows it is much easier to switch between tasks and to maintain one’s
context, since one does not have to reestablish one’s place continually. In addition,

41
 Windows provide access to more information than would normally be available on a
single display of the same size. Overwriting, or placing more important information
on top of that of less importance at that moment.

8. Viva Questions:

 Difference between dependent secondary window and independent secondary

window.
 Explain different types of secondary windows.
 What are Palette windows?
 Which are different windows presentation styles.
 Explain modal and modeless property of secondary window.

9. References:

1. Wilbert O. Galitz, “The Essential Guide to User Interface Design”, Wiley publication.
2. http://www.nptel.ac.in/courses/106105087/pdf/m09L21.pdf

42
Human Machine Interaction

Experiment No. : 8

To understand how to design

appropriate icons.

43
 Experiment No. 8
1. Aim: To understand how to design appropriate icons.

2. Objectives: From this experiment, the student will be able,

 To stress the importance of a good interface design.

 To bring out the creativity in each student – build innovative applications
that are user friendly.

3. Outcomes: The learner will be able to

 To apply the core concepts and implementation guidelines of Human
Computer Interaction to improve them
 To understand, identify, analyze and design the problem, implement using
current techniques and skills.
 To engage in continuing professional development and higher studies.

4. Hardware / Software Required: Any tool or technology can be used for

implementation e.g., VB, DOTNET, JAVA, PHP, etc.

5. Theory:

Icons are most often used to represent objects and actions with which users can
interact with or that they can manipulate. These types of icons may stand alone on a
desktop or in a window, or be grouped together in a toolbar. A secondary use of an
icon is to reinforce important information, a warning icon in a dialog message box, for
example.

Categories of Icon
- Icon: Something that looks like what it means
- Index: A sign that was caused by the thing to which it refers
- Symbol: A sign that may be completely arbitrary in appearance
Kinds of Icon
- Resemblance: An image that looks like what it means
- Symbolic: An abstract image representing something
- Exemplar: An image illustrating an example or characteristic of something

44
- Arbitrary: An image completely arbitrary in appearance whose meaning must be
learned
- Analogy: An image physically or semantically associated with something
Characteristics of Icons
Icons should be:
- familiar
- clear and legible
- simple
- consistent
- direct
- efficient
- discriminable

Choosing Icons

Icon design is an important process. Meaningful and recognizable icons will speed
learning and recall and yield a much more effective system. Poor design will lead to
errors, delays, and confusion. Looks different from all other icons.

- Is obvious what it does or represents.

- Is recognizable when no larger than 16 pixels square.
- Looks as good in black and white as in color.
Icon Size

Supply in all standard sizes.

- 16 × 16 pixels.
 16- and 256-color versions.
- 32 × 32 pixels
 16- and 256-color versions.
- 48 × 48 pixels
 16- and 256-color versions.
- Use colors from the system palette.
- Use an odd number of pixels along each side.
 Provides center pixel around which to focus design.
- Minimum sizes for easy selection:
 With stylus or pen: 15 pixels square.

45
 With mouse: 20 pixels square.
 With finger: 40 pixels square.
- Provide as large a hot zone as possible.
Choosing Images

- Use existing icons when available.

- Use images for nouns, not verbs.
- Use traditional images.
- Consider user cultural and social norms.

The Design Process of Icons

- Define purpose: To begin the design process, first define the icon’s purpose and use.
Have the design team brainstorm about possible ideas, considering real-world
metaphors.
- Collect, evaluate, and sketch ideas: Start by designing on paper, not on the
computer. Ask everyone to sketch his or her ideas.
- Draw in black and white: Many icons will be displayed in monochrome. Color is an
enhancing property; consider it as such.
- Test for expectation, recognition, and learning. Choosing the objects and actions,
and the icons to represent them, is not a precise process, and will not be easy. So, as in
any screen design activity, adequate testing and possible refinement of developed
images must be built into the design process. Icon recognition and learning should
both be measured as part of the normal testing process.
- Test for legibility. Verify the legibility and clarity of the icons in general. Also,
verify the legibility of the icons on the screen backgrounds chosen. White or gray
backgrounds may create difficulties. An icon mapped in color, then displayed on a
monochrome screen, may not present itself satisfactorily. Be prepared to redraw it in
black and white, if necessary.
- Register new icons in the system’s registry. Create and maintain a registry of all
system icons. Provide a detailed and distinctive description of all new icons.

46
6. Procedure:

Identify separate lines of business, e.g., medical, greeting cards, law etc. Design an
application using proper guidelines for icons. Comment on design of icons and their
relevance in the system.

7. Conclusion:

Icons are the most often used to represent objects and actions with which users can
interact with or that they can manipulate.

8. Viva Questions:

 Discuss guidelines for designing icons.

 What are advantages of using icons?

9. References:

1. Wilbert O. Galitz, “The Essential Guide to User Interface Design”, Wiley publication.
2. http://www.nptel.ac.in/courses/106105087/pdf/m09L21.pdf

47