Thadomal Shahani Engineering College

Bandra (W.), Mumbai - 400050

Division: C2
Batch: C22
Group No.: 38
Roll Number: 1704006

Certify that Mr. / Miss Taher Arif Attari

of Computer Department, Semester VIII with Roll No. 1704006

has completed a course of the necessary experiments in the subject

Human Machine Interactions Lab (CSL801) under my supervision at

Thadomal Shahani Engineering College

Laboratory in the year 2020 - 2021

Teacher In-Charge Head of the Department

Date 30/04/2021 Principal

 List of Experiments
B.E. (Comp.) Sem VIII

Subject: Human Machine Interactions Lab (CSL801)

Title of Experiments
Expt Experiment Page Date
No. Number
1 Problem representation for Designing User Interface. 1 05/02/2021

Design a Mobile App / Website that can teach mathematics to

2 children 7 12/02/2021
of 4-5 years age in schools in Rural/Urban Sector.

3 Design a UI application for Institute Event Management. 10 26/02/2021

4 Statistical Graphics and its use in visualization. 16 12/03/2021

Design appropriate icons pertaining to a given domain (E.g.,

5 Greeting 19 19/03/2021
cards).

6 Design a personal website for an Artisan. 22 09/04/2021

7 Design an interface for Home appliances. 26 09/04/2021

Design an interactive data access using Graphics (QR, BAR

8 Code, 29 16/04/2021
Image etc) and generating a print form.

Redesign of a user interface (Suggest and implement changes

9 in 32 16/04/2021
Existing User Interface).

10 Design a navigator for a person new in tourist city/village. 34 23/04/2021

11 Design UI for Motor paralysis for disabled people. 39 23/04/2021

Assignments

12 Write an assignment on: Mobile 2.0 43 30/04/2021

Q. Explain evaluation of Interaction design and goal of

13 evaluation 47 30/04/2021
Q. Explain evaluation technique with an example
(a) Cognitive walkthrough
(b) Model-based evaluation
(c) Heuristic evaluation (Nelsen’s ten heuristic rules)
Q. Explain Universal design preference for users with
disabilities:
(a) Visual impairment
(b) Hearing impairment
(c) Speech impairment
Q. Explain designing user interaction for different age group.

Mini Project 52 07/05/2021

 Roll No 1704006
C22 Group 38

Experiment No. 1
Aim:
Problem representation for Designing User Interface

Theory:
What is Human Machine Interaction?

Human–computer interaction (HCI) studies the design and use of computer

technology, focused on the interfaces between people (users) and
computers. Researchers in the field of HCI observe the ways in which
humans interact with computers and design technologies that let humans
interact with computers in novel ways.

Importance of Human Machine Interaction:

The importance of a good HMI is that is been used so the people can work with the
machine and, according to the operation level the interaction with the machine.
Operators will have basic machine interactions, maintenance will have added rights to
instructions to the machine, the advance operators and engineers will have enhanced
functions, buttons, features and all sorts of interactions with the machine.

User experience is how a person feels when interfacing with a system. This
includes a website, web application, desktop software and basically any form of
human/device interaction. To put it simply, User Experience is important because
it tries to fulfill the user’s needs. It aims to provide positive experiences that
keeps users loyal to the product or brand. Additionally, a meaningful user
experience allows you to define customer journeys on your website that are most
conducive to business success.

Factors that affect User Experience:

Usable
Useful
Findable
Valuable
Accessible
Credible
1. Understand

Design solves a problem. In order to provide a solution, you first need

to understand the problem. To analyse requirements, follow industry
standard user research methods including contextual and individual
interviews, while observing the users in real environment.

2. Research

Research is the basic key step to design user experience. Design team
does their research work to explore how the outer world is working on
such features. Keep an eye on the latest UI trends, design principles and
your existing user experience guidelines. While doing research, start
thinking about possible layouts and options to provide the desired
experience.

3. Sketch

This stage involves UI definition of required feature. Design team drives

this activity which is based on the last two stages of the process. Draw
paper sketches, white board flows and wireframes to share your ideas with
stakeholders.

4. Design

Now you have finalized layout and flow of the required interface with you,
the next step is to work on final graphics. Turn the initial mockups and
wireframes to great-looking images with theme and styles applied to them.

5. Implement

Since technical people participate in early stages of the process, they

can start implementation while Design phase is in progress.
Development team builds back end functionality first and connects it
with UI when they get design artifacts.
6. Evaluate

