Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3...
Transcript of Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3...
![Page 1: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/1.jpg)
1 – Introduction
Andrea Marrella, Francesco Leotta
Last update : 23/02/2018
Corso di Laurea Magistrale in Design, Comunicazione
Visiva e Multimediale - Sapienza Università di Roma
Interaction Design A.A. 2017/2018
![Page 2: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/2.jpg)
Interaction Design
Interaction Design defines the structure and behavior of
interactive systems.
Interaction designers strive to create meaningful relationships between
people and the products and services that they use, from computers to
mobile devices to appliances and beyond.
Web page of the Interaction Design Association: http://ixda.org/
Interaction design fall under the umbrella of Human-Computer
Interaction (HCI), and focuses on creating engaging
interfaces with well thought out behaviors.
Understanding how users and technology communicate with each
other is fundamental to anticipate how someone might interact with the
system, fix problems early, as well as invent new ways of doing things.
2 Interaction Design 17/18 1 – Introduction
![Page 3: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/3.jpg)
Interaction Design Today
3 Interaction Design 17/18 1 – Introduction
The advent of Internet of Things (IoT) has led to the creation
of several smart immersive spaces.
smart homes, offices, museums, hospitals, factories, etc.
Many interconnected objects, sensors and actuators, are used together
with mobile devices to implement seamless interaction with the
surrounding physical environment.
![Page 4: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/4.jpg)
Interaction Paradigms
4 Interaction Design 17/18 1 – Introduction
An example of smart museum:
https://www.youtube.com/watch?v=mAT26h5G-Fg
The involvement of smart objects as active actors in the
interaction process may facilitate the development of highly
personalized and contextualized user experiences.
Challenge:
the emergence of non-traditional interaction paradigms
(vocal, touchless motion based, etc.) has made the design of
the interaction as a complex and multisensory activity.
![Page 5: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/5.jpg)
Touch-based interaction
5 Interaction Design 17/18 1 – Introduction
Mobile device interface:
https://www.youtube.com/watch?v=YuBPKfBQUKk
![Page 6: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/6.jpg)
Touch-based interaction
6 Interaction Design 17/18 1 – Introduction
Multi-touch table interface:
https://www.youtube.com/watch?v=4APoqTbM9ck
![Page 7: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/7.jpg)
Touchless motion-based interaction
7 Interaction Design 17/18 1 – Introduction
Interactive wall art projection:
https://www.youtube.com/watch?v=OGoZktCzMS4
![Page 8: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/8.jpg)
Touchless motion-based interaction
8 Interaction Design 17/18 1 – Introduction
Interactive scene with physics:
https://www.youtube.com/watch?v=KLOB-T1mgdY
![Page 9: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/9.jpg)
Touchless motion-based interaction
9 Interaction Design 17/18 1 – Introduction
Augmented/Mixed reality experience:
https://www.youtube.com/watch?v=v_cvAGUItU0
![Page 10: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/10.jpg)
Putting all together
10 Interaction Design 17/18 1 – Introduction
Cleveland Museum of Arts:
https://www.youtube.com/watch?v=qWJqd6lyJ-E
![Page 11: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/11.jpg)
Ingredients for an interaction
Inputs
of user
interaction
Virtual Environment
where the interaction
takes place
Outputs
of user
interaction
11 Interaction Design 17/18 1 – Introduction
Behaviour to design the interaction
The devices dictate the styles of interaction
that the system supports.
![Page 12: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/12.jpg)
Inputs
Cameras
Microphones
Traditional interfaces such as mouse and keyboard
Touch screens
All kinds of sensors such as motion, temperature, light
Natural User Interfaces (NUIs) such as Microsoft Kinect.
Interaction Design 17/18 1 – Introduction12
![Page 13: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/13.jpg)
Capturing human movements
Microsoft Kinect
www.youtube.com/watch?v=bdviGrPaQDQ
Interaction Design 17/18 1 – Introduction13
![Page 14: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/14.jpg)
Outputs
Screens
Projection on “flat” surfaces
Video/Projection mapping
..but also
Augmented reality
Virtual reality
Interaction Design 17/18 1 – Introduction14
![Page 15: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/15.jpg)
Technology for Virtual Reality
15 Interaction Design 17/18
Oculus Rift virtual reality headset
https://www.oculus.com/
https://www.youtube.com/watch?v=i4S5fvZl-aQ
1 – Introduction
![Page 16: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/16.jpg)
Technology for Augmented Reality
16 Interaction Design 17/18
Microsoft Hololens augmented reality headset
http://www.microsoft.com/microsoft-hololens/en-us/get-ready
https://www.youtube.com/watch?v=ihKUoZxNClA
1 – Introduction
![Page 17: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/17.jpg)
(Cheap) Technology for Augmented Reality
17 Interaction Design 17/18
Google Cardboard virtual reality headset
http://www.google.com/get/cardboard/
https://www.youtube.com/watch?v=HFdaagINam0
https://www.youtube.com/watch?v=8qNmRi-gNqE
1 – Introduction
![Page 18: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/18.jpg)
Ingredients for interacting
with a mobile device
Inputs
Touch
Virtual Environment
User interface
of a mobile device
Outputs
Screen of
the mobile
device
18 Interaction Design 17/18 1 – Introduction
Design Principles and Patterns
Design of the interaction through specific
design principles and well known design
patterns coming from previous experience.
![Page 19: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/19.jpg)
Ingredients for interacting
with a smart environment
19 Interaction Design 17/18 1 – Introduction
Inputs
Touch,
Movement,
Sensors, etc.
Virtual Environment
of the physical space
of interest
Outputs
as an
interactive
experience
Videogame Metaphor
Design of the interaction similar to a
videogame: a computer is projecting an
interactive “game” and the user
interaction acts similar to a controller.
![Page 20: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/20.jpg)
Definition of the environment
20 Interaction Design 17/18
1. Advanced tools for designing mockups of user interfaces
for mobile devices.
2. Computer programming that specify how controllers
affect the physical environment and the intended user
experience.
and….don’t be scared!
We will do everything step by step :)
1 – Introduction
![Page 21: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/21.jpg)
21 Interaction Design 17/18 1 – Introduction
Balsamiq
Mockups
Processing
Designing and programming the environment
![Page 22: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/22.jpg)
Designing and programming the environment
22 Interaction Design 17/18 1 – Introduction
Balsamiq
Mockups
Processing
![Page 23: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/23.jpg)
Balsamiq Mockups (wireframing tool)
Download Balsamiq Mockups from the following link:
https://balsamiq.com/download/
Install the “trial” version of the software.
23 Interaction Design 17/18 1 – Introduction
![Page 24: Interaction Designleotta/interactiondesign/2017-2018/1-Introduction.pdfInteraction Design Today 3 Interaction Design 17/18 1 –Introduction The advent of Internet of Things (IoT)](https://reader033.fdocuments.net/reader033/viewer/2022041919/5e6b1035582e8b6b086b7003/html5/thumbnails/24.jpg)
Processing programming language
Download the Processing language and programming
environment from the following link
https://processing.org/download/
24 Interaction Design 17/18 1 – Introduction