SlideShare a Scribd company logo
1 of 38
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.
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.
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
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
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
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
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
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
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.
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
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
建立在如果非实时即及时为基础的一种允许双
 向沟通的体验。相对而言,单向沟通体验指
 在其中仅仅存在基于批量或者定时为基础的
 单向信息流动。
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.
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
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
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
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
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
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
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.
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
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?
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
认知水平上的对某种产品、服务或事件等
的交互而产生的感受.
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.
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
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
观众对某项行动的结果、频率、联系性或
种类的控制程度,以及该界面中反馈存在
的程度。
Introduction to Interaction Design
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
创意体验允许用户、创立者或参与者自己
开发、制作及分享事物。创意产品与体验
需要其他人通过创造或操纵,而非观看或
消费的方式来参与其中。
Introduction to Interaction Design
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
点的机会总是被视为有价值的与有趣的,
由于他们的经历包含了两个或以上的人,
并包含了高层次的控制、。
USER INTERACTION DESIGN           INTRODUCTION TO INTERACTION DESIGN
                          30/38
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
适应性科技是指那些在用户、读者、消费
者或演员行为的基础上改变其体验的科
技,其中包括媒介体、修整性行为和人工
智能。
Introduction to Interaction Design
Introduction to Interaction Design
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.
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.
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
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.
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.

More Related Content

What's hot

User Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickUser Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickLane Goldstone
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interactionKenny Nguyen
 
Wif, Interactive design international festival, programme
Wif, Interactive design international festival, programmeWif, Interactive design international festival, programme
Wif, Interactive design international festival, programmeWif
 
Collaborative Task Assignment on Tabletop Computer
Collaborative Task Assignment on Tabletop ComputerCollaborative Task Assignment on Tabletop Computer
Collaborative Task Assignment on Tabletop ComputerChayan Deb
 
Design Thinking @ Mobile Monday
Design Thinking @ Mobile MondayDesign Thinking @ Mobile Monday
Design Thinking @ Mobile MondayJens Otto Lange
 
Design Guidelines: Real-Life Stories
Design Guidelines: Real-Life StoriesDesign Guidelines: Real-Life Stories
Design Guidelines: Real-Life StoriesDesign for Context
 
User Experience Design & Paper Prototyping
User Experience Design & Paper PrototypingUser Experience Design & Paper Prototyping
User Experience Design & Paper PrototypingIlona Posner
 
10 Things to know about experience design
10 Things to know about experience design10 Things to know about experience design
10 Things to know about experience designAynne Valencia
 
User Experience & Lean Startup
User Experience & Lean StartupUser Experience & Lean Startup
User Experience & Lean StartupLane Goldstone
 
Human(e) machine interaction? A reflection on the development of products
Human(e) machine interaction? A reflection on the development of productsHuman(e) machine interaction? A reflection on the development of products
Human(e) machine interaction? A reflection on the development of productsIHM'10
 
What is User Experience? - Barcamp 4 in Auckland New Zealand
What is User Experience? - Barcamp 4 in Auckland New ZealandWhat is User Experience? - Barcamp 4 in Auckland New Zealand
What is User Experience? - Barcamp 4 in Auckland New ZealandHaunani Pao
 
Virtual collaborative design environments
Virtual collaborative design environmentsVirtual collaborative design environments
Virtual collaborative design environmentsScott Curland Chase
 
What is Interaction Design?
What is Interaction Design?What is Interaction Design?
What is Interaction Design?clickcolleen
 
Dashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AGDashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AGAsis Panda
 

What's hot (20)

User Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickUser Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty Stick
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interaction
 
Wif, Interactive design international festival, programme
Wif, Interactive design international festival, programmeWif, Interactive design international festival, programme
Wif, Interactive design international festival, programme
 
Ana Amorim
Ana AmorimAna Amorim
Ana Amorim
 
Collaborative Task Assignment on Tabletop Computer
Collaborative Task Assignment on Tabletop ComputerCollaborative Task Assignment on Tabletop Computer
Collaborative Task Assignment on Tabletop Computer
 
Design Thinking @ Mobile Monday
Design Thinking @ Mobile MondayDesign Thinking @ Mobile Monday
Design Thinking @ Mobile Monday
 
Tp1 Design for All part2
Tp1 Design for All part2Tp1 Design for All part2
Tp1 Design for All part2
 
viewo
viewoviewo
viewo
 
Design Guidelines: Real-Life Stories
Design Guidelines: Real-Life StoriesDesign Guidelines: Real-Life Stories
Design Guidelines: Real-Life Stories
 
User Experience Design & Paper Prototyping
User Experience Design & Paper PrototypingUser Experience Design & Paper Prototyping
User Experience Design & Paper Prototyping
 