When product features are implemented, the end product is

evaluated based on few factors:

• Whether the system is usable?

• Is it easy to use for end user?
• Is it flexible and easy to change?
• Does it provide the desired solution to user’s problems?

• Does the product have the credibility that makes someone want to
use it because of the experience it provides?

Project UI:
The application must be developed in a way so that the user can use it as simply as
possible. The chatbot must be readily available for the user to talk to whenever they
desire. The chatbot should not take a lot of time to respond to the user. The response
given by the chatbot must be appropriate and relevant in accordance to the user's input.
The output must also be clear and understandable to the user. The chatbot should be
able to manage inputs it does understand as well. The interface should be appealing and
easily understandable by the user. The chatbot should take feedback from the user and
implement it to improve user experience.
The Chatbot was designed with the user in mind and hence the user interface is
responsive, user-friendly and aesthetically comforting. The bot responses are delivered
to the user as if the user were talking to a real person.
 Roll No 1704006
C22 Group 38

EXPERIMENT NO: 2

Problem Statement:
Design a mobile app that can teach mathematics to children of 4-5 years age in
schools in Rural/Urban sector.

What is UI?
• App’s user interface is everything that user can see and interact with.
• Android provides a variety of pre-built UI components such as structured
layout objects and UI controls that allow you to build graphical user interface
for your app.
• Android also provides other UI modules for special interfaces such as dialogs,
notifications and menus.

Which age group of people are targeted?

• The age group of people we are targeting are people of age below 8.
• Kids want to learn their stuff in a very attractive way with lot of cartoon images
and fun.

What we developed for the users?

• We had developed an app of maths quiz for the kids, where they can learn
counting and if are good in maths can even take quiz of addition, subtraction.
• There are total 3 pages in app.
Flow of the App:
• The first page in the app is the home page where there are two buttons in the
form of images.
• Kids can click on any of the button to take the quiz where one quiz is of easy
level and second quiz is of hard level.
• On click of the first button, quiz page will appear and you can find an image.
• You need to count the objects in the image and select right answer,
• On click of every answer, you will get to know the answer is right or wrong,
and right answer will be displayed.
• The second button of quiz is the harder one where kids need to calculate.
• An image will be displayed and kids need to do either addition or subtraction
of the options given and pick the appropriate options.
• At the end of quiz, scoreboard will be displaying the score and a try again
button if you want to try again.
Output:
 THADOMAL SHAHANI

TSEC
ENIGINEEPNGCOLEGE

EpeaiMent No. 3 Rolo toos

Ca2ara ;38
M Deaian o V sey nleaace Desian
o a n applitation o vent
heoy
SThiswebsit e }s boAed on HHUSTs
Ccket tlub oftvdent Union
The GJebaite houws 3Loreto?d f
omeA played , det al3o ractice
Dession, qalleky of tvdent s
pag e 4
H H óme
faqe hou & tOHe caha of the
me Payd, delail o ca
e ocotion o unttAlity alann
LLh a oam o Cont act

Th
he on
qallek
he 0 alek
d
a webilte tantains
Memo2i es
as pho La
pho
* Yaqe.3
The ha d
toAe Co AdA Pageo ebte Cantons
by tearn 9 maich e play ed
 The ebite daA develope d t h he
ond
a nd
2oe
OX PUApose of pkovidînq infoamation
ke?q even t .
onaqinq the

h a t i s ser lnier Pace Pgign

Osr
This s ODe

nterfac.e desîqn for

applic a ton Cwhich eals or
thebodgin , fhe heintface that Ths u
egney wT be leribln So t
an d folera ht,
Yeducinq Co3t of netwoA k dew orK Of
user dte» foces change
 EXPERIMENT NO. 3 Roll No : 1704006

Batch : C22 Group No. : 38

OUTPUT:
 THADOMAL SHAHAN!
TSEC
ENGINEERING COLLEGEE

Expaiment 4 KolNo 11oyaos

AIM3 Statistfea l. qtaphs 'and its

SeS in v'sualation

