CHAPTER ONE
This chapters provides a detailed discussion cutting across:
•
Multimedia Concept
•
Multimedia Information systems
•
Features of Multimedia Information Systems
•
Multimedia Application
•
Multimedia technology
Multimedia Concept
Multimedia refers to the use of multiple media to convey and disseminate information. Therefore,
multimedia information refers to the set of information convey through multiple media.
Multimedia information is a combination of texts, images, animated graphics, video and
sound as opposed to conventional (traditional) mass media- printed materials or audio
recording.
Multimedia present information easily and understandably as compared with text or audio alone. The
prevalent of multimedia has encouraged its usage in almost all facets of life – education, health,
banking etc. The acceptance of computer and Information Technology Communication (ICT) devices
have increased the quest for multimedia usage. Prior to the introduction of multimedia devices,
computer controlled analog devices such as videocassette recorders, projectors and tape recorders
were employed to generate multimedia effects. Today, magnetic and optical devices have also been
helpful in the distribution of multimedia object. With the advent of the internet which is seen as the
breeding ground for multimedia ideas, contents and the delivery vehicle for multimedia objects to a
huge audience which has exposed and expand multimedia in a way never before. The internet, as well
as the Transmission Control Protocol/Internet Protocol (TCP/IP) protocol suite or Net BIOS on
isolated or campus LANs, is the next vehicle for multimedia distribution.
The Internet distribution has been augmented through satellite, wireless and cable systems.
Previously, the delivery of multimedia contents and objects was limited due to analog implementation
- most information systems were almost exclusively textual and numerical in nature. But advances in
multimedia technologies made it possible for instant information access to varied information setup texts, data, still image, motion picture, and sound. Thus, we have entered into this “digital” “Visual”
and “multimedia” information age. Nowadays, multimedia generally indicates a rich sensory interface
between human and computers or computer-like devices. The interfaces give user control over the
pace and sequence of the information.
1
Multimedia Information Systems (MISs)
A Multimedia Information System (MIS) is a concatenation of various system components working
seamlessly to provide the end-user (multimedia client) with multimedia information generated from
its source, held in multimedia server and transmitted through an appropriate delivery vehicle. MIS is
seen as a multimedia database, providing storage and retrieval facilities for media objects. The basic
concept of multimedia information access refers to non-linear and non-sequential means of accessing
information. This process eliminates the traditional sequent path adopted previously. With this
approach, information seeker does not have to follow a specific sequential path to request and/or
locate information. In other words, the developer of a good multimedia information system has to be
able to clearly structure the entire knowledge domain of a chosen topic behind the application and
provide so many necessary links to each related ideas, concepts and topics, that the information
seekers are permitted to access without following any pre-determined and restructured path. Figure 1
depicts a Multimedia Information System (MIS).
Multimedia Server
Multimedia Client
Data
Database
Management
Laptop
Computer
Disk array
Compression
and
representation
Television
Information
source
Wireless Phone
Multimedia
Security
Wireless Network
Figure 1: multimedia information system components
MIS consists of several components, including multimedia storage server, media synchronization,
multimedia compression and representation, multimedia database management, networking and
communication, content, network security and methodologies and tools for many multimedia
applications. This requires various technologies capabilities integrating to from an acceptance system.
However, we will look at several vital aspects that enable networked multimedia information system.
In principle, multimedia systems cover a very wide spectrum, from smoke signals to virtual reality.
However, modern multimedia systems usually have some of the following features.
2
Features of Multimedia Information System (MIS)
•
Simultaneous and Integrated delivery: The multiple media are delivered concurrently and
in an integrated or synchronized fashion. For example, the voices in sound track must match the
corresponding mouth movements in the movies.
•
Interactive delivery: A human or robot interacting with the delivery system, answering
questions posed and indicating appropriate information type. Note that the information path from
human to computer system can also use a variety of media -a mouse for pointing or voice input.
•
Dynamic and real- time delivery: In modern systems at least one of the media is dynamic
(conveying a stream of information), such as a movie or a soundtrack. The stream of information
usually has to be delivered with some timing constraints - 24 frames a second.
Multimedia Applications
Multimedia applications are primarily existing applications that can be made less expensive or more
effective through the use of multimedia technologies. In addition, new speculative applications such
as movies on demand, can be created with these technologies.
•
Home Application
Video on Demand (VOD) is a timely example of home application. It is also called movies on demand.
It is a service that provides movies on an individual basis to television sets. These movies are held in a
central server and transmitted through a communication network. A Set-Top Box (STB) connected to
the communication network converts the digital information into analog signals before transmitting
to TV set. The viewer uses a remote-control device to select a movie and manipulate play through start,
stop, rewind and visual fast forward buttons. The capabilities are very similar to video rental with
physical ownership of the movie for a period the notable different. Services to the home that provides
video on demand will also provide other home services which may be sold based on time rate or usage
rate. These services will help the user navigate through the available materials to plan vacations, renew
driver’s license and purchase good etc.
•
Networked Games
The same infrastructure that support home shopping could be used to temporarily download video
games with graphics – intensive functionality to the STB, and the games could then be played for a
given period time. Group of people could play a game together, competing as individuals or working
together in teams. Actions games would require a very fast, or low-latency network. Usually, network
stability is upmost for user satisfaction.
3
•
Video Conferencing
Currently, most video conferencing is done between two specifically set-up. In each, one or more
cameras are used and the images are displayed on one or more monitors. Text, images and motion
video are compressed and sent through telephone lines. Recently, the technology has been expanded
to allow more than two sites to participate. Video conferencing can be connected through LANs or the
Internet.
•
Education
A wide range of educational software employing multimedia is available on CD-ROM. One of the chief
advantages of such multimedia applications is that the sequence of material presented is dependent
upon the student’s responses and requests. Multimedia is also used in the classroom to enhance the
educational experience and augment the teachers’ work.
•
Distance Learning
Distance variation on education in which not all of the students are in the same place during a class.
Education takes place through a combination of stored multimedia presentations, live teaching and
participation by the students. Distance learning involves aspects of both teaching with multimedia and
video conferencing.
•
Just-In-time Training
Another variation of multimedia application in education, called just-in-time training, is much more
effective because it is done right when it is needed. In an industrial context, this means that workers
can received training using smart devices at respective work location, at the time of need or conducive
atmosphere. This is generally implies storing the materials on a server and relaying it through a widearea network or LAN.
•
Digital Libraries
Digital libraries are a logical extension of the conventional libraries, which houses books, pictures,
tapes etc. Materials in digital form can be less expensive to store, easier to distribute and quicker to
find. Thus, digital Library can save money and provide better capabilities. The Vatican Library has an
extraordinary collection of 150 000 manuscripts, yet only 2000 scholars a year are able to physically
visit the library and even with the global pandemic (COVID-19), it might be impossible. Therefore, the
IBM Vatican library project, which makes digital copies of some manuscripts to scholar will indeed be
a laudable project.
4
•
Virtual Reality
Virtual reality provides a very realistic effect through sight and sound, while allowing the user to
interact with the virtual world. The ability of the user to communicate or interact with the process is
dependent on realistic visual effects must be created simultaneously.
•
Telemedicine
Multimedia and telemedicine can improve the delivery of health care in a number of ways. Digital
information can be centrally stored, yet simultaneously available at many locations. Physicians can
consult with one another using video conferences capabilities, where all can see the data and images.
This has bought together experts from number of places in order to provide better care.
Multimedia technology
A wide variety of technologies contributes to multimedia. Some of the technologies are going through
rapid improvement and deployment because of demand for PCs and workstations. As a result,
multimedia benefits from lower-cost, improved microprocessors, memory chips and disk storage.
These are some of the major technologies relevant to multimedia.
Comprehension Technologies
Comprehension technology is a key multimedia technology because it reduces the numbers of bits
needed to represent a multimedia object. At present, compression of motion video reduces the number
of bits by a factor of approximately one hundred. Without this, it will be too expensive to utilize
multimedia. Comprehension aid portability and cost-effectiveness. The key techniques employed for
the compression of analog data is it similarity of pieces of information that are near each other in time
or space. For example, the color on a TV screen is usually almost the same at the adjacent points, and
it is similar in the next frame. One technique for reducing the number of bits needed to represent data
is to use a portion of the data as a base and to calculate frame-to-frame differences from the base.
•
Discrete Cosine Transformation
Discrete Cosine Transformation (DCT) is another compression technique, which treats a series of data
values (brightness) as a function and converts such functions from the time domain to the frequency
domain. The number of bits needed to represent that data is then reduced by scaling the coefficient in
a process called quantization. DCT can be used to further compress the differences seen across the
data. Following DCT compression, sequences of identical values may be replaced by a single value with
a count in a technique called run-length encoding.
•
Moving Picture Expert Group (MPEG)
The Moving Picture Expert Group (MPEG) has sponsored the creation of video compression standards
ISO/IEC 11171, called MPEG-1 and ISO/IEC13818, called MPEG- 2. MPEG is now the predominant
high-quality video standard. MPEG “tiles” each video frame into matrix of separate macro blocks, each
5
of which is treated in the same way. MPEG defines three kinds of frames: “I-frames”, or intra-picture
frames, contain base data and are independent of all other frames. The periodic occurrence of I-frame
allows initialization after a loss of data. P-frame or predicted frames are constructed as differences in
the data values from those represented by the prior P-frame or I-frame. “B-frame” or bidirectional
prediction frames, are constructed from macro blocks from either the prior P or I-frames or the next
P- or I frames.
•
Real-Time Encoding
Real-time encoding, which is enacted as the content is being created is extremely challenging. It is
certainly needed for video conferencing and distribution of live content such as sporting events. This
system usually requires special purpose hardware. The hardware receives an uncompressed video and
audio signal High-Definition Multimedia Interface (HDI) or serial Digital Interface (SDI), encode it
into a compress format and transit the compressed date over an Internet Protocol (IP) to a Content
Delivery Network (CDN) or a decoder.
•
Decoding
Previously, most decoding was done by special-purpose cards that were attached to the bus of a PC or
workstation. Each card was engineered to decode one of the many standards or regular compression
formats. The faster PCs and workstations that are now available making decoding program feasible
are called software decompression
•
Video Servers
The video servers which are the same as multimedia servers are tasked to deliver multimedia objects
from one location to where it is stored. Rotating magnetic disk storage is the preferred medium for
storing multimedia objects, with solid-state memory used for buffering. Multimedia server are based
on the structure of computer file servers.
•
Disk Organization Scheduling
Video files systems typically stripe content across multiple disk devices, with the granularity of
stripping block of contiguous data stored on disk drive usually being the amount of data read in a
single Input/Output (I/O) operation. The data can be read in a single I/O operation placed in
sequential locations on disk. to be sure that the disk arm does not have to be moved within an I/O
operation.
•
Storage Hierarchy
In classical computer architecture, a small amount of high-speed, high-cost storage is used to store the
most frequently referenced data. This provides average data access time only slightly greater than that
of the high-speed storage at an average cost just above the cost of the low-speed storage.
6
•
Telephone Networks
Telephone networks dedicate a set of resources that forms a complete path from end to end for the
duration of the telephone connection. The dedicated path guarantees that the voice data can be
delivered from one end to other end in a smooth and timely way, but the resources remain dedicated
even when there is no talking. In contrast, digital packet networks, for communication between
computers, use time-shared resources (links, switches and routers) to send packets through the
networks.
•
Internet
The internet and intranet which uses TCP protocol suite are the most suitable delivering vehicles for
multimedia objects. TCP provides communication session between application on hosts, sending
streams of bytes for which delivery is always guaranteed by means of acknowledgements and
retransmission. User datagram protocol (UDP) is a best a best- effort delivery protocol that sends
individual messages between hosts. Internet technology is used on single LANs and on connected
LANs within an organization which are sometimes called intranet and on backbones that link different
organization into one single global network.
•
Token Ring
Token ring is a hardware architecture for passing packets between stations on a LAN. Since a single
circular communication path is used for all messages, there must be a way to decide which station is
allowed to send at any time. In token ring, a token which gives a station the right to transmit data, is
passed from station to station.
•
Switched Ethernet
Switches may be used at a hub to create many small LANs where one large one existed previously. This
reduces contention and permit higher throughout. In addition, ethernet can be extended to 100Mb/s
throughout. The combination, switched Ethernet is much more appropriate that to multimedia than
regular ethernet, because Ethernet LANs can support only about six MPEG video stream.
•
Asynchronous Transfer Mode (ATM)
Asynchronous Transfer Mode (ATM) is a new packet-network protocol designed for mixing voice,
video and data within the same network. Voice is digitized in the telephone networks at 64Kb/S
(kilobits per second), which must be delivered with minimal delay, so very small packet size is used.
On the other hand, video data and other business usually benefits from quite large block sizes.
•
Modems
Modulator/demodulators, or modem are used to send digital data over analog channels by means of a
carrier signals modulated by changing the frequency, phase, amplitude or some combination of them
7
in order to represent digital data. Modulation is performed at the transmitting end and demodulation
at the receiving end.
•
Integrated Service Digital Network (ISDN)
Integrated Service Digital Network (ISDN) extends the telephone company digital network by sending
the digital form of the signal all the way to the customer. ISDN is organized around 64Kb/s
transmission speed used for digitized voice.
•
Asymmetric Digital Subscriber Lines (ADSL)
Asymmetric digital subscriber Lines (ADSL) extends telephone company twisted- pair wiring to yet
greater speeds. The lines are asymmetric, with an outbound data rate of 1.5Mb/s and an inbound rate
of 64kb/s. This is suitable for video on demand, home shopping, games and interactive information
systems (collectively known as interactive television) because of 1.5Mb/s is fast enough for
compression digital video
•
Cable Systems
Cable television systems provide analog broadcast signals on a coaxial cable, instead of through the
air, with the attendant freedom to use additional frequencies and thus provides a greater number of
channels the over-the-air broadcast. The systems are arranged like a branching tree, with splitters at
the branch points.
•
Set-top Box
The STB is an appliance that connects a TV set to a cable system, terrestrial broadcast antenna, or
satellite broadcast antenna. The STB in most homes has two functions. First, in response to a viewer’s
request with the remote-control unit, it shift the frequency of the selected channels to either channels
3 or 4, for input to the TV set. Second, it is used to restrict access and block channels that are not paid
for.
Study Points
✓
Students should have a broaden understanding of multimedia concepts including, information source,
multimedia servers, securities, content delivery network and multimedia clients (attention should be paid
current trend).
✓
Students should be familiar with the components of Multimedia Information System (MIS), interactions
between these components and universal features (attention should be paid current trend).
✓
A broaden understanding of multimedia technologies and multimedia applications must be sort (attention
should be paid current trend).
8
CHAPTER TWO
ANIMATION
This chapters provides a detailed discussion cutting across:
•
Animation
•
Techniques of Animation
•
Basic Principles of Animation
•
Artificial Reality
Animation is the rapid display of a sequence of image of 2-D or 3-D artwork or model positions in
order to create an illusion of movement. It is an optical illusion of motion due to the phenomenon of
persistence of vision, and can be created and demonstrated in a number of ways. The most common
method of presenting animation is as a motion picture or video program, although several other forms
of presenting animation also exist. An animation can be a series of pictures, each slightly different than
the one before it, presented to the viewer at a rate fast enough to give the impression of smooth real
movement. With moving figure animation, images are presented as a series of pictures of the object
with the elements of the object (like the limb) slightly displaced from their previous positions. If we
want total realism, we should show all bends, tilts, and other subtle changes that occur as the figure
moves.
Techniques of Animation
Three main type of animation exist- Traditional, Stop-motion and 3D.
•
Traditional Animation-The traditional animation is also known as Cel (Celluloid)) animation.
The individual frames of a traditionally animated film are photographs of drawing, which are first
drawn on paper to create the illusion of movement with each drawing differs slightly from the
previous one before it. The animator’s drawing is traced or photocopied onto transparent acetate
sheets called cels, which are filled in with paints in assigned colors or tones on the side opposite the
lining drawings. The completed characters cels are photographed one-by-one onto motion picture
film against a painted background by a rostrum camera. Traditional animation can be categorized
into three:
Full animation: refers to the process of producing high-quality traditionally animated films which
regularly use detailed drawings and plausible movement. Fully animated films can be done in a variety
of styles, from realistically designed works such as those produced by walt Disney studio.
Limited Animation: Involves the use of less detailed and/ or more stylized drawing and methods of
movement. Pioneered by the artists at the American studio United Production of American, limited
animated can be used as a method of stylized artistic expression, as in Gerald McBoing Boing (US
9
1951). Yellow Submarine (Uk, 1968), and much of the anime produced in Japan. Its primary use,
however, has been in producing cost-effective animated content for media such as television and later
the internet.
Rotoscoping: is a technique, patented by Max Fleischer in 1917, where animators trac live-action
movement, frame by frame. The source film can be directly copied from actors’ outline into animated
drawings, as in the Lords of the Ring (US 1978), used as basis and inspiration for character animation.
•
Stop Animation – Stop motion animation used to describe animation created by physically
manipulating real-world objects and photographing them one frame of film at a time to create
the illusion of movement. Some of the stop-motion include animation.
Clay animation or plasticine animation often abbreviated as Claymation uses figure made of clay or
similar malleable material to create stop-motion animation. The figure may have an armature or wire
frame inside of them that can be manipulated in order to pose the figures.
Cutout animation is type of step-motion animation produced by moving 2-dimensional pieces of
material such as paper or cloth. Example include terry Gilliam’s animated sequence from Monty
Python’s Flying Circus.
Silhouette animation is a variant of cutout animation in which the character is backlit and only
visible as silhouettes. Example includes The Adventure of prince Achmed.
Graphic animation: uses non-drawn flat visual graphic material (photographs, newspaper
clippings, magazines) which are sometime manipulated frame-by-frame to create movement. At other
times, the graphic remain stationery, while the stop-motion camera is moved to create on-screen
action
Model animation refers to stop-motion animation created to interact with and exist as part of a liveaction world. Intercutting, matte effects and split screens are often employed to blend stop-motion
characters or objects with live actors and setting.
Object animation refer to the use of regular inanimate objects in stop-motion animation, as opposed
to specially created items example brickfilm.
Pixilation involves the use of live humans as stop motion characters. This allows for a number of
surreal effects, including disappearances and reappearances, allowing people to appear to slide across
the ground and other such effect.
Puppet animation typically involves stop-motion puppet figures interacting with each other in a
constructed environment, in contrast to the real-world interaction in model animation.
10
Puppetoon, created using techniques developed by George Pal, are puppet animated films which
typically use a different version of a puppet for different frames, rather then simply manipulating one
existing puppet.
•
Computer animation – Like stop motion, computer animation encompasses a variety of
techniques, the unifying idea being that the animation is created digitally on a computer.
2D animation
Figure are created and/or edited on the computer using 2D bitmap graphics or created and edited
using 2D vector graphics. This includes automated computerized versions of traditional animation
techniques such as of tweening, morphing, onion skinning and interpolated rotoscoping.
•
Analog computer animation
•
Flash animation
•
PowerPoint animation
3D animation
Digital models manipulated by an animator. In order to manipulate a mesh, it is given a digital
armature (sculpture). This process is called rigging. Various other techniques can be applied such as
mathematical functions (ex. gravity, particle simulation), simulated fur or hair, effects such as fire and
water and use of motion capture to name but a few.
Basic Principle of Animation
The 12 basic principles of animation are set of principles of amination introduced by the Disney
animators Ollie Johnston and Frank Thomas in their 1981 book the illusion of Life: Disney Animation.
•
Squash and Stretch
The most important principle is “squash and stretch”, the purpose of which is to give a sense of weight
and flexibility to draw objects. It can be applied to simple objects, like bouncing ball or more complex
construction, like the musculature of a human face. Taken to an extreme point, a figure stretched or
squashed to an exaggerated degree can have a comical effect.
•
Anticipation
Anticipation is used to prepare the audience for an action and to make the action appear more realistic.
A dancer jumping off the floor has to bend his knees first; a golfer making a swing has to swing the
club back first.
•
Staging
11
This principle is akin to staging as it is known in the theatre and film. Its purpose is to direct the
audience’s attention, and make it clear what is of greatest importance in a scene; what is happening
and what is about to happen. Some authorities as defined it as “the presentation of any idea so that it
is completely and unmistakably clear.
•
Straight ahead action and pose to pose
These are two different approaches to the actual drawing process. “straight ahead actions” means
drawing out a scene frame by frame from beginning to end while pose to pose involves starting with
drawing a few, key frames and then filling in the interval alter.
•
Follow through and overlapping action
These closely related techniques help render movement more realistic, and give the impression that
character follow the laws of physics. Follow through means that separate parts of a body will continue
moving after the character has stopped. Overlapping action is when a character changes direction and
parts of the body continue in the direction he was previously going.
•
Slow in and Slow out
The movement of the human body and most other part, need time to accelerate and slow down. For
this reason, an animation looks more realistic if it has more frames near the beginning and end of a
movement and fewer in the middle.
•
Arcs
Most human and animal actions occur along an arched trajectory and animation should reproduce
these movement for greater realism. This can apply to a limb moving by rotating a joint, or a thrown
object moving along a parabolic trajectory.
•
Secondary Action
Secondary action is process added to the main action which gives a scene more life, a can help to
support the main action. A person walking can simultaneously swing his arms or keep them in his
pocket, or can speak or whistle or can express emotions through facial expression.
•
Timing
Timing in reality refers to two different concepts: physical timing and theatrical timing. It is essential
both to the physical realism, as well as to the storytelling of the animation, that the timing is right.
Physical timing ensure object obey the law of physic while theatrical timing focuses on conveying deep
emotions.
•
Exaggeration
12
Exaggeration is an effect especially useful for animation, as perfect imitation of reality can look static
and dull in cartoons. The of level exaggeration depends on whether one seeks realism or comedy. The
classical definition of exaggeration, employed by Disney, was to remain true to reality, just presenting
it in a wilder, more extreme form.
•
Solid Drawing
The principle of solid or good drawing really means that the same principles apply to an animator as
to an academic artist. The drawer has to understand the basic of anatomy. Composition, weight,
balance, light and shadow.
•
Appeal
Appeal in cartoon character corresponds to what would be called charisma in an actor. A character
that is appealing is not necessarily sympathetic villians or monster can also be appealing the important
things is that the viewer feels the character is real and interesting.
Artificial Reality
Artificial Reality is an interactive environment, based on video recognition techniques, that put a user
in full, unencumbered contact with the digital world. He started this world in the late 1960 and is
considered to be key figure in the early innovation of virtual reality.
Augmented Reality
Augmented Reality (AR) is a field of computer research which deals with the combination of real-world
and computer -generated data (virtual reality), where computer graphics objects are blended int real
footage in real-time. At present, most AR research is concerned with the use of live video imagery
which is digitally processed and augmented by the addition of computer-generated graphics.
Assignment
✓ Student should read extensively on the field of augmented reality and virtual reality.
Hypertext & Hyperlink
Hypertext is considered as an organized database in which objects (text, pictures, music, programs
and so on) are collectively linked to others. Hypertext are activated by a mouse click, key-press set or
by touching the screen. Apart from text, the term "hypertext" is also sometimes used to describe tables,
images, and other presentational content formats with integrated hyperlinks. Hypertext is one of the
key underlying concepts of the World Wide Web, where Web pages are often written in the Hypertext
Markup Language (HTML). As implemented on the Web, hypertext enables the easy-to-use
publication of information over the Internet.
13
Hypermedia, an extension is an extension of hypertext. It is nonlinear medium of information that
includes graphics, audio, video, plain text and hyperlinks. This designation contrasts with the broader
term multimedia, which may include non-interactive linear presentations as well as hypermedia
(Unison). The WWW (world) is a classic example of hypermedia, where a non-interactive cinema
presentation is an example of standard multimedia due to the absence of hyperlink. Most modern
hypermedia is delivered via electronic pages from a variety of systems including media players, web
browsers, and stand-alone applications (i.e., software that does not require network access). Audio
hypermedia is emerging with voice command devices and voice browsing.
CHAPTER THREE
INTERFACE
14
An interface is a boundary across which two independent systems meet and act on or communicate
with each other. In computer technology, there are several types of interfaces.
User Interface- This interface provides the means enabling the user to communicate with system.
The user interface allows the user to communicate with the operating system.
Software Interface – The language and codes that the applications use to communicate with each
other and with the hardware.
Hardware Interface – The wires, Plugs and sockets that hardware devices use to communicate
with each other.
Group and Organization interfaces
These interfaces that allow groups of people to coordinate things in common. This is suitable for
meetings and engineering. These will have major impacts on the nature of organization and on the
division of labor. Models of the group design process will be embedded in systems and will cause
increased rationalization of design. A fundamental reality of application development is that the user
interface is the system to the users. What users want is for developers to build applications that meet
their needs and that are easy to use. Too many developers think that they are artistic geniuses they do
not bother to follow user interfaces design standards or invest the effort to make their application
usable, instead they mistakenly believe that the effort to make their application usable.
User Interface Design (UID)
The design of the user interface requires consideration of various psychological aspects of human
behavior. This section discusses the psychological effects of interface components such color,
proficiency level and visual objects. This section also covers the characteristic of good interface. It
addresses issues of consistency, appropriateness of design and transparency of different types of user
interfaces.
User Interfaces in Computing
In computing science and human-computer interaction, the user interface (of a computer program)
refers t the graphical textual and auditory information the program presents to the user, and the
control sequences (such as keystrokes with the computer keyboard, movements of the computer
mouse and selection with the touchscreen) the user employs to control the program. It can also be
referred to as the components of the system which facilities interaction between the user and the
system. Thus, the user interface must enable two-way communication by providing feedback to the
user, as well as functions for entering data needed by the system.
The Need for a User Interface
15
When the first computers were introduced in the 1950s, the only people who interacted with
computers on a regular basis were highly- trained engineers and scientists in research facilities. The
cost and size of these computers made their wide-spread use impractical. Advances made in
technology allowed computers to be made smaller and affordable. As a result of this, and the increase
in productivity gained by computers, their use became more widespread. With various people from
diverse backgrounds now using computer in everyday life, came the need for a user-friendly interface
through most person can interact productively with a computer system.
Type of Users, User Preferences and Type of Interface
Finding an interface to cater for a particular user depends largely on that user’s preferences.
Command driven interfaces allow faster interaction with the computer and simplify the input of
complex requests. Currently the following types of user interface are the most common:
•
Graphical user interfaces (GUI) accept input via devices such as computer keyboard and
mouse and provide articulated graphical output on the computer monitor. The two principles
guiding GUI includes Object- Oriented User Interface (OOUIs) and application-oriented
interfaces.
•
Web-Based User Interfaces or Web user Interfaces (WUI) accept input and provide
output by generating web pages which transmitted via the internet and viewed by the user
using a web browser program. Newer implementation utilizes Java, AJAX, Adobe Flex
User interfaces that are common in various fields outside desktop computing:
•
Command line Interfaces: Command -driven interfaces usually require the user to enter
an explicit command which is then interpreted and executed by the system.
•
Tactile Interfaces: Tactile supplement or replace other forms of output with haptic
feedback methods. Used in computerized simulators.
•
Touch Interface: are graphical user interface using a touchscreen display as a combined
input and output device. Used in many points of sale.
•
Attentive user interfaces: Manage the user attention deciding when to interrupt the user,
the kind of warnings and level of detail of the messages presented to the user.
•
Batch interface: are non-interactive user interfaces, where the user specifies all the details
of the batch job in advance to batch processing and receives the output when all the processing
is done.
•
Conversational interface Agents: Attempts to personify the computer interface in the
form of an animated person, robot, or other characteristic and present interaction in a
conversational from.
16
•
Cross-based Interfaces: are graphical user interfaces in which the primary task consists in
crossing boundaries instead of pointing.
•
Gesture Interfaces: are graphical user interfaces which accept input in a form of hand
gestures or mouse gestures sketched with a computer mouse or a stylus.
•
Intelligent user interface: are human-machine interfaces that aim to improve the
efficiency, effectiveness and naturalness of human-machine interaction by representing,
reasoning and acting on models of the user, domain, task and discourse and media.
•
Multi-Screen Interface: employ multiple displays to provide a more flexible interaction.
This is often employed in computer games interaction in both commercial arcades and more
recently the handheld markets.
•
Noncommon user Interface: Which observe the user to infer his/her needs and
intentions, without requiring that the /she formulate explicit commands.
Object- Oriented User Interface (OOUI)
•
Reflexive User Interface- where the users control and redefine the entire system via the
user interface alone, for instances to change its command verbs. This is possible with rich
graphical interfaces.
•
Tangible user Interface- which places a greater emphasis on touch and physical
environment or its element.
•
Text user Interface – are user interface which output text, but accept other form of input in
addition to or in place or typed command strings.
•
Voice user Interface- which accept input and provide output by generating voice prompts.
The user input is made by pressing keys or buttons or responding verbally to the interface.
•
Natural- Language Interfaces- Used for search engines and on webpages. User type in a
question and waits for a response.
•
Zero-Input Interfaces- get inputs from a set of sensors instead of querying the user with
input dialogs.
•
Zooming User Interface – graphical user interface in which information objects are
represented at different levels of scale and detail, and where the user can change the scale of
the viewed area in order to show more details.
•
Menu-Driven Interface- provides the user- Provide the user with a list of options and a
simple method of selecting between them. Such a method may involves entering a single letter
or a number which represent the option.
•
Direct Manipulation Interfaces (DMI) present users with a model of their information
space and users can manipulate their information by direct action. Since these types of
interfaces manipulate information by direct action, it is not necessary to issue explicit
17
commands to modify information. The Graphical User Interface (GUI) is the most popular
implementation of a DMI.
•
Special Purpose Interface- are those which are used to control an embedded computer
system. Such interfaces also control systems which combine the use of a general-purpose
computer with special hardware and software for implementing the user interface.
Psychological Aspect of Interface Design
•
The Power of Visual Communication
Since the sight affect the heart, mind and understanding, visual information communicates
non-verbal in a powerful manner. This can be seen in the way user describe graphic
information with adjective like “fresh”, “pretty”, “boring”, “conservative” and “wild”. The
advertising industry has taken advantage of this phenomenon.
•
Effect of Colour and Visual Objects
The retina of the human eye contains special cones which respond to stimulation by one of
three primary colours, red, green or blue-violet. Mixing of these colours and variation of their
intensities can produce many other colours visible to the human eye.
Graphical Principles of Good User Interface Design
User interface design must take into account the needs, experience and capabilities of the user. User
Interfaces should be designed so that useful interaction can be developed between the user and the
system. The interface must be user friendly and must support the user through every stage of
interaction. There are however some general principles which are applicable to all user interface
designs and they listed as follow:
•
Interface should be user driven
•
Interface should be consistent
•
The interface should avoid modes
•
The interface should be transparent
•
The interface should include error recovery mechanism
•
The interface should incorporate some form of user guidance
The Interface should be user driven – Often the goal of an application is to automate what was
a paper process. With more people beginning to use computer to do their work, an interface designer
should try to make the transfer to the computer simple and natural. Applications should be designed
to allow users to apply their previous real-world knowledge of the paper process to the application
interface. The design can than support the users’ work environment and goals. Potential users should
therefore be involved in the design process of the user interface in advisory capability and necessary
feedback incorporated in the user interface at the stage of it design.
18
The interface Should be consistent
Interface consistency means that system commands and menus should have the same format,
parameters should be passed to all commands in the same way and command punctuation should be
similar. Consistent interfaces reduce learning time since knowledge gained in one command or
application can be applied to other parts of the system. Consistency throughout an application can be
supported by establishing the following:
Common presentation is concerned mainly with a common appearance of the interface. Users can be
become familiar with interface components when the visual appearance of these components is
consistent and, in some cases, when the location of these components are consistent.
Common interaction deals with the interaction of the user with different interface components. After
users can recognize interface components, they can interact with these components. Once interaction
techniques associated with each component are consistently supported.
A process sequence defines a series of steps to follow when a user wants to perform a particular type
of action. A common process sequence will define steps for a particular action which must be
supported by all applications in the system.
Common actions provide a language between users and the system so users can understand the
meaning and result of actions. For example, when users select an actions button, the system is
instructed to carry out a particular action.
The interfaces should avoid modes
User are in a mode whenever they must cancel what they are doing before they can do something else
or when the same actions have different results in different situations. Modes force user to focus on
the way application works instead of the task to be done. Modes, therefore, interface with user’s ability
to use his/her conceptual model of how the application should work.
The interface should be transparent
Users should not be made to focus on the mechanism of an application. A good user interface should
bother the user with mechanics. Users view the computer as a tool for completing tasks and should
not have to know how an application works to get a task done. A goal of user interface design is to
make the user interaction with the computer as simple as possible. A user interface should be so simple
that users are not aware of the tools and mechanism that make the application work. As applications
become more complicated, users should be provided with a simple interface so that they can learn new
application easily. An application should reflect a real-world model of the user goals and the task
necessary to reach those goals.
19
The Interface should include error recovery mechanism
User inevitably make mistakes when using a system. The interface design can minimize these mistakes
but mistakes can never be completely eliminated. The interface should therefore provide facilities for
recovering from the mistakes can never be completely eliminated. The interface should therefore
provide facilities for recovering from these mistakes. These can be of two kinds:
•
Confirmation of Destructive Actions- If a specified action is potentially destructive, the system
should prompt the user for confirmation of that action before any information is destroyed.
•
The inclusion of an undo facility which returns the system to a state before the action occurred.
Many levels of undo are useful since users are not always immediately aware of mistakes. In
practice, this is expensive to implement and most systems only allow the last command issued
to be undone.
The Interface should incorporate some form of user guidance
User interfaces should have built-in help facilities. These should be accessible be should accessible
from a terminal and should provide different levels of help and advice. Help facilities should be
structured so that users are not overwhelmed with information when they ask for help. Principles that
should be followed when designing messages of any type are:
•
Messages should be tailored to the user’s context. The user guidance system should be aware
of what the user is doing and should alter the output message appropriately if it is contextdependent.
•
Messages should be tailored to the user’s experience level. As users become more familiar with
a particular system, they become irritated by long meaningful message.
•
Messages should be tailored to the user’s skills. Terminology used in message should be
understood by the users of the system.
•
Message should be positive rather than negative. They should use the active rather than the
passive voice. Messages should never be insulting or funny.
20
CHAPTER FOUR
USER CENTERED DESIGN
User-Centered Design (UCD) or User Eccentric Design (UED) is a design approach which stipulate
that user take center role within system development. Therefore, satisfying user needs is uppermost
in the heart and mind of the design team. UCD is an approach in which, the needs, limitations and
wants of the users is given priority within each level of design. UCD can also been seen as multi-stage
problem solving techniques, simply because at each stage of the development, user needs are given
uppermost priority. Therefore, take for examples the different stage of software development:
Feasibility,
Requirement
Definition,
Design,
Development,
Implementation
and
Post
Implementation, all stage is masked with intricate question answered from the user perspective. In
fact, UCD designs the user needs, leaving behind secondary or irrelevant issues. This approach
involves system users, system owner, system analysts, system designers and programmers working
hand in hand to address the user fundamental needs. The system analyst works closely with the system
user and system design. UCD study closely the system on which the user interacts. It also tries to
understand the system owner and the system user. For example, taken Uniben Kofa as a system. The
development team will have to investigative and understand certain underlying issues such as:
•
The number of system users both front-end and back-end.
•
The platform of implementation – the OS governing the system.
•
The client-side development platform.
•
The server-side development platform.
•
Cost of implementation.
•
Portability.
•
Level of integration with other systems.
UCD approach employs usability which simply means at any stage of development testing is addressed.
Therefore, user satisfactory is at the center of such design. UCD is an iterative process where design
and evaluation steps are built in from first project stage to the last stage. It covers usability goal, user
characteristic, environment tasks and workflow.
Usability – defines the extent to which a product can be used by specified users to achieve specified
goals with effectiveness, efficiency and satisfaction in specified context. The fundamental difference
between UCD and other is that UCD design optimize user interface around the need of the user- the
user defines and provide the specification rather than conforming user to change their working
patterns. UCD try to answer these questions:
•
Who is the user of the document?
•
What are the user task and goal?
•
What is the user experience levels with the document and document like this?
21
•
What functions do the user perform with the document?
•
What information might the user need and in which form?
•
How does user think the document should work?
User- Centered Design (UCD) Models
•
Cooperative Design: Cooperative design involves designers and users on an equal footing. The
term cooperative design is used to designate such cooperation between users and designers. However,
to users, designing a new computer application is a secondary activity whereas for designers it is their
primary work.
•
Participatory Design: Participatory design is an approach to design attempting to actively involve
all stakeholders in the design process to help ensure the result meets their needs and is usable.
Participatory design is an approach which is focused on processes and procedures of design and is not
a design style.
•
Contextual Design: It is a design approach that focuses on the end-user while adopting some ideas
from participatory design. It incorporates ethnographic methods for gathering data relevant to the
product via field studies, rationalizing workflows, and designing human-computer interfaces. In
practice, this means that researchers aggregate data from customers in the field where people are living
and applying these findings into a final product. Contextual design can be seen as an alternative to
engineering and feature driven models of creating new systems.
Elements of User Centered Design (UCD)
•
Visibility: Visibility create a mental model of the document which help the user predict possibly
document actions. UCD visibility help the user tell from a glance the functionality of the document
•
Accessibility: Accessibility as a functionality of UCD provide an avenue for prompt and rapid
information retrieval which make easy throughout the document. Accessibility provides different
way of information retrieval (such navigation elements, search functions, table content)
•
Legibility: Easy of readability and under-stability. Therefore, the designer selects an attractive
and appealing font. Therefore, capitalization may create difficulty in reading and understanding
text format. Italic and capital bolding should be applied to aid emphasizes. Usually, dark text again
a light background is most legible.
•
Language: language can define a certain pattern of writing
•
Rhetorical Situation:
•
Audiences: The audiences define the exact system user. It identifies those who will be using the
documents. Therefore, the designer must consider age, locality, ethnicity, gender and education.
•
Purpose: The purpose as a principle of UCD, is centered on usage and accomplishment. While
using the document. The purpose is tied to the functionalities of the document. The purpose is also
user eccentric.
22
•
Context: The context as applied to UCD defines the situation fostering the design of the
documents. It covers the user immediate need, the environment factors such as government policy,
number of users, obsolete integrated application.
International Standard Methodologies for Creating UCD
International standard Methodology, defines a set of standardized practices and processes applied for
the development of User Centered Design (UCD).
This process is applied through four (04)
developmental life cycles. This includes:
•
Specify the Context of Use: Identify the people who will use the product, what they will use it
for and under what conditions they will use it.
•
Specify Requirement: Identify any business requirement or user goals that must be meet for
the product to be successful.
•
Create Design Solution: This part of the process may be done in stages building from rough
concept to a complete design.
•
Evaluate Designs: The most important part of this process is that evaluation – ideally through
usability testing with actual users.
Typical UCD Methodology
•
A typical user centered design methodology has four main phases: This phase includes; Analysis
Phase, Design Phase, Implementation and Deployment.
•
Analysis Phase: The analysis phase seeks to achieve certain objectives such as: Meet with key
stakeholders to set vision, includes usability tasks in the project plan, assemble project team
members, develop usability goal and objectives, conduct fields’ studies, create user profile,
Develop a task Analysis and Document user performance requirement.
•
Design Phase: The design phase seeks to achieve certain objectives such as: Brainstorm on
Design concept, Develop Screen flow and navigational model, walk through of design concept,
table designing, low-fidelity prototypes, conduct usability testing, create high-fidelity detailed
design, obtain usability testing, document standard and guidelines.
•
Implementation Phase: Carry out ongoing heuristic evaluation, work closely with delivery
team as design and conduct usability testing promptly
•
Deployment Phase: Use survey to get user feedback, conduct filed studies to get info about
actual use and check objectives using usability testing.
23
System Analysis Success Criteria
A successful system is usually analyzed for success taking cognizant of certain factors. These factors
determine how well the system has been implemented to meet user urgent goals and objectives.
These factors include:
•
Implementation of an Integrate System: This phase tries to comprehend how well user
goal and objectives have been meet in line with user requirements, usually identified during
project inception.
•
Detailed Documentation of Current Systems and Relationship:
This facet covers
model information through contextual inquiries, it also through a complete mapping of an
organization, or a portion of organization system structure and relationship between them
•
Work Redesign Recommendation: Work design recommendation contextually provide
inquiries, work modelling, consolidation, and work redesign effort. These recommendations
identify key work processes which updated and affect business processes
•
Work models that identify the follow of data: These models would accurately reflect the
work processes of an organization or a portion of an organization. These work processes would
affect fundamental work processes.
•
Future System Guidelines: These guidelines would reflect clear stakeholder effort in system
analysis.
Auditory Interface
Auditory Interface provides two-way communicative interaction between systems which could be
between human user and services-oriented system. In most cases, the services-oriented systems
employ speech recognition, dialogue and machine listening while the human connector employs
auditory display which could be speech or audio. We focus our attention on non-speech audio to
convey information.
•
Data Sonification: Data Sonification is the use of non-speech sound to render data, either to
enhance the visual display or as purely audio display. Therefore, their versatility is wide seen in
hospital, data exploration and even simulation. Therefore, an ECG Machine (ElectroCardiogram) machine is an example. Therefore, audio output can draw the attention of physician
to significant changes while taking care of other patients.
•
Audification: Audification is the process whereby raw data are provided through sounds.
Therefore, low frequency seismic data and very high frequency radio telescope data can be
transformed into perceptible sound.
24
Auditory Display System
An Auditory display system is a system design to receive raw data in the for speech or non-speech
audio format preprocess these data applying data representation, sonification techniques, application
preprocessing loop, component interaction and technical sound display. These components establish
a closed- loop system that integrate the user and can be represented in most auditory user-interface.
•
Data representation is to present the raw data in the form the system will understand.
•
Application processing loop using the raw data to determine when sound should be
produces.
•
Sonification techniques apply non-speech sound to enhance audio display.
•
Technical sound display- which serves as the main user output interface. Auditory display
techniques employed to render an acoustic signal (digital audio signal)
DATA
A Representation &
Pre-Processing
Interactions
B Application
Processing Loop
C Sonification
Techniques
D Technical Sound
Display
Figure 1: Auditory Display System Architecture
Auditory Display Techniques
Auditory display techniques are algorithms employ with the aim of connecting the data that will be
displayed to sound synthesis techniques. Some of these techniques includes
•
Auditory Icons: Auditory Icons represent specific message synapse with an acoustic event
that should enable the quick and effortless identification and interpretation of signals with
respect to underlying properties.
•
Earcon: Earcon represent an inherited property from language as a more abstract and highly
symbolic form of communication. Earcon allow sound concatenation forming complex sound
structure from simple building blocks.
•
Parameter Mapping Sonification: Parameter mapping sonification (PMS) technique
where varied dataset features are employed in determining different graphical features of
symbols with the overall display tied to graphical element superposition.
25
•
Model- based Sonification: Unlike PMS where data directly control acoustic attributes,
however in MBS the data are used to create a sound-capable dynamic model. This approach
allows the user to control the sound manually without automation by the sonification model.
•
Interactive Sonification: Interactive sonification is a special focused which allow the user
to actively navigate the data while generating the sound.
Benefits of Audio Display System/Interface
•
Reducing Visual Overload -
•
Reinforcing of Visual Messaging
•
An Alternative aid to Visualization
•
High level of Information attained with Auditory
•
High Level of informativeness attain with auditory
•
Eliminate need for Visual display
•
Conveying human emotion through aesthetics
•
Low Auditory Overload- Audio are always rated in the right proportion to prevent losing
meaning and generating noisy.
•
Interference/Masking:
•
Low Resolution-
•
Impermanence
•
Lack of Familiarity
26
CHAPTER FIVE
INTERACTION SYTLE
The concept of interaction style refers to all the ways the user can communicate or otherwise interact
with the computer system. The concept belongs in the realm of HCI or at least have its roots in the
computer medium, usually in the form of workstation or a desktop computer. These concepts do
however retain some of their descriptive powers outside the computer medium. For example, you can
talk about menu selection in mobile phone.
Command Language (or command entry)
Command Language is the earliest form of interaction style and is still being used, though mainly on
Linux/Unix operating system. These Command prompts are used by expert users who type in
command and possibly some parameters that will affect the way the command is executed. The
following screen dumps shows a command prompt in this case, the user has logged on to a mail server
and can use the server’s function by typing commands. Command language places a considerable
cognitive burden on the user in that the interaction style relies on recall as opposed to recognition
memory. Command as well as their many parametrized options have to be learned by heart and the
user and the user is given no help in this task of retrieving commands are abbreviated in order to
minimize the number of necessary keystrokes when typing commands.
Merits and Demerits of Command languages
Merits
•
Flexible.
•
Appeals to expert users.
•
Support creation of user-define scripts or macros.
•
Is suitable for interacting networked computers even with low bandwidth.
Disadvantages
•
Retention of commands generally very poor.
•
Learnability of commands is very poor.
•
High error rate.
•
Not suitable for non-expert.
Form Fill-in
The form fill-in interaction style (fill in the blanks) was aimed at a different set of users than command
language, namely non-expert users. When form fill-in interfaces first appeared, the whole interface
was form-based, unlike much of todays’ software that mix forms with other interaction style. Back
27
then, the screen was designed as a form in which data could be entered in the pre-defined form fields.
The TAB key was used to switch between fields and ENTER to submit the form. Thus, there was
originally no need for a pointing device a such mouse and separation of data in fields.
Merits and Demerits of Form Fill-in
Merits
•
Simplifies data entry
•
Shortens learning in that the field are predefined
•
Guides the user via the predefined rules
Disadvantages
•
Consumes screen space
•
Usually sets the scene for rigid formalization of the business processes
Menu Selection
A menu is a set of options displayed on the screen where the selection and execution of one (or more)
of the options results in a state change of the interface. Using a system based on menu-selection, the
user selects a command from a predefined selection of commands arranged in menus and observes
the effect. If the label on the meus/commands are understandable (grouped well) users can accomplish
their tasks with negligible learning or memorization as finding a command arranged in menus and
observe the effect. If the labels on the menu/command are understanding (group well) users can
accomplish their tasks with negligible learning.
Merits and Demerits of Form Menu Selection
Merits
•
Ideal for intermittent user
•
Can appeal to expert users if displayed and selection mechanism are rapid and if appropriate.
•
Structures decision making
•
Allows easy support of error handling.
Disadvantages
•
Information overload and complexity due to increased menus
•
Slower for frequent users.
•
May not be suited for small graphics display
28
Direct Manipulation
Direct manipulation is a central theme in interface design and is treated in a separate encyclopedia
entry. Direct manipulation captures the idea of “direct manipulation” of the object of interest which
means that objects of interest are represented as distinguishable objects in the UI and are manipulated
in a direct fashion. Direct manipulation system is known for having certain characteristic which
includes- visibility of object of interest, rapid, reversible, incremental actions and replacement of
complex command language structure.
Merits and Demerits of Form Direct Manipulation
Merits
•
Easy learning
•
Errors can be avoided more easily
•
Encourage exploration
•
Present task concept Visually
Disadvantages
•
May be more difficult to programmer
•
Not suitable for small graphic display
•
Spatial and visual representation is not always
INTERACTION STYLES
Interaction Style
Main advantage
Main Disadvantage
Application example
Direct Manipulation
Fast and intuitive,
Easy to learn
Avoids user error,
Little typing required
Simple data entry,
Easy to learn
Powerful and flexible
Implementation
Difficulty
Slow for experienced
user.
Take up a lot of screen
size
Hard to learn
Accessible to casual
users, easily extended,
Require more typing
Video Games
CAD systems
Most general-purpose
systems
Stock control, Personal
loan processing
Operating systems,
command and control
systems
Information retrieval
systems
Menu Selection
Form Fill-in
Command Language
Natural Language
User Interface Management System (UIMS)
User Interface Management System (UIMS) is a mechanism for cleanly separating process or business
logic from graphical user interface (GUI) code in computer program. UIMS are designed to support
N-tier architecture by strictly defining and enforcing the boundary between the business logic and the
29
GUI. A fairly rigid software architecture is nearly always implied by the UIMS, and most often only
one paradigm of separation is supported in a single UIMS. A UIMS may also have libraries and systems
such as graphic tools for the creation of user interface. Generally, you cannot easily use multiple UIMS
systems at the same time, so choosing the correct model for your UIMs is a critical design decision in
any project. The choice is largely dependent upon the system you wise to create user interfaces for,
and the general style of your application.
Windowing System
A window system (window system) is a component of a graphical user interface (GUI) and more
specifically of a desktop environment, which support the implementation of window managers and
provide basic support for graphics hardware, pointing devices such as mouse and keyboard. The mouse
cursor is also generally drawn by the windowing system. The term windowing system is sometimes
used to refer to other elements of a graphical interfaces such as those belonging to window managers
or even applications.
A window is an area on the screen that display information, with its content being displayed
independently from the rest of the screen. It is easy for a user to manipulate a window. It can be opened
and closed by clicking on an icon or application and it can be moved to any area by dragging it (that is
by clicking in a certain area of the window usually the title bar along the tops and keeping the pointing
devices button pressed, them moving the pointing device. A window can be placed in front or behind
another window, its size can be adjusted and scrollbars can be used to navigate the section within it.
There are many types of specialize windows:
•
A Container Window: A container window that is opened while invoking the icon of a mass
storage devices or directory or folder and which is presenting an order list of other icons that
could be against some other directories or data files or maybe even executable programs. Most
container windows present their content in form of browser or text window.
•
A browser Window: A browser window allows the user to move forward and backward
through a sequence of documents or web pages. Web browser are an example of these type of
window
•
Text terminal window: Text terminal window are designed for embedding interaction with
text user interfaces within the overall graphical interface. MS-Dos and UNIX consoles are
example of these types of window.
•
A child Window- Open automatically or as a result of a user activity in a parent window.
Pop-up windows on the internet can be child windows.
•
A message window, or dialog box – is a type of child window. These are usually small and
basic windows that are opened by a program to display information to the user and/ or get
information from the user.
30
Properties of a Window
•
Menus
Menus allow the user to execute commands by selecting from a list of choice. Options are selected
with a mouse or other pointing devices with a GUI. A keyboard may also be used. Menus are
convenient because they show what commands are available within the software. This limits the
amount of documentation the user reads to understand the software.
o
A menus bar is display horizontally across the top of the screen and/or along the tops of
some or all window. A pull-down menu is commonly associated with thus menu type.
o
A menu has a visible title within the menu bar. Its contents are only revealed when they
user selects it with pointers. The user is then able to select the items within the pull-down
menu.
o
A context menu is invisible until the user performs a specific mouse actions, like pressing
the right mouse button. When the software – specific mouse actions occur, the menu will
appear under the cursor.
o
•
Menu extras are individual items within or at the side of a menu.
Icons
An icon is a small picture that represents object such as a file, program, web page or command. They
are a quick way to execute commands, open documents and run programs. Icons are also very useful
when searching for an object in a browser list, because in many operating systems all documents using
the same extension will have the same icon.
31
CHAPTER 6
HUMAN-COMPUTER INTERACTION
Human Computer Interaction (HCI) is the study of interaction between people (users) and computers.
It is often regarded as the intersection of computer science, behavioral sciences, design and several
other fields of study. HCI is also sometimes referred to as many machine interactions (MM1) or
computer human interaction (CHI). Interaction between users and computers occurs at the user
interface (or simply interface), which includes both software and hardware, for example, generalpurpose computer peripherals and large-scale mechanical systems, such as aircraft and power plants.
The following definition is given by the Association for Computing Machinery:
"Human-computer interaction is a discipline concerned 'with the design,
evaluation and implementation of interactive computing systems for human
use and with the study of major phenomena surrounding them."
The implementation from the perspective of machine includes techniques in computer graphics,
operating systems, programming languages, and development environments are relevant. While the
human side propagate, communication theory, graphic and industrial design disciplines, linguistics,
social sciences, cognitive psychology, and human performance are relevant.
Goals
A basic goal of HCI is to improve the interactions between users and computers by making computers
more usable and receptive to the user's needs. Specifically, HCI is concerned with:
•
Methodologies and processes for designing interfaces (given a task and a class of users, design
the best possible interface within given constraints, optimizing for a desired property such as
learning ability or efficiency of use)
•
Methods for implementing interfaces (software toolkits and libraries; efficient algorithms)
•
Techniques for evaluating and comparing interfaces
•
Developing new interfaces and interaction techniques
•
Developing descriptive and predictive models and theories of interaction
A long-term goal of HCI is to design systems that minimize the barrier between the human’s cognitive
model of what they want to accomplish and the computer's understanding of the user's task.
Professional practitioners in HCI are usually designers concerned with the practical application of
design methodologies to real-world problems. Their work often revolves around designing graphical
user interfaces and web interfaces. Researchers in HCI are interested in developing new design
methodologies, experimenting with new hardware devices, prototyping new software systems,
exploring new paradigms for interaction, and developing models and theories of interaction.
32
Differences with related fields
HCI differs with human factors in that there is more of a focus on users working with computers rather
than other kinds of machines or designed artifacts, and an additional focus on how to implement the
(software and hardware) mechanisms behind computers to support human-computer interaction. It
means that human factors are a broader term, and human factors of computers can be described as
HCI - albeit some experts try to differentiate these areas.
About some experts' opinion, HCI also differs with ergonomics in that there is less of a focus on
repetitive work-oriented tasks and procedures, and much less emphasis on physical stress and the
physical form or industrial design of physical aspects of the user interface, such as the physical form
of keyboards and mice. Howler, it is caused by the lack of information about ergonomics. The oldest
areas of ergonomics were the above mentioned, but nowadays (in the last decades), ergonomics have
a much broader focus: ergonomics is equal to human factors. Cognitive ergonomics is a part of
ergonomics, and the old-fashioned terms software ergonomics signs a part of cognitive ergonomics software ergonomics means HCI.
Two areas of study have substantial overlap with HCI even as the focus of inquiry shifts. In computer
supported cooperative work (CSCW) emphasis is placed on the use of computing systems in support
of the collaborative work of a group of people. In the study of personal information management (PIM)
human interactions with the computer are placed in a larger informational context. People may work
with many forms of information, some computer-based, many not (e.g., white boards, notebooks,
sticky notes, refrigerator magnets) in order to understand and effect desired changes in their world.
Human Computer Interface
The human computer interface (HCI) can be described as the point of communication between the
human user and the computer. The flow of information between the human and computer is defined
as the loop of interaction. The loop of interaction has several aspects to it including:
•
Task Environment: The conditions and goals set upon the user.
•
Machine Environment: The environment that the computer is connected to, i.e., a laptop
in a college student's dorm room.
•
Areas of the Interface: Non-overlapping areas involve processes of the human and
computer not pertaining to their interaction. Meanwhile, the overlapping areas only concern
themselves with the processes pertaining to their interaction.
•
Input Flow: Begins in the task environment as the user has some task that requires using
their computer.
•
Output: The flow of information that originates in the machine environment.
33
•
Feedback: Loops through the interface that evaluate, moderate, and confirm processes as
they pass from the human through the interface to the computer and back.
HCI Design Principles
When evaluating a current user interface or designing a new user interface, it is important to keep in
mind the following experimental design principles:
•
Early focus on user(s) and task(s): Establish how many users are needed to perform the task(s)
and determine who the appropriate users should be; someone that has never used the
interface, and will not use the interface in the future, is most likely not a valid user. In addition,
define the task(s) the users will be performing and how often the task(s) need to be performed.
•
Empirical measurement: Test the interface early on with real users who come in contact with
the interface on an everyday basis, respectively. Keep in mind that results may be altered if the
performance level of the user is not an accurate depiction of the real human-computer
interaction. Establish quantitative usability specifics such as: the number of users performing
the task(s), the time to complete the task(s), and the number of errors made during the task(s).
•
Iterative design: After determining the users, tasks, and empirical measurements to include,
perform the following iterative design steps:
1.
Design the user interface
2. Test
3. Analyze results
4. Repeat
Repeat the iterative design process until a sensible, user-friendly interface is created.
The future for HCI is expected to include the following characteristics:
Ubiquitous communication
Computers will communicate through high-speed local networks, nationally over wide-area networks,
and portably via infrared, ultrasonic, cellular, and other technologies. Data and computational services
will be portably accessible from many if not most locations to which a user travel.
High functionality systems
Systems which have large numbers of functions associated with them. There will be so many systems
that most users, technical or non-technical, will not have time to learn them in the traditional way
(e.g., through thick manuals).
34
Mass availability of computer graphics
Computer graphics capabilities such as image processing, graphics transformations, rendering, and
interactive animation will become widespread as inexpensive chips become available for inclusion in
general workstations.
Mixed media Systems: Mixed media systems will handle images, voice, sounds, video, text,
formatted data etc. These will be exchangeable over communication links among users. The separate
worlds of consumer electronics (e.g., stereo sets, VCRs, televisions) and computers will partially
merge. Computer and print worlds will continue to cross assimilate each other.
High-bandwidth interaction
The rate at which humans and machines interact will increase substantially due to the changes in
speed, computer graphics, new media, and new input/output devices. This will lead to some
qualitatively different interfaces, such as virtual reality or computational video.
Large and thin displays
New display technologies will finally mature enabling very large displays and also displays that are
thin, light weight, and have low power consumption. This will have large effects on portability and will
enable the development of paper-like, pen-based computer interaction systems very different in feel
from desktop workstations of the present.
Embedded computation
Computation will pass beyond desktop computers into every object for which uses can be found. The
environment will be alive with little computations from computerized cooking appliances to lighting
and plumbing fixtures to window blinds to automobile braking systems to greeting cards. To some
extent, this development is already taking place. The difference in the future is the addition of
networked communications that will allow many of these embedded computations to coordinate with
each other and with the user. Human interfaces to these embedded devices will in many cases be very
different from those appropriate to workstations.
Information Utilities
Public information utilities (such as home banking and shopping) and specialized industry services
(e.g., weather for pilots) will continue to proliferate. The rate of proliferation will accelerate with the
introduction of high-bandwidth interaction and the improvement in quality of interfaces.
35
Usability
This measures the quality of a user's experience when interacting with a product or system whether a
Web site, a software application, mobile technology, or any user-operated device. In general, usability
refers to how well users can learn and use a product to achieve their goals and how satisfied they are
with that process. Usability, as defined by Joseph Dumas and Janice (Ginny) Redish, means that
people who use the product can do so quickly and easily to accomplish their tasks. Usability may also
consider such factors as cost-effectiveness and usefulness. It is important to realize that usability is
not a single, one-dimensional property of a user interface. Usability is a combination of factors
including:
Ease of learning - How fast can a user who has never seen the user interface before learn it
sufficiently well to accomplish basic tasks?
Efficiency of use - Once an experienced user has learned to use the system, how fast can he or she
accomplish tasks?
Memorability - If a user has used the system before, can he or she remember enough to use it
effectively the next time or does the user have to start over again learning everything?
Error frequency and severity - How often do users make errors while using the system, how
serious are these errors, and how do users recover from these errors?
Subjective satisfaction – How much does the user like using the system?
User-centered design with respect to usability testing
User-centered design (UCD) is an approach for employing usability. It is a structured product
development methodology that involves users throughout all stages of Web site development, in order
to create a Web site that meets users' needs. This approach considers an organization's business
objectives and the user's needs, limitations, and preferences.
Importance of user-centered design
If your Web site is not useful to users, it will never be used. In order for your Web site to be successful,
users must visit the site to find information or accomplish tasks. No matter what objectives you have
set for your Web site, it must carefully balance the needs of users and the needs of your organization.
If users don't find your Web site helpful, they will not use it, which will, in turn, prevent you from
meeting your organization's objectives. From the business side, you can lower operating and
redevelopment costs by developing a product, such as a Web site, correctly the first time around. To
create a user-centered Web site you must think about the needs of your users throughout each step in
the development of your site, including:
36
•
Planning your site
•
Collecting data from users
•
Developing prototypes
•
Writing content
•
Conducting usability testing with users
How user-centered design differ from usability testing
UCD, sometimes called usability engineering, is a structured approach to producing a Web site that
involves users throughout the entire design process to create a Web site that works. UCD involves
several methods, each applied at appropriate times, including:
•
Defining business and user goals and objectives
•
Gathering requirements
•
Developing and testing prototypes
•
Evaluating design alternatives
•
Analyzing usability problems
•
Proposing solutions
•
Testing a site with users
Usability Testing
Usability testing fits in as one part of the user-centered design process. In a usability test,
representative users try to find information (or use functionality) on the Web site, while observers,
including the development staff, watch, listen, and take notes. The purpose of a usability test is to
identify areas where users struggle with the site and make recommendations for improvement.
Usability testing is typically best implemented after you've completed earlier steps in the UCD process.
It’s better to clearly define problems, goals, and objectives before testing your site. In a usability test,
representative users try to do typical tasks with the product, while observers, including the
development staff, watch, listen, and take notes. The product can be a Web site, Web application, or
any other product. It does not have to be a finished product. You should be testing prototypes from
early paper-based stages through fully functional later stages.
Style Guide
Style guides are required in user interface design to provide the developer with a set of guidelines
that will assist in developing a consistent user interface. A user interface style guide can serve as:
•
A tool for ensuring consistency across a product set
•
Away to get groups to work together
•
The repository for design guidelines and standards
37
•
A training aid for new members of the product team
The creation of a style guide can serve as a focal activity for an integrated design team involving
documentation, development, usability, graphic design, marketing, and other groups. The first step in
style guide development is to select stakeholders who can contribute in substantive and political ways.
Several members of the style guide team should have some exceptional political clout or be highly
respected for their technical expertise. These powerful stakeholders can serve as evangelists for the
style guide and the process for ensuring consistency. The second purpose of a style guide is to describe
the guidelines and standards for software or hardware products and the methods for ensuring
consistency across products.
Benefits of a Style Guide
The benefits of style guide are useful for justifying the time and money spent on a style guide.
End Users
Developers
Business Team
Reduced errors
Maintain control over look and feel
Produce usable systems that reduce
support costs and increase user
satisfaction
Less frustration
Minimize re-invention
Increased morale
Capitalize on learning
Improved efficiency
Enable production of reusable
software
Reduce training costs
Increased confidence
Reduce development time
Improve staff retention
Reduced resistance to
new technology
Reduce arbitrary design decisions
Increase user acceptance of new systems
Increase market awareness
Increase product awareness
Screen Design Standardization
Displays are human-made artifacts designed to support the perception of relevant system variables
and to facilitate further processing of that information. Before a display is designed, the task that the
display is intended to support must be defined (navigating, controlling, decision making, learning,
entertaining, etc.). A user or operator must be able to process whatever information that a system
generates and displays; therefore, the information must be displayed according to principles in a
manner that will support perception, situation awareness, and understanding.
Thirteen Principles of Screen/Display Design
These principles of human perception and information processing can be utilized to create an effective
display design. A reduction in errors, a reduction in required training time, an increase in efficiency,
and an increase in user satisfaction are a few of the many potential benefits that can be achieved
38
through utilization of the-principles. Certain principles may not be applicable to different displays or
situations. Some principles may seem to be conflicting, and there is no simple solution to say that one
principle is more important than another. The principles may be tailored to a specific design or
situation. Striking a functional balance among the principles is critical for an effective design.
Perceptual Principles
•
Make displays legible (or audible)
A display's legibility is critical and necessary for designing a usable display. If the characters or objects
being displayed cannot be discernible, then the operator cannot effectively make use of them.
•
Avoid absolute judgment limits
Do not ask the user to determine the level of a variable on the basis of a single sensory variable (e.g.
color, size, loudness). These sensory variables can contain many possible levels.
•
Top-down processing
Signals are likely perceived and interpreted in accordance with what is expected based on a user's past
experience. If a signal is presented contrary to the user's expectation, more physical evidence of that
signal may need to be presented to assure that it is understood correctly.
•
Redundancy gain
If a signal is presented more than once, it is more likely that it will be understood correctly. This can
be done by presenting the signal in alternative physical forms (color and shape, voice and print, etc.),
as redundancy does not imply repetition. A traffic light is a good example of redundancy, as color and
position are redundant.
•
Similarity causes confusion: Use discriminable elements
Signals that appear to be similar will likely be confused. The ratio of similar features to different
features causes signals to be similar. For example, A423B9 is more similar to A423B8 than 92 is to 93.
Unnecessary similar features should be removed and dissimilar features should be highlighted.
Mental Model Principles
•
Principle of pictorial realism
A display should look like the variable that it represents (high temperature on a thermometer shown
as a higher vertical level). If there are multiple elements, they can be configured in a manner that looks
like it would in the represented environment.
39
•
Principle of the moving part
Moving elements should move in a pattern and direction compatible with the user's mental model of
how it actually moves in the system. For example, the moving element on an altimeter should move
upward with increasing altitude.
Principles Based on Attention
•
Minimizing information access cost
When the user's attention is averted from one location to another to access necessary information,
there is an associated cost in time or effort. A display design should minimize this cost by allowing for
frequently accessed sources to be located at the nearest possible position. However, adequate legibility
should not be sacrificed to reduce this cost.
•
Proximity compatibility principle
Divided attention between two information sources may be necessary for the completion of one task.
These sources must be mentally integrated and are defined to have close mental proximity.
Information access costs should be low, which can be achieved in many ways (close proximity, linkage
by common colors, patterns, shapes, etc.). However, close display proximity can be harmful by causing
too much clutter.
•
Principle of multiple resources
A user can more easily process information across different resources. For example, visual and
auditory information can be presented simultaneously rather than presenting all visual or all auditory
information.
Memory Principles
•
Replace memory with visual information: knowledge in the world
A user should not need to retain important information solely in working memory or to retrieve it from
long-term memory. A menu, checklist, or another display can aid the user by easing the use of their
memory. However, the use of memory may sometimes benefit the user rather than the need for
reference to some type of knowledge in the world (expert computer operator would rather use direct
commands from their memory rather than referring to a manual). The use of knowledge in a user's
head and knowledge in the world must be balanced for an effective design.
•
Principle of predictive aiding
Proactive actions are usually more effective than reactive actions. A display should attempt to
eliminate resource-demanding cognitive tasks and replace them with simpler perceptual tasks to
40
reduce the use of the user's mental resources. This will allow the user to not only focus on current
conditions, but also think about possible future conditions. An example of a predictive aid is a road
sign displaying the distance from a certain destination.
•
Principle of consistency
Old habits from other displays will easily transfer to support processing of new displays if they are
designed in a consistent manner. A user's long-term memory will trigger actions that are expected to
be appropriate. A design must accept this fact and utilize consistency among different displays.
Design Considerations
Today there are some pretty slick tools to quickly build screens. Regardless of their capabilities, a
developer should be cognizant of three basic design considerations: Layout, Data Entry, and Support
•
Layout: The objective here is to make the screen "clean" and consistent. Too much detail makes
the screen cluttered and abrasive to the end-user. When designing your screen, consider eye
movement, eye strain and, where appropriate, add magnification. Here are some tips for
consideration:
•
Alignment - there should be some simple symmetry to the screen. Disjointed alignment of fields,
text, and images tends to alienate users. There should be a comfortable amount of spacing not
only around the edge of the screen, but between sections of the screen. Because GUI windows can
be resized (either maximum or to a height and width devised by the user), consider how the screen
will look in either form. Borders are useful for defining sections on the screen, but be careful they
do not become overbearing and distracting.
•
Zoning - this refers to the establishment of sections within the screen. This is useful if different
types of users are going to be accessing the same screen, or if different sections serve distinctly
separate purposes (thereby not confusing one with another). Borders and colors can be useful for
distinguishing sections. In a GUI window, notebook tabs can be useful.
•
Flow - there should be an obvious flow to the screen that will naturally catch the user's eye and
prompt him/her in the proper direction. Understand this, Western countries generally observe
things from left-to-right and top-down; Eastern countries observe things top-down and from leftto-right; and Middle Eastern countries observe things from right-to-left and top-down. Also
understand that the tab order of the keyboard provides direction for the user. As such, the tab
order on a screen should go in a logical order and not jump around meaninglessly.
•
Type Fonts - use common fonts familiar to users. Fancy fonts may be impressive, but will they
be supported on all of the computers where the screen will be accessed from? Commonly accepted
fonts include Arial, Courier, Sans Serif, and Times Roman. Devise a standard font point size; 10
is generally agreed to be readable by the average person, but then again, will your end-user be an
41
average person? Also, devise a standard scheme for upper-case and lower-case lettering and type
styles (e.g., bold, italic); such subtleties will naturally attract the eye.
•
Colors can be helpful for highlighting sections, accenting required field entries, or for general
appearance. Although colors can be helpful, they can also be distracting if they become
overbearing. Be sensitive to color contrasts so the user can adequately read the screen. Also be
cognizant of end-users who are might be colorblind.
•
Headings - screen headings should be placed in a standard position for easy identification by
the user. A formal name and, where appropriate, a screen number should be clearly visible to the
user.
•
Keyboard/Mouse relationship - if in the event a computer mouse either breaks down or is
simply not available, the user should still be able to execute the screen using simple keyboard
commands. CUA standards are particularly useful in this regard.
42