314447: Human Computer Interaction

Laboratory Manual

Third Year – Information Technology

(2019 Course)
Academic Year 2024-25 Semester – V

Teaching Scheme: Credit Scheme: Examination Scheme:

Practical (PR): 02 hrs/week 03 OR: 50 Marks

LABORATORY MANUAL V 6.0

DEPARTMENT OF INFORMATION TECHNOLOGY
Sinhgad College of Engineering, Pune

2024-2025
 VISION

To provide excellent Information Technology education by building strong teaching

and research environment.

MISSION
1) To transform the students into innovative, competent and high quality IT
professionals to meet the growing global challenges.

2) To achieve and impart quality education with an emphasis on practical skills

and social relevance.

3) To endeavor for continuous up-gradation of technical expertise of students to

cater to the needs of the society.

4) To achieve an effective interaction with industry for mutual benefits.

 PROGRAM EDUCATIONAL OBJECTIVES

The students of the Information Technology course after passing out will:

Sr.No. Description

Possess strong fundamental concepts in mathematics, science,

PEO1
engineering, and Technology to address technological challenges.

Possess knowledge and skills in the field of Computer Science and

Information Technology for analyzing, designing, and implementing
PEO2
complex engineering problems of any domain with innovative
approaches.
Possess an attitude and aptitude for research, entrepreneurship, and
PEO3 higher studies in the field of Computer Science and Information
Technology.

Have a commitment to ethical practices, societal contributions through

PEO4
communities, and life-long learning.

Possess better communication, presentation, time management, and

PEO5 team work skills leading to responsible & competent professionals and
will be able to address challenges in the field of IT at the global level.
 PROGRAM OUTCOMES
The students in the Information Technology course are expected to know
and be able to:

Sr. No. PO's Description

Engineering An ability to apply knowledge of mathematics,
PO1
knowledge computing, science, engineering and technology.
An ability to define a problem and provide a systematic
PO2 Problem analysis solution with the help of conducting experiments,
analyzing the problem and interpreting the data.
An ability to design, implement, and evaluate software
Design/Development
PO3 or a software/hardware system, component, or process
of Solutions to meet desired need switch in realistic constraints.
An ability to identify, formulate, and provide essay
Conduct Investigation
PO4 schematic solutions to complex engineering
of Complex Problems /Technology problems.
An ability to use the techniques, skills, and modern
PO5 Modern Tool Usage engineering technology tools, and standard processes
necessary for practice as an IT professional.
An ability to apply mathematical foundations,
The Engineer and algorithmic principles, and computer science theory in
PO6
Society the modeling and design of computer-based systems
with necessary constraints and assumptions.
An ability to analyse and provide solutions for the local
Environment and
PO7 and global impact of information technology on
Sustainability individuals, organizations, and society.
An ability to understand professional, ethical, legal,
PO8 Ethics
security and social issues and responsibilities.
Individual and Team An ability to function effectively as an individual or a
PO9
Work sate am member to accomplish a desired goal(s).
An ability to engage in life-long learning and continuing
professional development to cope up with fast changes
PO10 Communication Skills in the technologies /tools with the help of electives,
profession along animations and extra- curricular
activities.
An ability to communicate effectively in engineering
Project Management
PO11 community at large by means of effective presentations,
and Finance report writing, paper publications, demonstrations.
An ability to understand engineering, management,
PO12 Life-long Learning financial aspects, performance, optimizations and time
complexity necessary for professional practice.
 PROGRAM SPECIFIC OUTCOMES

A graduate of the Information Technology Program will demonstrate-

Sr. No. Description

An ability to apply the theoretical concepts and practical knowledge of

Information Technology in analysis, design, development and
PSO1
management of information processing systems and applications in the
interdisciplinary domain.

An ability to analyse a problem, and identify and define the computing

PSO2 infrastructure and operations requirements appropriate to its solution.
IT graduates should be able to work on large scale computing systems.

DOCUMENT CONTROL
 Reference Code SCOE-IT / Lab Manual Procedures
Version No 6.0
Compliance Status Complete
Date of Compliance 07-06-2023
Security Classification Department Specific
Document Status Definitive
Review Period Yearly

Author

Signature
Name Prof.D.G.Jadhav, Prof.S.L.Dawkhar
Designation Assistant Professor

Document History

Revision No. Revision Date Reason For Change

1 Syllabus Changed
2 To explore each practical’s in details
3 To understand each and every short and brief
concept of HCI
4 To understand details content of web sites like
prototype , CSS and CMS tools .
5 To explain futuristic scope and design part of web
site
 Sinhgad Technical Education Society’s
SINHGAD COLLEGE OF ENGINEERING, PUNE
S.No. 44/1, Off Sinhgad Road, Vadgaon(BK), Pune- 411041
Accredited by NAAC with Grade ‘A+’
 DEPARTMENT OF INFORMATION TECHNOLOGY

LABORATORY CODE

Sr. No. Laboratory Code

