A Practical file

on

Human Computer Interaction

Submitted in partial fulfillment of the requirements for the award of
the degree of

B.Tech in Artificial Intelligence and Data Science

Submitted By:
Alok Kumar Nishad
20131280034

Submitted to:
Dr. Vibhor Gupta
School of Computing Science & Engineering

School of Computing Science & Engineering

Galgotias University Greater Noida, Uttar Pradesh 203201

November 2023
 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 mouseinto 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 ofthe
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.