10 Things to know about experience design
10 Things to know about experience design10 Things to know about experience design
10 Things to know about experience design
 
User Experience & Lean Startup
User Experience & Lean StartupUser Experience & Lean Startup
User Experience & Lean Startup
 
Design for Interaction
Design for InteractionDesign for Interaction
Design for Interaction
 
Human(e) machine interaction? A reflection on the development of products
Human(e) machine interaction? A reflection on the development of productsHuman(e) machine interaction? A reflection on the development of products
Human(e) machine interaction? A reflection on the development of products
 
What is User Experience? - Barcamp 4 in Auckland New Zealand
What is User Experience? - Barcamp 4 in Auckland New ZealandWhat is User Experience? - Barcamp 4 in Auckland New Zealand
What is User Experience? - Barcamp 4 in Auckland New Zealand
 
Humane Machine Interaction Design
Humane Machine Interaction DesignHumane Machine Interaction Design
Humane Machine Interaction Design
 
Virtual collaborative design environments
Virtual collaborative design environmentsVirtual collaborative design environments
Virtual collaborative design environments
 
What is Interaction Design?
What is Interaction Design?What is Interaction Design?
What is Interaction Design?
 
Mobile creativity-th2
Mobile creativity-th2Mobile creativity-th2
Mobile creativity-th2
 
Dashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AGDashboard UX Design - Whitepaper for Volkswagen AG
Dashboard UX Design - Whitepaper for Volkswagen AG
 

Viewers also liked

Wk 5 research in industrial design
Wk 5 research in industrial designWk 5 research in industrial design
Wk 5 research in industrial designshah man
 
Looking Good: an Introduction to Industrial Design for SMEs
Looking Good: an Introduction to Industrial Design for SMEsLooking Good: an Introduction to Industrial Design for SMEs
Looking Good: an Introduction to Industrial Design for SMEsAndrie Trisaksono
 
Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07
Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07
Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07robtannen
 
Introduction to the Industrial Revolution
Introduction to the Industrial RevolutionIntroduction to the Industrial Revolution
Introduction to the Industrial RevolutionDan McDowell
 

Viewers also liked (6)

Wk 5 research in industrial design
Wk 5 research in industrial designWk 5 research in industrial design
Wk 5 research in industrial design
 
Looking Good: an Introduction to Industrial Design for SMEs
Looking Good: an Introduction to Industrial Design for SMEsLooking Good: an Introduction to Industrial Design for SMEs
Looking Good: an Introduction to Industrial Design for SMEs
 
Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07
Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07
Connecting Service Design & Industrial Design - Rob Tannen, Connecting '07
 
Industrial_design
Industrial_designIndustrial_design
Industrial_design
 
Industrial design
Industrial designIndustrial design
Industrial design
 
Introduction to the Industrial Revolution
Introduction to the Industrial RevolutionIntroduction to the Industrial Revolution
Introduction to the Industrial Revolution
 

Similar to Introduction to Interaction Design

