Introduction to HCI

HCI (human-computer interaction) is the study of how people interact with

computers and to what extent computers are or are not developed for
successful interaction with human beings.

As its name implies, HCI consists of three parts: the user, the computer itself,
and the ways they work together.

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. Also, different users form different
conceptions or mental models about their interactions and have different ways
of learning and keeping knowledge and. In addition, cultural and national
differences play a part.

Computer
When we talk about the computer, we're referring to any technology ranging
from desktop computers, to large scale computer systems. For example, if we
were discussing the design of a Website, then the Website itself would be
referred to as "the computer". Devices such as mobile phones or VCRs can
also be considered to be “computers”.

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 and computers, and consult with likely users
throughout the design process. In real systems, the schedule and the budget
are important, and it is vital to find a balance between what would be ideal for
the users and what is feasible in reality.

The Goals of HCI

The goals of HCI are to produce usable and safe systems, as well as
functional systems. In order o produce computer systems with good usability,
developers must attempt to:

understand the factors that determine how people use technology

develop tools and techniques to enable building suitable systems

achieve efficient, effective, and safe interaction

put people first

Underlying the whole theme of HCI is the belief that people using a computer
system should come first. Their needs, capabilities and preferences for
conducting various tasks should direct developers in the way that they design
systems. People should not have to change the way that they use a system in
order to fit in with it. Instead, the system should be designed to match their
requirements.

Usability

Usability is one of the key concepts in HCI. It is concerned with making

systems easy to learn and use. A usable system is:

easy to learn

easy to remember how to use

effective to use

efficient to use

safe to use enjoyable to use

 Visual Design
Visual design focuses on the aesthetics of a site and its related materials by
strategically implementing images, colors, fonts, and other elements. A
successful visual design does not take away from the content on the page or
function. Instead, it enhances it by engaging users and helping to build trust
and interest in the brand.

Basic Elements of Visual Design

The basic elements that combine to create visual designs include the
following:

Lines connect two points and can be used to help define shapes, make
divisions, and create textures. All lines, if they’re straight, have a length,
width, and direction.

Shapes are self-contained areas. To define the area, the graphic artist uses
lines, differences in value, color, and/or texture. Every object is composed of
shapes.

Color palette choices and combinations are used to differentiate items, create
depth, add emphasis, and/or help organize information. Color theory
examines how various choices psychologically impact users.

Texture refers to how a surface feels or is perceived to feel. By repeating an

element, a texture will be created and a pattern formed. Depending on how a
texture is applied, it may be used strategically to attract or deter attention.

Typography refers to which fonts are chosen, their size, alignment, color, and
spacing.
Form applies to three-dimensional objects and describes their volume and
mass. Form may be created by combining two or more shapes and can be
further enhanced by different tones, textures, and colors.

Principles for Creating a Visual Design

A successful visual design applies the following principles to elements noted

above and effectively brings them together in a way that makes sense. When
trying to figure out how to use the basic elements consider:

Unity has to do with all elements on a page visually or conceptually appearing

to belong together. Visual design must strike a balance between unity and
variety to avoid a dull or overwhelming design.

Gestalt, in visual design, helps users perceive the overall design as opposed
to individual elements. If the design elements are arranged properly, the
Gestalt of the overall design will be very clear.

Space is “defined when something is placed in it”, according to Alex White in

his book, The Elements of Graphic Design. Incorporating space into a design
helps reduce noise, increase readability, and/or create illusion. White space is
an important part of your layout strategy.

Hierarchy shows the difference in significance between items. Designers

often create hierarchies through different font sizes, colors, and placement on
the page. Usually, items at the top are perceived as most important.

Balance creates the perception that there is equal distribution. This does not
always imply that there is symmetry.

Contrast focuses on making items stand out by emphasizing differences in

size, color, direction, and other characteristics.

Scale identifies a range of sizes; it creates interest and depth by

demonstrating how each item relates to each other based on size.
Dominance focuses on having one element as the focal point and others
being subordinate. This is often done through scaling and contrasting based
on size, color, position, shape, etc.

Similarity refers to creating continuity throughout a design without direct

duplication. Similarity is used to make pieces work together over an interface
and help users learn the interface quicker.

