(Permanently Affiliated to University of Mumbai)

Department of Computer Engineering

Experiment No 1
Aim: Design a Mobile app/ Website that can teach mathematics to children of 4-5
years age in schools in rural/ urban sector.

Theory:

The journey into the world of interface design and the screen design process must
begin with an understanding of the system user, the most important part of any
computer system. It is the user whose needs a system is built to serve.
Understanding people and what they do is a difficult and often undervalued
process but very critical because of the gap in knowledge, skills, and attitudes
existing between system users and developers that build them. To create a truly
usable system, the designer must always do the following:
 Understand how people interact with computers.
 Understand the human characteristics important in design.
 Identify the user’s level of knowledge and experience.
 Identify the characteristics of the user’s needs, tasks, and jobs.
 Identify the user’s psychological characteristics.
 Identify the user’s physical characteristics.
 Employ recommended methods for gaining understanding of users.

Human Machine Interactions Lab | 1

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
Different Levels of Clients
 The most important thing is to understand who are the users of our
system/product?
 To build system/product to meet the different levels of user
o Beginner
o Intermediate
o Expert

We can divide the users’ skill spectrum into three parts. The first part comprises
beginners, the middle is where so-called intermediates belong, and the third part
is for experts.
To teach mathematics for children of 4 to 5 years of age we need to understand
children psychology, analyze children behavior, their preferences, interests, etc.
To design interface for children, we can make use of bright colors, pictorial
representation, animations, sound, and cartoon characters. For rural area children
we can also provide option of regional language in GUI.
Human Machine Interactions Lab | 2
 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
Output:

Conclusion: Thus we have implemented HMI System to teach mathematics to

children of 4-5 years age in schools in rural/ urban sector.
Human Machine Interactions Lab | 3
 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering

Experiment No 2
Aim: Design a Mobile app/ Website for e-commerce.

Theory:
A user interface, commonly referred to as a “UI,” is the user-facing design of a
webpage or application. User-friendly UI is important for ecommerce merchants
to provide intuitive navigation — and a pleasant shopping experience — for
customers.

By definition, "UI" comprises everything on a webpage.

 Navigation options
 User input options
 Help options

Human Machine Interactions Lab | 1

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
User input options are the elements of the website that the user actually inputs
from his or her end. Whenever a user clicks something on the ecommerce site, it
counts as a user input. Examples of such elements are drop-down menus, buttons,
drag and drops, etc. Such elements empower users to travel to relevant portions of
the ecommerce site in a fluid manner. It's imperative that the user inputs are
properly labeled so users can get to the desired section of the site in a timely
manner.

Different ways to offer navigation

Navigation options consist of elements that help users figure out how to get to a
certain part of the website. They include:

 Universal menus towards the top or left-hand side of all pages

 Search bar so users can navigate directly towards specific product or
information pages
 Help options to assist those who become lost or don't understand how to
perform an action on the site or reach a certain section of the site.
How to improve UI and increase conversion
 Call to action: Every page on an ecommerce website should have a clear
call to action that sheds light on a desired product or category of product.
Alternately, an image that highlights the merchant's brand and purpose can
be used.

 Product page images: Every product page aims to make online shoppers feel
like they truly understand the product they are looking at. One study found
that 81 percent of shoppers look for their desired item(s) online before
making a purchase, giving web stores the opportunity to provide
info and make a sale. Product images that portray inventory in a positive
light will encourage these “e-window shoppers” to buy online and not feel
compelled to see and feel in-store.

Human Machine Interactions Lab | 2

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
 Related products: Present similar products to those that the ecommerce site
particularly needs/desires to sell. This is an effective online merchandising
technique if the related products are displayed in a straightforward but artful
manner.

 Customer ratings: Do not be afraid to display customer ratings for products

to highlight their strengths and weaknesses. This technique allows the
customer to get an idea of what the product really provides.

 Site navigation: A store's products should be distinguished from one another

with sensible categories and further divided into subcategories. Such a
method of organization will help customers find desirable products in as
little time as possible. Intuitive experience should always be the first goal
for ecommerce merchants, with the aim of increasing sales and conversion
as a result.

 Optimize for mobile devices: Those who use mobile devices are 5 times
more inclined to abandon a website if it is not optimized for such devices.

