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.

Interaction Design Roadmap

This is the roadmap for interaction design

  • Login to see the comments

Interaction Design Roadmap

  1. 1. + HCI & INTERACTION DESIGN (IxD) Roadmap and Gap By Mohd Syaheezam Asyraq Yamin
  2. 2. + Objective  To identify HCI foundation and gap within current organization  Projection the right direction for HCI implementation  Interaction Design Introduction  Identify competencies/skill sets required
  3. 3. + Definition HCI is the study of interaction between people (users) and computers
  4. 4. + HCI Goal :  To optimize the user interaction with the system/Environment, so that it supports and extends the user’s activities in useful, efficient, and usable ways  Succesful HCI designs = affective HCI designs  Affective HCI designs measured by :  Aesthetics characteristics (how excellent, cute etc)  Usability characteristics (how frustrating or pleasing to work with the system).
  5. 5. + Origin of HCI COMPUTER SCIENCE COGNITIVE PHYCHOLOGY FINE ARTS DESIGN HCI
  6. 6. + Origin COMPUTER SCIENCE COGNITIVE PHYCHOLOGY FINE ARTS DESIGN HCI Computer Graphics Artificial Intelligence Computer Vision Human Memory Human Perception Sensory System Graphic Design Information Design Interaction Design Industrial Design
  7. 7. + Current MHFD VISUAL DESIGN - Interface Design - Navigation Design - Application Design - Website Design HCI Industrial Design Electrical Engineering Mechanical Engineering The Discipline of User Experience by Dan Saffer (2008)
  8. 8. + Gap HUMAN FACTOR USER EXPERIENCE DESIGN INTERACTION DESIGN VISUAL DESIGN HCI Sociology Cognitive Science Psychology The Discipline of User Experience by Dan Saffer (2008)
  9. 9. + HCI Today HCI Today Psychology Design Engineerin g Human Factor Semiotics Philosophy Ethnograph y/User Research Sociology Language Computer Science
  10. 10. UCLC/Ethnogr aphy • Study on user requirement • Functional requirement • Usability Cognitive GUI • Wireframe • Metaphors GUI • UCD Compliance Interface • Functional Aesthetics Interaction Design • Personas • Design Scenario • Interactive Prototypes Interaction Installation • Natural User Interface (NUI) • Gestural Interaction • Tangible Interaction • Brain Interaction Service Design • User Journey Map • Design Ecosystem • Total UX HCI Roadmap (5 years) 2011 2012 2013 2014 2015 • IVLS • EKMS • Mi-MZONE • MIMOS Website • iDOLA • MCPC • PDRM • Health • Transportation • SOCSO LIST OF CURRENT & POSSIBLE FUTURE PROJECTS (Touch Surfaces, Computer Vision Technique, Wiimote, Kinect, MoCap)
  11. 11. Interaction Design (IxD)  Designing interactive products to support people in their everyday lives . Creating user experience that enhance and extend the way people work, communicate and interact. 1 2 3  USER NEED  PERSONAS  SCENARIO  INTERACTIVE PROTOTYPE 4DISCOVER DEFINE DESIGN DELIVERY  INTERACTIVE INSTALLATION
  12. 12. Interaction Implementation  Interaction implementation consists of technical production, which includes both software development and physical development. It’ll targeted all possible current and future interaction approach. 1 2 3 4Gestural Interaction Tangible Interaction Natural User Interface Brain Interaction  Brain Computer Interface  Mind Machine Interface  Touch Surfaces  Computer Vision  MoCap  Kinect  Siri  WiiMote
  13. 13. Service Design (SD)  Service Design focuses on customer experience and the quality of service encountered as the key value for success 1 2 3  USER EXPERIENCE  ENVIRONMENT  THEMES  OPPORTUNITIES  TOUCH POINT  CONCEPTS  ENGAGEMENT  PROTOTYPING  VALIDATION 4DISCOVER DEFINE DESIGN DELIVERY  TANGIBLE & INTANGIBLE
  14. 14. + Interaction Design (IxD)  Designing interactive products to support people in their everyday lives.  Creating user experience that enhance and extend the way people work, communicate and interact.
  15. 15. + Interaction Design (IxD) HOW -  Understand user’s needs and goals  Designing tools for users to achieve those goals  Envisioning all states and transitions of the systems  Considering limitation of the user’s environment and technology
  16. 16. + Interaction Designers  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.
  17. 17. IxD History
  18. 18. IxD Trend 1980 - 2000
  19. 19. IxD Trend 2006 - 2011
  20. 20. IxD Trend 2012 -
  21. 21. IxD Process User needs User Requirement Insight Opportunities Personas Scenario User Journey Map Low-fi Prototypes DISCOVER DEFINE DEVELOP DELIVER
  22. 22. IxD Process
  23. 23. IxD Case Study
  24. 24. Potion
  25. 25. Potion
  26. 26. Potion
  27. 27. Potion
  28. 28. Potion
  29. 29. Potion
  30. 30. Potion
  31. 31. IxD Exploration 1 2 3 4 5 6 7 1 2 3
  32. 32. Gestural Interaction  Technologies /tools
  33. 33. Gestural Interaction A gesture is a motion of the body that contains information (fingers, hand, forearm )
  34. 34. + Gestural Interaction  TOUCH SURFACES  (Singer fingers)- http://vimeo.com/12010952  Interactive tables  Touch Wall @ Eartes  COMPUTER VISION  BES Interactive Video Wall - http://www.youtube.com/watch?v=ijrZQbSOONQ  Sketchsynth - http://vimeo.com/42053193  All Eyes On You - https://vimeo.com/33186969  Knee Deep - https://vimeo.com/8805152
  35. 35. + Gestural Interaction  Wii  Wii Drum - http://vimeo.com/2406224  KINECT  Yscope Medical Interface- http://www.youtube.com/watch?v=91F6zErnCrs  Control the Humanoid Robot - http://www.youtube.com/watch?v=w8BmgtMKFbY  Make the Line Dance - http://vimeo.com/21308228  LEAP MOTION - https://leapmotion.com/
  36. 36. + Gestural Interaction  MoCAP –  (Singer fingers)- http://vimeo.com/12010952  Interactive tables  Touch Wall @ Eartes  COMPUTER VISION –  BES Interactive Video Wall - http://www.youtube.com/watch?v=ijrZQbSOONQ  Sketchsynth - http://vimeo.com/42053193  All Eyes On You - https://vimeo.com/33186969  Knee Deep - https://vimeo.com/8805152
  37. 37. + Tangible Interaction  http://tangible.media.mit.edu/projects/  Sample Interaction :  Birds on Paper Tangible interfaces - give physical form to digital information, employing physical artifacts both as representations and controls for computational media
  38. 38. + Tangible Interaction  http://tangible.media.mit.edu/projects/  Sample Interaction :  Reactable - http://www.youtube.com/watch?v=Mgy1S8qymx0  Little Box - https://vimeo.com/45704273  Birds on Paper  Skube - http://vimeo.com/49343337
  39. 39. Brain Interface BCI (Brain Computer Interface) or MMI (Mind Machine Interface) Using brain signals to interact with computers.
  40. 40. Brain Interface Interaction  Brainwave beats - http://blog.makezine.com/2011/05/05/collins- labbrainwave-beats  Mind Control of Lego NXT Telepresence Robot - https://www.youtube.com/watch?v=nX741DZw8l4
  41. 41. Wearable Computing Wearable computing is the study or practice of inventing, designing, building, or using miniature body-borne computational and sensory devices.
  42. 42. Wearable Computing  Google Project Glass- https://www.youtube.com/watch?v=9c6W4CCU9M4  Kukkia- http://www.youtube.com/watch?v=R5fd6AwGMhg  See U in my Tee - http://wearable-technology.blogspot.pt/
  43. 43. Physical Computing Physical computing is a creative framework for understanding human beings' relationship to the digital world
  44. 44. Physical Computing  reaDIYmate- http://www.readiymate.com  Piano playing stairs - http://www.youtube.com/watch?v=DuNWkKBokts  Lego Mindstorms NXT  What the phonics - https://vimeo.com/45747333
  45. 45. Digital Public Display Public displays have been used to broad information from one active source to millions of passive receivers
  46. 46.  BBc Billboard- http://www.bbc.co.uk/blogs/theeditors/2007/06/  Honda Interactive Billboard - http://www.youtube.com/watch?v=OudaJGtwdQ8  Mini Billboard Interactive - http://www.nytimes.com/2007/01/29/business/media/29cooper.html Digital Public Display
  47. 47. Mobile Computing Mobile computing is human–computer interaction by which a computer is expected to be transported during normal usage.
  48. 48. Mobile Computing  GPS Drawing- http://www.gpsdrawing.com/gallery.html  Mobile mobile - http://vimeo.com/8118881
  49. 49. NOVICE QUALIFIED PROFICIENT EXPERT Design Research Handling basic research methods Conducted Interview with users/stakeholders Design Collaboration with stakeholders Handling Focus group/ Full scales ethnographic studies Modelling Understand basic modelling principles Creating Personas process Expert in creating Ecosystems/identify patterns Expert in mental model Scenarios Understands narrative Creating scenario process Design exploration User Experience Specialist Signature Interaction Sketching the Interaction Prototyping the interaction using digital format Prototyping the interaction using Flash/Html 5 Prototyping the interaction using native language IxD Skill Sets
  50. 50. 2013 2014 2015 2016 2017 Key Initiatives Basic knowledge in IxD Fundamental Principles Interaction Development Establish Reputation in IxD local industry Establish Reputation in IxD International industry Interaction Design Centre of Excellence Tools Improvement • Intel-based Macintosh G5 • Mobile kits Development • Mobile devices • Upgrade software and hardware • Upgrade software and hardware • Setting up of fully Interaction Design Lab Skill Development • Goal Directed Design • Training in Persona Development • Native Application Development (iOS and Android) • Training in Signature Interaction/ Design Simulation • Native Application Development (iOS and Android) • SDK Training • Native Application Development (iOS and Android) • Publish apps in Github • Interaction Design Specialist Internal Participation • Support all projects that need interaction design • Submission to local mobile conference/competitio n • Support all projects that need interaction design • Submission to local mobile conference/competition • Support all projects that need interaction design •Submission to local mobile conference/competitio n • Support all projects that need interaction design •Submission to local mobile conference/competition • Support all projects that need interaction design External Participation •Visit exhibition in software development agencies •Participation in external IxDA conferences •Participation in external IxDA conferences – paper presentation • Participation in external IxDA conferences – paper presentation •Participation in external IxDA conferences – Speakers Manpower •Total : 1 • Total : 3 • Total : 4 • Total : 5 • Total : 6 Domain Experts • 1 Interaction designer (Generators) • 1 Interaction Designers (Synthesizer) • 1 UX Planner •1 Front End Engineers (native apps) • 1 Senior Interaction Designers •1 UX Designer • 1 Interaction Specialist • 1 User Experience Specialist • 1 Principal Interaction Designers IxD Roadmap (5 years)
  51. 51. THANK YOU!

×