UID Kamaus Notes Up to Lecture Three

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


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%


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:


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.


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


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


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/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


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


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.


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


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)


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


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.


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


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.


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


18/25

Age

Hearing vision

Cognitive processing

Gender

Handedness

Reading

Listening

Speaking

Keying


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.


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


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


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.


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


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.


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.

Documents

UID Kamaus Notes Up to Lecture Three