Human

Machine
Interaction
LAB MANUAL

Prepared By:
Prof. Suvarna Pansambal
 Experiment 1

Build a GUI: know your client (Children (4-5 years of age))

Objective: Know the user of the application

Description:
To get a good interface you have to figure out who is going to use it to do what. You may think
your idea for a new system is so wonderful that everyone will want it, though you can't think of a
really specific example, and that it will be useful in some way to people, even though you can't
say just how. But history suggests you will be wrong. Even systems that turned out to be useful
in unexpected ways, like the spreadsheet, started out by being useful in some expected ways.
You must have to do the following things in order to know your user:
•Who are they?
• Probably not like you!
• Talk to them
• Watch them
• Use your imagination

Students Task:
Develope a math application for 4 to 5 year children.

Guidelines:
1. Understand how people interact with computers.
2. Understand the human characteristics important in design.
3. Identify the user’s level of knowledge and experience.
4. Identify the characteristics of the user’s needs, tasks, and jobs.
5. Identify the user’s psychological characteristics.
6. Identify the user’s physical characteristics.
7. Employ recommended methods for gaining understanding of users.
Conclusion: Thus we have built an application for the children successfully.
 Output:

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

Steps for creating the application:

1. Create your presentation.

2. (Optional) Record and add narration and timings to a slide show and Turn your mouse
into a laser pointer.

3. Save the presentation.

4. On the File menu, click Save & Send.

5. Under Save & Send, click Create a video.

6. To display all video quality and size options, under Create a video, click the Computer
& HD Displays down arrow.

7. Do one of the following:

o To create a video with very high quality, yet a large file size, click Computer &
HD Displays.

o To create a video with a moderate file size and medium quality, click Internet &
DVD.

o To create a video with the smallest file size, yet low quality, click Portable
Devices.

TIP: You'll want to test these out to see which option meets your needs.
8. Click the Don't Use Recorded Timings and Narrations down arrow and then, do one of
the following:
o If you did not record and time voice narration and laser pointer movements,
click Don't Use Recorded Timings and Narration.

TIP: The default time spent on each slide is set to 5 seconds. To change that, to the right
of Seconds to spend on each slide, click the up arrow to increase, or the down arrow to decrease
the seconds.
o If you recorded and timed narration and pointer movements, click Use Recorded
Timings and Narrations.

9. Click Create Video.

10. In the File name box, enter a file name for the video, browse for folder that will contain
this file, and then clickSave. You can track the progress of the video creation by looking at the
status bar at the bottom of your screen. The video creation process can take up to several hours
depending on the length of the video and the complexity of the presentation.

TIP: For longer videos, you can set it up so that they create overnight. That way, they’ll be ready
for you the following morning.
11. To play your newly-created video, go to the designated folder location, and then double-
click the file.
 Experiment 2

Redesign interfaces of home appliances

Objective: Understand the trouble of interacting with machines - Redesign

interfaces of home appliances like microwave oven, land-line phone.

Description:

A well-designed screen:

1. Reflects the capabilities, needs, and tasks of its users.

2. Is developed within the physical constraints imposed by the hardware on
which it is displayed.
3. Effectively utilizes the capabilities of its controlling software.
4. Achieves the business objectives of the system for which it is designed.
5. To make an interface easy and pleasant to use, then, the goal in design is to:
 Reduce visual work.
 Reduce intellectual work.
 Reduce memory work.
 Reduce motor work.
 Minimize or eliminate any burdens or instructions imposed by technology.

Students Task:
Students have to design the interface for the home appliances. Show the bad
design of the home appliances as well as the good design of the home appliances.

Conclusion: We have learned successfully the redesign of the home appliances.

Output:

Design interface for microwave oven.

A) Poor User Interface

B) Good User Interface

Design interface for Land-line phone.

A) Poor Interface
B) Good Interface

Experiment 3

Learn HCI design principles – heuristic evaluation

Objective: Identify 5 different websites catering to one specific goal 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.

Description:
Principles are nothing but the abstract design rules. Where an interface should be easy to
navigate. We follow some guideline to achieve the principles. Guidelines are advice on how to
achieve principle and understanding theory which help helps resolve the conflict.
Norman’ design principles are:
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and artificial.
6. Design for error.
7. When all else fails, standardize.

♦ Heuristic Evaluation Process

