Information Technology, JIT, Nashik Human Computer Interaction Lab

Savitribai Phule Pune University, Pune

Third Year Information Technology (2019

Course)

314447: Human Computer Interaction

Laboratory Manual
Information Technology, JIT, Nashik Human Computer Interaction Lab

Table of Contents

Assignment No. Content Page No.

Syllabus 3
1 Identify and observe bad designs 6
2 The Jugad 11
3 Feedback and Constraints 16
4 Prototype and Wireframe 21
5 CSS 26
6 CMS Tool 32
7 Evaluation of Interface 39
Information Technology, JIT, Nashik Human Computer Interaction Lab
Savitribai Phule Pune University, Pune
Third Year Information Technology (2019 Course) Subject
Code : Human Computer Interaction Lab
Teaching Scheme: Credit Scheme:01 Examination Scheme:
Practical (PR): 02 hrs/week OR : 50 Marks

Prerequisites: 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.
Information Technology, PVG, Nashik Human Computer Interaction Lab
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: CO 1,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
Information Technology, JIT, Nashik Human Computer Interaction Lab
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 –

i. Types of users going to use (age, experience, environmental conditions during use , etc)
ii. Minimum 3 scenarios of use
iii. Create paper-based prototypes for scenarios
iv. 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 chosen in assignment no. 4.
Apply CSS properties Border, margins, Padding, Navigation, dropdown list to page

Group C: CO 5,6
6. 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.

7. 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
Information Technology, JIT, Nashik Human Computer Interaction Lab
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 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

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.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Issue: Many public doors have handles that

suggest pulling but need to be pushed to
open, or vice versa. This is a common issue in
restaurants, offices, or malls.
Why it’s bad: Users frequently make the
wrong movement when approaching the
door, leading to confusion and frustration.
Improvement suggestion: Use clear
affordances such as a flat plate for push doors
and a handle for pull doors, or include visual
cues like “push” and “pull” labels.

Issue: In some elevators, the buttons are

not arranged in numerical order or the
ground floor button is placed in an unusual
spot (e.g., next to the last floor instead of at
the bottom).
Why it’s bad: This makes it hard for users
to quickly locate the button they need,
especially in a high-traffic environment like
an office building or mall.
Improvement suggestion: Ensure a
logical button layout, such as arranging the
numbers sequentially, and placing
commonly used buttons like the ground
floor at an intuitive location.

Issue: Many stovetops have poorly labelled

knobs, making it unclear which knob
controls which burner. Often, the layout of
the knobs does not match the arrangement
of the burners.
Why it’s bad: This can lead to confusion
and potential safety issues, especially when
the wrong burner is turned on.
Improvement suggestion: Use a layout
where each knob is clearly aligned with
the corresponding burner, and label each
knob with intuitive symbols or icons.
Information Technology, JIT, Nashik Human Computer Interaction Lab
Issue: Some public trash cans have very
narrow openings, making it difficult to
throw away larger items like food containers
or coffee cups. This is common in parks,
streets, and public buildings.
Why it’s bad: Users are forced to either
struggle to fit their trash through the
opening or end up leaving their trash on top
of the bin or nearby, creating litter.
Improvement suggestion: Widen the
openings to accommodate a variety of trash
sizes, and ensure the trash can design
encourages proper disposal.

Issue: Some bathroom sinks have faucets

where the water flow is too close to the edge
of the sink. Users have to keep their hands
awkwardly near the rim, causing splashing
and discomfort.

Why it’s bad: The design makes it difficult

to wash hands comfortably without making
a mess.
Improvement suggestion: The faucet
should be positioned so the water flows
toward the center of the sink, allowing
enough space for handwashing.

Issue: A staircase has steps that are

uneven in height. Some steps are slightly
taller or shorter than others, causing
people to trip or stumble when using the
stairs.
Why it’s bad: It creates a safety hazard
and increases the risk of accidents.
Improvement suggestion: Ensure all
steps are uniform in height and width to
provide a safe and predictable walking
pattern.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Why it’s bad: Overloaded with unnecessary

buttons, making it difficult to find basic
functions like volume or channel control.
Often lacks clear grouping of features.

Issue: The microwave has an overwhelming

number of buttons with unclear or poorly
labeled functions (e.g., cryptic abbreviations
like “Conv Def”).

Why it’s bad: It makes it hard for users to

perform simple tasks like setting cooking
time or reheating.

Improvement suggestion: Simplify the

control panel, highlighting the most-used
functions and labeling buttons with intuitive
symbols.

Issue: The parking machine has too many

buttons, unclear instructions, and lacks a
touchscreen or simplified payment options.

Why it’s bad: Users often get confused

