HCI-Presentation-Autosaved.pdf.reporting

Reporting

1. Human Computer
Interaction 1

2. The Human
In 1983, Card, Moran and Newell described the Model Human
Processor: a simplified view of the human processing involved in
interacting with computer systems. MHP comprises 3 subsystems: the
perceptual system, the motor system and the cognitive system. Each
of them has a processor and memory. MHP also includes a number of
Principles of operation which dictate the behavior of the system
under certain conditions

3. Perceptual System
The perceptual system is responsible for
receiving and interpreting sensory
information from the environment. It
encompasses all the sensory organs and
the neural pathways that carry sensory
input to the brain, where it is processed
and perceived.
Sensory Reception
•Detects the environment through senses such
as vision, hearing, touch, taste, and smell.
Information Processing
•Converts sensory inputs into meaningful
information that the brain can interpret.
Perception Formation
•Creates a coherent picture of the environment,
allowing individuals to recognize objects, events,
and other sensory experiences.
Examples:
• Seeing a red traffic light and recognizing it means
"stop."
• Hearing a ringtone and identifying it as a phone
call.

4. Motor System
The motor system is responsible for
planning, controlling, and executing
voluntary and involuntary movements. It
includes the muscles, neurons, and brain
regions involved in motor control and
coordination.
Motor Planning
Formulates plans for movement based on sensory
input and cognitive decisions.
Motor Execution
Carries out movements through muscle
contractions.
Coordination and Control
Ensures smooth, coordinated movements and
maintains balance and posture.
Examples:
•Typing on a keyboard.
•Catching a ball.

5. Cognitive System
The cognitive system is responsible for
mental processes such as thinking,
learning, memory, problem-solving,
decision-making, and language
comprehension. It involves higher-order
brain functions that enable reasoning
and understanding
Information Processing
Formulates plans for movement based on sensory
input and cognitive decisions.
Memory Storage and Retrieval
Carries out movements through muscle
contractions.
Problem-Solving and Decision-Making
Ensures smooth, coordinated movements and
maintains balance and posture.
Learning and Adaptation
Acquires new knowledge and skills and adapts to
new situations.
Examples:
•Solving a math problem.
•Recalling a friend's phone number.
•Planning a route to a destination.

6. Input –Output Channel
In interaction with a computer, the human input is the data
output by the computer vice versa. Input in humans occurs
mainly through the senses and output through the motor
controls of the effectors. Vision, hearing and touch are the
most important senses in HCI. The fingers, voice, eyes, head
and body position are the primary effectors.

7. Human Input Channels
Human input channels are the sensory pathways
through which humans receive information from
the computer.

8. 1. Vision
Role: The primary input channel for most computer
interactions.
Function: Allows users to perceive and interpret visual
information displayed on screens, such as text, images,
and videos.
Examples: Reading text on a monitor, watching a video
tutorial, recognizing icons and symbols

9. 2. Hearing
Role: An important channel for receiving auditory
information.
Function: Enables users to process sounds, such as alerts,
notifications, and spoken instructions.
Examples: Listening to a notification sound, understanding
spoken commands from a voice assistant, following an
audio guide.

10. 3. Touch
Role: feedback and interaction with physical devices.
Function: Allows users to physically interact with input
devices, such as keyboards, mice, touchscreens, and haptic
feedback systems.
Examples: Typing on a keyboard, swiping on a touchscreen,
feeling vibrations from a haptic feedback device.

11. Human Output Channels
Human output channels are the pathways through
which humans send commands and responses to the
computer

12. 1. Fingers and Hands
Definition: The use of fingers and hands to perform tasks.
Role in HCI: Used for precise control and manipulation of
input devices.
Examples: Typing on a keyboard, using a mouse, navigating
a touchscreen interface.

13. 2. Voice
Definition: The use of spoken language to communicate.
Role in HCI: Enables hands-free interaction and control.
Examples: Using a voice assistant, dictating text, voice-
controlled gaming.

14. 3. Eyes
•Definition: The use of gaze direction to interact.
•Role in HCI: Enables gaze-based interaction and
tracking.
•Examples: Eye-tracking for cursor control, gaze-
based selection in virtual reality environments.

15. 4. Head and Body Position
•Definition: The movement and positioning of the
head and body.
•Role in HCI: Facilitates orientation and control in
immersive environments.
•Examples: Head movements to navigate in VR,
adjusting the view in augmented reality.