Key Points:
1. Make the branding instantly visible
2. Set clear and easy navigation as the core task
3. Check the scannability of the page or screen
4. Minimize user’s efforts whenever its possible
5. Don’t go too far experimenting
6. Use landing pages for specific purposes
7. Make the homepage informative
8. Apply high-quality images giving the message
9. Think about promotional videos of different kinds
10. Let the user contact the duty holders from any point of interaction
11. Add gamification

Human Machine Interactions Lab | 3

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering

Output:

Conclusion: Thus we have successfully created User Interface design for an e-

commerce application.

Human Machine Interactions Lab | 4

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering

Experiment No 3
Aim: Design an ATM machine/ KIOSK screen design for rural people.

Theory:
A bank customer is able to access his or her account using an automatic teller
machine. To be able to use an ATM a customer must first register an account
number and a passcode number. The customer’s information is then added to a list
of registered users. The ATM user interface consists of a keypad, a display
window, a selection of choice options, and a help screen that displays instructions
for completing an ATM transaction. Users are asked to enter their account number
from the keypad followed by their passcode. If the customer is a valid user,
instructions are given for choosing a transaction. During a transaction, the user’s
account is accessed and updated. Upon completion of a transaction, the user may
elect to make another transaction or to quit.

Human Machine Interactions Lab | 1

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
There are lots of differences between designing an ATM interface and other kinds
of screen UI, including both web and mobile.

Despite our rich experience in UI design, we had to dive deeper into this field.
The target is to create a solution that takes into account machines position,
technical restrictions, and other aspects. And, what is really important, that is easy
to use for people with color deficiency or vision impairment.

Any user can face some difficulties with screens depending on the time of the day,
illumination, or ATM position.

Moreover, sometimes it’s really important to get a service rapidly. So our

challenge is to take all these aspects into account to create simple and automatic
scenarios of interactions.

UI redesign

The original interface had dozens of problems, including awkward colors and
poor layout. In general, it looked outdated.

What you saw on those displays reminded more technical screens or Windows
from the early 2000s, than what we all are used to deal with every day, like
smartphones.
Human Machine Interactions Lab | 2
 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
Contrast first

We worked out a color scheme with high contrast. The main reason for that is to
make data on screens easy to read regardless of a luminance level.

Universal colors

Banking Self-Service System provides services for different banks. We created a

neutral and universal color scheme that fits any corporate style of banks.

High level of accessibility

Text size and contrast for the navigation elements comply with AAA level of Web
Content Accessibility Guidelines (WCAG 2.0).

Adjusting colors for people with color deficiency and vision impairment

According to the Technical Code, all the confirming actions has to be indicated in
green color and all the canceling — in red. But there are people who can’t
distinguish these colors correctly.

Human Machine Interactions Lab | 3

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
Output:

Conclusion: Thus we have designed an ATM KIOSK screen design.

Human Machine Interactions Lab | 4
 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering

EXPERIMENT NO: 4
Aim: To design a Mobile App to get an experience for passengers whose flight is delayed.
Theory:
Menus
• The structures of menus: Menus vary in form from very simple to very complex. They
may range from small dialog boxes requesting the user to choose between one of two
alternatives, to hierarchical tree schemes with many branches and levels of depth. A
menu’s structure defines the amount of control given to the user in performing a task.
The most common structures are the following.
Single Menus: In this simplest form of menu, a single screen or window is presented
to seek the user’s input or request an action to be performed.
Sequential Linear Menus: Sequential linear menus are presented on a series of screens
possessing only one path.
Simultaneous Menus: Instead of being presented on separate screens, all menu options
are available simultaneously.
Hierarchical or Sequential Menus: When many relationships exist between menu
alternatives, and some menu options are only appropriate depending upon a previous
menu selection, a hierarchical structure is the best solution.
Connected Menus: Connected menus are networks of menus all interconnected in
some manner.
Event-Trapping Menus: Event-trapping menus provide an ever-present background
of control over the system’s state and parameters while the user is working on a
foreground task.

• The functions of menus: From the user’s perspective, a menu can be used to perform
several functions: To navigate to a new menu, to execute an action or procedure, to
display information, or to input data or parameters.

• The content of menus: A menu consists of four elements: its context, its title, its choice
descriptions, and its completion instructions.

• Web site navigation and links: Navigation refers to the method people use to find
what they want in a Web site.
Orientation: One’s current location relative to nearby objects and the destination must
be determined. This is called orientation.
Route monitoring: The chosen route must be monitored to confirm that it is leading to
the proper destination.
Destination recognition: The destination, when it is found, must be easily recognized.