Theoas
Atat°sifca_qLoph s Q a Suqated.
ame Qiye apictoatalYepyeénta tion
Hdata Lh a Bimole & und tandle-
Cay hese 9raphA al eLentialfokt
data anayEca_to deihe duive
nalghts o m CUstom eks_dot a and
akin q ihe businea abea d.
be e a4e diss en t t y p e A O d a t a :
9aphs
qualtaiiye.
qvonht ativ
faiaed
Commen Statis tical qzophs
bar aphs
Pie-chasf
HistD Qzam
Uged t o zepaezent qualitaliv e a t a
This qxaph_is' vSuallu i e d to
compoae on qUantit y, foA eq
the'
the ength af hek ba Can e oALy_
 Soayvhich' cateq oAy in a Art.
Helpf po1, 0phtn9V
a phino alila Cestfve
entd ata.
a h ice o} pie e pkesen t a d1feA enC
CategokY a nd
and ea
ch cota epon din q Ho
7o

dfien t pfe.
Used to aepk esent uantit ative data
ea ch dat a and ORiqing L vakve e p deelents

on that CoAes pon dine Bp ecifc

ax's , 4hen atat'sdf cal tools ofcoarelatfo
and deqoess t on

e used to ba-90p h and ne

r a ph o plot. yaktat on empe pe watuke
. t
9 lo'b a avea9e emp er atufe
The
he con cl vsion from the qraph. '1S
9how
the aved a q e e m peratore: 1S
that tially
nC e A i n g evey y e or epoln en
 EXPERIMENT NO 4 Batch No. : C22
Group : 38 Roll No : 1704006
OUTPUT :
 Experiment No. 5 Roll No. :1704006

C22 Group : 38

Aim: Design appropriate icons pertaining to a given domain (E.g., Greeting cards).

Theory:

What are icons?

• Icons are simple images used in context to communicate something.

• The name is originated from the Greek word “eikon”, meaning “image”, which
in turn derives from “an infinitive”, which means “to be similar”, “to appear”.
• The word was 1st used to indicate a sacred representation, painted on a table.
• Digital icons appeared when the 1st GUI operating systems came out, like
Macintosh and Microsoft.
• They were associated with programs or files, which would be opened by
double-clicking on the icon
• The earliest icons were pictures of objects that users were familiar with. Such
as office objects and software programs.
• They are, by definition, language independent, meaning they can be recognised
without text to indicate their meaning.
• The simplicity of use and intuitiveness made icons immensely popular.
• Their symbolisms have made them recognised all over the words and have set
standards, we still follow today.

Project Description

We decided to create chatbot using deep learning and natural language processing,
that would talk to the person and based on the conversations, it would recommend
whether person talking to the chatbot requires therapy or not. It would be a voice based
chatbot where it would understand what the user is saying and accordingly provide an
appropriate response. After a sufficient number of conversations, we plan to predict
the user’s mood by analysing the conversation, after which the app would play some
music to sooth the current mood of the user. We also plan to integrate a VR feature,
wherein the chatbot would ask the user to describe their happy place, and the try to
render that place in the virtual reality to ameliorate the user’s mood.

Flow Diagram:

Logo Description:

We decided to go with a simple yet elegant design that represents our entire project.
A chat bubble with the words MeH inside it that signify our project is a mental health
chatbot.
 THADOMAL SHAHAN

TSEC
ENGINEERING COLLEGGE

Expeament_No. G Rollnto4 0o 6
C22 CTnup%S8

A M bealqn a _ pesAAonal ebAute

an Aatls Qa_
Theohy
The Cuebaite 'es aimed at an
QAtist eainiex, aho da aw s on musical
nst ruments Re quLt azs Vio LLnS
Ute S yaop hone
The« Pe ån desLaned
&e bsite
Hone paqe
Coxta q e
Abovt Va
Ail Yaoduts faqe
Home pag e .0 yey me dium Loo R.
| Main al m s to p bmoteb e s t
sello4
gellfoq nstturments
onq oinq
br
Sales
Let vSexs no

Cart fage Caat pa qe ollows

ren d O picq -commerce
plat07003 LiRe Amaa an/ttlpRant
! Shoug Loubt o auh em 9elected
a n d USes con intrease_/deLr case t h c s e
and
Count9.
3ub-o1al and tot al_ade ais played
a he botom an d oser's and can check

faytng
*_About
This
Us 6imply con tain s ebail3
about ebsite and mottve.

This aheae USers

LS Qso a fage
en pla ce feed ba ck aboot thei
e p e i ence.

APaoduct Pa -
lphab efcal Oad et
Pace a n qe
Colouy wse
ns trum ent- cise.
 Experiment No. 6 Roll No :1704006

C22 Group NO. 38

Output:
 THADOMAL SHAHAN

