HCI – MIDTERM REVIEWER

INTRODUCTION TO HCI

Was previously known as the man-machine studies or man-machine interaction. It deals with the design, execution
and assessment of computer systems and related phenomenon that are for human use.

 USER - By "user", we may mean an individual user, a group of users working together. An appreciation of
the way people's sensory systems (sight, hearing, touch) relay information is vital.

 COMPUTER - When we talk about the computer, we're referring to any technology ranging from desktop
computers, to large scale computer systems.

 INTERACTION -There are obvious differences between humans and machines. In spite of these, HCI
attempts to ensure that they both get on with each other and interact successfully. In order to achieve a
usable system, you need to apply what you know about humans.

Factors in HCI
There are a large number of factors which should be considered in the analysis and design of a system using HCI

principles. Many of these factors interact with each other, making the analysis even more complex. The main factors
are

listed in the table below:

ORGANIZATION FACTORS

 Training
 job design
 politics
 roles
 work organization

ENVIRONMENTAL FACTORS

 Noise
 heating
 lighting
 ventilation
 Health and Safety Factors

USER INTERFACE

 Input devices
 output devices
 dialogue structures
 use of color
 icons
 commands
  navigation
 graphics
 natural
 language
 user support
 multimedia

TASK FACTORS

 Easy
 Complex
 Novel
 task allocation
 Monitoring
 skills

USABILITY AND USEFULNESS

USABILITY - To put it simply, usability is the Ease of Use. It measures the easiness a user can experience while he
tries to complete a desired task with your product.

USEFULNESS - Usefulness indicates the ‘value’ of solution ascribed to it by users. How much useful are the
features, function data of your product to a user determines the usefulness of that product.

DESIGN RULES FOR HCI

THE 3 CATEGORIES OF DESIGN RULES

 PRINCIPLES -Abstract and have high generality & low in authority. Widely applicable and enduring. e.g.
interface should be easy to navigate

 GUIDELINES - Can guide or advise on how achieve a principle Narrowly focused. Can be too specific,
incomplete, & hard to apply but they are more general and lower in authority than Standards. e.g. use this
button to save data

 STANDARDS - which are very specific & high in authority. e.g. use color RGB #1010D0 on home links

PRINCIPLES OF LEARNABILITY

the ease with which new users can begin effective interaction and achieve maximal performance (e.g. Predictability,
Synthesizability, Familiarity, Generalizability, Consistency.)

 PREDICTABILITY - support for the user to determine the effect of future action based on past interaction
history.
  SYNTHESIZABILITY - support for the user to assess the effect of past operations on the current state.
assessing the effect of past actions immediate vs. eventual honesty

 GENERALIZABILITY - support for the user to extend knowledge of specific interaction within and across
applications to other similar situations.

PRINCIPLES OF FLEXIBILITY

the multiplicity of ways the user and system exchange information (e.g. Dialogue initiative, Multithreading, Task
migratability, Substitutivity, Customizability.)

 DIALOGUE INITIATIVE - user freedom from artificial constraints on the input dialog imposed by the system.

 MULTITHREADING - the ability of the system to support user interaction for more than one task at a time.

 TASK MIGRATABILITY - the ability to transfer control for execution of tasks between the system and the
user (e.g. spell-checking task).

 SUBSTITUTIVITY - the extent to which an application allows equivalent input and output values to be
substituted for each other.

 CUSTOMIZABILITY - the ability of the user or the system to modify the user interface.

PRINCIPLES OF ROBUSTNESS
the level of support provided to the user in determining successful achievement and assessment of goal-directed
behavior (e.g. Observability, Recoverability, Responsiveness, Task conformance).

 OBSERVABILITY - the extent to which the user can evaluate the internal state of the system from the
representation on the user interface.

 RECOVERABILITY - the extent to which the user can reach the intended goal after recognizing an error in
the previous interaction.

 RESPONSIVENESS - a measure of the rate of communication between the user and the system.

 TASK CONFORMANCE - the extent to which the system services support all the tasks the user would wish