• Web site navigation elements: A Web site contains at least three levels of navigation
elements: global or site-wide; local and specific; and minor or footnote. Clearly
differentiate these navigation elements from one another and locate them consistently
from page to page.

Human Machine Interaction | 1

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
Global: Global or site-wide navigation elements provide access to the site’s total scope
or categories of available information.
Category or topical: Local, specific and contextual navigation elements within the
category or topical area being presented are typically displayed in a columnar array
down the left page side.
Embedded links: Phrases or embedded links will be provided within the contents area
of a Web page.
Minor: Minor illustrative, parenthetical, or footnote links can be arrayed horizontally
at the page bottom.

• Type of menus:
Menu Bar: The highest-level graphical system menu is commonly called the menu bar.
A menu bar consists of a collection of descriptions that serve as headings or titles for a
series of actions on an associated pull-down menu.
Pull-down Menu: Pull-downs are first-level menus used to provide access to common
and frequently used application actions that take place on a wide variety of different
windows.

Windows
• A window’s characteristics:
A name or title, allowing it to be identified.
A size in height and width (which can vary).
A state, accessible or active, or not accessible. (Only active windows can have their contents
altered.)
Visibility — the portion that can be seen. (A window may be partially or fully hidden behind
another window, or the information within a window may extend beyond the window’s display
area.)
Management capabilities, methods for manipulation of the window on the screen.
Its highlight, that is, the part that is selected.
The function, task, or application to which it is dedicated.

• A window’s components:
Frame: A window will have a frame or border, usually rectangular in shape, to define its
boundaries and distinguish it from other windows.
Title Bar: The title bar is the top edge of the window, inside its border and extending its entire
width. This title bar is also referred to by some platforms as the caption, caption bar, or title
area.
Title Bar Icon: Located at the left corner of the title bar in a primary window, this button is
used in Windows to retrieve a pull-down menu of commands that apply to the object in the
window. It is a 16×16 version of the icon of the object being viewed.
Window Sizing Buttons: Located at the right corner of the title bar, these buttons are used to
manipulate the size of a window.

• A window’s presentation style: The presentation style of a window refers to its spatial
relationship to other windows. There are two basic styles, commonly called tiled or
overlapping.

Human Machine Interaction | 2

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
Tiled Windows: Tiled windows, illustrated in Figure 5.4, derive their name from the common
floor or wall tile. Tiled windows appear in one plane on the screen and expand or contract to
fill up the display surface, as needed.
Overlapping Windows: Overlapping windows may be placed on top of one another like
papers on a desk. They possess a three-dimensional quality, appearing to lie on different planes.
Cascading Windows: A special type of overlapping window has the windows automatically
arranged in a regular progression. Each window is slightly offset from others.

• The types of windows available: Defining standard window types is again difficult
across platforms because of the varying terminology and definitions used by different
windowing systems, and changes in terminology for new versions of systems.
Primary Windows: The primary window is the first one that appears on a screen when an
activity or action is started. It is required for every function or application, possessing a menu
bar and some basic action controls, as previously described.
Secondary Windows: Secondary windows are supplemental windows. Secondary windows
may be dependent upon a primary window or displayed independently of the primary window.
They structurally resemble a primary window, possessing some of the same action controls
(Close button) and possibly what’s this? Button.

• Web system frames and pop-up windows: Historically, the Web is essentially a
single page (or, by analogy, a single window) entity. While providing significant
interface benefits, it is also a reversal of the interface evolution process that led from
single-screen technology to windowing. To counteract this shortcoming, frames were
created. A frame is an independent pane of information presented in a Web page, or,
again by analogy, as multiple windows. Frames, however, are presented as tiled, with
no overlapping capability. The interaction richness, support, and contextual cues
provided by overlapping windows are lacking. Frames, then, allow the displaying of
multiple documents on a single Web page. These multiple documents can be
independently viewed, scrolled, and updated.