Preparing the session:
1. Select evaluators.
2. Prepare or assemble:
• A project overview.
• A checklist of heuristics.
3. Provide briefing to evaluators to:
• Review the purpose of the evaluation session.
• Preview the evaluation process.
• Present the project overview and heuristics.
• Answer any evaluator questions.
• Provide any special evaluator training that may be necessary.

Conducting the session:

1. Have each evaluator review the system alone.
2. The evaluator should:
• Establish own process or method of reviewing the system.
3. Provide usage scenarios, if necessary.
• Compare his or her findings with the list of usability principles.
• Identify any other relevant problems or issues.
• Make at least two passes through the system.
4. Detected problems should be related to the specific heuristics they violate.
5. Comments are recorded either:
• By the evaluator.
• By an observer.
6. The observer may answer questions and provide hints.
7. Restrict the length of the session to no more than 2 hours.
After the session:
1. Hold a debriefing session including observers and design team members where:
• Each evaluator presents problems detected and the heuristic it violated.
• A composite problem listing is assembled.
• Design suggestions for improving the problematic aspects of the system are discussed.
2. After the debriefing session:
• Generate a composite list of violations as a ratings form.
• Request evaluators to assign severity ratings to each violation.
• Analyze results and establish a program to correct violations and deficiencies.

Students Task:
Students have to identify any five website catering the same goal and perform competitive
analysis on them. Perform the heuristic evaluation of that websites.

Conclusion: Thus we have performed the heuristic analysis successfully.

Output:

♦ Checklists

1. Research-Based Set of Heuristics

amazon.i ebay.i flipkart.c paytm.co snapdeal.co

Heuristics n n om m m
Automate unwanted workload     

Reduce uncertainty     

Fuse data     

Present new information with meaningful     

aids to interpretation
Use names that are conceptually related to     
functions
Limit data-driven tasks     

Group data in consistently meaningful ways     

to decrease search time
Include in the displays only that information     
needed by a user at a given time
Practice judicious redundancy     

2. Web Page Heuristics

amazon.i ebay.i flipkart.c paytm.c snapd

Heuristics n n om om eal.co
m
Speak the user’s language     

Be consistent     

Minimize the user’s memory load     

Build flexible and efficient systems     

Design aesthetic and minimalist systems     

Use chunking     
Provide progressive levels of detail     

Give navigational feedback     

Don’t lie to the user     

Screenshot of amazon.in
Screenshot of flipkart.com

Screenshot of paytm.com
Screenshot of snapdeal.com

Screenshot of eBay. in
 Experiment-4

Learn the importance of menu and navigation

Objective: Develop system menus and navigation schemes

Description:
A system contains large amounts of information and performs a variety of functions. Regardless
of its purpose, the system must 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. 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 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. Graphical and Web systems are heavily menu-oriented. In graphical
systems they are used to designate commands, properties that apply to an object, documents, and
windows. When selected, a graphical menu item may lead to another menu, cause a window to
be displayed, or directly cause an action to be performed. To accomplish these goals, a graphical
system presents a variety of menu styles to choose from. Included are entities commonly called
menu bars, and menus called pull-downs, popups, cascades, tearoffs, and iconic. In Web site
design, common menus include textual links to other pages, command buttons, and both
graphical and textual toolbars. In this experiment we have used online tool weebly.

Student’s task:
Considering your application as a sample, design menu and navigational scheme for your
application. Students are required to submit one version of menu and navigational scheme
design.

Guidelines:
While designing menus for GUI application, students must consider following
1. Choosing a proper menu structure suitable for the application
2. Proper ordering and grouping of menus
3. Use of line separators
4. Providing short cuts for menus using keyboard equivalents
5. Use of keyboard accelerators
6. Choosing appropriate menu titles.
7. Use of intent indicators
8. Providing defaults
9. Use of toggle menus wherever required.

For web based applications

1. Provide a global navigation bar at the top of each page.
2. Provide a local category or topical links navigation bar on the left side of a page.
3. Place minor illustrative, parenthetical, or footnote links at the end of the page.
4. For long pages, provide a navigation bar repeating important global or local links at the page
bottom.

Examples:

Figure1:Command button navigation bar

Figure2 : Graphical or iconic navigation bar

 Figure3: Web navigation component location

Conclusion: Thus we have developed an application using menus and navigation.

Output:
 Experiment: 5

Learn the use of statistical graphics

Objective: Make the use of statistical graphics.