about how to pay or which button to press,
leading to delays.
Improvement suggestion: Use a simpler
interface with clear touchpoints and
streamlined payment options (e.g.,
touchscreens or contactless payment).
 Information Technology, JIT, Nashik Human Computer Interaction Lab

Example: Overhead bins that are too small

or difficult to reach.

Design Aspect: Poor sizing or placement.

Why It’s Bad: Passengers may struggle to
store or retrieve luggage, causing delays and
discomfort.

Example: Traffic signs that are hidden by

tree branches or other obstructions, or are
too small for drivers to see.

Explanation: Poor visibility can lead to

dangerous situations, as drivers may miss
important information like stop signs or
speed limits. Signs should be placed clearly
and be of adequate size for safe driving.

Example: Menus filled with too many items

and poorly organized categories.

Explanation: A cluttered menu can

overwhelm customers and make it difficult
for them to decide what to order, potentially
leading to longer wait times and
dissatisfaction. A well-organized menu with
clear categories enhances decision-making.

Outcome:
Students will discuss their findings, focusing on how each bad design violates key design principles such as usability,
intuitiveness, and accessibility. Possible improvements and the impact of bad design on the user experience will also
be analysed.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Assignment No:2
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.
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.

Jugad: A plastic bottle is cut in half, and the

top half is used as a funnel to pour liquids or
grains into containers with small openings.
Why it’s creative: The plastic bottle was
not designed to be a funnel, but cutting it
transforms it into a handy kitchen tool.
Location example: This can often be found
in households, especially in kitchens.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Jugad: Farmers hang old, reflective CDs

from trees or posts in fields to scare away
birds from crops.
Why it’s creative: CDs are originally used
for data storage, but their reflective surface
is creatively repurposed to protect crops by
scaring birds with the light reflections.
Location example: This is common in
agricultural settings.

Jugad: An old shoe box is used to store and

organize cables and chargers by cutting
holes into the sides for easy access to the
cables.

Why it’s creative: A shoe box is meant for

holding shoes, but it’s reused as a budget-
friendly cable management solution to avoid
tangles.

Location example: Homes and offices

often have this type of creative cable storage
solution.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Jugad: An old, worn-out T-shirt is cut up and

used as a cleaning rag for dusting or cleaning
surfaces.
Why it’s creative: Instead of discarding old
clothing, people repurpose the fabric for
cleaning, extending its usefulness.
Location example: This practice is common
in homes where old clothes are repurposed.

Jugad: A regular backpack is used to carry

groceries when shopping bags are unavailable or
too flimsy.

Why it’s creative: A backpack is usually meant

for carrying books or personal items, but its
durability makes it a handy substitute for
shopping bags.

Location example: Urban environments where

people walk or cycle to grocery stores.

Jugad: A toothbrush holder, which has

multiple small compartments for holding
toothbrushes, is repurposed as a pen or
pencil holder.

Why it’s creative: Instead of buying a

separate stationery organizer, people
repurpose an existing household item to hold
office supplies.

Location example: Common in home offices

or study areas.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Jugad: Old plastic containers (like yogurt

or ice cream tubs) are used as planters for
small plants or herbs.

Why It’s Creative: Instead of purchasing

new planters, these containers provide an
inexpensive and eco-friendly way to
garden.

Location Example: Commonly found in

urban homes or balconies.

Man uses steam from the pressure cooker

to Clean Veggies .

One AC, Two Rooms

That's how you cool two rooms with one
AC.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Eco-Friendly Parking
Someone recycled their plastic water tank
into a parking space.

Social Distancing Bike

A man in Agartala designed an electric
motorcycle to highlight the importance of
social distancing.

Thermocol shoes to walk on water

In India, waterlogged roads and floods are

common. Especially in rural areas, during
the rainy season, the movement of people
gets restricted.To help people walk on
water during floods, Dwarka Prasad
Chaurasia—reportedly now in his 90s—
invented "Water Walking Shoes" in the
1980s.The shoes—comprising two
thermocol floats attached to a rexine
fabric—are so useful that people use them
during floods even today.
 Information Technology, JIT, Nashik Human Computer Interaction Lab

Jugad: Empty egg cartons are used to start

seedlings by filling each compartment with
soil and seeds.

Why It’s Creative: Egg cartons are not

intended for gardening, but they make
effective seed starters and are
biodegradable.

Location Example: Commonly found in

home gardens or community gardening
projects.

Outcome:
Students will analyze and discuss their findings, focusing on how everyday items were repurposed in a creative way.
The emphasis will be on recognizing the practicality of Jugad solutions and how they meet immediate needs despite
limited resources.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Assignment No:3
Title :- Feedback and Constraints
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.

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.

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.
Information Technology, JIT, Nashik Human Computer Interaction Lab
Examples with Explanation
Example Explanation

