Outline
• An Introduction to Human-Computer
Interaction (HCI)
• Interacting with computers
• User Interface (UI) essentials
• Visual representation of data
• Designing for the web
Arab Open University - Riyadh
1
An introduction to HCI
• A good User Interface (UI) design enables the users to
effectively interact with the system and perform their tasks.
• If the data is not presented on the user interface in a way
that the users can interpret it in order to be informed about
the data, then it can sometimes have serious
consequences.
Examples :
1 - Three Mile Island nuclear power plant: water pumps failed  the
poorly-designed UI prevented the operators from identifying and
rectifying the problem quickly  nuclear reactor nearly melted down
2 - Boo.com website (sportswear retailer): poorly-designed Web interface
 loosing customers  Boo.com collapsed after 6 months.
2
Outline
• An Introduction to Human-Computer
Interaction (HCI)
• Interacting with computers
• User Interface (UI) essentials
• Visual representation of data
• Designing for the web
3
Interacting with computers
• HCI, as a discipline, is the study of how humans
interact with computers and their applications.
It tells us how to build user interfaces that are
safe, efficient, easy and enjoyable to use (as well
as functional!).
• HCI is a broad subject covering all aspects of the
way in which people interact with computers
(computer science, psychology, engineering,
artificial intelligence, philosophy, sociology,
anthropology and graphic design... )
4
The user interface
• A user interacts with a computer system via the user
interface (UI).
• The UI can be thought of as that part of a computer system
that helps us to accomplish tasks; it takes our commands
and communicates information back to us.
• The two-way communication that is interaction through the
UI is all you will see of any computer system (you don’t
need to know what is happening, or how it happens,
beneath the UI).
• Because of this, certain authors have concluded that, to
users, the user interface is the system.
5
The importance of good user interface
design
• A good UI is one that:
• Is easy to use;
• Is easy to understand;
• meets the needs of the intended users;
• supports users in the tasks they wish to undertake.
• A good UI designer thinks about the users of the
UI and pays great attention to the usability of
the UI for users (always to be aware of users’
needs)
6
What is usability?
• Usability is the extent to which a [system] can be used by
specified users to achieve specified goals [or tasks] with
effectiveness, efficiency, and satisfaction in a specified
context of use.
• Effectiveness refers to the goals or tasks being achieved
accurately and completely.
• Efficiency refers to the resources expended – not too
many – to achieve the goal or task.
• Satisfaction refers to the comfort and acceptability of the
computer system to its users.
• We might distinguish a system with good usability from
one with poor usability (the usability of a system refers to
the usability of its UI)
7
The problems of poor user interface design
• For organizations that depend on computer systems, poor
usability can lead to decrease in staff productivity, high
staff turnover, low morale and poor job satisfaction.
• The usability of computer systems impacts the
effectiveness and efficiency of an organization.
• Usability of a system is not determined by a fancy frontend or UI design with colors, animations, or graphics.
• To design a good UI it is important to know who the users
will be, their goals, their tasks, and their specific context of
use. In HCI, this is called user-centered design.
8
User-centered design
A good UI designer, before designing a system, will
try to answer the following:
- Who are the users?
- What are the users’ experiences?
- What skills do they have?
- What tasks will they be using the system for?
If the system is a replacement for an existing one:
- What are the users’ expectations?
- How do they currently perform their tasks?
- How will the new system support and/or change
their goal and tasks, and environments?
9
Outline
An Introduction to Human-Computer
Interaction (HCI)
Interacting with computers
• User Interface (UI) essentials
• Visual representation of data
• Designing for the web
10
User interface design principles
• There are several UI design principles in the HCI literature:
1.
2.
3.
4.
5.
6.
7.
Visibility
Feedback
Affordance
Simplicity
Structure
Consistency
Tolerance.
• Standard terminology in UI design:
command button; dialogue box; icon; label; menu bar;
menu; primary window; text box; toolbar
• Terminology associated with elements of web pages:
link; menu; title bar; navigation bar; home page; interior page
• The above UI elements are called collectively UI widgets.
11
User interface design principles: Visibility
Visibility in the context of UI design means making it clear
what a UI element is used for.
Design principle: All UI elements should have good
visibility.
Guidelines: To achieve visibility, think about the goal that will
be achieved by using that element. Are there any icons that
could be used to draw the user’s attention? Is there a
‘standard’ symbol for the goal?
Examples: In a UI for a software DVD player, there is a
‘standard’ recognizable symbol for a play button (►).
In the UI for a mobile phone, an envelope icon shows that a
message has been received.
12
User interface design principles: Feedback
Feedback is related to the concept of visibility. In the context
of UI design it means making it clear what action has been
achieved through the use of the UI element.
Design principle: All UI elements should provide adequate
feedback in response to the user’s actions.
Guidelines: Think about what information should be sent
back to the user about their interactions with the UI element.
Can you give visual feedback (message or an icon)? Is there
a ‘standard’ symbol to give the feedback? Can a simple
sound be used to say that something has happened? Or
tactile feedback?
Example: When I press any key on the keypad of my mobile
phone, a beep is heard and I can also feel the key being
13
pressed (tactile feedback).
User interface design principles: Affordance
Affordance in the context of UI design means making it
clear how a UI element should be used (e.g. door: pulled?
Pushed?...).
To afford means ‘to give a clue’. The clue is of how to
interact.
Design principle: All UI elements should have good affordance.
Guidelines: The element’s appearance should make it obvious
how a user should interact with it. Buttons, links, icons, and scroll
bars should be designed so that it is obvious how they should be
used.
Examples: In the Mac OS, buttons are given a shadow,
suggesting something that stands proud of the screen. In this way
pushing the button is the suggested interaction.
Another example is the underlining of links that affords clicking.
14
User interface design principles: Simplicity
Simplicity in the context of UI design means keeping things as
simple as possible.
Design principle: Make simple, common tasks simple to do.
Guidelines: To achieve simplicity, employ actions, icons, words
and user interface controls that are natural for the user. Use the
user’s own language. Break complex tasks into simpler subtasks.
Example: Since opening or saving a file in a word-processor
application are some of the most common tasks that a user
performs, menu items (with associated buttons or keystrokes) for
‘Open file’ and ‘Save file’ are provided in many word-processor
applications.
(keep things simple means spending time getting to know the users and
what they find natural)
15
User interface design principles: Structure
Structure: A UI will be more usable if it is structured in way
that is meaningful and useful to user.
Design principle: Structure the UI in a meaningful way for
the user.
Guidelines: Things that the user will think of as related
should be clearly and closely related and appear together in
the UI, or at least they should be clearly and closely
associated. Features that are unrelated, either in terms of a
user’s activities or in their mind, should be separated or
distinguished in the UI.
Example: The “Print” dialog box groups together related
information (e.g. Printer, Page range and Copies…)
16
User interface design principles: Consistency
Consistency in appearance, positioning and behavior within
the UI makes a system easy to learn and remember.
Design principle: The presentation of the UI should be
consistent.
Guidelines: If two UI elements are to serve the same or
similar purpose they should be made as consistent as
possible.
Examples: Buttons that say ‘OK’ and ‘Cancel’ on most
interfaces have the same appearance, perhaps even the
same size. They serve similar purposes in ending a user
interaction.
Three different MS Office applications: Word, Excel and
PowerPoint have similar “look and feel”
17
User interface design principles: Tolerance
Tolerance refers to the ability of a UI to prevent errors if
possible, or to make them easy to recover from, if not.
Design principle: The UI should be designed to reduce the
number of user errors and facilitate recovery from them.
Guidelines: For an interface to be tolerant of errors, you
should think of the ways in which the user can make errors. Is
there a message that would help a user confirm a possible
wrong choice? Are there examples of good choices that you
can provide?
Examples: To prevent the wrong choice of menu item, some
items might be grayed out. You can offer an example of the
format of a date that is to be entered.
18
User interface essentials
Errors, of course, are not always due to poor UI design. They could occur
when a user is unfamiliar with an application, or does not have the right
experience or skills, even because of stress, interruptions…
Recoverability of a UI refers to how easy it is for users to recover
from their mistakes.
• In backwards error recovery the user will be allowed to ‘undo’ the
effects of the action that caused the error so it appears as if the error had
never occurred, and the user can try again to achieve their goal.
• In forwards error recovery, the system accepts the error (no undo) but
still helps the user to accomplish their goal. An example is the error
message that provides information about why the error occurred, and
what is necessary for recovery.
19
Outline
An Introduction to Human-Computer
Interaction (HCI)
Interacting with computers
User Interface (UI) essentials
• Visual representation of data
• Designing for the web
20
Visual representation of data
Finding information by interpreting data is a difficult task that
only humans can do. Presenting data so that information can
be found from it is also a difficult task.
Visual representations (graphs, diagrams, maps) display
data in a way that can be interpreted by users in order to
retrieve the information.
The use of visual representations for understanding the data
and gaining insight into it is called information visualization.
Computers add many possibilities to visualization: they can
include real-time interactivity, what-if scenarios…
21
Making sense of data
Presenting information as text:
Text is a very natural way for us to communicate. Because of
its recognized flexibility and power, it is the dominant way of
presenting information in many areas, including software and
web pages.
Guideline: make text readable and legible.
Readable text will allow the user to find the information that
they need easily on the page (when presenting text, make
sure the typeface - serif or sans serif - and size are
appropriate for the display)
Legible text will allow the user to read easily, once they have
found the information (the spacing between letters, words,
lines and paragraphs, as well as the lengths of lines and
paragraphs)
22
Making sense of data
Presenting numeric data:
There are several graph and chart types that are used to present numeric
data. The traditional graph and chart types frequently used include
the line graph, the bar chart, and the pie chart.
Guideline:
Ensure that the choice of graph or chart type is appropriate for the
representation (making a good choice depends on thinking about the
viewer’s task).
Using the guidelines:
Ask yourself the following questions:
– Is there a comparison to be made between different parts of the data?
– Does the labeling on the graph or chart help the viewer make sense of
the data?
– Is the data presented at the right level of detail to allow the user to draw
conclusions?
– Does the chart or graph distort in any way what the data has to say?
Check that the data ranges on the two axes of a graph are appropriate.
Check that any comparison you make is fair.
23
Making sense of data
A change in the scale of the axes within a graph can make it
appear that a small variation is actually a major change (and
vice versa).
24
Avoiding graphic overkill: the dos and don’ts of data-ink
Data-ink is the part of the graphic that presents the data that
contributes to the information it is meant to convey.
Non-data-ink can include important information, e.g. labels or grids,
but also the fancy graphics that can distract the reader.
Redundant data-ink is ink that presents data, but doesn’t add
information.
Guideline: The largest share of the ink on a graphic should be data-ink.
It’s very difficult to find the right proportion of data-ink to non-data-ink.
Non-data ink should be erased if it gets in the way of information.
This nondata ink
should be
removed
25
Avoiding chart junk: the path to graphic nirvana
Chart junk is the enemy of simplicity in information
visualization. It distracts a reader from achieving their task
with meaningless photos and line art, administrative clutter,
fancy fonts, weird backgrounds – you get the picture.
Guideline: Avoid chart junk at all costs!
Using the guidelines:
Ask yourself the following questions:
– Are you using ‘content-free’ decoration?
– Is that background really necessary?
– Do those photographs really add information?
– Is there anything that can be removed without changing
the message?
26
Getting the message across
Two important issues associated with information visualization:
1 - Selection: From all the data available, the author had to select the
data most relevant to the task of the reader.
2 - Representation: Colors and connectivity are used to get the
message across.
The Gantt chart (1917), production control tool, is an example of a good
information visualization.
27
Outline
An Introduction to Human-Computer
Interaction (HCI)
Interacting with computers
User Interface (UI) essentials
Visual representation of data
• Designing for the web
28
Designing for the web
1. You do need high quality content: highly relevant and
interesting to your readers (user-centered design)
Ask yourself: what do my users want to achieve from visiting
my site?
– In business, the answer is simple:
A website that sells cars should include current prices,
availability, perhaps even a comparison with your
competition.
– For home use, the answer is more difficult: is my target
audience friends and family? In which case, photos and
contact, family news and views, could be sufficient.
29
Designing for the web
2. Can you have a conversation with your user?
– Updating can make your website appear alive!
– A site should indicate when it was last updated, and
latest news can be highlighted in some way. You could
include a ‘What’s New’ link …
3. Bells and whistles, or website nirvana?
A simple structure allows each element of the page to be
tied to its message and enhances the flexibility and
adaptability of your site.
A consistent layout of web pages increases ease of use,
aids user navigation and helps to establish unity across
several pages of the website.
30
Designing for the web
4. Focus the user’s attention
Place the emphasis on elements that should be the centre of your user’s
attention (a title, an icon, bright colors, or large font size…).
5. How relevant is the content for the user?
Your site must allow the users to carry out the tasks they want to perform
easily with no error.
6. Is the content unique to the online medium?
Why use a website? A website should provide added value in terms of the
convenience and speed of providing information to a large number of
users.
7. Is the page too slow to appear?
Remove unnecessarily fancy (and slow to load) graphics
Include headlines, ‘thumbnails’ of photographs (instead of large pictures)
31
Designing for the web
The most challenging page to design is the home page, because it sets
the scene for the whole website.
Your home page should tell users where they are and what your site
does. Here are some guidelines on what to include:
– Something that identifies the website as yours: small picture of
yourself, contact details (convention: use the top-left corner).
– The name of the website (convention: top of the screen).
– An important part of telling the users where they are also involves
the choice of typeface, colors and page layout.
– A brief introduction to the site telling your user what they can
expect. You might include a summary of your latest news.
32
Designing for the web
While designing interior pages , you have to think why people come
to your site. What are they looking for?
• The information should be relevant, credible, useful and up-to-date.
• To capture and maintain user interest, the content should be wellpresented and organized.
• Interior web pages contain more content and less introductory
information.
• Interior pages should have meaningful titles.
• The look and feel (colors, fonts, title bar…) should be consistent.
• There should always be a link to the home page from an interior page.
(otherwise a user might be ‘stuck’ inside your website )
• Small errors in spelling and grammatical mistakes will also reduce the
feeling of quality.
33
Designing for the web
Two other design issues of interaction with web pages:
Scrolling
The important content of a page should be visible without
scrolling. In general, it is better to ensure that all the links are
visible without scrolling (Short pages are better for home
pages and for documents intended to be read online).
Designing for accessibility
The web can provide tremendous benefits, but only if it can
be accessed! Your websites should be designed so that they
can be accessed by people whose eyesight and/or hearing is
impaired (one solution might just mean using bigger text).
34
What’s next?
• Unit 13: Sensational computing.
35