TM112 Meeting5-Crossing boundaries.pptx

Meeting #5
Block 1 (Part 6)
Crossing boundaries
1
TM112: Introduction to Computing and
InformationTechnology
OU Materials, PPT prepared by Dr. Ahmad Mikati
14 October 2023 TM112-AOU

Part 6 Crossing boundaries
2
6.1 Introduction
6.2 Face to face
6.3 Emergence of the interface3.3 Compression of digital
files
6.4 Design
6.5 Usability and accessibility
Contents

Learning Outcomes
After studying this part, you should be able to:
• explain the meaning of the term ‘human–computer interaction’ (HCI)
and its importance.
• explain the meaning of key terms in HCI explain what design is and
why it is important
• reflect on the role of user interfaces in the success or failure of a
computer system
• apply design principles of HCI in simple situations
• evaluate an interface using one or more user-evaluation techniques.
3

• Given the range of people using computer-based technologies,
most of whom are unfamiliar with what goes on inside the
computer and given the wide range of uses to which these
technologies are increasingly being put, there is a need to find
new ways to interact with computers. An interface can take
many forms, and a good way to think about an interface is as a
‘shared boundary’ between the computer and the user.
• In this part, you will examine the different ways in which
humans can interact with computers through the interface.
Most importantly, you will learn some of the basic skills and
techniques associated with building good interfaces.
4
Introduction

Face to face
5
Human–computer interaction (HCI)
• HCI is the study of how humans interact with computers and their
applications.
HCI looks at the design of computer systems in which humans and computers
need to work together and tells us how to build user interfaces that are safe,
efficient, easy and enjoyable to use (as well as functional).
• For designers, interaction is not limited to the connection between humans
and computers; rather, it is a way of framing the relationship between
people and the objects that have been designed for them.
• For human–computer interaction (HCI) practitioners, interaction is
generally conceived in terms of the feedback loop arising from the flow of
information between a person and a computer system.
14 October
2023
TM112-AOU

Face to face
6
Users
The term ‘user’, which has its origin in late 1970s engineering,
refers to a person interacting with a computer system in order to
carry out a task in pursuit of a goal.
It is common in HCI literature and the popular computing press to
come across the term ‘the user’ in connection with discussion of
personal and mobile computer-based devices.
However, there are problems with this term.
An interface can take many forms, and a good way to think about an
interface is as a ‘shared boundary’ between the computer and the
user.

Face to face
7
User interfaces (UIs)
• The user interface (UI) is simply that part of a computer
system which enables interaction between the person and the
computer.
• As users of computer-based technologies, we are
generally only concerned with the UI rather than with the
underlying computing system.
• In short, the UI is where we get face to face with the computer,
as shown in the below Figure.

Emergence of the interface
8
• With the command-line interface, human–computer interaction
is textual and language-based – in short, conversational.
• However, this conversational metaphor was retained in the
next phase of interface development, with the focus shifting
to how one might interact in a foreign country when one did
not understand the language spoken.
• This led to a shift from conversational interfaces to graphical user
interfaces (GUIs). One of the consequences of the emergence of
the GUI was the separation of the programmer’s model from the
user’s model, as shown in the Figure.
• Users no longer need to know anything about typography or
graphic design to use a modern word processor or desktop
publishing application.
Graphical User Interfaces (GUIs)

9
• The first graphical web browser made its appearance in 1993 and
introduced an intermediate model between the user and the
programmer.
• With the rise of the web, designers were faced with new
challenges.
• While GUIs required the designer to understand the user, web
user interfaces (WUIs) made any member of the public a
potential user.
Web User Interfaces (WUIs)

10
• The rise of theWUI gave people the freedom to indulge in the
incredible range of activities we see today. Services such as
Facebook, LinkedIn, Flickr andTwitter exist for a variety of
reasons, including fulfilling a more playful and engaging role
rather than achieving a set goal.
• To reflect this shift in the use of computers, HCI came to refer not
only to interactions with a computer but also to using a computer
to interact with other humans, leading to the interaction
situation shown in the below Figure.
Social and mobile interaction

