3.3.
7 Three dimensional interfaces
3.4 Context: Social and Organisational
4.0 Conclusion
5.0 Summary
BASIC
6.0 COMPONENTS
Tutor OF HUMAN COMPUTER INTERACTION
Marked Assignment
7.0 Further Reading/ References
1.0 Introduction
The components of Human Computer Interaction comprise the Interaction models that concern translation
between the user and the computer system, Ergonomics that describe the physical characteristics of
interaction, the Interaction styles that express the nature of user and system dialog and finally the context
of the social, organizational and the motivational aspect of interaction.
This unit briefly describes each of these components with a desire of giving an overview of the general
requirements for the design of human computer interaction systems.
2.0 Objectives
By the end of this unit, you should be able to :
• Understand the Interaction models of interface between the user and system
•Describe the cycle of the execution and evaluation loop
•Explain the concepts of ergonomics
•Know the common interaction styles
•Understand the context of the social, organizational and the motivational aspects of interaction
• The usefulness of the WIMP Interface
3.0 Main Content
3.1 The Interaction Models
The interaction models comprise
The terms of Interaction,
The Donald Norman Model
The Interaction framework
3.1.1 Terms of interaction
Domain: This is the area of work under study e.g. a graphic design
Goal : This is what you want to achieve e.g. to create a solid red triangle
Task : Concerns how you go about doing it, ultimately in terms of operations or actions e.g select the fill
tool, click over the triangle
3.1.2 Donald Norman's model :
These are in seven stages as follow:
• The user establishes the goal
• The user formulates intention
• The user specifies actions at interface
• The user executes the action
• The user perceives the system state
• The user interprets the system state
• The user evaluates the system state with respect to goal
33
Norman' s model concentrates on the user's view of the interface
Execution and evaluation loop
goal
execution evaluation
system
Interpretation:
Goal:
The user establishes the goal
Execution :
The user formulates intention
The user specifies actions at interface
The user executes the action
Evaluation :
The user perceives the system state
The user interprets the system state
The user evaluates the system state with respect to goal
Donald Norman's model
Norman' s model can be applied through:
Gulf of Execution that evaluates the user' s formulation of actions where actions are allowed by the system
Gulf of Evaluation where the user's expectation of changed system state represent actual presentation of
this state
Interaction could harbour some human errors which may be slips and mistakes.
Slips may include lack of understanding the system and goal, incorrect formulation of action, incorrect
action and mistake of not even having the right goal !
To fix slips, better interface design should be carried out while to avoid mistakes, one should better
understand the system
To avoid some of the Human errors, Abowd and Beale framework is adopted. Abowd and Beale framework
is an extension of Norman model and it has 4 parts namely: i. the user, ii. the input, iii. the system, and iv.
the output while each framework has its own unique language.
If interaction is the translation between languages, and if there are problems in interaction, then there
would be problems in translation
Using Abowd & Beale's model
The user intentions could be translated into actions at the interface, translated into alterations of system
state, reflected in the output display or interpreted by the user himself.
The general framework for understanding interaction are that interaction is not restricted to electronic
computer systems alone, all major components involved in interaction should be identified. The
comparative assessment of systems should be allowed. The framework also considers an abstraction.
34
3.2 Ergonomics
This considers both the physical aspects of interfaces and the industrial interfaces .
Ergonomics is the study of the physical characteristics of interaction. It is known as human factors.
Ergonomics is good at defining standards and guidelines for constraining the way we design certain aspects
of systems
Examples of Ergonomics include:
Arrangement of controls and displays such as the controls grouped according to function, frequency and
sequence of use.
Surrounding environment such as the seating arrangements adaptable to cope with all sizes of user, health
issues such as the physical position, environmental conditions ( temperature, humidity ), lighting, and noise.
Use of colour such as the use of red for warning, green for okay, and awareness of colour - blindness etc.
The user interacts with real world through interface issues, feedback and delays.
3.3 Common Interaction styles
Two major classes of interaction styles will be considered, they are :-
Dialogue Style of Interaction between computer and user
Distinct styles of interaction
Both are expressed in the following common forms of interfaces:
• Command line interface
• Menus
• Natural language
• Question and answer, and query dialogue
• Form-fills and spreadsheets
• WIMP
• Point and click
• Three-dimensional interfaces
3.3.1 Command line interface
This is the way of expressing instructions to the computer directly through the function keys, single
characters, short abbreviations, whole words, or a combination suitable for repetitive tasks.
The interface is better designed for expert users than novices because it offers direct access to system
functionality. However, the command names and abbreviations used should be meaningful !
A typical example is the Unix system command line interface.
3.3.2 Menus
Menus is a set of options displayed on the screen. The Menu Options are visible, it has a less recall
characteristic that make it easier to use .
The visible options rely on recognition so the names should be meaningful. The selection is done through
numbers, letters, arrow keys, mouse and/ or combination of any of them e.g. mouse plus accelerators
.Often, the options are hierarchically grouped. But sensible grouping is needed.
Menus are restricted form of full WIMP system .
3.3.3 Natural language
This is the language familiar to the user. It may be in form of speech recognition or a typed natural
language.
35
Problems with in this kind of interaction are that the language may be vague, ambiguous, and hard to be
recognised.
Design solutions to language interface problems are for the user to try to understand a subset and pick on
key words .
3.3.4 Query interfaces
These comprise question and answer interfaces in which the user is led through interaction via series of
questions. Though with restricted functionality, this kind of interface is suitable for novice users. It is often
used in information systems.
Query languages ( e.g. SQL)
This is used to retrieve information from database. It requires understanding of the database structure and
language syntax, hence requires some expertise
3.3.5 Form-fills and Spreadsheets
Form -fills are primarily designed for data entry or data retrieval. It is a screen like paper form to which data
is put in relevant place .
It requires a good design and obvious correction facilities.
See illustration below
-
Go faster Travel Agency Booking ED S
Go-faster Travel Agency Booking
Please enter details of journey :
*4111 Start from : ( Lancaster
Destination : |Atlanta
i Via : |Leeds
i/i
First class / O Second class / O Bargain
O Single / Return
ft Seat number : \
3
S’
I
Example of a form -fill
Spreadsheets
Spreadsheets are sophisticated variations of form-filling in which grid of cells contain a value or a formula .
The formula can involve values of other cells e.g. sum of all cells in this column.
The user can enter and alter data in spreadsheet to maintain consistency.
The first spreadsheet introduced was VISICALC, followed by Lotus 1- 2-3. Micro Soft Excel is the most
common today
3.3.6 WIMP Interface
This interface comprises Windows, Icons, Menus, and Pointers or Windows, Icons, Mice, and Pull -down
menus !
The interface is the default style for majority of interactive computer systems, especially PCs and desktop
machines.
Elements of the WIMP interface
The elements include windows, icons, menus, and pointers. In some other cases they may be buttons,
toolbars, palettes, and dialog boxes.
Understanding the concept of 'Look and feel'
WIMP systems have the same elements : as windows, icons., menus, pointers, buttons, etc. but have
different window systems that behove differently . For example, Macintosh Operating System ( MacOS)
compared with Windows menus.
The combination of the appearance and the behaviour is the 'look and feel'
36
File Edit Options Font
Typewriter
Screen
Times
Pointers
Pointers are important WIMP style components that point on and select. They are activated by the use of
mouse, track pad, joystick, trackball, cursor keys or keyboard shortcuts. They are in wide variety of
graphical images. See examples below.
Point and click interfaces
Point and click interfaces are used in multimedia, web browsers, and hypertext. You just click something
such as icons, text links or location on map. It requires minimal typing.
Scrollbars
Scrollbars allow the user to move the contents of the window up and down or from side to side.
Title bars
Title bars describe the name of the window
Buttons
This is an individual and isolated region within a display that can be selected to invoke an action
The Special kinds that exist are
The radio buttons with a set of mutually exclusive choices and the check boxes with a set of non -exclusive
choices.
Gender O Male ® Female
Interests: 0 web development user interfaces 3 music
Subnet]
Toolbars
These are long lines of icons with fast access to common actions and are often customizable :
You can choose which toolbars to see and choose whot options are on it
Dialogue boxes
These are information windows that pop up to inform of an important event or requested information, for
example when saving a file, a dialogue box is displayed to allow the user to specify the filename and
location. Once the file is saved, the box disappears .
The interactivity of dialogue boxes
They are easy to focus on look and feel.
Other types of interaction styles are speech-driven interfaces
The development of this kind of interface is yet to be perfect and accurate; though it is rapidly improving.
Example of speech driven interface dialogue on an airline reservation :
reliable "yes" and "no" ?
+ System reflects back its understanding
"you want a ticket from New York to Boston ?"
38
3.3.7 Three dimensional interfaces
These are virtual reality 'ordinary' window systems highlighting visual affordance. The indiscriminate use
can however be confusing!
There are also three dimensional ( 3 D ) workspaces used for extra virtual space with light and occlusion that
give deep distance effects.
For typical computer displays, three- dimensional images are projected on them in two dimensions.
Three-dimensional graphics are currently mostly used in computer games, art and computer-aided design
( CAD ) . There have been several attempts at making three -dimensional desktop environments like Sun ' s
Project Looking Glass. A three - dimensional computing environment could be used for collaborative work.
For example, scientists could study three-dimensional models of molecules in a virtual reality environment,
or engineers could work on assembling a three -dimensional model of an airplane.] The Technologies
The use of three-dimensional graphics has become increasingly common in mainstream operating systems,
but mainly been confined to creating attractive interfaces — eye candy — rather than for functional
purposes only possible using three dimensions. For example, user switching is represented by rotating a
cube whose faces are each user ' s workspace, and window management is represented in the form of
Expose on Mac OS X. In both cases, the operating system transforms windows on -the-fly while continuing
to update the content of those windows.
Interfaces for the X Window System have also implemented advanced three-dimensional user interfaces
through compositing window managers such as Beryl and Compiz using the AIGLX or XGL architectures,
allowing for the usage of OpenGL to animate the user ' s interactions with the desktop.
Another branch in the three -dimensional desktop environment is the three - dimensional GUIs that take the
desktop metaphor a step further, like the BumpTop, where a user can manipulate documents and windows
as if they were " real world " documents, with realistic movement and physics.
The Zooming User Interface ( ZUI) is a related technology that promises to deliver the representation
benefits of 3 D environments without their usability drawbacks of orientation problems and hidden objects.
It is a logical advancement on the GUI, blending some three- dimensional movement with two- dimensional
or " 2.5 D " vector objects.
3.4 Context: Social and Organisational
These issues and concerns involve all possible interactions between a user and a system during its lifecycle,
including the development stage, use in context, and the impact of such use on individuals, organizations,
society, and future systems development.
Context Analysis
Context analysis includes understanding the technical, environmental and social settings where the
information systems will be used. It examines whether and how the interaction between physical and
social environment and the physiological and psychological characteristics of the user would impact users
interacting with the system.
There are four aspects in Context Analysis : physical context, technical context, organizational context, and
social and cultural context . Overall, context analysis can provide ideas for design factors such as metaphor
creation, selection and patterns of communications between users and the system.
Physical context : This considers where the tasks carried out, what entities and resources are implicated in
task operation, What physical structures and entities are necessary to understand observed task action.
For example, an ATM machine can be used in a mall outside a bank office, or in a night club. These
environments provide different levels of lighting, crowdedness, and noisiness. Thus legibility of the screen,
use of audible devices
for input or output, or even the size of the working space to prevent people nearly to see the screen could
be designed differently.
39
Technical context : This considers the technology infrastructure, platforms, hardware and system software,
wired or wireless network connection ? For example, an E-commerce website may be designed to allow
access only to people with certain browser versions. The website may also be designed to allow small
screen devices such as PDA or mobile phone to access.
Organizational context: Organizational context may play different roles in internal and external situations.
For an organizational information system to be used by the organization's own employees, organizational
context analysis answers questions such as:
What is the larger system where this information system is embedded ?,
What are the interactions with other entities in the organization ?
What are the organizational policies or practice that may affect individual' s attitude and behavior
towards using the system ?
For example, assuming that Lotus Note is used by an organization as a communication and collaboration
tool, management may depend on using the tool to set up meetings by checking employees' calendars on
mutually available time slots. The effectiveness of setting up meetings depends on whether employees use
the tool, and how they use it. The whether and how questions can be enforced by organizational policies.
Social and cultural context : What are the social or cultural factors that may affect user attitudes and
eventual use of the information system ? In an E-Commerce website example, the website can be accessed
from all over the world. It thus is a design consideration that the website allows access by people with any
language and cultural
background that can provide credit cards with the foreign currency exchange, or it is only accessible to
people who speak certain languages and are from certain cultures.
Interactions are also affected by other social and organizational context as follow:
• By other people: A desire to impress, competition among stakeholders, and fear of failure from
management
• Motivation from management as against fear, allegiance, ambition, self-satisfaction that exist
among employees
• Existing inadequate systems that may cause frustration and lack of motivation
The organizational, social and cultural context in which humans interact with IT is largely the result of the
broad adoption of IT by organizations and society to support organizational functions and goals and to
enhance society' s development. For example, organizational efficiency may be expected due to redesign of
workflows among critical business units that is affected by the implemented IT; satisfaction and retention
of customers/clients are anticipated
due to accurate and fast information gathering and presentations, to name a few. Some of the
organizational or societal impacts may not be tangible or directly attributed to HCI considerations. This
assertion is in line with the issues of determining IT values in organizations and societies.
While each of these HCI concerns may have its own importance in different situations in relation to human
motivation, it would be helpful for designers to see an overview picture of the potential HCI concerns and
goals. The purpose of this picture is not to force every IT to be compliant with all the HCI concerns, but to
provide an overall framework so that designers can use it as a roadmap and to apply it according to
different situations.
4.0 Conclusion
The knowledge of the basic components of human computer interaction aids in giving direction, focus and
human considerations pertaining to interactive design.
40
INTERACTION
2.0 STYLES AND DEVICES TECHNOLOGICAL PERSPECTIVE
OBJECTIVES
By the end of this unit, you should be able to :
•Understand
An Interaction the various
style can available
be described as interaction styles
an interaction technique that shares the same metaphor or
• principle. Examples are command line and direct manipulation user interfaces.
design Distinguish among the interaction styles
•Understand
Two major classes ofelements of WIMP
interaction styles interface
that will be considered are the dialogue style of Interaction
•
betweenUnderstand
computer and anduser
be able
and to distinctWidgets
thechoose styles of interaction
3.0 MAIN CONTENT
3.1 Interaction styles
Common Styles of Interaction are:
Command line interface
Menus
Natural language
Question and answer, and query dialogue
Form -fills and Spreadsheets
WIMP ( Widows, Icons, Menus, Pointers ) Interface
Point and Click
Three-dimensional interfaces
Graphical user interface ( GUI)
Copy and paste, Cut and paste
Single Document Interface, Multiple Document Interface, Tabbed Document Interface
Drag-and-drop
Cursor
Widgets ( computing)
Direct manipulation interface
Zooming User Interface ( ZUI )
Interaction paradigms include
Hypertext, hypermedia and hyperlinks
Speech recognition, Speech synthesis, Natural Language Processing, Non-speech audio input
Mouse gestures and handwriting recognition
Haptics and Telehaptics
Computer- mediated reality
Virtual Reality ( VR )
Augmented Reality ( AR )
CSCW : Computer Supported Collaborative ( or Cooperative ) Work, collaborative software
Ubiquitous Computing ( " ubicomp " )
Wearable computers
Brain-computer interface
Miscellaneous
Handheld devices
Human Computer Information Retrieval
Information retrieval
64
Internet and the World Wide Web
Multimedia
Software agents
Universal usability
User experience design
Visual programming languages
Brief explanation will be given on each of the common interfaces:
Command line interface
This is the way of expressing instructions to the computer directly and it comprises the function keys,
single characters, short abbreviations, whole words, or a combination of them.
The characteristics of command line interface are as follow:
It is suitable for repetitive tasks
It is more valuable for expert users than novices
It offers direct access to system functionality
The command names and abbreviations should however be meaningful for an effective interface.
A typical example is found in the Unix Operating System
Menus
These are set of options displayed on the screen
Its characteristics include the following:
The Menu Options are visible, have less recall and it is easier to use
Because it relies on recognition the names should be meaningful
Menu Selection is done by either clicking numbers, letters, using the arrow keys or mouse or combination
( e .g. mouse plus accelerators)
Menu options are often hierarchically grouped in a sensible manner.
It is a restricted form of full WIMP system
Natural language
This is a language that should be familiar to the user
It is in a form of speech recognition or typed natural language
Problems with the use of natural language are that it could be vague, ambiguous, and hard to use .
Part of the solutions to this is for the user to try and to understand a subset of the language thereby
picking on key words.
Query interfaces
This basically comprises Question and answer interfaces where the user is led through interaction via
series of questions to be answered.
It is suitable for novice users but has restricted functionality
It is often used in information systems
Some of these Query languages include the SQL used to retrieve information from database. This requires
understanding of database structure and language syntax, hence requires some expertise
Form -fills
This is primarily used for data entry or data retrieval .
It is like a screen like paper form in which data is input in relevant place .
It requires good design and obvious correction facilities
An example of a Form-fill:
65
(2- Go -faster Travel Agency Booking ED S
Go-faster Travel Agency Booking
Please enter details of journey :
4111 Start from : [Lancaster
Destination : |Atlanta
£ Via : |Leeds ]
<§> First class / O Second class / O Bargain
O Single / Return
3- Seat number : I
n>
3
m
Spreadsheets
The first spreadsheet was VISICALC followed by Lotus 1- 2 -3. However MS Excel is the most common
spreadsheet today having a sophisticated variation of form-filling.
It has grid of cells containing a value or a formula . The formula can involve values of other cells e.g. sum of
all cells in this column. The user can enter and alter data in the spreadsheet with considerable consistency.
Point and click interfaces
This is used in multimedia ,web browsers and hypertext. It is sometimes called 'just click something' ! using
icons, text links or location on map.
It requires minimal typing
Three dimensional interfaces
This is made up of virtual reality, 'ordinary' window systems and 3 D workplace
The 'ordinary' window systems comprises highlighting, visual affordance and indiscriminate use
The 3 D workspaces have uses for extra virtual space, it is light and occlusion to give depth and distance
effects
v
Ary
tB w ... or sculptured
WIMP Interface
'WIMP' stands for Windows, Icons, Menus and Pointers ( or Windows, Icons, Mice, and Pull-down
menus ! )
It is a default style interface for majority of interactive computer systems, especially PCs and desktop
machines
WIMP Interface
Windows
Icons
Menus
Pointers
... or windows, icons, mice, and pull-down menus !
Elements of WIMP interface:
The elements of the WIMP interface are:
Windows, Icons, Menus and Pointers
Buttons, Toolbars, Palettes and Dialog boxes
Details are given below:
Windows
66
File Edit Options Font
Typewriter
Screen
Times
• Words to use in action or description
• How to group items
• Choice of keyboard accelerators
Buttons
This is an individual and isolated region within a display that can be selected to invoke an action
The Special kinds that exist are
The radio buttons with a set of mutually exclusive choices and the check boxes with a set of non -exclusive
choices.
Gender O Male ® Female
Interests: 0 web development user interfaces 0 music
Subnet]
Toolbars
These are long lines of icons with fast access to common actions and are often customizable :
You can choose which toolbars to see and choose what options are on it
Palettes and tear-off menus
Palettes are little windows of actions shown or hidden via menu option in available shapes in drawing
package
In tear -off and pin-up menus, menu 'tears off' to become palette
Dialogue boxes
These are information windows that pop up to inform of an important event or request information, for
example when saving a file, a dialogue box is displayed to allow the user to specify the filename and
location. Once the file is saved, the box disappears .
3.3 UNDERSTANDING AND CHOOSING WIDGETS
Widgets are bits that make the Graphical User Interface. They are the individual items on a Graphical User
Interface (GUI). They can also be called the elements of the WIMP interface.
Examples of widgets include the check boxes, the tool bars, the buttons, etc. See the pictorial illustration
below.
Back
Three aspects of widgets can be identified in the following ways:
By appearance in the way they look like
By the nature of their interaction as to how they behave and
By their semantics as regards their meaning
68
By appearance:
Appearance includes words that are verbs that represent some action such as quit, exit, embolden, and
italicize.
Copies
Number of copies:
They could also be adjectives that describe the state of those words such as bold, italic etc.
They could be nouns that represent the name of the appearance such as Times New Roman, etc.
They could be combination of verbs and adjectives e.g. embolden + italic
Properties
Back
By behavior
This describes the action the toolkit carries out on your behalf and this can be controlled. Examples are
drawing and such interactions between the widgets
themselves. But timing issues of this behavior should be watched such as the large selections under
Windows applications.
See the pictorial example below.
U3p
G Ignore
3
3
*
Ignore
Move mouse over button
- highlights
Move mouse off target with
\
button still down
- highlight removed
By semantics
Semantics are menus, buttons, etc that do things as desired by the user ..
I
i it [ 3old italic
?I X|
Font style : Size : OK
13old Italic [32
Cancel
Regular
Bold 24
Italic 28 Preview
Bold Italic
d 1 Fe _zJ
69
An example is lets make it bold italic'
The semantics assignment is determined by the designer or user; YOU say what it means. The semantics is
usually up to you.
Although widgets may link direct to database, even then, you say what links to the database .
So to choose the widget for the job, assign meaning first on what you want it to do, followed by
appearance and then how you want it done .
You may for example want actions carried out through menu, buttons, or toolbar or you want to set the
status of options using checkbox, radio button, or combi- box.
W Word wap text in autoshape
Toolbars |' v Standard
Ruler Formatting r Resize autoshape to fit text
0 Document Map AutoText
W
Header and Footer
Control Toolbox
^Rotate text within autoshape by 90°
it r
I -
[Flo at over t e x t ]
4.0 Conclusion
Designing interaction styles should be based on the following criteria :
Domain - this considers the area of work under study e.g. graphic design
Goal - what the designer wants to achieve e.g. create a solid red triangle
Task - how you go wish to present the style ultimately in terms of operations or actions, e.g. select fill
tool, click over triangle
The style should be easy to focus on look and feel because if you want someone to do something, make it
easy for them and understand their values.
5.0 Summary
Interaction styles are the nature of dialogs between the user and the system .
A graphical user interface ( GUI) is a type of user interface which allows people to interact with electronic
devices like computers, hand- held devices through graphical icons, and visual indicators by direct
manipulation of the graphical elements.
In WIMP Interface, 'WIMP' stands for Windows, Icons, Menus and Pointers ( or Windows, Icons,
Mice, and Pull down menus ! )
-
It is a default style interface for majority of interactive computer systems, especially PCs and desktop
machines
Widgets are bits that make the Graphical User Interface. They are the individual items on a Graphical User
Interface ( GUI). They can also be called the elements of the WIMP interface.
Menus are choice of operations or services offered on the screen
A button is an individual and isolated region within a display that can be selected to invoke an action
Toolbars are icons with fast access to common actions and are often customizable:
Palettes are little windows of actions shown or hidden via menu option in available shapes in drawing
package
Dialogue boxes are information windows that pop up to inform of an important event or request
information such as saving a file.
70