Students should report to the concerned laboratory as per the time
1
table.
2 Keep your bags in rack.
3 While entering in lab remove your shoes and keep it in shoe stand.
4 Turn computer monitors off when asked by your teacher
5 Do not go on banned websites.
6 No food or drinks near the keyboard.
7 Only use your assigned computer and workstation.
8 Do not change the settings on the computer
9 Ask permission to download.
10 Ask permission to print documents
11 Save your work often.
If you are the last class of the day, please POWER DOWN all computers
12
and monitors.
 SYLLABUS

Savitribai Phule Pune University, Pune

Third Year Information Technology (2019 Course)
314447: Human Computer Interaction Laboratory
Teaching Scheme: Credit Scheme: Examination Scheme:

Practical (PR) : 2 OR: 50 Marks

hrs/week 01 Credits

Prerequisites:
1. Problem Solving and Object-Oriented Technologies
Course Objectives:
1. To study the field of human-computer-interaction.
2. To gain an understanding of the human part of human-computer-interactions.
3. To learn to do design and evaluate effective human-computer-interactions.
4. To study HCI models and theories.
5. To understand HCI design processes.
6. To apply HCI to real life use cases.
Course Outcomes:
On completion of the course, students will be able
to– CO1: Differentiate between good design and
bad design. CO2: Analyze creative design in the
surrounding.
CO3: Assess design based on feedback and constraint.
CO4: Design paper-based prototypes and use wire frame.
CO5: Implement user-interface design using web technology.
CO6: Evaluate user-interface design using HCI evaluation techniques.
Guidelines for Instructor's
Manual
The faculty member should prepare the laboratory manual for all the experiments, and it
should be made available to students and laboratory instructor/Assistant.
The instructor's manual should include prologue, university syllabus, conduction &
Assessment guidelines, topics under consideration-concept, objectives, outcomes,
references.
Guidelines for Student's Lab
Journal
1. The laboratory assignments are to be submitted by students in the form of journals.
The Journal consists of prologue, Certificate, table of contents, and handwritten write-
up of each assignment (Title, Objectives, Problem Statement, Outcomes, software &
Hardware requirements, Date of Completion, Assessment grade/marks and assessor's
sign, Theory Concept, printouts of the code written using coding standards, sample
test cases etc. To support Go-green, printouts should be asked to any 2 students from
each batch. However, all students must submit the soft copy and should be maintained
by batch teacher.
2. Oral Examination will be based on the HCI theory and HCI lab term work.
3. Candidate is expected to know the theory involved in the experiment.
4. The Oral examination should be conducted if the journal of the candidate is
completed in all respects and certified by concerned faculty and head of the
department.
5. All the assignment mentioned in the syllabus must be conducted.
Guidelines for Lab /TW Assessment
1. Examiners will assess the term work based on performance of students considering
the parameters such as timely conduction of practical assignment, methodology
adopted for implementation of practical assignment, timely submission of assignment
in the form of handwritten write-up along with results of implemented assignment,
attendance etc.
2. Examiners will judge the understanding of the practical performed in the examination
by asking some questions related to theory & implementation of experiments he/she
has carried out.
3. Appropriate knowledge of usage of software and hardware such as tags, coding
standards, design flow to be implemented etc. should be checked by the concerned
faculty member(s).
Guidelines for Laboratory
Conduction
The instructor is expected to frame the assignments by understanding the prerequisites,
technological aspects, utility and recent trends related to the topic. The instructor may
set multiple sets of assignments and distribute among batches of students. It is
appreciated if the assignments are based on real world problems/applications. All the
assignments should be conducted on 64-bit
open-source software.
Guidelines for Oral Examination
Both internal and external examiners should jointly conduct Oral examination. During
assessment, the examiners should give the maximum weightage to the satisfactory
answer of the problem statement in question. The supplementary and relevant questions
may be asked at the time of evaluation to judge
the student‘s understanding of the fundamentals, effective and efficient implementation.
List of Laboratory Assignments

Group A: CO1,2,3
1. Identify and observe bad designs
Students are expected to submit minimum of 3 to 5 photographs of bad designs in their
surrounding or home or any product or neighborhood and create a report mentioning why
is it bad? They can submit word/pdf file having photos and description, source of photos
and place and mention why is it bad and discuss the outcome during lab session.
2. "The Jugad" :
Humans are very creative and often use it to get work done with available set up and
resources. Students are expected to identify Jugad (things used creatively but not meant
for that) things and submit minimum of 3 to 5 photographs of jugad in their surrounding
or home or neighborhood. Prepare a report mentioning the Jugad and source of photos.
Discuss the outcome during lab session.
3. Feedback and Constraint:
Products or interfaces should offer useful feedback to understand the state and have
constraints to avoid mistakes while using them. Students are expected to identify and
analyze minimum of 5
interfaces or products offering feedback and constraint. Prepare a report clearly
showcasing feedback and constraint and support it with minimum of 5 photographs
taken in their surrounding or home or neighborhood. Discuss the outcome during lab
session
Group B: CO 4,5
4. Prototype and wire frame:
Students are expected to choose a problem statement and identify –

Types of users going to use (age, experience, environmental conditions during

use etc..)Minimum 3 scenarios of use Create paper-based prototypes for
scenarios.
Use any open-source tool to wire frame scenarios.

5. CSS:
Students are expected to design minimum of 5 web pages using CSS for the problem
statement chosenin assignment no. 4. Apply CSS properties Border, margins, Padding,
Navigation, dropdown list to page
Group C: CO 5,6
1. CMS tool:
Develop website using any CMS tool which falls into one of the categories blog, social
networking, News updates, Wikipedia, E-commerce store. Website must include home
page, and at least 5 forms. Use WordPress/ Joomla/ Drupal /PHP/ CSS/Bootstrap/
JavaScript.
2. Evaluation of Interface:
Students are expected to evaluate minimum of two products / software interface against
known HCI evaluation.
Reference Books:
1. Alan Dix (2008). Human Computer Interaction. Pearson Education. ISBN 978-81-317-
1703-5
2. Ben Shneiderman; Catherine Plaisant; Maxine Cohen; Steven Jacobs (29 August
2013). Designing the User Interface: Strategies for Effective Human-Computer
Interaction. Pearson Education Limited.ISBN 978-1-292-03701-1.
3. https://www.w3schools.com
 Assignment No: 1

Aim: Identify and observe bad designs

Problem statement:
Students are expected to submit minimum of 3 to 5 photographs of
bad designs in their surrounding or home or any product or
neighbourhood and create a report mentioning why is it bad? They
can submit word/pdf file having photos and description, source of
photos and place and mention why is it bad and discuss the outcome
during lab session

Theory:

There are 2 main types of designs

1) Good design
A design of any product or an interface is generally considered
to be good when it is
Simple, Usable, Learnable, Intuitive, and has a Waw factor.

