![Page 1: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/1.jpg)
Lecture 1 : Multi-touch tangible interface; HCI trends, projects, and development
By Jazmi Jamal
Area of expertise: new media interactive technology, eLearning technology, mixed and augmented reality, sound art & design.
Employment history: interactive designer, instructional designer, multimedia designer, video editor, sound designer, project manager.
Twitter : jazmiizwan
![Page 2: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/2.jpg)
Outline
History of HCI
Today’s HCI : environment computing
Introduction to tangible interface
IT Project management
Multi-touch workshop
![Page 3: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/3.jpg)
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
![Page 4: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/4.jpg)
History of Human-Computer-Interface (HCI) Technology
“Before the computer, there wasn’t interaction design. But most of the qualities we seek have been valued through ages.”
• Usable
• Useful
• Desirable
• Affordance for the right people
• Appropriately complex & style
• Appropriately transparent in function and use
• Appropriately adaptable, extensible, and user-friendly
• Good fit with people, activity, context, and result
![Page 5: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/5.jpg)
Interaction design history
![Page 6: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/6.jpg)
Operate the machine
Back in the day..
Engineering design-based: make faster and bigger machine
People adapt to machine: people speak the machine’s language.
No designers involve, but lots of expert engineers.
“When programmable-interactive machines first appeared, the creators of their controls and interfaces emphasized the goal of ‘operating the machine’.”
![Page 7: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/7.jpg)
igital computer capable of being reprogrammed to solve a full range of computing problems
ENIAC (Electronic Numerical Integrator And Computer)
• Digital computer capable of being reprogrammed to solve a full range of computing problems
• ENIAC was designed to calculate artillery firing tables for the United States Army's Ballistic Research Laboratory
Mauchly and Eckert, 1946Wiring the ENIAC with a new program
• 3,000 cubic feet, 30 tons, 18k vacuum tubes, 70k resistors, 170 kW, 1 kbit memory.
• Not a stored program device.
• Approximate processing power is similar to ‘singing birthday card’.
![Page 8: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/8.jpg)
PDP-8
• First successful commercial mini computers.
• General purpose computer.
• Input/Output : Front panel interface, paper-tape reader, teletype printer, magnetic tape, punched cards readers and fixed-head disks.
DEC, 1960sFront panel switches
• Size of a ‘mini-bar’.
• More ? http://wapedia.mobi/en/PDP-8
![Page 9: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/9.jpg)
Mouse
• Rotation of each wheels defines motion of one axis.
• The researcher patented the mouse technology “X-Y Position Indicator for a Display System.
• This mouse used with Xerox Alto computer.
Doug Engelbart , 1960sFirst mouse
![Page 10: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/10.jpg)
IBM 3270
• Terminal-based display (programmable characters).
• Command line interface
• Designed to connect with mainframe computers, often at a remote distance.
• The computer display subsystem consisted of displays, printers and controllers.
IBM, 1972Command line interface
![Page 11: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/11.jpg)
Use the software
Work on spreadsheet
Work on word processor
Play a game
“Shift in focus from controlling the computer to using application and tools”
“People have to adapt less to use the machines’ capability”
![Page 12: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/12.jpg)
VisiCalc (Calculation spreadsheet software)
• The first spreadsheet program available for personal computer.
• Microsoft Excel’s grandpa.
• People had a reason to buy personal computer. To used the spreadsheet.
VisiCorp, 1979A tool for business calculation
• Some of the features that contributed for recent application :
• Scroll left, right, up or down• Real-time scrolling• Instant recalculation based on formulas stored.• Numeric and text formatting
![Page 13: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/13.jpg)
Wordstar (writing tools)
• Word processor application.
• Text-based word processing program.
• People had a reason to buy personal computer. To create, edit, store and format the text document.
S. Rubenstein & J. Barnaby, 1979A tool for writing
![Page 14: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/14.jpg)
Perform a task
Draw and edit a picture
Create printed materials
Create a budget
Compose music
“Previous applications are too complicated. Hence, it invited complaint and competitors ”
“The tools had emphasis on ease of learning, ease of use, reduce errors and save time.”
“Eventually, professionals emphasis on people doing a task rather than ‘a tool with good control’.”
![Page 15: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/15.jpg)
Apple Lisa (personal multipurpose computer)
• Introduced the early GUI to the customer. GUI have been adapted from Xerox PARC which is based on SRI research.
• Input/Output : mouse, keyboard, & floppy disk.
Apple Computer Inc, 1980sGraphical User Interface (GUI)
• Advance virtual memory that can run cooperative multitasking.
• The OS enable third-party software to run on the computer.
• http://www.youtube.com/watch?v=W35vpsPIwlU
![Page 16: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/16.jpg)
Software design manifesto
“The most important social evolution within the computing professions would be to create a role for the software designer as a champion of the user experience”
“The software designer should be the person with overall responsibility for the conception and realization of the program."
http://hci.stanford.edu/publications/bds/1-kapor.html
![Page 17: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/17.jpg)
Experience: live, learn, work & play
Manage household
Learn math, science or etc.
Manage a small business
Immerse in a fantasy
“After the years of trying to help people to perform, we realised success depended on expanding the view scope. ”
“Majority of good works now involves an effort to fit context of use, characteristics of individuals, and patterns of life.”
“And most great work attempt to go beyond expressed need to talent”
![Page 18: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/18.jpg)
Notebook / Laptop
• Mobile, portability, and ubiquity enable the user to access computer anytime anywhere.
• http://www.youtube.com/watch?v=4dqLT0UBPx0&feature=player_embedded
PowerBook Duo & PowerBook 500, 1990sIntegrated with other hardware • Introduction on trackpad. Originally can be seen on
Apollo’s computer.
![Page 19: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/19.jpg)
Designing the interaction have many layers of concerns
StrategyDoes the product connect with the business goal ?
ExperienceAttraction-engagement-retention
InteractionInterface in use through time by different people
InterfacePresentation of information and control
Information & functionallyCategories, types, attributes and relationships.
![Page 20: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/20.jpg)
Connect
Personal blog
Podcast & Video sharing
Cloud computing
Multiplayer game
“Another aspect of modern design: we are learning to design new ways for people to connect with one another. ”
“We design what happens between people through the machines.”
“and make it possible for people to build something together through the machine.”
![Page 21: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/21.jpg)
Software & Application
• Availability of internet makes people connect and improve the way of interactions.
• Collaborative in making variety projects
• http://www.youtube.com/watch?v=ae_DKNwK_ms
![Page 22: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/22.jpg)
Dynamically available
Personal blog
Video sharing
Cloud computing
Multiplayer game
“From: we adapt to the machine,
To: our environment and tools adapt to us as we move through life.”
![Page 23: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/23.jpg)
Mobile
• Internet & multimedia smart-phone.
• Each individuals have the access to internet anytime anywhere
• iPhone features: Camera, call, portable media player, GPS navigation, social networking, games and etc.
iPhone, 2007-presentBrilliant multimedia device
![Page 24: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/24.jpg)
Surface computing
• The computer environment adapt the human activity
• http://www.youtube.com/watch?v=um6BIaPWLao•http://www.youtube.com/watch?v=TIXsvTVhrws&feature=related
Philips Future KitchenTabletop computing
![Page 25: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/25.jpg)
Environment computing & interaction
• You explain to me.
• http://www.youtube.com/watch?v=8Ff7SzP4gfg&feature=related
Microsoft Vision 2019Environment computing
![Page 26: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/26.jpg)
Interaction design history
![Page 27: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/27.jpg)
What is Tangible Interfaces ?
![Page 28: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/28.jpg)
Tangible interfaces
“Generally graspable and tangible interfaces are systems relating to the use of physical artifacts as representations and controls for digital information"
http://www.youtube.com/watch?v=Mgy1S8qymx0
![Page 29: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/29.jpg)
There are 4 characteristics concerning representation and control:
1. Physical representations are computationally coupled to underlying digital information.
2. Physical representations embody mechanisms for interactive control.
3. Physical representations are perceptually coupled to actively mediated digital representations.
4. Physical state of tangibles embodies key aspects of the digital state of a system.
http://vimeo.com/13879559
![Page 30: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/30.jpg)
Tangible interfaces
“Tangible interfaces rely on a balance between physical and digital representations."
“Digital representations are needed to mediate dynamic information."
![Page 31: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/31.jpg)
Tangible interfaces
“Physical spatiality describes the co-presence of user, objects and other users in one interaction space. This space is a hybrid."
“Haptic directness denotes direct manipulation where the physical, graspable objects themselves are the interface.."
http://www.youtube.com/watch?v=Cog8b8ojji0
![Page 32: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/32.jpg)
Do you want to develop Tangible Interface project ?
First, you need to know the project management.
![Page 33: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/33.jpg)
Project management (PM)
“Project management is the discipline of planning, organizing, securing and managing resources to bring about the successful completion of specific project goals and objectives."
![Page 34: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/34.jpg)
PM Criterion
Hard Criteria
Scope
Time
Cost
Resources
Quality
Soft Criteria
Motivation
Leadership
Communication
Recognition
and etc.
Based on ‘Why IT projects fails ?”
![Page 35: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/35.jpg)
Failures : PM in IT
• Unrealistic or unarticulated project goals
• Inaccurate estimates of needed resources
• Badly defined system requirements
• Poor reporting of the project's status
• Unmanaged risks
• Poor communication among customers, developers, and users
• Use of immature technology
• Inability to handle the project's complexity
• Careless development practices
• Poor project management
• Commercial pressures
Based on ‘Why IT projects fails ?”
![Page 36: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/36.jpg)
How to construct the project ?
Then I will explain the project outlines.
![Page 37: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/37.jpg)
Multi-Touch ‘Workshop’
“Introduce to Multi-touch technologies including development, process, management, execution, and evaluation.”
![Page 38: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/38.jpg)
MT ‘Workshop’
The Multi-touch technology software is based on vision tracking.
We will use Community Core Vision (CCV) and FLASH with AS 3.0 to develop the application.
The CCV works as bridge between the camera (input) and flash program (output).
![Page 39: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/39.jpg)
MT ‘Workshop’
In developing the multi-touch kiosk/product, several hardware need to be prepared.
For instance, projector, computer, infrared sensor, camera sensor, glass surface, speaker and others.
![Page 40: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/40.jpg)
What should I do for next step?
Prepare the ‘Resources’
![Page 41: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/41.jpg)
Human resource
Create a group of 5 members. Each team members will play different role of profession in completing the project.
![Page 42: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/42.jpg)
Rangers (team)
Multimedia TechnicianMultimedia Technician
Multimedia ProgrammerMultimedia
ProgrammerInteraction Designer
Interaction Designer
Multimedia Designer
Multimedia Designer
Industrial Designer
Industrial Designer
• Research on user’s experience and interaction.
• Study how user’s interact with the product.
• Eg: UI researcher & designer
• Create back-bone architecture of the application.
• Technical development of the application.
• Eg : Flash programmer
• Develop and organise the information in rich multimedia form.
• Creative in presenting information.
• Eg : Graphic designer
• Develop execute design solutions for physical ergonomics, usability, form and etc.
• Creative in develop fully-functional products.
•Eg : Product designer
• Setup, manage, and fix technical equipments.
• Technical setup of the product to be displayed.
• Eg : Multimedia Technician
![Page 43: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/43.jpg)
Material resource : Input sensor
INFRARED WEBCAM
The best experience in vision tracking especially for this multi-touch project is PS3 EyeCam / ToyCam*.
However, there are lots of good infrared webcam available in the market.
* the EyeCam need to be hacked in order to operate as infrared camera.
![Page 44: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/44.jpg)
Material resource : Input sensor
INFRARED LIGHTS
To enhance the detection of contrast between shade and light.
This light projection will help the camera to tracks ‘finger touched on transparent glass’
![Page 45: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/45.jpg)
Re-cap : objective
History of HCI
Today’s HCI : environment computing
Introduction to tangible interface
IT Project management
Multi-touch workshop
![Page 46: Multi-Touch Tangible Interface; HCI trends, projects, and development](https://reader035.vdocument.in/reader035/viewer/2022062613/5441c878b1af9ffb4b8b47e4/html5/thumbnails/46.jpg)
Any questions ?