Screen Based Controls: Screen Based controls, often simply called controls and sometimes
called widgets. By definitions, they are graphic objects that represent the properties or
operations of other objects. Different types of Screen-based controls are as explained below:
1. Operable Controls: Operable controls are those that permit the entry,
selection,changing, or editing of a particular value, or cause a command to be
performed. Buttons: A square or rectangular-shaped control with a label inside that
indicates action to be accomplished. The label may consist of text, graphics, or both.
Types include command buttons and toolbars.
2. Text entry/read-only: We have two kinds of controls in the text-entry category: entry
boxes and read only boxes.
For entry boxes: - Place a colon (:) immediately following the caption. For
single fields, caption can be located in front of upper-left corner of the
box. For multiple fields, position the caption upper left of the box.
For read-only boxes: - If the data field is long or about the same length,
center the caption above the displayed text box. If the data is
alphanumeric, short, or quite variable in length, left-justify the caption
above the displayed. If the data field is numeric and variable in length,
right-justify the caption above the displayed
3. Selection Controls: A selection control presents on the screen all the

Human Machine Interaction | 3

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
possible alternatives, conditions or choices that may exist for an entity,
property or a value. It includes radio buttons, checkboxes, list boxes, drop-
down/pop-up list boxes, and palettes.
4. Combination Entry/Selection Controls: It is possible for a control to
possess the characteristic of both a text field and a selection field. In this
type of control, information may either be keyed into the field or selected
and placed within it. The types of combination entry/selection fields are
spin boxes, attached combination boxes, and drop-down/pop-up
combination boxes.
5. Presentation controls: - Presentation controls are purely informational.
They provide details about other screen elements or controls or assist in
giving the screen structure. Common Presentation controls are static text
fields, group boxes column headings, tooltips, balloon tips, and progress
indicators.
6. Other Operable controls: Other more specialized operable controls also
exist. Among them are sliders, tabs, date pickers and scroll bars.

• Device Based Controls:

Device-based controls, often called input devices, are the mechanisms through which
people communicate their desires to the system.
Characteristics and capabilities of device-based control: Selecting the proper device-
based control to do the required job is critical to system success. A good fit between user
and control will lead to fast, accurate performance. A poor fit will result in lower
productivity, produce more errors.
Characteristics of Input Devices:
Several specific tasks are performed using today’s systems:
• To point at an object on the screen.
• To select the object or identify it as the focus of attention.
• To drag an object across the screen.
• To draw something free-form on the screen.
• To track or follow a moving object.
• To orient or position an object.
• To enter or manipulate data or information.

Types of Input Devices:

Based on their mechanism:
1. Direct devices: These are operated on the screen itself. Examples include light
pen, finger and voice.
2. Indirect devices: These are operated on locations other than the screen, most often
on desktop. Examples include mouse, trackball and keyboard.
Based on their action:
1. Discrete devices: used to enter individual bits of information — letters, numbers,
or commands.
2. Continuous input devices: operate sequentially in nature— best exemplified by
tasks such as dragging or drawing.
Various input devices include trackball, joystick, graphic tablet, light pen, touch screen,
voice, mouse and keyboard.

Selecting the Proper Device- Based Controls:

Human Machine Interaction | 4

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering
• Provide keyboards for tasks involving
– Heavy text entry and manipulation
– Movement through structured arrays consisting of few discrete objects
• Provide an alternative pointing device for graphical or drawing tasks
– Mouse: pointing, selecting, drawing, and dragging
– Joystick: selecting and tracking
– Trackball: pointing, selecting and tracking
– Touch screen pointing and selecting
– Graphic tablet pointing selecting, drawing, and dragging
• Provide touch screens under the following conditions
– The opportunity for training is minimal
– Targets are large, discrete and spread out
– Frequency of use is low
– Desk space is at a premium
– Little or no text input requirement exists
• Consider user characteristics and preferences
– Provide keyboards for touch typists
– Minimize eye and hand movements between devices

Output:

Human Machine Interaction | 5

 (Permanently Affiliated to University of Mumbai)
Department of Computer Engineering

Conclusion: Thus, we studied basic concepts for providing better user experience and designed
a mobile app to get an experience for passengers whose flight is delayed.

Human Machine Interaction | 6

 Experiment No: 5

Aim: Redesign of a user interface (Suggest and implement changes in

Existing User Interface)
Theory:
The principles of user interface design are intended to improve the quality
of user interface design. The user interface design goals can be refined to
achieve the objective of a good design. They are fundamental to the
design and implementation of all effective interfaces, GUI and Web. These
principles are general characteristics of the interface, and they apply to all
aspects.
They can be described as follows:
1. Aesthetically Pleasing:
i) Provide visual appeal by following these presentation and graphic
design principles.
ii) Use color and graphics effectively and simply.
2. Clarity:
The interface should be visually, conceptually, and linguistically clear,
including Visual elements Functions Metaphors Words and Text.
3. Compatibility:
Provide compatibility with the following:
i) The user
ii) The task and job
iii) The Product Adopt the User’s Perspective
4. Configurability
Permit easy personalization, configuration, and reconfiguration
of settings
5. Comprehensibility:

