Creative Drive In Workshop: "Crossing Borders with Information Design
Introduction to Interaction Design
1. welcome to
USER INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
Lecturer
Itamar Medeiros (Brazil)
BA in Industrial Design;
PgDip in Information Design;
1 /38
USER INTERACTION DESIGN
Expertise
Multimedia/Web Design,
Photography, Information Design
and Human-Computer Interaction.
2. CLASSROOM RULES
itamar medeiros
INTRODUCTION TO INTERACTION DESIGN
Answer to commands promptly;
No food, no drinks, no games in class;
Always keep your mobile in silent mode;
2 /38
No electronic devices during classtime;
USER INTERACTION DESIGN
Bring only class related material to class;
Speak English only during instruction.
3. LESSON 01: INTRODUCTION TO
INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
learning outcome
Students will understand the difference
between designing objects and
designing interaction.
3 /38
USER INTERACTION DESIGN
4. LESSON 01: INTRODUCTION TO
INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
content
An overview of the course module program
and expectations.
Defining what is interaction design and
introduction to its applications. 4 /38
USER INTERACTION DESIGN
5. LESSON 01: INTRODUCTION TO
INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
materials needed for the course
A sketchbook
A pen or pencil
Glue
5 /38
Scissors
USER INTERACTION DESIGN
An Internet connection
6. VISUAL COMMUNICATION
& INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
Early in the growth of the Web, many
graphic designers with backgrounds in
print media* migrated into Web design.
Print Media: Media consisting of paper and ink, reproduced in a printing
process that is traditionally mechanical and photochemical; Written 6 /38
advertising that may be included in everything from newspapers and
USER INTERACTION DESIGN
magazines to direct mail, signs, and billboards. http://www.google.com/
search?hl=en&q=define%3Aprint+media&btnG=Google+Search
7. VISUAL COMMUNICATION
& INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
They discovered that the specifics of good
graphic design in print don't always
work so well on the Web*: designers
came to realize that creating effective
Web sites requires solutions to some 7 /38
problems very different from those
USER INTERACTION DESIGN
addressed by graphic design.
Web: Short for “World Wide Web”; A computer network consisting of a
collection of internet sites that offer text and graphics and sound and
animation resources through the hypertext transfer protocol.http://
www.google.com/search?hl=en&q=define%3Aweb&btnG=Search
8. VISUAL COMMUNICATION
& INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
Designers such keep in mind the differences
between designing an object* is different
then designing interaction*.
8 /38
USER INTERACTION DESIGN
9. ACTIVITY #1
designing objects
INTRODUCTION TO INTERACTION DESIGN
1. Consider the following problem:
If a school were to ask you to design a
student, what kind of data/information
would you need to produce that card?
9 /38
2. Make a list of the requirements for that
USER INTERACTION DESIGN
card, ranking them in order of
importance.
10. VISUAL COMMUNICATION
& INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
object | 物体
A tangible and visible entity. In visual
communication, we have as examples
posters, packages, logos, brochures, etc.
可触和可见的实物。在视觉传播中,我们可见 10/38
的例子:海报、包装、标志、小册子.
USER INTERACTION DESIGN
11. VISUAL COMMUNICATION
& INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
interaction | 互动
An experience that allows two-way
communications on a timely if not real-time
basis, as opposed to an experience in which
information flows only one way on a batch or
scheduled basis; 11/38
USER INTERACTION DESIGN
建立在如果非实时即及时为基础的一种允许双
向沟通的体验。相对而言,单向沟通体验指
在其中仅仅存在基于批量或者定时为基础的
单向信息流动。
12. INFORMATION REVOLUTION
INTRODUCTION TO INTERACTION DESIGN
One of the most important skills for almost
everyone in the next decade and beyond
will be those that allow use to create
valuable, compelling and empowering
information and experiences for others. 12/38
USER INTERACTION DESIGN
To do this, we must learn existing ways of
organizing and presenting data and
information and develop new ones.
13. INTRODUCTION TO INTERACTION DESIGN
13/38
USER INTERACTION DESIGN
Shedroff, N., 2005, “Unified Field of Theory of Design”, viewed 23 February 2006,
http://www.nathan.com/thoughts/unified/4.html
14. INFORMATION REVOLUTION
creating experiences
INTRODUCTION TO INTERACTION DESIGN
Traditional visual communication has been
primarily associated with producing
messages which are, in most cases not
interactive. Interactivity should not be
confused with animation in which 14/38
objects may move on a screen.
USER INTERACTION DESIGN
15. INFORMATION REVOLUTION
creating experiences
INTRODUCTION TO INTERACTION DESIGN
15/38
USER INTERACTION DESIGN
Shedroff, N., 2005, “Unified Field of Theory of Design”, viewed 23 February 2006,
http://www.nathan.com/thoughts/unified/19.html
16. INFORMATION REVOLUTION
creating experiences
INTRODUCTION TO INTERACTION DESIGN
16/38
USER INTERACTION DESIGN
Shedroff, N., 2005, “Unified Field of Theory of Design”, viewed 23 February 2006,
http://www.nathan.com/thoughts/unified/20.html
17. INFORMATION REVOLUTION
creating experiences
INTRODUCTION TO INTERACTION DESIGN
Interactivity is concerned with being part of
the action of a system or performance
and not merely watching the action
passively.
17/38
USER INTERACTION DESIGN
18. INTRODUCTION TO INTERACTION DESIGN
18/38
USER INTERACTION DESIGN
Shedroff, N., 2005, “Unified Field of Theory of Design”, viewed 23 February 2006,
http://www.nathan.com/thoughts/unified/3.html
19. VISUAL COMMUNICATION
& INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
what is the difference?
Interaction Design
A field and approach to designing
interactive experiences*. These could be
in any medium (such as live events or
performances, products, services, etc.) and 19/38
not only digital media.
USER INTERACTION DESIGN
Interactive experiences, necessarily, require time as
an organizing principle (though not exclusively) and
Interactive Design is concerned with a user, customer,
audience, or participant's experience flow through time.
20. VISUAL COMMUNICATION
& INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
what is the difference?
TRADITIONAL USER INTERACTION
VISUAL COMMUNICATION DESIGN
COSTUMER USER ORIENTED
ORIENTED 20/38
USER INTERACTION DESIGN
marketing strategies user research
advertisement creating experiences
client-defined objectives user-centered
methodologies
INTERACTIVE EXPERIENCES
21. INTERACTION DESIGN
INTRODUCTION TO INTERACTION DESIGN
Think about what experiences are:
How do you create them?
How do you know when they are
21/38
successful?
USER INTERACTION DESIGN
What are the most satisfying experiences
you can remember?
22. INTERACTION DESIGN
definition of experience | 体验
INTRODUCTION TO INTERACTION DESIGN
The sensation of interaction with a
product, service, or event, through all
of our senses, over time, and on both
physical and cognitive levels.
22/38
通过我们的感官,长时间过程中,生理和
USER INTERACTION DESIGN
认知水平上的对某种产品、服务或事件等
的交互而产生的感受.
23. INTERACTION DESIGN
aspects of interaction | 互动
INTRODUCTION TO INTERACTION DESIGN
Since our objective is to create interactive
experiences, let’s try to understand the
difference between passive experiences*
-- like watching television or reading a
book -- and interactive experiences -- 23/38
USER INTERACTION DESIGN
like being able to produce a television
show or add/modify the content of a
book.
Interactivity should not be confused with animation in which objects may
move on a screen. Interactivity is concerned with being part of the action of a
system or performance and not merely watching the action passively.
24. Passive Interactive
INTRODUCTION TO INTERACTION DESIGN
Feedback
Control
Sophisticated Navigation, High Audience Control
Creativity
Creation Tools, Creation Help
24/38
Productivity
Productivity Tools, Living Information
USER INTERACTION DESIGN
Communications
Adaptivity
Artificial Intelligence, Agents, etc…
Shedroff, N., 2005, “Unified Field of Theory of Design”, viewed 23 February 2006,
http://www.nathan.com/thoughts/unified/13.html
25. ASPECTS OF INTERACTION
control and feedback | 控制与反馈
INTRODUCTION TO INTERACTION DESIGN
Aspects of interactivity defined by how
much control users have over the
outcome or the rate, sequence, or type
of action, and how much feedback
exists in the interface. 25/38
USER INTERACTION DESIGN
观众对某项行动的结果、频率、联系性或
种类的控制程度,以及该界面中反馈存在
的程度。
26.
27. ASPECTS OF INTERACTION
productivity and creativity | 效率与创意体验
INTRODUCTION TO INTERACTION DESIGN
Type of interaction that allows the user to
make, do, or share something
themselves: users must participate by
creating or manipulating instead of
merely watching and consuming. 27/38
USER INTERACTION DESIGN
创意体验允许用户、创立者或参与者自己
开发、制作及分享事物。创意产品与体验
需要其他人通过创造或操纵,而非观看或
消费的方式来参与其中。
28.
29. ASPECTS OF INTERACTION
communicative experiences | 交流式体验
INTRODUCTION TO INTERACTION DESIGN
Type of interaction that allow users to meet,
talk, share their personal stories and
opinions with other users of the system/
product.
29/38
会面他人、与之交谈、分享个人故事与观
USER INTERACTION DESIGN
点的机会总是被视为有价值的与有趣的,
由于他们的经历包含了两个或以上的人,
并包含了高层次的控制、。
31. ASPECTS OF INTERACTION
adaptive experiences | 适应性体验
INTRODUCTION TO INTERACTION DESIGN
Type of interaction based on technologies
that changes the experience based on
the behavior* of the user. These can
include agents*, modifying behaviors,
and artificial intelligence*. 31/38
USER INTERACTION DESIGN
适应性科技是指那些在用户、读者、消费
者或演员行为的基础上改变其体验的科
技,其中包括媒介体、修整性行为和人工
智能。
32.
33.
34. USER INTERACTION DESIGN
creating experiences
INTRODUCTION TO INTERACTION DESIGN
So, we come back to the question:
how does one create meaningful
experiences and interactions?
We must first revisit our goals* and 34/38
messages and reevaluate the kinds of
USER INTERACTION DESIGN
experiences we want our audience to
have. We must also ask them what their
needs* and wants* are with regard to
these experiences.
35. ACTIVITY #2
interactive products
INTRODUCTION TO INTERACTION DESIGN
1. Divide yourselves into groups
of 2 (two) people
2. In your groups, discuss
-- at least -- 3 (three) ideas 35/38
of possible interactive products
USER INTERACTION DESIGN
your group might implement as
their final project for the course.
36. Passive Interactive
INTRODUCTION TO INTERACTION DESIGN
Feedback
Control
Sophisticated Navigation, High Audience Control
Creativity
Creation Tools, Creation Help
36/38
Productivity
Productivity Tools, Living Information
USER INTERACTION DESIGN
Communications
Adaptivity
Artificial Intelligence, Agents, etc…
Shedroff, N., 2005, “Unified Field of Theory of Design”, viewed 23 February 2006,
http://www.nathan.com/thoughts/unified/13.html
37. HOMEWORK [ GROUPS ]
interactive products
INTRODUCTION TO INTERACTION DESIGN
1. In your groups, create the concept of
-- at least -- 3 (three) ideas
of possible interactive products
your group might implement as
their final project for the course. 37/38
USER INTERACTION DESIGN
2. Find 5 (five) examples of similar
interactive products for each of the
concepts you’ve create:
15 (fifteen) screenshots.
38. HOMEWORK [ INDIVIDUAL ]
sketchbook
INTRODUCTION TO INTERACTION DESIGN
1. Choose 5 (five) words marked with
asterisks (*) you’ve seen in this class and
look up for their definitions in an
English dictionary;
38/38
2. Write the definitions of the words you’ve
USER INTERACTION DESIGN
chosen in a sketchbook, adding -- at
least -- 3 (three) pictures and 2 (two)
websites to help illustrate your
definitions; you should comment your
definitions and choices of pictures/
websites.