Example of Pulling it all together

Applying design principles to the basic elements can seem overwhelming at

first but once you start pulling a page or concept together, it becomes easier.
Below is an example homepage that features some of the principles in action:

Color contrast was applied to the logo making the word “stop” stand out

Text spacing and size creates a visual hierarchy

Featured image in the carousel dominates over the smaller images below it to
create a focal point

White space is used around text and between sections to allow the page to
breath
Textured background to helps the elements on the page stand out on top of it

Map showing scale

Lines to divide sections

Shapes to create buttons.

Typography
Let’s kick off with the basics: just what actually is typography?

Typography is the art of arranging letters and text in a way that makes the
copy legible, clear, and visually appealing to the reader.

It involves font style, appearance, and structure, which aims to elicit certain
emotions and convey specific messages. In short, typography is what brings
the text to life.

Why is typography important?

Typography is so much more than just choosing beautiful fonts; it’s a vital
component of user interface design.

Good typography will establish a strong visual hierarchy, provide a graphic

balance to the website, and set the product’s overall tone. Typography should
guide and inform your users, optimize readability and accessibility, and
ensure an excellent user experience.

Let’s delve a little deeper into why typography is so important.

3. The different elements of typography

To get started in typography, you first need to get to grips with the eight
essential typographical design elements.

3.1. Fonts and typefaces

There’s some confusion surrounding the difference between typefaces and

fonts, with many treating the two as synonymous.

A typeface is a design style that comprises a myriad of characters of varying

sizes and weight, whereas a font is a graphical representation of a text
character.

Put simply, a typeface is a family of related fonts,

while fonts refer to the weights, widths, and
styles that constitute a typeface.

There are three basic kinds of typeface: serif,

sans-serif, and decorative.

Icon Design:
The process of creating visual symbols or graphics that represent concepts,
objects, or ideas, typically using simple, recognizable, and scalable designs to
communicate meaning and functionality, often for digital interfaces, software,
websites, or mobile applications.

Icon Design: The art of designing simplified, visually appealing, and

meaningful symbols that convey information, navigate users, and enhance
user experience in digital and physical environments.
Key elements:

1. Simplicity

2. Recognizability

3. Scalability

4. Consistency

5. Clarity

6. Aesthetics

7. Functionality

Principles of icon design in UI?

Icons are an object, idea, or action’s visual representation. In a graphical user

interface (GUI), icons must convey meaning, brand image, and visual appeal.
The figure below shows different types of icons on a phone’s home screen:

Different icons

Principles of icon design

Clarity - an icon’s primary goal is to clearly convey meaning. Successful icons

have become universal over time and are recognized across the world. Below
are a few examples of clear vs. confusing icons:

Readability - an icon should be easily readable. Blurred or light icons that are
difficult to read are bad examples. When multiple shapes are being used in an
icon, there should be enough space between them to see clearly. Too many
strokes make it hard to read the icon. As shown below, lighter colors make it
difficult to read, and Google maps on the right provides an excellent example
of being readable on a small scale.
Alignment - to ensure alignment within an icon, make sure that the elements
are optically aligned with each other.

Brevity - any idea expressed concisely feels efficient. It is important to keep

icons, given the limited amount of space available. Moreover, the simpler the
icon, the easier it is to convey meaning. As shown below, Instagram’s icons
are simple and understandable:

Consistency - we should maintain the same stylistic rules for icons from the
same icon family. Any icon has a certain visual weight determined by stroke
thickness, size, shape, and fill. Keeping these parameters maintains
consistency.

Personality - every icon has a particular flavor, feel, and mood it reflects, e.g.,
LinkedIn icons are formal and light.

Ease of use - after designing an icon set, it should be tested and iterated over
if required to ensure it is easy to use.

Icons are an essential part of an interface and help improve user experience.
However, a poorly designed icon confuses the users and does more harm
than good. The first priority should be to ensure that icons convey meaning
and ensure that they are aesthetically pleasing.

AUGMENTED REALITY

Augmented reality is designed to superimpose digital elements onto the real