to perform and in the way the user would wish to perform.
HTML TAGS AND ATTRIBUTES

HTML - Hyper Text Markup Language

<!DOCTYPE html> declaration defines that this document is an HTML5 document

<html> element is the root element of an HTML page

<head> element contains meta information about the HTML page

<title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

<body> element defines the document's body, and is a container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.

<h1> element defines a large heading

<p> element defines a paragraph

<br> HTML element produces a line break in text (carriage-return).

href (hypertext reference) attribute inside the opening a tag. The href attribute indicates the destination of the
hyperlink.

colspan attribute specifies how many columns a table cell should span.

rowspan attribute specifies the number of rows a cell should span.

<tr> element defines a table row

<th> element defines a table header

<td> element defines a table cell

BEN SHNEIDERMAN 8 GOLDEN RULES

1. STRIVE FOR CONSISTENCY - by utilizing familiar icons, colors, menu hierarchy, call-to-actions, and user
flows when designing similar situations and sequence of actions.

2. ENABLE FREQUENT USERS TO USE SHORTCUTS - With increased use comes the demand for quicker
methods of completing tasks. For example, both Windows and Mac provide users with keyboard shortcuts
for copying and pasting, so as the user becomes more experienced, they can navigate and operate the user
interface more quickly and effortlessly.

3. DESIGN DIALOGUE TO YIELD CLOSURE - Don’t keep your users guessing. Tell them what their action
has led them to. For example, users would appreciate a “Thank You” message and a proof of purchase
receipt when they’ve completed an online purchase.

4. OFFER SIMPLE ERROR HANDLING - No one likes to be told they’re wrong, especially your users.
Systems should be designed to be as fool-proof as possible, but when unavoidable errors occur, ensure
users are provided with simple error handling such BASIC TROUBLE SHOOTING.
 5. PERMIT EASY REVERSAL OF ACTIONS - Designers should aim to offer users obvious ways to reverse
their actions. These reversals should be permitted at various points whether it occurs after a single action, a
data entry or a whole sequence of actions.

6. SUPPORT INTERNAL LOCUS OF CONTROL - Allow your users to be the initiators of actions. Give users
the sense that they are in full control of events occurring in the digital space. Earn their trust as you design
the system to behave as they expect.

7. REDUCE SHORT-TERM MEMORY LOAD - Human attention is limited and we are only capable of
maintaining around five items in our short-term memory at one time. Therefore, interfaces should be as
simple as possible with proper information hierarchy, and choosing recognition over recall.

THE 6 PRINCIPLES OF DESIGN BY DONALD NORMAN (GROUP 1 AND 2)

1. AFFORDANCE - It means that as soon as someone sees something, they have to know how to use it. For
web designers, affordance is important. The design should be intuitive enough that the users know how to
access their desired information just by looking at the interface.
2. CONSTRAINTS - it is about limiting the range of interaction possibilities for the user to simplify the interface
and guide the user to the appropriate next action. THERE ARE 4 TYPES OF CONSTRAINTS

 LOGICAL - Logical constraints are those which use logical relationships to force actions
 SEMANTICAL - Semantic constraints rely upon the situation to enforce a decision, and works well
to utilize the user’s assumption to their benefit.
 PHYSICAL - Physical constraints exist to limit the possible interactions
 CULTURAL - Otherwise known as conventions. (Not sure how these are different from semantic
constraints.) Somehow, we all know without being told that we’re supposed to face forward in the
elevator.

3. MAPPING - Mapping is the relationship between control and effect. A great example of mapping is the
vertical scroll bar.
4. VISIBILITY - the more visible an element is, the more likely users will know about them and how to use
them.
5. FEEDBACK - The user must receive feedback after every action they perform to let them know whether or
not their action was successful. For example, changing the icon on the tab to a spinner to indicate that a
webpage is loading.
6. CONSISTENCY – The same action has to cause the same reaction, every time.

DESIGN CONSIDERATION HUMAN, COMPUTER AND TASK (GROUP 3)

ERGONOMICS - Ergonomics (or human factors) is the scientific discipline concerned with the understanding of
interactions among humans and other elements of a system, and the profession that applies theory, principles, data
and methods to design in order to optimize human well-being and overall system performance.
 1. CLEAN DESIGN - Creating a clean, appealing website design is essential for providing a positive user
experience that encourages customers to return.

2. EFFECTIVE COLOR SCHEME - Picking the right color scheme for your website is vital. Different colors can
evoke different emotions, and it's important to consider your company's niche, target audience, branding,
and color theory basics.

3. FUNCTIONALITY - When thinking about functionality, there are a few matters to consider. Namely, is the
website functional in the literal sense?

4. NAVIGATION – Navigation should be improved efficiency and appeal, including a site map removing
unnecessary or underperforming pages, and streamlining navigation to reduce load time and improve quality
of online presence.

5. USABILITY AND USEFULNESS – Easy to use websites are more likely to attract customers and boost
sales. Clear, succinct product and service information can improve usability.

6. UP TO DATE – An on-site blog helps keep customers informed about the latest products, company events
and industry-related information.

7. COMPATIBILITY WITH MULTIPLE BROWSERS – As technology evolves there is a constant increase in

8. MOBILE SITES VS RESPONSIVE SITES – Not all people have access to desktop consoles, some of them
prefer to use mobile phones to surf in the internet, because of its convenience.

9. CAPTCHA – Captcha tests are short, random letters and numbers typed before submitting a web-based
form to differentiate humans from robots, saving businesses time and money.

10. ORIGINAL CONTENT - Writing original, high-quality content that is pertinent to your business and products
is essential when establishing a website. everything, including the caliber of your content. When utilized
sparingly, keyword research can provide topic ideas and assist users in finding the information they're
looking for.

SENSORS

 MOTION
 PRESSURE/TOUCH
 TEMPERATURE
 PROXIMITY
 LIGHT
 SOUND
 MOISTURE
 GASSES

THE HUMAN (GROUP 4)

RESPONDERS - In the computer world, responders can refer to those who respond to a system or network breach or
provide technical support and maintenance to ensure system stability.
HUMAN MEMORY - memory contains our knowledge of actions or procedures. It allows us to repeat actions, to use
language, and to use new information received via our senses. It also gives us our sense of identity, by preserving
information from our past experiences.

SENSORY MEMORY - Our sensory organs are the source of sensory memory, which are memories that are
temporarily stored (such as our eyes or our nose). Usually, they are only kept for less than 500 milliseconds.

HUMAN ERRORS

What is Human error? Human error is the source of most problems in any embedded system

SYSTEM DESIGN ERRORS

ERROR FOR THE HUMAN COMPUTER INTERFACE

TYPES OF ERROR AND MENTAL MODEL

Right intentions, but failed to do it right

Cause: Poor physical skills, inattentive etc

Change to aspect of skilled behavior can cause slip

MISTAKES

 Wrong intention
 Cause: Incorrect understanding
 Humans create mental models explains behavior if wrong (different from actual system) errors can occur

SOURCE OF HUMAN ERRORS

REASONS OF ERRORS
1. Wrong man
2. Bad design
3. Response time
4. Incompetence
5. Lack of attention or concentration
6. Too many information
GOALS OF HCI

1. EASY TO USE – This involves designing interfaces that are intuitive and easy to navigate.

2. RANGE OF USERS – This includes designing interfaces that are usable by people of ages, abilities and
cultural backgrounds.

3. MAKE TECHNOLOGY USEFUL – This involves designing interfaces that meet the needs and goals of the
users, and that provide them with information and tools they need to complete their tasks.

4. MAKE TECHNOLOGY DESIRABLE – This involves designing interfaces that are visually appealing and
engaging and that provide a positive user experience.

5. MAKE TECHNOLOGY SAFE AND SECURE – This involves designing interface that are easy to use and
that protects users’ privacy and security.