uid kamaus notes up to lecture three
TRANSCRIPT
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
1/25
TOPICS - DETAILS
This course illustrates the importance of user interface design for a computer system.
Developing an information system involves multiple stages such as user requirements and
analysis, designing the interface, developing the system, testing, and implementing the
system. This course will only focus on designing the user interface.
I . I ntroduct ion to User interface Design
I I . User inter face design Frameworks
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
2/25
Main course text
Interaction Design. Preece, Rogers, Sharp (Wiley and Sons, 2002)Refer ence Books
Designing the User Interface: Strategies for Effective Human-Computer Interaction. Shneiderman, B.,2004.
Assessment: Examination - 70%: Coursework - 30%
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
3/25
Introduct ion
Defining the User Interface
It is the parts of the computer and its software that people can touch , feel, talk to ,or
otherwise understand and direct. It is a sub field to Human-computer interaction study.
User interface design is a subset of a field of study called human computer
interaction.(HCI). HCI is the study, planning and design of how people and computers
work together. User interface has 2 components: Input, Output Input is how a person
communicates his or her needs or desires to the computer. Ex. Keybord, mouse. Output
is how the computer conveys its results of its computations and requirements to the
user. Ex. Display screen
I mport ance of good design:
The Importance of Good Design
Its very important to our users. It is the window to view the capabilities of the system.
The reasons for ineffient and confusing design is,
No care on design
Not enough time
Not knowing what really makes good design
Not possessing common sense.
A well designed interface and screen is very important to the users. it is the main
window to view the capabilities of the system. A screen design affect a person in a
variety of ways. If the design is confusing and inefficient, people will have greaterdifficulty and make more mistakes, Chase some people away from the system. It also
leads to aggravation, frustration and increased stress.
I nt roduction of the Graphical User I nt erface:
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
4/25
A graphical user interface (GUI ), often pronounced gooey, is a type of user
interface that allows users to interact with programs in more ways than typing
such as computers. Graphical user interfaces, such as Microsoft Windows and the
one used by the Apple Macintosh, feature the following basic components:
pointer :A symbol that appears on the display screen and that you move to
select objects and commands. Usually, the pointer appears as a small angled
arrow. Text -processing applications, however, use an I-beam pointer that is
shaped like a capital I .
point ing device :A device, such as a mouse or trackball, that enables you to
select objects on the display screen.
icons: Small pictures that represent commands, files, or windows. By moving
the pointer to the icon and pressing a mouse button, you can execute a
command or convert the icon into a window. You can also move the icons
around the display screen as if they were real objects on your desk.
Deskt op : The area on the display screen where icons are grouped is often
referred to as the desktop because the icons are intended to represent real
objects on a real desktop.
windows:You can divide the screen into different areas. In each window, you
can run a different program or display a different file. You can move windows
around the display screen, and change their shape and size at will.
menus : Most graphical user interfaces let you execute commands by selecting a
choice from a menu.
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
5/25
Accessibility: Systems should be designed to be usable, without modification, by asmany people as possible.
Aesthetically PleasingProvide visual appeal by:
Providing meaningful contrast between screen elements Creating groupings Aligning screen elements and groups Providing three-dimensional representation Using color and graphics effectively and simply
Clarity
The interface should be visually, conceptually, and linguistically clear, including:
Visual elements Functions Metaphors Words and text
Compatibil i tyProvide compatibility with the following:
The user
The task and job The product Adopt the users perspective.
ConfigurabilityPermit easy personalization, configuration, and reconfiguration of settings.
Enhances a sense of control Encourages an active role in understanding
ConsistencyA system should look, act, and operate the same throughout. Similar componentsshould:
Have a similar look
Have similar uses Operate similarly
The same action should always yield the same result. The function of elements should not change. The position of standard elements should not change.Inconsistency causes:
More specialization by system users Greater demand for higher skills
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
6/25
More preparation time and less production time More frequent changes in procedures More error-tolerant systems (because errors are more likely)
More kinds of documentation More time to find information in documents
More unlearning and learning when systems are changed More demands on supervisors and managers More things to do wrong
Control
The user must control the interaction. The context maintained must be from the perspective of the user. The means to achieve goals should be flexible and compatible with the user's
skills, experiences, habits and preferences. Avoid modes because they constrain the actions available. Permit the user to customize the interface but provide defaults.
Directness
Provide direct ways to accomplish tasks. Available alternatives should be visible. The effect of actions on objects should be visible.
Efficiency Minimize eye and hand movements, and other control actions. Transitions between various system controls should flow easily and freely. Navigation paths should be as short as possible.
Eye movement through a screen should be obvious and sequential. Anticipate the users wants and needs whenever possible.
Familiarity Employ familiar concepts and use a language that is familiar to the user Keep the interface natural, mimicking the users behavior patterns Use real-world metaphors
FlexibilityA system must be sensitive to the differing needs of its users, enabling a level and typeof performance based upon:
Each users knowledge and skills Each users experience Each users personal preference Each users habits The conditions at that moment
Forgiveness
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
7/25
Tolerate and forgive common and unavoidable human errors Prevent errors from occurring whenever possible Protect against possible catastrophic errors
When an error does occur, provide constructive messagesObviousness
A system should be easily learned and understood: What to look at What it is
What to do When to do it Where to do it Why to do it How to do itFlow of actions, response, visual present ations, and infor mat ion shouldbe:
In a sensible order Easy to recollect Easy to place in context Ensure that a system's design can be used by everyone, regardless of a person's
physical capabilities.
PerceptibilityEnsure that a system's design can be perceived, regardless of a person's sensorycapabilities.
Predictability
The user should be able to anticipate the natural progression of each task. Provide distinct and recognizable screen elements
Provide cues to the result of an action to be performed All expectations should be fulfilled uniformly and completely.
RecoveryA system should permit:
Commands or actions to be abolished or reversed Immediate return to a certain point if difficulties arise
Ensure that users never lose their work as a result of: An error on their part Hardware, software, or communication problems
Responsiveness
The system must rapidly respond to the users requests. Provide immediate acknowledgment for all actions:
o Visualo Textual
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
8/25
o AuditorySafety
Protect the user from making mistakes.
Provide visual cues Reminders
Lists of choices Other aids as necessary
SimplicityProvide as simple an interface as possible.Five ways to provide simplicity:
Use progressive disclosure, hiding things until they are neededo Present common and necessary functions firsto Prominently feature important functionso Hide more sophisticated and less frequently used functions
Provide defaults Minimize screen alignment points Make common actions simple at the expense of uncommon actions being made
harder
Provide uniformity and consistency
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
9/25
I nt eraction St yles
The concept of Interaction Styles 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 a 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
(defined below) in mobile phones.
the common types of interaction styles mentioned are usually command language,
form fillin, menu selection, and direct manipulation.
Command language (or comm and entry)
Command language is the earliest form of interaction style and is still being used,
though mainly on Linux/Unix operating systems. These "Command prompts" are used
by (usually) expert users who type in commands and possibly some parameters that
will affect the way the command is executed. The following screen dump shows a
command prompt - in this case, the user has logged on to a (mail) server and can use
the server's functions by typing in commands.
Click to enlarge.
Figure 1: Command prompt. The command "ls- al" has just been executed
('ls' stands for 'list' and the parameters '-al' specify that the list command should display
a detailed list of files).
Command language places a considerable cognitive burden on the user in that the
interaction style relies on recall as opposed to recognition memory. Commands as well
as their many parameterised options have to be learned by heart and the user is given
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
10/25
no help in this task of retrieving command names from memory. This task is not made
easier by the fact that many commands (like the 'ls' command in the above example)
are abbreviated in order to minimize the number of necessary keystrokes when typing
commands. The learnability of command languages is generally very poor.
Advantages and disadvantages of Comm and Language
Advantages
Flexible.
Appeals to expert users.
Supports creation of user-defined "scripts" or macros.
Is suitable for interacting with networked computers even with low bandwidth.
Disadvantages
Retention of commands is generally very poor.
Learnability of commands is very poor.
Error rates are high.
Error messages and assistance are hard to provide because of the diversity of
possibilities plus the complexity of mapping from tasks to interface concepts and
syntax.
Not suitable for non-expert users.
Form fi l l- in
The form fillin interaction style (also called "fill in the blanks") was aimed at a different
set of users than command language, namely non-experts users. When form fillin
interfaces first appeared, the whole interface was form-based, unlike much of today's
software that mix forms with other interaction styles. Back then, the screen was
designed as a form in which data could be entered in the pre-defined form fields. The
TAB-key was (and still is) used to switch between the fields and ENTER to submit the
form. Thus, there was originally no need for a pointing device such as a mouse and the
separation of data in fields allowed for validation of the input. Form fillin interfaces were
(and still is) especially useful for routine, clerical work or for tasks that require a great
deal of data entry. Some examples of form fillin are shown below.
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
11/25
Figure 2.A: Classic Form fillin via a terminal
Figure 2.B: More modern-day form fillin,
could be from a web page.
Even today, a lot of computer programs like video rental software, financial systems,
pay roll systems etc. are still purely forms-based.
Advant ages and disadvant ages of Form Filli n
Advantages
Simplifies data entry.
Shortens learning in that the fields are predefined and need only be 'recognised'.
Guides the user via the predefined rules.
Disadvantages
Consumes screen space.
Usually sets the scene for rigid formalisation of the business processes.
Please note that "form fillin" is not an abbreviation of "form filling". Instead, it should be
read "form fill-in".
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
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
12/25
commands arranged in menus and observes the effect. If the labels on the
menus/commands are understandable (and grouped well) users can accomplish their
tasks with negligible learning or memorisation as finding a command/menu item is a
recognition as opposed to recall memory task (see recall versus recognition). To save
screen space menu items are often clustered in pull-down or pop-up menus. Some
examples of menu selection is shown below.
Figure 3.A: Contemporary menu selection
(Notepad by Microsoft Cooperation)
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
13/25
Figure 3.B: Menu selection in the form of a webpage (microsoft.com).
Webpage in general can be said to be based on menu selection.
Advantages and disadvant ages of Menu Select ion
Advantages Ideal for novice or intermittent users.
Can appeal to expert users if display and selection mechanisms are rapid and if
appropriate "shortcuts" are implemented.
Affords exploration (users can "look around" in the menus for the appropriate
command, unlike having to remember the name of a command and its spelling
when using command language.)
Structures decision making. Allows easy support of error handling as the user's input does not have to be
parsed (as with command language).
Disadvantages
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
14/25
Too many menus may lead to information overload or complexity of discouraging
proportions.
May be slow for frequent users.
May not be suited for small graphic displays.
Direct manipulation
Direct manipulation system is one which the user is able to select an object and then
specify which actions are to be taken. 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 systems have the following characteristics:
Visibility of the object of interest.
Rapid, reversible, incremental actions.
Replacement of complex command language syntax by direct manipulation of
the object of interest.
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
15/25
Figure 4.A: The text-book example of Direct Manipulation, the Windows File Explorer,
where files are dragged and dropped.
Click to enlarge.
Figure 4.B: One of the earliest commercially available
direct manipulation interfaces was MacPaint.
Advantages and disadvantages of Direct Manipulat ion
Advantages
Visually presents task concepts.
Easy to learn.
Errors can be avoided more easily.
Encourages exploration.
High subjective satisfaction.
Recognition memory (as opposed to cued or free recall memory)
Disadvantages
May be more difficult to programme.
Not suitable for small graphic displays.
Spatial and visual representation is not always preferable.
Metaphors can be misleading since the the essence of metaphor is
understanding and experiencing one kind of thing in terms of another (Lakoff
and Johnson 1983: p. 5), which, by definition, makes a metaphor different from
what it represents or points to.
Compact notations may better suit expert users.
Source
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
16/25
Human characteristics in Design:
Perception: is our awareness and understanding of the elements and objects of our
environment through the physical sensation of our various senses including sight sound,
sound, smell and so forth.
Memory: There two components: Long term memory contains the knowledge we
posses. Short term receives information from either the senses or the long term
memory.
Sensory storage: is the buffer where the automatic processing of information collected
from our senses takes place.
Visual acuity : The capacity of the eye to resolve the details
Foveal and periph eral vision: Foveal vision is used to focus directly on something
Peripheral vision senses anything in the area surrounding the location .It can not be
clearly resolved. I nfor mat ion Processing: The information that our senses collect
that is deemed important enough to do something about then has to be processed in
some meaningful way.
Mental Models: is simply an internal representation of a persons current
understanding of something.
Movement Cont rol: The response from the computer is a movement. Movements
include such activities as pressing keyboard keys, moving the screen pointer. Learning:
is the process of encoding in long-term meomory information that is contained in short-
term memory. Skill: The goals of human performance is to perform skillfully.The
essence of skill is performance of actions or movements in the correct time sequence
with adequate precision.
I ndividual differences: in looks, feelings, motor abilities, intellectual abilities, learning
abilities and speed.
Human considerations in design:
The users know ledge and experi ence:
Computer literacy.
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
17/25
System Experience
Application experience
Task experience
Other system use
Education
Reading level
Typing skill
Native language and culture
The users tasks and needs:
Mandatory or discretionary use
Frequency of use
Task or need importance
Task structure
Social interactions
Primary training
Turnover rate
Job category
Lifestyle
The users psycholog ical charact erist ics
Attitude and Motivation
Patience
Stress level
Expectations
Cognitive style
The users physical charact erist ics
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
18/25
Age
Hearing vision
Cognitive processing
Gender
Handedness
Reading
Listening
Speaking
Keying
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
19/25
User design fram ew orks
The design frameworks provide a basic structure and methods used while developing a
user interface design.Virtually all modern computer-based systems (and many legacy
systems that are reengineered) have some type of interactive user interface, and most
require reasonably sophisticated interface designs. It is easy for programmers to focus
on splashy new technologies and ignore the fact that functionality and usability (not
innovation) is what users are most concerned about.
Typical Design Errors
Lack of consistency
Too much memorization
No guidance / help
No context sensitivity
Poor response
Arcane /unfriendly
Software development
Tradit ional SDLC
The w aterfall model was one of the earliest carefully-articulated design processes for
software development. It models the design process as a sequence of stages. Each
stage results in a concrete product a requirements document, a design, a set of
coded modules that feeds into the next stage. Each stage also includes its own
validation: the design is validated against the requirements, the code is validated
(unit-tested) against the design, etc.
The biggest improvement of the waterfall model over previous (chaotic) approaches to
software development is the discipline it puts on developers to think f irst, and code
second. Requirements and designs generally precede the first line of code.
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
20/25
Validation is not always sufficient; sometimes problems are missed until the next stage.
Trying to code the design may reveal flaws in the design e.g., that it cant be
implemented in a way that meets the performance requirements. Trying to integrate
may reveal bugs in the code that werent exposed by unit tests. So the waterfall model
implicitly needs feedback betw een stages.
The danger arises when a mistake in an early stage such as a missing requirement
isnt discovered until a very late stage like acceptance testing. Mistakes like this can
force costly rework of the intervening stages.
Although the waterfall model is useful for some kinds of software development, its very
poorly suited to user interface development.
First, UI development is inherently risky .
Second, in the usual way that the waterfall model is applied, users appear in t he
process in only t w o places: requirements analysis and acceptance testing. Hopefully
we asked the users what they needed at the beginning (requirements analysis), but
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
21/25
then we code happily away and dont check back with the users until were ready to
present them with a finished system.
Third, when UI problems arise, they often require dramatic f ixes: new requirements
or new design these solutions are not suitable for usability problems.
I terative design
Iterative design offers a way to manage the inherent risk in user interface design. In
iterative design, the software is refined by repeated trips around a design cycle: first
imagining it (design), then realizing it physically (implementation), then testing it
(evaluation).
Unfortunately, many commercial UI projects have followed this model. They do a
standard waterfall design, produce a bad UI, and release it. Evaluation then takes place
in the marketplace, as hapless customers buy their product and complain about it.
(Although users only tend to complain about egregious usability flaws) Then they
iterate the design process on version 2.
The spiral model
The spiral model offers a way out of the dilemma. We build room for several
iterations into our design process, and we do it by making the early iterations as cheap
as possible.
The radial dimension of the spiral model corresponds to the cost of the iteration step
or, equivalently, its f idelity or accuracy. For example, an early implementation might
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
22/25
be a paper sketch or mockup. Its low-fidelity, only a pale shadow of what it would look
and behave like as interactive software. But its incredibly cheap to make, and we can
evaluate it by showing it to users and asking them questions about it.
Why is the spiral model a good idea? Risk is greatest in the early iterations, when we
know the least. So we put our least commitment into the early implementations. Early
prototypes are made to be thrown away. If we find ourselves with several design
alternatives, we can build multiple prototypes (parallel design) and evaluate them,
without much expense.
After we have evaluated and redesigned several times, we have (hopefully) learned
enough to avoid making a major UI design error. Then we actually implement the UI
which is to say, we build a prototype that we intend to keep. Then we evaluate it again,
and refine it further.
The more iterations we can make, the more refinements in the design are possible.
Were hill-climbing here, not exploring the design space randomly. We keep the parts of
the design that work, and redesign the parts that dont. So we should get a better
design if we can do more iterations.
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
23/25
The design process
User I nt erface Analysis and Design
The overall process for analyzing and designing a UI begins with the creation of models
of system.
User I nt erface Design Models
Four different models come into play when a user interface is to be analyzed and
designed. Prototyping
1. User model: a profile of all end users of the system
Users can be categorized as:
Novices: No syntactic and little semantic knowledge of the system.
Knowledgeable, intermittent users: reasonable knowledge of the system.
Knowledgeable, f requent users: good syntactic and semantic knowledge of
the system.
2. Design model: a design realization of the user model that incorporates data,
architectural, interface, and procedural representations of the software.
3. Mental model (system perception): the users mental image of what the interface is.
The users mental model shapes how the user perceives the interface and whether
the UI meets the users needs.
4. Implementation model: the interface look and feel of the interface coupled with all
supporting information (documentation) that describes interface syntax and
semantics.
The Process
The analysis and design process for UIs is iterative and can be represented using a
spiral model.
The user interface analysis and design process encompasses four distinct framework
activities:
1. User, task and environment analysis and modeling.
2. Interface design
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
24/25
3. Interface construction (implementation)
4. Interface validation
The figure implies that each of these tasks will occur more than once, with each pass
around the spiral representing additional elaboration of requirements and the resultant
design. The construction involves prototyping which is the only practical way to
validate what has been designed.
The analysis of the user environment focuses on the physical work environment.
Among the questions to be asked:
Where will the interface be located physically?
Will the user be sitting, standing, or performing other tasks unrelated to the
interface?
Does the interface hardware accommodate space, light, or noise constraints?
Are there special human factors considerations driven by environment factors?
The information gathered as part of the analysis activity is used to create an analysis
model for the interface. Using this model as a basis, the design activity commences.
-
8/2/2019 UID Kamaus Notes Up to Lecture Three
25/25
The construction activity normally begins with the creation of a prototype that enables
usage scenarios to be evaluated.
I nt erface Analysis
A key principle of all software engineering process models is this: you better understand
the problem before you attempt to design a solution. Interface design analysis means
understanding:
(1) The people (end-users) who will interact with the system through the interface;
(2) The tasks that end-users must perform to do their work,
(3) The content that is presented as part of the interface,
(4) The environment in which these tasks will be conducted .
User Analysis
The only way that a designer can get the mental image and the design model to
converge is to work to understand the users themselves as well as how these people
will use the system. This can be accomplished by:
User Interviews: The software team meets with the end-users to better understand
their needs, motivations, work culture, and a myriad of other issues.
Sales Input: Sales people meet with customers and users to help developers categorize
users and better understand their requirements.
Marketing Input: Market analysis can be invaluable in the definition of market segments
while providing an understanding of how each segment might use the software in
different ways.
Support Input: Support staff talks with users on a daily basis, making them the most
likely source of information on what works and what doesnt, and what they like and
what they dont.