world. It uses sensors to understand the world around it. With a combination
of GPS, gyroscopes (a device that tells when a moving object switches
directions) and accelerometers (a sensor typically in phones that measures
the acceleration of the device), AR apps can figure out where a user is and
what direction they’re facing. One of the most popular examples of AR is
the Pokemon Go phone app, which allows players to locate and collect
Pokemon characters that pop up in the real world, like in the park, in the living
room or on the sidewalk. TikTok even got in on the action when the company
released its AR filters via their software called Effect House. This software
allows creators to make filters that immerse users into worlds like a European
art museum, or even walk around with the popular “Shrek in the Sky” filter.
There are other popular uses of AR in everyday life, like furniture companies
like Ikea allowing customers to superimpose furniture into their homes to
decide if they like how it looks, neurosurgeons using an AR scan of of a brain
to guide them through surgery and broadcasters during football games using
AR to draw lines on the field to analyze plays.

TYPES OF AUGMENTED REALITY

According to Microsoft, there are two types of AR:

Maker-based AR is triggered by physical photos or markers captured by

smartphone cameras to place the digital components on top of it. These
markers can represent an object or visual component, like a logo, or a QR
code.

Marker-less AR is more complex and doesn’t rely on markers and instead

allows users to decide where to display the content. The devices use a
recognition algorithm to look for patterns, colors and similar features to
determine what an object is. Then, the devices will rely on GPS,
accelerometers, cameras and compasses to superimpose an image within the
real-world surroundings.

VIRTUAL REALITY.

Unlike AR, virtual reality is an immersive experience that isolates users from
the real world, usually with the help of a headset and headphones to help. All
five senses are also able to be incorporated. Instead of incorporating things
into the real world, it replaces the real world and places users in completely
new worlds. The technology allows users to use computer automation for a
three-dimensional experience. VR combines hardware, like headsets,
controllers and treadmills and software, like game engines, content
management and training simulators to create the full experience. The two
main features of VR are immersion, which works by canceling out the physical
world and fully placing users in the virtual world, and interaction which
elevates the immersion experience by allowing users to control elements.
Several fields have incorporated VR, like retail, which allows users to try on
clothes, accessories or even a new haircut. VR in this industry is expected to
grow by around $18 billion by 2028. The automotive industry also uses VR,
with companies like Mercedes-Benz, Audi and Tesla using the technology to
build virtual showrooms. The global automotive VR industry is predicted to
grow to $54 billion by 2026.

Internationalization.
Internationalization describes the process of designing products to meet
the needs of users in many countries or designing them so they can be easily
modified, to achieve this goal. Internationalization might mean designing a
website so that when it's translated from English to Spanish, the aesthetic
layout still works properly. This may be difficult to achieve because many
words in Spanish have more characters than their English counterparts. They
may thus take up more space on the page in Spanish than in English.

In the context of economics, internationalization can refer to a company that

takes steps to increase its footprint or capture greater market share outside of
its country of domicile by branching out into international markets. The global
corporate trend toward internationalization has helped push the world
economy into a state of globalization, in which economies throughout the world
become highly interconnected due to cross-border commerce and finance. As
such, they are greatly impacted by each others' national activities and
economic well-being.

There are many incentives that might inspire companies to strive for
internationalization. For example, in the United States companies that pay
exorbitant overhead costs can shave expenses by selling products in nations
with relatively weaker currencies or in countries that have lower costs of living.
Companies may also benefit from internationalization by reducing the cost of
business via reduced labor costs that are outsourced to foreign markets
where goods will be sold. Internationalization can thus lead to product
internationalization since products sold by multinational companies are now
often used in several different countries.
Examples of Internationalization.

When a company produces goods for a wide range of customers in different

countries, the products that are internationalized often must be localized to fit
the needs of a given country's consumers.

For example, an internationalized software program must be localized so that

it displays the date convention as "November 14" in the United States, but as
"14 November" in England. Likewise, units in America are measured in feet or
miles, while in Europe and Canada they use the metric system. This means
that cars sold across these markets must be able to quickly interchange
between miles and kilometers.
Prototyping
A prototype is a draft version of a product that allows you to explore your
ideas and show the intention behind a feature or the overall design concept to
users before investing time and money into development. A prototype can be
anything from paper drawings (low-fidelity) to something that allows click-
through of a few pieces of content to a fully functioning site (high-fidelity).

