Pengenalan IMK-VRE-VRE coba imk dalam imk
Download as PPTX, PDF0 likes121 views
The document is a comprehensive overview of Human-Computer Interaction (HCI), focusing on the design principles of user interfaces (UI) and the relationship between users and computer systems. It outlines key concepts, interaction styles, design paradigms, and the importance of usability and user experience in achieving effective and efficient interfaces. The text also discusses various trends and frameworks in HCI development, highlighting the necessity of designing interfaces that meet users' needs while considering the characteristics of both humans and computers.
![Stand-alone application: computer program [input do something output]
Complex applications: Many interacting computer programs
Fundamental component:
IT applications take inputs (from sensors, humans)
Most IT applications provide outputs (to actuators, humans)
A “Good” design of the User-Computer
Interface is important !
Basics of IT applications](https://image.slidesharecdn.com/01pengenalanimk-vre-vre4-240604114154-4ee24929/85/Pengenalan-IMK-VRE-VRE-coba-imk-dalam-imk-13-320.jpg)
Pengenalan IMK-VRE-VRE coba imk dalam imk
- 1. Interaksi Manusia dan Komputer (IMK) Tim Dosen IMK KK SIDE 6/4/2024 1 Pengantar IMK
- 2. Setelah mengikuti mata kuliah ini mahasiswa dapat: “Merancang antarmuka perangkat lunak yang memenuhi prinsip User Interface (UI) yang benar” 2 6/4/2024 Tujuan Mata Kuliah IMK
- 3. Definisi IMK Pentingnya desain UI yang baik Perkembangan IMK Tren UI/UX Interaction Framework Interaction Style Karakteristik GUI dan WebUI 3 6/4/2024 Outline
- 4. 4 6/4/2024 Definisi Interaksi Manusia Komputer
- 5. Human-computer interaction is the study, planning, and design of how people and computers work together so that a person’s needs are satisfied in the most effective way (Galitz, 2007) 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 (Hewett et al, 1996) 5 6/4/2024 Definisi IMK/HCI
- 6. Pada saat melakukan design antarmuka kita perlu memperhatikan beberapa hal: – apa keinginan dan harapan orang terhadap produk yang dibangun, – apa batasan dan kemampuan fisik para penggunanya, – memperhatikan user experience dari pengguna produk, Pertimbangkan apa yang menurut pengguna baik dan buruk dari antarmuka yang dirancang, dan – Lakukan selalu test dan retest agar mendapatkan design antarmuka yang sesuai dengan kebutuhan pengguna. Perancang juga harus memperhatikan karakteristik dan batasan teknis dari perangkat keras dan perangkat lunak komputer 6 6/4/2024 HCI / IMK
- 7. 7 6/4/2024 Manusia Vs Komputer Manusia: • fleksibel & mampu beradaptasi, • dapat belajar bagaimana bekerja di lingkungan yang baru Komputer: • tidak fleksibel / tidak mampu beradaptasi, • input harus dalam format yang jelas & output harus didefinisikan sebelumnya, • tidak dapat belajar, • dapat didesain ulang
- 8. Paradigma interaksi adalah model atau pola interaksi manusia komputer yang mencakup semua aspek interaksi, termasuk fisik, virtual, persepsi, dan kognitif (Heim 2007). Paradigma interaksi diidentifikasikan oleh Heim(20017) : – Large Scale Computing – Personal computing – Networked computing – Mobile Computing – Collaborative Environment – Virtual Reality – Augmented Reality 8 6/4/2024 Paradigma Interaksi
- 9. Who, what, where, why, and how 5 W + H heuristic adalah prosedur yang dapat digunakan untuk mendefinisikan dan menganalisa paradigma interaksi yang ada dan ruang serta mengeksplorasi unsur-unsur dan objek dengan yang berinteraksi pengguna. Heuristik itu terdiri dari 3 komponen : – What/How : digunakan untuk memahami komponen antarmuka fisik dan virtual. – Where/When : Hal ini terkait dengan lingkungan fisik. terlihat perbedaan antara kantor, portabel, sistem dpt dipakai. – Who/Why : ini terlihat pada jenis tugas dan keahlian yang dibutuhkan. Petakan 5 W + H terhadap jenis paradigma interaksi menurut Heim 9 6/4/2024 5 W + H
- 10. 10 6/4/2024 Hubungan HCI/IMK - Interaction Design HCI/IMK merupakan disiplin ilmu yang dibutuhkan dalam merancang sebuah antarmuka sebuah produk dalam hal ini produk software Jenny Preece, Yvonne Rogers, Helen Sharp. 2002. Interaction Design_beyond Human- Computer –Interaction, J. Wiley & Sons
- 11. 11 6/4/2024 Pentingnya Desain UI yang Baik
- 12. Antarmuka/ user interface (UI) merupakan bagian dari komputer dan perangkat lunaknya yang dapat dilihat, didengar, disentuh, dan diajak bicara, baik secara langsung maupun dengan proses pemahaman tertentu. UI yang baik adalah UI yang tidak disadari, dan UI yang memungkinkan pengguna fokus pada informasi dan task tanpa perlu mengetahui mekanisme untuk menampilkan informasi dan melakukan task tersebut. Komponen utamanya: – Input – Output 12 6/4/2024 User Interface
- 13. Stand-alone application: computer program [input do something output] Complex applications: Many interacting computer programs Fundamental component: IT applications take inputs (from sensors, humans) Most IT applications provide outputs (to actuators, humans) A “Good” design of the User-Computer Interface is important ! Basics of IT applications
- 14. Banyak sistem dengan fungsionalitas yang baik tapi tidak efisien, membingungkan, dan tidak berguna karena desain UI yang buruk Antarmuka yang baik merupakan jendela untuk melihat kemampuan sistem serta jembatan bagi kemampuan perangkat lunak Desain yang buruk akan membingungkan, tidak efisien, bahkan menyebabkan frustasi 14 6/4/2024 Pentingnya Desain UI yang Baik
- 15. Usability goals – effective to use (effectiveness) – efficient to use (efficiency) – safe to use (safety) – have good utility (utility) – easy to learn (learnability) – easy to remember how to use (memorability) User Experience goals – Satisfying - Enjoyable – Fun - Entertaining – Helpful - Motivating – Aesthetically pleasing - Supportive of creativity – Rewarding - Emotionally fulfilling 15 6/4/2024 Desain UI yang Baik perlu memenuhi
- 16. 16 6/4/2024 Usability dan User Experience goals Jenny Preece, Yvonne Rogers, Helen Sharp. 2002. Interaction Design_beyond Human-Computer – Interaction, J. Wiley & Sons
- 18. 18 6/4/2024 Sejarah perkembangan IMK Sumber : https://www.timetoast.com/timeli nes/history-of-human-computer- interaction
- 19. 19 6/4/2024 Tren Interaksi Manusia Komputer
- 20. 20 6/4/2024 Smart Restaurant Table – https://www.youtube.com/watch?v=UZPwqImfBf0 – https://itrestaurant.net/table Amazing Interface & Holograms – https://www.youtube.com/watch?v=uaLWylmrpCI – https://collegeinfogeek.com/leap-gesture-computing/
- 21. 21 6/4/2024 Sumber : https://collegeinfogeek.com/leap-gesture-computing/ Sumber : https://itrestaurant.net/table
- 22. 22 6/4/2024 Sumber : http://sparrowkinteractiondesign.blogspot.co m/2015/04/cicret-bracelet-future-hci- technologies.html Sumber : https://www.canterbury.ac.nz/engineering/sc hools/csse/research/hci/
- 24. • Manusia berinteraksi dengan komputer tentunya sangat komplek dan tidak mudah. Interaction Framework 24 6/4/2024 Interaction Framework O output S U System User I Input
- 26. An interaction style is simply the method, or methods, by which the user and a computer system communicate with one another Type of Interaction Style : – Command line – Menu-Based Interface – Form Fill in – Direct Manipulation – Anthropomorphic/Metaphors – Web Navigation – 3D Environment – Zoomable interface – Natural Language 26 6/4/2024 Interaction Style
- 27. Command line : Merupakan interaction style paling awal dari teknologi computer Powerfull for Advanced user Complex Syntax “Low error tolerant” sehingga bisa menyebabkan user frustasi 27 6/4/2024 Interaction Style
- 28. Menu Selection Trend UI saat ini di berbagai macam Aplikasi. Utilize a person with much stronger Recognition. Membantu bagi infrequent user. Label Menu harus dimengerti dan memiliki arti yang jelas. 28 6/4/2024 Interaction Style
- 29. Form Fill in Sangat berguna untuk mengambil Informasi Membutuhkan typing skill yang tinggi Familiar dengan paper form di dunia nyata 29 6/4/2024 Interaction Style
- 30. Direct Manipulation – Memungkinkan User berinteraksi secara langsung bahkan memanipulasi objek yang tampil di layar 30 6/4/2024 Interaction Style
- 31. Anthropomorphic – Sebuah antarmuka anthropomorphic mencoba untuk berinteraksi dengan orang-orang dengan cara yang sama seperti orang-orang berinteraksi satu sama lain. Ini mencakup dialog bahasa alami lisan, gerakan tangan, ekspresi wajah dan gerakan mata 31 6/4/2024 Interaction Style
- 32. STYLE ADVANTAGES DISADVANTAGES Command Line Powerfull, Flexible, Appeals to expert user, Conserves screen space Commands must be memorized, requires big learning effort, intolerant of typing errors Menu Selection Utilizes recognition memory, reduces interaction complexity, aids decision making process, minimize typing, aids casual users Consumes screen space, may create complex menu hierarchies, may slow knowledgeable users Form Fill in Familiar format, simplifies information entry, requires minimal training Consumes screen space, requires carefull and efficient design, does not prevent typing errors Direct Manipulation Faster Learning, easier remembering, exploits visual/spatial cues, easy error recovery, provides context, immediate feedback Greater design complexity, window manipulation requirements, requires icon recognition, inefficient for touch typist, increased chance for screen clutter Anthropomorphic Natural Difficult to implement 32 6/4/2024 Interaction Style
- 33. 33 6/4/2024 Karakteristik GUI dan Web UI
- 34. 34 6/4/2024 Text Based VS GUI VS Web UI Text Based GUI Web UI
- 35. KARAKTERISTIK SISTEM DIRECT MANIPULATION Merupakan potret langsung dari kehidupan nyata Object dan action selalu terlihat Rapid and incremental Action with visible display of results Incremental action are easily reversible 35 6/4/2024 GUI VS WEB UI
- 36. STYLE ADVANTAGES DISADVANTAGES Direct Manipulation Faster Learning, easier remembering, exploits visual/spatial cues, easy error recovery, provides context, immediate feedback, more attractive, easily augmented with text display, low typing req. Greater design complexity, window manipulation requirements, requires icon recognition, inefficient for touch typist, increased chance for screen clutter, note always familiat, human comprehension limitation, may consume more screen space, hardware limitation. 36 6/4/2024 Graphics User Interface (GUI)
- 37. Sophisticated Visual Presentation Pick and click interaction A restricted set of interface solution Visualization Object orientation Extensive use of a person’s recognition memory Concurrent performance of function 37 6/4/2024 Characteristics Of GUI
- 38. Hal yang paling mendasar dalam Desain antarmuka Web itu adalah pada desain navigasi dan penyajian informasi. Dalam Web yang paling penting adalah Konten bukan Data Web Page VS Web Application More user Control 38 6/4/2024 Web User Interface
- 39. 39 6/4/2024 GUI VS WEB UI Cari tahu lebih banyak perbedaan GUI dan Web dari aspek lainnya, , misal dari aspek Content, Interaction, etc
- 40. Dimension Web Application Web Page In the middle of continuum The Nature of the relationship with the user Users must use the program, Users must identifiy, themselves or login to be able to do anything, The program must be reliable, and system failure will be immediately noticed Work is remembered from earlier session The system does not care who the user are, Login is required to simply give access to more information than would be received anonymously, System failure may not be noticed Minimal information such as a credit card number or address is remembered The Conversation style The style is formal The style is casual , informal and generic The style is polite but friendly The Nature of the interaction A Large amount of data is entered, complex task are being performed, data is being created, manipulated and permanently stored No data is entered or changed A small amount of data is entered and possibly stored, Milestones, checkpoints, endpoints are expected and included The Frequency of use It is used daily, it is used for long period (4-8 Hour), it is used to help resolve emergencies It is used only occasionally, it is used for only few minutes at a time, it is used to find out about something It is used periodically or episodically 40 6/4/2024 The merging of graphical business systems and the web
- 41. Dimension Web Application Web Page In the middle of continuum The Perceived distance of the provider It is viewed as being local in origin, it is viewed as being controlled locally by a data administrator, the response time is fast The origin is unknown, the origin is viewed as originating somewhere else in the country or overseas, the response time is slow The origin cannot ascertained or doesn’t matter Real Time interaction Data is fed in real time, the information is critical, a delay is life-threatening, long reponses exist but users remain Time is irrelevant, long response delay exist and cause users to exit Response is near real time How much help will users need? Intense training programs and experience are needed to use and become experts Every visit is one time session, minimizing or eliminating the need for help A minimum amount of experience, training or help material is needed The interaction style The navigation is controled, controls are complex, the syntax is obejct:Action, there is little or no reversibility, drag and drop manipulation is expected, exit requires users to log off The navigation is flexible and simple, controls are simple, no object selection is required, action are easily reversed using the back button, no drag-drop manipulation exist, single clicking links are used to navigate The navigation is flexible, simple data collection exist, user exits by closing web browser The Presentation style The Style is subdue and serious The style is colorfull, graphic, possibly animated, the control are obvious and self explanatory The style is cooler but attractive Follow standards Platform standard compliance exists, the style resembles or matches GUI standard Few Cross site standard are followed, only intra-site consistently exists Some common pattern exists 41 6/4/2024 The merging of graphical business systems and the web (Cont.)
- 42. Wilbert O. Galitz,2007,The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, Third Edition, Wiley Publishing https://www.youtube.com/watch?v=KtvwustmEDI https://www.youtube.com/watch?v=gsNQRcSoa9M 42 6/4/2024 Referensi