TSEC
ENGINEERING COLLEGE

Expedimen No.T C22 CrOup :88

t t o 00 6

Am Deutqn an inteafac e oa bome

12p ance

heony
lheoy
fh deAiqn ed inter ace deals
Smat homesg
Smavt tqh bip q Sy3tem
Smaa beatin 3ystem-
Soat Lhtin-
Smart iq htinqhom Ay3:te m allos
Use to controllfqhts emotelu a n d
ever ebedule the fimefrqme ln
Chich 1ght deeds to be on
DIffeaen liht t o res indteaent.
can e mahaqe
qed_and edd e dd
o n t h e System
3 Hin9 ato l _ b t eatvr e
e y i ea the Se a ente ihe.
sart dat atim e ond data-time
alonqeuith6aighineSs
along z tor
n e n t i q h t bsIbs_'Can b
seLonds Seleittd vsinq de i Option
o thia d Suad aant an'd can be
oDiro ed
*.arf Heqtin4
he Amari heatin 4stem,
ds allows
the cont'o_e the 6tn'ds ofD00ms
 alonq Cu'th heafinq ystemcan
The 0om ermpe7atoae be
Ton uolle o USn q aar pw an d amben t

numidtty.3s meaDre d andrsplaued Set

b stm.M o de of Syst em con 'be
an of4optlo ns Auto, Heat ool
an b
an

Qutoset
d Da
The beat?nq
e h
enteri na th d'ale-tim e e
d cqti ond an d poe S etH C'nq the
tmpex atore
Thedegiqn ed Us ev Iniesfa c haeotores
MuSic for
iRe n ter face fo
mpliity ab anpiehonttbEL2
follotn q feadurtc st-fow aa d
Kewind- P a C OS ee

Abilty4 has o a'col o

Point n a 3on

Tn concl usuon th e deslqned

, intaf ace
ac e
undeyslon da bl'e Simp
5eSily
AOd paodrd es the US ea with abiltty
o r a seonRess an d seek expei enc *.
 Experiment No. 7 Roll No. : 1704006

C22 Group No. :38

Output:
 THADOMAL SHAHAN
TSEC
ENGINEERING COLLEGE

Eapeaiment No. 8 C2I7ou006

0 up N o 3 8
AIM Duign a n 1nteractive acces
VSLng GsapRtcs lgs 8 AR nd code d
enhaLinq parntS Con

ucadah site saimd a aovdiD

inteaiise data acces s vsin K
Codes
QR_ Code ane idely OSe d nouia d ay
Coithise laS e s on cin_q ckets
om
J
to ufipaymenLs
desaned
a q es a e theae s
Ce b.se b p Home p oqe
Da1o_AccessPage fain foam
About Us

Home p.eqe i7vea minm o li's tr c

Main_atM 13 i0 qixe the Use_ the
n oye zvíe uw'of the'_eve bsute

Dala Acess foqe Coa a9 e

ollo ws the módel o h o áata
a cceSs0q o o RS
- t hos a aaticulor bv Hon_ashich
hen clicked- asks the Se_pm ission
o occeSS h e i comera
*Albout_Us this paqe contoins websit
àn d m otive bchind s CeatoTS,
rage hee Us eas can plaee feedbocks
abooe the erpeaience.
*pint fesm2 Pa q diala y s he fom
10 UStrs cyont
e p?nt
- ced at the end a p2int
Pnt boton
cohih then C e s t s a ccess to osea's poin
p i n t the afoxmentioned ainte
Tm.

titket seavíce, mOre

O VSe -
USe. case s a
boost e 1?eket nerator
petall
- UI is s impl e., ît consist aonmP
hat askS0r n u m b e o t i k e t s qene?aie

A vse ioputmumber then a

scanne
Co de 3s
Co 35 qehed ated ed hech chen Seanne
pens a
opens a aq cohith qeneaat ed trckets

here 1s ap'nt 6vt on to

1heae down laa d
trcHet 1h f form.
 Experiment No. 8 Roll no. : 1704006

C22 Group No. : 38.

Output:
 Experiment No: 9

Roll No. : 1704006

