Interaksi manusia dan komputer (Human Computer Interaction – HCI) adalah suatu disiplin ilmu yang mengkaji komunikasi atau interaksi diantara pengguna dengan sistem komputer maupun sistem yang banyak digunakan dalam kehidupan sehari-hari, misalnya kendaraan, peralatan rumah tangga dan sebagainya.

1. Interaksi Manusia
dan Komputer
Ryan Zulham Ramadhani, S.Kom, M.Kom

2. Kontrak kuliah
Nama : Ryan Zulham Ramadhani
Tempat tanggal lahir : Jakarta, 13 April 1990
Alamat : Jl Reformasi Dalam Rt.05 Rw.02 Kelurahan pondok aren (Bintaro)
No Hp/WA : 081297780620
Email : ryanzulham@gmail.com / ryanzulham@ft-umt.ac.id
Pengalaman Kerja :
- Dosen Tetap - Universitas Muhammadiyah Tangerang (saat ini)
- BonApp - Product Owner (pekerjaan saat ini)
- Bizzy - Product Owner
- Lenna.ai - Associate Product Manager
- Lenna.ai - Senior Android Developer
- Lenna.ai - Android Developer
- NTT Data - Android Developer
- SML Technologies - Android Developer
- SML Technologies - Frontend Web Developer
- Malindo Feedmill - IT Support

3. Kontrak kuliah
- Niatkan diri kalian untuk menuntut ilmu untuk hidup yang lebih baik
- Jika berhalangan hadir, bisa hubungi saya menggunakan WA diawali
dengan mengucapkan salam, NIM, nama, dan kelas.
- Jangan berorientasi kepada hasil nilai akhir kalian, tapi berorientasi lah
kepada proses yang kalian lakukan.
- Jika ada kritik dan saran bisa langsung chat saya menggunakan WA
atau email ke alamat ryanzulham@ft-umt.ac.id

4. Pembentukan Tim Belajar
Hal - hal yang harus dilakukan per individu:
● Menganalisa dan Merancang project atau product sebuah desain antarmuka
web/aplikasi mobile interaktif yang temanya diberikan dari dosen terkait
dengan matakuliah.
● Membuat desain Wireframe, Mockup, dan Prototype dari rancangan yang
telah dibuat dalam bentuk figma dan masukan ke presentasi
output :
- presentasi : File PPT yang menggambarkan analisa dan perancangan yang
dibuat.
- prototype : Link prototype figma
● Mempresentasikan project yang sudah dibuat pada saat UAS atau sebelum
UAS.

5. Hasil akhir yang diharapkan
dengan mempelajari matakuliah ini
- Mahasiswa mampu memahami bagaimana pentingnya
perancangan antarmuka yang baik untuk memudahkan pengguna
berinteraksi dengan komputer.
- Memahami perbedaan desain wireframe, mockup, dan prototype

6. Apa itu IMK
(Interaksi Manusia dan Komputer) ?
Bidang ilmu pengetahuan yang mempelajari tentang
perancangan, evaluasi, dan mengimplementasikan sistem
komputer interaktif sehingga dapat digunakan oleh
manusia dengan mudah

7. Tujuan Interaksi Manusia dan Komputer
Memudahkan dalam pengoperasian komputer (user friendly )
dan mendapatkan berbagai umpan balik yang diperlukan
selama pengguna bekerja pada sebuah sistem komputer.

8. Bidang Studi yang Terkait dengan IMK
1. Teknik Informatika
2. Psikologi
3. Desain grafis & tipografi
4. Ergonomik
5. Antropologi
6. Linguistik
7. Sosiologi

9. Mengapa dibutuhkan Perancangan
Antarmuka yang Baik ?
Karena antarmuka merupakan
Jembatan antara sistem dan pengguna.Media yang
mengantarkan pengguna kepada fungsi sistem yang
dituju.Salah satu faktor penentu kondisi suatu organisasi
yang memanfaatkan sistem komputer.

10. Contoh - contoh
Tampilan website atau
aplikasi

13. Kontras yang buruk

14. Kontras yang baik

15. Tidak responsive

16. Responsive

17. Navigasi menu yang buruk

18. Navigasi menu yang baik

19. Kunci utama IMK adalah daya guna
(Usability)
- Sistem harus mudah dioperasikan
- Sistem mudah dipelajari
- Memberi kenyamanan pada pengguna

20. Hal Penting Dalam Perancangan Antarmuka
- Memahami faktor-faktor yang membuat manusia
menggunakan teknologi.
- Mengembangkan teknik-teknik yang memungkinkan
membangun sebuah sistem yang sesuai dengan
tujuan.
- Efisiensi dan efektifitas interaksi.

21. Perancangan Antarmuka Menurut
Karakteristik Manusia dan Komputer
1. User Compatibility -> karakteristik
2. Product Compatibility -> kesesuaian hasil
3. Task Compatibility -> penyelesaian tugas
4. Flow Control Compatibility-> urutan yang sesuai
5. Consistency -> keseragaman rancangan
6. Familiarity -> rancangan umum
7. Simplicity -> sederhana/ringkas
8. Direct Manipulation -> dapat disesuaikan
9. Control -> kendali kesalahan
10. WYSIWYG -> kesesuaian informasi
11. Flexibility alternative -> penyelesaian masalah
12. Responsiveness -> waktu pemberian tanggapan
13. Invisible Technology -> memiliki kelebihan dibanding rancangan lain
14. Robustness -> penggunaan bahasa yang sopan
15. Proteksi terhadap kemungkinan kesalahan (error avoidance)
16. Kemudahan Belajar & Kemudahan Penggunaann