2) Bad design
A design difficult to use, understand its functionality and not
interactive enough to understand its current state is called as
Bad design.
Few real life examples of products and interfaces are
mentioned along with its relevant explanation.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 12 | 53
 The handle of the drawer is
vertical in this shelf whereas
usually drawer handles are
horizontal so when I first tried
to open the drawer I thought I
have turn the knob to the left
or right direction and then
pull it to open it. But this was
not the case, the handle was
fixed and the drawer had to
open just by pulling it.

Fuel Indicator on a bike blink

when the fuel is very low. It
does not have a perfect fuel
level which is not useful
because you can't guess
number of kilometres it can
from a destination.

Hard to find particular app as

they are not arranged in any
order.Every time I want to
open app which I don’t use
frequently I end up wasting
time.

This drawer is from our

kitchen.We can open only one
drawer at a time and it gets
opened partially. We can’t
open both simultaneously.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 13 | 53
 This drain is higher than the
ground surrounding it.

Cello tape rolls don’t have a

clear marking for the free end
of the tape.
We always need to scratch
through the surface of it to
find out the rough spot and
then pull it out.
This can cause the tape to
tear from between causing
damage

The rightmost switch controls

the second socket, and the
left switch controls first
socket.
It’s really confusing to find
which switch controls which
socket.

Here the fault in the design, it

has an extra button or there
is one socket missing.
One more fault is; it is placed
near the wardrobe so
whenever the door is opened
anything that is plugged there
collides with the door.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 14 | 53
 So, I received this cup as a
Birthdaygift.
The problem with this cup is
it’s really difficult to drink
anything from it because of
its odd designing.

The top of cup is narrow than

the rest of it which makes it
difficult to drink anything
from it.

This storage unit installed

under a bed cannot be
opened completely due to lack
of space. It is difficult to
access items placed towards
the inner end of the unit.

CONCLUSION:
Students will be able to differentiate between good design and
bad design.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 15 | 53
 ASSIGNMENT NO. :02

AIM: The Jugad

Problem statement:
Humans are very creative and often use it to get work done with available
set up and resources. Students are expected to identify Jugad (things used
creatively but not meant for that) things and submit minimum of 3 to 5
photographs of jugad in their surrounding or home or neighborhood.
Prepare a report mentioning the Jugad and source of photos. Discuss the
outcome during lab session.

PRE-REQUISITE:
1. Problem Solving and Object-Oriented Technologies

OBJECTIVE:
1. To gain an understanding of the human part of human-computer-
interactions.

THEORY:

We come across many such jugad in and around our neighborhood or

surrounding. The key concept here is use items or artifacts meant for other
useful things to be used as temporary solution to carry out certain activity
for which it is not meant for.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 16 | 53
 Car Window Sunshade

We can put wet phone in a bowl of

rice for some hours, the rice pulls
out the moisture from the phone
and this helps the phone to dry out
quickly

This is the money plant which is in

our gallery and here the supporting
rod which supports the plant is a
plastic stick seen in mops.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 17 | 53
 Using stool as a stump in gully