A system should be easily learned and understood. The flow of actions,

responses, visual presentations, and information should be in a sensible
order that is easy to recollect and place in context.
6. Consistency:
A system should look, act, and operate the same throughout.
7. Control:
The user must control the interaction. Actions should result from explicit
user requests. Actions should be performed quickly. Actions should be
capable of interruption or termination.
8. Directness:
Provide direct ways to accomplish tasks. Available alternatives should be
visible. The effect of actions on objects should be visible.
9. Flexibility:
A system must be sensitive to the differing needs of its users, enabling a
level and type of performance based upon each user's knowledge and skills.
10. Efficiency:
Minimize eye and hand movements, and other control actions.
11. Familiarity:
Employ familiar concepts and use a language that is familiar to the user.
Keep the interface natural, mimicking the user's behavior patterns. Use
real-world metaphors.
12. Forgiveness:
Tolerate and forgive common and unavoidable human errors. Prevent
errors from occurring whenever possible.
14. Recovery:
A system should permit commands or actions to be abolished or reversed.
15. Responsiveness:
The system must rapidly respond to the user's requests.
16. Transparency:
Permit the user to focus on the task or job, without concern for
the mechanics of the interface.
17. Simplicity:
Provide as simple an interface as possible.

Cons of the Original Graphical User Interface:

1) It is designed in 720 resolution.
2) Some contains are repeated which can create confusion and
filling the website unnecessarily

3) Index of the contains of this page is not accessible at any section

of a page user goes to, this creates user pain when the page is
very long

4) There are some page contains arrangement problems

Pros of the Redesigned Graphical User Interface:
1) Designed in 1080 HD with high resolution graphics.
2) Contains are arranged properly so that it is easy for users to navigate

3) Index shifted to the left and fixed so that users can easily view
and navigate to which ever part of the page they want from where
ever they are on that page

4) Repeated contains are removed and arranged properly

Output:
Original Graphical User Interface
Redesigned Web Page-
II K I P£ DIA
 Experiment No:6

Aim: Statistical Graphics and its use in visualization (Expense Tracker).

Theory:

In today’s busy and expensive life, we are in a great rush to make money.
But at the end of the day we broke off. As we are unknowingly spending
money on little and unwanted things. So, we have come over with the idea
to track our earnings. Daily Expense Tracker (DET) aims to help everyone
who are planning to know their expenses and save from it. DTE is a
website in which user can add expenses on daily basis and its table will
get generated and at the end based on user expenses report will be
generated. User can select date range to calculate his/her expenses.

This system is very much useful for House-Wife to control their Income-
expense from Day-to-Day to Yearly Basics. And to keep a watch on their
expense.

Objectives:

The objective of this system are as viz:

• To keep track of daily expenses and budgeting,

• To save money for pre-defined expenses which will help
planning on your future investments

Requirements:

We assure that this system will help its users to manage the cost of their
daily expenditure. It will guide them and aware them about there daily
expenses. It will prove to be helpful for the people who are frustrated with
their daily budget management, irritated because of amount of expenses
and wishes to manage money and to preserve the record of
their daily cost which may be useful to change their way of spending
money. In short, this application will help its users to overcome the
wastage of money.

Output:

Splash Screen Animation (Microinteractions)-

Overview-

Features of this app-

Statistics-
Reminder-

Budget Mode-
 Eood

Hs. 9999

Are you sure?

enlire sheet
Do you want to contin ue?
 Experiment No: 7

Aim: Design appropriate icons pertaining to a given domain.

Theory:

Icons are Pictorial images most often used to represent objects and
actions with which users can interact with. Icons can be Stand alone or
grouped together in a toolbar. Icons can also be used to represent
important information.

Kinds of icons
• Resemblance: An image that looks like what it means.
• Symbolic: An abstract image representing something.
• Exemplar: An image illustrating an example or characteristic of
something.
• Arbitrary: An image completely arbitrary in appearance whose
meaning must be learned.

