HUMAN COMPUTER

INTERFACE
Lecturer
Abdiyasin mohamed
Human computer interface introduction
 With the exception of some embedded software and
operating system code, the success of a software product
is determined by the humans who use the product.
 HCI helps us to understand why some software products
are good and other software is bad.
 A computer science course does not provide sufficient
time for this kind of training in creative design, but it
can provide the essential elements: an understanding of
the user’s needs, and an understanding of potential
solutions.
Human computer interface introduction
There are many different approaches to the study and design of user
interfaces.
the important aspects of fields including:
◦ Interaction Design
◦ User Experience Design (UX)
◦ Interactive Systems Design
◦ Cognitive Ergonomics
◦ Man-Machine Interface (MMI)
◦ User Interface Design (UI)
◦ Human Factors
◦ Cognitive Task Design
◦ Information Architecture (IA)
◦ Software Product Design
◦ Usability Engineering
◦ User-Centered Design (UCD)
◦ Computer Supported Collaborative Work (CSCW).
Human computer interaction
visual representation
How can you design computer displays
that are as meaningful as possible to
human viewers?
Answering this question requires
understanding of visual representation –
the principles by which markings on a
surface are made and interpreted.
Typography and text
For many years, computer displays resembled paper
documents.
most aspects of modern industrial society have been
successfully achieved using the representational
conventions of paper, so those conventions seem to be
powerful ones.
Information on paper can be structured using tabulated
columns, alignment, indentation and emphasis, borders
and shading. All of those were incorporated into
computer text displays.
Interaction conventions, however, were restricted to
operations of the typewriter rather than the pencil.
Typography and text
Conventions of typography and graphic design help us to
interpret that text as if it were on a page, and human readers
benefit from many centuries of refinement in text document
design.
Text itself, including many writing systems as well as
specialised notations such as algebra, is a visual
representation that has its own research and educational
literature.
Documents that contain a mix of bordered or coloured
regions containing pictures, text and diagrammatic elements
can be interpreted according to the conventions of magazine
design, poster advertising, form design, textbooks and
encyclopaedias.
Typography and text
Designers of screen representations should take
care to properly apply the specialist knowledge of
those graphic and typographic professions.
Position on the page, use of typographic grids, and
genre-specific illustrative conventions should all
be taken into account.
most screen-based information is interpreted
according to textual and typographic conventions,
in which graphical elements are arranged within a
visual grid, occasionally divided or contained with
ruled and coloured borders.
Maps and graphs
The computer has, however, also acquired a specialized
visual vocabulary and conventions.
 Before the text-based ‘glass teletype’ became
ubiquitous, cathode ray tube displays were already used
to display oscilloscope waves and radar echoes. Both
could be easily interpreted because of their
correspondence to existing paper conventions.
basic diagrammatic conventions rely on quantitative
correspondence between a direction on the surface and
a continuous quantity such as time or distance. These
should follow established conventions of maps and
graphs.
Schematic drawings
Ivan Sutherland’s groundbreaking PhD research
introduced several more sophisticated alternatives
(1963). The use of a light pen allowed users to draw
arbitrary lines, rather than relying on control keys to
select predefined options.
An obvious application, in the engineering context of
MIT, was to make engineering drawings such as a
girder bridge.
Plans of this kind, as a visual representation, are closely
related to maps. However, where the plane of a map
corresponds to a continuous surface, engineering
drawings need not be continuous.
Schematic drawings
engineering drawing conventions allow
schematic views of connected
components to be shown in relative scale,
and with text annotations labeling the
parts.
 White space in the representation plane
can be used to help the reader distinguish
elements from each other rather than
directly representing physical space.
Pictures
Sutherland also suggested the potential value that
computer screens might offer as artistic tools.
His Sketchpad system was used to create a simple
animated cartoon of a winking girl. This is the first
computer visual representation that might suffer from
the ‘resemblance fallacy’.
It means that drawings are able to depict real object or
scenes because the visual perception of the flat image
simulates the visual perception of the real scene.
new perspective rendering conventions are invented and
esteemed for their accuracy by critical consensus, and
only more slowly adopted by untrained readers.
Pictures
pictorial representations, including line
drawings, paintings, perspective
renderings and photographs rely on shared
interpretive conventions for their
meaning. It is naïve to treat screen
representations as though they were
simulations of experience in the physical
world
Node-and-link diagrams
The first impulse of a computer scientist, when given a
pencil, seems to be to draw boxes and connect them with
lines.
These node and link diagrams can be analyzed in terms of
the graph structures that are fundamental to the study of
algorithms (but unrelated to the visual representations
known as graphs or charts).
node and link diagrams are still widely perceived as being
too technical for broad acceptance.
Nevertheless, they can present information about ordering
and relationships clearly, especially if consideration is given
to the value of allowing human users to specify positions
Icons and symbols
Maps frequently use symbols to indicate
specific kinds of landmark.
Sometimes these are recognizably pictorial,
but others are fairly arbitrary
conventions.However, the dividing line
between pictures and symbols is ambiguous.
It is unclear which of the designers working
on the Xerox Star coined the term ‘icon’ for
the small pictures symbolizing different kinds
of system object.
Icons and symbols
It has been suggested that icons, being pictorial,
are easier to understand than text, and that pre-
literate children, or speakers of different
languages, might thereby be able to use
computers without being able to read.
In practice, most icons simply add decoration to
text labels, and those that are intended to be self-
explanatory must be supported with textual
tooltips.
the design of simple and memorable visual
symbols is a sophisticated graphic design skill.
Visual metaphor
The ambitious graphic designs of the
Xerox Star/Alto and Apple
Lisa/Macintosh were the first mass-
market visual interfaces.
Unified theories of visual representation
The analysis in this lecture has addressed the most
important principles of visual representation for screen
design, introduced from the early history of graphical
user interfaces.
In most cases, these principles have been developed and
elaborated within whole fields of study and professional
skill – typography, cartography, engineering and
architectural draughting, art criticism and semiotics.
Improving on the current conventions requires serious
skill and understanding. Nevertheless, interaction
designers should be able, when necessary, to invent new
visual representations.
Unified theories of visual representation
One approach is to take a holistic
perspective on visual language,
information design, notations, or
diagrams.
The following table summarises holistic
views
Holistic views
Graphic Resources Correspond Design Uses
ence
Marks Shape Orientation Literal Mark position, identify
Size Texture Mapping category, Indicate direction,
Saturation Colour Conventional Express magnitude, Simple
Line symbols and colour codes
Symbols Geometric elements Topological, Texts and symbolic calculi
Letter forms Figurative, Diagram elements Branding
Logos and icons Connotative, Visual rhetoric Definition of
Picture elements Acquired regions
Connective elements
Holistic views
Graphic Resources Correspondence Design Uses

Regions Alignment grids Containment Identifying shared

Borders and frames Separation Framing membership
Area fills Layering Segregating or nesting
White space multiple surface
integration conventions in panels
Accommodating labels,
captions or legends
Surfaces The plane Material Literal (map) Typographic layouts
object on which Euclidean Graphs and charts
marks are imposed Metrical Relational diagrams
Mounting, ordered Visual interfaces
orientation and Image-schematic Secondary notations
display context Embodied/situated Signs and displays
Display medium
 Finish
thank you.