cricket

Table-fan is used as wall-fan

Old rakhi used as a curtain tie-

back

plants are grown in PVC pipe

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 18 | 53
 Plants are grown in tyre.

Fields often has attacked by rats,

snakes, buffaloes, wild boars as
well as eagles, peacocks and
various birds. They damage the
yield and can cause huge loss to
farmers. So a low cost jugad of
discarded glass bottles and nails
are used.

Plastic Bucket

Using this old toothbrush as a

sprinkler paintbrush

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 19 | 53
 This jugaad is very often use
jugaad in Indian house as we can
see container is loose and can open
easily and we cannot use it for any
liquid material.
If we put some plastic bag in
between container and cap it will
not open easily and it will provide
some air tightness to container.

CONCLUSION:

Students will be able to analyse creative design in the surrounding.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 20 | 53
 ASSIGNMENT NO. :03

AIM: To find the products with Feedback and Constraints

Problem statement:
Products or interfaces should offer useful feedback to understand the state
and have constraints to avoid mistakes while using them. Students are
expected to identify and analyze minimum of 5 interfaces or products
offering feedback and constraint. Prepare a report clearly showcasing
feedback and constraint and support it with minimum of 5 photographs
taken in their surrounding or home or neighborhood. Discuss the outcome
during lab session.

PRE-REQUISITE:
1. Problem Solving and Object-Oriented Technologies

OBJECTIVE:
1. To learn to do design and evaluate effective human-computer-
interactions.

THEORY:

What is Feedback?
Feedback means the product interface shows some form of response or
reaction. The interface should talk back to the user to inform them about
what’s happening. In other words the user must understand whether the
operations are being carried out properly or not. Many times these feedback
messages provide proper guidance to the user about what should be the
next step to be done in order to complete the task in correct manner.
For example: The button should display a ‘pressed’ state, Playing a
spinning wheel while opening any application, or show a progress bar to
keep the user in the loop.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 21 | 53
What are Constraints?
A constraint is a limit or restriction. Every application or product have some
kind of limitation or rules, depending on which the product works.
Sometimes product has good constraints which stops the users from
making mistakes. These are useful constraints. They always help user for
smooth operation of a device or a system. Entering wrong data, pressing
wrong button, selecting incorrect option this type of mistakes can be
nullified by the good constraints. Sometimes there is a need of constraints
to avoid such problems but they are not present.

What is the need of Feedback and Constraints?

By receiving feedback from the system the user will not become panic and
system gets enough time for processing. Feedback is essential to guide and
inform your decision making and influence innovations. It helps in
maintaining transparency between the product and the user.

Examples with Explanation

Example Explanation

Fan regulator gives us a feedback

regarding increasing and decreasing
speed. The direction of the arrow
shows the increasing speed.
It also have the constraint that you
cannot increase the speed more
than 4th level. The circles are
indicating those levels.

There is a Notification sound when

mobile is connected to a laptop.
And message is displayed about
what you would like to do next.
There is Constraint like unless you
select the file transfer option, you
will not able to do any file transfer
operation between laptop and
mobile.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 22 | 53
 In the AC remote good constraint is
that you can’t raise the temperature
above 31°c and below 16°c. You can
see the current temperature on the
display panel, which is feedback.

You want to paste some content the

UI gives you feedback regarding
different options available.
Sometimes options like paste are
disabled when we can’t use them.
This is a constraint.

The online products have feedback

in the form of ‘Star rating’ and the
average of the rating is done with
number of users rated which is
written on the right.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 23 | 53
 There is a quantity constraint with
an online product during a big sale.

Examples where feedback is needed but not present.

There should be a mechanism

to sense a bed time of the
members and regulator should
be turned off.

There should be a mechanism

to sense how much gas is used
from a cylinder.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 24 | 53
 An indication beep is required
to know that laptop is fully
charged.

The iron should be

automatically turned off if not
used for at least 2 mins

There is no limit in dialing

numbers on the dial pad. It
should there so that one cannot
dial numbers more than 10.

Conclusion:
Identified and analyzed interfaces and products which gives feedback and
have some constraints.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 25 | 53
 ASSIGNMENT NO. :04

AIM: To study HCI models and theories.

Problem statement:
Students are expected to choose a problem statement and identify –Types
of users going to use (age, experience, environmental conditions during use
etc.) Minimum 3 scenarios of use Create paper-based prototypes for
scenarios. Use any open-source tool to wire frame scenarios.

PRE-REQUISITE:
1. Problem Solving and Object-Oriented Technologies

OBJECTIVE:
Design paper-based prototypes and use wire frame.

THEORY:
There are 3 main types of users

1) Novices
For the novice user of a system, progress is slow because of the
limitations of working memory. Chunking is almost entirely
absent.
Systems used by novices require more feedback and more
opportunities for closure.

2) Knowledgeable Intermittent users

These users need consistent structures, good help facilities,
good documentation.

3) Expert Frequent users

