02 InteractiveDesign

User interface design
Interactive design
Th.S Cao Thái Phương Thanh

[email protected]
Last content
1. Course information
2. Objectives
3. Syllabus
4. Teaching & learning issues
5. Contact
SGU - Khoa CNTT - Thiết kế giao diện 2

Content
1. Introduction to Design
2. Human – Computer interaction
3. Interactive design
4. Donald A. Norman’s design priciples
5. Class project [4] with Flex tutorial

Introduction
 Design (verb): to originate & develop a plan for a

product, structure, system or component with
intention.
 Design (noun): a final solution or a result of

implementing the plan refering to the intended
product.

Introduction
 Design involves finding solutions that fit the user,

task, and context of use:
 A discipline that explores the dialogue between
products, people, and contexts.
 A process that defines a solution to help people achieve

their goals.
 A artifact produced as the result of solution definition.

Human – Computer Interaction (HCI)
 Human: a person who uses softwares and Internet services
on computers.
 Input: ?
 Output: ?
 Memory: ?
 Processor: ?
 Computer: an electronic device which receives, stores,

processes data and provides results for users.
 Input: ?
 Output: ?
 Memory: ?
 Processor: ?

 Human-computer interaction - HCI
 HCI study:
 How human uses softwares & computing devices
 How usable these systems are  usability engineering
 How to make these systems usable, effective, efficient

and satisfied.

“Human-computer interaction is a discipline concerned

with the design, evaluation and implementation of
interactive computing systems for human use, and
with the study of major phenomena surrounding
them.” - ACM SIGCHI

HCI an example

HCI an example

Interaction design
 People are trying to accomplish their tasks in life.
(system independent)
task
person
system
 Introduce a system,
User Interface should maximize their ability

Interaction design
 Design interactive products to support people in their
everyday and working lives.
 Extend the way people work, communicate & interact.
 Designer vs Engineer
Designer defines what something ought to be, Engineer implements that

Interaction design
 This course focuses on design of user interface of software
(applications + websites)
“What is software? From a technical perspective, a piece of

software comprises forms for managing, collecting and
transmitting data. But that is not what a user thinks. From
the user's perspective software is a computer tool for
performing tasks quickly, efficiently, accurately and with a
minimum amount of cognitive demand. Aim for the second
one, there's a big difference. “
http://www.ssw.com.au/ssw/standards/Rules/RulesToBetterI
nterfaces.aspx SGU - Khoa CNTT - Thiết kế giao diện 13
Why Interaction Design?
 Market forces: user expectancy, competitive

softwares…
 Good design earns money

 Bad design results in:
 Physical and emotional injury
 Equipment damage
 Decreased productivity
 Higher error rates
 User’s anger and frustration
 Bad design loses money & even more…

Principles for Design
1. Visibility
2. Affordance
3. Constraint
4. Mapping
5. Feedback

Visibility
 The correct parts must be visible and they must

convey the correct message
 By looking at the system, users should know:

 Possible actions
 Results of their actions
 State of the system

Visibility

Visibility

Visibility

Affordance
 The affordances of an object determine, naturally, how
it can be used
 Chair affords sitting; Button affords pushing
 Scrollbar affords moving up & down; Textbox affords texting
 By looking, users should know how to use the systems
 Actual affordance vs Perceptual affordance
 Affordances rely on learned conventions.

Affordance
Pull Push
? ?

Affordance

Affordance

Constraint
 Constraints limit the possible actions of an object.
 Constraints prevent users from making errors.
 Constraints can be
 Physical
 Logical
 Cultural

Constraint

Constraint

Constraint

Mapping
 Mappings are the relationships between controls

and their effects on a system.
 Natural mappings take advantage of physical

analogies and cultural standards.

Mapping

Mapping

Mapping

Feedback
 Feedback is sending back to the user information

about what action has been done.
 Visibility of the effects of the operation tell whether