Information Architecture & Way-finding (User Interaction Design at Raffles D...
Information Architecture & Way-finding  (User Interaction Design at Raffles D...Information Architecture & Way-finding  (User Interaction Design at Raffles D...
Information Architecture & Way-finding (User Interaction Design at Raffles D...Itamar Medeiros
 
Types of design
Types of designTypes of design
Types of designvaga bond
 
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1Salvatore Iaconesi
 
New collaborative tools require new foundations.
New collaborative tools require new foundations. New collaborative tools require new foundations.
New collaborative tools require new foundations. Lorenzo Davoli
 
TM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxTM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxMohammedYusuf609377
 
Principles of Interaction Design
Principles of Interaction DesignPrinciples of Interaction Design
Principles of Interaction DesignPatrick Morgan
 
20130219 chi chi-overzicht
20130219 chi chi-overzicht20130219 chi chi-overzicht
20130219 chi chi-overzichtErik Duval
 
Introduction to Interaction Design.pptx
Introduction to Interaction Design.pptxIntroduction to Interaction Design.pptx
Introduction to Interaction Design.pptxvaishalikhairnar4
 
物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience Design
物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience Design物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience Design
物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience DesignTing-Han Chen
 
Info design presentation[1]
Info design presentation[1]Info design presentation[1]
Info design presentation[1]17elisem
 
Info design presentation-3
Info design presentation-3Info design presentation-3
Info design presentation-317elisem
 
Info design presentation2
Info design presentation2Info design presentation2
Info design presentation217elisem
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docxRiniyaMary
 
Information Architecture and Content Organization
Information Architecture and Content OrganizationInformation Architecture and Content Organization
Information Architecture and Content OrganizationItamar Medeiros
 
Web Usability and Conversion
Web Usability and ConversionWeb Usability and Conversion
Web Usability and ConversionPaul Sherman
 
Best Practices for Interdisciplinary Design.
Best Practices for Interdisciplinary Design.Best Practices for Interdisciplinary Design.
Best Practices for Interdisciplinary Design.Arturo Pelayo
 

Similar to Introduction to Interaction Design (20)

IxD?
IxD?IxD?
IxD?
 
Information Architecture & Way-finding (User Interaction Design at Raffles D...
Information Architecture & Way-finding  (User Interaction Design at Raffles D...Information Architecture & Way-finding  (User Interaction Design at Raffles D...
Information Architecture & Way-finding (User Interaction Design at Raffles D...
 
WiID Introduction
WiID IntroductionWiID Introduction
WiID Introduction
 
Types of design
Types of designTypes of design
Types of design
 
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
Master of Exhibit Design at La Sapienza University, Introduction and Lesson 1
 
New collaborative tools require new foundations.
New collaborative tools require new foundations. New collaborative tools require new foundations.
New collaborative tools require new foundations.
 
TM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxTM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptx
 
Principles of Interaction Design
Principles of Interaction DesignPrinciples of Interaction Design
Principles of Interaction Design
 
20130219 chi chi-overzicht
20130219 chi chi-overzicht20130219 chi chi-overzicht
20130219 chi chi-overzicht
 
Introduction to Interaction Design.pptx
Introduction to Interaction Design.pptxIntroduction to Interaction Design.pptx
Introduction to Interaction Design.pptx
 
物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience Design
物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience Design物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience Design
物聯網產品體驗設計架構 | A Conceptual Framework for IoT Product Experience Design
 
Info design presentation[1]
Info design presentation[1]Info design presentation[1]
Info design presentation[1]
 
Info design presentation-3
Info design presentation-3Info design presentation-3
Info design presentation-3
 
Info design presentation2
Info design presentation2Info design presentation2
Info design presentation2
 
Chi overview
Chi overviewChi overview
Chi overview
 
What is design interaction?
What is design interaction?What is design interaction?
What is design interaction?
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docx
 
Information Architecture and Content Organization
Information Architecture and Content OrganizationInformation Architecture and Content Organization
Information Architecture and Content Organization
 
Web Usability and Conversion
Web Usability and ConversionWeb Usability and Conversion
Web Usability and Conversion
 
Best Practices for Interdisciplinary Design.
Best Practices for Interdisciplinary Design.Best Practices for Interdisciplinary Design.
Best Practices for Interdisciplinary Design.
 

More from Itamar Medeiros

Information Architecture & Content Organization (User Interaction Design at...
Information Architecture & Content Organization   (User Interaction Design at...Information Architecture & Content Organization   (User Interaction Design at...
Information Architecture & Content Organization (User Interaction Design at...Itamar Medeiros
 
Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...Itamar Medeiros
 
Communication-Oriented Interface Design Principles (User Interaction Design ...
Communication-Oriented Interface Design Principles  (User Interaction Design ...Communication-Oriented Interface Design Principles  (User Interaction Design ...
Communication-Oriented Interface Design Principles (User Interaction Design ...Itamar Medeiros
 
Communication-Oriented Interface Design Principles: Part II (User Interactio...
Communication-Oriented Interface Design Principles: Part II  (User Interactio...Communication-Oriented Interface Design Principles: Part II  (User Interactio...
Communication-Oriented Interface Design Principles: Part II (User Interactio...Itamar Medeiros
 
Strategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCESStrategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCESItamar Medeiros
 
Problem Framing for Strategic Design
Problem Framing for Strategic DesignProblem Framing for Strategic Design
Problem Framing for Strategic DesignItamar Medeiros
 
Helping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same DirectionHelping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same DirectionItamar Medeiros
 
The Importance of Vision for Product Design
The Importance of Vision for Product DesignThe Importance of Vision for Product Design
The Importance of Vision for Product DesignItamar Medeiros
 
Problem Framing and Reframing:
Problem Framing and Reframing: Problem Framing and Reframing:
Problem Framing and Reframing: Itamar Medeiros
 
"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015Itamar Medeiros
 
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design TeamsTinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design TeamsItamar Medeiros
 
Designing Interactions / Experiences: Lecture #05
 Designing Interactions / Experiences: Lecture #05 Designing Interactions / Experiences: Lecture #05
Designing Interactions / Experiences: Lecture #05Itamar Medeiros
 
Designing Interactions / Experiences: Lecture #04
 Designing Interactions / Experiences: Lecture #04 Designing Interactions / Experiences: Lecture #04
Designing Interactions / Experiences: Lecture #04Itamar Medeiros
 
Designing Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in ActionDesigning Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in ActionItamar Medeiros
 
Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03Itamar Medeiros
 
Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02Itamar Medeiros
 
Designing Interactions: Lecture #01
Designing Interactions: Lecture #01Designing Interactions: Lecture #01
Designing Interactions: Lecture #01Itamar Medeiros
 
Voltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAPVoltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAPItamar Medeiros
 
Creative Drive In Workshop: "Crossing Borders with Information Design
Creative Drive In Workshop: "Crossing Borders with Information DesignCreative Drive In Workshop: "Crossing Borders with Information Design
Creative Drive In Workshop: "Crossing Borders with Information DesignItamar Medeiros
 

More from Itamar Medeiros (20)

Information Architecture & Content Organization (User Interaction Design at...
Information Architecture & Content Organization   (User Interaction Design at...Information Architecture & Content Organization   (User Interaction Design at...
Information Architecture & Content Organization (User Interaction Design at...
 
Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...Paper Prototyping & Wireframes  (User Interaction Design at Raffles Design In...
Paper Prototyping & Wireframes (User Interaction Design at Raffles Design In...
 
Communication-Oriented Interface Design Principles (User Interaction Design ...
Communication-Oriented Interface Design Principles  (User Interaction Design ...Communication-Oriented Interface Design Principles  (User Interaction Design ...
Communication-Oriented Interface Design Principles (User Interaction Design ...
 
Communication-Oriented Interface Design Principles: Part II (User Interactio...
Communication-Oriented Interface Design Principles: Part II  (User Interactio...Communication-Oriented Interface Design Principles: Part II  (User Interactio...
Communication-Oriented Interface Design Principles: Part II (User Interactio...
 
Strategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCESStrategy PROCESS, QUESTIONS & RESOURCES
Strategy PROCESS, QUESTIONS & RESOURCES
 
Problem Framing for Strategic Design
Problem Framing for Strategic DesignProblem Framing for Strategic Design
Problem Framing for Strategic Design
 
Helping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same DirectionHelping Teams Paddle in the Same Direction
Helping Teams Paddle in the Same Direction
 
The Importance of Vision for Product Design
The Importance of Vision for Product DesignThe Importance of Vision for Product Design
The Importance of Vision for Product Design
 
Problem Framing and Reframing:
Problem Framing and Reframing: Problem Framing and Reframing:
Problem Framing and Reframing:
 
"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015"Look, Listen, and Maybe Speak" at UX Poland 2015
"Look, Listen, and Maybe Speak" at UX Poland 2015
 
Six Thinking Hats
Six Thinking HatsSix Thinking Hats
Six Thinking Hats
 
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design TeamsTinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
Tinker Tailor Soldier Spy: Twists & Turns of Working in Global Design Teams
 
Designing Interactions / Experiences: Lecture #05
 Designing Interactions / Experiences: Lecture #05 Designing Interactions / Experiences: Lecture #05
Designing Interactions / Experiences: Lecture #05
 
Designing Interactions / Experiences: Lecture #04
 Designing Interactions / Experiences: Lecture #04 Designing Interactions / Experiences: Lecture #04
Designing Interactions / Experiences: Lecture #04
 
Designing Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in ActionDesigning Interactions / Experiences: Reflection in Action
Designing Interactions / Experiences: Reflection in Action
 
Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03Designing Interactions / Experiences: Lecture #03
Designing Interactions / Experiences: Lecture #03
 
Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02Designing Interactions / Experiences: Lecture #02
Designing Interactions / Experiences: Lecture #02
 
Designing Interactions: Lecture #01
Designing Interactions: Lecture #01Designing Interactions: Lecture #01
Designing Interactions: Lecture #01
 
Voltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAPVoltando às Origens: Conversa com alunos da UPFE / UNICAP
Voltando às Origens: Conversa com alunos da UPFE / UNICAP
 
Creative Drive In Workshop: "Crossing Borders with Information Design
Creative Drive In Workshop: "Crossing Borders with Information DesignCreative Drive In Workshop: "Crossing Borders with Information Design
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 观众对某项行动的结果、频率、联系性或 种类的控制程度,以及该界面中反馈存在 的程度。
  • 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 创意体验允许用户、创立者或参与者自己 开发、制作及分享事物。创意产品与体验 需要其他人通过创造或操纵,而非观看或 消费的方式来参与其中。
  • 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 点的机会总是被视为有价值的与有趣的, 由于他们的经历包含了两个或以上的人, 并包含了高层次的控制、。
  • 30. USER INTERACTION DESIGN INTRODUCTION TO INTERACTION DESIGN 30/38
  • 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 适应性科技是指那些在用户、读者、消费 者或演员行为的基础上改变其体验的科 技,其中包括媒介体、修整性行为和人工 智能。
  • 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.