Washing Machine:

Feedback: The washing machine displays

the remaining time for a wash cycle and
indicates when it’s finished by beeping or
showing a "Complete" message on the
display.

Constraint: Users cannot start the machine

if the door is not properly closed. This
constraint prevents water from leaking or
damaging the machine.

Microwave Oven:

Feedback: When a cooking cycle is

complete, the microwave beeps, and the
display shows "End" or flashes the
remaining time. Some models also have a
light that turns on while cooking.

Constraint: The microwave will not start if

the door isn’t fully shut. Additionally, it has
power and time limits to prevent
overcooking or overheating.

Electric Kettle:

Feedback: The kettle provides feedback

through a light indicator that turns on when
it is heating and turns off once the water has
boiled.

Constraint: The kettle has an automatic

shut-off feature that prevents it from
continuing to heat once the water boils,
ensuring safety and preventing damage.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Automatic Soap Dispenser:

Feedback: The dispenser releases soap
automatically when the user places their
hand under the sensor, and a small LED light
or sound confirms that the action has been
successful.
Constraint: It dispenses only a limited
amount of soap per use, preventing wastage
or accidental overuse.

ATM Machine:

Feedback: After inserting the ATM card, the

screen displays prompts for entering the
PIN, choosing transaction options, and
confirming the transaction status (e.g., cash
withdrawal or balance inquiry). Audio beeps
confirm key presses.

Constraint: The ATM limits the number of

incorrect PIN attempts before locking the
account temporarily to prevent
unauthorized access.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Feedback:
The thermostat displays the current
temperature and shows a change (in color
or a symbol) when adjusting the
temperature setting. It might also provide
alerts for when the temperature reaches
the set point.

Constraint:
The thermostat may limit temperature
adjustments within a certain range (e.g.,
minimum and maximum settings) to
avoid excessive energy use.

Feedback:
The GPS provides auditory prompts (like
"Turn left in 100 meters") and visual
directions on the screen, showing the
current route and estimated time of
arrival.

Constraint:
The system prevents route changes if the
user is not on a road, limiting navigation
to valid routes. Additionally, it may not
allow entering new destinations while
driving.

Feedback:
The scale displays the weight
measurement on a digital screen, often
with an indicator light that turns green
when the weight is stable.

Constraint:
The scale may have a maximum weight
limit and will not display readings if the
weight exceeds this limit, ensuring
accuracy and preventing damage.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Feedback:
The coffee maker may have lights that
indicate when it’s brewing, and a beep or
light to signal when the coffee is ready.

Constraint:
It may not allow the brew cycle to start if
the water reservoir is empty or the carafe
is not in place, preventing spills or
equipment damage.

Feedback:
The console provides on-screen
notifications for updates, errors, or
successful downloads, as well as audio
cues when buttons are pressed.

Constraint:
Users cannot start a game unless all
necessary updates are installed,
preventing compatibility issues.

Feedback:
The toothbrush typically has a timer that
signals every 30 seconds to encourage
users to switch quadrants, along with
lights that indicate battery status.

Constraint:
It may stop working if the charging base is
not connected or if the battery is fully
depleted, ensuring it functions properly
only when charged.

Conclusion:
Identified and analyzed interfaces and products which gives feedback and have some constraints.
Information Technology, JIT, Nashik Human Computer Interaction Lab

Assignment No:4
Aim: Prototype and Wireframe

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.

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.
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
Information Technology, JIT, Nashik Human Computer Interaction Lab

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

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?

Wireframing 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.
Information Technology, JIT, Nashik Human Computer Interaction Lab

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.

Examples of a Wireframe:

1. Blog web

2. E-commerce web
 Information Technology, JIT, Nashik Human Computer Interaction Lab

3. Portfolio web

Conclusion:
Prototypes are drawn and Wireframes are created using software tools
Information Technology, JIT, Nashik Human Computer Interaction Lab

Assignment No:5
Aim: 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.

Theory:
CSS

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

Types of CSS

1. External style sheet

2. Embedded styles
3. Inline styles

• 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>
Information Technology, JIT, Nashik Human Computer Interaction Lab
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:

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.

Information Technology, JIT, Nashik Human Computer Interaction Lab

Property Description

border all the individual border properties in one property.

This is called a shorthand property.

Border- none| dotted | dashed | solid | double | groove | ridge | inset | outset
style

border- is used to set the width of the border. The width is 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
Information Technology, JIT, Nashik Human Computer Interaction Lab

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. Default value is 0px
length

% Specifies a margin in percent of the width of the

containing element
Specifies that the margin should be inherited from
inherit the
parent element

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”);
Information Technology, JIT, Nashik Human Computer Interaction Lab

