Aloo

!! Sab Ka Malik Atma !!
Vishwatmak Jangali Maharaj Ashram Trust’s

VISHWATMAK OM GURUDEV COLLEGE OF
ENGINEERING
Subject: Human Machine Interaction

Name of Student: Kamble Rashmita Rajendra
Class: BE Computer
Roll no: 18
Under the Guidance of: Prof Vaishnavi Rajkor
BE COMP (SEM VIII)

Human Machine Interaction Page 1
ACADEMIC YEAR: 2021-22
BE COMP (SEM VIII)

VISHWATMAK OM GURUDEV COLLEGE OF ENGINEERING
CERTIFICATE
This is to certify that, the work entered in this file is the work of
___________________________________Who has worked for the semester 8
branch computers for the academic year 2021-22, in the college laboratory.
PRACTICAL-IN-CHARGE: HEAD OF DEPARTMENT:
Prof Vaishnavi Rajkor Prof Harshada Sonkamble
BE COMP (SEM VIII)

INDEX
SR NO. EXPERIMENT NAMES DOP DOS MARKS SIGN
1. Build a GUI: know your

client (Children (4-5) years
of age).
2. Interfaces of home appliances.
3. HCI design principles-

heuristic evaluation.
4. The importance of menu
and navigation.
5. Learn the use of statistical

graphics.
6. Icon Designing.
7. Understand need of colors

and animations.
8. Provide effective
feedback, guidance and
assistance.
9. Redesign of a user interface
(Suggest and implement
changes in Existing User
Interface).
Design a navigator for a person
10. new in tourist city/village.
BE COMP (SEM VIII)

Experiment No :01
Aim: Build a GUI: know your client (Children (4-5 years of age)).
Name: Kamble Rashmita Rajendra
Roll no: 18
Date of Performance:
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 01
Aim: 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:
1. Who are they?
2. Probably not like you!
3. Talk to them
4. Watch them
5. Use your imagination
Students Task: Developed 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
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.
BE COMP (SEM VIII)

7. Do one of the following:
 To create a video with very high quality, yet a large file size, click Computer & 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.
 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, 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.
 If you recorded and timed narration and pointer movements, click Use Recorded Timings and
Narrations.
1. Click Create Video.
2. In the File name box, enter a file name for the video, browse for folder that will contain this file, and then
click Save. 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.
3. To play your newly-created video, go to the designated folder location, and then double- click the file.
Conclusion: Thus we have built an application for the children successfully.
BE COMP (SEM VIII)

Experiment No :02
Aim: Interfaces of home appliances.
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 02
Aim: Interface 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. Achieve 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 bytechnology.
Students Task: Students have to design the interface for the home appliances. Show the bad design of the
homeappliances as well as the good design of the home appliances.
Output:
1. Design interface for microwave oven.
Fig 1: Poor User Interface
BE COMP (SEM VIII)

Fig 2: Good User Interface
2. Design interface for Land-line phone.
Fig 3: Poor User Interface
Fig 4: Good User Interface
Conclusion: We have learned successfully the redesign of the home appliances.
BE COMP (SEM VIII)

Experiment No :03
Aim: HCI design principles – heuristic evaluation.
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 03
Aim: 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:
3. A project overview.
4. A checklist of heuristics.
5. Provide briefing to evaluators to:
6. Review the purpose of the evaluation session.
7. Preview the evaluation process.
8. Present the project overview and heuristics.
9. Answer any evaluator questions.
10. Provide any special evaluator training that may be necessary.
Conducting the session-:

1. Have each evaluator review the system alone.
2. The evaluator should:
3. Establish own process or method of reviewing the system.
4. Provide usage scenarios, if necessary.
5. Compare his or her findings with the list of usability principles.
6. Identify any other relevant problems or issues.
7. Make at least two passes through the system.
8. Detected problems should be related to the specific heuristics they violate.
9. Comments are recorded either:
10. By the evaluator.
11. By an observer.
12. The observer may answer questions and provide hints.
13. Restrict the length of the session to no more than 2 hours.
BE COMP (SEM VIII)

After the session-:

1. Hold a debriefing session including observers and design team members where:
2. Each evaluator presents problems detected and the heuristic it violated.
3. A composite problem listing is assembled.
4. Design suggestions for improving the problematic aspects of the system are discussed.
5. After the debriefing session:
6. Generate a composite list of violations as a ratings form.
7. 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.
Output:
 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
BE COMP (SEM VIII)

Web page Heuristics:
amazon. ebay. flipkart. paytm. snapd

Heuristics in in com com eal.c
om
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
Fig 1: Screenshot of amazon.in
Fig 2: Screenshot of flipkart.in
BE COMP (SEM VIII)

Fig 3: Screenshot of paytm.in
Fig 4: Screenshot of snapdeal.in
Fig 5: Screenshot of ebay.in
Conclusion: Hence, We successfully perform HCI design principles – heuristic evaluation.
BE COMP (SEM VIII)

Experiment No :04
Aim: The importance of menu and navigation.
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 04
Aim: 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 weekly.
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-:
1. While designing menus for GUI application, students must consider following
2. Choosing a proper menu structure suitable for the application
3. Proper ordering and grouping of menus
4. Use of line separators
5. Providing short cuts for menus using keyboard equivalents
6. Use of keyboard accelerators
7. Choosing appropriate menu titles.
8. Use of intent indicators
9. Providing defaults
10. 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.
Example:
BE COMP (SEM VIII)

Fig 2: Graphical and iconic navigation bar
Fig 3: web navigation component location
Output:
BE COMP (SEM VIII)

Conclusion: Thus we have developed an application using menus and navigation.
BE COMP (SEM VIII)

Experiment No: 05
Aim: Learn the use of statistical graphics.
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 05
Aim: Learn 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-:

1. Curve and Line Graphs
2. Surface Charts
3. Scatter plots
4. Bar Graphs
5. Segmented or Stacked
6. 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. 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 Data dimensions being
illustrated.
7. Employ data in multiple ways, whenever possible.
8. Maximize data density.
9. Employ simple data-coding schemes.
10. Avoid unnecessary embellishment of:
 Grids.
 Vibration.
 Ornamentation.
Fill the graph’s available area with data.
BE COMP (SEM VIII)

Example:
Fig 1: Example of pie chart and bar chart
Output-: Steps to create the Statistical 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 men
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 10summer 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 numberthat 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.
BE COMP (SEM VIII)

5. Highlight the entire series you have entered, including column titles. MicrosoftExcel 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 directlyto 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 atraditional 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.
BE COMP (SEM VIII)
 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.
BE COMP (SEM VIII)

Conclusion: Thus we have studied the use of statistical graphic.
BE COMP (SEM VIII)

Experiment No: 06
Aim: Icon designing.
Name: Kamble Rashmita
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 06
Aim: 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:
1. Icons should be simple

2. Symbols used as icon must be visually distinguishable from other symbols.
3. Use cosistent structure and shape.
4. Screen resolution should be sufficient to establish the difference of form at the normal working
distance.
5. Select proper colors
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.
BE COMP (SEM VIII)

Step 2: Browse a image you want and paste it in to new layer in paint.net. and select keep canvas size.
Step 3: The extension for icon is .ico and this extension by default is not present in paint.net but
you canadd plug-in for the same.
BE COMP (SEM VIII)

Step 4: You can change icon of your computer application by right clicking on the
application go toproperties >change icon.
Conclusion: Thus we created a simple con for eclipse IDE.
BE COMP (SEM VIII)

Experiment No: 07
Aim: Understand need of colors and animations.
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 07
Aim: 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:
1. While choosing colors for display, one must consider these factors:
2. The human visual system
3. The possible problems that the colors’ use may cause
4. The viewing environment in which the display is used
5. The task of the user
6. Hardware on which the colors will be displayed. For the animation one must keep in mind
7. Do not Distract Attention from Salient Information
8. Avoid Clutter
9. Allow Appropriate Exposure Duration
10. Manage the Positioning and Organization of Objects
11. Adhere to Color Conventions
12. Support Animation with Textual and Auditory Information
13. Appreciate the Insights of Semiotics
14. Comply with the Cooperative Maxims.
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
BE COMP (SEM VIII)

Conclusion: Thus we have studied how to select proper colors and animation.
BE COMP (SEM VIII)

Experiment No: 08
Aim: Provide effective feedback, guidance and assistant.
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 08
Aim: 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.
Output:
Conclusion: Thus we have successfully provided effective feedback, guidance andassistance.
BE COMP (SEM VIII)

Experiment No: 09
Aim: Redesign a user interface(Suggest and implement changes in the Existing
User Interface).
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 08
Aim: Redesign of a user interface (Suggest and implement changes in Existing User Interface)
Theory-:
The principles of user interface design are intended to improve the quality of user interface design. The user
interface design goals can be refined to achieve the objective of a good design. They are fundamental to the design
and implementation of all effective interfaces, GUI and Web. These principles are general characteristics of the
interface, and they apply to all aspects.
They can be described as follows:
Aesthetically Pleasing:
 Provide visual appeal by following these presentation and graphic design principles.
 Use color and graphics effectively and simply.
Clarity: The interface should be visually, conceptually, and linguistically clear, including Visual elements Functions
Metaphors Words and Text.
Compatibility: Provide compatibility with the following:
 The user
 The task and job
 The Product Adopt the User’s Perspective
Configurability: Permit easy personalization, configuration, and reconfiguration of settings
Comprehensibility: A system should be easily learned and understood. The flow of actions, responses, visual
presentations and information should be in a sensible order that is easy to recollect and place in context.
Consistency: A system should look, act, and operate the same throughout.
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.
Directness: Provide direct ways to accomplish tasks. Available alternatives should be visible. The effect of
actions on objects should be visible.
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.
Efficiency: Minimize eye and hand movements, and other control actions.
Familiarity: Employ familiar concepts and use a language that is familiar to the user. Keep the interface
BE COMP (SEM VIII)

natural, mimicking the user’s behavior patterns. Use real-world metaphors.
Forgiveness: Tolerate and forgive common and unavoidable human errors. Prevent errors from occurring
whenever possible.
Recovery: A system should permit commands or actions to be abolished or reversed.
Responsiveness: The system must rapidly respond to the user’s requests.
Transparency: Permit the user to focus on the task or job, without concern for the mechanics of the interface.
Simplicity: Provide as simple an interface as possible.
Output: User interface for air conditioner
Before
After
Conclusion: Hence, we Successfully Redesign of a user interface (Suggest and implement changes
inExisting User Interface)
BE COMP (SEM VIII)

Experiment No: 10
Aim: Design a navigator for a person new in tourist city/village.
Roll no: 18
Date of Submission:
Marks:
Sign:
BE COMP (SEM VIII)

Experiment No : 10
Aim: Design a navigator for a person new in tourist city/village.
Theory:
 Navigation and flow
Navigation through a screen or page should be obvious and easy to accomplish. Navigation can be made obvious by
grouping and aligning screen controls, and judiciously using line borders to guide the eye. Using the various display
techniques, focus attention on the most important parts of a screen. Always tab through a screen in the logical order
of the information displayed, and locate command buttons at the end of the tab order sequence. Guidelines for
accomplishing all of these general objectives will be found in subsequent pages. The direction of movement between
screen items should be obvious, consistent, and rhythmic. The eye can be guided through the screen with lines
formed through use of white space and display elements. Sequence of use can be made more obvious through the
incorporation of borders around groupings of related information or screen controls. Borders provide visual cues
concerning the arrangement of screen elements, because the eye will tend to stay within a border to complete a task.
Aligning elements will also minimize screen scanning and navigation movements.
 Visually pleasing composition
Eyeball fixation studies also indicate that during the initial scanning of a display in a clockwise direction, people are
influenced by the symmetrical balance and weight of the titles, graphics, and text of the display. A cluttered or
unclear screen requires that some effort be expended in learning and understanding what is presented. The screen
user who must deal with the display is forced to spend time to learn and understand. The user who has an option
concerning whether the screen will or will not be used may reject it at this point if the perceived effort in
understanding the screen is greater than the perceived gain in using it. An entity’s design is an unconscious process
that attracts, motivates, directs, or distracts. Visually pleasing composition draws attention subliminally, conveying a
positive message clearly and quickly. A lack of visually pleasing composition is disorienting, obscures the intent and
meaning, slows one down and confuses one.
 Balance
Balance is stabilization or equilibrium, a midway centre of suspension. The design elements have an equal weight,
left to right, top to bottom. Our discomfort with instability, or imbalance, is reflected every time we straighten a
picture hanging askew on the wall. Balance is most often informal or asymmetrical, with elements of different
colors, sizes and shapes being positioned to strike the proper relationships.
 Symmetry
Symmetry is axial duplication: A unit on one side of the centerline is exactly replicated on the other side. This exact
replication creates formal balance, but the difference is that balance can be achieved without symmetry. Symmetry’s
opposite is asymmetry. Our eye tends to perceive something as more compressed or compact when it is symmetric.
Asymmetric arrays are perceived as large.
 Presenting information simply and meaningfully
Following are guidelines for presenting information on screens. The fundamental goals are clarity and simplicity
in form, comprehensibility in organization, efficient information assimilation, and pleasantness in tone.
BE COMP (SEM VIII)

I. Legibility:. Legibility is distinguishableness. Computer technology today presents a seemingly endless

array
of choices in such aspects as font styles, sizes, and weights. Is the type of the proper kind and of
adequate size and clarity for viewers of all ages? Is the contrast between text and its background
adequate?
II. Readability:. Readability is the degree to which prose can be understood and based on the complexity of
words and sentences. Readability is established by factors like the length and commonality of words used,
sentence length, and the number of syllables and clauses contain within a sentence. In design, is the
information written at an understandable level for all users? Is it direct, simple, and easy to comprehend? Is
visual interference minimized?
Output: Mumbai navigator for tourist.
Conclusion: Hence, we Successfully Design a navigator for a person new in tourist city/village.
BE COMP (SEM VIII)

BE COMP (SEM VIII)


Aloo

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aloo

Uploaded by

Copyright:

Available Formats

!! Sab Ka Malik Atma !!

Vishwatmak Jangali Maharaj Ashram Trust’s

Subject: Human Machine Interaction

Under the Guidance of: Prof Vaishnavi Rajkor

BE COMP (SEM VIII)

BE COMP (SEM VIII)

PRACTICAL-IN-CHARGE: HEAD OF DEPARTMENT:

Prof Vaishnavi Rajkor Prof Harshada Sonkamble

BE COMP (SEM VIII)

1. Build a GUI: know your

3. HCI design principles-

5. Learn the use of statistical

7. Understand need of colors

BE COMP (SEM VIII)

Name: Kamble Rashmita Rajendra

Subject: Human Machine Interaction

BE COMP (SEM VIII)

Objective: Know the user of the application.

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

3. Save the presentation.

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

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

BE COMP (SEM VIII)

7. Do one of the following:

1. Click Create Video.

Conclusion: Thus we have built an application for the children successfully.

BE COMP (SEM VIII)

Name: Kamble Rashmita Rajendra

Subject: Human Machine Interaction

BE COMP (SEM VIII)

 Reduce visual work.

Fig 1: Poor User Interface

BE COMP (SEM VIII)

Fig 2: Good User Interface

2. Design interface for Land-line phone.

Fig 3: Poor User Interface

Fig 4: Good User Interface

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

BE COMP (SEM VIII)

Name: Kamble Rashmita Rajendra

Subject: Human Machine Interaction

BE COMP (SEM VIII)

Norman’ design principles are-:

Heuristic Evaluation Process Preparing the session-:

Conducting the session-:

BE COMP (SEM VIII)

After the session-:

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

Present new information with meaningful

Group data in consistently meaningful ways

BE COMP (SEM VIII)

Web page Heuristics:

amazon. ebay. flipkart. paytm. snapd

Minimize the user’s memory load

Build flexible and efficient systems

Design aesthetic and minimalist systems

Provide progressive levels of detail

Give navigational feedback

Don’t lie to the user

Fig 1: Screenshot of amazon.in

Fig 2: Screenshot of flipkart.in

BE COMP (SEM VIII)

Fig 3: Screenshot of paytm.in