21CSIS01P

Introduction to Information Systems

User Interface Design

Lecture 9

Presented by:
Dr. Yasmine Afify
yasmine.afify@bue.edu.eg 1
User Interface vs. Human Computer Interaction

• User interface design is a subset of a field of study called

Human-Computer Interaction (HCI).

• Human-computer interaction is the study, planning, and

design of how people and computers work together so
that a person’s needs are satisfied in the most effective
way.

2
UI Hall of Shame

3
 A Brief History of Screen Design

Many Fields

Vague captions

Visually cluttered

Monochromatic
Ambiguous Green text on black
messages Background

A 1970s Screen 4
A Brief History of Screen Design (Cont.)

Borders to visually enhance

groupings

List boxes and Drop-

down boxes

Buttons and menus for

implementing commands
replaced function keys
A 1990’s and beyond Screen 5
UI Hall of Shame

6
Redesigned

7
UI Hall of Shame

8
Importance of User Interface
• Usability strongly affects how software is perceived, because the user
interface is the means by which the software presents itself to the
world.
• A Harris poll (reported in the Wall Street Journal 11/8/05) found that
ease of use (61%), customer service (58%), and nohassle installation
(57%) are the most important factors US adults consider when
purchasing a new technology product.
• Usable software sells. Conversely, unusable software doesn’t sell.
• Bad user interface design can also cost lives.
• The usability problems may go unreported.

9
Our Objective
• Understand the many considerations that must be applied to the
interface and screen design process.
• Understand the rationale and rules for an effective interface design
methodology.
• Design and organize graphical screens and Web pages to encourage
the fastest and most accurate comprehension and execution of screen
features.
• Choose screen colors and design screen icons.
• Perform the User Interface design process, including interface
development and testing.

10
Importance of User Interface (Cont.)
• In fact, user time is getting more expensive every year.

• Interfaces that waste user time repeatedly over a lifetime

of use impose a hidden cost that companies are less and
less inclined to pay.

• For some applications, like customer call centers, saving a

few seconds per call may translate into millions of dollars
saved per year.
11
User Interfaces are hard to design
• You (the developer) are not a typical user. You know far more
about your application than any user will.

• Usability is about communicating with other users, who are

probably not like us (software engineers).

• The User is always right.

Don’t blame the user for what goes wrong. If users consistently make mistakes
with some part of your interface, take it as a sign that your interface is wrong,
not that the users are dumb.

12
14
15
Usability
• Usability measures how well users can use the system’s functionality.

• Usability has several dimensions:

Learnability: Is it easy to learn?
Efficiency: Once learned, is it easy to use?
Safety: Are errors few and recoverable?

• We can quantify all these measures of usability. We can say that

interface X is more learnable, or more efficient than interface Y for
some set of tasks and some class of users, by designing an
experiment that measures the two interfaces. 16
Usability is only one attribute of a system

• Software designers have a lot to worry bout:

- Functionality - Usability
- Performance - Size
- Cost - Reliability
- Security - Standards

• Many design decisions involve tradeoffs among different

attributes.

17
Usability
• Usability measures how well users can use the system’s
functionality.

Usability

Learnability Efficiency Safety

Is it easy to Once learned, is Are errors few and
learn? it easy to use? recoverable?

18
Learnability

Learnability
Is it easy to
learn?

Information
Consistency Affordance Feedback
Scent

19
Consistency

• The Principle of “Least Surprise”, which basically means that

you shouldn’t surprise the user with the way a command or
interface object works.

• Similar things should look, and act, in similar ways.

• Conversely, different things should be visibly different.

20
Types of Consistency

21
Metaphor

Metaphor: an analogue in the real world.

Metaphors are one way to make an interface more

learnable.

Users can make guesses about how it will work based on

what they already know about the interface’s metaphor.

22
Affordances
How an interface communicates nonverbally, telling you how to operate it.
Perceived and actual properties of a thing that determine how the thing could be
used.

23
Feedback
• How the system changes visibly when you perform an action.
• When the user successfully makes a part work, it should appear to
respond.
Push buttons depress and release.
Scrollbar thumbs move.
Dragged objects follow the cursor.

Feedback doesn’t always have to be visual. Audio feedback – like the

clicks that a keyboard makes – is another form.
24
Visible Navigation State

25
Visible View State

26
Information Scent
• Information scent
Cues on a link that indicate how profitable it will be to follow the link to its
destination
• A Link should smell like the content it leads to.

• Ex: Date, Time, Language and regional options.

Printers and Other Hardware in control panel.

• Quality of information scent depends on the user’s particular goal.

Ex: Shopping site for Music and Movies. (Movie sound track?)
Solution: put it in both categories or provide “see also”

27
Usability
• Usability measures how well users can use the system’s
functionality.

Usability

Learnability Efficiency Safety

Is it easy to Once learned, is Are errors few and
learn? it easy to use? recoverable?

28
Efficiency
• Once Learned, Is it fast to use?

• We’re concerned with the channel between the user and the system; how
quickly can we get instructions and information across that interface?

• In other words, assuming that the user interface is the performance

bottleneck, how fast can the whole system go?

• Experts need efficiency

29
Efficiency

Efficiency
Once learned, is
it easy to use

Pointing Shortcuts
Efficiency Defaults
History
Autocomplete
Aggregation
Anticipation

30
 Fitt’s Law

