User Interfaces

❑ Basic Design Issues

❑ Video and Audio at the User Interface
❑ User- friendliness as the Primary Goal
User Interface
• User interface is the layer of the software or the program with which the
end users interact in order to get his things done for e.g. processing of the
information.
• This interaction today occurs with a graphical layer with which the user can
interact with several input devices like keyboard, mouse, track balls, data
gloves etc.
• Multimedia user interface is just another computer interface where the
users can interact with the computer by the use of multiple media,
sometimes using multiple modes such as written text together with spoken
language.
• Example is Microsoft word where the user can document his information
either by giving input through the keyboard or through the microphone.
User Interface
• User interfaces should be designed to match the skills, experiences
and expectations of its anticipated users.
• System users often judge a system by its interface rather than its
functionality.
• A poorly designed interface can cause a user to make catastrophic
errors.
• Poor user interface design is the reason why so many software
systems are never used.
User Interface
• There are still many well known problems with current user
interfaces. One problem is computer interaction which is still not that
natural and effective.
• For example still we cannot tell (use voice) to give commands to
computer to carry out a task.
• Yet, computer programs are in evolutionary trend and we already
have few software packages that allows user to literally command the
computer.
User Interface
• Another problem is the specification of object movement. A
specification of movements using graphics or text is often much more
difficult and complicated than using a motion video.
• The development of user interface is heading toward more effective
and interactive interfaces using new interactive devices, which is an
area of research in the field of virtual reality.
Human factors in Interface design
• Limited short-term memory:
▪ People can instantaneously remember about 7 items of information. If you
present more than this, they are more liable to make mistakes.
• People make mistakes:
▪ When people make mistakes and systems go wrong, inappropriate alarms and
messages can increase stress and hence the likelihood of more mistakes.
• People are different
▪ People have a wide range of physical capabilities. Designers should not just
design for their own capabilities.
• People have different interaction preferences
▪ Some like pictures, some like text.
Basic Design Issues
• The main emphasis in the design of multimedia user interfaces is
multimedia presentation. There are several issues which must be
considered:
i. To determine the appropriate information content to be communicated.
ii. To represent the essential characteristics of the information.
iii.To represent the communicative intent.
iv. To choose the proper media for information presentation.
v. To coordinate different media and assembling techniques within a
presentation.
vi. To provide interactive exploration of the information presented.
Architectural Issues
• An effective presentation design should be as interactive as it is
informative.
• The user should have the freedom to choose the direction of
navigation.
• This should be supported by user-oriented goals, context sensitive
help and selection of proper media in order to represent the
information.
Information Characteristics for Presentation
• The complete set of information characteristics makes knowledge
definition and representation easier because it allows for appropriate
mapping between information and presentation techniques.
• The information characteristics specify:
• Types:
▪ characterization schemes are based on ordering information. There are two
types of ordered data:
1. Coordinates vs. amount which specify points in time, space or other
domains. Example: Sorting events by their occurrence in time.
2. Intervals vs. ratio, which suggests the type of comparisons meaningful
among elements of coordinate and amount data types. Example:
Comparing the heights of different people to see who is taller.
Information Characteristics for Presentation
• Relational Structures:
• These characteristics describe how a relation connects different sets of
things (dependency).
• There are functional dependencies and non-functional dependencies.
• Functional dependencies: When one thing depends on another in a specific
way.
• Example: In a bar chart, the height of a bar depends on the value it represents.
• Non-functional dependencies: When things are related but not in a specific
way.
• Example: In a student entry in a database, a student's name, ID, and course are
related, but there's no specific dependency like in a bar chart.
Information Characteristics for Presentation
• Multi-domain Relations:
• Different characteristics of a single group of things (e.g., positions,
colors, shapes, and sizes of objects in a chart).
• Example: In a chart, you might have data about the positions and colors of
various shapes.
• Different groups of objects (e.g., a bunch of text and symbols on a
map).
• Example: A map might have both text labels and graphical symbols
representing different things.
• Different ways of displaying information.
• Example: You can show data in tables, charts, and graphs, all at the same time
Information Characteristics for Presentation
• Large Data Sets:
▪ Large datasets refers to numerous attributes of collections of heterogeneous
objects.
▪ Example: A dataset might have information about cars, trees, and houses, all
in one big collection, with lots of details about each.
▪ These datasets are often used to show complex relationships or structures,
like networks of related ideas or technical information for big systems.
Presentation Functions
• Presentation function is a program which displays an object (e.g.
printf for a display of a character). [E.g: printf function]
• It's important to describe how something should be shown without
worrying about how it looks, the style, or what it means.
• There are two ways to do it: One is to define what you want to
achieve with the information.
• Example: "I want to show the temperature in a clear way."
• The other is to break down the goals for showing information in a
step-by-step way, based on a plan for communication.
• Example: First, show the title, then the data, and finally, the source of the
information.
Presentation Design Knowledge
• To design a presentation, issues like content selection, media and
presentation technique selection and presentation coordination must be
considered.
• Content selection is the key to convey the information to the user. The
information should be simple and revealing.
• Media selection is making choice of the media that is used to convey the
content. For selecting presentation techniques, rules can be used.
• For eg; rules for selection methods, i.e. for supporting a user’s ability to
locate one of the facts in presentation.
• For e.g. the numerical data can be effectively presented with the help of
graph while audio would be suitable for narration
Presentation Design Knowledge
• Coordination can be viewed as a process of composition.
• Coordination needs mechanisms such as:
• encoding techniques (e.g., among graphical attributes, sentence
forms, audio attributes, or between media). Ways to combine
different elements, like colors and shapes.
• presentation objects that represent facts (e.g., coordination of the
spatial and temporal arrangement of points in a chart). Example:
Arranging points on a chart so they show a clear pattern.
• multiple displays (e.g, windows)
Effective Human-Computer Interaction
• One of the most important issues regarding multimedia interfaces is effective human-
computer interaction of the interface, i.e., user-friendliness.
• Here are the main issues the user interface designer should keep in mind:
1. Context; Example: Making sure a navigation menu on a website is easy to understand
in the context of the website's content.
2. Linkage to the world beyond the presentation display; Example: Adding links in an e-
book to external websites for more information.
3. Evaluation of the interface with respect to other human-computer interfaces;
Example: Assessing whether a mobile app's interface is as intuitive as other similar
apps.
4. Interactive capabilities; Example: Adding buttons and touch gestures to a video game
to make it more engaging.
5. Separability of the user interface from the application; Example: Creating a user-
friendly menu system that can be used in different software programs.
Classification of software: System software and
Application software
Types of System Software
• Operating systems: - Operating system software helps you for the effective
utilization of all hardware and software components of a computer system.
• Programming language translators: - Transforms the instructions prepared
by developers in a programming language into a form that can be
interpreted or compiled and executed by a computer system.
• Communication Software: – Communication software allows us to transfer
data and programs from one computer system to another.
• Utility programs: – Utility programs are a set of programs that help users in
system maintenance tasks, and in performing tasks of routine nature.
Types of Application Software
• Word-processing software: - It makes use of a computer for creating,
modifying, viewing, storing, retrieving, and printing documents.
• Spreadsheet software: - Spreadsheet software is a numeric data-analysis
tool that allows you to create a computerized ledger.
• Database software: - A database software is a collection of related data
that is stored and retrieved according to user demand.
• Graphics software: - It allows computer systems for creating, editing,
drawings, graphs, etc.
• Education software: - Education software allows a computer to be used as
a learning and teaching tool.
• Entertainment software: - This type of app allows a computer to be used
as an entertainment tool.
System Software VS Application Software
Video at the User Interface
• Video is actually the continuous sequence of still images such that the rate
of replacement of images is 15 images per second (however for better
quality 30 images per second is used).
• Thus the video can be manipulated using the interface that is used to
manipulate the image.
• The user should be allowed to navigate through the video both in the
forward or backward direction possibly by the use of slider.
• The properties of the video like the contrast, sharpness should be
adjustable and if there is audio too the user should be allowed to fine tune
it.
• These functionalities are not as simple to deliver because of the high data
transfer rate necessary is not guaranteed by most of the hardware in
current graphics systems
Hardware for Visualization of Motion Pictures
• Special hardware for visualization of motion pictures is available today,
mostly through additional video cards.
• Early examples of such additional hardware are IBM-M-Motion and
ActionMedia II (Intel/IBM) cards, and the Parallax, Sun and RasterOps
cards. Today, these cards have become an integral part of the multimedia
system.
• In most window systems, when you watch videos, they use a method called
chromakey. This means that an app makes a video window with a specific
color background, often blue.
• If the hardware switch detects motion video, such a video window presents
the video signal taken directly from a camera. Using a communication-
capable multimedia system, this camera can be controlled remotely.
• The video data may be transmitted from the camera into a computer
network and then displayed.
Example Camera Control Application
• Remote camera control is used, for example, in surveillance
applications. Another example is a microscope, remotely controlled in
a telesurgery environment.
• We discuss below an application in which an engineer remotely
controls a CIM-completion process with the help of a remote-control
video camera.
Example Camera Control Application
Application Specification:
• A camera is connected to a computer which serves as a camera server
through a standardized analogue interface.
• The camera server sends commands such as focus, zoom and position to
the camera through this serial interface.
• The actual control of the camera is initiated by the camera-client, which
can be located remotely.
• In addition to the data path for camera control, there is also a video path.,
i.e. the video data are digitized, compressed and sent by the camera-server
to the camera-client where the engineer is located. The video image taken
from the camera is displayed
Example Camera Control Application
User interface:
• In this case, the simplest decision would have been to use the keyboard.
Fixed control functions could be assigned to individual keys.
• For example, the keys left, right, up, and down would move the camera in
the corresponding directions.
• In a window system, individual buttons can be programmed to position a
camera. Pushing the buttons initiates the positioning process. The
particular moment is stopped explicitly with the stop button.
• Another possibility to position a camera is by the pushing and releasing of
a button., i.e. continuous movement of the camera follows through several
consecutive ‘push’ and ‘release’ button actions.
• Instead of using buttons in a window system, positioning in different access
can also be done through scrollbar
Direct Manipulation of the Video
• Window In our setup we decided to use a very user-friendly variant known as
direct manipulation of the video window. There are two possibilities:
1. Absolute Positioning:
• Imagine a tree in the upper right corner of the video window. The user positions
the cursor on this object and double-clicks with the mouse.
• Now, the camera will be positioned so that the tree is the center of the video
window, i.e., the camera moves in the direction of the upper right corner.
• This method of object pointing and activating a movement of camera is called
absolute positioning.
• The camera control algorithm must derive the position command from:
• the relative position of the pointer during the object activation in the video window; and
• the specified focal distance.
Direct Manipulation of the Video
2. Relative Positioning:
• Imagine the pointer to the right of the center of the video window. By pushing
the mouse button, the camera moves to the right.
• The relative position of the pointer with respect to the center of the video
window determines the direction of the camera movement.
• When the mouse button is released, the camera movement stops. This kind of
direct manipulation in the video window is called relative positioning.
• A camera can move at different speeds. A speed can be specified through the
user interface as follows:
• If the mouse has several buttons, different speeds can be assigned to each button. For
example, the left mouse button could responsible for slow, accurate motion (e.g, for
calibration of the camera). The right buttons could be for fast movement of the camera.
• Instead of working with several mouse buttons, the distance of the pointer to the window
center could determine the speed; the larger the distance, the faster the movement of
camera
Audio at the User Interface
• Audio can be implemented at the user interface for application control. Thus, speech
analysis is necessary.
• Speech analysis is either speaker-dependent or speaker-independent.
• Speaker dependent solutions allow the input of approximately 25,000 different words
with a relatively low error rate.
• Audio output can use multiple channels (e.g., stereo) for better sound distribution.
• During a conference with four participants, a fixed place is assigned to each participant.
Video and sound are placed according to participant positions.
• Loudest speaker's video is activated, measured over 5 seconds to ignore short loud
signals.
• Monophony means all audio comes from the same place, like listening with one ear.
• Stereophony allows hearing quieter sounds for those with two ears.
• Audio window concept lets users control audio parameters, which many apps don't
allow.
User- friendliness as the primary goal
• User friendliness is the main property of a good user interface. The
design of user-friendly graphical interface requires the consideration
of many conditions.
• The addition of audio and video to the user interface does not
simplify this process.
• The user-friendliness is implemented by:
• Easy to Learn instructions
• Presentation
• Dialogue Boxes
• Additional Design Criteria
• Design-specific Criteria
Easy to Learn instructions
• The instructions guiding the use of interface should be easy to learn.
• The language should be simple and graphical.
Presentation
• The presentation, i.e., the optical image at the user interface, can
have the following variants:
▪ Full text
▪ Abbreviated text
▪ Icons i.e. graphics
▪ Micons i.e. motion video
Dialogue Boxes
• Different dialogue boxes should have a similar construction. This
requirement applies to the design of
▪ the buttons OK and Abort
▪ Joined Windows
▪ Other applications in the same window system
Additional Design Criteria
• Use a changing cursor, like a spinning fish, to show when a task is
happening.
• When tasks take a long time, show progress, like a filling bar for disk
formatting or bytes transferred during file retrieval.
• Always have an "Abort" option available for canceling long tasks.
• Highlight selected entries as "work in progress" to prevent more
input.
Meaningful Location of Functions
• Individual functions must be placed together in a meaningful fashion.
This occurs through
▪ alphabetic ordering
▪ logical grouping
Design-specific Criteria
• While designing the user interface the problem specific properties of
the actual task need to be considered.
• For e.g. in designing the interface for controlling cameras, the use of
sliders, rotators, buttons would be effective while for the word
editors, graphical icons and use of menu and toolbars would be
useful.