introduct

1. Interaction Design
hereiswzm@gmail.com

2. The general process of a website development
Initiate a Identify Competitive
project needs analysis
Code Graphic Interaction
webpages design design
Build the Evaluate the
website website

3. What is interaction design?

4. Traditional design pays attention to
• visual feeling --- graphic design, industrial
design

5. Traditional design pays attention to
• tactile feeling --- human engineering

6. The three design dimensions
According to Norman in his emotional design, visual
and tactile design are belong to one of the three
design dimensions -- Visceral design.
Visceral design is
about how things
look, feel and
sound. It brings
surprise from
perspective of
sense.

7. The three design dimensions
Visceral design > form
Behavioral design > use & performance
Reflective design > the meaning of things, self-image

8. The three design dimensions
Simple explanations:
Visceral design pays attentions to user’s first feeling of the
product, for example: beauty.

9. The three design dimensions
Simple explanations:
Behavioral design pays attentions to user experience, such as
usability and functional design.
v.s.

10. The three design dimensions
Simple explanations:
Reflective design pays attentions to user’s feeling after use this
product, for example, users will feel satisfied and fun after use
roller coaster .

11. The three design dimensions
A good design would contain these three dimensions, and
make the product:
• Beautiful
• Practical
• Pleasant
Interaction design was mainly about the second
dimension: behavioral design.

12. Definition of interaction design
Interaction design is about defining the behaviour of artefacts,
environments, and systems (for example, products).
Jodi Forlizzi & Robert Reimann
Unlike traditional design that focuses on style/form,
interaction design first define behavioral process, and then
try to find the most efficient way to convey this process.

13. A simple explanation of interaction design by myself:
Interaction design is to design interactive process
between user and product based on investigation of
user behavior, so that it could help user to achieve
their goal easier and better.

14. Example of interaction design

15. Please try to point out the playing song inside this player.

16. Please try to point out the playing song inside this player.
？
？
？
？
In fact it is this song, but can you find it quickly？

17. Compared to previous player, you could noticed the playing
song quickly in this player.

18. The squint test (squint your eyes to check design frame work in
blur)

19. The squint test (squint your eyes to check design frame work in
blur)
There is three main parts in these players: play part, list part,
recommendation part. It is obviously that the right one is more
distinct.

20. Although the left player mimicked windows media player, it
didn’t catch the distinct point.

21. Interaction design includes not only mini details, but also
whole process such as flow chart, and translates it into wire
flame.
进入活动首页，点击预定或者查询
Qq会员登录验证，弹出登
录框
非会员，弹出框中
提示，更换qq号码 会员，跳转页面进入深航页面，选择
成为会员 机票（头等舱和商务舱都无座），下
（弹出框可以关闭） 一步
填写旅客信息和人数，显示机票价格，上一步
下一步
生成订单，上一步 财付通支付
Qq会员登录验证

22. User experience
The objective of interaction design is to support better user
experience.
Definition of user experience :
User experience (UX) is the way a person feels about using
a product, system or service.

23. According to Alan Cooper, user experience
design contains three aspects: form，content，
behavior. Interaction design is behavioral part of
it.
Content
Form Information architects
Graphic designers Copywriters
Industrial designers animators
Sound designers
Behavior
Interaction designers

24. Interaction design methods
Card Sorting
it is tool to observe how users categorize information, which
could help you organize the website information.
-------------------------------------------------
Contextual Interviews
It is a user research method that applies ethnographic
observation and one-on-one interviewing to understand the
task procedures that users follow to reach their goals.
-------------------------------------------------
Focus Groups
A Moderator facilitates a small group of participants for
discussion, so that you could understand users’ ideas,
attitudes and needs.
-------------------------------------------------
Heuristic Evaluation
Heuristic evaluation involves having a small set of evaluators
examine the interface and judge its compliance with
recognized usability principles.

25. Interaction design methods
Individual Interviews
Individual interviews typically refer to talking with one user at a
time , which c can give you a deep understanding of the people
who come to your site.
--------------------------------------------------
Parallel Design
Several people create an initial design from the same set of
requirements. This process helps to generate many different,
diverse ideas and ensures that the best ideas from each
design are integrated into the final concept.
--------------------------------------------------
Personas
A persona is a fictional person who represents a major user
group for your website site, which could help the team focus on
the users’ goals and needs.
--------------------------------------------------
Prototyping
It is a draft version of a Web site, which could be used for
testing before investing time and money into development .

26. Interaction design methods
Surveys
It is a way to conduct online or paper questionnaires among
users to collect their responses of the web site.
--------------------------------------------------
Task Analysis
It means learning about specific task users must do to meet
those goals and what steps they take to accomplish those
tasks.
--------------------------------------------------
Usability Testing
Usability testing is a technique used to evaluate a product by
testing it with representative users. In the test, these users will
try to complete typical tasks while observers watch, listen and
takes notes.
--------------------------------------------------
Use Cases
Use cases describe the interaction between a primary actor
(the initiator of the action) and the system itself.
--------------------------------------------------

27. THANKS, THE END….
Zumei
2012-09-28