11
• Perhaps the most obvious interaction issue is the small screens of
portable devices. Further problems are caused by our limited ability
to accurately identify and interact with small objects.
• As devices have become smaller, the elements of the interface such
as buttons and menus have become correspondingly larger.
• One way of overcoming these issues is to embed a tangible interface
within, or wrapped around, a computing device such as a smartphone
or a tablet so that the physical device itself becomes the interface
through sensor technologies embedded in it.
• In short, the interface not only becomes distributed over several
programmer models, but also is to be used and shared with several
applications and people, where each person may have their own
model as shown in the Figure (interaction design).
Social and mobile interaction

Design
12
• Design is an activity that refers to the process of originating and
developing a plan for a device, product, service, structure, system or
component on purpose.
• In design disciplines, by contrast, trade-offs are more difficult to
identify and to measure because they rest on human needs, desires
and values.
• One of the basic goals of HCI design is to improve the interactions
between humans and computers by making the computers.
• Presenting data in a way that provides useful information to users
allows them to make sense of their interactions with computers and
to make appropriate decisions in particular situations.
• Depending on the design of the interface, users of a computer
system will determine whether the whole system is usable.
Why design is important

Design
The importance of good user interface design
Bad design can result in loss of business.
• A good UI is:
• One that is easy to use and easy to understand;
• One that meets the needs of the intended users;
• One that supports users in the tasks they wish to
undertake.
• A good UI designer thinks about the users of the UI and pays
great attention to the usability of the UI for users.
• A cardinal rule for good UI design is always to be aware of a
user’s needs.
13

User Interface Essentials
User interface design principles
• There are several UI design principles in the HCI
literature.
• The best known are those applying to visibility,
feedback, affordance, simplicity, structure, consistency
and tolerance of UI designs.
• Each design principle has helpful guidelines associated
with it and their application is described by means of
examples.
14

15
Visibility
• Visibility in the context of UI design means making it clear
what a UI element is used for.
• All UI elements should have good visibility.
• This can be dine by good labeling (text or image).
• Examples:
• In a UI for DVD player, standard recognizable symbols are
used (Figure 19).
• Buttons have labels to make their purpose clear for users
(Figure 20).
Figure 19 Figure 20

16
Feedback
• Feedback in the context of UI design means making it clear what
action has been achieved through the use of the UI element.
• Feedback is used to say that one part of an action has finished,
and another can begin.
• Feedback can be visual, audible or tactile.
• Examples:
• When setting an alarm on your smartphone, a small picture of a bell
appears next to the time display, indicating that an alarm has been
set.
• When pressing any key of a cell phone, a beep is heard.
• When pressing a button on a UI, the button is darkened.

17
Affordance
• Affordance in the context of UI design means making it clear how a UI
element should be used.
• Affordance is concerned with how to use an object, not what the object
is for or whether to use it, which are issues of system functionality and
context of use, respectively.
• At a very simple level, to afford means ‘to give a clue’ of how to interact.
• Examples:
• InWindows OS, buttons are given a shadow which affords pushing.
• The underlining of links on web pages affords clicking.

18
Simplicity
• Simplicity means keeping things as simple as possible.
• To achieve simplicity, employ actions, icons, words and user interface controls
that are natural for the user.
• Examples:
• Use simple language.
• Break complex tasks into simpler subtasks.
• Find out what tasks are most common for your users and make these as short and
simple as possible for the user to achieve.
Tolerance
• Tolerance refers to the ability of a UI to prevent errors if possible, or
to make them easy to recover from, if not.
• Examples:
• To prevent wrong choice of menu item, some items might be grayed out.
• Before deleting a file, a confirm message is displayed.

19
Figure 22
Figure 21
Structure
• A UI needs to be structured in way that is meaningful and useful to user.
• It is important to structure the UI in a way that will be meaningful for the user.
• Example: In MSWord UI, related commands are grouped together (Fig. 21).
Consistency
• Consistency in appearance, positioning and behavior within the UI makes a
system easy to learn and remember.
• Example: Icons in the top bar of different MS Office applications are the same
and function in a similar way (Check Figure 22 and compare it with Figure 21).

User-centered design (UCD)
20
• The separation of models led to a shift in software design.
• The essence of interface design is what is known as user-
centered design (UCD), where users are at the center of the
design model.
• In addition, programmers often make the mistake of thinking
that they are users too, and so they design things around what
is convenient for them.
• The main idea behind UCD is that users know best what their
needs, goals and preferences are.
• The role of designers is to find out these things and then
design with them in mind.

