Interaksi Manusia

dan Komputer

Ryan Zulham Ramadhani, S.Kom, M.Kom

 Nama : Ryan Zulham Ramadhani

Kontrak kuliah
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
 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
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.
 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
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
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.
Bidang Studi yang Terkait dengan IMK

1. Teknik Informatika
2. Psikologi
3. Desain grafis & tipografi
4. Ergonomik
5. Antropologi
6. Linguistik
7. Sosiologi
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.
Contoh - contoh
Tampilan website atau
aplikasi
Kontras yang buruk
Kontras yang baik
Tidak responsive
Responsive
Navigasi menu yang buruk
Navigasi menu yang baik
Kunci utama IMK adalah daya guna
(Usability)

- Sistem harus mudah dioperasikan

- Sistem mudah dipelajari
- Memberi kenyamanan pada pengguna
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.
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
Tahapan perancangan IMK

- Membuat skenario
- Membuat wireframe
- Membuat Mockup
- Membuat Prototype
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,
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.
 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.
Contoh Wireframe tulis tangan
 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.
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.
Perbedaan Wireframe
dengan Mockup dan
Prototype
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
 Tugas Kelompok UTS dan UAS

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
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.
 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/