list-style-position Specifies if the list-item markers should appear inside 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

Conclusion
Various CSS properties have been studied and used for creation of interactive web page.

Expected sample Outputs :

1. Blog Web Page

Information Technology, JIT, Nashik Human Computer Interaction Lab

2. E-commerce Web page

3. Portfolio Web page

Information Technology, JIT, Nashik Human Computer Interaction Lab

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?
Information Technology, JIT, Nashik Human Computer Interaction Lab
Assignment No:6
Aim: CMS tool

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.

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:

• 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 through out 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.
Information Technology, JIT, Nashik Human Computer Interaction Lab
• 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.

Few CMS Development tools are wordpress, Drupal, Jhoomla.

Wordpress
WordPress 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
Information Technology, JIT, Nashik Human Computer Interaction Lab

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.

4. Write ‘photography’ in the search bar and hit the enter button.
Information Technology, JIT, Nashik Human Computer Interaction Lab

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

6. You need to click on the Install button from Patio theme and then click on the Activate link from the
next screen.
Information Technology, JIT, Nashik Human Computer Interaction Lab

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.
Information Technology, JIT, Nashik Human Computer Interaction Lab

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
WordPress.

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
wordpress.
Information Technology, JIT, Nashik Human Computer Interaction Lab

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 Wordpress 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.
Information Technology, JIT, Nashik Human Computer Interaction Lab
Assignment No:7
Aim: Evaluation of Interface

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.

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
Information Technology, JIT, Nashik Human Computer Interaction Lab
He went on to suggest that automatic and Informal Evaluations
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
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.
Information Technology, JIT, Nashik Human Computer Interaction Lab

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 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

It is possible to simplify these into four stages; these being.

• Purpose of the product – users would be defined here
Information Technology, JIT, Nashik Human Computer Interaction Lab
• 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.
 Information Technology, JIT, Nashik Human Computer Interaction Lab

1) Strive for consistency:

Example: Amazon Mobile App –

Consistent use of icons and colors throughout the app. For example, the cart icon is always in the top-right corner,
and the search bar remains at the top across different sections.

Explanation: Maintaining consistent UI elements across all pages improves the user’s ability to predict
functionality, making the app easy to navigate.
Information Technology, JIT, Nashik Human Computer Interaction Lab

2) Enable frequent users to use shortcuts:

Evaluation: Amazon provides shortcuts like the “Trending Deals” or “Blockbuster deals” section, allowing frequent
users to quickly purchase items without going through the full checkout process.

Explanation: These shortcuts streamline the shopping experience for regular users, allowing for quicker
transactions and improving efficiency.
Information Technology, JIT, Nashik Human Computer Interaction Lab

3) Offer Informative Feedback:

Evaluation: After adding items to the cart, the app shows a confirmation pop-up with options to
view the cart or continue shopping. Additionally, users receive notifications regarding order
status and shipping updates.

Explanation: This feedback reassures users about their actions and keeps them informed, reducing
uncertainty during the shopping process.
Information Technology, JIT, Nashik Human Computer Interaction Lab

4) Design Dialog to Yield Closure:

 Evaluation: Upon completing a purchase, users receive a confirmation screen with order details and an
option to track their order.

 Explanation: This closure helps users feel satisfied with their transaction, knowing that their order has
been successfully placed and they have options for further action.
Information Technology, JIT, Nashik Human Computer Interaction Lab

5) Offer error prevention and simple error handling:

Evaluation: When users attempt to check out without providing necessary information (like shipping address
or payment details), the app highlights the required fields and displays error messages.

Explanation: This proactive error handling guides users to correct their mistakes, preventing frustration and
ensuring a smoother shopping experience.
Information Technology, JIT, Nashik Human Computer Interaction Lab

6) Permit easy reversal of actions:

Evaluation: Users can easily remove items from their cart or undo actions, like changing their mind about a
purchase, with a straightforward “Remove” button.

Explanation: The ability to reverse actions instills confidence in users, allowing them to make changes
without fear of irreversible mistakes.
Information Technology, JIT, Nashik Human Computer Interaction Lab

7) Support internal locus of control:

Evaluation: The app allows users to customize their experience, such as managing notifications, setting
preferences for product recommendations, and creating wish lists.

Explanation: Empowering users to control their shopping experience enhances satisfaction and
encourages more frequent use of the app.
Information Technology, JIT, Nashik Human Computer Interaction Lab

8) Reduce Short-Term Memory Load:

 Evaluation: The app displays recommended products, order history, and personalized
suggestions on the home screen, reducing the need for users to remember past actions.

 Explanation: By making this information readily available, users can easily make informed
decisions without having to recall previous interactions.