Usability and Accessibility
21
A good interface is one that is easy to use and easy to understand, meets the
needs of the intended users, and supports users in the tasks they wish to
undertake.
A good interface designer thinks about the users of the interface
and pays great attention to the usability of the interface for users.
What is usability?
According to Part 11 of ISO 9241, the international standard ‘Ergonomic
requirements for office work with visual display terminals’, usability refers to:
The extent to which a product can be used by specified users to achieve
specified goals with effectiveness, efficiency, and satisfaction in a specified
context of use.

22
Usability
The extent to which a product can be used by specified users to achieve
specified goals with effectiveness, efficiency, and satisfaction in a specified
context of use.
 Effectiveness refers to the goals or tasks being achieved accurately and
completely.
 Efficiency refers to the resources expended to achieve the goal or task,
including, for example, time and effort.
 Satisfaction refers to the comfort and acceptability of the computer
system to its user

23
Usability list of principles: (applies to all types of computer interface,
for example the interfaces to operating systems, word processors,
calculators and so on, not just web interfaces)
 Visibility of system status. Always keep users informed about
what is going on, through providing appropriate feedback within
reasonable time.
 Match between system and the real world. Speak the users’
language, using words, phrases and concepts familiar to the user,
rather than system-oriented terms.
 User control and freedom. Provide ways of allowing users to
easily escape from places they unexpectedly find themselves, by
using clearly marked ‘emergency exits’.
 Consistency and standards. Avoid making users wonder whether
different words, situations, or actions mean the same thing.

24
• Help users recognize, diagnose, and recover from errors. Use plain
language to describe the nature of the problem and suggest a way of
solving it.
• Error prevention.Where possible prevent errors occurring in the
first place.
• Recognition rather than recall. Make objects, actions, and options
visible.
• Flexibility and efficiency of use. Provide accelerators [for example,
keyboard shortcuts] that are invisible to novice users, but allow more
experienced users to carry out tasks more quickly.
• Aesthetic and minimalist design. Avoid using information that is
irrelevant or rarely needed.
• Help and documentation. Provide information that can be easily
searched and provides help in a set of concrete steps that can easily
be followed.

25
Accessibility
• Accessibility means having equal access to products,
information and services regardless of people’s physical or
developmental abilities or impairments.
• This means that people with different abilities can perceive,
understand, navigate and interact with computer systems.
• A key point to remember is that accessibility is about
considering the wide spectrum of human physical and
cognitive abilities.
• These different abilities can sometimes be temporary, for
example, difficulty in using a keyboard due to a broken arm.

26
Accessibility
• It is important to appreciate that if something is universally
usable, it will be universally accessible.
• This means that some products designed specifically for
disabled users can be beneficial to all users.

27
Accessibility- Examples
 Some users need to be able to adjust font sizes, screen
resolution, and so on.
 Other users might find combinations of foreground and
background color make text hard to read.
 Some users have a screen reader, which uses a synthesized voice
to read on-screen text aloud.
 Other users have a speech-driven web browser, in which
commands are spoken into a microphone.
 Screen reader and speech-driven web browser are examples of
adaptive technology or assistive technology

Evaluation with users
28
• Earlier in this lecture, you learned that one of the principles on which
UCD is based is iterative design, which involves researching user
requirements and then following a design, build, evaluate and then
redesign loop.
• User evaluation is a critical activity within the design process since it
allows feedback to be incorporated so as to improve the design of the
system.
• The following methods are often used at the start of a design or
redesign process in order to establish initial requirements, as well as at
stages during the iterative design process.
 User observation
 Interviews
 Questionnaires

Evaluation with users
29
Questionnaires: As with interviews, questionnaires can be distributed to
users both before and after they have interacted with a system.
They offer less scope for exploration and obtaining open-ended feedback
from users than interviews because they are usually completed in the
absence of the person who constructed them
User observation: User observation involves watching what users do
and listening to what they say when carrying out tasks.
Interviews: Interviews involve asking users a series of questions, which
can be closed, open-ended or a combination of the two, and making a
note of their responses.

TM112 Meeting5-Crossing boundaries.pptx

Recommended

Recommended

More Related Content

Similar to TM112 Meeting5-Crossing boundaries.pptx

Similar to TM112 Meeting5-Crossing boundaries.pptx (20)

Recently uploaded

Recently uploaded (20)

TM112 Meeting5-Crossing boundaries.pptx