Description:
A statistical graphic is data presented in a graphical format. -A well-designed statistical graphic,
also referred to as a chart or graph, consists of complex ideas communicated with clarity,
precision, and efficiency. It gives its viewer the greatest number of ideas, in the shortest time,
and in the smallest space, and with least possible clutter. It will also induce the viewer to think of
substance, not techniques or methodology. It will provide coherence to large amounts of
information by tying them together in a meaningful way, and it will encourage data comparisons
of its different pieces by the eye. A well designed statistical graphic display also avoids
distortions by telling the truth about the data.

Components of a Statistical Graphic

Most statistical graphics have at least two axes, two scales, an area to present the data, a title, and
sometimes a legend or key.

Types of Statistical Graphics

—Curve and Line Graphs
—Surface Charts
—Scatter plots
—Bar Graphs
—Segmented or Stacked Bars
—Pie Charts

Student’s task:
Considering your application as a sample, design statistical graphics application. Students are
required to submit one version of statistical graphics application
Guidelines:
While designing statistical graphics GUI application, students must consider following
1. Choosing the emphasized data
2. Minimize the non-data elements
3. 3 Minimize redundant data.
4. Show data variation, not design variation.
5. Provide the proper context for data interpretation.
6. Restrict the number of information-carrying dimensions depicted to the number of
7. Data dimensions being illustrated.
8. Employ data in multiple ways, whenever possible.
9. Maximize data density.
10. Employ simple data-coding schemes.
11. Avoid unnecessary embellishment of:
— Grids.
— Vibration.
— Ornamentation.
12. Fill the graph’s available area with data.
.Example:
 Figure 1: example of Pie Chart and Bar Chart

Conclusion: Thus we have studied the use of statistical graphic.

Output:

Steps to create the Statastical Graph.

1. Click Start---> All Programs------->Microsoft Office----Microsoft excel

2. Choose an existing spreadsheet by clicking "Open" in the "File" menu. Create a
new spreadsheet by clicking "New" in the document wizard or File menu.
3. Create a data series with a single independent variable. Bar graphs are horizontal
charts that show numbers or data from 1 variable.
 Add the labels for the variable and the data at the top of the columns. For
example, if you want to graph the number of tickets sold for each of the top 10
summer movie releases, you would write "Movie Title" on the top of the first
column and "Tickets Sold" on top of the second column.

4. Consider adding a sub-data series in the third column. With the bar graph
function, you can use a clustered or stacked bar graph that shows a second number
that is identified with the variable.
 Make sure that the sub-data series is labeled at the top of the third column.
Also, ensure that the data is given using the same format, such as dollars or
numbers.

5. Highlight the entire series you have entered, including column titles. Microsoft
Excel will use your columns to separate the X and Y axis.
6. Click on the "Charts" tab of the horizontal user interface. If you do not see the
"Charts" tab, go to the "Insert" menu and select "Charts" from the drop down menu.
 If you are using an older version of Microsoft Excel, you will need to go
directly to the Insert menu and select "Charts" to access the chart wizard.

7. Click on the arrow next to the type of chart you would like to make. If you want a
traditional bar graph, you will choose "Bar." If you want a vertical graph, click the
arrow next to "Column."

8. Select the type of bar graph you want from the choices available in the Bar
menu. You can choose 2-D, 3-D, Cylinder, Cone or Pyramid shaped bar graphs.
 You can also choose to cluster or stack your bar graph to highlight a second
type of data in your data series.
9. Wait for the image of your graph to appear in the middle of your Excel sheet.

10. Double click on the interior of your bar graph.

11. Click through the options for fill, line, shadow, 3-D format and glow & soft edges
to format your bar graph. Click "Ok" when you are done formatting.
12. Double click the area near the exterior of your bar graph. Choose a different font
or formatting for the outside area of the graph. Click "Ok" after you make your
changes.
Click on "Alt Text" to name your graph and add a description. Click on "Properties"
to choose the object positioning

13. . Save your Excel sheet with your new bar graph.
 Experiment No-6

Icon designing

Objective: To design the ICON

Description:

Icon design is the process of designing a graphic symbol that represents some real, fantasy or
abstract motive, entity or action. In the context of software applications, an icon often represents
a program, a function, data or a collection of data on a computer system.

Icon designs can be simple, with flat two-dimensional drawing or a black silhouette, or complex,
presenting a combination of graphic design elements such as one or more linear and radial color
gradients, projected shadows, contour shades, and three-dimensional perspective effects.

