Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


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
  • Be the first to comment

  • Be the first to like this

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 ? </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> </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>
  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> </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> </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> </li></ul><ul><li> </li></ul>Philips Future Kitchen Tabletop computing
  25. 25. Environment computing & interaction <ul><li>You explain to me. </li></ul><ul><li> </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>
  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>
  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>
  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 ?