Benefits of Prototypes

It is much cheaper to change a product early in the development process than

to make change after you develop the site. Therefore, you should consider
building prototypes early in the process. Prototyping allow you to gather
feedback from users while you are still planning and designing your Web site.

Nielsen has found that the biggest improvements in user experience come
from gathering usability data as early as possible. He notes that it’s cheaper
to make changes before any code has been written than to wait until after the
implementation is complete.
High-Fidelity and Low-Fidelity Prototyping

There is an on-going debate about using low versus high fidelity prototyping
and how much a prototype should resemble the final version of your
design. Both have been found to be basically equivalent in finding usability
issues (Walker et al 2002). With that said, there are things to consider when
trying to decide which option is best for your project:

Low-fidelity prototypes are often paper-based and do not allow user

interactions. They range from a series of hand-drawn mock-ups to
printouts. In theory, low-fidelity sketches are quicker to create. Low-fidelity
prototypes are helpful in enabling early visualization of alternative design
solutions, which helps provoke innovation and improvement. An additional
advantage to this approach is that when using rough sketches, users may feel
more comfortable suggesting changes.

High-fidelity prototypes are computer-based, and usually allow realistic

(mouse-keyboard) user interactions. High-fidelity prototypes take you as close
as possible to a true representation of the user interface. High-fidelity
prototypes are assumed to be much more effective in collecting true human
performance data (e.g., time to complete a task), and in demonstrating actual
products to clients, management, and others.

Creating Paper Prototypes

Paper-based prototyping is the quickest way to get feedback on your

preliminary site information architecture, design, and content. Paper
prototypes are easy to create and require only paper, scissors and sticky
notes.

Use one piece of paper for each Web page you create and then have users
try them out in a usability test. Users indicate where they want to click to find
the information and you change the page to show that screen.
 User Documentation.
User documentation, also known as end-user documentation, is any form of
documentation intended for the end-user of a product or a service. The
purpose of this documentation is to guide the users on how to properly install,
use, and/or troubleshoot a product.

We’ve all read some form of user documentation at some point in our lives.
They usually come with products in the form of user manuals/guides that have
a bit of a learning curve, such as gadgets, software applications, and
appliances, among other things.

Without this documentation, an average user might not get the full value out of
the product. This, in turn, could result in unhappy customers and high
customer care costs and churn rates.

What’s more – user documentation comes in all shapes and sizes. It doesn’t
necessarily have to be in physical, paper form. It can also be a PDF file, an
infographic, or even a collection of web pages with helpful resources, like so:

That’s just the tip of the iceberg.

To summarize – user documentation is anything that prevents the end-user

from directly reaching out to your customer service department regarding any
confusion about your product.

If you’re interested in learning how to create great user documentation, then

check out our technical writing certifications to help you do just that.

The Different Types of User Documentation

As mentioned earlier, user documentation comes in various shapes and
forms.

However, there is a simple way to categorize them on the basis of the

problems they solve.

Keeping that angle in mind, user documentation can be classified into the
following types:

Installation/Setup Guide

Getting started with certain products, like enterprise software applications,

gadgets, fixtures, etc., requires some level of technical expertise.

To that end, manufacturers provide such products with comprehensive

installation or setup guides, including detailed, step-by-step instructions to
make the overall process user-friendly.

With the help of these tutorials, businesses ensure that the end-users don’t
mess up when starting their journeys with their products.

Comprehensive User Manual

This refers to the complete, in-depth user guide that comes with any product
with even the slightest learning curve for any product.
It includes everything, from an instruction manual on how to install a product,
to troubleshooting steps, and a breakdown of the user interface and/or the
various features in between.

Most of the time, whenever someone talks about user documentation, they’re
referring to these user manuals.

Reference Guides

Another common type of user documentation is reference guides.

These user documents come with software products and are intended for
more experienced end-users.

A reference document sheds light on the functionality of any one aspect or

feature of a product. That way, if any user, who already knows a great deal
about the product at hand, can get quick information about certain features
without having to skim through the entire user manual.