Modern icons often have a maximum size of 1024 by 1024 pixels. The challenge of icon design
is to create an image that is communicative, beautiful, and understandable, at every size from this
maximum resolution down to the minimum resolution of 16 by 16 pixels. One of the most
common and important examples of this are Application Icons, used to represent an app on Mac,
Windows, Linux, or mobile platforms. These icons rely on unique and memorable metaphors as
a form of product branding. Other common uses of icons include favicons, toolbar icons, and
icons for buttons or controls.

Students Task:
Design an Icon using Paint or paint.net or student can use any other icon designing
tool.

Guidelines:

 Icons should be simple

 Symbols used as icon must be visually distinguishable from other
symbols.
 Use cosistent structure and shape.
 Screen resolution should be sufficient to establish the difference of
form at the normal working distance.
 Select proper colors

Conclusion: Thus we created a simple con for eclipse IDE.

Output:

Steps to Design the ICON

For this practical the software used is paint.net it is a freeware that can be
downloaded.

Step 1:

The first step is to create a new file in paint.net and set width and height as
per your need.
Step 2: Browse a image you want and paste it in to new layer in paint.net.
and select keep canvas size.

The extension for icon is .ico and this extension by default is not present in
paint.net but you can add plug-in for the same.
You can change icon of your computer application by right clicking on the
application go to properties >change icon.
 Experiment No-7

Understand need of colors and animations.

Objectives: Choosing proper colors and animation.

Description:
Color adds dimension, or realism, to screen usability. Color draws attention because it attracts a
person’s eye. If used properly, it can emphasize the logical organization of information, facilitate
the discrimination of screen components, accentuate differences among elements, and make
displays more interesting. If used improperly, color can be distracting and possibly visually
fatiguing, impairing the system’s usability.
Animation is a dynamic visual statement, form, and structure evolving through movement over
time. Animations are popular objects that users encounter frequently, if not all the time. They
have been used for different purposes and can be found in many computing environments,
especially Web pages and online advertisements.
Student’s task:
Students have to develop UI for an artist: A celebrity in some form of art like music, dance,
painting, martial arts, etc (not actors). This site will be used to display his works and should
portray his character.

Guidelines:
While choosing colors for display, one must consider these factors:
 The human visual system
 The possible problems that the colors’ use may cause
 The viewing environment in which the display is used
 The task of the user
 Hardware on which the colors will be displayed.
For the animation one must keep in mind
 Do not Distract Attention from Salient Information
 Avoid Clutter
 Allow Appropriate Exposure Duration
 Manage the Positioning and Organization of Objects
 Adhere to Color Conventions
 Support Animation with Textual and Auditory Information
 Appreciate the Insights of Semiotics
 Comply with the Cooperative Maxims

Conclusion: Thus we have studied how to select proper colors and animation.
Output:

Steps to Create website using wix.com

1. Create a account in wix.com

2. Select a appropriate template based on your theme for website
3. Choose the template and then start editing it.
4. For animation select the view you want to animate you will get different option to customize the
view and animate it.
5. You can add images of your choice and also for background you can add images or videos from
external source or source provided by wix.com
 Experiment No-8
Provide effective feedback, guidance and assistance

Objective: Provide effective feedback, guidance and assistance

Description:
All user actions must be reacted to in some way. To be effective, feedback to the user for an
action must occur within certain time limits. Excessive delays can be annoying, interrupt
concentration, cause the user concern, and impair productivity as one system memory limitations
begin to be tested.
Also to aid user learning and avoid frustration, it is important to provide thorough and timely
guidance and assistance. New users must go through a learning process that involves developing
a conceptual or mental model to explain the system’s behavior and the task being performed.
Guidance in the form of the system’s hard-copy, online documentation, computer-based training,
instructional or prompting messages, and system messages serves as a cognitive development
tool to aid this process. So does assistance provided by another form of online documentation,
the Help function.
Student’s task:
Provide proper feedback, documentation and assistance for your application.
While providing feedback, students must consider the following
1. Acceptable response times
2. Dealing with time delays
3. Blinking for attention
4. The use of sound
While providing assistance and guidance, students must consider the following
1. Providing appropriate Instructions or prompting.
2. Provide a Help facility.
3. Provide contextual Help.
4. Provide Task-oriented Help.
5. Provide Reference Help.
6. Hints or tips

Conclusion: Thus we have successfully Provided effective feedback, guidance and assistance
Output: