Unit-4

User-Computer Interaction
Mouse

Indirect Manipulation
Indirect manipulation refers to a method of interaction where the user manipulates a physical
input device, such as a mouse or a track pad, to control a visual representation, such as a
cursor, on a display screen. The user's actions with the input device indirectly affect the objects
or elements displayed on the screen. In other words, the user interacts with an intermediary,
such as the cursor, to manipulate objects or perform actions on a digital interface.

Unlike direct manipulation, where the user interacts directly with objects on the screen (e.g.,
touch-based interaction), indirect manipulation involves an extra layer of abstraction between
the user's actions and the on-screen objects.

"Elephant" is a term used to describe individuals who find it difficult to manipulate a mouse.
These users may face challenges in operating the mouse effectively, which could be due to
various factors such as physical limitations, lack of familiarity with technology, or personal
reasons.

On the other hand, "minnie" is a term used to represent users who are the opposite of
"elephants." These users are described as individuals who really love using the mouse and are
proficient in its operation. The term "minnie" is likely used to convey a sense of enthusiasm and
comfort that these users have with mouse-based interaction.

Mouse events

Mouse events refer to the various actions and interactions that occur when a user interacts
with a computer mouse. These events allow users to interact with graphical user interfaces and
control elements on the screen. Here are some common mouse events:

1. Mouse Movement: This event occurs when the user physically moves the mouse across
the surface. The movement is typically tracked by the computer, and it may result in
corresponding movement of the cursor on the screen.

2. Mouse Click: A mouse click event happens when the user presses and releases one of
the mouse buttons (usually the left, right, or middle button). Clicking is often used to
select or activate elements, such as buttons or links, on the screen.

3. Mouse Double-Click: A double-click event occurs when the user quickly performs two
consecutive clicks of the same button. Double-clicking is commonly used to open files,
folders, or applications.

4. Mouse Right-Click: Right-clicking involves pressing the right mouse button. This action
typically opens a context menu that provides a list of options or actions relevant to the

GM COLLEGE | JHALNATH CHAPAGAIN

 selected element or the current context.

5. Mouse Hover: Hovering refers to moving the mouse pointer over an element without
clicking. It triggers a hover event and can be used to display additional information or
provide visual feedback, such as highlighting or changing the appearance of the
element.

6. Mouse Scroll: Scrolling involves using the scroll wheel on the mouse, if available, or
other scrolling gestures to navigate content vertically or horizontally. This event is
commonly used to scroll through documents, web pages, or other scrollable interfaces.

7. Mouse Drag: Dragging occurs when the user clicks and holds a mouse button while
moving the mouse. This event is often used to initiate actions like dragging and
dropping elements, resizing windows, or drawing on canvas-like interfaces.

These mouse events, among others, provide the basis for user input and interaction in
graphical user interfaces. By responding to these events, applications can interpret and react to
user actions, enabling a rich and interactive user experience.

Focus and cursor hinting

Focus

Focus is a technical term that determines which program on a computer gets the user's input. Even
though many programs can run at the same time, only one program can directly interact with the user.
The program that has focus receives the user's keystrokes. If the user clicks the mouse, the focus can
change to a different program. If the mouse is clicked on a program that already has focus, the focus
doesn't change.

An "in-focus click" refers to a situation where a mouse is clicked within a window that already has the
focus. In this case, the focus remains the same, and there is no change in which program receives the
user's input.

A "new-focus click" occurs when the mouse is clicked somewhere within a window that does not
currently have the focus. As a result of this click, the focus shifts to the window where the click
occurred, and that program will then receive the user's input.

GM COLLEGE | JHALNATH CHAPAGAIN

Cursor

The cursor is the arrow we see on the screen that shows where the mouse is. Anything on the screen
that can be clicked or moved by the mouse is called pliant. Examples of pliant things are buttons you can
push and icons you can drag.

Hinting

Hinting refers to the use of visual or contextual cues to provide guidance or indication to users, helping
them understand how to interact with objects or elements in a system or interface. It assists users in
navigating and interacting with the system by offering subtle clues or prompts.

Cursor Hinting

There are three main ways to let users know that an object can be interacted with. The first way is
through the object's appearance itself, using static visual cues. This means that the object has visual
indicators or signs that suggest it can be clicked or manipulated.

The second way is by using dynamically changing visual cues. This means that the object's appearance
or behavior changes in response to user actions, such as highlighting or animating when the mouse
hovers over it.

The third way is by changing the visual cues of the cursor as it moves over the object. The cursor, which
is the arrow or symbol on the screen controlled by the mouse, can be designed to change its appearance
when it passes over an interactive object, indicating that the object can be clicked or manipulated.

These methods help users understand which objects on the screen can be interacted with and how they
can interact with them.

Wait cursor hinting

wait cursor hinting refers to the use of a specific cursor icon, typically a spinning or hourglass symbol, to
indicate to the user that the system is busy processing a task and they need to wait for it to complete.
When the wait cursor is displayed, it conveys that the system is temporarily unavailable or working on a
task, advising the user to be patient and avoid initiating further actions until the process is finished. This
type of cursor hinting helps manage user expectations and provides feedback during periods of system
delay or processing.

GM COLLEGE | JHALNATH CHAPAGAIN

Selection

Selection refers to the process of choosing or highlighting a specific object or item on a screen by
pointing to it with the mouse cursor and clicking on it.

Indicating a selection

The act of selection involves indicating a particular data object or element, such as a file, icon, text, or
graphic, and designating it as the target for further actions or operations. Selection is a fundamental and
straightforward operation that allows users to interact with digital content and perform various tasks or
operations on the chosen object.

Insertion and replacement

insertion refers to the act of adding new data or content into the selected object or location. Once an
object or element is selected, if the subsequent action is a write command (such as entering keystrokes
or using the paste command), the incoming data will be inserted onto the selected data. This means that
the new information will be added alongside or within the existing content.

On the other hand, replacement occurs when the incoming data completely substitutes or overrides the
selected object. If the selected object is replaced, it means that the incoming data takes the place of the
previously selected data entirely, removing the original content. This action is referred to as a
replacement, where the selected object is substituted entirely by the incoming data.

Mutual exclusion

The concept of mutual exclusion ensures that only one object can be actively selected at a given time. If
the user clicks on a new object, the previous selection is automatically cleared, and the newly clicked
object becomes the new selected item. This behavior guarantees that there is always a single active
selection, and selecting a new object excludes any previous selection.

By enforcing mutual exclusion, users can easily manage their selected objects without ambiguity or
confusion, allowing for clear and predictable interactions with the user interface.

Additive Selection:

Additive selection refers to a method of selecting multiple objects or elements in a user interface
without removing previous selections. In additive selection mode, the user can choose multiple objects
by clicking on each of them while holding down a modifier key, such as the Shift key. Each object that is
clicked on gets added to the existing selection. This allows users to select multiple objects that are not
necessarily contiguous or adjacent to each other.

For example, if there are several files in a folder, and the user wants to select specific files that are
scattered throughout the list, they can use additive selection. By holding down the Shift key and clicking
on each desired file, the user can accumulate a selection of multiple files without deselecting any
previously selected files.

GM COLLEGE | JHALNATH CHAPAGAIN

Group Selection:

Group selection, also known as marquee selection or rectangle selection, is a technique used to select
multiple objects by drawing a bounding box or a rectangular area around them. The user typically
initiates group selection by clicking and dragging the mouse cursor to create a selection area. Any object
that falls within or intersects with the drawn rectangle is included in the selection.

Group selection is useful when there is a cluster of objects, such as icons, files, or text, and the user
wants to select them all at once without individually clicking on each object. It provides a convenient
way to select a set of objects that are visually grouped or located close to each other.

A dragrect is a dynamic gray rectangle whose upper left corner is the mouse-‐‐down point and
whose lower right corner is the mouse-‐‐up point. When the mouse button is released, any and
all objects enclosed within the dragrect are selected as a group.

Gizmos manipulation

Gizmos

A gizmo refers to a graphical representation of a control or tool that enables users to perform
specific actions or modify properties of objects.

They help us do different things or change how things look or behave on the screen. Here are
some examples to make it clearer:

1. Buttons: They are like little clickable areas on the screen. When you click a button, it can
perform an action like saving a document, submitting a form, or playing a video.

2. Sliders: Sliders are another type of gizmo. They usually look like a bar that we can slide
back and forth to adjust something. For example, imagine a volume slider. When we
drag it to the right, the volume increases, and when we drag it to the left, the volume

GM COLLEGE | JHALNATH CHAPAGAIN

 decreases.

3. Checkboxes: Checkboxes are small boxes that you can click to select or deselect an
option. They are often used for things like enabling or disabling certain features. For
instance, in a photo editing app, you might have a checkbox to turn on or off a filter
effect.

4. Text Input Fields: These are areas where you can type text, like a search bar or a text
box in a messaging app. They allow you to input information by typing on the keyboard.

5. Drop-down Menus: Drop-down menus are gizmos that show a list of options when you
click on them. You can then choose one of the options from the list. An example is a
menu that lets you select a language preference in a website or app.

6. Radio Buttons: Radio buttons are small circles that you can select to choose one option
from a group of mutually exclusive choices. For example, when filling out a survey, you
might see a set of radio buttons to select your age range.

Gizmos manipulation plays a significant role in User Interface Design (UID) as it allows users
to interact with and control various elements within an interface.

In UID, gizmos can be manipulated through different mouse events to provide a rich user
experience. following are a few examples of how gizmos can be manipulated:

1. Click: By clicking on a gizmo, users can trigger a specific action or select an object. For
instance, clicking on a button gizmo can submit a form or execute a particular
command.

2. Click and Drag: This mouse event enables users to interactively modify the properties
of a gizmo or perform actions such as resizing or repositioning. For example, clicking
and dragging the handle of a slider gizmo can adjust a value or dragging the corner of a
window gizmo can resize the window.

3. Double Click: Double-clicking on a gizmo can initiate a distinct action or toggle a

specific state. For instance, double-clicking on an icon gizmo can open an associated
application or double-clicking on a checkbox gizmo can toggle its selection.

4. Hover: When the mouse cursor hovers over a gizmo, it can trigger visual feedback or
display additional information. For example, hovering over a tooltip gizmo can show
contextual information about a control.

5. Scroll: Some gizmos, like scrollbars, can be manipulated through mouse scrolling. Users
can scroll up or down using the mouse wheel to navigate through content or adjust a
value.

6. Context Menu: Right-clicking on a gizmo can bring up a context menu with a list of
available actions or options specific to that gizmo. Users can select an option from the
context menu to perform a desired action.

GM COLLEGE | JHALNATH CHAPAGAIN

Repositioning

Repositioning refers to the action of clicking on an object and dragging it to a different location.
Repositioning does not involve changing the appearance or properties of the object; it solely
focuses on moving the object to a new position. This action consumes the click-and-drag action,
making it unavailable for other purposes. To move an object, it needs to be selected first, which
is why selection typically occurs during the mouse-down transition. For example, we can
reposition a window on our computer screen by clicking on its title bar and dragging it to a
different part of the screen. It's a way of rearranging things to make them more convenient or
organized.

Resizing and Reshaping

When it comes to the desktop and graphical user interfaces (GUIs), resizing and reshaping are
often used interchangeably. Users can adjust the size and shape of a rectangular window by
clicking and dragging a specific control. However, when it comes to graphics and drawings, it's
not good to permanently put controls on them. Instead, a popular method is to use small black
squares called handles or grapples. These squares are placed around the object, and they help
designers resize and select the object without getting in the way.

Visual feedback of manipulation:

Visual feedback of manipulation refers to the visual cues and changes provided to the user
during the process of interacting with objects or elements in a user interface. It plays a crucial
role in enhancing the user's understanding, perception, and control over the manipulation
actions they perform.

While visual feedback is an ongoing aspect throughout user interactions, we can broadly
categorize it into three phases:

1. Pre-action Feedback(Free Phase): This phase occurs before the user initiates any
action. It provides visual cues and information to users about the available interactive
elements and their functionality. Pre-action feedback can include highlighting buttons,
tooltips, or providing contextual information to guide users in making informed
decisions.
2. In-action Feedback(Captive Phase): This phase corresponds to the user actively
performing an action or manipulation. During this phase, visual feedback helps users
perceive the effects of their actions in real-time. For example, when dragging an object,
visual feedback may include the object moving along with the user's cursor or
indicating potential drop targets.
3. Post-action Feedback(Terminating Phase): After the user completes an action or
manipulation, this phase provides feedback to confirm the action's outcome and any
resulting changes. It ensures that users understand the consequences of their actions.
Examples of post-action feedback include displaying success messages, updating
interface elements, or showing the final state of manipulated objects.

These three phases of visual feedback work together to create a responsive user experience.
They guide users before, during, and after their interactions, providing clarity, confirmation,
and a sense of control over their actions. By employing appropriate visual feedback, designers
can enhance user understanding, engagement, and overall satisfaction with the interface.

GM COLLEGE | JHALNATH CHAPAGAIN

Drag and Drop

Drag and drop is a user interface technique that allows users to click and hold an object or
piece of content on a digital screen, drag it to a different location, and release it. It simplifies
tasks such as moving files or folders between different directories, rearranging elements on a
graphical user interface, organizing items in lists or tables, and customizing layouts or
configurations. By eliminating the need for complex commands or menus, drag and drop
interactions enhance user experience and improve productivity.

Interior Drag and Drop

Dragging and dropping something from one place to another inside program is called interior
drag and drop.
Exterior Drag and Drop
Dragging and dropping something from inside one program to another program is called
exterior drag and drop.

Source and Target

The concept of "master and target" in drag and drop refers to the process of clicking on an
object and dragging it to another object to perform a specific action. The object from which the
dragging starts is called the "master" object, which is usually a window or container. For
example, if you're dragging an icon, that icon itself is considered a window. The master object
controls the entire drag and drop process.

When the user releases the mouse button, the dragged object is dropped onto a "target" object.
The target object is where the dragged object is placed or triggers a particular action. An
example of this is rearranging icons on a desktop.

During the dragging process, the master object remains the same, while the target object is not
determined until the user releases the mouse button. The target object could be another object
or even the empty space between objects. As the user moves the mouse while holding down the
button, the cursor may pass over various objects within or outside the master object's program.
These objects, if they support drag and drop functionality, are called "drop candidates."
Essentially, they are potential targets where the dragged object can be dropped.

It's important to note that there can only be one master and one target in a drag, but there can
be multiple drop candidates. The master object controls the dragging process, and the user
determines the target object by releasing the mouse button on it or within its vicinity.

problems and solutions

In the context of drag and drop, "problems and solutions" refer to issues or challenges that
users may encounter while performing drag and drop actions, and the corresponding solutions
or approaches to address those issues. These problems arise when the drag and drop
functionality doesn't work as expected or causes confusion for users. Here are a few common
problems and their solutions:

Accidental Dragging(Drag and Drop twitchiness): Users may unintentionally trigger a drag and
drop action when they only intended to select an object. This can be solved by implementing a

GM COLLEGE | JHALNATH CHAPAGAIN

drag threshold, which ignores small mouse movements until the movement exceeds a certain
threshold. It helps distinguish intentional dragging from accidental selection.

Auto Scroll: When dragging an object to a location outside the visible area, such as below the
current view, it becomes necessary to provide an auto scroll feature. Auto scroll ensures that
the target area automatically scrolls to accommodate the dragged object, allowing the user to
drop it in the desired location. Designers should manage the speed and responsiveness of the
auto scroll feature to provide a smooth experience.

Feedback and Visibility: One challenge is providing clear visual feedback during the drag
operation. Users need to be aware of what they are dragging and where they are dropping it.
Solutions include using visual cues such as highlighting the target area or providing a preview
of the dragged object to enhance visibility and feedback.

Compatibility and Accessibility: Drag and drop functionality may not always be accessible or
compatible with different devices technologies. Solutions involve providing alternative
methods for performing the same actions, such as keyboard shortcuts or context menus, to
ensure accessibility for users who cannot perform drag and drop operations.

Undo and Cancel: Users may accidentally drop an object in the wrong location or change their
mind during the dragging process. Offering an "undo" option or a "cancel" button allows users
to revert the action and restore the original state before the drag operation.

Drag and drop mechanism

It involves a series of events and actions that facilitate the movement of objects on a screen.
Following are a series of actions performs on the drag and drop mechanism:

1. Initiating the Drag:

The user typically initiates a drag action by clicking and holding the mouse button
(or touch input) on an object or content they want to move.

2. Dragging the Object:

While holding the mouse button or touch input, the user moves the cursor or their
finger, causing the dragged object to follow the movement.

3. Feedback and Targets:

During the drag operation, visual feedback may be provided to indicate potential
target areas where the object can be dropped.

4. Dropping the Object:

Once the user releases the mouse button or lifts their finger, the drag operation
concludes, and the object is dropped.

GM COLLEGE | JHALNATH CHAPAGAIN