C22 Group No.: 38
Aim: Redesign of a User Interface (Suggest and Implement changes in Existing
User Interface).
Theory:
What is an UI?
The user interface (UI) is the point of human computer interaction and
communication in a device. This can include display screens, keyboards, a mouse
and the appearance of a desktop. It is also the way through which a user interacts
with an application or a website.
Importance of knowing the user in terms of UI:
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. The user needs a system that is built to serve. Understanding
people and what they do is a difficult and often undervalues process but very critical
because of the gap in knowledge, skills and attitudes existing between system users
and developers that build the system.
To create a truly usable system, the designers must always do the following:
• Understand how people interact with Computers: People tend to be goal
oriented, wanting to achieve a specific objective when taking an action or
performing a task. The cycle flows as follows:
o Goal is formed
o An execution plan is devised and implemented.
o General methods to achieve the desired goals are decided upon.
o The action sequence is formed.
o The actions are performed.
o The results of the actions taken are evaluated.
o The resulting output is perceived and understood.
o The outcome is interpreted based upon expectations.
o The results are compared to the formulated goals.
• What we developed for the user: The main target is the students who’ll be
using the website. So it was necessary to make sure that all the students
were easily familiarized with the website and found it easy to navigate through
the website. We also provide login credentials to users so that their data
remains secure.
Conclusion: Changes have been suggested and implemented
 Experiment No: 9

Output:
 THADOMAL SHAHANI
TSEC
ENGINEERING COLLEGE
Exp omPm No.20 Pollo 0 4 0o6
C 22 rroup No 3&
AM Deita amovigafo a pexfom

heexy )

Touy 8m Ka b00mtng busimtAL n eh

Aves mallioms o p l e
A
Du wnopmalivrily cwt hes_plecws
tou LAt htwly y om evu'gaLia
oppliroLon Utey rip
A eod
Vey d n u e i a d u a q _ a lounil A
exet nce_ Thtrpre CuR hawe O cone up wk
a Lmple

u Om uwo

( i ) 1 map

Lhe maup
Jt_is 00p l dakt'nq Ap a
naly ofh 9e een t pove The
th oLloirg
C buld ae,r'es
As spafaJ tc)
Road Netwok
 componont helpa touns n pManntn9
ut as wal e
wel os taw le LNNICLS meey sl
then
i) Nawo tinSuom
e troanellurg eds Th
T tab cat o tha
lstawo erol baad
npacs a
o these pu t l oppeat
Oul Om t maP
The o Lew 23oe a J wll thu
Cusfonig alons e

(G) Jt alio 2hows Cree on tL roufe

Ponle Car b temgid beud
IVAnq a/ne
eaHors ta tranSo-t
,T 9
Use much ruod iuy
m t Toue odispled or
Undr starod ln9
q npu oy rteung
pon wont to e 0nch tA
o ceaoy o t place.

0U
aPpi calen

abilty to
I pe
v/OeorA e a U 9ta
 Experiment No: 10
Roll No. : 1704006
C22 Group No. :38

Output:
Experiment No: 10
Experiment No: 10
 THADOMAL SHAHAN!
TSEC
ENGINEERING COLLECE

Expeaimint No 11
C22 r0p No 38
ATM:De4 Use ntlars CUT) s melae
a lus olikabled popM
Tey
hat
lha ntets UII) dAtLe poirl um
OmpuY n t a a n end e0mnuMtal On tm
deiee. 1uk ca in clud d A p l y
sads ayhOus
a d sktop J_A aAto t wayHrouk wid
a uc interaof wut Qu appdnakoa,

MoloxDihabili : .
Moto ada{alaxLte COn_tneud wuaAS
Ligtat
iNoutary noVAm enIs,Cat o odmalan
fmitations
ohlom

Eromas lo Ju t w p0pk av
llsobilLti» a ung th hano o mA
USR.
thtmgttke
thiv a o oLYom te
 o hat ave
WL have Cw deNelopel
w hp
deado pe ol P l e oi peop
a ave
ao adiiabsAith n t i r hom
ind u to yA an kypooros
OuN
OuN
ppie al tys prtode a ~d
be O UAS Com el
I'npl7

9
whn a Uay tues th appua aluon
3hows wo uhas i
9
Oom
hos
mstyd
Gi) Prdiehinfo wh te w cousd b
fo tkenu
The
The use tan lleet one of thog opyBns to
Complt, what t
appoaon Rn&un3 thaf of 0t
ane
typin y Jtr , wrek co dfeult

T appAi a o n motu t
A
pr CtL typimg
u ch A\m an un tor te tare
ue
 EXPERIMENT 11 Roll No. : 1704006

C22 Group No.: 38

OUTPUT