• Specifies how fast you can move your hand to a target of a certain size
at a certain distance away within arm’s length.
• Time T to move your hand to a target:
T = RT + MT
RT is reaction time: the time to get your hand moving
MT is movement time: the time spent moving your hand.

31
Definition of Fitt’s Law

T = a + b log2 ( + 1 )

Time to complete pointing task = f (distance to target, size of target, pointing device)
• Depends only on index of difficulty log2(D/S + 1)
• As the target size (S) goes up, time (T) goes down (S↑T↓).
• As the target distance (D) goes up, time (T) goes up (D↑T ↑).
• a, b pointing devices properties (lower is better)

By transforming the law into designer’s language, it says:

• You should design your user interface element to be large and close to where
the user starts the interaction.
32
Pointing Efficiency
• Implications of Fitt’s Law

33
Improve Mouse Efficiency
• Make frequently-used targets big
The Bigger the target, the easier the pointing task is.
• Put targets used together near each other
• Use screen corners and screen edges
• Avoid steering tasks
• Example: Cascading submenus
• Steering tasks are so much slower than pointing tasks.
• When you can’t avoid it, minimize the steering distance

34
Efficiency

Efficiency
Once learned, is
it easy to use

Pointing Shortcuts
Efficiency Defaults
History
Autocomplete
Aggregation
Anticipation

35
Keyboard Shortcuts
• Keyboard Commands
• Menu accelerators

36
Defaults and Pending Deletes
• Defaults are common answers already filled into a form.
- They provide shortcuts to both beginners and frequent users
- They help the user learn the interface by showing examples of legal entries.

• This technique, where typing replaces the selection, is called pending

delete.

37
History
• Offer recently-used or frequently-used choices

38
AutoComplete
• Minimize typing by autocomplete.

39
Aggregation
• Think about ways that a user can collect a number of items – data
objects, decisions, graphical objects, whatever – and handle them all
at once, as a group

40
Anticipation
• Anticipation means that a good design should put all needed
information and tools within the user’s easy reach.

41
Usability
• Usability measures how well users can use the system’s
functionality.

Usability

Learnability Efficiency Safety

Is it easy to Once learned, is Are errors few and
learn? it easy to use? recoverable?

42
Safety

Safety
Are errors few &
recoverable?

Error Prevention Error Messages Undo

43
Error Prevention
• Avoid actions with very similar descriptions (different things should
look and act different)
• Keep dangerous commands away from common ones

44
Error Messages

• Be precise
• “File missing or wrong format”
• “File can’t be parsed”
• “Line too long”
• “Name contains bad characters”
• Restate user’s input
• Not “Cannot open file”, but “Cannot open file named paper.doc”
• Speak the user’s language
• Not “FileNotFoundException”
• Hide technical details (like a stack trace) until requested
45
Error Messages
• Give constructive help
• Suggest Reasons and Solutions (Why error occurred and how to fix it)

46
Error Messages
• Be polite and non-blaming. Save the user’s face; don’t worry about
the computer’s.

• Avoid loaded (emotionally-charged) words

• Fatal, illegal, aborted, terminated

47
UI Software Architecture

48
 Model-View-Controller (MVC)
View handles output & low-level input (device events)
• sends high-level events (selection-changed, button-activated,
or textbox-changed) to the controller

Controller mediates between model & view

• listens for input events on the view and change events on the
View input
model
• passing changes back and forth
events

get() & set()

get() & set() Controller methods
methods

change
events
Model
Model maintains application state
• implements state-changing behavior
• sends change events to controller
MVC
• Model
The Model component corresponds to all the data-related logic that the
user works with. This can represent either the data that is being transferred
between the View and Controller components or any other business logic-
related data. For example, a Customer object will retrieve the customer
information from the database, manipulate it and update it data back to the
database or use it to render data.

• View
The View component is used for all the UI logic of the application. For
example, the Customer view will include all the UI components such as text
boxes, dropdowns, etc. that the final user interacts with.
50
MVC

• Controller
Controllers act as an interface between Model and View components to
process all the business logic and incoming requests, manipulate data
using the Model component and interact with the Views to render the
final output. For example, the Customer controller will handle all the
interactions and inputs from the Customer View and update the
database using the Customer Model. The same controller will be used
to view the Customer data.

51
MVC Interactions
• All actions begin in the view through events generated by the user. The controller
provides listeners for the events. The controller also has the ability to manipulate
the state of the view objects in a way which offers a response to the events
generated by the user.
• The controller interacts with the model by either requesting information from
the data source based on user-generated events, or by modifying the data based
on these events.
• The model provides the programming interface which the controller must use to
access the database, i.e., the controller does not interact directly with the
database.
• The view interacts with the model only to know about type information and
other data abstractions held in the model. The View/Model interaction should be
"minimal" because the manipulation of data is to be done through the controller.
52
Advantages of Model-View-Controller
• Separation of responsibilities
• Each module is responsible for just one feature

• Decoupling
• View and model are decoupled from each other, so they can be
changed independently
• Model can be reused with other views
• Multiple views can simultaneously share the same model

• The MVC pattern enables the creation of user interface

toolkits, which are libraries of reusable interface objects.
53
Question Types

• Criticize an application user interface (Mention what should

be modified/enhanced according to the usability factors).
• List elements of usability.
• Replace with key term.

54
Reference

• “User Interface Design and Implementation”

MIT Open Course Ware
ocw.mit.edu

55
Thank You