if something worked correctly.
 Feedback to ensure users know what to do next.

Feedback

Feedback

Feedback

Principles for Design
 Visibility
 Affordance
 Constraint
 Mapping
 Feedback
 The relationships of these principles
 Find examples of these principles in designs of usual things

References
 http://en.wikipedia.org/wiki/Human%E2%80%93computer_in
teraction
 http://www.demystifyingusability.com/2007/10/what-is-
design-.html
 http://www.usabilitybok.org/design/p286
 http://www.baddesigns.com/examples.html

Thực hành
 Tuần sau nộp danh sách nhóm – nhóm phải chọn đề tài bài
tập tìm hiểu & hướng dẫn sử dụng kĩ thuật/công cụ để thiết
kế / lập trình giao diện
 Hướng dẫn bài tập [4]: vd Flex tutorial

02 InteractiveDesign

Uploaded by

Copyright:

Available Formats

02 InteractiveDesign

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

02 InteractiveDesign

Uploaded by

Copyright:

Available Formats

User interface design

Th.S Cao Thái Phương Thanh

4. Teaching & learning issues

SGU - Khoa CNTT - Thiết kế giao diện 2

2. Human – Computer interaction

4. Donald A. Norman’s design priciples

5. Class project [4] with Flex tutorial

SGU - Khoa CNTT - Thiết kế giao diện 3

 Design (verb): to originate & develop a plan for a

 Design (noun): a final solution or a result of

SGU - Khoa CNTT - Thiết kế giao diện 4

 Design involves finding solutions that fit the user,

 A process that defines a solution to help people achieve

 A artifact produced as the result of solution definition.

SGU - Khoa CNTT - Thiết kế giao diện 5

 Computer: an electronic device which receives, stores,

SGU - Khoa CNTT - Thiết kế giao diện 6

 Human-computer interaction - HCI

 How usable these systems are  usability engineering

 How to make these systems usable, effective, efficient

SGU - Khoa CNTT - Thiết kế giao diện 7

“Human-computer interaction is a discipline concerned

SGU - Khoa CNTT - Thiết kế giao diện 8

SGU - Khoa CNTT - Thiết kế giao diện 9

SGU - Khoa CNTT - Thiết kế giao diện 10

SGU - Khoa CNTT - Thiết kế giao diện 11

 Extend the way people work, communicate & interact.

SGU - Khoa CNTT - Thiết kế giao diện 12

“What is software? From a technical perspective, a piece of

 Market forces: user expectancy, competitive

 Good design earns money

 Higher error rates

 User’s anger and frustration

 Bad design loses money & even more…

SGU - Khoa CNTT - Thiết kế giao diện 15

 The correct parts must be visible and they must

 By looking at the system, users should know:

 Results of their actions

 State of the system

SGU - Khoa CNTT - Thiết kế giao diện 16

SGU - Khoa CNTT - Thiết kế giao diện 17

SGU - Khoa CNTT - Thiết kế giao diện 18

SGU - Khoa CNTT - Thiết kế giao diện 19

 Scrollbar affords moving up & down; Textbox affords texting

 By looking, users should know how to use the systems

 Actual affordance vs Perceptual affordance

 Affordances rely on learned conventions.

SGU - Khoa CNTT - Thiết kế giao diện 20

SGU - Khoa CNTT - Thiết kế giao diện 21

SGU - Khoa CNTT - Thiết kế giao diện 22

SGU - Khoa CNTT - Thiết kế giao diện 23

 Constraints limit the possible actions of an object.

 Constraints prevent users from making errors.

SGU - Khoa CNTT - Thiết kế giao diện 24

SGU - Khoa CNTT - Thiết kế giao diện 25

SGU - Khoa CNTT - Thiết kế giao diện 26

SGU - Khoa CNTT - Thiết kế giao diện 27

 Mappings are the relationships between controls

 Natural mappings take advantage of physical