Characteristics of Icons:
• An icon possesses the technical qualities of syntactic, semantics,
and pragmatics.
– Syntactic refers to an icon’s physical structure.
• Is it square, round, red, green, big, and small?
– Semantics is the icon’s meaning.
• To what does it refer a file, a wastebasket, or some
other object?
– Pragmatics is how the icons are physically produced and
depicted.
• Is the screen resolution sufficient to illustrate the icon
clearly?

Influences on Icon Usability

• Provide icons that are:
– Familiar
– Clear and understandable
– Simple
– Consistent
– Direct
– Efficient
• Also consider the:
– Context in which the icon is used
– Expectations of users
– Complexity of task

Size
• Supply in all standard sizes.

– 16 x 16 pixels
– 32 x 32 pixels
– 48 x 48 pixels

• Use colours from the system palette.

– 16- and 256-color versions

• Minimum sizes for easy selection:

– With stylus or pen: 15 pixels square
– With mouse: 20 pixels square
– With finger: 40 pixels square

Choosing Images
• Use existing icons when available.
• Use images for objects, not actions.
• Use traditional images.
• Consider user cultural and social norms.

Creating Images
• Create familiar and concrete shapes.
• Create visually and conceptually distinct shapes.
• Clearly and simply reflect objects represented, avoiding detail.
• Provide consistency in icon type.
Icon Animation
– Use:
• To provide feedback
• For visual interest
– Types:
• Static(Mail box)
• Dynamic (Pointer & Movement)
– Make it interruptible or independent of user’s primary
interaction.
– Do not use it for decoration.
– Permit it to be turned off by the user.
– For fluid animation, present images at 16 or more frames per
second.

Icon with Audio

• Objects may sound as they touched, dragged, opened, activated
and thrown away.
• This provides feedback that an operation one has asked for has
successfully started.
• Uses:
• About previous and possible interactions.
• Indicating ongoing process and modes.
• Useful for navigation.

Domain: E Library

● Use approved logo assets - Each brand states that you

should only download and use their approved logos and icons.
Don't create your own version.

● Use the correct colour versions - Each brand has specific

colours. For example, Twitter Blue is different to LinkedIn Blue
and Facebook Blue. Use the exact colour for each network.
● Maintain a clear space around the logo - Every brand
guideline asks you to allow a clear area around their logo so
that it's visible.

● Maintain its shape and proportions when resizing - Don't

stretch the logos and icons if you need to resize them. Holding
down the “Shift” key in most software programs will maintain
the proportions while scaling up or down. And remember not
to go below the minimum size.

● There are two acceptable ways of placing the icons:

o Use a call-to-action alongside an individual icon; e.g.
"Add us on Snapchat" or "Like us on Facebook.
o Use the icons side-by-side for a general "Follow us on
social media".

● Make sure your brand is the focus - Your content should be

more prominent than the social media networks.
Output:

1) Pencil- To write on e-book

2) Eraser- to erase something written with pencil on e-book
3) Ruler- To draw accurately on e-book
4) Folder- to arrange books and notes properly inside a folder in
e- library
5) Search- to search any word, line or a book or notes inside e-
library
6) Library- Section for books inside e-library
7) Notes- section for filled and blank notes inside e-library
8) Retry- to retry any question
9) Calendar- to set and mark reminders to read or learn anything
in future.
10) Raise Hand- Raise hand to ask doubt to other users on
e-library
11) Sticky Notes- to add notes to e-book.
12) Mark Doubt- Mark a paragraph as doubt on e-book.
13) Highlighter- To highlight important points in e-book.
14) Bookmark- To bookmark a page or paragraph on e-book
15) Help- to get help regarding the platform.
Domain: E Library
E Library/Icons

Domain: E Library
E Library/teens
 Experiment No: 8

Aim: Design an interactive data access using Graphics (QR, BAR Code,
Image etc.) and generating a print form.

Theory:

QR Code: Created in 1994 by Toyota subsidiary 'Denso Wave' to quickly

track vehicles and parts through the company's automotive manufacturing
process, QR codes are used more commonly today for logging into websites
or Wi-Fi networks, sharing contact information, making mobile payments or
storing data for plane and train tickets on your phone.

QR codes (short for Quick Response codes) were internationally

standardized in 2000 and mobile phone users in Japan had already widely
adopted the technology by 2002. Although Denso Wave still holds patents
over the technology, QR codes are free for anyone to use without a license
fee as long as the intellectual property is being used within the defined
ISO/JIS standards. As with any other barcode, interacting with a QR code
is simple enough: scan one with an image sensor such as the camera in
your smartphone, the app you're using will convert the code to binary and
then display the information or perform the programmed action, such as
opening a website, essentially allowing real world objects to be
hyperlinked to digital places.

