Lecture 1 : Multi-touch tangible interface; HCI trends, projects, and development  By  Jazmi Jamal Area of expertise : new...
Outline <ul><li>History of HCI </li></ul><ul><li>Today’s HCI : environment computing </li></ul><ul><li>Introduction to tan...
Human-computer interaction  is a discipline concerned with the  design, evaluation and implementation  of  interactive com...
History of Human-Computer-Interface (HCI) Technology <ul><li>“ Before the computer, there wasn’t interaction design. But m...
Interaction design history
Operate the machine <ul><li>“ When programmable-interactive machines first appeared, the creators of their controls and in...
igital computer capable of being reprogrammed to solve a full range of  computing problems ENIAC  (Electronic Numerical In...
PDP-8 <ul><li>First successful commercial mini computers. </li></ul><ul><li>General purpose computer. </li></ul><ul><li>In...
Mouse <ul><li>Rotation of each wheels defines motion of one axis. </li></ul><ul><li>The researcher patented the mouse tech...
IBM 3270 <ul><li>Terminal-based display (programmable characters). </li></ul><ul><li>Command line interface </li></ul><ul>...
Use the software <ul><li>“ Shift in focus from controlling the computer to using application and tools” </li></ul><ul><li>...
VisiCalc  (Calculation spreadsheet software)  <ul><li>The first spreadsheet program available for personal computer. </li>...
Wordstar  (writing tools)  <ul><li>Word processor application. </li></ul><ul><li>Text-based word processing program. </li>...
Perform a task <ul><li>“ Previous applications are too complicated. Hence, it invited complaint and competitors ” </li></u...
Apple Lisa  (personal multipurpose computer)  <ul><li>Introduced the early GUI to the customer. GUI have been adapted from...
Software design manifesto <ul><li>“ The most important social evolution within the computing professions would be to creat...
Experience:  live, learn, work & play <ul><li>“ After the years of trying to help people to perform, we realised success d...
Notebook / Laptop <ul><li>Mobile, portability, and ubiquity enable the user to access computer anytime anywhere. </li></ul...
Designing the interaction have many layers of concerns <ul><li>Strategy </li></ul><ul><ul><li>Does the product connect wit...
Connect <ul><li>“ Another aspect of modern design: we are learning to design new ways for people to connect with one anoth...
Software & Application <ul><li>Availability of internet makes people connect and improve the way of interactions. </li></u...
Dynamically available <ul><li>“ From: we adapt to the machine,  </li></ul><ul><li>To: our environment and tools adapt to u...
Mobile <ul><li>Internet & multimedia smart-phone. </li></ul><ul><li>Each individuals have the access to internet anytime a...
Surface computing <ul><li>The computer environment adapt the human activity </li></ul><ul><li>http://www.youtube.com/watch...
Environment computing & interaction <ul><li>You explain to me. </li></ul><ul><li>http://www.youtube.com/watch?v=8Ff7SzP4gf...
Interaction design history
What is Tangible Interfaces ?
Tangible interfaces <ul><li>“ Generally graspable and tangible interfaces are systems relating to the use of physical arti...
There are 4 characteristics concerning representation and control:  <ul><li>Physical representations are computationally c...
Tangible interfaces <ul><li>“ Tangible interfaces rely on a balance between physical and digital representations.&quot;  <...
Tangible interfaces <ul><li>“ Physical spatiality  describes the  co-presence  of user, objects and other users in  one in...
Do you want to develop Tangible Interface project ? First, you need to know the project management.
Project management (PM) <ul><li>“ Project management  is the discipline of  planning, organizing, securing and managing re...
PM Criterion Based on ‘Why IT projects fails ?” Hard Criteria Scope Time Cost Resources Quality Soft Criteria Motivation L...
Failures : PM in IT Based on ‘Why IT projects fails ?” <ul><li>Unrealistic or unarticulated project goals </li></ul><ul><l...
How to construct the project ? Then I will explain the project outlines.
Multi-Touch ‘Workshop’ <ul><li>“ Introduce to Multi-touch technologies including development, process, management, executi...
MT ‘Workshop’ <ul><li>The Multi-touch technology software is based on vision tracking. </li></ul><ul><li>We will use Commu...
MT ‘Workshop’ <ul><li>In developing the multi-touch kiosk/product, several hardware need to be prepared.  </li></ul><ul><l...
What should I do for next step? Prepare the ‘Resources’
Human resource <ul><li>Create a group of 5 members. Each team members will play different role of profession in completing...
Rangers (team) Multimedia Technician Multimedia Programmer Interaction Designer Multimedia Designer Industrial Designer <u...
Material resource :  Input sensor <ul><li>INFRARED WEBCAM </li></ul><ul><li>The best experience in vision tracking especia...
Material resource :  Input sensor <ul><li>INFRARED LIGHTS </li></ul><ul><li>To enhance the detection of contrast between s...
Re-cap : objective <ul><li>History of HCI </li></ul><ul><li>Today’s HCI : environment computing </li></ul><ul><li>Introduc...
Any questions ?
Upcoming SlideShare
Loading in...5
×

Multi-Touch Tangible Interface; HCI trends, projects, and development

23,434

Published on

Lecture series on Multi-touch. Topic covers; History of HCI, Environment computing, Introduction to tangible interface, IT Project management, and multi-touch workshop. Created in Q1 2010

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
23,434
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Multi-Touch Tangible Interface; HCI trends, projects, and development"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×