These users have fast response time and will require brief
feedback.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 26 | 53
Experts organize their knowledge according to a higher conceptual
structure. They can recall more than novices because their knowledge is
chunked. Expert users will look for keyboard shortcuts, abbreviated
sequences. Experts can find constant confirmation screens irritating - Use
these only when important.

What is Prototype?
A prototype can be any mock-up or demo of what a website or any
application will look like, when it goes live. It is generally drawn by
hand on a paper. While it may not have all the bells and whistles of
a final website build, it can give you a really good idea of the
functionality, user journey and flow through a website. A website
prototype is essentially a high-fidelity visual version of the site that
allows you to link between screens and demonstrate how the website
would work before going to build.
Creating website prototypes is useful in many ways. Most
importantly, a prototype allows a user to interact with the website
almost as it would behave when built. While it may not include any
animation or transition styles it does operate on a basic level to let
the user navigate and interact with certain elements on the site.
Prototyping is hugely beneficial in the design process as it allows us
to save a lot of time early on in a web project. Identifying areas for
improvement during the design stage is a lot easier to rectify than
Finding out these problems once the site has gone into development.
Prototyping is also beneficial to show users who may not understand
flat visuals as easily as an interactive version of the site.

Example of a Prototype:

High-Fidelity and Low-Fidelity Designs

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 27 | 53
 Low-fidelity prototypes are often paper-based and do not allow user
interactions. They range from a series of hand-drawn mock-ups to
printouts. In theory, low-fidelity sketches are quicker to create. Low-
fidelity prototypes are helpful in enabling early visualization of
alternative design solutions, which helps provoke innovation and
improvement. An additional advantage to this approach is that when
using rough sketches, users may feel more comfortable suggesting
changes.

High-fidelity prototypes are computer-based, and usually allow

realistic (mouse-keyboard) user interactions. High-fidelity prototypes
take you as close as possible to a true representation of the user
interface. High-fidelity prototypes are assumed to be much more
effective in collecting true human performance data (e.g., time to
complete a task), and in demonstrating actual products to clients,
management, and others.

What is the need of wireframes?

Wire framing is a way to design a website service at the structural
level. A wireframe is commonly used to layout content and
functionality on a page which takes into account user needs and user
journeys. Wireframes are used early in the development process to
establish the basic structure of a page before visual design and
content is added. The aim of a wireframe is to provide a visual
understanding of a page early in a project to get stakeholder and
project team approval before the creative phase gets under way.

It is quicker and cheaper to review and amend the structure of the

key pages in a wireframe format. Iterating the development of the
wireframes to a final version will provide the client and the design
team confidence that the page is catering to user needs whilst
fulfilling the key business and project objectives. From a practical
perspective, the wireframes ensure the page content and
functionality are positioned correctly based on user and business
needs. And as the project moves forward, they can be used as a
good dialogue between members of the project team to agree on the
project vision and scope.

Example of a Wireframe:

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 28 | 53
D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 29 | 53
 Conclusion:
Prototypes are drawn and Wireframes are created using software
tools

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 30 | 53
 ASSIGNMENT NO. :05

AIM: To understand HCI design processes (CSS)

Problem statement:
Students are expected to design minimum of 5 web pages using CSS
for the problem statement chosen in assignment no. 4. Apply CSS
properties Border, margins, Padding, Navigation, dropdown list to
page.

PRE-REQUISITE:
1. Problem Solving and Object-Oriented Technologies

OBJECTIVE:
Cascading Style Sheets (CSS) form the presentation layer of the user
interface.

THEORY:
CSS
• Cascading Style Sheets (CSS) form the presentation layer of the
user interface.
• Structure (XHTML)
• Behaviour (Client-Side Scripting)
• Presentation (CSS)

Types of CSS
1. External style sheet
2. Embedded styles
3. Inline styles

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 31 | 53
 • Inline Style
- Inline styles
- Add styles to each tag within the HTML file
- Use it when you need to format just a single section in a
web page
- Example

<h1 style=“color:red; font-family: sans-sarif”>IU</h1>

• Internal Stylesheet Embedded

- A style is applied to the entire HTML file

- Use it when you need to modify all instances of particular

element (e.g., h1) in a web page
Example
<style>

h1 {color:red; font-family:sans-
serif} </style>
• External Stylesheet

- External style sheets

- An external style sheet is a text file containing the style
definition (declaration)
- Use it when you need to control the style for an entire web
site
- Example
- h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif}
- Save this in a new document using a .css extension

CSS Syntax

A CSS rule set consists of a selector and a declaration block:

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 32 | 53
 The selector points to the HTML element you want to style. The
declaration block contains one or more declarations separated by
semicolons. Each declaration includes a property name and a value,
separated by a colon.

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the

term "box model" is used when talking about design and
layout.

The CSS box model is essentially a box that wraps around

HTML elements, and it consists of: margins, borders,
padding, and the actual content.

It allows us to place a border around elements and space

elements in relation to other elements.

The image below illustrates the box model.

Property Description

border all the individual border properties in one property.

This is called a shorthand property.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 33 | 53
 none| dotted | dashed | solid | double | groove |
Border- ridge | inset | outset
style

is used to set the width of the border. The width is

border- set in pixels,
width or by using one of the three pre-defined values:
thin, medium, or thick.

border- is used to set the color of the border

color

Margin
The margin clears an area around an element (outside the border).
The margin does not have a background color, and is completely
transparent. The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin
property can also be used, to change all margins at once. It is also
possible to use negative values, to overlap content

Value Description
auto The browser calculates a margin
Specifies a margin in px, pt, cm, etc.
length Default value is 0px

% Specifies a margin in
percent of the width of the
containing element
Specifies that the margin should be
inherit inherited from the parent element

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 34 | 53
 Padding

The padding clears an area around the content (inside the

border) of an element. The padding is affected by the background
color of the element. The top, right, bottom, and left padding can be
changed independently using separate properties. A shorthand
padding property can also be used, to change all paddings at once.

Navigation

There are two ways to create a horizontal navigation bar. Using

inline or floating list items. The display property of css is used for
navigation bar. The value block will create a vertical navigation bar
and inline will create a horizontal navigation bar.

Example:

Display: inline | block

Drop Down list can be created by using HTML onordered lists tags
<ul> and list items <li>. One can set below CSS properties for lists.

Property Description
list-style Sets all the properties for a list in one declaration
list-style-
image Specifies an image as the list-item marker
Eg. url(“image.gif”);
list-style- Specifies if the list-item markers should appear inside
position or outside the
content flow
Inside | outside | initial
list-style-type Specifies the type of list-item marker
Circle | square | decimal | lower-alpha | lower-greek |
lower-latin | lower-
roman | upper-alpha | upper-latin | upper-roman

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 35 | 53
 Conclusion
Implement user-interface design using web technology.
Various CSS properties have been studied and used for creation of
interactive web page.

Expected sample Output

Lab. Based FAQ

1. What is CSS?
2. What are the types of writing CSS?
3. What are various CSS Properties?
4.What is CSS Box model?

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 36 | 53
 ASSIGNMENT NO. :06

AIM: To apply HCI to real life use cases.

Problem statement:
Develop website using any CMS tool which falls into one of the
categories blog, social networking, News updates, Wikipedia, E-
commerce store. Website must include home page, and at least 5
forms. Use WordPress/ Joomla/ Drupal /PHP/ CSS/Bootstrap/
JavaScript.

PRE-REQUISITE:
1. Problem Solving and Object-Oriented Technologies

OBJECTIVE:
CMS TOOL
THEORY:

Introduction to CMS

• Contents of websites may consist of text, graphics, sounds,

movies and so on,

• Content Management Systems are used as a tool to publish

such contents onto a website easily and efficiently, it also helps
to separate web page design from content creation.

• Content Management Systems are usually developed using a

combination of programming/scripting languages and
database technologies, in which they work well together.

• In order to manage the process of creating and presenting

information on web pages, this software consists of the
following:

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 37 | 53
 • Client software: is used to present a user interface to help
users add, change, or delete information on web pages, for
example a web browser such as Internet Explorer or Mozilla
Firefox are used to display web based user interfaces.

• Database software: is used as a tool to store data or

information for future retrieval or manipulation, for
example Microsoft SQL server, Oracle and MySQL
databases.

• Web programming languages and scripts: these are used

as a tool to communicate to the underlying database to
extract, change, save, or remove data from and to the
database, for example JSP, PHP, Java Servlets, Perl and so
on.
• Template page: This is usually created by Hyper Text Mark-
up Language (HTML) to keep the website layout consistent in
order to preserve the corporate image by keeping the same look
and feel throughout the system.

Advantages of Content Management Systems

• It helps content authors to update or publish information onto

the website without any need for web programming knowledge,
which in turn reduces the cost of professional assistance.
• It allows content writers to concentrate on writing information
without worrying about the design of the website. They can
easily add, edit, and remove contents from and to the database
by using simple user interfaces.
• It allows web content maintenance carried out easily and
efficiently to meet business needs.
• It provides a consistent corporate image by keeping a
consistent presentation and layout of web pages throughout
the website by separating web page design tasks from content
creation tasks.
• It helps web developers to concentrate on more important
aspects of the website such web architecture, design,
navigation and usability of the website without worrying about
creating and updating information on the website.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 38 | 53
Few CMS Development tools are wordpress, Drupal, Jhoomla.
Word press
Word Press is a completely free tool used to create dynamic websites. It is
most popular blogging tools on the web, making it easy for anybody to post
their ideas, pictures, and audio/video. A blog is a type of website or part of
a website that is maintained on a regular basis by it's owner with entries
regarding commentary, reviews, opinions, and other media such as video.
It will be used to create any type of websites such as Business Website,
Informative Website, Review Website, Personal Website, Photo Gallery, etc.
Example

Steps to create Photography website using Wordpress

1. Install Wordpress
2. Now go ahead and login your WordPress admin

3. You can install a WordPress theme in your admin area by going

to Appearance » Themes and clicking on the Add New button
at the top.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 39 | 53
4. Write ‘photography’ in the search bar and hit the enter button.

5. We are selecting the Patio photography theme. It is a beautiful

WordPress theme for photographers.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 40 | 53
 6. You need to click on the Install button from Patio theme and
then click on the Activate link from the next screen.

7. Add Pages and Posts in Your Website After activating the

theme, you can go ahead to Pages » Add New to add your
website pages one by one.

8. Once you have created a few pages, simply go to Appearance » Menus

to create the menu for your website and click on the ‘create a new
menu’ link.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 41 | 53
9. You will need to give a name to your menu and click on the Create Menu
button.

10. Once the pages are added, you can go to Posts » Add New to add a
new blog post in Word Press.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 42 | 53
11. You can edit these posts to add content and images for display on
your photography website.
12. With all these and many more plug ins you can develop your
website easily using word press.

Website Deployment

When the process of website development is complete, its needs to be

deployed on a web server. When development of website is completed, it
is tested for its final working and ready to be hosted on a live web server.
The hosting of a website on a web server involves the following steps:
a. Domain registration
b. Domain hosting
c. parking websites
d. uploading data using FTP
e. email configuration

Conclusion: The various features of CMS have been studied and

Word press have been used.

Lab. Based FAQ

1. What is CMS? What are its advantages?
2. What are various CMS tools?

3. How Wordpress is used for creation of interactive website?

4. What are the steps to deploy a website on web server?

5. Explain concept of Parking a website.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 43 | 53
 ASSIGNMENT NO. :07

AIM: To apply HCI to real life use cases.

Problem statement:
Students are expected to evaluate minimum of two products / software
interface against known HCI evaluation.
Evaluate UI designed for CMS assignment using Nielsen’s
Heuristic evaluation technique
Nielsen's heuristics Rules:
1) Visibility of system status: ...
2) Match between system and the real world: ...
3) User control and freedom: ...
4) Consistency and standards: ...
5) Error prevention: ...
6) Recognition rather than recall: ...
7) Flexibility and efficiency of use: ...
8) Aesthetic and minimalist design:
9) Help users recognize, diagnose, and recover from errors:
10) Help and documentation:

Evaluate any UI / product using Ben Shneiderman’s eight golden

rules for interface design.
Shneiderman's Eight Golden Rules of Interface Design
1. Strive for Consistency. ...
2. Enable Frequent Users to Use Shortcuts. ...
3. Offer Informative Feedback. ...
4. Design Dialog to Yield Closure. ...
5. Offer Simple Error Handling. ...
6. Permit Easy Reversal of Actions. ...
7. Support Internal Locus of Control. ...
8. Reduce Short-Term Memory Load.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 44 | 53
 PRE-REQUISITE:

1. Problem Solving and Object-Oriented Technologies

OBJECTIVE:
Evaluation of Interface

THEORY:

Evaluation in HCI
It is difficult to imagine that an interactive product could be designed and
built without any user-focussed evaluations taking place. It is not possible
to pick up a HCI textbook that does not include at least a chapter on the
evaluation of user interfaces. The way in which these usability evaluation
methods are presented and classified varies between authors. In 1994,
Nielsen claimed that there were four basic ways of evaluating user
interfaces; these being
• Automatically
• Empirically
• Formally
• Informally

He went on to suggest that Informal Evaluations

automatic and formal
evaluations were both
problematic, and suggested that
only empirical and informal
methods were really useful
(Nielsen 1994). This has become
the accepted viewpoint in the
usability community. Usability
Evaluation Methods can
generally be described as either
empirical or informal using
Nielsen’s words. The following
table shows a list of Usability
Evaluation methods, categorized
in this way. Empirical Methods
User Walkthrough Heuristic Evaluation
Focus groups Expert reviews

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 45 | 53
 Structured observations Cognitive walkthroughs
Cooperative evaluations Predictive modelling – GOMS
Activity logging Guidelines review
Data logging Consistency inspection
Observations Critical event analysis
Questionnaires Dialogue Error Analysis
Interviews Usability testing
Controlled user tests
Physiological data analysis

Different authors divide evaluation in different ways. In User Interface

Design, they are broken into formative and summative methods (Le Peuple
and Scane 2003). Formative evaluations take place early in the design
process and the results of these evaluations inform the later design.
(Shneiderman 1998)divides evaluation by considering who the evaluator is.
This results in expert reviews and novice reviews. (Faulkner 1998)
compares analytical and statistical methods. In John Carrolls design,, the
issues of evaluation of learner centred interfaces is touched on.

How Evaluation methods are evaluated

Given the large number of methods available, and the many different ways
of classifying them, it can be difficult to know which methods should be
used. There is an abundance of literature on the evaluation of evaluation
methods. Work by (Nielsen and Phillips 1993) focussed on GOMS,
Heuristics and User testing. These were used with three different views of
the design, cold, warm and hot. The cold testing took place with just a
written specification, the warm test was carried out with a limited time on
a prototype (about an hour), and for the hot test, testers could play on the
prototype for as long as they wanted. The user testing activity was only
used with the end product. It was a within subjects design and subjects
were allowed to practice until they plateau-ed. They had a sequence of tasks
to do during which error messages and feedback were given and this
activity was followed by a subjective satisfaction questionnaire.
The findings were that the estimates between experts doing GOMS and
Heuristic evaluations were very varied. This suggested that it is best to not
rely on a single inspection. Other authors have made similar observations.
(REFS) The cost of a heuristic evaluation with a hot view of the design was
costlier than the user test and it was remarked that unless the product is
unstable, or users are unavailable, the user test was preferred at this stage.
(Savage 1996) compared expert reviews, user reviews and user testing. In
this study, expert reviews were defined to be inspection methods carried

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 46 | 53
out by human factors specialists. These included heuristic evaluations,
cognitive and pluralistic walkthroughs, and consistency and standards
inspections. The usability tests were conducted in a role-play interaction
using a talk aloud session. User reviews involved potential end users in
viewing slide shows of the product and completing questionnaires and
engaging in group discussion. Results from this study were that expert
reviews tended to inform user interface issues that needed more research
with end users; the other two methods flagged up design issues. Heuristic
evaluations and user tests have been shown in some studies to identify
discrete sets of usability problems (Law and Hvannberg 2002).
In industry, user testing, where users are brought into a lab and asked to
think aloud while performing tasks, and are later questioned about their
experience of the software, is the most widely used technique (Nielsen and
Mack 1994). Cognitive walkthroughs (Wharton, Rieman et al. 1994),
Heuristic Evaluations (Nielsen 1994) and GOMS (Card, Moran et al. 1983)
are all more economical as they do not require running a prototype or
actual users. Empirical methods rely on the availability of real users to test
the interface, whereas informal evaluations rely on the skill and experience
of the evaluator. The recommended number of evaluators for a heuristic
evaluation is 3 – 5 and Nielsen has claimed that five subjects are enough
for a usability test as well. In some instances where users are scarce, users
may need to be saved for a user test, thus forcing the need for expert
reviews. (Nielsen 1994)
However, (John 1996) points out that there are many questions that remain
about all these techniques including
• Is the technique real world enough?
• Does it find faults and fixes, or just faults?
• When in the development process should it be used?
• How does it fare in a cost benefit analysis?
• How can techniques be best used together?
• What are the costs of learning a new technique?

Designing an Evaluation Strategy

Determinants (Shneiderman 1998)
• Stage of design
• Novelty of project
• Number of expected users
• Criticality of the interface
• Costs of product and finances available for testing
• Time available
• Experience of the design and evaluation team

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 47 | 53
It is possible to simplify these into four stages; these being.
• Purpose of the product – users would be defined here
• Availability of resources
• Stage of the project
• Purpose of the evaluation

These dimensions are described in the following section

Purpose of Evaluation
The Evaluation will have its’ own purpose, it may be to
• Predict problems
• Discover problems
• Evaluate against another product
This may change over a product design lifecycle. It is possible that the
evaluator may want one evaluation to cover all three aspects.

1) Strive for consistency:

Example: Consistent colors and fonts
Explanation: Consistent colours and fonts can be seen on google pay
application. The icons are arranged in a proper fashion to make the

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 48 | 53
user experience convenient.

2) Enable frequent users to use shortcuts:

Example: QR Scanner
Explanation: QR scanner can be directly accessed from home page
instead of going to new payment->upi/QR->QR code scanner

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 49 | 53
3) Offer Informative Feedback:
Example: Status
Explanation: When a payment is done or received the status of payment
is displayed below the amount.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 50 | 53
4) Design Dialog to Yield Closure:
Example: Check after successful transaction
Explanation: After the amount has been successfully transacted
from the account a blue tick pops up with a notification sound
indicating that the operation was successful.

5) Offer error prevention and simple error handling: Example:

If the UPI ID holder does not accept payment request

Explanation: While transacting money if the given UPI ID is not accepting

requests then bank server unavailable error shows up.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 51 | 53
6) Permit easy reversal of actions:
Example: Blocking and Unblocking
Explanation: User can block any contact and can unblock it again.

7) Support internal locus of control:

Example: Messaging
Explanation: If a user turns off messaging he will still receive the payment
regarding updates.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 52 | 53
8) Reduce Short-Term Memory Load:
Example: Transaction History
Explanation: Transaction history is properly maintained to keep a
Track of payments made making it convenient for user.

Conclusion: Thus we have evaluated user-interface design using HCI

evaluation Techniques.

D e p a r t m e n t o f I n f o r m a t i o n T e c h n o l o g y P a g e 53 | 53