Profil dan Sejarah Mata Kuliah
Mata kuliah Interaksi Manusia dan Komputer merupakan materi fundamental di Informatika. Interaksi Manusia dan Komputer merupakan mata kuliah yang mengajarkan mahasiswa tentang bagaimana Interaksi Manusia Komputer serta perannya dalam mewujudkan perangkat lunak yang tepat dan bermanfaat bagi user-nya. Dalam mata kuliah ini juga disampaikan tentang tahap-tahap dalam proses perancangan antarmuka pengguna (User Interface/UI), pengujian usability serta tren-tren desain UI yang terkini. Pada perkuliahan ini akan membekali mahasiswa informatika berfikir analitis dan logis
Perkembangan Interaksi Manusia dan Komputer dimulai pertama kali pada tahun 1963 oleh Ivan Sutherland dari Massachusetts Institute of Technology (MIT). Penelitian ini memperkenalkan grafis dengan program Sketchpad-nya. Garis, lingkaran dan titik dapat ditarik pada layer menggunakan pena cahaya. Pada tahun 1970-an, pusat penelitian Xerox Palo Alto menciptakan sebuah mesin untuk mengetik. Antarmuka pada mesin ini masih menggunakan metode komunikasi manusia paling dasar. Mesin ini lebih dikenal dengan mouse yang kita kenal saat ini. Tahun 1984, Apple berhasil dengan sukses memasarkan Macintosh yang mengadaptasi penelitian yang telah dilakukan oleh Xerox.
Tahun 1985 Microsoft merilis Windows 1.0 dan Commodore memperkenalkan Amiga 100. Pada Tahun 1987 Apple memperkenalkan Macintosh II yang telah berwarna dan system X mulai tersedia. IBM berkontribusi merilis Sistem Aplikasi Arsitektur dan Presentation Manager untuk menggantikan system operasi DOS. Simulasi layar tiga dimensi pertama kali dikembangkan oleh NeXT pada tahun 1988 disebut dengan NeXTstep. Beberapa GUI berbasis UNIX, Open Look oleh AT&T, Sun Microsystems serta Motif untuk Open Software Foundation oleh DEC dan Hewleett-Packard pada tahun 1989 pertama kalinya dirilis.
Sepanjang tahun 1990-an hingga saat ini, perkembangan desain layar terlihat sangat pesat, dengan bermunculannya icon, image, animasi dan video.
Aturan umum Mata Kuliah Interaksi Manusia dan Komputer:
- Setiap topik mewakili pertemuan mingguan.
- Konten mata kuliah Interaksi Manusia dan Komputer ini terdiri dari materi pembelajaran (file presentasi, URL terkait topik, video pembelajaran) dan aktivitas pembelajaran (tugas, kuis, dan forum) yang disediakan kepada mahasiswa pada setiap topik.
- Mohon perhatikan waktu penting dari setiap materi dan aktivitas belajar yang ada pada setiap deskripsinya.
- Mahasiswa dianggap hadir jika membaca slide presentasi dan mengerjakan kuiz pada masing-masing topik.
Terima kasih.
Relevansi (Urgensi) Mata Kuliah
Seorang desainer/ developer perangkat lunak perlu memahami pentingnya bagaimana membuat user interface (UI) yang baik dan dapat memenuhi kebutuhan dan kepuasan pengguna. Pemahaman tersebut dapat dipelajari pada mata kuliah Interaksi Manusia Komputer ini karena pada mata kuliah ini akan dijelaskan bagaimana UI menjadi penting saat ini terkait dengan kebutuhan dan kepuasan pengguna pada perangkat lunak.
Program Larning Outcome (PLO)
PLO-10
Menerapkan prinsip rekayasa (engineering principles) untuk menyelesaikan masalah pengembangan perangkat lunak dengan mempertimbangkan faktor ekonomi, kemudahan penggunaan, keamanan, kinerja dan kehandalan;
PLO-11
Mengidentifikasi, memformulasi, menganalisis, dan menemukan sumber masalah rekayasa perangkat lunak; PLO-12
Mengusulkan solusi terbaik untuk menyelesaikan masalah rekayasa perangkat lunak; Course Larning Outcome (CLO)
CLO-1
Mahasiswa mampu menjelaskan konsep-konsep dalam tahapan proses perancangan UI dan prinsip desain UI
CLO-2
Mahasiswa mampu membuat perancangan UI sesuai prinsip desain UI yang baik CLO-3
Mahasiswa mampu membuat prototype aplikasi dan melakukan uji usability sederhana Pokok Bahasan
- Pokok bahasan 1 : Pengenalan Interaksi Manusia Komputer
- Pokok bahasan 2 : Overview Proses Desain UI
- Pokok bahasan 3 : Proses Desain Step 1 Memahami Pengguna
- Pokok bahasan 4 : Proses Desain Step 2 Memahami Fungsi Bisnis & Step 3 Memahami prinsip desain UI
- Pokok bahasan 5 : Proses Desain Step 4 Membangun menu sistem dan skema navigasi & Step 5 Memilih tipe windows yang tepat
- Pokok bahasan 6 : Proses Desain UI Step 6 Memilih perangkat interaksi yang tepat & Step 7 Memilih screen-based controls yang tepat
- Pokok bahasan 7 : Proses Desain UI Step 8 Menuliskan teks dan pesan dengan jelas & Step 9 Memberikan feedback, guidance, dan assistance dengan efektif
- Pokok bahasan 8 : Proses Desain UI Step 10 Menerapkan internasionalisasi dan aksesibilitas & Step 11&12 Menggunakan Graphics, Icons, Images & Warna
- Pokok bahasan 9 : Proses Desain UI Step 13 Pengorganisasian dan Penyusunan layout windows dan halaman & Step 14 Testing
- Pokok bahasan 10 : Desain UI berbasis web dan perangkat bergerak
- Pokok bahasan 11 : Desain Antamuka Game
Best Practice (Tips and Trick)
- Awali dengan berdoa
- Pelajari proses perancangan antarmuka
- Pelajari prinsip perancangan dasar antarmuka
- Pelajari materi pada lecture note, referensi terkait dan link external terkait untuk mendapatkan pemahaman yang lebih baik.
- Praktekkan setiap tahapan proses perancangan antarmuka dengan menerapkan prinsip dasar perancangan antarmuka
- Dokumentasikan setiap proses perancangan antarmuka
- Akhiri dengan berdoa
Sertifikasi
Sertifikasi yang berkorelasi dengan mata kuliah Interaksi Manusia Komputer:
- Nielson Norman Group
- Human Factors International
- The Team W/ Weinschenk Institute
- San Francisco State University Extension
- Udemy
- Design Lab
- Coursera
- GeneralAssemb.ly
- Interaction Design Foundation
- Bentley University's User Experience Center
- SMU
- Career Foundry
- University of California San Diego Extension
- University of Washington
- California State University Fullerton
- Nielson Norman Group
Referensi Mata Kuliah
Utama:
- Valverde R, 2011. Principles Of Human Computer Interaction, Lambert Academic Publishing.
- Galitz, Wilbert O. 2007. The Essential Guide to UI Design. Third Edition
Pendukung:
- Jenny Preece, Yvonne Rogers, Helen Sharp. 2002. Interaction Design_beyond Human-Computer –Interaction, J. Wiley & Sons
- Cooper,Alan, Robert Reimann, David Cronin. 2007. About Face 3. The Essential of Intraction Design, Wiley Publishing, Inc.
- Ballard, Barbara. 2007. Designing the Mobile User Experience. Little Springs Design, Inc., USA.
- Kalbach, James. 2007. Designing Web Navigation. O'Reilly.
- Heim, S. 2007, The Resonant Interface HCI Foundations for interaction design, Addison Wesley.
- Coninx, Karin., et al. 2006. Task Models and Diagrams for UI Design. Springer.
- Fox, Brent. 2005. Game Interface Design. Thompson Course Technology.
- Cohen, Michael H., et al. 2004. Voice UI Design. Addison Wesley.
- Welie, martijn van. 2001. Task-based UI Design. SIKS Disertation Series No. 2001-6.
Topic outline
- CII3B3 Interaksi Manusia dan Komputer
- Minggu 10 : Proses Desain UI Step 10 Menerapkan internasionalisasi dan aksesibilitas serta Step 11&12 Menggunakan Graphics, Icons, Images & Warna
Petunjuk Belajar Topik Proses Desain UI Step 10 Menerapkan internasionalisasi dan aksesibilitas serta Step 11&12 Menggunakan Graphics, Icons, Images & Warna
- Baca Slide materi 10 (pokok bahasan 8) Proses Desain UI Step 10,11 & 12.
- Mahasiswa dapat mempelajari video dan tautan eksternal pada topik ini
- Jika ada pertanyaan terkait topik ini silakan posting di Forum.
- Kerjakan Tugas 8: Analisis dan desain internasionalisasi dan aksesibilitas serta desain graphics, icons, image dan warna (AS.10) dan Kuis 08 (QZ.10)
Selamat Belajar dan Terima kasih
CAPAIAN PEMBELAJARAN
- Mampu menjelaskan konsep HCI, Metode perancangan UI, proses perancangan antarmuka perangkat lunak yang sesuai dengan prinsip User Interface (UI)
- Mampu merancang antarmuka perangkat lunak yang sesuai dengan prinsip User Interface (UI)
- Mampu menjelaskan konsep HCI, Metode perancangan UI, proses perancangan antarmuka perangkat lunak yang sesuai dengan prinsip User Interface (UI)
MATERI PEMBELAJARAN
Proses Desain UI Step 10 Menerapkan internasionalisasi dan aksesibilitas:
- Pertimbangan internasional
- Aksesibilitas
Proses Desain UI Step 11 & 12 Menggunakan Graphics, Icons, Images & Warna:- Icons & graphics
- Multimedia
- Penggunaan warna
- Masalah yang mungkin muncul dengan warna
- Warna dan penglihatan manusia
- Pemilihan warna
- Penggunaan warna yang harus dihindari
POKOK BAHASAN
TAUTAN EKSTERNAL
Video Pembelajaran
- Minggu 11 : Proses Desain UI Step 13 Pengorganisasian dan Penyusunan layout windows dan halaman & Step 14 Testing
Petunjuk Belajar Topik Proses Desain UI Step 13 Pengorganisasian dan Penyusunan layout windows dan halaman & Step 14 Testing
- Baca Slide materi 11 (pokok bahasan 09).
- Mahasiswa dapat mempelajari video dan tautan eksternal pada topik ini
- Jika ada pertanyaan terkait topik ini silakan posting di Forum.
- Kerjakan Design - Penyusunan Layout dan Pengujian (AS.11) dan Quiz 9 (QZ.09)
Selamat Belajar dan Terima kasih
- CAPAIAN PEMBELAJARAN
- Mampu menjelaskan proses pada step 13 (Pengorganisasian dan Penyusunan layout windows dan halaman) dan 14 (Testing usability) (Sub CLO 1)
- Mampu merancang Pengorganisasian dan Penyusunan layout windows dan halaman serta testing usability (Sub CLO 2)
MATERI PEMBELAJARAN
Proses Desain UI Step 13 Pengorganisasian dan Penyusunan Layout Windows
- Tujuan organisasi layout halaman
- Pertimbangan dalam menentukan layout halaman
- Contoh layout
Proses Desain UI Step 14 Pengujian:- Definisi pengujian usability
- Jenis pendekatan pengujian usability
- Tahapan dalam pengujian
- Contoh pengujian
- POKOK BAHASAN
- TAUTAN EKSTERNAL
Video Pembelajaran
- Topic 3
- Minggu 13 : Desain UI berbasis web dan perangkat bergerak
Petunjuk Belajar Topik Desain UI berbasis web dan perangkat bergerak
- Baca Slide materi 13 (pokok bahasan 10).
- Mahasiswa dapat mempelajari video dan tautan eksternal pada topik ini
- Jika ada pertanyaan terkait topik ini silakan posting di Forum.
- Kerjakan Tugas Review desain UI web dan mobile (AS.13) dan Quiz 10 (QZ.13)
Selamat Belajar dan Terima kasih
- CAPAIAN PEMBELAJARANMampu menjelaskan konsep -konsep pada desain UI khususnya yang berbasis web dan perangkat bergerak (Sub CLO 1)
MATERI PEMBELAJARAN
- Overview web dan perangkat bergerak
- Pemilihan teknologi aplikasi
- Prinsip desain web dan mobile
- Pola desain UI web dan mobile
- Responsive design
- Contoh desain UI web
- Contoh desain pada perangkat bergerak
- POKOK BAHASAN
- TAUTAN EKSTERNAL
- Video Pembelajaran
- Minggu 14 : Desain Antamuka Game
Petunjuk Belajar Topik Desain Antamuka Game
- Baca Slide materi 14 (pokok bahasan 11)berikut ini.
- Mahasiswa dapat mempelajari tautan eksternal pada topik ini
- Jika ada pertanyaan terkait topik ini silakan posting di Forum.
- Kerjakan Tugas Review desain UI game (AS.14) dan Quiz 14 (QZ.14)
Selamat Belajar dan Terima kasih
- CAPAIAN PEMBELAJARANMampu menjelaskan konsep-konsep desain UI khususnya game (Sub CLO 1)
MATERI PEMBELAJARAN
- Definisi game
- Jenis antarmuka game
- Perencanaan aliran menu
- Pembuatan storyboard
- Penentuan goal dan sub-mission
- Kebutuhan teknis dan trik
- Pembuatan mockup interaktif
- Definisi game
- POKOK BAHASAN
- TAUTAN EKSTERNAL