A QR code is comprised of an array of squares, some of which are used for

the image sensor to position itself (that's the large squares on three of the
corners), while the rest of the cells contain version and format information as
well as the data itself, of course, along with error correction coding. Whereas
most of the barcodes you come across are one-dimensional, such as UPC
labels on items at the store, QR codes are two-dimensional and offer many
advantages. For instance, QR codes can be scanned in any direction instead
of only one, they can contain thousand
of alphanumeric characters versus only a dozen or so, and when
configured with a high level of error correction they are particularly capable
at continuing to function after sustaining damage. The more error
correction a QR code has, the less data it can store and incidentally, the
more data that is stored within a QR code, the more squares it will have.
More squares are also required as the level of error correction is increased
and artistic QR codes can forego data capacity for aesthetics by creating
an image with some of the blocks.

Bar Code : A barcode is “A machine-readable code in the form of numbers

and a pattern of parallel lines of varying widths, printed on and identifying
a product.” But in truth a barcode is so much more. Barcode systems help
businesses and organizations track products, prices, and stock levels for
centralized management in a computer software system allowing for
incredible increases in productivity and efficiency.

The lines and patterns on a barcode are actually representations of numbers

and data and their development allowed basic information about a product
to be easily read by an optical scanning device, a barcode scanner, and
automatically entered into a computer system. This vastly reduced the time
it took to record such information and eliminated the potential for human data
entry error. Barcodes started out with simple 1-dimensional designs,
consisting of basic black lines that could only be read by specially designed
barcode scanners. However, today barcodes come in many shapes and
sizes and a wide range of designs and many can even be read by mobile
phones and other devices.

QR Code BarCode
Output:

Generation of Details
 Experiment No: 9

Aim: Design a navigator for a person new in tourist city/village

Theory:

Navigation

• Navigation and flow

Navigation through a screen or page should be obvious and easy to
accomplish. Navigation can be made obvious by grouping and
aligning screen controls, and judiciously using line borders to guide
the eye. Using the various display techniques, focus attention on the
most important parts of a screen. Always tab through a screen in the
logical order of the information displayed, and locate command
buttons at the end of the tab order sequence. Guidelines for
accomplishing all of these general objectives will be found in
subsequent pages. The direction of movement between screen
items should be obvious, consistent, and rhythmic. The eye can be
guided through the screen with lines formed through use of white
space and display elements. Sequence of use can be made more
obvious through the incorporation of borders around groupings of
related information or screen controls. Borders provide visual cues
concerning the arrangement of screen elements, because the eye
will tend to stay within a border to complete a task. Aligning elements
will also minimize screen scanning and navigation movements.
• Visually pleasing composition
Eyeball fixation studies also indicate that during the initial scanning
of a display in a clockwise direction, people are influenced by the
symmetrical balance and weight of the titles, graphics, and text of
the display. A cluttered or unclear screen requires that some effort
be expended in learning and understanding what is presented. The
screen user who must deal with the display is forced to spend time
to learn and understand. The user who has an option concerning
whether the screen will or will not be used may reject it at this point
if the perceived effort in understanding the screen is greater than the
perceived gain in using it. An entity’s design is an unconscious
process that attracts, motivates, directs, or distracts. Visually
pleasing composition draws attention subliminally, conveying a
positive message clearly and quickly. A lack of visually pleasing
composition is disorienting, obscures the intent and meaning, slows
one down and confuses one.

• Balance
Balance is stabilization or equilibrium, a midway centre of suspension.
The design elements have an equal weight, left to right, top to bottom.
Our discomfort with instability, or imbalance, is reflected every time we
straighten a picture hanging askew on the wall. Balance is most often
informal or asymmetrical, with elements of different colors, sizes and
shapes being positioned to strike the proper relationships.

• Symmetry
Symmetry is axial duplication: A unit on one side of the centerline is
exactly replicated on the other side. This exact replication creates
 formal balance, but the difference is that balance can be achieved
without symmetry. Symmetry’s opposite is asymmetry. Our eye
tends to perceive something as more compressed or compact when
it is symmetric. Asymmetric arrays are perceived as large.

• Presenting information simply and meaningfully

