Professional Documents
Culture Documents
Machine
Interaction
LAB MANUAL
Prepared By:
Prof. Suvarna Pansambal
Experiment 1
Build a GUI: know your client (Children (4-5 years of age))
Output:
Client: Children (4-5 years of age): An application to teach math
Steps for creating the application:
1.
2.
(Optional) Record and add narration and timings to a slide show and Turn your mouse
into a laser pointer.
3.
4.
5.
6.
To display all video quality and size options, under Create a video, click the Computer
& HD Displays down arrow.
7.
HD Displays.
To create a video with a moderate file size and medium quality, click Internet &
DVD.
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:
If you did not record and time voice narration and laser pointer movements,
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, theyll be ready
for you the following morning.
11.
To play your newly-created video, go to the designated folder location, and then doubleclick 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.
Output:
Design interface for microwave oven.
A) Poor User 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.
Heuristics
Automate unwanted workload
amazon.i
ebay.i
flipkart.c
paytm.co
snapdeal.co
om
Reduce uncertainty
Fuse data
aids to interpretation
Use names that are conceptually related to
functions
Heuristics
amazon.i
ebay.i
flipkart.c
paytm.c snapd
om
om
eal.co
m
Be consistent
Use chunking
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
Output:
Experiment: 5
Learn the use of statistical graphics
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
Students 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 graphs available area with data.
.Example:
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.
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
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:
symbols.
Use cosistent structure and shape.
Screen resolution should be sufficient to establish the difference of
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
persons 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 systems 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.
Students 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:
Conclusion: Thus we have studied how to select proper colors and animation.
Output:
Steps to Create website using wix.com
1.
2.
3.
4.
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 systems behavior and the task being performed.
Guidance in the form of the systems 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.
Students 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: