HMI Experiments

CHHATRAPATI SHIVAJI MAHARAJ INSTITUTE
OF TECHNOLOGY
(Affiliated to the Mumbai University, Approved by AICTE-New Delhi)
Near Shedung Toll Plaza, Old Mumbai-Pune Highway, Post - Shedung, Taluka Panvel, Dist. Raigad, Navi Mumbai,
Maharashtra 410206
Certificate
This is to certify that Mr./Ms. _________________________________________________
SEM VIII Comp. Sci. Engg.
RollNo:_______________Semester:____________________Branch:__________________
Human Machine Interaction Lab

has conducted all practical work of the session. Subject:_______________________________
as a part of academic requirement of University of Mumbai and has completed all exercise
satisfactorily during the academic year 2020 to 2021.
Exam Seat No._________________
Date: 10 / 05 / 2021
Signature of Student Lecture in Charge
Internal Examiner Head of Department
Examiner Examiner Principal
College
Seal
CHHATRAPATI SHIVAJI MAHARAJ INSTITUTE OF
TECHNOLOGY
(Affiliated to the Mumbai University, Approved by AICTE-New Delhi)
Academic Year 2020 - 2021 Semester SEM VIII Branch Comp. Sci. Engg.
INDEX OF EXPRTIMENTS /TUTORIALS/ASSIGNMENTS IN Human Machine Interaction Lab
Sr. Title of Page Performance Submission Sign Grade/

No Experiment/Tutorial No Date Date Remark
1 Case Study on User Interface. 1
2 Design a Mobile App/ Website that can 6
teach mathematics to children of 4-5
years age in schools in rural/ urban
sector.
3 Design a Website/Mobile App that can 12
help people to sell their hand-made
products in metro cities.
4 Design a Mobile App/Website to get an 21
experience for passengers whose flight
/train is delayed.
5 Design of User interface for the system 30
using various interaction styles.
6 To learn Statistical Graphics and its use 34
in visualization.
7 Design icons for a specific Domain 38
(Domain: Hospital).
8 Design an interface for Home 44
Appliance.
9 Redesign and Develop a website of an 48
organization.
10 Understand screen complexity of 57
existing Graphical User Interface and
redesign the interface to minimize the
screen complexity.
Signature of Student Signature of Staff I/C

Experiment No.:- 01
Aim:- Case Study on User Interface.
Theory:-
What is UI?
 The user interface (UI) is the space where interactions between humans and machines
occur.
 The task of user interface is to act as an interface between the human and machines.
 The goal of user interface design is to produce a user interface which makes it easy,
efficient, and enjoyable (user-friendly) to operate a machine in the way which produces
the desired result.
 Examples of UI include computer operating systems, hand tools, heavy machinery
operator controls, and process controls.
Types of UI:
1. Command Line Interface (CLI) -
 Command line interfaces are the oldest of the interfaces discussed here.
 It involves the computer responding to commands typed by the operator.
 This type of interface has the drawback that it requires the operator to remember
a range of different commands and is not ideal for novice users.
2. Graphical User Interface (GUI) -

 GUI allows the user to interact with devices through graphical icons and visual
indicators such as secondary notations.
 The first commercially available GUI, called "PARC," was developed by Xerox