16. Human memory
Human memory is the mental capacity to store, retain, and recall
information and experiences. It is a fundamental aspect of cognition,
enabling individuals to learn from the past, navigate the present, and
plan for the future. Human memory is typically divided into three main
types:

17. 1. Sensory Memory
Sensory memory is the briefest form of memory, lasting only a few
seconds. It holds sensory information (such as sights, sounds, and
textures) just long enough for it to be transferred to short-term
memory.
Examples:
•The afterimage you see when you close your eyes after looking at a
bright light.
•The lingering sound of a bell after it has stopped ringing.

18. 2. Short-Term Memory (Working Memory)
Definition: Short-term memory, also known as working memory,
temporarily holds information that we are currently thinking about or
processing. It has a limited capacity, typically holding around 7 items
for about 20-30 seconds.
Examples:
•Recalling a phone number just long enough to enter it into your
contacts.
•Remembering the details of a conversation that just happened.

19. 3. Long-Term Memory
Long-term memory stores information over extended periods,
ranging from hours to a lifetime. It has a vast capacity and can retain
a variety of information, including facts, experiences, and skills.
Examples:
•Recalling your first day at school.
•Knowing how to ride a bicycle.
•Remembering the capital of a country.

20. Laboratory Activity 1
Instruction:
Choose a Website Theme:
Decide on the theme or purpose of the website you will design. It could be a personal blog, an e-commerce site, a news portal, etc.
Navigation Design:
•Clearly indicate the navigation structure. Show how users will move from one page to another.
Content and Features:
•Add placeholders for different types of content, such as:
•Text areas (headings, paragraphs)
•Images or videos
•Call-to-action buttons (e.g., Sign Up, Buy Now)
•Forms or input fields (if applicable)
Submission:
•Submit your power point presentation with the website interface sketch
Evaluation Criteria:
•Clarity and completeness of the layout. -10points
•Appropriateness of navigation and content organization. – 10points
•Creativity and adherence to design principles. – 10points

21. The Computer
The computer interaction process involves transferring information
between humans and computers. This interaction can occur through
various devices, reflecting the diversity of data types and users. In the
past, computers processed large amounts of data all at once, a
method known as batch processing. However, modern computers
can respond almost instantly and are integrated into many different
devices, allowing for more dynamic and immediate interactions

22. 1. Text Entry Devices
•The alphanumeric keyboard
•Chord keyboards
•Phone pad and T9 entry
•Handwriting recognition
•Speech recognition

23. 2. Positioning, pointing and drawing
•The mouse
•Touchpad
•Trackball and thumbwheel
•Joystick and keyboard nipple
•Touch-sensitive screens (touchscreens)
•Stylus and lightpen
•Digitizing tablet
•Eyegaze
•Cursor keys and discrete positioning

24. 3. Display Devices
3.1 Bitmap displays, resolution and color
A bitmap-base means that the display is
made of a fixed number of dots or pixels
in a rectangular grid. The color or
intensity at each pixel is held by the
computer’s video card. The more bits per
pixel, the more colors/intensities are
possible. Also is the resolution of the
screen: the total number of pixels (in a
4:3-ratio) and the density of the pixels.

25. 3. Display Devices
3.2 Technologies
In a CRT-monitor(Cathode-ray tube) a stream of
electrons is emitted from an electron gun, which is than
focused and directed by magnetic fields. As the beam
hits the phosphor-coated
screen, the phosphor is excited by the electrons and
glows. Flicker can be reduced by increasing the
scanning rate or by interlacing, in which odd lines are
scanned first, followed by even lines. In LCD’s(Liquid
Crystal Display) a thin layer of liquid crystals is
sandwiched between two glass
plates. External light passes through the top plate and
is polarized. This passes through the crystal and is
reflected back to the user’s eye by the bottom plate.

26. 3. Display Devices
3.3 Large displays and situated displays
There are several types of large displays. Some
use gas-plasma technology and usually have a
16:9-ratio. Several smaller screens can also be
places together in a video wall. Projectors are
possible too, in two variants: projectors with 3
lenses (red, green and blue) can build a full-color
image. LCD-projectors have a small screen,
through which light is projected on a screen.

27. 3. Display Devices
3.4 Digital Paper
Thin flexible material that can be
written to electronically, but keeps
it’s contents when removed from
the power supply.

28. 4. Devices for virtual reality and 3D interaction
3D displays
3D can be displayed on normal screens using
shadows, depth etc. It is also possible to generate the
natural stereoscopic images for both eye positions and
have them delivered to he eyes using a VR-helmed.
Finally, users can enter a VR cave, where the VR world
is projected around them. If the VR-system
performances too slow, and there is a delay between
movement and image, disorientation and sickness may
occur.

29. 5. Physical controls, sensors and special devices
Special displays
Except for CRT and LCD, there are
numerous other display devices, e.g.
LED’s, gauges, dials and head-up
displays.

30. 5. Physical controls, sensors and special devices
Sound output
We do not yet know how to utilize sound in a sensible way to
achieve maximum effects and information transference in HCI.
However, by having sounds confirm a right action, we can
speed up interaction.

31. 5. Physical controls, sensors and special devices
Touch,Feel and Smell
Force feedback gives different amounts of resistance to an
input device depending on the state of the virtual operation.
Haptic devices are various forms of force, resistance and
texture in‡uencing our physical senses.

32. 5. Physical controls, sensors and special devices
Environment and bio-sensing
There are many sensors in our environment monitoring
our behavior. Their measurements range from
temperature and movement to the user’s emotional
state

33. 6. Paper: printing and scanning
Printing
The most common printers nowadays are dot-based. In
order of increasing resolution, familiar types are dot-
matrix printers, ink-jet printers and laser printers.

34. 6. Paper: printing and scanning
Fonts and page description
languages
Some printers print ASCII-
characters and bitmaps ’by itself’.
Many more complex documents
are translated into suitable
bitmaps by the computer. More
sophisticated printers can accept
a page description language, e.g.
PostScript.

35. 6. Paper: printing and scanning
Screen and page
There are many differences (e.g. size, color depth, resolution
etc.) between a paper print and a computer monitor, which
causes problems when designing. Especially the correct
alignment of text (in different fonts) is difficult.

36. 6. Paper: printing and scanning
Scanners and optical character recognition
Scanners produce a bitmap image from a ’hard’original and
can, using optical character recognition, transfer a page of
text. There are 2 kinds of scanners: (as in a copies machine)
and hand-held (as in a fax machine, however the scanner has
to be manually pulled over the paper).

37. 7. Memory
RAM and short-term memory (STM)
Most current active information is held in the random access
memory (RAM). RAM is volatile: contents are lost when the power
is turned off. However, there are more expensive or low-power
consuming memory techniques that can hold their contents when
the power is off.

38. 7. Memory
Disks and long-term memory (LTM)
There are 2 main techniques used in disks: magnetic
disks (Floppy, hard disk, tape) and optical disks. (CD-
ROM/DVD). In comparison to RAM, the computers LTM
is rather slow.

39. 7. Memory
Understanding speed and capacity
The capacity of RAM is limited and therefore multitask-
systems tend to swap background-running programs from
RAM to the hard disk. When the program is fully activated it
has to be swapped back, which can cause delays (von
Neumann bottleneck).

40. 7. Memory
Compression
Compression techniques can be used ti reduce the amount of
storage required for text, bitmaps and video.

41. 8. Processing and networks
Network computing
Networked systems have an effect on interactivity, because the
large distances may cause a noticeable delay in response from the
system. The actions of other users may also infuence your own
interaction with the connected computers.

42. The Interaction
There are a number of ways in which the user can communicate with the
system: input, direct manipulation, virtual reality etc.

43. The Terms of Interaction
Terms of Interaction define the specific elements and processes involved in the
interaction between a user and a system. They outline the fundamental
components that need to be considered to create a meaningful and effective
interaction

44. The Terms of Interaction
User: The person who interacts with the system. Understanding the user's goals,
skills, and needs is crucial for designing effective interactions.

45. The Terms of Interaction
System: The technological component or interface with which the user interacts.
This can be anything from a simple website to a complex software application.

46. The Terms of Interaction
Input: The actions or commands that the user provides to the system. Input can
be in the form of clicks, typing, gestures, voice commands, or other interactions.

47. The Terms of Interaction
Output: The responses or feedback the system provides to the user based on
their input. This can include visual changes on the screen, audio feedback, haptic
responses, etc.

48. The Terms of Interaction
Feedback: A specific type of output that informs the user about the result of
their action. Good feedback is immediate and clear, helping the user understand
what has happened as a result of their input.

49. The Terms of Interaction
Context: The environment or situation in which the interaction takes place.
Context can affect the user's behavior and expectations, so it’s important to
consider factors like location, time, and device used.

50. The Terms of Interaction
Task: The objective that the user is trying to achieve through the interaction.
Understanding the task helps in designing a system that effectively supports the
user's goals.

51. The Terms of Interaction
Control: The degree of freedom the user has over the system. This includes how
much the user can influence the system's behavior and how much the system
guides or restricts the user’s actions.

52. Interaction design basics
focus on the principles and methods used to create effective and
meaningful interactions between users and products, systems, or
services. It is a key aspect of user experience (UX) design, emphasizing
how users interact with technology and ensuring that these interactions
are as smooth, efficient, and enjoyable as possible

53. What is a Design?
design refers to the process of creating and shaping the way humans
interact with computers and digital systems. It involves understanding
users, their needs, and their behaviors to create interfaces and
interactions that are effective

54. During design, always concentrate on the user.

55. The process of design:
•Requirements: Through observations and interviews, the features of the
system to be designed are mapped.
•Analysis: Through various methods, the gathered requirements are
ordered to bring out key issues.
•Design: Various design guidelines help you to move from what you want
to how to do it. They are discussed in other chapters and sections.
•Iteration and prototyping: Try out early versions of the system with real
users.
•Implementation and deployment: writing code, documentation and
make

56. Once more: gather as much information as possible about the future users of
the system.
•Stakeholders: people affected directly or indirectly by a system
•Participatory design: bringing a potential user fully into the design
process
•Persona: rich picture of an imaginary person who represents your core
user group
•Scenarios are stories for design: rich stories of interaction sometimes
illustrated with storyboards.

57. Navigation design
Local structure
Much of interaction involves goal-seeking behavior, because users
do not know the system entirely. Therefore, the interface should
always make clear:
•where you are
•what you can do
•where you are going/what will happen in terms of the interaction
•or state of the system.

58. Navigation design
Global structure - hierarchical organization
Overall structure of an application: the way the various screens,
pages or physical device states link to one another. This can be
done using hierarchy: humans tend to be better at using this
structure, as long as the hierarchy does not go to deep.

59. Navigation design
Global structure - dialog
Dialog: the pattern of non-hierarchical interaction occurring when
the user performs a certain action, e.g. deleting a …le (Pop-up Are
you sure to Delete this file?)

60. Screen design and layout
Tools for layout
Grouping and structure: if things logically belong together, then we
should normally visually group them together. Order of groups and
items: the order on the screen should follow the natural order for
the user.
Decoration: decorations can be used to emphasize grouping.
Alignment: The proper use of alignment can help users find information
in lists and columns quickly

61. Screen design and layout
User actions and control
For entering information, the same criteria dictate the layout. It is also
very important that the interface gives a clear clue what to do. A uniform
layout is then helpful.

62. Screen design and layout
Appropriate appearance
The way of presenting information on screen depends on the kind
of information, the technologies available to present it and the
purpose for which it is used.

63. What HCI is and Why It Is Important
Human-Computer Interaction (HCI) is a multidisciplinary field that
focuses on the design, evaluation, and implementation of interactive
computing systems for human use. It also studies the major phenomena
surrounding these systems, such as how people interact with computers,
how these interactions can be improved, and how technology can be
designed to be more user-friendly

64. HCI Is Important
Improves Usability:
•HCI is crucial for designing interfaces that are easy to use and learn.
Good usability reduces the time and effort required for users to complete
tasks, leading to a more efficient interaction with technology.

65. HCI Is Important
Enhances User Satisfaction:
•By focusing on the needs and preferences of users, HCI helps create
systems that users enjoy interacting with. Satisfied users are more likely
to continue using a product, recommend it to others, and have a positive
perception of the brand or service.

66. HCI Is Important
Increases Accessibility:
•HCI promotes the design of technology that is accessible to all users,
including those with disabilities. This ensures that technology is inclusive
and can be used by a diverse population.

67. HCI Is Important
•Reduces Errors and Improves Safety:
•Effective HCI design minimizes the likelihood of user errors, which
can be especially critical in high-stakes environments like
healthcare, aviation, and finance. By making systems more intuitive
and responsive, HCI contributes to safer and more reliable
technology.

68. HCI Is Important
Aligns Technology with Human Needs:
•HCI ensures that technology serves the real needs of people rather than
forcing users to adapt to poorly designed systems. By aligning technology
with human capabilities and limitations, HCI helps create tools that
enhance human productivity and well-being.

69. HCI Is Important
Economic Impact:
•Products that are easier and more pleasant to use are more likely to
succeed in the market. Investing in HCI can lead to better customer
retention, fewer support calls, and lower development costs by catching
usability issues early in the design process.