Following are guidelines for presenting information on screens. The
fundamental goals are clarity and simplicity in form,
comprehensibility in organization, efficient information assimilation,
and pleasantness in tone.
1. Legibility: Legibility is distinguishableness. Computer
technology today presents a seemingly endless array of
choices in such aspects as font styles, sizes, and weights. Is
the type of the proper kind and of adequate size and clarity for
viewers of all ages? Is the contrast between text and its
background adequate?
2. Readability: Readability is the degree to which prose can be
understood and based on the complexity of words and
sentences. Readability is established by factors like the length
and commonality of words used, sentence length, and the
number of syllables and clauses contain within a sentence. In
design, is the information written at an understandable level
for all users? Is it direct, simple, and easy to comprehend? Is
visual interference minimized?
Output-
Thy St ar £ ligh
 Experiment No: 10

Aim: Case Study (Mini Project)

Topic- Project Development Hub

Theory: We should design products that provide meaningful and

relevant experiences to users. This involves the design of the entire
process of acquiring and integrating the product, including aspects of
branding, design, usability and function. “No product is an island. A
product is more than the product. It is a cohesive, integrated set of
experiences. Think through all of the stages of a product or service – from
initial intentions through final reflections, from first usage to help, service,
and maintenance. Make them all work together seamlessly.”— Don
Norman, inventor of the term “User Experience”
Products that provide great user experience are thus designed with not only
the product’s consumption or use in mind but also the entire process of
acquiring, owning and even troubleshooting it. Similarly, UX designers
don’t just focus on creating products that are usable; we concentrate on
other aspects of the user experience, such as pleasure, efficiency and fun,
too. Consequently, there is no single definition of a good user experience.
Instead, a good user experience is one that meets a particular user’s needs
in the specific context where he or she uses the product.
Products should work for user pain points to make it smooth and easy.

User pain point- So I observed that while researchers, developers or

designers search for inspiration for their new project, they have to go to a
lot of places just for inspiration. For example, dribbble or behance for UI
designs inspiration, google scholar for research papers and so on. Also to
get advise or help on a topic they have to search people online who might
help. Also for research and user test, researchers have to search for
participants.

User type- Focused, mature, dedicated

User age group- 20-70 (both serious learners and seniors)
Solution- So there can be a platform where all inspirations, case studies,
latest news about a particular product, research papers and community to
help and get help from is under on roof. Introducing Stop, where everything
starts. A website where all latest news about technology is announced, there
are communities both seniors and learners can join to learn and ask for
help from the seniors, research papers, case studies, design inspirations,
etc- all in one website so that this can be an ultimate website to go on first.
This would also contain detailed information like – personas, empathy
mapping, information architecture, card sorting, task flows, site maps,
wireframes, user journey, etc. every step that involves in any research and
design process too. It would also contain details about the development
stages like how to think about it, how to approach a problem, what coding
language can be used, what platform can be used, etc. Mentorship, courses,
meetups and such services can be paid and payment can be done online.

Tool Used- Figma

Output:
 Smaoth Videa Call Expenence

Ongoing Development

Ongoing Development
UX and Product case studies

"roduct Deyelooment Huo

VR for vis iting museum Auto Element Duplt cation

Research Papers

Auto Element Duplicat Ion

Auto heart desease detection
VR for visiting mu seum
 VR for visiting museum Auto Element Duplication Auto hean desease detection

BEST

MATCHER

con ent an positive can ma e a signi icant erence in ow t ey view

failure

them?
Though the ultimate outcome cannot be easily
pre-determined in any potential match, there are three
crucial variables that can make the difference:

Compatibility: How well will we get along in the

most important areas of life?
Flexibility: Can we roll with the punches?
Anthropological exploration, acknowledgement,
and acceptance: Can we enter the emotional,
mental, physical, and spiritual world of another
without judgment or the need
Change him or her?
First Variable: Compatibility
Everyone needs a place and time where they can be totally open, vulnerable, „..
scared, sad, or distressed, and know the person on the other end of them -›

to defend or fix, is crucial to trust.

Spirituality
Whether you are religious, a new-age transformer, or just believe in
guides you is something your partner can respect. And vice versa. These are
sacred attachments and should not be challenged or minimized.

PRODUCT

HUB

the latest wants and pain points of the users.

thev have tn rln n Int nf resenrr‘.h nften frnm rlifferent si irre.s Thev are mnnv