22. Tahapan perancangan IMK
- Membuat skenario
- Membuat wireframe
- Membuat Mockup
- Membuat Prototype

23. Scenario
Scenario yang dimaksud adalah membuat sebuah alur
cerita dari sebuah website/app/game yang akan dibuat.
Alur cerita yang dibuat menjelaskan tentang :
- Apa saja yang bisa dilakukan user secara interaksi
dengan website/aplikasi/game (fitur/menu)..
- Proses perlakuan user pada setiap fitur yang ada,

24. Wireframe
Wireframe adalah kerangka atau coretan kasar untuk
penataan item-item pada halaman website sebelum
proses desain sesungguhnya dimulai.
Contoh item-item yang bisa ditata diantaranya baner,
header, content, footer, link, form input, dll.

25. Contoh Ilustrasi
Perusahaan A akan membuat sebuah website. Mereka berdiskusi apa saja
konten yang akan ditaruh di halaman awal.
Setelah memutuskan apa saja kontennya, mereka mulai membuat
gambaran dengan pena dan spidol kira kira konten utama yang berisi
produk yang sedang diskon yang ingin dipasarkan diletakan di mana dan
produk tanpa diskon diletakan dimana.

26. Contoh Wireframe tulis tangan

27. Merancang layout
Wireframe
Tahap awal yang perlu dilakukan saat merancang
layout untuk wireframing adalah penentuan jumlah
kolom suatu website.
Terdapat dua tipe layout dasar yaitu, dua kolom dan
tiga kolom sesuai dengan kebutuhan konten apa
saja yang ingin diberikan.
Tetapi dengan perkembangan tren UI Design, layout
yang dipakai tidak selalu terpaku pada dua tipe
layout tersebut.

28. Manfaat Wireframe
Dengan adanya wireframe, web developer sangatlah terbantu
pada pekerjaan mereka agar dalam proses pengembangan
dapat terstruktur dan terarah.
Bayangkan bila tidak menggunakan wireframe terlebih dahulu
mungkin saja dalam proses pengembangan sering terajadi
revisi/perbaikan yang sangat memperlambat pekerjaan.

29. Perbedaan Wireframe
dengan Mockup dan
Prototype

30. Menentukan sebuah Skenario project yang akan
dirancang dan dijadikan untuk tugas UAS kalian
Berikut pilihan tema scenario project yang bisa di pilih :
1. Marketplace (ex : Tokopedia, Shoppe, Bukalapak)
2. E-Commerce (ex : hijup.com, zalora)
3. Logistics (ex : SiCepat, AnterAja, JNE)
4. Education (ex : Zenius, RuangGuru, Udemy)
5. Healthcare (ex : Halodoc)
6. Tour and Travel (ex : Traveloka, Tiket.com, PegiPegi)
7. Movie Streaming (ex : Netflix, Disney+ Hotstar)
8. Fnb Business POS (ex : Mokapos, Majoo, SimPlus)
Ketua kelas atau perwakilan kelas membuat google sheet yang isinya list dari data
mahasiswa beserta tema scenario dan judul scenario yang di ambil. masukan google
sheet tersebut pada link berikut Tugas & Ujian

31. Objective Tugas :
● Menganalisa dan merancang :
Pilih salah satu
○ Fitur baru atau peningkatan fitur dari salah satu Produk digital berupa Website atau
aplikasi yang sudah ada saat ini baik di indonesia atau di luar negri
○ Produk digital baru berupa web atau aplikasi dengan tema yang sesuai keinginan kalian
● Hasil dari menganalisa adalah Product Requirement Document (output : file doc, link google doc)
● Hasil dari merancang adalah Wireframe, Mockup, Prototype (output : foto2 wireframing atau link
Figma untuk mockup dan prototype)
● Membuat Video presentasi dari hasil menganalisa dan merancang kalian
Tugas Kelompok UTS dan UAS

32. Berikut pilihan tema atau produk digital yang bisa kalian analisa dan
rancang :
● Marketplace (ex : Tokopedia, Shoppe, Bukalapak)
● Ride hailing (ex : GoJek, Grab, Maxim)
● E-Commerce (ex : hijup.com, zalora)
● Logistics (ex : SiCepat, AnterAja, JNE)
● Education (ex : Dicoding, BuildWithAngga, RuangGuru, Udemy)
● Healthcare (ex : Halodoc)
● Tour and Travel (ex : Traveloka, Tiket.com, PegiPegi)
● Movie Streaming (ex : Netflix, Disney+ Hotstar)
● Fnb Business POS (ex : Mokapos, Majoo, SimPlus, Qasir)
Notes : kalian bisa explore produk digital diluar dari list ini ya ga terpaku
sama contoh2 yang ada di sini.
Tugas Kelompok UTS dan UAS

33. Alat bantu pengerjaan dan artikel2 yang bisa
membantu
- www.canva.com
- www.mockflow.com
- https://www.codepolitan.com/konsep-wireframe-pada-website-5b3db818441cf#
- https://www.uplabs.com
- https://www.materialpalette.com/
- https://www.figma.com/
- https://www.niagahoster.co.id/blog/warna-efektif-desain-website/