and it was used by the Xerox 8010 Information System.
1
3. Menu Driven Interface (MDI) -
 A menu driven interface is commonly used on cash machines (also known as
automated teller machines (ATM's), ticket machines and information kiosks
(for example in a museum).
 They provide a simple and easy to use interface to interact with the user.
4. Form Based Interface (FBI) -

 The forms used for different web pages to collect user data n different websites
and also in call centres to collect feedbacks.
2
5. Natural Language Interface (NLI) -
 A natural language interface is a spoken interface where the user interacts with
the computer by talking to it.
 Example would be Alexa, Google Home, etc.
Principles of UI Design:
 Consistency - Consistent UI allows users to transfer existing knowledge to new tasks,
master new aspects faster, and focus on solving the problem, rather than waste time
understanding the differences in the use of certain controls, commands, etc.
 Friendliness - Users usually learn how to work with a new software product by trial
and error. An effective interface should take this into account. At each stage of work, it
should only allow the appropriate set of actions and warn users about situations where
they can damage the system or data.
 Clarity - The users need to understand what they interact with through the interface.
There should be no confusion. Clarity is about giving users confidence and willingness
to continue interacting with the interface.
 Interaction - The best interfaces are those that surprise, inspire, awaken feelings, and
strengthen the experience in interaction with the world.
 Transparency - The user will have to go through all that to get to the point. To avoid
that, UI design should be aimed at direct control and naturalness.
 Strong Visual Hierarchy - It allows setting the sequence and smoothly directing the
user’s view from one interface element to another. With a weak visual hierarchy, the
interface looks overloaded and messy.
 Step-by-step Information Flow - The screen has to show only the necessary
information. If a person has to make a choice, it has to provide enough information to
make a decision and proceed with details on the following screens.
 Invisibility - It allows the user focusing on the goals without being distracted by the
interface. Although it might be hard for a designer to implement, less is better.
Features of a Good GUI:

 User Friendly
 Make Everything the User Needs Readily Accessible
 Be Consistent: Don’t keep on changing the followed pattern.
 The Purpose of the GUI should be clear.
 Appropriate feedback represents a good GUI.
 Personalize with the user of the GUI.
Features of a Bad GUI:

 The design lacks of contrast.
 Less responsive design represents a bad UI.
 No user feedback with plagiarism data.
 Inconsistent Style.
 No feedback is bad.
3
Comparison of two GUI: Cricbuzz and ESPNcricinfo
Principles Cricbuzz ESPNcricinfo

1. Consistency There is no form of There is some sort of
consistency as far as consistency to master and
mastering to new features is surf new features for this
concerned. website.
2. Friendliness This website is able to adapt This website is not able to
to potential user errors and adapt to potential user errors
hence kind of more user and hence I feel it’s not that
friendly. user friendly compared to
Cricbuzz.
3. Clarity The users have more sort of The interface is a bit complex
clarity and are able to which gives less clarity to the
understand the interface very user of the UI.
easily due to ease of use.
4. Interaction Various cricket related Accessing the cricket related
information is easily information is not that easier
accessible but stores the with their UI but can provide
historic data of only the historic data unlike Cricbuzz.
international matches.
5. Transparency Less unnecessary layers There is some unnecessary
make the UI more layers to the interface like
transparent. extra buttons, graphics,
options, windows, etc.
6. Strong Visual The order in which the visual The order in which the
Hierarchy elements on the screen visual elements on the
should be viewed is not screen should be viewed is
easily understood. understood easily.
7. Step-by-Step Users are provided with less Users are provided with
Information Flow options at moment to make a many options at moment
decision which makes the which makes the decision
user task easy as to get their making part harder.
desired results.
8. Invisibility User’s gets distracted Users are been able to focus
sometimes like while on their goals rather than
watching a scorecard an getting distracted.
unrelated news pops up.
9. Provides Feedback For every user action, the For every user action, the
website clear reaction is not website is showing a
provided, it directs directly to meaningful, clear reaction.
the next stage without any
feedback.
Conclusion:-
In this experiment, we studied about UI their types and the basic Principles of a UI and
how does UI can play an important role in the make or break of the organization by connecting
to their users through the UI.
4
OUTPUT:-
Cricbuzz.com -
ESPNcricinfo.com -
5
Experiment No.:- 02
Aim:- Design a Mobile App/ Website that can teach mathematics to children of 4-5 years age
in schools in rural/ urban sector.
Theory:-
The journey into the world of interface design and the screen design process must begin
with an understanding of the system user, the most important part of any computer system. It
is the user whose needs a system is built to serve. Understanding people and what they do is a
difficult and often undervalued process but very critical because of the gap in knowledge, skills,
and attitudes existing between system users and developers that build them. To create a truly
usable system, the designer must always do the following:
 Understand how people interact with computers.
 Understand the human characteristics important in design.
 Identify the user’s level of knowledge and experience.
 Identify the characteristics of the user’s needs, tasks, and jobs.
 Identify the user’s psychological characteristics.
 Identify the user’s physical characteristics.
 Employ recommended methods for gaining understanding of users.
Different Levels of Clients:-

 The most important thing is to understand who are the users of our system/product?
 To build system/product to meet the different levels of user
 Beginner
 Intermediate
 Expert
We can divide the users’ skill spectrum into three parts. The first part comprises beginners, the
middle is where so-called intermediates belong, and the third part is for experts. To teach
mathematics for children of 4 to 5 years of age we need to understand children psychology,
analyse children behaviour, their preferences, interests, etc. To design interface for children,
we can make use of bright colours, pictorial representation, animations, sound, and cartoon
characters. For rural area children we can also provide option of regional language in GUI.
Conclusion:-
Hence, we have designed a Website that can teach mathematics to children of 4-5 years
age in schools in rural/ urban sector.
6
CODES:-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#1325c2a2">
<meta name="Description" content="Simple Math Challenge">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:100,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Markazi+Text" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="challenge.js" defer></script>
<title>Math Challenge</title>
</head>
<body>
<header>
<h1>Simple Math Challenge!</h1>
</header>
<main class="container">

<section>
<fieldset>
<legend>FAQ:</legend>
<p class="faq">
Use keyboard<br>
Press <span class="ins-hl">s/start</span> to START<br>
Enter to submit<br>
<span class="green">+1 pt</span> if correct<br>
<span class="red">-1 pt</span> if not correct
</p>
</fieldset>
<fieldset class="instructions">
<legend>Points:</legend>
<p class="p-inst">
Excellent<span class="colon-color">:</span> 16+<br>
Good<span class="colon-color">:</span> 12-15<br>
Fine<span class="colon-color">:</span> 8-11<br>
Bad<span class="colon-color">:</span> < 8
</p>
</fieldset>
</section>


<section class="counter">
<div class="field">
<div><input class="example" disabled></div>
<div><input class="answer" disabled></div>
<div><p class="scoreLabel">Points</p></div>
<div id="score">0</div>
<div class="start">start</div>
</div>
<div class="timer">30</div>
<div class="time">seconds<br>left</div>
</section>
7

<section>
<fieldset class="levels">
<legend>Settings:</legend>
<div>
<label class="settings"><span class="set-color"><ins>Digits:</ins></span></label><br>
<input class="settings" type="radio" name="digits" id="single" value="1" checked>
<label class="settings" for="single">single</label>
<input class="settings" type="radio" name="digits" id="double" value="2">
<label class="settings" for="double">double</label>
<input class="settings" type="radio" name="digits" id="triple" value="3">
<label class="settings" for="triple">triple</label><br>
<label class="settings">
<span class="set-color"><ins><del>Answer range:</del></ins></span></label><br>
<label class="settings" for="mm-range-min">Min: </label>
<input class="settings" type="number" name="range" id="mm-range-min" value="1" min="1"
onpaste="return false">
<label class="settings" for="mm-range-max">Max: </label>
<input class="settings" type="number" name="range" id="mm-range-max" value="15" min="2"
onpaste="return false"><br>
<label class="settings"><span class="set-color"><ins>Options:</ins></span></label><br>
<input class="settings" type="checkbox" name="math" id="addition" value="+" checked>
<label class="settings" for="addition">Addition</label><br>
<input class="settings" type="checkbox" name="math" id="subtraction" value="-">
<label class="settings" for="subtraction">Subtraction</label><br>
<input class="settings" type="checkbox" name="math" id="multiplication" value="*">
<label class="settings" for="multiplication">Multiplication</label><br>
<input class="settings" type="checkbox" name="math" id="division" value="/">
<label class="settings" for="division">Division</label><br>
<input class="settings" type="checkbox" name="sqrt" id="square-root" value="sqrt">
<label class="settings" for="square-root">Square root</label><br>
<button class="apply" type="button">Apply</button>
</div>
</fieldset>
</section>
</main>

<article class="statistics">
<h2>Statistics</h2>
</article>
</body>
</html>
8
OUTPUT:-
9
10
11
Experiment No.:- 03
Aim:- Design a Website/Mobile App that can help people to sell their hand-made products in
metro cities.
Theory:-
Analysis of rural people:

Rural people have only recently obtained access to web technology as a whole, so it is
fair to assume, they will not be aware of current trends in web design. Hence, the website
designed to sell items made by a rural entrepreneur needs to be simple enough without much
complexity so that they are able to quickly comprehend how the website works and also, allow
their fellow villagers to be able to use it.
Existing Apps:
1. Amazon -
 Amazon is one of the most used applications used to buy items online, however,
it is not suitable for a rural entrepreneur to use as the website is not specialised
to their use case. Amazon is not the right choice as the rural entrepreneur’s
products may never get popular due to the existence of big box retailers which
sell similar products.
2. Flipkart -
 Flipkart suffers from many of the problems that also plague Amazon. Namely,
that it’s also a common marketplace for all sorts of items and a rural
entrepreneur would get dominated by a bigger retailer who sells a lot more
items.
Choice of Screen Elements:

For screen elements, it would be preferred if hovering over the picture of the item
zoomed into the item or perhaps showed the item from different angles. It would also help the
entrepreneur if when the customer is on a product page, they are also shown the related products
in the same category. For e.g., if the customer is looking for handicrafts products, it would be
helpful if they are shown similar artwork from the same manufacturer.
Conclusion:-
In the above experiment, we have thus created the GUI design for a website to be used
by the rural manufacturer of Village Specialities to sell their products with the help of a website.
An entrepreneur can use similar websites to attract a larger customer base and expand their
business. Since this website is exclusive to this entrepreneur, there isn’t a chance of them
getting suppressed in sales by larger retailers.
12
CODES:-
theperfecttreat.sql
#####Database: `theperfecttreat`#####
##Table structure for table àdmin`##

DROP TABLE IF EXISTS àdmin`;
CREATE TABLE IF NOT EXISTS àdmin` (
à_id` int(11) NOT NULL AUTO_INCREMENT,
àdminname` varchar(50) NOT NULL,
`hashed_password` varchar(60) NOT NULL,
PRIMARY KEY (à_id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
##Table structure for table `comments`##

DROP TABLE IF EXISTS `comments`;
CREATE TABLE IF NOT EXISTS `comments` (
`c_id` int(11) NOT NULL AUTO_INCREMENT,
ù_id` int(11) NOT NULL,
`comment` varchar(600) NOT NULL,
PRIMARY KEY (`c_id`),
KEY ù_id` (ù_id`)
##Table structure for table ìtems`##

DROP TABLE IF EXISTS ìtems`;
CREATE TABLE IF NOT EXISTS ìtems` (
ìtem_id` int(11) NOT NULL AUTO_INCREMENT,
`product_id` int(11) NOT NULL,
ìtemname` varchar(50) NOT NULL,
`price` int(11) NOT NULL,
PRIMARY KEY (ìtem_id`)
##Dumping data for table ìtems`##

INSERT INTO ìtems` (ìtem_id`, `product_id`, ìtemname`, `price`) VALUES
(1, 1, 'Kaju Katli', 800),
(2, 2, 'Malai Barfi', 640),
(3, 3, 'Coco Barfi', 380),
(4, 4, 'Besan Barfi', 440),
(5, 5, 'Khopra Pak', 380),
(6, 6, 'Gulab Jamun', 300),
(7, 7, 'Jalebi', 250),
(8, 8, 'Ras Malai', 450),
(9, 9, 'Laddu', 350),
(10, 10, 'Anjeer Barfi', 760),
(11, 11, 'Kesar Katli', 960),
(12, 12, 'Badam Katli', 1000);
##Table structure for table òrder_details`##

DROP TABLE IF EXISTS òrder_details`;
CREATE TABLE IF NOT EXISTS òrder_details` (
òrder_id` int(11) NOT NULL AUTO_INCREMENT,
`product_id` int(11) NOT NULL,
ù_id` int(11) NOT NULL,
`quantity` int(3) NOT NULL,
`status` int(1) NOT NULL,
`payment_status` int(11) NOT NULL,
13
PRIMARY KEY (òrder_id`),
KEY `product_id` (`product_id`),
KEY ù_id` (ù_id`)
##Table structure for table `rating`##

DROP TABLE IF EXISTS `rating`;
CREATE TABLE IF NOT EXISTS `rating` (
`r_id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(60) NOT NULL,
`rating_total` int(11) NOT NULL,
`rating_count` int(11) NOT NULL,
PRIMARY KEY (`r_id`)
##Dumping data for table `rating`##

INSERT INTO `rating` (`r_id`, `title`, `rating_total`, `rating_count`) VALUES
(1, 'product quality', 0, 0),
(2, 'taste and flavours', 0, 0),
(3, 'monthly offers', 0, 0),
(4, 'order packaging', 0, 0),
(5, 'order delivery', 0, 0);
##Table structure for table ùsers`##

DROP TABLE IF EXISTS ùsers`;
CREATE TABLE IF NOT EXISTS ùsers` (
ù_id` int(11) NOT NULL AUTO_INCREMENT,
ùsername` varchar(50) NOT NULL,
`hashed_password` varchar(60) NOT NULL,
èmail` varchar(50) NOT NULL,
`mobile` varchar(10) NOT NULL,
`gender` varchar(8) NOT NULL,
`balance` varchar(10) NOT NULL,
PRIMARY KEY (ù_id`)
COMMIT;
login.html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="../css/style_signin_login.css">
<script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body>
<h2 align="center">Login Form</h2>
<form action="../php/login.php" method="post" style="border:1px solid #ccc">
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<br/><br/>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<br/><br/>
<div class="clearfix">
14
<button type="reset" name="reset" id="cancelbtn" onclick="alert('Cancel Clicked
!');">Cancel</button>
<button type="submit" name="submit" id="loginbtn">Login</button>
</div>
<p align="center"><b>Not Yet Registered ? <a href="signup.html">SignUp</a> for free !</b></p>
<p align="center"><b><a href="perfect_admin.html">Click Here</a> for Admin login.</b></p>
</div>
</form>
</body>
</html>
admin_signup.js
function checkAdmin(){
var admin = $('#adminname').val();
if (admin.length >= 5) {
$.post('../php/perfect_adminsignup.php',{validateadmin:"yes",adminname:$('#adminname').val()})
.done(function(data){
if (data.trim() == "success") {
$('#errorAdminname').html('Adminname Already exists !');
$('#signupbtn').attr('disabled','');
}
else{
$('#errorAdminname').html('');
$('#signupbtn').removeAttr('disabled');
}})}
else {
$('#errorAdminname').html('Adminname Length is Too Short !');
$('#signupbtn').attr('disabled','');
}}
function validatePassword() {
var pass = document.getElementById('password').value;
if (pass.length <= 8) {
document.getElementById('errorPassword').innerHTML = " Password length too short !";
document.getElementById('signupbtn').setAttribute('disabled','');
}
else{
document.getElementById('errorPassword').innerHTML = " ";
document.getElementById('signupbtn').removeAttribute('disabled');
}}
function validateRepeatPassword() {
var pass1 = document.getElementById('password').value;
var pass2 = document.getElementById('repeatpassword').value;
if (pass1 != pass2) {
document.getElementById('errorRepeatPassword').innerHTML = " Passwords Don't Match !";
document.getElementById('signupbtn').setAttribute('disabled','');
}
else {
document.getElementById('errorRepeatPassword').innerHTML = " ";
document.getElementById('signupbtn').removeAttribute('disabled');
}}
signup.php
<?php
function redirect_to($new_location) {
header("Location: " . $new_location);
exit();
}
15
?>
<?php
function password_encrypt($password){
$hash_format="$2y$10$";//tells PHP to use Blowfish with a "cost" of 10
$salt_length="22";//Blowfish salts should be 22 characters or more
$salt=generate_salt($salt_length);
$format_and_salt=$hash_format . $salt;
$hash=crypt($password,$format_and_salt);
return $hash;
}
function generate_salt($length){
//not 100% unique,not 100% random,but good enough for a salt
//MD5 returns 32 characters
$unique_random_string=md5(uniqid(mt_rand(),true));
//Valid characters for a salt are[a-zA-Z0-9./]
$base64_string=base64_encode($unique_random_string);
//But not '+' which is valid in base_64 encoding
$modified_base64_string=str_replace('+','.',$base64_string);
//truncate string to the correct length
$salt=substr($modified_base64_string,0,$length);
return $salt;
}
?>
<?php require_once("db_connection.php");
if (isset($_POST["validateuser"]) && $_POST["validateuser"] == "yes") {
$query = "SELECT * FROM users WHERE username LIKE '".$_POST["username"]."'";
$res = mysqli_query($connection,$query);
if(mysqli_num_rows($res) > 0){
echo "success";
}
exit;
}
if (isset($_POST['submit'])) {newUser($connection);}
function newUser($connection) {
$username = $_POST['username'];
$email = $_POST['email'];
$mobile = $_POST['mobile'];
$hashed_password = password_encrypt($_POST['password']);
$gender = $_POST['gender'];
$balance=0;
$query = "INSERT INTO ùsers`
(ùsername`,`hashed_password`,èmail`,`mobile`,`gender`,`balance`) VALUES
('$username','$hashed_password','$email',$mobile,'$gender','$balance')";
$result = mysqli_query($connection, $query);
if ($result) {
echo "<script>alert('Successfully Signed Up !');
window.location = 'login.php'; </script>";
}
else {
alert("error");
redirect_to("signup.php");
}}
?>
search.html
<!DOCTYPE html>
<html lang="en">
16
<head>
<meta charset="utf-8" />
<title>About us</title>
<link href="../css/all.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="../css/search_mystyle.css" />
<link href="../css/items.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/aboutus.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="site">
<div id="header" role="banner">
</div>
<div id="nav_main" role="navigation" class="reset menu pull_out">
<h3 class="hidden">Main Navigation</h3>
<ul>
<li><a href="../php/sweets.php" class="parent"><span>Sweets</span></a></li>
<li><a href="../other/menu.xml"><span>Menu</span></a></li>
<li><a href="../php/bulk_submit.php"><span>Bulk Orders</span></a></li>
<li><a href="../php/aboutus.php"><span>About Us</span></a></li>
<li><a href="../php/temp_offer.php?month=10" class="parent"><span>Seasonal
Offers</span></a></li>
</ul>
</div>
<div id="content">
<div id="searcharea">
<label for="search">live search</label>
<p>Enter the name or info about a product</p>
<input type="search" name="search" id="search" placeholder="name or info"/>
</div>
<div id="update"></div>
</div>
<br>
<hr>
<div id="footer">
</div>
<p id="disclaimer">This website is made by Saqlain Kadiri and Rahul Joshi for educational
purposes only. By using this website you understand that there is no attorney client relationship between
you and the website publisher. This website is to be used as a template for online sweet shopping for
educational purposes only.</p>
<script src="../other/jquery.js"></script>
<script src="../js/search_script.js"></script>
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</div>
</body>
</html>
17
OUTPUT:-
Home Page -
Search Page -
18
Contact Us Page -
Order Summary Page -
19
Previous Order Page -
Rating Page -
20
Experiment No.:- 04
Aim:- Design a Mobile App/Website to get an experience for passengers whose flight /train
is delayed.
Theory:-
This app must be able to help the passenger to get the details of the rescheduled train
or flight and help the passenger to spend quality time.
Analysis of passenger behaviour:

A passenger prefers a variety of options for entertainment if the flight is delayed. They would
prefer options of music, movies, maps regarding the location about the duty shops, food courts
in airports. Any passenger would be annoyed if the flight is delayed for a longer time and not
provided any services by the airlines.
What kinds of interfaces will they like and why?

A good interface design should be attractive. It means that the use of that interface is enjoyable.
The design should include cool user-friendly features with the visual appeal. Clarity is the most
important characteristic of user interface design. The content should be sequential and fast
loading so that it does not frustrate the user. Good colour combinations and responsive with
feedback option.
Existing apps - analyse and rate them:

Air India app: The interface is interactive, responsive and user friendly but doesn’t provide any
entertainment options. Any passenger who has booked an Air India flight can have access to
this app and enjoy the features. The GUI is consistent, attractive and forgiving. The login and
signup page is sequential.
What will be your choice of screen elements?

When designing your interface, be consistent and predictable in your choice of interface
elements. Users have become familiar with elements acting in a certain way, so choosing to
adopt those elements when appropriate will help with task completion, efficiency, and
satisfaction.
Interface elements preferred:
 Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles,
text fields, date field
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags,
icons
 Informational Components: tooltips, icons, progress bar, notifications, message boxes,
Modal Windows
 Containers: accordion
How will your app be better than the existing ones?

My app consists of attractive styles with a lot of entertainment options so that users will not
get bored during the wait at the airport. It is responsive and user friendly. It contains the
information about the arrivals and the departures of flights. In addition to that it also comes
with the navigation map of the full airport about the food courts and duty free shops.
21
Conclusion:-
In the above experiment, we created an app that will help the passengers to spend leisure
time, if their flight gets delayed. It satisfies the requirements of the passenger and designed an
attractive, responsive and interactive interface so that passengers enjoy their time at the airport
during flight delayed hours.
22
CODES:-
main.css
/*Base styles: opinionated defaults*/
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*A better looking default horizontal rule*/

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*Remove the gap between audio, canvas, iframes,

* images, videos and the bottom of their containers:*/
audio,
canvas,
iframe,
img,
svg,
video {vertical-align: middle;}
/*Remove default fieldset styles.*/

fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*Allow only vertical resizing of textareas.*/

textarea {
resize: vertical;
}
/*Browser Upgrade Prompt*/
23
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/*Author's custom styles*/

/*Helper classes*/
/*Hide visually and from screen readers*/
.hidden {display: none !important;}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/*Extends the .visuallyhidden class to allow the element

*to be focusable when navigated to via the keyboard:*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/*Hide visually and from screen readers, but maintain layout*/

.invisible {visibility: hidden;}
/** Clearfix: contain floats

* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
24
display: table; /* 2 */}
.clearfix:after {clear: both;}
/*EXAMPLE Media Queries for Responsive Design.

These examples override the primary ('mobile first') styles.
Modify as content requires.*/
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/*Print styles.*/
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {text-decoration: underline;}
a[href]:after {content: " (" attr(href) ")";}
abbr[title]:after {content: " (" attr(title) ")";}
/*Don't show links that are fragment identifiers,

* or use the `javascript:` pseudo protocol*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {white-space: pre-wrap !important;}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*Printing Tables:*/
thead {display: table-header-group;
}
tr,
img {page-break-inside: avoid;}
p,
h2, h3 {orphans: 3; widows: 3;}
h2, h3 {page-break-after: avoid;}
}
25
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>How should I fly?</title>
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">
<style>
/* Container needed to position the button. Adjust the width as needed */
.container {
position: center;
width: 100%;
}
/* Make the image responsive */
.container img {
width: 90%;
height: 90%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Style the button and place it in the middle of the container/image */
.container .btn {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 20px;
padding: 24px 48px;
border: none;
cursor: pointer;
border-radius: 45px;
}
.container .btn:hover {
background-color: lightslategray;
}
.container .name {
position: absolute;
top: 35%;
left: 30%;
color: rgb(71, 71, 71);
font-size: 80px;
font:bold;
font-family: 'Kalam', cursive;
}
</style>
</head>
<body>
<div class="container">
<a href="https://www.github.com/vincentlux/flight-delay-viz" class="github-corner" aria-
label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path
d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0
C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3
123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
26
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4
142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4
163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4
C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0
205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9
156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"
class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave
560ms ease-in-out}@keyframes octocat-
wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-
25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-
arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<img src="http://0.0.0.0:5000/static/assets/img/background.jpg" alt="backgound">
<p class="name">How should I fly?</p>
<a href="/dashboard"><button class="btn">Get Started</button></a>
</div>
</body>
</html>
27
OUTPUT:-
28
29
Experiment No.:- 05
Aim:- Design of User interface for the system using various interaction styles.
Theory:-
Importance of Interaction styles:

The style of the interaction utilized in a UI system plays an important role in the
usability of the interface. It should be relevant to the context of the tasks being accomplished
and the environment in which they are being performed. The style of interaction that is best for
repetitive tasks may be different than what would be best for tasks that are performed with far
less frequency or in different surroundings. Determining the best style of UI for how the users
interact with a product or device will go a long way to meeting the needs of the users and
improving their user experience.
Problems with UI without Interaction Styles:

If there are no interaction styles, then the user has to learn all the shortcuts in order to
perform tasks. Such as UI does not allow easy learning. Decision making process of the user
is not structured properly. There is an increase in the amount of keystrokes. For example if
there are no forms, then data entry is a complex task.
Current website:
The problem that I found in the current website is that, when one clicks on the
navigation bar for the services, about us or on online booking the new page is opened every
time, which makes the website load slowly. So in my design, I made sure that only a pop- up
window is opened instead of a new webpage. The new chatbot feature is added to improve the
user's experience, and when scrolled down only the chatbot icon will be seen instead of a full
chatbot window.
WIX Website Builder:

Wix.com Ltd. is an Israeli software company, providing cloud-based web development
services. It allows users to create HTML5 websites and mobile sites through the use of online
drag and drop tools. Along with its headquarters and other offices in Israel, Wix also has offices
in Brazil, Canada, Germany, India, Ireland, Lithuania, the United States, and Ukraine.
Wix is a website builder, an easy-to-use tool that lets you quickly create an online
presence via drag-and-drop interface—no coding or FTP knowledge is required. All you need
is an email address to get started with Wix's web hosting. In fact, if you don't mind the
advertisements, you can spin up a site for free.
Users can add social plug-ins, e-commerce, online marketing, contact forms, e-mail
marketing, and community forums to their web sites using a variety of Wix-developed and
third-party applications. The Wix website builder is built on a freemium business model,
earning its revenues through premium upgrades.
Conclusion:
In the above experiment, we studied different interaction styles, its importance. Upon
searching for various websites, I came to know some flaws in Jade & Andy: vintage car
specialist design. I redesigned it to remove those flaws, and added some interaction styles as
well. The design of the website has been kept the same, since it is minimalistic and looks very
good. The new chatbot feature is added to improve the user's experience.
30
OUTPUT:-
31
32
33
Experiment No.:- 06
Aim:- To learn Statistical Graphics and its use in visualization.
Theory:-
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
Figure-1: Example of Pie Chart and Bar Chart
Excel:
Microsoft Excel is a helpful and powerful program for data analysis and documentation.
It is a spreadsheet program, which contains a number of columns and rows, where each
intersection of a column and a row is a “cell.” Each cell contains one point of data or one piece
of information. By organizing the information in this way, you can make information easier to
find, and automatically draw information from changing data.
 Charts: Charts allow you to present data entered into a worksheet in a visual format,
using a variety of graph types. Before you can make a chart you must first enter data
into a worksheet.
 Pie Chart: The “pie chart” is also known as “circle chart” that divides the circular
statistical graphic into sectors or slices in order to illustrate the numerical problems.
Each sector denotes a proportionate part of the whole. To find out the composition of
34
something, Pie-chart works the best at that time. In most cases, pie charts replace some
other graphs like the bar graph, line plots, histograms, etc.
 Line Graph: A line graph is a type of chart used to show information that changes
over time. We plot line graphs using several points connected by straight lines. We also
call it a line chart. The line graph comprises of two axes known as ‘x’ axis and ‘y’ axis.
• The horizontal axis is known as the x-axis.
• The vertical axis is known as the y-axis.
Parts of a line graph:
The given image describes the parts of a line graph.
• Title: tells about the data for each line graph is plotted.
• X-axis: tells about labels on x-axis, which is generally time.
• Y-axis: tells about labels on y-axis which is generally a quantity in numbers
• Trend: We join the points to draw the graph. The intersection point of the label
on the x-axis and y-axis tells about the trend.
 Bar Graph: The pictorial representation of a grouped data, in the form of vertical or
horizontal rectangular bars, where the lengths of the bars are equivalent to the measure
of data, are known as bar graphs or bar charts. The bars drawn are of uniform width,
and the variable quantity is represented on one of the axes. Also, the measure of the
variable is depicted on the other axes. The heights or the lengths of the bars denote the
value of the variable, and these graphs are also used to compare certain quantities. The
frequency distribution tables can be easily represented using bar charts which simplify
the calculations and understanding of data. The three major attributes of bar graphs are:
• The bar graph helps to compare the different sets of data among different groups
easily.
• It shows the relationship using two axes, in which the categories on one axis
and the discrete values on the other axis.
• The graph shows the major changes in data over time.
 Stacked Bar Graph: The stacked bar graph is also called the composite bar chart,
which divides the aggregate into different parts. In this type of bar graph, each part can
be represented using different colours, which helps to easily identify the different
categories. The stacked bar chart requires specific labelling to show the different parts
of the bar. In a stacked bar graph, each bar represents the whole and each segment
represents the different parts of the whole.
 Surface Chart: Surface Chart (3D Surface Plot) displays a set of three-dimensional
data as a mesh surface. It is useful when you need to find the optimum combinations
between two sets of data. The colours and patterns in Surface Charts indicate the areas
that are in the same range of values by analogy with a topographic map. A typical 3D
Surface Plot is constructed from three variables: X, Y, and Z. Two of them are
independent, located on the horizontal axes. The other is dependent, shown along the
vertical axis. Hence, Surface Charts represent a functional relationship between a
designated dependent variable and two independent ones.
Conclusion:-
Thus, we have studied the use of statistical graphic and implemented statistical graphs.
35
INPUT:-
Data provided to MS Excel for creating graphs and charts:
OUTPUT:-
36
37
Experiment No.:- 07
Aim:- Design icons for a specific Domain (Domain: Hospital).
Theory:-
An icon is a small graphical representation of a program, feature, or file. When you
click or double- click an icon, the associated file or program opens or an action is performed.
For example, if you were to double-click My Computer icon, it would open Windows Explorer.
Icons are a component of GUI operating systems, including Apple MacOS X and Microsoft
Windows. Icons help users quickly identify the type of file represented by the icon. The image
is an example of "My Computer" icons in different versions of Microsoft Windows.
Importance of icon:
Although using words to explain concepts is the most direct approach, users may get
bored or lose focus with too much text and skip over the message altogether. For this reason,
adding icons to describe these functions and features may be an even more effective approach.
Not only do they add a more variety to the section, but they also reinforce the message with a
visual explanation. This makes it much easier for the user to relate the icon to the concept and
understand the features or functions described.
Characteristics of icons:
 Icons should be as simple as possible, but with enough details to express the intended
message. If icons are too complex and/or have too many traces, they can become
confusing and potentially convey the wrong message.
 It is important to be mindful of various icon models that are already widely accepted
by the public in general.
 Icons need to be perfectly designed for the specific information that it will represent.
Influences on Icon Usability:

 Provide icons that are:
– Familiar
– Clear and understandable
– Simple
– Consistent
– Direct
– Efficient
 Also consider the:
– Context in which the icon is used
– Expectations of users
– Complexity of task
Size:
 Supply in all standard sizes.
– 16 x 16 pixels
– 32 x 32 pixels
– 48 x 48 pixels
 Use colours from the system palette.
– 16- and 256-color versions
38
 Minimum sizes for easy selection:
– With stylus or pen: 15 pixels square
– With mouse: 20 pixels square
– With finger: 40 pixels square
Choosing Images:
 Use existing icons when available.
 Use images for objects, not actions.
 Use traditional images.
 Consider user cultural and social norms.
Creating Images:
 Create familiar and concrete shapes.
 Create visually and conceptually distinct shapes.
 Clearly and simply reflect objects represented, avoiding detail.
 Provide consistency in icon type.
Fig-A Fig-B
Fig-C Fig-D
Fig-E
39
Icon Animation:
 Use:
– To provide feedback
– For visual interest
 Types:
– Static(Mail box)
– Dynamic (Pointer & Movement)
 Make it interruptible or independent of user’s primary interaction.
 Do not use it for decoration.
 Permit it to be turned off by the user.
 For fluid animation, present images at 16 or more frames per second.
Icon with Audio:

 Objects may sound as they touched, dragged, opened, activated and thrown away.
 This provides feedback that an operation one has asked for has successfully started.
 Uses:
– About previous and possible interactions.
– Indicating ongoing process and modes.
– Useful for navigation.
INKSCAPE Application:
Inkscape is a free and open-source vector graphics editor developed for desktop. This
professional quality tool enables you to create and edit vectors such as illustrations, diagrams,
line arts, charts, logos, icons, and even complex paintings. It is versatile, easy to use and a
serious alternative to premium tools like Adobe Illustrator.
Inkscape is completely safe to download and does not contain viruses. The program
runs on Linux, MacOS X and Microsoft Windows operating systems from XP up to
Windows10.It is available in 90 languages, including English.
Inkscape primary vector graphics format is Scalable Vector Graphics (SVG); other
formats such as PostScript, EPS, PNG, BMP, JPEG, and TIP images can be imported and
exported. The program allows you to render primitive vectors and text. These objects can be
filled with solid colours, patterns, and radial or linear colour gradients. You can also stroke the
borders with adjustable transparency. The software supports embedding and optional tracing
of raster graphics, allowing the editor to produce vector graphics from photos and other raster
sources. Created shapes can be further manipulated with transformations, such as moving,
rotating, scaling and skewing. The tool also supports node editing, Creative Commons
metadata, bitmap tracing, complex path operations, circumfluent object text, path based texts,
and direct XML editing.
Inkscape is an extremely powerful program, with an exhaustive list of functions.
Essentially, there's almost nothing that Inkscape can't do that Illustrator and other similar
program scan. This makes Inkscape one of the best free alternative to Adobe Illustrator for
illustrators, graphic designers and web designers.
Conclusion:-
Hence, we have successfully designed icons for communication.
40
OUTPUT:-
Here we have GUI Designed few Medical healthcare Icons:
Figure-1 Hospital Icon

Figure-1: Represent the hospital icon in that icon we know where the hospital is present. If
that icon present on the near road means after some distance any hospital was present in that
particular area.
Figure-2 ICU Icon

Figure-2: Design for the showing the ICU (Intensive Care Unit) icon that help you to
immediately know about the ICU room in the hospital. That also helpful in the hospital app for
immediate booking ICU for the patient.
Figure-3 Blood Donation Icon

Figure-3: Represent the blood donation. That help to finding blood donation ward in the
hospital to the blood donor.
41
Figure-4 Disability Icon
Figure-4: Represent the disability person that was helpful in the bus, train, or any reserved
seats to know about the seats reserved for which person top other people.
Figure-5 Ambulance Icon

Figure-5: Represent the ambulance. That was helpful to booking ambulance in the application
or know about the ambulance.
Figure-6 Test-Lab Icon

Figure-6: Represent the testing lab room. That was helpful to patient to finding testing lab
room in the hospital.
42
Figure-7 Corona Vaccination Icon
Figure-7: Represent the vaccination of corona virus ward. That helpful to user to find or
booking the vaccination for covid-19.
Figure-8 Medicines Icon

Figure-8: Represent the Medicines ward. That was helpful to patient to finding medicine ward
in the hospital.
43
Experiment No.:- 08
Aim:- Design an interface for Home Appliance.
Theory:-
Home Appliance: A home appliance, also referred to as a domestic appliance, an electric

appliance or a household appliance is a machine which assists in household functions such as
cooking, cleaning and food preservation.
Appliances are divided into three types:

• Small appliances
• Major appliances
• Consumer electronics
Small appliances - A small domestic appliance, also known as a small electric appliance or
minor appliance or simply a small appliance, small domestic or small electric, is a portable or
semi-portable machine, generally used on table-tops, counter-tops or other platforms, to
accomplish a household task. Examples include microwave ovens, toasters, humidifiers, food
processors and coffee makers.
Major appliances - A major appliance, also known as a large domestic appliance or large
electric appliance or simply a large appliance, large domestic, or large electric, is a non-portable
or semi-portable machine used for routine housekeeping tasks such as cooking, washing
laundry, or food preservation. Examples include refrigerators, washing machines, air-
conditioner, etc.
Consumer electronics – Consumer electronics or home electronics are electronic (analog or

digital) equipment intended for everyday use, typically in private homes. Consumer electronics
includes devices used for entertainment, communications and recreation. Examples includes
TV, mobiles, laptops, etc.
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:
a. Reduce visual work.
b. Reduce intellectual work.
c. Reduce memory work.
d. Reduce motor work.
e. Minimize or eliminate any burdens or instructions imposed by technology.
The objective of this experiment is:

• To understand the trouble of interacting with machines.
• Redesign interfaces of home appliances like microwave oven, land-line phone.
• To show the bad design of the home appliances as well as the good design of the home
appliances.
44
GRAVIT DESIGNER Application:
Gravit Designer is vector graphics design software, cross-platform. It includes an
extensive and growing design toolset comparable to its most sophisticated cousins. It runs as
either a desktop application, or in-browser, on Windows, Mac, Linux and Chrome OS.
Versions for Android and iOS are planned for release at an unspecified date.
The procedure for designing interface is:

• Design interface for Microwave oven.
− Draw and show Poor User Interface for microwave oven using any tool.
− Draw and show Good User Interface for microwave oven using any tool.
• Design interface for Landline phone.
− Draw and show Poor Interface for Land-line phone oven using any tool.
− Draw and show Good Interface for Land-line phone oven using any tool.
• Identify various functions/buttons/elements that you require on your home appliance.
• Clearly specify function and label of each button required on the appliance.
• Find operational sequences for carrying out various tasks on your appliance.
• Freeze the list of buttons finally required on your appliance layout.
Conclusion:-
In this experiment, we implemented interface design for Microwave oven and
Telephone (Landline Phone) using Gravit Designer.
45
OUTPUT:-
1. Design interface for Microwave oven.
A. Poor User Interface:
B. Good User Interface:
46
2. Design interface for Landline phone.
A. Poor Interface:
B. Good Interface:
47
Experiment No.:- 09
Aim:- Redesign and Develop a website of an organization.
Theory:-
Flipkart is an Indian e-commerce company, headquartered in Bangalore, Karnataka,

India, and incorporated in Singapore as a private limited company. The company initially
focused on online book sales before expanding into other product categories such as consumer
electronics, fashion, home essentials, groceries, and lifestyle products. Online shopping is a
form of Electronic Commerce. E-commerce or Electronic commerce, is a subset of E-Business
(a company that does all or most of its transactions through the Internet), is the purchasing,
selling, and exchanging of goods and services over computer networks (such as the Internet)
through which transactions or terms of sale are performed electronically. Increase in sales.
Increase in customers. Ability to be open 24/7. So, we can make similar like that website named
as online shop.
A complete and efficient web application which can provide the online shopping
experience is the basic objective of the project. The web application can be implemented in the
form of a smart devices with web view. In the proposed system user can buy any product after
login as per the other website the user adds the product on the cart and buy after as per its
choice. Also, they can select the quantity of the product. In proposed system the admin can add
the any product and remove it same as per it can add any user from its dashboard. The admin
panel were implemented for the updating product and also manage the user and all entries of
user. If user will book the any product than that can also manage by the admin.
Conclusion:-
Thus, we have successfully redesigned and developed the website with complete
working condition.
48
CODES:-
homeaction.php
<?php
session_start();
$ip_add = getenv("REMOTE_ADDR");
include "db.php";
if(isset($_POST["categoryhome"])){
$category_query = "SELECT * FROM categories WHERE cat_id!=1";
$run_query = mysqli_query($con,$category_query) or die(mysqli_error($con));
echo "

<div id='responsive-nav'>

<ul class='main-nav nav navbar-nav'>
<li class='active'><a href='index.php'>Home</a></li>
<li><a href='store.php'>Electronics</a></li>";
if(mysqli_num_rows($run_query) > 0){
while($row = mysqli_fetch_array($run_query)){
$cid = $row["cat_id"];
$cat_name = $row["cat_title"];
$sql = "SELECT COUNT(*) AS count_items FROM products,categories WHERE product_cat=cat_id";
$query = mysqli_query($con,$sql);
$row = mysqli_fetch_array($query);
$count=$row["count_items"];
echo "
<li class='categoryhome' cid='$cid'><a href='store.php'>$cat_name</a></li>
";}
echo "</ul>

</div>

";}}
if(isset($_POST["page"])){
$sql = "SELECT * FROM products";
$run_query = mysqli_query($con,$sql);
$count = mysqli_num_rows($run_query);
$pageno = ceil($count/2);
for($i=1;$i<=$pageno;$i++){
echo "
<li><a href='#product-row' page='$i' id='page'>$i</a></li>
";}}
if(isset($_POST["getProducthome"])){
$limit = 3;
if(isset($_POST["setPage"])){
$pageno = $_POST["pageNumber"];
$start = ($pageno * $limit) - $limit;
}else{
$start = 0;
}
$product_query = "SELECT * FROM products,categories WHERE product_cat=cat_id LIMIT
$start,$limit";
$run_query = mysqli_query($con,$product_query);
$pro_id = $row['product_id'];
$pro_cat = $row['product_cat'];
$pro_brand = $row['product_brand'];
$pro_title = $row['product_title'];
$pro_price = $row['product_price'];
49
$pro_image = $row['product_image'];
echo "
<div class='product-widget'>
<a href='product.php?p=$pro_id'>
<div class='product-img'>
<img src='product_images/$pro_image' alt=''>
</div>
<div class='product-body'>
<p class='product-category'>$cat_name</p>
<h3 class='product-name'><a href='product.php?p=$pro_id'>$pro_title</a></h3>
<h4 class='product-price'>$pro_price<del class='product-old-price'>$990.00</del></h4>
</div></a>
</div>";
}}}
if(isset($_POST["gethomeProduct"])){
$limit = 9;
if(isset($_POST["setPage"])){
$pageno = $_POST["pageNumber"];
$start = ($pageno * $limit) - $limit;
}else{
$start = 0;
}
$product_query = "SELECT * FROM products,categories WHERE product_cat=cat_id AND
product_id BETWEEN 71 AND 74";
$run_query = mysqli_query($con,$product_query);
echo "
<div class='col-md-3 col-xs-6'>
<a href='product.php?p=$pro_id'><div class='product'>
<img src='product_images/$pro_image' style='max-height: 170px;' alt=''>
<div class='product-label'>
<span class='sale'>-30%</span>
<span class='new'>NEW</span>
</div>
</div></a>
<h3 class='product-name header-cart-item-name'>
<ahref='product.php?p=$pro_id'>$pro_title</a></h3>
<h4 class='product-price header-cart-item-info'>$pro_price<del class='product-old-
price'>$990.00</del></h4>
<div class='product-rating'>
<i class='fa fa-star'></i>
</div>
<div class='product-btns'>
<button class='add-to-wishlist'><i class='fa fa-heart-o'></i><span class='tooltipp'>add to
wishlist</span></button>
50
<button class='add-to-compare'><i class='fa fa-exchange'></i><span class='tooltipp'>add to
compare</span></button>
<button class='quick-view'><i class='fa fa-eye'></i><span class='tooltipp'>quick view</span></button>
</div>
</div>
<div class='add-to-cart'>
<button pid='$pro_id' id='product' class='add-to-cart-btn block2-btn-towishlist' href='#'><i class='fa fa-
shopping-cart'></i> add to cart</button>
</div>
</div>
</div>";
};}}
if(isset($_POST["get_seleted_Category"]) || isset($_POST["search"]))
{
if(isset($_POST["get_seleted_Category"])){
$id = $_POST["cat_id"];
$sql = "SELECT * FROM products,categories WHERE product_cat = '$id' AND
product_cat=cat_id";
}else {
$keyword = $_POST["keyword"];
$sql = "SELECT * FROM products,categories WHERE product_cat=cat_id AND
product_keywords LIKE '%$keyword%'";
}
$run_query = mysqli_query($con,$sql);
while($row=mysqli_fetch_array($run_query)){
echo "
<div class='col-md-4 col-xs-6'>
<a href='product.php?p=$pro_id'><div class='product'>
<img src='product_images/$pro_image' style='max-height: 170px;' alt=''>
<div class='product-label'>
<span class='sale'>-30%</span>
<span class='new'>NEW</span>
</div>
</div></a>
<h3 class='product-name header-cart-item-name'>
<a href='product.php?p=$pro_id'>$pro_title</a></h3>
<h4 class='product-price header-cart-item-info'>$pro_price<del class='product-old-
price'>$990.00</del></h4>
<div class='product-rating'>
</div>
<div class='product-btns'>
<button class='add-to-wishlist' tabindex='0'><i class='fa fa-heart-o'></i><span class='tooltipp'>add to
wishlist</span></button>
<button class='add-to-compare'><i class='fa fa-exchange'></i><span class='tooltipp'>add to
compare</span></button>
<button class='quick-view' ><i class='fa fa-eye'></i><span class='tooltipp'>quick view</span></button>
51
</div>
</div>
<div class='add-to-cart'>
<button pid='$pro_id' id='product' href='#' tabindex='0' class='add-to-cart-btn'><i class='fa fa-shopping-
cart'></i> add to cart</button>
</div>
</div>
</div>";
}}
52
OUTPUT:-
The following defines the screen of the Flipkart website:
53
After Redesign and Develop a website:
54
55
56
Experiment No.:- 10
Aim:- Understand screen complexity of existing Graphical User Interface and redesign the
interface to minimize the screen complexity.
Theory:-
The Ambipalm is android application that used for the medical services like Ambulance
booking Hospital booking, Blood donation. AmbiPalm believes in making a difference
differently and gives hope for people who are in need in times of emergency. Be it helping you
to get on time for medical commitments or helping to get blood in the hospital, saving lives is
our priority.
Have you ever got delayed visiting a Hospital or missed a doctor’s appointment? The
reason for missing an appointment of any one can the time to travel or the inability to find
transport. With the AmbiPalm ambulance service, you can book an ambulance immediately or
schedule a ride to respective hospital. All need is to select your desired location and hospital
and the ambulance nearest to you will be notified. User can book an ambulance for self, family
member, a friend, or a stranger too. When it comes to taking anyone to the hospital on time
AmbiPalm.
The following defines the screen of the application:

1. Register for user.
2. Select specific person for which is patient? you or any other.
3. Which ambulance you have?
4. Why are you there like for ambulance or blood?
5. After than put location of your and hospital.
6. Then go setting and select the particular option you have.
7. Select the particular city first.
After minimized complexity and improve:

1. Only front panel was present.
2. In their 4 option Manual booking, Emergency booking, all booking, Upcoming
Booking is present.
3. In only one tab the all operation are work.
4. Simple registrations were completed.
5. User only press the button and book the ambulance.
6. The Complexity Minimized GUI are below.
Conclusion:-
Thus, we have successfully redesigned an App and Understand screen complexity of
existing Graphical User Interface and redesign the interface to minimize the screen complexity.
57
CODES:-
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8" standalone="no"?><manifest
xmlns:android="http://schemas.android.com/apk/res/android" android:compileSdkVersion="28"
android:compileSdkVersionCodename="9" package="com.apkpure.aegon"
platformBuildVersionCode="28" platformBuildVersionName="9">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.GET_PACKAGE_SIZE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<uses-permission android:name="android.permission.BIND_ACCESSIBILITY_SERVICE"/>
<uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="oppo.permission.OPPO_COMPONENT_SAFE"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.REQUEST_DELETE_PACKAGES"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.FLASHLIGHT"/>
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
<uses-permission
android:name="com.google.android.finsky.permission.BIND_GET_INSTALL_REFERRER_SERVI
CE"/>
<application android:allowBackup="true"
android:appComponentFactory="androidx.core.app.CoreComponentFactory"
android:icon="@mipmap/ic_launcher" android:label="@string/aegon_app_name"
android:largeHeap="true" android:name="com.apkpure.aegon.application.AegonApplication"
android:supportsRtl="true" android:theme="@style/AppTheme"
android:usesCleartextTraffic="true">
<activity android:configChanges="keyboardHidden|orientation|screenSize"
android:label="@string/aegon_app_name"
android:name="com.apkpure.aegon.ads.apkpure.MarketAdActivity"
android:screenOrientation="portrait" android:windowSoftInputMode="adjustResize"/>
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version"/>
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-5786310583620593~2726664752"/>
<activity android:name="com.zcoup.base.view.InnerWebViewActivity"/>
<activity android:name="com.zcoup.appwall.AppwallActivity"
android:screenOrientation="portrait"/>
<provider android:authorities="com.apkpure.aegon.xxprovider" android:exported="false"
android:name="com.zcoup.base.core.ZcoupProvider"/>
<receiver android:name="com.zcoup.base.tp.UtilityReceiver">
<intent-filter>
<action android:name="android.intent.action.PACKAGE_ADDED"/>
<data android:scheme="package"/>
</intent-filter>
58
</receiver>
<uses-library android:name="org.apache.http.legacy" android:required="false"/>
android:label="@string/aegon_app_name" android:launchMode="singleTask"
android:name="com.apkpure.aegon.main.activity.SplashActivity"
android:screenOrientation="portrait" android:theme="@style/AppTheme.Splash">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<meta-data android:name="android.notch_support" android:value="true"/>
</activity>
android:name="com.apkpure.aegon.cms.activity.CmsTabActivity"
android:name="com.apkpure.aegon.main.activity.FrameActivity"
android:name="com.apkpure.aegon.main.activity.LauncherActivity"
android:screenOrientation="unspecified" android:theme="@style/AppTheme.Transparent">
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:scheme="apkpure"/>
</intent-filter>
<intent-filter>
<data android:scheme="file"/>
<data android:scheme="content"/>
<data android:mimeType="*/*"/>
<data android:host="*"/>
<data android:pathPattern=".*\\.xapk"/>
<data android:pathPattern=".*\\..*\\.xapk"/>
<data android:pathPattern=".*\\..*\\..*\\.xapk"/>
<data android:pathPattern=".*\\..*\\..*\\..*\\.xapk"/>
<data android:pathPattern=".*\\..*\\..*\\..*\\..*\\.xapk"/>
<data android:pathPattern=".*\\..*\\..*\\..*\\..*\\..*\\.xapk"/>
<data android:pathPattern=".*\\..*\\..*\\..*\\..*\\..*\\..*\\.xapk"/>
<data android:pathPattern=".*\\..*\\..*\\..*\\..*\\..*\\..*\\..*\\.xapk"/>
</intent-filter>
<intent-filter>
<data android:scheme="content"/>
<data android:mimeType="application/xapk-package-archive"/>
</intent-filter>
<intent-filter>
59
<data android:host="details" android:scheme="market"/>
</intent-filter>
<intent-filter>
<data android:scheme="https"/>
<data android:host="apkpure.com"/>
<data android:host="m.apkpure.com"/>
<data android:host="m.apkpure.org"/>
<data android:pathPattern="/..*/..*/download"/>
<data android:pathPattern="/..*/..*/..*/download"/>
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.SEND"/>
<data android:mimeType="text/plain"/>
<data android:mimeType="image/*"/>
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.SEND_MULTIPLE"/>
<data android:mimeType="image/*"/>
</intent-filter>
</activity>
android:name="com.apkpure.aegon.cms.activity.SearchActivity"
android:screenOrientation="portrait" android:windowSoftInputMode="adjustResize|stateHidden"/>
android:name="com.apkpure.aegon.person.activity.SettingsActivity"
android:name="com.apkpure.aegon.post.activity.SubmitChildCommentActivity"
android:screenOrientation="unspecified" android:theme="@style/Base.Transparent"
android:windowSoftInputMode="stateAlwaysVisible|adjustResize"/>
android:name="com.apkpure.aegon.widgets.clipImageview.CropImgActivity"
android:name="com.apkpure.aegon.app.activity.ManagerActivity"
android:name="com.apkpure.aegon.main.activity.MainTabActivity"
android:name="com.apkpure.aegon.person.activity.MessageActivity"
60
android:name="com.apkpure.aegon.cms.activity.CommonActivity"
android:name="com.apkpure.aegon.person.activity.FavouriteActivity"
android:name="com.apkpure.aegon.cms.activity.MyCommentActivity"
android:name="com.apkpure.aegon.person.activity.TopSelectActivity"
android:name="com.apkpure.aegon.app.activity.AppDetailActivity"
android:name="com.apkpure.aegon.app.activity.UserDetailActivity"
android:name="com.apkpure.aegon.person.activity.UserFocusActivity"
android:name="com.apkpure.aegon.cms.activity.TopicListActivity"
android:name="com.apkpure.aegon.app.activity.AppTagListActivity"
android:name="com.apkpure.aegon.app.activity.AddAppTagActivity"
android:name="com.apkpure.aegon.app.activity.AddTagAgoActivity"
android:name="com.apkpure.aegon.cms.activity.PreRegisterActivity"
<activity android:exported="true" android:name="com.facebook.CustomTabActivity">
<intent-filter>
<data android:scheme="@string/fb_login_protocol_scheme"/>
</intent-filter>
61
</activity>
android:name="com.apkpure.aegon.person.activity.LoginActivity"
<activity android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
android:name="com.apkpure.aegon.app.activity.ApkListActivity"
android:name="com.apkpure.aegon.cms.activity.SpecialCommentActivity"
android:name="com.apkpure.aegon.person.activity.AtUserActivity"
android:name="com.apkpure.aegon.cms.activity.SearchHashtagActivity"
android:name="com.apkpure.aegon.person.activity.UserInfoEditActivity"
android:name="com.apkpure.aegon.cms.activity.PictureBrowseActivity"
android:screenOrientation="unspecified" android:theme="@style/Base.Transparent"/>
android:name="com.apkpure.aegon.cms.activity.CommentSecondActivity"
android:name="com.apkpure.aegon.cms.activity.CommentThirdActivity"
android:name="com.apkpure.aegon.cms.activity.HashtagDetailActivity"
android:name="com.apkpure.aegon.post.activity.SubmitCommentV2Activity"
android:screenOrientation="portrait" android:windowSoftInputMode="adjustResize|stateVisible"/>
android:name="com.apkpure.aegon.cms.activity.CommentDraftActivity"
62
android:name="com.apkpure.aegon.cms.activity.CommonWebViewActivity"
android:name="com.apkpure.aegon.main.activity.ContainerFragmentActivity"
android:name="com.apkpure.aegon.main.activity.CaptchaWebViewActivity"
<service android:name="com.apkpure.aegon.services.CommonDownloadService"/>
<service android:name="com.apkpure.aegon.services.UltraDownloadService"/>
<service android:name="com.apkpure.aegon.services.AppProtoBufUpdateService"/>
<service android:name="com.apkpure.aegon.services.AppWatcherService"/>
<service android:enabled="true" android:exported="true"
android:label="@string/auto_service_title"
android:name="com.apkpure.aegon.services.AutoInstallService"
android:permission="android.permission.BIND_ACCESSIBILITY_SERVICE"
android:process=":accessibility">
<intent-filter>
<action android:name="android.accessibilityservice.AccessibilityService"/>
</intent-filter>
<meta-data android:name="android.accessibilityservice"
android:resource="@xml/accessibility"/>
</service>
<receiver android:name="com.apkpure.aegon.app.event.SystemBootEvent$Receiver"
android:permission="android.permission.RECEIVE_BOOT_COMPLETED">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED"/>
</intent-filter>
</receiver>
<receiver android:name="com.apkpure.aegon.app.event.SystemPackageEvent$Receiver">
<intent-filter android:priority="999">
<action android:name="android.intent.action.PACKAGE_ADDED"/>
<action android:name="android.intent.action.PACKAGE_REMOVED"/>
<action android:name="android.intent.action.PACKAGE_REPLACED"/>
<data android:scheme="package"/>
</intent-filter>
</receiver>
<receiver android:name="com.apkpure.aegon.person.event.NotificationEvent"
android:permission="">
<intent-filter>
<action android:name="notification_cancelled"/>
<action android:name="notification_clicked"/>
</intent-filter>
</receiver>
<receiver android:enabled="true" android:exported="false"
android:name="com.google.android.gms.analytics.AnalyticsReceiver">
<intent-filter>
<action android:name="com.google.android.gms.analytics.ANALYTICS_DISPATCH"/>
</intent-filter>
</receiver>
<service android:enabled="true" android:exported="false"
android:name="com.google.android.gms.analytics.AnalyticsService"/>
63
android:name="com.google.android.gms.analytics.AnalyticsJobService"
android:permission="android.permission.BIND_JOB_SERVICE"/>
<receiver android:exported="true"
android:name="com.google.android.gms.analytics.CampaignTrackingReceiver">
<intent-filter>
<action android:name="com.android.vending.INSTALL_REFERRER"/>
</intent-filter>
</receiver>
<service android:exported="true"
android:name="com.apkpure.aegon.services.PushFirebaseMessagingService">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>
<service android:name="com.apkpure.aegon.services.UploadFileService"/>
<provider android:authorities="com.apkpure.aegon.fileprovider" android:exported="false"
android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
<meta-data android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths"/>
</provider>
<meta-data android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
<activity android:excludeFromRecents="true"
android:name="com.apkmatrix.components.clientupdate.UpdateDialogActivity"
android:theme="@style/Base.Transparent"/>
android:launchMode="singleTask"
android:name="com.apkpure.components.installer.ui.InstallApksActivity"
android:screenOrientation="portrait" android:theme="@style/Theme.Installer"
android:windowSoftInputMode="adjustResize"/>
<provider android:authorities="com.apkpure.aegon.fileprovider" android:exported="false"
android:grantUriPermissions="true"
android:name="com.apkmatrix.components.downloader.utils.DownloaderFileProvider">
android:resource="@xml/file_provider_paths"/>
</provider>
<service android:name="com.apkmatrix.components.downloader.services.DownloadService"/>
<provider android:authorities="com.apkpure.aegon.AgentWebX5FileProvider"
android:exported="false" android:grantUriPermissions="true"
android:name="com.just.agentwebX5.AgentWebX5FileProvider">
android:resource="@xml/web_download_paths"/>
</provider>
android:exported="false" android:launchMode="standard"
android:name="com.just.agentwebX5.ActionActivity" android:screenOrientation="portrait"
android:theme="@style/actionActivity" android:windowSoftInputMode="stateAlwaysHidden"/>
<receiver
android:name="com.just.agentwebX5.RealDownLoader$NotificationBroadcastReceiver"/>
<provider android:authorities="com.apkpure.aegon.provider" android:exported="false"
android:grantUriPermissions="true" android:name="com.luck.picture.lib.PictureFileProvider">
android:resource="@xml/file_paths"/>
</provider>
64
<activity android:name="com.luck.picture.lib.PictureSelectorActivity"
android:windowSoftInputMode="adjustPan"/>
<activity android:name="com.luck.picture.lib.PicturePreviewActivity"/>
<activity android:configChanges="orientation"
android:name="com.luck.picture.lib.PictureVideoPlayActivity" android:screenOrientation="sensor"/>
<activity android:name="com.luck.picture.lib.PictureExternalPreviewActivity"/>
<activity android:name="com.yalantis.ucrop.PictureMultiCuttingActivity"/>
<activity android:name="com.luck.picture.lib.PicturePlayAudioActivity"/>
<activity
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize"
android:name="com.facebook.FacebookActivity"
android:theme="@style/com_facebook_activity_theme"/>
<activity android:name="com.facebook.CustomTabMainActivity"/>
<activity android:configChanges="orientation|screenSize" android:excludeFromRecents="true"
android:exported="false" android:name="com.twitter.sdk.android.core.identity.OAuthActivity"/>
<service android:directBootAware="true" android:exported="false"
android:name="com.google.firebase.components.ComponentDiscoveryService">
<meta-data
android:name="com.google.firebase.components:com.google.firebase.crashlytics.CrashlyticsRegistrar
" android:value="com.google.firebase.components.ComponentRegistrar"/>
<meta-data
android:name="com.google.firebase.components:com.google.firebase.database.DatabaseRegistrar"
android:value="com.google.firebase.components.ComponentRegistrar"/>
<meta-data
android:name="com.google.firebase.components:com.google.firebase.messaging.FirebaseMessaging
Registrar" android:value="com.google.firebase.components.ComponentRegistrar"/>
<meta-data
android:name="com.google.firebase.components:com.google.firebase.auth.FirebaseAuthRegistrar"
<meta-data
android:name="com.google.firebase.components:com.google.firebase.iid.Registrar"
<meta-data
android:name="com.google.firebase.components:com.google.firebase.analytics.connector.internal.An
alyticsConnectorRegistrar" android:value="com.google.firebase.components.ComponentRegistrar"/>
<meta-data
android:name="com.google.firebase.components:com.google.firebase.installations.FirebaseInstallatio
nsRegistrar" android:value="com.google.firebase.components.ComponentRegistrar"/>
<meta-data
android:name="com.google.firebase.components:com.google.firebase.datatransport.TransportRegistra
r" android:value="com.google.firebase.components.ComponentRegistrar"/>
</service>
<meta-data android:name="com.bumptech.glide.integration.okhttp3.OkHttpGlideModule"
android:value="GlideModule"/>
<provider android:authorities="com.apkpure.aegon.AgentWebFileProvider"
android:exported="false" android:grantUriPermissions="true"
android:name="com.just.agentweb.AgentWebFileProvider">
android:resource="@xml/web_files_paths"/>
</provider>
android:exported="false" android:launchMode="standard"
android:name="com.just.agentweb.ActionActivity" android:theme="@style/actionActivity"
android:windowSoftInputMode="stateAlwaysHidden"/>
65
<activity android:name="com.acker.simplezxing.activity.CaptureActivity"
android:theme="@android:style/Theme.NoTitleBar"
android:windowSoftInputMode="stateAlwaysHidden"/>
android:name="com.google.android.gms.tagmanager.TagManagerService"/>
<activity android:exported="true"
android:name="com.google.android.gms.tagmanager.TagManagerPreviewActivity"
android:noHistory="true">
<intent-filter>
<data android:scheme="tagmanager.c.com.apkpure.aegon"/>
</intent-filter>
</activity>
android:name="com.google.firebase.messaging.FirebaseMessagingService">
<intent-filter android:priority="-500">
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>
<activity android:excludeFromRecents="true" android:exported="true"
android:name="com.google.firebase.auth.internal.GenericIdpActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
<intent-filter>
<data android:host="firebase.auth" android:path="/" android:scheme="genericidp"/>
</intent-filter>
</activity>
<activity android:excludeFromRecents="true" android:exported="true"
android:name="com.google.firebase.auth.internal.RecaptchaActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
<intent-filter>
<data android:host="firebase.auth" android:path="/" android:scheme="recaptcha"/>
</intent-filter>
</activity>
android:name="com.google.firebase.auth.api.fallback.service.FirebaseAuthFallbackService">
<intent-filter>
<action android:name="com.google.firebase.auth.api.gms.service.START"/>
</intent-filter>
</service>
<activity android:excludeFromRecents="true" android:exported="false"
android:name="com.google.android.gms.auth.api.signin.internal.SignInHubActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
<service android:exported="true"
android:name="com.google.android.gms.auth.api.signin.RevocationBoundService"
66
android:permission="com.google.android.gms.auth.api.signin.permission.REVOCATION_NOTIFIC
ATION" android:visibleToInstantApps="true"/>
android:launchMode="singleTask" android:name="com.adtiming.mediationsdk.adt.AdsActivity"
android:screenOrientation="user"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"/>
android:hardwareAccelerated="true"
android:name="com.adtiming.mediationsdk.adt.interactive.InteractiveActivity"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"/>
<activity android:configChanges="keyboardHidden|screenSize"
android:launchMode="singleTask" android:name="com.adtiming.mediationsdk.adt.AdtActivity"
<activity
android:configChanges="fontScale|keyboard|keyboardHidden|locale|mcc|mnc|navigation|orientation|s
creenLayout|screenSize|smallestScreenSize|touchscreen|uiMode"
android:name="com.unity3d.services.ads.adunit.AdUnitActivity"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>
<activity
android:name="com.unity3d.services.ads.adunit.AdUnitTransparentActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/>
<activity
android:hardwareAccelerated="false"
android:name="com.unity3d.services.ads.adunit.AdUnitTransparentSoftwareActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/>
<activity
android:hardwareAccelerated="false"
android:name="com.unity3d.services.ads.adunit.AdUnitSoftwareActivity"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/>
<receiver android:exported="true"
android:name="com.google.firebase.iid.FirebaseInstanceIdReceiver"
android:permission="com.google.android.c2dm.permission.SEND">
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE"/>
</intent-filter>
</receiver>
<activity android:exported="false"
android:name="com.google.android.gms.common.api.GoogleApiActivity"
<receiver android:enabled="true" android:exported="false"
android:name="com.google.android.gms.measurement.AppMeasurementReceiver"/>
android:name="com.google.android.gms.measurement.AppMeasurementService"/>
android:name="com.google.android.gms.measurement.AppMeasurementJobService"
android:permission="android.permission.BIND_JOB_SERVICE"/>
67
<provider android:authorities="com.apkpure.aegon.firebaseinitprovider"
android:directBootAware="true" android:exported="false" android:initOrder="100"
android:name="com.google.firebase.provider.FirebaseInitProvider"/>
<provider android:authorities="com.apkpure.aegon.FacebookInitProvider"
android:exported="false" android:name="com.facebook.internal.FacebookInitProvider"/>
<receiver android:exported="false"
android:name="com.facebook.CurrentAccessTokenExpirationBroadcastReceiver">
<intent-filter>
<action
android:name="com.facebook.sdk.ACTION_CURRENT_ACCESS_TOKEN_CHANGED"/>
</intent-filter>
</receiver>
<service android:exported="false"
android:name="com.google.android.datatransport.runtime.backends.TransportBackendDiscovery">
<meta-data
android:name="backend:com.google.android.datatransport.cct.CctBackendFactory"
android:value="cct"/>
</service>
<service android:exported="false"
android:name="com.google.android.datatransport.runtime.scheduling.jobscheduling.JobInfoSchedule
rService" android:permission="android.permission.BIND_JOB_SERVICE"/>
<receiver android:exported="false"
android:name="com.google.android.datatransport.runtime.scheduling.jobscheduling.AlarmManagerS
chedulerBroadcastReceiver"/>
android:name="androidx.room.MultiInstanceInvalidationService"/>
<provider android:authorities="com.apkpure.aegon.com.liulishuo.okdownload"
android:exported="false" android:name="com.liulishuo.okdownload.OkDownloadProvider"/>
</application>
</manifest>
68
OUTPUT:-
Screen of the application:
69
After minimized complexity and improve:
70
71

HMI Experiments

Uploaded by

Copyright:

Available Formats

HMI Experiments

Uploaded by

Document Information

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

HMI Experiments

Uploaded by

Copyright:

Available Formats

CHHATRAPATI SHIVAJI MAHARAJ INSTITUTE

Human Machine Interaction Lab

Exam Seat No._________________

Signature of Student Lecture in Charge

Internal Examiner Head of Department

Examiner Examiner Principal

INDEX OF EXPRTIMENTS /TUTORIALS/ASSIGNMENTS IN Human Machine Interaction Lab

Sr. Title of Page Performance Submission Sign Grade/

Signature of Student Signature of Staff I/C

2. Graphical User Interface (GUI) -

4. Form Based Interface (FBI) -

Features of a Good GUI:

Features of a Bad GUI:

Principles Cricbuzz ESPNcricinfo

Different Levels of Clients:-

Analysis of rural people:

Choice of Screen Elements:

##Table structure for table `admin`##

##Table structure for table `comments`##

##Table structure for table `items`##

##Dumping data for table `items`##

##Table structure for table `order_details`##

##Table structure for table `rating`##

##Dumping data for table `rating`##

##Table structure for table `users`##

Order Summary Page -

Analysis of passenger behaviour:

What kinds of interfaces will they like and why?

Existing apps - analyse and rate them:

What will be your choice of screen elements?

How will your app be better than the existing ones?

/*A better looking default horizontal rule*/

/*Remove the gap between audio, canvas, iframes,

/*Remove default fieldset styles.*/

/*Allow only vertical resizing of textareas.*/

/*Browser Upgrade Prompt*/

/*Author's custom styles*/

/*Extends the .visuallyhidden class to allow the element

/*Hide visually and from screen readers, but maintain layout*/

/** Clearfix: contain floats

/*EXAMPLE Media Queries for Responsive Design.

/*Don't show links that are fragment identifiers,

pre {white-space: pre-wrap !important;}

Importance of Interaction styles:

Problems with UI without Interaction Styles:

WIX Website Builder:

Components of a Statistical Graphic:

Types of Statistical Graphics:

Figure-1: Example of Pie Chart and Bar Chart

Data provided to MS Excel for creating graphs and charts:

Influences on Icon Usability:

Icon with Audio:

Figure-1 Hospital Icon

Figure-2 ICU Icon

Figure-3 Blood Donation Icon

Figure-5 Ambulance Icon

Figure-6 Test-Lab Icon

Figure-8 Medicines Icon

Home Appliance: A home appliance, also referred to as a domestic appliance, an electric

/A better looking default horizontal rule/

/Remove default fieldset styles./

/Allow only vertical resizing of textareas./

/Browser Upgrade Prompt/

/Author's custom styles/

/Hide visually and from screen readers, but maintain layout/