Pedoman Praktikum

PEDOMAN PRAKTIKUM
MATA KULIAH:
INTERAKSI MANUSIA DAN KOMPUTER
Oleh:
Khairul Anwar Hafizd, M.Kom
Nina Mia Aristi, M.Kom
Ir. Agustian Noor, M.Kom
PROGRAM STUDI TEKNOLOGI INFORMASI

POLITEKNIK NEGERI TANAH LAUT
2023
ii
KATA PENGANTAR
In the name of Allah, the Most Gracious, the Most Merciful.

All praise is due to Allah, the Lord of all worlds, and peace and blessings be upon the Prophet
Muhammad, his family, and his companions.
Dengan rahmat dan hidayah-Nya, kami menyusun modul praktikum ini untuk mata kuliah
Interaksi Manusia dan Komputer. Interaksi manusia dengan komputer merupakan bagian yang
tak terpisahkan dari perkembangan teknologi di era modern ini. Mata kuliah ini membawa kita
ke dalam dunia yang mendalam dan penting, di mana manusia berinteraksi dengan teknologi
untuk mencapai tujuan bersama. Pemahaman yang baik tentang interaksi manusia dan
komputer menjadi kunci utama dalam merancang pengalaman pengguna yang efektif dan
memuaskan.
Pada modul praktikum ini, kami telah merancang serangkaian kegiatan yang dirancang
khusus untuk memperdalam pemahaman Anda tentang prinsip-prinsip dasar interaksi manusia
dan komputer. Setiap kegiatan didukung oleh studi kasus, latihan praktis, dan refleksi untuk
membantu Anda mengaitkan konsep teoritis dengan aplikasi praktis dalam desain antarmuka
pengguna.
Kami berharap bahwa melalui modul praktikum ini, Anda akan dapat:
1. Memahami prinsip-prinsip dasar Interaksi Manusia dan Komputer.
2. Mengenal berbagai metode dan alat dalam mendesain antarmuka pengguna.
3. Menerapkan pengetahuan Anda dalam merancang pengalaman pengguna yang efektif.
4. Mengembangkan keterampilan evaluasi antarmuka pengguna.
Kami mengundang Anda untuk terlibat aktif dalam setiap kegiatan praktikum, bertanya,
berdiskusi, dan berkolaborasi dengan rekan-rekan Anda. Interaksi antara manusia dan
komputer adalah bidang yang terus berkembang, dan pemahaman Anda akan menjadi aset
berharga dalam menghadapi tantangan masa depan.
Semoga modul ini dapat menjadi wahana pembelajaran yang bermanfaat, membimbing kita
untuk memanfaatkan teknologi dengan bijak. Semoga Allah SWT memberikan keberkahan
pada usaha kita dalam mengejar ilmu pengetahuan dan memandu kita menuju pemahaman
yang lebih baik tentang hubungan antara manusia dan komputer.
Akhir kata, kami mengucapkan terima kasih kepada semua pihak yang telah turut serta
dalam penyusunan modul ini. Semoga amal ibadah dan usaha kita diterima oleh Allah SWT.
Wassalamu'alaikum warahmatullahi wabarakatuh.

iii
DAFTAR ISI
KATA PENGANTAR .............................................................................................................. iii

DAFTAR ISI .............................................................................................................................iv
DAFTAR PRAKTIKUM ........................................................................................................... v
PRAKTIKUM PERTEMUAN 1................................................................................................ 1
PRAKTIKUM PERTEMUAN 2.............................................................................................. 29
PRAKTIKUM PERTEMUAN 3 DAN 4 ................................................................................. 40
PRAKTIKUM PERTEMUAN 7 DAN 8 ................................................................................. 62
PRAKTIKUM PERTEMUAN 10............................................................................................ 70
PRAKTIKUM PERTEMUAN 11 DAN 12 ............................................................................. 76
PRAKTIKUM PERTEMUAN 15 DAN 16 ........................................................................... 109
PRAKTIKUM PERTEMUAN 17.......................................................................................... 115
iv
DAFTAR PRAKTIKUM
Praktikum Pertemuan 1 : Overview Interaksi Manusia dan Komputer

Praktikum Pertemuan 2 : Piranti Interaktif
Praktikum Pertemuan 3 dan 4 : Usability
Praktikum Pertemuan 5 : User Centered Design (UCD)
Praktikum Pertemuan 6 : Analisa Tugas
Praktikum Pertemuan 7 dan 8 : Computer Support Cooperative Work (CSCW)
Praktikum Pertemuan 10 : Ubiquitous Computing
Praktikum Pertemuan 11 dan 12 : Desain Graphical User Interface (GUI)
Praktikum Pertemuan 13 : Desain Dialog
Praktikum Pertemuan 14 : Desain Audio
Praktikum Pertemuan 15 dan 16 : Help dan Dokumentasi
Praktikum Pertemuan 17 : Desain Mobile
v
PRAKTIKUM PERTEMUAN 1
OVERVIEW INTERAKSI MANUSIA DAN KOMPUTER
Pokok / Sub Bahasan : Overview

1. IMK
2. Ruang lingkup
3. Manusia
4. Komputer
5. Prinsip kerja sistem komputer
6. Interaksi
7. Keperluan IMK
8. Keyboard
9. Keterlibatan dalam IMK
Alokasi Waktu : 1 x 1 x 100 menit
Tempat : Laboratorium
1. Tujuan
Mahasiswa mampu menjelaskan aspek-aspek IMK dan mengetahui sifat dan batasan
humanis dalam berinteraksi dengan komputer.
2. Alat dan Bahan

A. Alat : PC / Laptop
B. Bahan : 1) Web Browser
2) PowerPoint
3. Teori Singkat
a. Interaksi Manusia dan Komputer
Interaksi manusia dan komputer merupakan komunikasi dua arah antara pengguna (user)
dengan sistem komputer yang saling mendukung untuk mencapai suatu tujuan tertentu.
Interaksi manusia dan komputer merupakan disiplin ilmu yang mempelajari desain,
evaluasi, implementasi dari sistem komputer interaktif untuk dipakai oleh manusia, beserta
studi tentang faktor-faktor utama dalam lingkungan interaksinya.” (ACM
SIGCHI,1992,p.6)
1
Ketika seseorang menawarkan perangkat lunak atau program aplikasi, istilah "ramah
pengguna" (user friendly) dan "WYSIWYG" (what you see is what you get) sering
digunakan (Santoso, 2010). Jika Anda baru pertama kali mendengar istilah di atas, Anda
mungkin bingung dan tidak mengerti artinya. Namun, tanpa Anda sadari, istilah-istilah di
atas akan masuk ke dalam kumpulan kosakata yang sebenarnya Anda miliki saat Anda lebih
sering menggunakan perangkat lunak atau program aplikasi.
Istilah "ramah pengguna" digunakan untuk merujuk pada fitur perangkat lunak atau
program aplikasi yang mudah digunakan. Para penjual program aplikasi sering
menggunakan istilah ini untuk memasarkan produk mereka, dan itu juga menjadi salah satu
kriteria utama bagi pengembang program. Namun, di sisi lain, pengguna sering meminta
agar program aplikasi yang mereka gunakan dapat membantu menyelesaikan tugas dengan
hasil yang diinginkan dan memberikan banyak kemudahan saat menggunakannya.
Input, Proses, dan Output adalah dasar sistem komputer. Pengguna memberikan masukan
kepada komputer, yang biasanya berupa angka atau deretan karakter. Komputer kemudian
mengubah data ini menjadi produk yang diinginkan pengguna. Ketika seseorang bekerja
dengan komputer, mereka secara sadar atau tidak sadar melakukan interaksi dengannya
dengan cara tertentu. Ketika pengguna memasukkan data, komputer menanggapinya dengan
menampilkan hasil ke pencetak atau layar. Ini dikenal sebagai interaksi.
Penggunaan frase "Input, Proses, Output" di atas menunjukkan bahwa pengguna
mungkin tidak mengetahui atau mungkin tidak ingin mengetahui proses apa yang
sebenarnya terjadi di dalam sistem komputer. Dengan kata lain, komputer dan pengguna
berinteraksi melalui masukan dan keluaran. Media interaksi diperlukan agar orang dan
komputer dapat berinteraksi satu sama lain. Interaksi ini akan membuat pengguna merasa
nyaman dengan sistem komputer mereka.
1) Latar belakang Interaksi Manusia dan Komputer
a) Pengguna meminta instruksi tentang pengoperasian komputer, bahkan jika mereka
masih awam saat menggunakan komputer mereka sendiri;
b) Pengguna memiliki rasa ingin tahu yang sangat besar, sehingga mereka ingin tahu
proses apa yang dilakukan komputer hingga dapat dioperasikan oleh manusia;
c) Pengguna ramah adalah istilah yang digunakan untuk komputer yang sering
digunakan dan mudah digunakan oleh orang awam, meskipun komputer sangat
membantu pekerjaan khusus; dan
d) Prinsip yang ada pada komputer yaitu harus mempunyai inputan lalu di proses dengan
melakukan pemrosesan tersebut maka akan menjadi output yang sempurna.
2
2) Antarmuka
Antarmuka pengguna, atau User Interface (UI), adalah kumpulan komponen sistem,
komunikasi, dan interaksi pengguna. Pengguna hanya memiliki akses ke produk melalui
antarmuka pengguna. Namun, antarmuka manusia dan komputer adalah media yang
memungkinkan orang berinteraksi dengan komputer dan memberikan perintah
kepadanya.
3) Teknologi Saat Ini
Komputer sekarang jauh lebih murah dan digunakan hampir di setiap aspek kehidupan.
Kita juga tahu bagaimana komputer dapat menyesuaikan diri dengan kebutuhan manusia
dalam pekerjaan.
4) Perubahan dan Perkembangan Teknologi
Perkembangan teknologi, terutama teknologi microelectronic dalam bentuk keping
silicon (IC), telah menyebabkan penurunan harga komputer yang signifikan. Teknologi
ini memungkinkan pengembangan komputer yang kuat dengan kapasitas penyimpan
yang besar namun dengan harga yang lebih rendah dengan kemampuan untuk
memperkecil ukuran rangkaian serta mengkemas banyak rangkaian dalam satu keping
IC tipis.
Perubahan teknologi yang disebutkan di atas telah memungkinkan penggunaan komputer
yang lebih luas. Komputer sekarang sudah menjadi bagian penting dari dunia bisnis dan
industri modern. Komputer juga digunakan untuk aplikasi rumah tangga. Komputer
harus dirancang dengan baik agar dapat digunakan secara luas.
Hal ini tidak berarti bahwa semua sistem harus dirancang untuk memenuhi kebutuhan
semua orang, namun komputer harus dirancang untuk memenuhi kebutuhan pengguna
tertentu.
5) Human Computer Interaction (HCI)
Pertengahan tahun 1980-an melihat penggunaan istilah Human Computer Interaction
(HCI) sebagai bidang studi baru. Istilah ini mengisyaratkan bahwa bidang studi ini akan
mempelajari hal-hal yang lebih luas daripada hanya perancangan antarmuka fisik. HCI
didefinisikan sebagai disiplin ilmu yang mempelajari perancangan, evaluasi, dan
implementasi sistem komputer interaktif untuk digunakan oleh manusia serta fenomena
yang terkait dengannya. Pada prinsipnya, interaksi manusia-sistem (HCI)
memungkinkan sistem untuk berinteraksi dengan pengguna dengan cara yang paling
ramah.
3
Dua bagian membentuk program aplikasi:
a) Bagian Antarmuka
Gambar 1.1. Antarmuka Login Sistem Informasi Akademik Politeknik Negeri Tanah Laut
b) Bagian Aplikasi
Gambar 1.2. Bagian aplikasi
4
Sebagai contoh, media antarmuka manusia dan komputer dibagi menjadi dua (2):
[1] Media Tekstual
Bentuk sederhana dialog atau komunikasi antara manusia dan komputer yang hanya
berisi teks dan kurang menarik disebut media textual.
Contoh: perintah “Printf” dalam Borland C++
Gambar 1.3. Contoh media tekstual

[2] Media Grapichal User Interface (GUI)
Bentuk dialog atau komunikasi antara manusia dan komputer yang berbentuk grafis
dan sangat atraktif adalah definisi media GUI.
Contoh antarmuka manusia dengan komputer yang berbentuk grafis menggunakan
pemrograman visual (Visual Basic, Visual Foxpro, Delphi dan lain-lain).
Gambar 1.4. Contoh media Grapichal User Interface (GUI)
5
b. Ruang lingkup
Ruang Lingkup Interaksi Manusia Komputer meliputi tiga (3) komponen yaitu, manusia,
dan komputer.
1) Manusia
Manusia adalah pengguna (user) yang menggunakan komputer.
Beberapa hal yang perlu diketahui dalam komponen manusia pada Interaksi Manusia dan
Komputer:
a) Psikologi Kognitif
Mempelajari bagaimana manusia berpikir, mengambil keputusan, dan memproses data.
Psikologi kognitif membantu dalam membangun antarmuka yang sesuai dengan
kelemahan dan pemahaman manusia tentang kognitif.
b) Psikologi Sosial
Meneliti bagaimana faktor sosial, norma, dan interaksi antarpersonal mempengaruhi
perilaku manusia. Ini relevan untuk desain antarmuka yang mempertimbangkan aspek
sosial dan normatif.
c) Antropologi dan Sosiologi
Mempelajari perbedaan budaya dan norma sosial yang dapat memengaruhi pilihan
pengguna dan interaksi mereka di berbagai konteks budaya.
d) Ergonomi dan Antropometri
Studi tentang cara manusia berinteraksi dengan alat dan teknologi berdasarkan fisik dan
anatomi tubuh mereka, yang membantu dalam desain antarmuka yang nyaman dan
efisien secara fisik.
2) Komputer
Merupakan suatu peralatan elektronik yang didalamnya meliputi hardware (perangkat
keras) serta software (perangkat lunak). Manusia serta komputer berinteraksi lewat masukan
serta keluaran melalui antarmuka (interface) yang berfokus pada perancangan serta evaluasi
antarmuka pemakai (user interface).
Beberapa hal yang perlu diketahui dalam komponen Komputer pada Interaksi Manusia dan
Komputer:
a) Arsitektur Komputer
Memahami dasar struktur dan fungsi komputer, seperti pemrosesan data, penyimpanan,
dan interaksi dengan perangkat keras.
6
b) Sistem Operasi
Mempelajari cara sistem operasi berinteraksi dengan pengguna dan bagaimana pengguna
berinteraksi dengannya. Pemrograman dan Desain Perangkat Lunak: Mempelajari teknik
desain dan pengembangan perangkat lunak untuk membuat antarmuka yang efisien dan
responsif.
c) Keamanan Komputer
Meneliti metode untuk melindungi sistem dan melibatkan pengguna dalam praktik
keamanan, seperti otentikasi dan enkripsi.
3) Interaksi
Interaksi pada Interaksi Manusia dan Komputer (IMK) merujuk pada cara manusia
berinteraksi dengan sistem komputer atau antarmuka yang telah dirancang. Interaksi ini
melibatkan pertukaran informasi antara manusia dan komputer, di mana pengguna
memberikan input dan menerima output dari sistem.
Beberapa hal yang perlu diketahui dalam komponen Interaksi pada Interaksi Manusia dan
Komputer:
a) Desain Antarmuka Pengguna (UI/UX)
Melibatkan pembuatan antarmuka yang mudah digunakan, estetis, dan efektif.
b) Desain Interaksi
Merancang cara pengguna berinteraksi dengan sistem, seperti navigasi, alur kerja, dan
elemen antarmuka.
c) Pengalaman Pengguna (UX)
Menjamin bahwa interaksi pengguna dengan sistem memiliki pengalaman yang positif
dan memuaskan.
d) Pengenalan Suara dan Pemrosesan Bahasa Alami
Penelitian tentang cara manusia berinteraksi dengan pemahaman bahasa alami dan
teknologi suara. Ruang lingkup ini menunjukkan pendekatan multidisipliner dalam
Interaksi Manusia dan Komputer (IMK), yang menggabungkan psikologi, sains
komputer, desain, dan teknologi informasi untuk membuat antarmuka yang sesuai
dengan pengguna. Untuk membuat pengalaman pengguna yang optimal dan
menjembatani antara kebutuhan manusia dan kemampuan komputer, sangat penting
untuk memahami semua elemen ini.
7
c. Manusia
Manusia merupakan pengguna yang memakai komputer (user), dimana setiap user
memiliki perbedaan karakteristik sesuai dengan kebutuhan dan kemampuan dalam
menggunakan komputer. Beberapa perbedaan karakteritik user pada manusia, yaitu:
1) Informasi diterima dan direspon melalui sejumlah saluran input dan output
a) Saluran Visual (visual channel)
Saluran visual pada manusia dalam konteks Interaksi Manusia dan Komputer mengacu
pada penggunaan sistem visual manusia untuk memproses informasi melalui
penglihatan. Saluran visual adalah salah satu cara utama di mana manusia berinteraksi
dengan informasi dalam lingkungan digital, termasuk antarmuka komputer. Beberapa
aspek yang terkait dengan saluran visual dalam IMK mencakup persepsi visual,
pemrosesan visual lebih cepat, grafika dan presentasi visual, ikon dan simbol visual,
desain antarmuka berbasis grafis, resolusi dan kedalaman warna, pandangan periferal
(pandangan luas di sekitar) dan foveal (pandangan tajam pada satu titik dan desain
responsif dan interaktif.
Pentingnya saluran visual dalam IMK menekankan pentingnya desain antarmuka yang
memahami dan mengoptimalkan penggunaan penglihatan manusia. Ini mencakup
pemilihan elemen visual yang sesuai, organisasi informasi yang mudah dipahami, dan
penggunaan grafika yang mendukung pemahaman cepat dan efisien. Desain visual yang
baik dapat meningkatkan kualitas pengalaman pengguna dan memfasilitasi interaksi
yang lebih efektif antara manusia dan komputer.
b) Saluran Pendengaran (auditory channel)
Dalam konteks interaksi manusia dan komputer (IMK), saluran pendengaran atau
auditory channel didefinisikan sebagai penggunaan pendengaran untuk menerima dan
memproses informasi. Ini termasuk interaksi dengan suara, bunyi, atau informasi audio.
Beberapa elemen yang terkait dengan saluran pendengaran dalam IMK seperti suara
dan pesan audio, pemrosesan informasi verbal, desain suara dan audio interaktif,
notifikasi dan peringatan audio, komunikasi suara dalam aplikasi dan permainan,
navigasi berbasis suara, pengenalan suara dan pemrosesan bahasa alami, desain
responsif dan interaktif, barriere aksesibilitas, dan emosi dalam suara.
Dengan memanfaatkan saluran pendengaran dengan baik, desain antarmuka dapat
meningkatkan aksesibilitas, memberikan pengalaman pengguna yang lebih kaya, dan
memungkinkan interaksi yang lebih responsif dan mudah dipahami. Keefektifan dan
kualitas Interaksi Manusia dan Komputer (IMK) dapat ditingkatkan dengan respons
8
yang baik terhadap perintah suara, umpan balik audio yang jelas, dan integrasi suara
kontekstual.
c) Saluran Peraba (haptic channel)
Dalam konteks interaksi manusia dan komputer (IMK), saluran peraba atau haptic
channel pada manusia mengacu pada penggunaan indera peraba atau sentuhan sebagai
cara untuk menerima dan memberikan informasi dalam interaksi dengan sistem
komputer. Ini termasuk penggunaan sensasi fisik dan taktile untuk menyampaikan
informasi atau merespons tindakan pengguna. Saluran peraba dalam IMK berkaitan
dengan tanggapan sentuhan, teknologi layar sentuh, umpan balik taktile, pengenalan
gerakan dan gaya sentuhan, permainan berbasis sentuhan, simulasi sentuhan realistis,
penggunaan wearable dan perangkat haptic, navigasi taktile, aksesibilitas untuk
penyandang disabilitas dan simulasi objek dan lingkungan virtual.
Pemanfaatan saluran peraba dalam IMK memungkinkan pengembang untuk
menciptakan antarmuka yang lebih kaya secara sensorik, memperluas cara pengguna
berinteraksi dengan teknologi, dan meningkatkan pengalaman pengguna melalui
penambahan elemen sentuhan dalam komunikasi antara manusia dan komputer.
d) Pergerakan (movement)
Pergerakan (movement) pada manusia dalam konteks Interaksi Manusia dan Komputer
(IMK) merujuk pada aktivitas atau gerakan fisik yang dilakukan oleh pengguna selama
interaksi mereka dengan sistem komputer atau antarmuka. Pergerakan ini dapat berupa
berbagai gerakan, seperti gerakan jari di layar sentuh atau gerakan tubuh dalam AR atau
VR. Pergerakan IMK termasuk beberapa hal berikut, seperti gerakan pada layar sentuh,
gerakan mouse, gestur atau gerakan tubuh, navigasi dan pemilihan, gerakan terkait
penunjuk, gerakan pada peralatan khusus, respon terhadap gerakan, desain responsif
terhadap gerakan, teknologi pengenalan gerakan, dan pergerakan untuk navigasi 3D.
Dalam dunia Interaksi Manusia dan Komputer (IMK), pergerakan sangat penting ketika
merancang antarmuka yang responsif, intuitif, dan sesuai dengan kebutuhan pengguna.
Pengembang dapat membuat antarmuka yang memudahkan pengguna untuk mencapai
tujuan mereka dengan cara yang efisien dan memuaskan dengan memiliki pemahaman
yang baik tentang bagaimana pengguna bergerak dan berinteraksi.
2) Informasi disimpan pada memory
a) Memory Sensor
Memahami bagaimana manusia menyimpan, mengambil, dan menggunakan
informasi dari interaksi sebelumnya dengan sistem komputer adalah bagian dari
9
"ingatan" dalam IMK. Memori ini dapat berupa memori jangka pendek (short-term
memory) atau memori jangka panjang. Menciptakan antarmuka yang mudah diingat
mempertimbangkan keterbatasan memori pengguna.
Di antara indera manusia yang termasuk penglihatan, pendengaran, peraba,
penciuman, dan pengecap, sensor-sensor ini sering digunakan dalam desain
antarmuka IMK untuk menghasilkan interaksi yang lebih kaya dan responsif.
b) Memory Jangka Pendek
Sensor memori jangka pendek, juga dikenal sebagai "memori kerja" atau "memori
jangka pendek", merujuk pada kapasitas memori manusia untuk sementara waktu. Ini
adalah jenis memori yang dapat menyimpan informasi secara bertahap dan memiliki
kapasitas terbatas dalam konteks Interaksi Manusia dan Komputer (IMK). Memory
sensor jangka pendek dalam IMK bertanggung jawab atas pemrosesan data selama
interaksi manusia dengan sistem komputer. Beberapa fungsi yang berkaitan dengan
memori sensor jangka pendek dalam IMK meliputi penyimpanan informasi
sementara, keterbatasan kapasitas, peran dalam tugas kognitif, pentingnya dalam
desain antarmuka, dan teknik memori jangka pendek.
Memory sensor jangka pendek sangat memengaruhi pemahaman dan desain interaksi
manusia dan komputer. Memahami cara memory sensor jangka pendek berfungsi
membantu dalam membuat antarmuka yang efisien, mudah diingat, dan sesuai dengan
kemampuan pemrosesan data manusia.
c) Memory Jangka Panjang
Memory Sensor Jangka Panjang pada manusia dalam konteks interaksi manusia dan
komputer merujuk pada kapasitas ingatan manusia untuk menyimpan informasi dalam
jangka waktu yang lebih lama. Ingatan ini disebut juga sebagai "memori jangka
panjang" (long-term memory). Dalam IMK, pemahaman tentang cara memory sensor
jangka panjang beroperasi penting untuk merancang antarmuka yang efektif dan
memastikan bahwa informasi yang diingat oleh pengguna dapat diakses kembali
dalam waktu yang lebih lama. Beberapa aspek yang relevan dengan memory sensor
jangka panjang dalam IMK meliputi penyimpanan informasi jangka lama, retensi
informasi, peran dalam pembelajaran dan pengalaman, ingatan untuk tugas masa
depan, peran dalam desain pengalaman pengguna, dan teknik untuk meningkatkan
ingatan jangka panjang.
Memahami fungsi dan fitur memori sensor jangka panjang membantu desainer
antarmuka membuat pengalaman pengguna yang lebih bermakna dan efektif. Ini juga
10
dapat membantu dalam menentukan pendekatan untuk mendukung pembelajaran
pengguna dan memastikan bahwa data yang diingat oleh pengguna dapat diakses
kembali dan digunakan dalam interaksi masa depan dengan sistem komputer.
3) Informasi diproses dan diaplikasikan
a) Penalaran
Dalam Interaksi Manusia dan Komputer (IMK), penalaran manusia sangat penting.
Penalaran manusia adalah kemampuan manusia untuk memproses informasi,
membuat keputusan, dan menyelesaikan masalah. Memahami hubungan penalaran
manusia dalam IMK dapat membantu desainer antarmuka membuat pengalaman
pengguna yang lebih mudah dipahami, efektif, dan memadai. Dalam konteks IMK,
beberapa aspek penalaran manusia seperti desain antarmuka yang logis, kognitif load
(beban kognitif), bentuk navigasi yang intuitif, presentasi informasi yang efektif,
umpan balik yang jelas, interaksi berbasis tujuan, adaptabilitas dan personalisasi dan
pertimbangan diversitas pengguna.
Tujuan dari kaitannya dengan penalaran manusia dengan IMK adalah untuk
menciptakan interaksi yang mudah dipahami, efisien, dan efektif antara manusia dan
komputer. Dengan memahami cara manusia berpikir dan merespon informasi,
desainer dapat merancang antarmuka yang mendukung proses penalaran manusia dan
meningkatkan pengalaman pengguna secara keseluruhan.
b) Pemecahan masalah
Kemampuan manusia untuk menemukan, menganalisis, dan menemukan solusi untuk
masalah atau tantangan dikenal sebagai pemecahan masalah. Hubungan antara
pemecahan masalah manusia dan Interaksi Manusia dan Komputer (IMK) sangat
penting karena desain antarmuka dan pengalaman pengguna dirancang untuk
membantu pemecahan masalah. Berikut adalah beberapa aspek hubungan antara IMK
dan pemecahan masalah manusia, seperti antarmuka intuitif, sistem bantuan dan
petunjuk, desain responsif dan efisien, desain berbasis tugas, interaksi yang
memfasilitasi kreativitas, penggunaan metode pemecahan masalah tradisional,
feedback yang efektif, adaptabilitas antarmuka, dan keterlibatan pengguna.
Desainer antarmuka dapat membuat pengalaman pengguna yang mendukung proses
pemecahan masalah dengan baik dan menciptakan lingkungan yang memungkinkan
pengguna mencapai tujuan mereka dengan efisien dan memuaskan dengan
mengetahui cara manusia memecahkan masalah.
11
c) Skill acquisition
Dalam konteks interaksi manusia dan komputer (IMK), keterampilan pengambilan
memiliki pengaruh yang signifikan terhadap cara seseorang belajar, menguasai, dan
menggunakan keterampilan yang berkaitan dengan teknologi dan antarmuka
komputer. Dalam IMK, berikut adalah beberapa hubungan dan elemen penting dari
pengembangan keterampilan, seperti penggunaan perangkat dan antarmuka,
pemahaman terhadap aplikasi dan software, interaksi dengan sistem operasi,
pemahaman terhadap konsep desain antarmuka pengguna (UI/UX), pemahaman
terhadap sistem interaksi, penggunaan perangkat input alternatif, keamanan dan etika
digital, dan pemahaman terhadap teknologi baru.
Skill acquisition dalam IMK sangat penting untuk membantu orang berinteraksi
dengan teknologi secara efektif, produktif, dan memuaskan. Memahami dan
menguasai keterampilan ini tidak hanya memengaruhi cara orang berinteraksi dengan
komputer tetapi juga menciptakan dasar untuk berpartisipasi secara efektif dalam
masyarakat teknologi.
d) Kesalahan
Kesalahan manusia dapat berdampak besar pada kinerja dan pengalaman pengguna
dalam Interaksi Manusia dan Komputer (IMK). Kesalahan manusia dapat berasal dari
berbagai sumber, seperti desain antarmuka, kompleksitas sistem, pemahaman
pengguna, dan kondisi lingkungan. Berikut ini adalah beberapa hubungan dan elemen
penting yang berkaitan dengan kesalahan manusia dalam IMK, seperti desain
antarmuka yang buruk, keterbatasan kognitif manusia, pengaruh lingkungan dan
konteks, komunikasi dan umpan balik yang kurang, pemahaman tugas yang buruk,
penggunaan sistem yang tidak intuitif, teknologi yang rumit, pemanfaatan aspek
psikologis, faktor keselamatan dan keamanan, dan pemahaman konteks penggunaan.
Dalam merancang antarmuka dan sistem interaksi manusia dan komputer, penting
untuk memahami faktor-faktor yang dapat menyebabkan kesalahan manusia. Ini
berarti bahwa desain harus dibuat untuk mengurangi kemungkinan kesalahan dan
menawarkan dukungan yang efektif untuk mendeteksi dan memperbaiki kesalahan.
d. Komputer
Komputer adalah suatu perangkat elektronik yang dapat melakukan berbagai tugas
pengolahan data, seperti menerima, menyimpan, dan memproses data, dan menghasilkan
informasi.
12
Umumnya, komputer memiliki tiga (3) komponen utama:
1) Hardware (Perangkat Keras)
Merupakan komponen fisik komputer yang dapat dilihat dan disentuh. Hardware komputer
termasuk Central Processing Unit (CPU), Random Access Memory (RAM), hard drive,
keyboard, mouse, monitor, dan perangkat keras lainnya.
2) Software (Perangkat Lunak)
Software terdiri dari sistem operasi (seperti Windows, macOS, atau Linux), aplikasi (seperti
Microsoft Word, Google Chrome, dll.), dan berbagai program yang digunakan komputer.
3) Manusia (Pengguna)
Merupakan bagian yang bertanggung jawab untuk menjalankan dan mengontrol komputer.
Pengguna berinteraksi dengan komputer melalui antarmuka pengguna, yang termasuk
perangkat seperti layar sentuh, keyboard, dan mouse ataupun perangkat lainnya.
Komponen lain yang ada pada komputer, yaitu:
1) Peralatan Input
Input Devices, juga dikenal sebagai "Peralatan Input", adalah perangkat yang digunakan
untuk memasukkan data atau informasi ke dalam komputer. Perangkat masukan seperti
keyboard, mouse, pena grafik, scanner, kamera, dan lainnya adalah contoh beberapa
peralatan input pada komputer.
Input devices atau peralatan input, pada komputer berfungsi sebagai media untuk
memasukkan data atau perintah ke dalam sistem komputer seperti memasukkan teks,
menggambar, dan memilih obyek pada layar.
Berikut adalah beberapa jenis peralatan input dan cara kerjanya:
a) Keyboard
[1] Cara Kerja Keyboard
Keyboard adalah perangkat input yang paling umum. Saat tombol ditekan, keyboard
menghasilkan sinyal elektrik atau kode karakter yang dikirimkan ke komputer
melalui kabel atau teknologi nirkabel.
[2] Proses Kerja Keyboard
Saat tombol ditekan, saklar di bawahnya tertutup, membentuk sirkuit listrik.
Mikroprosesor di dalam keyboard membaca sinyal ini dan mengubahnya menjadi
kode karakter atau sinyal yang dapat dipahami oleh komputer.
Informasi dikirimkan ke komputer melalui kabel atau nirkabel.
13
b) Mouse
[1] Cara Kerja Mouse
Mouse digunakan untuk mengontrol pergerakan kursor pada layar dan memberikan
perintah dengan mengklik tombol.
[2] Proses Kerja Mouse
Sensor optik atau bola di bagian bawah mouse mendeteksi gerakan dan
mengubahnya menjadi sinyal elektrik. Sinyal ini dikirim ke komputer, yang
kemudian menggerakkan kursor pada layar sesuai dengan gerakan mouse. Ketika
tombol mouse ditekan, sinyal tambahan dikirim ke komputer sebagai perintah.
c) Touchscreen
[1] Cara Kerja Touchscreen
Touchscreen memungkinkan pengguna berinteraksi langsung dengan layar,
memberikan kemampuan untuk menyentuh dan menggeser elemen pada layar.
[2] Proses Kerja Touchscreen
Layar sentuh dilengkapi dengan sensor-sensor yang mendeteksi sentuhan dan
lokasinya. Saat pengguna menyentuh layar, sensor mendeteksi posisi sentuhan dan
mengirimkan informasi ke komputer. Komputer kemudian menanggapi sentuhan
tersebut, melakukan tindakan yang sesuai berdasarkan lokasi sentuhan dan perintah
yang diinginkan.
d) Scanner
[1] Cara Kerja Scanner
Scanner digunakan untuk mengonversi gambar atau teks dari dokumen fisik menjadi
format digital yang dapat dimengerti oleh komputer.
[2] Proses Kerja Scanner
Dokumen ditempatkan di atas kaca pemindai atau dalam pengumpan dokumen
otomatis. Pemindai mengirimkan sinar laser atau cahaya di atas dokumen, dan sensor
mendeteksi refleksi cahaya dari permukaan dokumen. Informasi tentang warna,
intensitas cahaya, atau pemindaian gambar diubah menjadi data digital yang
disimpan dalam format file seperti JPEG atau PDF.
e) Mikrofon
[1] Cara Kerja Mikrofon
Mikrofon digunakan untuk merekam suara dan memasukkannya ke dalam komputer.
14
[2] Proses Kerja Mikrofon
Mikrofon mengubah gelombang suara menjadi sinyal listrik menggunakan elemen
piezoelektrik atau elemen elektrodinamis. Sinyal ini dikirim ke komputer, yang
kemudian dapat merekam, memproses, atau mentransmisikannya.
2) Peralatan Output
Output Devices juga dikenal sebagai Peralatan Output, adalah perangkat yang digunakan
untuk menampilkan atau menghasilkan hasil atau informasi dari komputer. Perangkat output
seperti printer, speaker, monitor, dan perangkat output lainnya. Berikut adalah beberapa
jenis peralatan output dan cara kerjanya:
a) Monitor (Layar)
[1] Cara Kerja Monitor (Layar)
Monitor digunakan untuk menampilkan informasi visual, seperti teks, gambar, dan
video.
[2] Proses Kerja Monitor (Layar)
Komputer menghasilkan sinyal grafis yang dikirimkan ke monitor melalui kabel atau
nirkabel. Monitor menerjemahkan sinyal tersebut menjadi gambar yang dapat dilihat
oleh mata manusia, dan menampilkannya pada layar.
b) Printer
[1] Cara Kerja Printer
Printer digunakan untuk mencetak dokumen atau gambar dari komputer ke media
kertas atau lainnya.
[2] Proses Kerja Printer
Komputer mengirimkan data yang akan dicetak ke printer. Printer menggunakan
berbagai metode, seperti cetak laser atau tinta, untuk menerapkan gambar atau teks
ke media cetak.
c) Speaker
[1] Cara Kerja Speaker
Speaker menghasilkan suara atau output audio dari komputer.
[2] Proses Kerja Speaker
Komputer mengirimkan sinyal suara ke speaker melalui kabel atau nirkabel. Speaker
mengubah sinyal tersebut menjadi gelombang suara yang didengar oleh telinga
manusia.
15
d) Proyektor
[1] Cara Kerja Proyektor
Proyektor digunakan untuk memproyeksikan gambar atau tampilan dari komputer
ke permukaan besar, seperti layar atau dinding.
[2] Proses Kerja Proyektor
Komputer mengirimkan sinyal visual ke proyektor melalui kabel atau nirkabel.
Proyektor memproyeksikan gambar tersebut dengan menggunakan lampu atau
teknologi lain ke permukaan yang lebih besar.
e) Plotter
[1] Cara Kerja Plotter
Plotter digunakan untuk menggambar gambar atau grafik yang kompleks dan besar.
[2] Proses Kerja Plotter
Komputer mengirimkan perintah dan data grafis ke plotter. Plotter menggunakan
pena atau alat gambar lainnya untuk menggambar gambar sesuai dengan instruksi
yang diberikan oleh komputer.
f) Headset atau Earphone
[1] Cara Kerja Headset atau Earphone
Headset atau earphone digunakan untuk mendengarkan suara atau audio secara
pribadi.
[2] Proses Kerja Headset atau Earphone
Komputer mengirimkan sinyal suara ke headset melalui kabel atau nirkabel. Speaker
kecil di dalam headset mengubah sinyal tersebut menjadi suara yang dapat didengar
oleh pengguna.
3) Memory
Memori komputer adalah perangkat keras di dalam sistem komputer yang dapat menyimpan
dan mengakses data atau informasi secara elektronik. Memori bertanggung jawab untuk
menyediakan tempat untuk menyimpan program, instruksi, dan data yang diperlukan oleh
komputer untuk beroperasi. Jenis memori komputer yang paling umum adalah Memory
Random Access (RAM) dan Memory Read-Only (ROM). Namun, ada juga jenis memori
lainnya, seperti memori cache, memori flash, dan lainnya.
Berikut adalah beberapa komponen memori komputer yang paling penting:
a) Random Access Memory (RAM)
RAM merupakan jenis memori volatil yang digunakan untuk menyimpan data dan
program yang sedang berjalan. Informasi di RAM dapat diakses secara acak, dan data
16
dihapus pada saat komputer dimatikan. RAM berperan untuk menyediakan ruang
penyimpanan sementara untuk aplikasi dan sistem operasi, memungkinkan akses cepat
dan pemrosesan data.
b) Read Only Memory (ROM)
ROM yaitu jenis memori non-volatil yang menyimpan instruksi dan data yang tidak
berubah selama operasi normal pada komputer. Kontennya biasanya diatur selama
pembuatan atau perakitan perangkat. ROM berperan untuk menyimpan instruksi awal
yang diperlukan untuk melakukan boot pada sistem operasi dan program BIOS (Basic
Input Output System).
4) Proses
Proses yang ada pada komputer dikenal juga sebagai processor, atau Central Processing
Unit (CPU). CPU atau prosesor adalah otak atau inti pengolah utama pada komputer yang
bertanggung jawab untuk memproses instruksi dan data. Prosesor menjalankan perintah-
perintah yang diberikan oleh program-program komputer dan melakukan operasi aritmatika
serta logika yang diperlukan.
a) Efek dari sistem yang berjalan cepat dan lambat
Efek dari sistem yang berjalan cepat atau lambat dapat terkait langsung dengan kinerja
processor (prosesor) karena processor adalah salah satu komponen kunci yang
menentukan seberapa cepat sistem dapat mengeksekusi tugas dan menjalankan aplikasi.
b) Keterbatasan kecepatan pemrosesan
Keterbatasan kecepatan pemrosesan merujuk pada batasan atau kendala yang
mempengaruhi sejauh mana prosesor dapat mengeksekusi instruksi dalam satu periode
waktu tertentu. Ini dapat terjadi karena batasan panas, keterbatasan arsitektur, atau
kendala fisik lainnya. Keterbatasan ini berdampak langsung pada kinerja processor. Jika
processor tidak dapat meningkatkan kecepatan pemrosesannya karena batasan tertentu,
maka kinerja keseluruhan sistem dapat terpengaruh.
c) Jaringan dan pengaruhnya terhadap kinerja sistem
Processor berperan dalam mengelola data yang dikirim dan diterima melalui jaringan.
Kemudian prosesor bertanggung jawab untuk mengelola protokol komunikasi dan
mentransfer data antara sistem dan jaringan. Kinerja processor dapat dipengaruhi oleh
seberapa efisien ia dapat menangani transfer data. Jika data harus diproses dengan cepat,
processor perlu bekerja secara efisien untuk menjaga throughput jaringan (ukuran
kuantitatif yang menunjukkan jumlah data atau informasi yang dapat ditransfer melalui
jaringan dalam suatu periode waktu tertentu).
17
e. Prinsip kerja sistem komputer
Dalam prinsip kerja sistem komputer, berbagai komponen perangkat keras dan perangkat
lunak harus bekerja sama untuk melakukan tugas-tugas pengolahan informasi. Prinsip kerja
sistem komputer dapat digambarkan pada gambar di bawah ini:
Gambar 1.5. Prinsip kerja sistem komputer

Penjelasan komponen yang ada pada prinsip kerja sistem komputer:
1) Input Device
Merupakan perangkat keras yang digunakan untuk memasukkan data atau instruksi ke
dalam sistem komputer. Ini memungkinkan pengguna berinteraksi dengan komputer dan
memberikan perintah atau informasi yang akan diproses oleh perangkat lunak.
2) Central Processing Unit (CPU)
Komponen utama sistem komputer adalah Central Processing Unit (CPU), juga disebut
prosesor, yang bertanggung jawab untuk melakukan pemrosesan data dan menjalankan
instruksi perangkat lunak. CPU berfungsi sebagai otak atau pusat pengendali dan
mengatur operasi dan menjalankan tugas-tugas yang diberikan kepadanya.
3) Control Unit
Salah satu bagian dari Central Processing Unit (CPU) sistem komputer adalah Unit
Kontrol, yang bertanggung jawab untuk mengatur dan mengkoordinasikan eksekusi
instruksi dari program yang dijalankan oleh komputer. Unit Kontrol juga bertanggung
jawab untuk mengambil, menerjemahkan, dan mengontrol aliran instruksi selama proses
eksekusi.
18
4) Arithmetic or Logical Unit (ALU)
Salah satu bagian penting dari Central Processing Unit (CPU) pada sistem komputer
adalah Arithmetic or Logical Unit (ALU). ALU bertanggung jawab untuk menjalankan
operasi aritmatika (matematika) dan operasi logika pada data yang diterima dari register
atau memori. ALU juga bertanggung jawab untuk melakukan manipulasi angka, logika,
dan perhitungan dasar yang diperlukan untuk pemrosesan data.
5) Memory Unit
Unit memori, juga dikenal sebagai unit memori, adalah komponen sistem komputer yang
digunakan untuk menyimpan dan mengakses data secara elektronik. Komputer
membutuhkan memori untuk menyimpan program, data, dan hasil pengolahan informasi.
Masing-masing dari berbagai jenis memori memiliki fungsi khusus dalam menjalankan
sistem komputer.
6) Output Device
Perangkat keras yang digunakan untuk menampilkan atau menyampaikan informasi atau
hasil pemrosesan data kepada pengguna atau sistem eksternal adalah output device dalam
sistem komputer. Perangkat ini mengubah data yang telah diproses oleh komputer
menjadi bentuk yang dapat dipahami oleh manusia atau perangkat lainnya. output device
memiliki peran penting untuk memberikan feedback dan hasil dari operasi komputer.
7) Secondary Storage
Secondary storage, atau penyimpanan sekunder, dalam sistem komputer merujuk pada
media penyimpanan yang digunakan untuk menyimpan data secara permanen, bahkan
ketika daya listrik dimatikan. Berbeda dengan primary storage seperti RAM yang
bersifat volatil (data hilang ketika listrik dimatikan), secondary storage menyediakan
kapasitas penyimpanan besar dan retensi data dalam jangka waktu yang lama. Secondary
storage digunakan untuk menyimpan program, file data, sistem operasi, dan informasi
lainnya yang tidak memerlukan akses cepat oleh CPU.
f. Interaksi
Interaksi terjadi pada konteks sosial dan organisasi mempengaruhi user dan
sistem. Manusia dan komputer berinteraksi lewat masukan dan keluaran melalui antarmuka
Antarmuka pemakai (User Interface atau UI) adalah segala sesuatu yang memungkinkan
pengguna berinteraksi dengan sistem komputer, termasuk elemen desain, tata letak, dan
interaksi yang memungkinkan pengguna berkomunikasi dengan perangkat keras dan perangkat
lunak. UI memiliki berbagai metode dan komponen yang memungkinkan pengguna
19
memasukkan perintah, menerima feedback, dan berinteraksi dengan aplikasi atau sistem secara
keseluruhan.
g. Keperluan Interaksi Manusia dan Komputer (IMK)

Interaksi manusia dan komputer (IMK) diperlukan karena membawa sejumlah manfaat dan
memainkan peran penting dalam memastikan efisiensi, kenyamanan, dan efektivitas
penggunaan teknologi. Melalui pengembangan (MIK) yang baik, diharapkan dapat membuat
teknologi menjadi alat yang kuat dan mudah digunakan yang membantu pengguna mencapai
tujuan tanpa menghadapi hambatan atau kebingungan yang tidak perlu. Berikut adalah
beberapa alasan mengapa IMK sangat penting:
1) Memudahkan Penggunaan
IMK memungkinkan desain sistem dan aplikasi yang mudah digunakan dengan
mempertimbangkan kebutuhan pengguna, mengurangi kompleksitas, dan membuat
navigasi mudah.
2) Meningkatkan Produktivitas
Interaksi Manusia dan Komputer yang efektif dapat meningkatkan produktivitas pengguna.
Antarmuka yang efisien memungkinkan penyelesaian tugas lebih cepat dan dengan lebih
sedikit kesalahan.
3) Peningkatan Pengalaman Pengguna
Tujuan IMK adalah untuk menciptakan pengalaman pengguna yang positif dan memuaskan,
di mana pengguna merasa nyaman dan senang menggunakan teknologi.
4) Keselamatan dan Keamanan
Interaksi manusia dan komputer berperan dalam memastikan keselamatan dan keamanan
pengguna. Sistem yang dirancang dengan baik dapat mengurangi risiko kesalahan dan
memastikan bahwa pengguna dapat menggunakan teknologi dengan aman.
5) Aksesibilitas
IMK membantu dalam menyediakan aksesibilitas bagi semua orang, termasuk mereka yang
mungkin memiliki kebutuhan khusus. Desain yang mempertimbangkan aksesibilitas
memastikan bahwa teknologi dapat diakses oleh sebanyak mungkin orang.
6) Mengurangi Frustrasi dan Kelelahan Pengguna
Dengan memahami cara pengguna berinteraksi dengan teknologi, IMK dapat mengurangi
tingkat frustrasi dan kelelahan yang mungkin dirasakan oleh pengguna. Desain yang intuitif
dan ramah pengguna dapat membantu menghindari kesalahan dan kebingungan.
20
7) Efisiensi Pengembangan
Memperhatikan aspek IMK sejak awal dalam pengembangan perangkat lunak atau sistem
dapat membantu mengidentifikasi masalah atau kebutuhan pengguna yang mungkin
muncul. Ini dapat mengurangi waktu dan biaya yang terkait dengan perbaikan atau
modifikasi setelah produk selesai.
8) Peningkatan Penerimaan Teknologi
Antarmuka pengguna yang baik dapat meningkatkan penerimaan teknologi oleh pengguna.
Jika pengguna menemukan teknologi mudah digunakan dan bermanfaat, mereka lebih
cenderung menerimanya dan menggunakan fitur-fitur yang disediakan.
9) Kemampuan Anak dan Orang Tua
IMK dapat membantu anak-anak dan orang tua untuk lebih mudah beradaptasi dengan
teknologi. Desain yang memperhitungkan berbagai tingkat pengalaman pengguna
membantu memastikan bahwa teknologi dapat diakses oleh semua kelompok usia.
h. Keyboard
Berikut merupakan berbagai macam jenis keyboard yang biasa digunakan pada komputer:
1) QWERTY Keyboard
Keyboard adalah perangkat input yang digunakan untuk memasukkan teks, data, dan
perintah ke dalam sistem komputer. Keyboard memiliki tata letak tombol khusus yang
mencakup huruf, angka, simbol, dan tombol lainnya. Pengguna dapat berinteraksi dengan
perangkat keras dan lunak dengan menghubungkan tombol-tombol ini ke komputer.
Tata letak tombol keyboard yang paling umum adalah QWERTY. Nama keyboard
"QWERTY" berasal dari enam huruf pertama yang terletak di bagian atas baris tombol
huruf. Christopher Latham Sholes pertama kali membuat tata letak ini untuk mesin ketik
pada tahun 1870. Sejak itu, tata letak ini telah menjadi standar untuk keyboard dan mesin
ketik komputer.
Karakteristik utama dari tata letak QWERTY melibatkan susunan huruf-huruf berikut di
bagian atas baris tombol huruf:
21
Gambar 1.6. QWERTY keyboard
Meskipun teknologi mesin ketik telah berkembang dan hambatan mekanis tidak lagi
menjadi masalah, tata letak QWERTY tetap menjadi standar karena telah menjadi familiar
dan banyak digunakan. Keuntungan utama tata letak QWERTY adalah meminimalkan
kemungkinan tabrakan antara palu mesin ketik pada mesin ketik mekanis awal, yang
membuat proses mengetik menjadi lebih lambat.
QWERTY adalah keyboard yang paling populer di seluruh dunia, termasuk di Amerika
Utara, Amerika Selatan, dan sebagian besar Eropa. Namun, ada keyboard dengan tata letak
alternatif, seperti AZERTY (digunakan di Prancis), QWERTZ (digunakan di Jerman), dan
Dvorak, yang dirancang ulang untuk meningkatkan kecepatan dan kenyamanan mengetik.
Meskipun ada beberapa tata letak keyboard, QWERTY tetap paling populer di banyak
tempat di seluruh dunia.
2) QWERTZ Keyboard
Salah satu tata letak tombol keyboard yang dikenal sebagai QWERTZ digunakan terutama
di beberapa negara di Eropa, terutama di Jerman dan sebagian besar negara lain yang
berbahasa Jerman. Nama "QWERTZ" berasal dari enam huruf pertama di bagian atas baris
tombol keyboard, yang menggantikan huruf "Y" yang berada di sebelah huruf "T" dalam
tata letak QWERTY.
22
Gambar 1.7. QWERTZ Keyboard
Beberapa perbedaan antara tata letak keyboard QWERTZ dan QWERTY termasuk
penempatan huruf khusus seperti "Z" dan "Y". Tata letak ini dibuat untuk memenuhi
persyaratan bahasa Jerman, di mana huruf "Z" dan "Y" digunakan lebih sering daripada
dalam bahasa Inggris.
Meskipun beberapa negara Eropa menggunakan QWERTZ, tata letak QWERTY masih
dominan di seluruh dunia, terutama di Amerika Utara dan sebagian besar dunia. Setiap tata
letak keyboard memiliki fitur unik dan biasanya didasarkan pada kebutuhan bahasa dan
preferensi lokal.
3) AZERTY Keyboard
Nama "AZERTY" berasal dari enam huruf pertama di bagian atas baris tombol keyboard,
menggantikan huruf "QWERTY" yang biasa digunakan di tata letak keyboard Inggris.
Keyboard AZERTY adalah salah satu jenis tata letak tombol keyboard yang paling umum
digunakan di Prancis dan beberapa negara berbahasa Prancis.
Gambar 1.8. AZERTY Keyboard
23
Tata letak AZERTY dan QWERTY berbeda dalam penempatan huruf-huruf tertentu, seperti
"A", "Z", "E", "R", "T", dan "Y." Tata letak ini dibuat untuk memenuhi kebutuhan bahasa
Prancis dan mengimbangi berapa banyak huruf tertentu yang digunakan dalam bahasa
tersebut.
Sementara AZERTY populer di Prancis dan beberapa wilayah lain yang berbahasa Prancis,
QWERTY masih menjadi standar di sebagian besar dunia. Setiap tata letak keyboard
memiliki fitur unik, dan keputusan antara QWERTY, AZERTY, atau tata letak lainnya
seringkali didasarkan pada preferensi lokal dan kebutuhan bahasa.
i. Keterlibatan dalam IMK

Siapa saja yang terlibat dalam Interaksi Manusia dan Komputer?
Gambar 1.9. Keterlibatan dalam Interaksi Manusia dan Komputer

Beberapa rumpun ilmu yang terlibat dan berkaitan erat dengan Interaksi Manusia dan
Komputer:
1) Computer Science dan Software Engineering
Membicarakan tentang komputer, khususnya dari sisi perangkat keras, tidak boleh terlepas
dari pembicaraan tentang teknik elektronika karena di bidang ini kita dapat mempelajari
banyak hal yang berkaitan dengan perangkat keras komputer. Selain sisi perangkat keras,
kita juga perlu belajar tentang sisi perangkat lunak agar kita dapat memanfaatkan hasil
rancangan dalam program aplikasi.
24
2) Computational Linguistics
Jika kita menggunakan komputer, seolah-olah kita sedang berbicara dengan komputer.
Pastinya kita membutuhkan alat komunikasi yang memadai untuk berbicara. Bahasa khusus
digunakan untuk berkomunikasi seperti bahasa grafis, bahasa alami, bahasa menu, atau
bahasa perinta. Studi bahasa dikenal sebagai linguistik.
3) Artifical Intelligence
Keterlibatan Artificial Intelligence (AI) dalam interaksi antara manusia dan komputer
semakin penting. Ada beberapa cara di mana kecerdasan buatan memengaruhi Interaksi
Manusia dan Komputer (IMK), diantaranya: Peningkatan pengalaman pengguna,
pengenalan suara dan pemahaman bahasa alami, rekomendasi dan prediksi, otomatisasi
tugas, deteksi emosi, interaksi cerdas, pengenalan gambar dan pengolahan citra,
keselamatan dan keamanan, pengolahan bahasa alami (NLP) dan adaptasi dan
pembelajaran.
Ketika AI terlibat dalam Interaksi Manusia dan Komputer (IMK), ini memungkinkan
antarmuka yang lebih pintar, responsif, dan adaptif. Akibatnya, interaksi manusia-komputer
menjadi lebih baik. Untuk menjamin keamanan dan kenyamanan pengguna, penting untuk
mempertimbangkan etika dan privasi saat menggunakan teknologi ini.
4) Cognitive Science
Pemahaman tentang bagaimana manusia memproses data, membuat keputusan, dan
berinteraksi dengan lingkungan sekitarnya sangat terkait dengan keterlibatan ilmu kognitif
(ilmu kognitif) dalam interaksi manusia dan komputer (IMK). Kognitif Sains membantu
IMK dalam beberapa cara, diantaranya: Pemahaman proses kognitif, model mental,
kesesuaian tugas dan antarmuka, perhatian dan pemisahan tugas, kesesuaian informasi,
feedback dan pengambilan keputusan, kesesuaian dengan keterbatasan kognitif, keterlibatan
emosi, ergonomi kognitif.
Keterlibatan cognitive science dalam IMK dapat dimastikan bahwa antarmuka tidak hanya
berfokus pada aspek teknis, tetapi juga mempertimbangkan kebutuhan dan keterbatasan
kognitif pada pengguna. Hal ini dapat meningkatkan keefektifan, keefisienan, dan kepuasan
pengguna dalam berinteraksi dengan sistem komputer.
5) Sociology
Berkaitan dengan penelitian tentang cara sistem manusia dan komputer mempengaruhi
struktur sosial. Misalnya, bagaimana komputerisasi mempengaruhi keberadaan seorang
pengguna di sebuah perusahaan.
25
6) Ergonomics
Bentuk fisik seperti meja dan kursi kerja, layar tampilan, bentuk papan ketik, posisi duduk,
pengaturan lampu, kebersihan tempat kerja, dan faktor lain yang sangat memengaruhi
kenyamanan tempat kerja disebut ergonomik.
7) Anthropology
Perspektif mendalam tentang cara kerja kelompok di mana masing-masing anggota
diharapkan memberikan kontribusi teknologi pengetahuan yang sesuai dengan bidang
mereka masing-masing.
8) Organizational Psychology
Psikologi Organisasi melihat bagaimana faktor organisasional mempengaruhi pengalaman
pengguna dan interaksi mereka dengan teknologi komputer. Berikut ini adalah beberapa hal
di mana psikologi organisasi berkaitan dengan Interaksi Manusia dan Komputer (IMK),
seperti: analisis tugas dan kebutuhan pengguna, perubahan organisasi dan transisi teknologi,
pelatihan dan pengembangan karyawan, ketidaksetaraan dan isolasi teknologi, resistensi
terhadap perubahan, efisiensi dan produktivitas, stres dan kesejahteraan karyawan, dan
keselarasan budaya dan nilai.
Keterlibatan Psikologi Organisasi dalam IMK memastikan bahwa desain dan implementasi
teknologi komputer mempertimbangkan aspek-aspek psikologis dan sosial yang
mempengaruhi interaksi manusia di dalam konteks organisasional. Hal ini membantu
menciptakan lingkungan kerja yang mendukung karyawan dan meningkatkan efektivitas
organisasi secara keseluruhan.
9) Mathematics
Keterlibatan Matematika dalam Interaksi Manusia dan Komputer (IMK) melibatkan
penerapan konsep matematika untuk merancang, menganalisis, dan meningkatkan sistem
antarmuka pengguna. Beberapa aspek keterlibatan Matematika dalam IMK meliputi:
pemodelan dan simulasi, teori graf, algoritma dan optimasi, analisis kinerja, teori informasi,
statistik dan analisis data, kriptografi dan keamanan, teori kontrol dan kecerdasan buatan,
geometri komputasional, dan teori sistem dinamis.
Keterlibatan Matematika dalam IMK memberikan landasan yang kuat untuk merancang
antarmuka yang efektif, efisien, dan memenuhi kebutuhan pengguna. Penerapan konsep-
konsep matematis ini membantu meningkatkan kualitas, konsistensi, dan performa sistem
Interaksi Manusia dan Komputer (IMK).
26
10) Cognitive Psychology
Keterlibatan Cognitive Psychology (Psikologi Kognitif) dalam Interaksi Manusia dan
Komputer (IMK) sangat penting karena psikologi kognitif memfokuskan diri pada
pemahaman tentang bagaimana manusia memproses informasi, membuat keputusan, dan
berinteraksi dengan lingkungan mereka. Berikut adalah beberapa aspek keterkaitan
Cognitive Psychology pada IMK: Model kognitif pengguna, perhatian dan pemrosesan
informasi, pengenalan pola dan pengenalan wajah, model mental dan representasi
pengetahuan, pemahaman bahasa dan semantik, kesalahan dan memori, desain untuk
keselarasan dengan kemampuan kognitif pengguna, feedback dan pelaporan, interaksi
natural dan intuitif dan kesadaran emosional dan respon.
Keterlibatan Psikologi Kognitif dalam IMK yaitu untuk memastikan bahwa desain
antarmuka tidak hanya mempertimbangkan aspek teknis, tetapi juga memahami dan
menghormati cara otak manusia berfungsi. Ini dapat meningkatkan pengalaman pengguna,
meningkatkan efisiensi, dan mengurangi frustrasi dalam interaksi manusia dengan
komputer.
11) Social Psychology
Keterlibatan Social Psychology (Psikologi Sosial) dalam Interaksi Manusia dan Komputer
(IMK) melibatkan pemahaman tentang bagaimana faktor sosial, seperti norma, budaya,
dan interaksi antar individu, mempengaruhi pengalaman pengguna dan desain antarmuka.
Berikut adalah beberapa hal di mana Social Psychology berkontribusi pada IMK: Pengaruh
sosial dan norma, kesadaran kolektif dan kolaborasi, penggunaan media sosial dan
interaksi online, reputasi dan kepercayaan, diversitas dan inklusivitas, pengaruh grup dan
teori sosial kelompok, teori persuasi, teori identitas sosial, teori konformitas dan kepatuhan
dan analisis respons sosial dan empati.
Keterlibatan Psikologi Sosial dalam IMK memastikan bahwa desain antarmuka tidak
hanya mempertimbangkan aspek individu, tetapi juga memahami dan merespons
kebutuhan, norma, dan dinamika sosial yang memengaruhi pengguna. Ini dapat membantu
menciptakan pengalaman yang lebih bersosial, inklusif, dan sesuai dengan nilai-nilai
sosial masyarakat.
27
4. Langkah Kerja
a. Tentukan dan pilihlah sebuah web yang ada di Kabupaten Tanaha Laut.
b. Lakukanlah pembahasan dalam kelompok dengan cara melakukan analisa konten, fitur
serta karakteristik apa saja yang terdapat dari web tersebut.
c. Presentasikan hasil pembahasan kelompok anda di depan kelas.
5. Rubrik Ketercapaian Praktikum

Tabel 1.1. Rubrik ketercapaian praktikum
No Kemampuan Metode Kriteria - Indikator
Akhir Pembelajaran
Pembelajaran
1 Mahasiswa mampu Ceramah, Ketepatan mahasiswa dalam:
menjelaskan aspek-aspek Problem based a. Menjelaskan berbagai penerapan
IMK dan mengetahui learning, latihan, IMK dalam setiap tahapan alur
sifat dan batasan humanis Penugasan hidup sistem atau produk.
dalam berinteraksi Terstruktur. b. Menjelaskan aspek humanis
dengan komputer. dalam inovasi.
6. Tugas Laporan
Berdasarkan langkah kerja yang telah dikerjakan sebelumnya, buatlah file laporan berbentuk
PDF.
Referensi:
– Becker, C. R. (2020). Learn Human-Computer Interaction. Birmingham: Packt Publishing
Ltd.
– Dingler, T., & Niforatos, E. (n.d.). Technology-Augmented Perception and Cognition.
Cham: Springer.
– Dix, A., Finlay, J., Abowd, G. D., & Beale, R. (2004). Human Computer Interaction. Essex:
Pearson Education Limited.
– Ritter, F. E., Baxter, G. D., & Churchill, E. F. (2014). Foundations for Designing User-
Centered Systems. London: Springer-Verlag.
28
PIRANTI INTERAKTIF
Pokok / Sub Bahasan : Piranti Interaktif:

1. Piranti Input / Output
2. Piranti Input
3. Piranti Masukan Keyboard
a. Keyboard QWERTY
b. Keyboard DVORA
c. Keyboard Alphabeti
d. Keyboard Klockenberg
e. Keyboard Penyingkatan Kata
4. Piranti Penunjuk dan Pengambil
a. Mouse
b. Joystick
c. Trackball
d. Pengambilan Gambar Terformat
e. Pengambilan Gambar Tidak Terformat
f. Gerakan
g. Layar Tampilan
1. Tujuan
Mahasiswa mampu menjelaskan dan menerapkan macam - macam piranti interaktif.
2. Alat dan Bahan

2) PowerPoint
29
3. Teori Singkat
a. Piranti Input / Output
Di dalam konteks IMK, suatu piranti memungkinkan komunikasi antara manusia dan
komputer melalui beberapa saluran fisik. Di dalam konteks IMK, suatu piranti memungkinkan
komunikasi antara manusia dan komputer melalui beberapa saluran fisik, yang dapat
diklasifikasikan sebagai:
1) Piranti masukan (ke komputer)
2) Piranti keluaran (dari komputer)
Piranti Input/Output Dikelompokkan menjadi 3 kelompok besar:
1) Piranti masukan tekstual
2) Piranti penunjuk dan pengambil (pointing and picking device)
3) Layar tampilan
Input berhubungan dengan proses perekaman dan pemasukan data ke dalam sistem
komputer dan memberikan perintah ke komputer. Pemilihan piranti input harus memberi
kontribusi positif terhadap penggunaan sistem. Secara umum piranti input yang tepat akan
memenuhi salah satu faktor berikut yaitu: Psikolog pengguna, usia pengguna tidak dibatasi,
familiar, dan pengalaman
b. Piranti Masukan Keyboard

Keyboard (papan) ketik merupaka piranti masukan tekstual. Tombol pada keyboard
dikelompokkan menjadi 4 bagian :
1) Tombol fungsi (function key)
2) Tombol Alphanumerik
3) Tombol Kontrol
4) Tombol Numerik
Beberapa klasifikasi jenis keyboard, yaitu:
1) Keyboard QWERTY
Ditemukan oleh Scholes. Glidden, dan Soule pada tahun 1878, dan kemudian menjadi
standar mesin ketik komersial pada tahun 1905.
30
Gambar 2.1. Keyboard QWERTY
Beberapa kelemahan atau ketakefisienan :
a) 48 % dari gerakan di antara kunci-kunci yang berurutan harus dilakukan dengan sebuah
tangan.
b) 32 % dilakukan pada home row, baris-baris yang lain, memerlukan usaha yang lebih
besar.
c) Beban pengetikkan tangan kiri sebesar 56 % dan
d) Jika kita mengandung huruf "a”, jari kelingking menanggung beban yang lebih berat.
2) Keyboard DVORAK
Dirancang pada tahun 1932. Sama seperti QWERTY tetapi tangan kanan dibebani le1bih
banyak perkerjaan. Dirancang agar 70 persen dari ketukan jatuh pada home row, sehingga
mengurangi pergerakan jari. Dari sejumlah percobaan, Dvorak mempunyai efisiensi 10%
– 15% lebih tinggi dari QWERTY sehingga mempunyai keuntungan utama dalam bentuk
mengurangi kelelahan jari-jemari karena adanya faktor ergonomic yang ditambahkan pada
tata letak ini. Kekurangan : kurang populer
Gambar 2.2. Keyboard DVORAK
31
3) Keyboard Alphabetic
Susunan tombol hurufnya berurutan seperti urutan alfabet. Dari hasil pengujian, tata letak
alfabet justru memperlambat kecepatan pengetikan. Biasanya ditemui pada mainan anak-
anak, sehingga anak-anak dapat belajar mengenal alfabet.
Gambar 2.3. Keyboard Alphabetic

4) Keyboard Klockenberg
Keyboard dengan tata letak Klockenberg dapat mengurangi beban otot pada jemari dan
pergelangan tangan, juga dirancang untuk mengurangi beban otot pada tangan dan bahu.
Gambar 2.4. Keyboard Klockenberg

5) Keyboard Penyingkatan Kata
Pada keyboard-keyboard sebelumnya sering disebut one key at a time keyboard, yaitu untuk
mengetikkan kata dengan 10 huruf memerlukan 10 ketukan. Dengan menggunakan chord
keyboard seseorang dapat menekan kombinasi tombol untuk menghasilkan suatu kata atau
suku kata. Terdapat 2 sistem:
32
a) Sistem Palantype
Gambar 2.5. Sistem Palantype

b) Sistem Stenotype
Gambar 2.6. Sistem Stenotype
c. Piranti Penunjuk dan Pengambil

Digunakan untuk menunjuk atau menempatkan kursor pada suatu posisi pada layar tampilan
dan untuk mengambil suatu item informasi untuk dipindah ke tempat lain. Secara ringkas,
peranti-peranti penuding mempunyai tugas interaktif seperti pemilihan, penempatan, orientasi,
jalur, kuantisasi, dan tekstual. Beberapa diantaranya adalah mouse, joystick, trackball,
digitizing tablet, light pen dan touch-sensitive panel.
1) Mouse
Pada saat operator menggerakkan mouse, informasi tentang posisi dari mouse akan
dimasukkan ke komputer (lewat sensor yang digerakan oleh track ball), yang selanjutnya
komputer akan memindah letak kursor pada posisi yang baru, atau melakukan aktifitas lain
sesuai dengan kondisi saat itu. Mouse tersedia dalam jenis mekanis dan optis. Mouse optik
terdiri atas dua buah LED (Light Emitting Diode) dan dua buah lensa (photo-transistor)
untuk mendeteksi gerakan.
33
Salah satu dari LED akan mengeluarkan cahaya berwarna merah (Untuk melakukan gerakan
horisontal) dan yang lain mengeluarkan cahaya inframerah (Untuk melakukan gerakan
vertikal). Selain itu terdapat mouse tak berkabel (cordless mouse) atau dengan nama lain
remote mouse, memerlukan kartu khusus yang harus dipasang pada slot di dalam
motherboard komputer yang digunakan.
Gambar 2.7. Mouse

2) Joystick
Joystick merupakan peranti penunjuk tak langsung. Gerakan kursor dikendalikan oleh
gerakan tuas (pada joystick absolut) atau dengan tekanan pada tuas (pada joystick terkendali
kecepatan atau joystick isometrik). Pada joystick biasanya terdapat tombol yang dapat
dipilih atau diasosiasikan dengan papan ketik.
Gambar 2.8. Joystick

3) Trackball
Prinsip kerjanya sama dengan mouse, akan tetapi pada trackball, badan trackball tetap diam,
tangan operatorlah yang menggerakan bola untuk menunjukkan perpindahan kursor
Gambar 2.9. trackball
34
4) Pengambilan Gambar Terformat
Dipergunakan untuk mengambil citra terformat (bentuk dan format hurufnya sudah
ditentukan). Kategori peranti ini yaitu:
a) Barcode Reader
Pola garis hitam putih.
Gambar 2.10. Barcode Reader
b) Magnetic Ink Character Recognation (MICR)

Digunakan untuk membaca karakter khusus yang dicetak dengan tinta khusus. Karakter
dicetak dengan tinta yang dimagnetisasi oleh peranti MICR sehingga dapat
diterjemahkan menjadi sinyal digital.
Gambar 2.11. Magnetic Ink Character Recognation (MICR)

c) Optical Mark Recognation (OMR)
Gambar 2.12. Optical Mark Recognation (OMR)
35
d) Optical Character Recognation (OCR)
Gambar 2.13. Optical Character Recognation (OCR)

e) Kode QR atau QR Code
Gambar 2.14. Kode QR atau QR Code

5) Pengambilan Gambar Tidak Terformat
Dipergunakan untuk mengambil citra yang belum memiliki format baku. Beberapa contoh
pada kategori peranti ini adalah:
a) Image scanner
Gambar 2.15. Imager Scanner

b) Kamera digital
Gambar 2.16. Kamera Digital
36
6) Gerakan
Peranti yang digunakan untuk memantau gerakan manusia yang banyak dimanfaatkan pada
virtual reality adalah:
a) Headset
Gambar 2.17. Headset

b) Glove
Gambar 2.18. Glove
d. Layar Tampilan
Pada dasarnya, semua layar tampilan dengan kemampuan grafis mempunyai tiga
komponen, yaitu:
1) Pengingat digital (frame buffer)
Citra yang akan ditampilkan ke layar disimpan sebagai matriks yang nilai elemennya
menunjukkan intensitas dari citra grafis yang akan ditampilkan.
2) Pengendali tampilan (display controller)
Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya untuk ditampilkan ke
layar penampil. Pengolah tampilan, mempunyai memori khusus yang disebut dengan
memori video. Semakin besar ukuran memori video, semakin tinggi resolusi yang dapat
37
dihasilkan oleh pengolah tampilan itu, dan juga semakin banyak wama yang dapat
dihasilkannya.
3) Pengolah tampilan
4. Langkah Kerja
a. Identifikasi piranti input atau output yang ada disekitar ruangan lokasi perkuliahan.
b. Identifikasi apakah piranti tersebut termasuk piranti input atau output, atau keduanya.
c. Jelaskan bagaimana piranti tersebut berfungsi sebagai piranti input atau output untuk
membantu interaksi manusia dan komputer.
d. Lengkapi dengan foto piranti tersebut masing-masing.
e. Kerjakan berkelompok.
f. Kumpulkan laporan dalam format pdf.
g. Tuliskan nama nama anggota kelompok pada cover.
h. 1 kelompok hanya mengumpulkan 1 laporan untuk mewakili anggota lainnya.
5. Rubrik Ketercapaian
Akhir Pembelajaran
Pembelajaran
1 Mahasiswa mampu Kuliah Tatap Ketepatan mahasiswa dalam:
menjelaskan dan Muka: a. Menjelaskan berbagai piranti
menerapkan macam - Ceramah, interaktif.
macam piranti interaktif. Problem based b. Menerapkan piranti interaktif
learning, latihan. dalam kehidupan sehari hari
6. Tugas Laporan
PDF.
38
Referensi:
– Becker, C. R. (2020). Learn Human-Computer Interaction. Birmingham: Packt Publishing
Ltd.
Cham: Springer.
– Dix, A., Finlay, J., Abowd, G. D., & Beale, R. (2004). Human Computer Interaction. Essex:
Pearson Education Limited.
39
PRAKTIKUM PERTEMUAN 3 DAN 4
USABILITY
Pokok / Sub Bahasan : Usability

1. Penentu keberhasilan sistem
2. Prinsip usability
a. Human Ability
b. Human Capabilities
c. Memori
d. Proses
e. Observations
f. Problem Solving
g. Komponen usability
h. Learnability
i. Flexibility
j. Robustness
3. Menguji usability
1. Tujuan
Mahasiswa mampu memahami prinsip dan komponen usability.
2. Alat dan Bahan

2) PowerPoint
3. Teori Singkat
a. Definisi Usability
Usability adalah kualitas dari interaksi, dalam hal ini yang diukur menggunakan suatu
parameter. Seperti waktu yang digunakan untuk melakukan suatu kegiatan, jumlah eror
40
atau kesalahan yang dibuat, dan waktu yang diperlukan bagi seseorang untuk dapat
menguasai penggunaan suatu aplikasi. (Benyon et al. 2005, p. 52).
Usability adalah kemampuan suatu hal (aplikasi, web, dll) untuk digunakan dengan
mudah dan efektif oleh sejumlah pengguna tertentu dengan diberikan pelatihan dan user
support, untuk melakukan tugas-tugas tertentu, dalam rentang waktu dan lingkungan
tertentu. (Shackel, 2009, p. 340)
Derajat kemampuan sebuah perangkat lunak untuk membantu penggunanya
menyelesaikan sebuah tugas.
b. Penentu Keberhasilan Sistem

1) Berguna (Useful)
Sistem yang berfungsi seperti yang diinginkan oleh penggunanya.
2) Dapat digunakan (Usable)
Sistem yang mudah dioperasikan
3) Digunakan (Used)
Sistem yang memotivasi penggunanya untuk menggunakannya, menarik,
menyenangkan, dan lain-lain.
c. Prinsip Usability
1) Human Ability
Human Ability adalah merupakan suatu kemampuan manusia untuk melakukan
sesuatu yang dimilikinya. Human ability terbagi menjadi dua (2):
a) Good Ability
[1] Kapasitas Long Term Memory (LTM) tidak terbatas.
[2] Durasi Long Term Memory (LTM) tidak terbatas dan complex.
[3] Kemampuan memahami yang tinggi.
[4] Mekanismes konsentrasi powerful dan pengenalan pola pikir powerful.
b) Bad Ability
[1] Kapasitas Short Term Memory (STM) terbatas
[2] Durasi Short Term Memory (STM) terbatas
[3] Akses yang tidak dapat diandalkan pada STM
[4] Proses yang cenderung salah
[5] Proses yang lambat
41
2) Human Capabilities
Human Capabilities adalah kemampuan yang dimiliki oleh manusia namun lebih
mengarah ke anggota penginderaan atau panca indra (Mata, Telinga, Peraba) pada
manusia itu sendiri. Setiap manusia pasti mempunyai batas maksimal dalam
melakukan penginderaan (sense).
Human Capabilities pada manusia dibagi menjadi tiga (3) bagian, yaitu:
a) Kemampuan Mata (Vision)
[1] Konsep penglihatan:
[a] Persepsi visual (ukuran dan jarak penglihatan).
[b] Keterbatasan visual (kemampuan melihat warna, kemampuan melihat
teks, ketajaman, pergerakan, dan sensitivitas).
Konsep penglihatan pada manusia terdiri dari dua tahap, yaitu:
[a] Penerimaan stimulus dari luar secara fisik.
[b] Pemrosesan serta interpretasi dari stimulus tersebut.
[2] Kemampuan penglihatan
[a] Sensitivitas.
[b] Ketajaman.
[c] Pergerakan.
[3] Warna
[a] Warna dikaitkan dengan hue, intensitas, dan saturation.
[b] Hue Panjang gelombang spektrum cahaya.
[c] Intensitas cahaya dari warna.
[d] Saturation jumlah atau kadar putih (whiteness) dalam warna.
[e] Masalah persepsi warna pada cones (sel pada selaput retina yang sensitif
terhadap warna) dan ganglion (simpul syaraf).
[f] 380 nm (biru)-770 nm (red).
[g] Radiasi dalam spektrum (Panjang gelombang cahaya) adalah 400-700 nm.
b) Kemampuan Telinga (Hearing)
Telinga adalah suatu panca indera yang digunakan untuk mendengar. Sistem yang
terdapat pada telinga yaitu system auditory yang memiliki kapasitas sangat besar
untuk mengumpulkan informasi lingkungan sekitar. Dapat mendengar objek apa
saja yang ada di sekitar dan memperkirakan kemana objek tersebut akan berpindah.
[1] Mendengar pitch (frekuensi suara).
[2] Mendengar loudness (amplitude suara).
42
[3] Mendengar timbre (tipe suara).
Pemrosesan suara pada telinga manusia, suara memiliki beberapa karakteristik, yaitu:
[a] Pitch: frekuensi suara (20 – 20.000 HZ).
[b] Loudness: amplitude suara (30 – 100 dB).
[c] Timbre: tipe atau jenis suara.
[d] Sistem sudatory melakukan filtering suara kita mengabaikan suara background
dan berkonsentrasi pada informasi yang penting.
c) Kemampuan Meraba (Touching)
Peraba adalah suatu panca Indera yang berfungsi untuk melakukan sentuhan.
Manusia menerima stimuli melalui kulit. Kulit memiliki tiga jenis sensor penerima
(sensory receptor), yaitu:
[a] Thermocpetor: merespon panas atau dingin.
[b] Nociceptor: merespon pada tekanan yang intens atau rasa sakit.
[c] Mechanoceptor: merespon pada tekanan lembut peraba.
3) Memori
Memori adalah sebuah wadah atau tempat untuk menyimpan data dan informasi.
Dimana memori juga dapat di gunakan untuk menyimpan pengetahuan procedural
dan pengetahuan factual. Memori dibagi menjadi 4 tipe, yaitu:
[a] Perceptual Buffer (Memori Sensor)
Memiliki kapasitas yang terbatas dan informasi yang dimasukan melalui Indera
tidak semua dapat diproses.
[b] Short Term Memory (STM)
Dapat diakses dengan cepat dan mudah, namun berkurang secara cepat pula.
Memori menyimpan informasi yang kita butuhkan dalam waktu yang singkat atau
sementara pada saat kita sedang melakukan suatu pekerjaan.
[c] Intermediate
Sebagai wadah untuk menyimpan ke Long Term Memory (LTM).
[d] Long Term Memory (LTM)
Memori Semantik: memori mengenai kata, konsep, peraturan, ide-ide abstrak,
skill, dll
Memori Episodik: menyimpan kejadian dan pengalaman dalam bentuk serial
menurut waktu.
Aktivitas Pemrosesan Memori Jangka Panjang:
[1] Menyimpan atau mengingat informasi.
43
[2] Menghilangkan atau melupakan informasi.
[3] Memanggil kembali informasi.
[4] Tersimpan karena pengulangan (rehearsal).
[5] Proses melupakan informasi: decay → karena sudah lama berada di LTM
sehingga lambat laun akan terlupakan + interference → karena adanya
informasi baru yang lama terlupakan.
[6] Proses memanggil kembali informasi: recall → memanggil kembali secara
langsung informasi + recognition → presentasi sejumlah pengetahuan
(knowledge) yang terkait sebagai petunjuk.
4) Proses
Proses informasi terbagi menjadi tiga (3) sistem utama , yaitu:
a) Perseptual
Yaitu proses pengenalan individu terhadap lingkungannya, atau kemampuan
intelek untuk mencarikanmakna dari data yang diterima oleh berbagai indra.
[1] Menangani sensor dari luar.
[2] Sebagai buffer untuk menampung masukan yang diterima dari indra manusia.
[3] Diproses untuk di teruskan ke otak (memory).
b) Kognitif
Adalah kepercayaan tentang sesuatu yang didapatkan dari proses berpikir tentang
sesuatu yang di dapatkan dari proses berpikir tentang seseorang atau sesuatu.
Proses yang dilakukan adalah memperoleh pengetahuan dan memanipulasi
pengetahuan melalui aktivitas mengingat, menganalisis, memahami, menilai,
menalar, membayangkan, dan berbahasa.
c) Sistem Motor
Mengontrol aksi atau respon (pergerakan, kecepatan, kekuatan).
5) Observations
Pengamatan (Observations) adalah aktivitas yang dilakukan makhluk cerdas, terhadap
suatu proses atau objek dengan maksud merasakan dan kemudian memahami
pengetahuan dari sebuah fenomena berdasarkan pengetahuan dan gagasan yang sudah
diketahui sebelumnya.
Beberapa hal yang perlu diperhatikan dalam melakukan pengamatan (Observations):
a) Orang lebih fokus untuk menyelesaikan masalah, dan tidak untuk belajar
menggunakan suatu sistem secara efektif.
b) Orang menggunakan perbandingan jika tidak ada penyelesaian.
44
c) Orang lebih kepada heuristic daripada algorithmic.
d) Lebih mencoba coba-coba daripada pemikiran matang.
e) Orang lebih memilih sub-strategi untuk masalah yang tidak terlalu penting.
f) Orang belajar strategi lebih baik dengan latihan.
6) Problem Solving
Penalaran (Reasoning) adalah proses pengambilan kesimpulan mengenai sesuatu atau
hal baru dengan pengetahuan yang dimiliki oleh manusia. Setelah penyimpanan di
LTM, kemudian diaplikasikan Penalaran (Reasoning), proses pengambilan
kesimpulan mengenai sesuatu atau hal baru dengan pengetahuan yang dimiliki oleh
manusia.
Reasoning terdiri dari:
a) Deduktif
Adalah penalaran yang berdasarkan pada pengetahuan sebelumnya yang bersifat
umum serta menyimpulkan pengetahuan baru yang bersifat khusus.
b) Induktif
Dari hal yang spesifik (khusus) ke arah yang lebih umum.
c) Abduktif
Penalaran dari sebuah fakta ke aksi atau kondisi yang mengakibatkan fakta tersebut
terjadi.
d. Komponen Usability
Agar dapat menciptakan sistem yang mudah dipelajari dan mudah untuk digunakan,
terdapat beberapa komponen yang menentukan usability suatu sistem, yaitu:
1) Learnability
Merujuk kepada kualitas sistem apakah mudah untuk dipelajari dan digunakan.
Learnability terbagi menjadi lima (5) bagian, yaitu:
a) Predictability
Pengguna mampu memperkirakan hasil dari sebuah tindakan di dalam sistem.
b) Synthesizability
Pengguna dapat melihat hasil yang terjadi atau tanda sedang terjadinya suatu proses
sesegera mungkin.
c) Familiarity
Memiliki kemiripan dalam desain sitem dengan aplikasi sejenis ataupun alat
sejenis yang sebelumnya telah dianggap populer.
45
d) Generalizability
Membuat desain operasi sistem yang juga berlaku sama di aplikasi lain yang sejenis
e) Consistency
Konsisten dalam penggunaan berbagai istilah maupun ukuran.
2) Flexibility
Sistem dinilai fleksibel jika user dapat mengoperasikan sistem dengan berbagai cara
atau tidak kaku. Sebuah sistem dianggap memenuhi standar fleksibilitas jika
memenuhi konsep berikut:
a) Dialogue initiative
User memiliki kebebasan dalam sebuah kotak dialog.
b) Multi-Threading
User dapat menjalankan aplikasi lain ataupun proses lain saat sebuah proses atau
sistem sedang dijalankan.
c) Task Migrability
Kemampuan untuk melakukan migrasi, baik berupa data ataupun hasil proses ke
aplikasi lain.
d) Substitutivity
Sebuah perintah dapat diganti dengan padanan lain.
e) Costumizability
Desain dapat dimodifikasi oleh pengguna secara adaptif atau sesuai dengan tujuan
utama masing-masing.
3) Robustness
Diartikan sebagai kehandalan sebuah sistem dalam mencapai tujuan khususnya dari
sudut pandang pengguna Hal ini bisa diukur dari tingkat dukungan yang disediakan
sistem kepada user.
a) Observability
User bisa melakukan observasi pendahuluan sebelum benar-benar melakukan
proses yang sesungguhnya.
b) Recoverability
Kemampuan koreksi dari sistem jika pengguna melakukan kesalahan.
c) Responsiveness
Sebuah sistem yang responsive berarti mampu menerima tindakan user dengan
stabil tanpa ada kendala yang timbul akibat komunikasi dari user.
46
d) Task conformance
Kenyamanan user dalam melakukan pekerjaan yang terdapat dalam sistem yang
dianggap handal.
Kriteria Usability lainnya adalah:
1) Efficiency
Jika user pernah menggunakan sistem, maka kecepatan user dalam menggunakan
sistem dapat meningkat.
2) Memorability
Seberapa mudah user dapat mengingat fungsi setelah menggunakan sistem dalam
kurun waktu tertentu.
3) Errors
Saat menggunakan sistem, seberapa sering user melakukan kesalahan?
Seberat apa kesalahan tersebut?
Dan bagaimana user dapat menanggulangi akibat dari kesalahan tersebut?
4) Satisfaction
Seberapa menyenangkan sistem digunakan.
e. Menguji Usability
3 Jenis uji kebergunaan menurut Levi and Conrad (1997) :
1) Uji Eksploratori
Mencari titik-titik dimana user mengalami kebingungan, kesalahan, atau kerjanya
melambat.
2) Threshold Testing
Mengukur kinerja sistem.
3) Uji Perbandingan
Membandingkan rancangan yang lebih cocok untuk user.
Sedangkan Menurut Hilbert & Redmiles (2000), cara menguji usability yaitu:
1) Uji formatif
Memberikan umpan balik ke perancang sistem terhadap rancangannya.
2) Uji sumatif
Memberikan penilaian terhadap “produk jadi”, untuk mengukur peningkatan yang
telah dilakukan terhadap produk sebelumnya atau untuk membandingkannya dengan
produk sejenis dari perusahaan lain.
47
Heuristic Usability:
Heuristic usability merujuk pada pendekatan atau metode evaluasi desain antarmuka
pengguna (UI) yang menggunakan prinsip-prinsip heuristik. Prinsip-prinsip heuristik ini
adalah pedoman atau aturan praktis yang dikembangkan untuk mengidentifikasi masalah
potensial dalam desain antarmuka pengguna. Metode ini dapat membantu penilai atau
perancang antarmuka mengidentifikasi masalah atau tantangan yang mungkin dihadapi
pengguna saat berinteraksi dengan sebuah sistem atau aplikasi.
Beberapa hal yang perlu diperhatikan dalam heuristic usability yaitu:
1) Dialog yang sederhana dan alami.
2) Berbicara dengan bahasa user.
3) Mengurangi beban ingatan user.
4) Konsisten.
5) Sistem timbal balik.
6) Jalan keluar yang jelas.
7) Jalan pintas.
8) Pesan kesalahan yang baik.
9) Mencegah kesalahan.
10) Bantuan dan dokumentasi.
4. Langkah Kerja
a. Tentukanlah sebuah website yang berhubungan dengan dunia pendidikan
b. Identifikasi website tersebut berdasarkan pada: human ability, human capabilities,
memori. proses, observations dan problem solving.
c. Lengkapi dengan capture dan sertakan alamat dari website tersebut.
a. Kerjakan berkelompok.
b. Kumpulkan laporan dalam format pdf.
c. Tuliskan nama nama anggota kelompok pada cover.
d. 1 kelompok hanya mengumpulkan 1 laporan untuk mewakili anggota lainnya.
48
Akhir Pembelajaran
Pembelajaran
memahami prinsip dan Muka: a. Mengemukakan, mengklasifikasi
komponen usability. Ceramah, penglihatan, pendengaran dan
Problem based sentuhan pada user.
learning, latihan. b. Menentukan pemodelan sistem
pengolahan, pengendalian
motorik dan kelompok
pengguna.
6. Tugas Laporan
PDF.
7. Referensi:
– Becker, C. R. (2020). Learn Human-Computer Interaction. Birmingham: Packt
Publishing Ltd.
Cham: Springer.
– Dix, A., Finlay, J., Abowd, G. D., & Beale, R. (2004). Human Computer Interaction.
Essex: Pearson Education Limited.
49
USER CENTERED DESIGN (UCD)
Pokok / Sub Bahasan : User Centered Design (UCD):

1. Prinsip dalam UCD
2. Proses UCD
3. Aturan UCD
4. Tujuan UCD
1. Tujuan
Mahasiswa mampu menerapkan proses desain yang berorientasi kepada pengguna.
2. Alat dan Bahan

2) PowerPoint
3. Teori Singkat
a. Definisi User Centered Design (UCD)
User Centered Design (UCD) adalah sebuah filosofi perancangan yang menempatkan
pengguna sebagai pusat dari sebuah proses pengembangan sistem.
Konsep dari User Centered Design UCD adalah user sebagai pusat dari proses
pengembangan sistem, dan tujuan atau sifat-sifat, konteks dan lingkungan sistem semua
didasarkan dari pengalaman pengguna.
b. Prinsip User Centered Design (UCD)

Prinsip-prinsip dalam UCD terbagi menjadi empat (4), yaitu:
1) Fokus pada Pengguna.
2) Perancangan terintegrasi.
3) Dari awal berlanjut pada pengujian pengguna.
4) Perancangan Interaktif.
50
c. Proses User Centered Design (UCD)
Menurut ISO 13407:1999 Human Centered Design Process mendefinisikan bahwa
UCD: “… defines a general process for including human-centered activities throughout
a development lifecycle…”.
Terdapat empat (4) proses dalam UCD yakni:
1) Memahami dan menentukan konteks pengguna.
2) Menentukan kebutuhan pengguna dan organisasi.
3) Solusi perancangan yang dihasilkan.
4) Evaluasi perancangan terhadap kebutuhan pengguna.
Gambar 5.1. Proses User Centered Design

d. Aturan User Centered Design (UCD)
1) Perspektif
Pengguna selalu benar. Jika terdapat masalah dalam penggunakan sistem, maka
masalah ada pada sistem dan bukan pengguna.
2) Installasi
Pengguna mempunyai hak untuk dapat menginstall atau mengun-install perangkat
lunak dan perangkat keras sistem secara mudah tanpa ada konsekuensi negatif.
3) Pemenuhan
Pengguna mempunyai hak untuk mendapatkan sistem dapat bekerja persis seperti
yang dijanjikan.
51
4) Instruksi
Pengguna mempunyai hak untuk dapat menggunakan instruksi secara mudah ( buku
petunjuk, bantuan secara on-line atau kontekstual, pesan kesalahan), untuk memahami
dan menggunakan sistem untuk mencapai tujuan yang diinginkan secara efisien dan
terhindar dari masalah.
5) Kontrol
Pengguna mempunya hak untuk dapat mengontrol sistem dan mampu membuat sistem
menanggapi dengan benar atas permintaan yang diberikan.
6) Umpan Balik
Pengguna mempunyai hak terhadap sistem untuk menyediakan informasi yang jelas,
dapat dimengerti, dan akurat tentang tugas yang dilakukan dan kemajuan yang
dicapai.
7) Keterkaitan
Pengguna mempunyai hak untuk mendapatkan informasi yang jelas tentang semua
prasyarat yang dibutuhkan sistem untuk memperoleh hasil terbaik.
8) Batasan
Pengguna mempunyai hak untuk mengetahui batasan kemampuan sistem.
9) Assistance
Pengguna mempunyai hak untuk dapat berkomunikasi dengan penyedian teknologi
dan menerima pemikiran dan tanggapan yang membantu jika diperlukan.
10) Usability
Pengguna harus dapat menjadi penguasa teknologi perangkat lunak dan perangkat
keras, dan bukan sebaliknya. Sistem harus dapat dugunakan secara alami dan ituitif.
e. Tujuan User Centered Design (UCD)

Tujuan UCD yaitu untuk menghasilkan produk yang memiliki tingkat usability tinggi.
Usability Engineering Usability engineering adalah disiplin ilmu yang membahas
metode terstruktur dalam desain user interface selama proses development.
f. Manfaat Usability engineering

Manfaat usability engineering adalah mengurangi waktu dan biaya development.
Mendefinisikan user requirement (permintaan pengguna), testing usability prototypes,
dan performa usability di awal development secara signifikan dapat mengurangi cost
52
untuk identifikasi dan pemecahan masalah usability dan dapat menghemat waktu
software development.
g. Pengujian Usability
Melakukan Pengujian Usability yang di pandang dari:
1) Usefullness
Produk memungkinkan user untuk mencapai tujuannya, dan tugas yang didesain
sesuai dengan kebutuhan user.
2) Learnability
Dapat dipelajari dengan mudah sehingga pencari informasi tidak perlu dilatih terlebih
dahulu menggunakannya, bagian sirkulasi dapat menggunakannya dengan baik
dengan latihan maksimal dua (2) kali.
Cara mengukur dengan observasi langsung bagi pencari informasi, dan uji coba bagi
admin.
3) Effectiveness
Sistem informasi dapat memberi layanan pemrosesan data secara akurat baik bagi
pencari informasi, bagian pelayanan online maupun administrator.
Cara mengukur, misal dengan pengolahan basisdata yang bebas error.
4) Attitude
Pengguna merasa nyaman menggunakan sistem informasi apotik tersebut.
Cara mengukur dengan membangun kuesioner untuk mengungkap aspek kepuasan
pengguna.
4. Langkah Kerja
a. Tentukanlah sebuah website yang berhubungan dengan e-commerce (penjualan online).
b. Identifikasi dan fahami dari sudut pandang user, mengapa user membutuhkan website
tersebut.
e. Kerjakan berkelompok.
f. Kumpulkan laporan dalam format pdf.
g. Tuliskan nama-nama anggota kelompok pada cover.
h. 1 kelompok hanya mengumpulkan 1 laporan untuk mewakili anggota lainnya.
53
Akhir Pembelajaran
Pembelajaran
menerapkan proses Muka: Membuat desain yang berorientasi
desain yang berorientasi Ceramah, pengguna.
kepada pengguna. Problem based
learning, latihan.
6. Tugas Laporan
PDF.
7. Referensi:
Publishing Ltd.
Cham: Springer.
54
ANALISA TUGAS
Pokok / Sub Bahasan : Analisis Tugas:

1. Keperluan analisa tugas.
2. Teknik analisa tugas.
3. Dekomposisi tugas
4. Teknik berbasis relasi entitas
5. Sumber informasi dan pengumpulan data
6. Representasi data
7. Fungsi analisa tugas
1. Tujuan
Mahasiswa mampu memahami proses analisa tugas secara menyeluruh.
2. Alat dan Bahan

2) PowerPoint
3. Teori Singkat
a. Definisi Analisa Tugas
Suatu metode untuk menganalisis pekerjaan manusia, apa yang dikerjakan, dengan apa
mereka bekerja, dan apa yang harus mereka ketahui.
Contoh: apa saja tugas yang harus dilakukan dalam membersihkan rumah.
b. Alasan Perlunya Analisis Tugas

Untuk memasukkan elemen manusia secara langsung pada perancangan secara sistematis
dan terbuka sehingga dapat diperiksa secara teliti.
55
c. Analisis Tugas digunakan untuk
1) Manual dan pengajaran
a) Mengajarkan cara melakukan task.
b) Menyusun manual atau materi ajar.
c) Membantu user menjelaskan sistem ke orang lain.
2) Menangkap kebutuhan dan merancang sistem
a) Memandu perancangan.
b) Membantu perancangan dalam memilih model internal.
c) Meramalkan penggunaan sistem baru.
3) Merancang antarmuka detail
a) Mengklasifikasi tugas atau objek.
b) Menghubungkan antara objek dengan aksi (Object Oriented Programming).
d. Contoh Analisis Tugas

Contoh langkah-langkah analisis tugas dalam rangka membersihkan rumah:
1) Ambil penghisap debu.
2) Tancapkan penghisap debu pada alat penghubung listrik.
3) Bersihkan ruangan.
4) Jika kotak debu telah penuh, kosongkan.
5) Pasang kembali penghisap debu dan segala peralatan pembantunya.
Sebagai pengguna atau yang menjalankan kegiatan, harus mengetahui mengenai:
1) Penghisap debu.
2) Alat-alat pembantu.
3) Kotak debu.
4) Lemari.
5) Ruangan, dan lain sebagainya.
e. Teknik Analisis Tugas

1) Dekomposisi tugas
Memilah tugas ke sub-tugas beserta urutan pelaksanaannya.
Salah satu pendekatan yang sering digunakan adalah hierarchical task analysis
(HTA). Output HTA adalah hirarki tugas dan sub-task dan juga plans (rencana) yang
menggambarkan urutan dan kondisi (syarat) suatu sub-tugas dilaksanakan.
Contoh : Membuat Air Teh
56
Gambar 6.1. Dekomposisi tugas
Contoh pengelompokkan tugas (jenis perencanaan) yang terdapat pada gambar 6.1:
a) Fixed sequence = contoh: 1.1-1.2-1.3.
b) Optional Tasks = pada plan 0 ‘empty pot’ dan pada plan 5.3. ‘add sugar’ mungkin
tidak dilaksanakan tergantung dari situasinya.
c) Waiting Events = pada plan 1, harus menunggu ketel sampai mendidih, dan plan 0
menunggu 4 atau 5 menit.
d) Cycles = kerjakan 5.1 – 5.2 jika cangkir masih kosong.
e) Time-sharing = tugas 1 dan 2 dapat dilaksanakan dalam waktu yang bersamaan.
f) Discretionary = kerjakan sembarang 3.1, 3.2, atau 3.3 dalam urutan sembarang.
g) Mixtures = kebanyakan suatu rencana meliputi hal-hal diatas.
2) Analisis berbasis pengetahuan
Dimulai dengan mendaftar semua objek dan aksi yang terlibat dalam tugas dan
kemudian membangun taksonominya. Langkah analisis dimulai dengan menemukan
hirarki sederhana dari objek.
57
Gambar 6.2. Analisis berbasis pengetahuan
3) Teknik berbasis relasi entitas
Teknik berbasis relasi entitas biasanya berasosiasi dengan desain basis data dan
pemrograman berbasis objek. Berbeda dengan Analisis berbasis pengetahuan, teknik
ini lebih menekankan kepada hubungan antar aksi dan objek, dibandingkan kemiripan
antara objek yang berbeda.
Gambar 6.3. Teknik berbasis relasi entitas

58
f. Sumber Informasi dan Pengumpulan Data
Berikut beberapa sumber informasi yang dapat diperoleh untuk membuat analisis tugas:
1) Dokumentasi yang tersedia
a) Lebih sering memuat penjelasan bagaimana tugas akan dikerjakan (dari pada
bagaimana mereka akan mengerjakan tugas sekarang ini).
b) Standar.
c) Manual.
d) Historis.
e) Praktek yang baik.
2) Observasi
a) Di dalam observasi, lihat apa yang dikerjakan user.
b) Merekam dengan videotape (untuk melihat kembali atau mengulangi)
c) Gunakan catatan, bagan.
d) Fokus pada tugas khusus – lingkungan yang berhubungan dicatat, tetapi kemudian
diubah menjadi sub-tugas abstrak.
3) Wawancara
Bertanya pada seorang yang ahli pada bidang tugas yang akan dianalisis seringnya
merupakan cara langsung yang cepat untuk mendapatkan informasi mengenai suatu
tugas. Ahli tersebut bisa saja si manager, supervisor, atau staf yang memang
mengerjakan tugas tersebut. Wawancara kepada ahli sebaiknya dilakukan setelah
observasi. Hasil observasi dapat direfleksikan dengan wawancara untuk mengetahui
perilaku atau kondisi yang diinginkan dan tidak diinginkan.
g. Representasi Data
Proses perubahan konsep-konsep yang abstrak maupun nyata dalam bentuk yang
kongkret.
1) Cara melakukan representasi data:
a) Daftar, ringkasan, matriks.
b) Gunakan alat bantu bagan.
c) Tambahkan detail yang semakin bertambah.
d) Ketahui lebih lanjut berapa detail yang cukup.
e) Akankan ditambah ringkasan yang dihubungkan dengan sub-tugas khusus.
f) Baik untuk tugas yang terurut.
g) Tidak mendukung dengan baik tugas-tugas yang paralel.
59
h) Tidak mendukung dengan baik percabangan.
2) Naratif pada representasi data:
a) Menjelaskan tugas-tugas dalam bentuk kalimat.
b) Seringkali versi diperluas dari daftar atau ringkasan.
c) Lebih efektif untuk mengkomunikasikan ide-ide umum dari tugas.
d) Tidak efektif untuk detail.
e) Tidak efektif untuk tugas yang bercabang.
f) Tidak efektif untuk tugas paralel.
h. Hierarki pada Analisa Tugas

1) Notasi grafik dan dekomposisi dari tugas.
2) Tugas merupakan kumpulan dari aksi.
3) Tugas diatur ke dalam rencana.
4) Mengelompokkan sub-tugas dengan berurut lebih disukai dan kondisi-kondisi
prasyarat.
i. Fungsi Analisis Tugas

Output dari proses analisis tugas adalah breakdown dari tugas-tugas yang dilakukan oleh
orang dan, tergantung pada teknik yang dipilih, hal-hal yang digunakan dan rencana serta
urutan tindakan yang digunakan untuk melakukan tugas tersebut.
Hasil analisis tugas tersebut dapat digunakan untuk: pembuatan manual dan materi
pembelajaran, pendefinisian kebutuhan dan perancangan sistem, desain detail interface.
4. Langkah Kerja
a. Tentukan dan pilihlah sebuah website yang berhubungan dengan kesehatan.
b. Identifikasi dan fahami dari semua sudut pandang hak akses seperti user dan client,
mengapa user dan client membutuhkan website tersebut.
d. Kerjakan secara berkelompok.
e. Kumpulkan laporan dalam format pdf.
f. Tuliskan nama-nama anggota kelompok pada cover.
g. 1 kelompok hanya mengumpulkan 1 laporan untuk mewakili anggota lainnya.
60
Akhir Pembelajaran
Pembelajaran
1 Mahasiswa mampu Kuliah Tatap Ketepatan mahasiswa dalam
memahami proses analisa Muka: memahami pembuatan desain
tugas secara menyeluruh. Ceramah, produk dengan model UX design.
Problem based
learning, latihan.
6. Tugas Laporan
PDF.
7. Referensi:
Publishing Ltd.
Cham: Springer.
61
COMPUTER SUPPORT COOPERATIVE WORK (CSCW)
Pokok / Sub Bahasan : Computer Support Cooperative Work (CSCW):

1. Definisi CSCW.
2. Tujuan kerjasama.
3. Asinkron tersebar.
4. Sinkron tersebar.
5. Tatap muka.
6. Penetapan CSCW pada pendidikan.
1. Tujuan
Mahasiswa mampu memahami berbagai pekerjaan kolaboratif yang dibantu dengan
komputer.
2. Alat dan Bahan

2) PowerPoint
3. Teori Singkat
a. Definisi
Computer-Supported Cooperative Work (CSCW) adalah bidang studi yang berfokus
pada perancangan dan evaluasi teknologi baru untuk mendukung proses sosial kerja,
sering di antara mitra yang berjauhan. Hasil CSCW biasanya disebut Groupware.
Groupware adalah jenis software yang membantu kelompok kerja (workgroup) yang
terhubung ke jaringan untuk mengelola aktivitas mereka.
b. Tujuan Kerja Sama

Tujuan kerja sama pada CSCW yaitu:
62
1) Kemitraan terfokus
Kerja sama antara dua pemakai yang saling membutuhkan untuk menyelesaikan
tugas.
2) Kuliah atau Demo
Seseorang membagikan informasi kepada banyak pemakai di tempat lain. Waktunya
dijadwalkan.
3) Konferensi
Komunikasi kelompok dengan tempat dan waktu yang berbeda.
4) Proses kerja terstruktur
Orang yang peranannya berbeda bekerja sama dalam tugas yang berhubungan.
5) Electronic commerce
Kerja sama jangka pendek untuk mencari informasi dan memesan produk, dan jangka
panjang untuk perjanjian atau kontrak bisnis.
6) Rapat dan dukungan keputusan
Rapat tatap muka menggunakan komputer dengan membuat kontribusi simultan.
7) Teledemokrasi
Pemerintah melakukan rapat jarak jauh, menampilkan komentar dewan, mencari
konsensus melalui konferensi, debat, dan pemungutan suara online.
Pengelompokan sistem kerja sama:
Matriks waktu-ruang untuk mengelompokkan sistem kerja sama (Ellis et al. 1991):
Gambar 7.1. Matriks waktu-ruang untuk mengelompokkan sistem kerja sama
63
c. Asinkron Tersebar
Tempat dan Waktu Berbeda.
Contoh dari asinkron tersebar:
1) E-mail
Sifat dari e-mail: struktur terlalu bebas, terlalu membuat kewalahan, dan transien.
Tools yang ada pada e-mail yaitu:
a) Filtering (Message rules pada Microsoft Outlook Express).
b) Archiving (menyimpan pesan lalu).
c) Forwarding (meneruskan pesan).
d) Mailing lists.
Pesan pada e-mail dapat mengandung gambar, suara, animasi, attachments berupa file
dan lain sebagainya sehingga terdapat dampak negatif pada email berupa virus yang
diselipkan di dalam file tersebut.
Menurut Anderson (Anderson et al., 1995), untuk membuat e-mail menjadi universal
maka diperlukan beberapa hal berikut:
a) Peningkatan penyederhanaan.
b) Peningkatan pelatihan.
c) Pemfilteran yang lebih mudah.
d) Hardware berbiaya murah.
e) Jasa jaringan.
2) Newsgroup dan Komunitas Jaringan
Newsgroup dan komunitas jaringan merupakan suatu wadah untuk melakukan diskusi
elektronik terfokus yang dilakukan oleh kelompok.
Beberapa contoh newsgroup dan komunitas jaringan yaitu:
a) USENET newsgroups
[1] Pemakai membaca catatan sebelumnya dan menanggapi.
[2] Terbuka bagi umum.
[3] Dapat di-search melalui web.
b) Mailing list services
[1] Pemakai harus berlangganan.
[2] Menggunakan e-mail.
[3] Bisa ditengahi moderator.
c) Online conferences
Mempunyai alat bantu untuk voting, direktori online pemakai dan dokumen.
64
d) Web discussion board
e) Online newsletters
Komunitas jaringan bisa kontroversial: hacker, teroris, kegiatan rasis.
d. Sinkron Tersebar
Tempat Berbeda, Waktu Sama.
Beberapa contoh dari sinkron tersebar yaitu:
1) Group editor
Mengedit dokumen bersama.
Contoh: GROVE.
2) Shared workspace
Menulis atau menggambar bersama (whiteboard), desain bersama, membuat dokumen
bersama, mendukung kerja sama tim yang fleksibel.
Contoh: TeamRooms, SEPIA.
3) Shared screen
Melihat layar dan mengoperasikan sistem yang sama.
Contoh: Timbuktu, PC Anywhere, Windows XP Remote Assistance.
Gambar 7.2. TeamWare Workplace (versi komersial TeamRooms dari University of Calgary)
65
Gambar 7.3. SEPIA (Structured Elicitation and Processing of Ideas for Authoring) untuk
produksi dokumen hypermedia bersama
Contoh singkron tersebar lainnya yaitu:
1) Interactive game networks
Bermain game yang sama melalui jaringan.
Contoh: StarCraft, WarCraft, Counter Strike.
2) Chat
Diskusi melalui antarmuka teks.
Contoh: IRC, ICQ.
3) Video conferencing dan teleconferencing
Konferensi real-time dengan kemampuan audio dan video.
Contoh: NetMeeting, CU-SeeMe, Polycom DTVC products (dulu PictureTel).
66
e. Tatap Muka
Tempat dan Waktu Sama.
1) Tampilan bersama dari komputer dosen
Penggunaan proyektor untuk menayangkan presentasi.
2) Audience response units
Menjawab pertanyaan pilihan ganda dengan piranti khusus pada meja peserta.
3) Text-submission workstations
Bercakap cakap menggunakan keyboard dan software sederhana.
4) Brainstorming, voting, and ranking
Digunakan pada electronic classroom atau meeting room.
Contoh: GroupSystems.
5) File sharing
Penggunaan komputer dalam jaringan untuk memakai file secara bersama.
6) Shared workspace
Ruang kerja yang sama yang dapat diakses oleh semua pemakai.
7) Group activities
Para pemakai dapat mengerjakan soal, dan yang butuh bantuan dapat “mengangkat
tangan” untuk menampilkan tampilannya pada shared display atau pada tampilan
pemimpin.
f. Penerapan CSCW pada Dunia Pendidikan

Koordinasi siswa dalam kelas virtual adalah proses yang rumit namun dapat
memungkinkan pengalaman pendidikan yang mendorong bagi orang-orang yang tak
dapat bepergian ke kelas biasa.
Pengalaman belajar oleh individu yang lebih aktif termasuk menggunakan software di
jam pelajaran, misalnya untuk:
1) Menulis esai atau puisi.
2) Mencari peristiwa-peristiwa penting dalam kelas sejarah.
3) Menjalankan simulasi bisnis untuk meningkatkan kualitas produk.
4) Melakukan analisis statistik.
5) Melakukan landscaping dengan CAD dan paket grafik.
6) Menulis program komputer.
7) Mencari di internet.
67
4. Langkah Kerja
a. Carilah dan tunjukkanlah website - website Computer Supported Cooperative Work
(CSCW) yang berhubungan pada kemitraan terfokus, konferensi, proses kerja
terstruktur, electronic commerce, rapat dan teledemokrasi.
b. Identifikasi, fahami dan berikan analisa pada website yang telah ditentukan.
d. Kerjakan secara berkelompok dan kumpulkan laporan dalam format pdf.
e. Tuliskan nama-nama anggota kelompok pada cover.
f. 1 kelompok hanya mengumpulkan 1 laporan untuk mewakili anggota lainnya.
Akhir Pembelajaran
Pembelajaran
memahami berbagai Muka: melakukan analisis isi website,
pekerjaan kolaboratif Ceramah, organisasi situs, dan melakukan
yang dibantu dengan Problem based pengujian pada website.
komputer. learning, latihan.
6. Tugas Laporan
PDF.
68
7. Referensi:
Publishing Ltd.
Cham: Springer.
69
UBIQUITOUS COMPUTING
Pokok / Sub Bahasan : Ubiquitous Computing:

1. Pendahuluan.
2. Intro.
3. Definisi.
4. Konsep ubiquitous computing.
5. Sekilas virtual reality.
6. Contoh ubiquitous computing.
1) Tujuan
Mahasiswa mampu memahami berbagai bentuk komputerisasi di berbagai benda sehari-
hari.
2) Alat dan Bahan

2) PowerPoint
3) Teori Singkat
a. Definisi Ubiquitous Computing
Ubiquitous Computing adalah konsep dalam software engineering dan computer science
dimana proses computing dibuat untuk dapat muncul atau digunakan dimana saja dan
kapan saja. Secara sederhana dapat kita definisikan dengan istilah komputasi dimana-
mana atau komputasi yang ada dimana-mana.
b. Three Generation of Computing

1) Mainframe era
Many people to one computer.
2) Personal Computer era
70
One computer to one person.
3) Ubiquitous computing
one person using many computers.
c. Sejarah Ubiquitous Computing

Pertama dimunculkan oleh Mark Weiser, seorang peneliti senior pada Xerox Palo Alto
Research Center (PARC) pada tahun 1988.
Weiser mempublikasikannya pada artikelnya yang berjudul ”The Computer of the 21st
Century” pada Jurnal Scientific American terbitan September tahun 1991.
d. Konsep Ubiquitous Computing

1) Manusia bergerak
Berbicara atau menulis hal tersebut akan diterima sebagai input dari suatu bentuk
komunikasi oleh manusia lainnya.
2) Ubiquitous Computing
Menggunakan konsep yang sama, yaitu menggunakan gerakan, pembicaraan, ataupun
tulisan tadi sebagai bentuk input baik secara eksplisit maupun implisit ke komputer.
3) Efek Positif Ubiquitous Computing
Salah satu efek positif dari Ubiquitous Computing adalah orang-orang yang tidak
mempunyai keterampilan menggunakan komputer dan juga orang-orang dengan
kekurangan fisik (cacat) dapat tetap menggunakan komputer untuk segala keperluan.
4) Terminologi Komputer Menurut Weiser
Terminologi komputer dalam dunia Ubiquitous Computing tidak terbatas pada sebuah
Personal Computer (PC), sebuah notebook tetapi berwujud sebagai macam-macam
alat yang memiliki sifat demikian natural, sehingga seseorang yang tengah
menggunakan Ubiquitous Computing devices tidak akan merasakan bahwa mereka
tengah mengakses sebuah komputer.
e. Goal of Ubiquitous Computing

Menciptakan lingkungan dimana konektivitas dari alat-alat komputer terintegrasi dengan
baik sehingga menyediakan koneksi yang tidak terputus dan selalu tersedia.
71
f. Karakteristik Ubiquitous Computing Devices
Sangat kecil, murah, handal dalam memproses koneksi internet sehingga dapat ditanam
dalam hampir segala macam objek seperti HP, mobil, pakaian, dan lainnya.
g. Virtual Reality
Ubiquitous Computing merupakan kebalikan dari Virtual Reality.
Dapat dikatakan bahwa Virtual Reality berfokus pada usaha mensimulasikan dunia nyata
ke dalam komputer dibanding memanipulasi secara langsung object atau state dunia
nyata untuk menyelesaikan sebuah permasalahan.
Di lain pihak Ubiquitous Computing justru berusaha memanipulasi object dan state di
dunia nyata untuk menyelesaikan permasalahan yang nyata pula.
h. Key Elements of Ubiquitous Computing

1) Ubiquitous Networking
Ubiquitous Computing akan memungkinkan penerapan teknologi wireless secara luas,
termasuk teknologi monitoring hewan peliharaan, sepeda, buku, dan lainnya.
2) Ubiquitous Sensing
Give systems “eyes and ears”.
Adding more “awareness” to ubiquitous network.
Automatic measuring.
3) Ubiquitous Access
Access from anywhere.
Required less attention.
Mobile computer.
Wearable computer.
4) Ubiquitous Middleware
Typically a software.
Shield an application from low-level details.
Interact with Ubiquitous Networking, Sensing, and Access.
i. Aspek-aspek yang Mendukung Pengembangan Ubiquitous Computing

1) Micro-nano technology
72
Perkembangan teknologi mikro dan nano, yang menyebabkan
ukuran microchip semakin mengecil, saat ini menjadi sebuah faktor penggerak utama
bagi pengembangan ubiquitous computing device.
2) Natural Interfaces
Natural interfaces, yaitu penggunaan aspek-aspek alami sebagai cara untuk
memanipulasi data, contohnya teknologi semacam voice recognizer ataupun pen
computing.
3) Context Aware Computing
Context aware computing adalah salah satu cabang dari ilmu komputer yang
memandang suatu proses komputasi tidak hanya menitikberatkan perhatian pada satu
buah obyek yang menjadi fokus utama dari proses tersebut tetapi juga pada aspek di
sekitar obyek tersebut.
j. Isu Seputar Ubiquitous Computing

1) Security
Ubiquitous computing membawa efek meningkatnya resiko terhadap security.
Penggunaan gelombang, infra merah, ataupun bentuk media komunikasi tanpa kabel
lain antara alat input dengan alat pemroses data membuka peluang bagi pihak lain
guna menyadap data. Sebagai implikasinya sang penyadap dapat memanfaatkan data
tersebut untuk kepentingan mereka. Saat ini berbagai riset tentang pengiriman data
yang aman, termasuk penelitian terhadap protokol-protokol baru, menjadi salah satu
fokus utama dari riset tentang ubiquitous computing.
2) Privasi
Penggunaan devices pada manusia menyebabkan ruang pada privasi semakin
mengecil. Dengan alasan efisiensi waktu pegawai seorang pimpinan dapat meminta
semua karyawannya memakai tag yang dapat memonitor keberadaan karyawan
tersebut di kantor. Hal ini menyebabkan sang karyawan tidak lagi mendapatkan
privasi yang menjadi haknya karena keberadaannya dapat dipantau setiap saat oleh
sang pimpinan beserta data yang menyertainya, misalnya sang pimpinan menjadi
dapat mengetahui berapa kali sang karyawan pergi ke toilet hari itu.
3) Kecepatan wireless
Dengan berbagai macam ubiquitous computing devices tuntutan akan kecepatan
teknologi komunikasi nirkabel menjadi sesuatu yang mutlak. Teknologi saat ini
menjamin kecepatan ini untuk satu orang atau beberapa orang dalam sebuah grup.
73
Tetapi ubiquitous computing tidak hanya berbicara tentang satu device untuk satu
orang, ubiquitous computing membuat seseorang dapat membawa
beberapa devices dan ubiquitous computing juga harus dapat dimanfaatkan di area
yang luas semacam stasiun, teknologi yang ada saat ini belum mampu menjamin
kecepatan untuk situasi semacam itu karena itu ubiquitous computing dapat menjadi
tidak efektif apabila tidak didukung perkembangan teknologi nirkabel yang dapat
menyediakan kecepatan yang dibutuhkan.
k. Contoh Ubiquitous Computing

Internet Kitchen:
1) Internet refrigerator and cooking appliance.
2) Download recipes from web to directly to device.
Gambar 10.1. Internet Kitchen
4) Langkah Kerja
a. Cari dan tunjukkan sebuah website yang termasuk smart home atau smart campus
ataupun smart city.
b. Identifikasi, fahami dan berikan analisa pada website yang telah ditentukan berupa
bentuk implementasi, kelebihan serta kekurangannya.
74
5) Rubrik Ketercapaian
Akhir Pembelajaran
Pembelajaran
memahami berbagai Muka: melakukan pemahaman berbagai
bentuk komputerisasi di Ceramah, bentuk komputerisasi di berbagai
berbagai benda sehari- Problem based benda sehari-hari.
hari. learning, latihan.
6) Tugas Laporan
PDF.
7) Referensi:
Publishing Ltd.
Cham: Springer.
75
DESAIN GRAPHICAL USER INTERFACE (GUI)
Pokok / Sub Bahasan : Desain Graphical User Interface (GUI):

1. Definisi GUI.
2. Sejarah GUI.
3. Perbedaan GUI dan CLI.
4. Elemen GUI.
1. Tujuan
Mahasiswa mampu memahami desain Graphical User Interface (GUI).
2. Alat dan Bahan

2) PowerPoint
3) Canva
3. Teori Singkat
a. Definisi Graphical User Interface (GUI)
Graphical User Interface (GUI) adalah sebuah cara visual untuk dapat berinteraksi
dengan komputer. Interaksi tersebut menggunakan komponen-komponen seperti
windows, icons, labels, text-boxes, dan lainnya.
Graphical User Interface (GUI) memanfaatkan kemampuan grafis dari komputer untuk
mempermudah user berinteraksi dengan program.
Graphical User Interface (GUI) memungkinkan user untuk mengklik dan men-drag
objek menggunakan mouse daripada memasukan perintah berbentuk teks pada command
line.
76
b. Sejarah Graphical User Interface (GUI)
Berikut merupakan penjelasan dari sejarah perkembangan Graphical User Interface
(GUI) berdasarkan tahun:
1) 1963: Ivan Sutherland’s sketchpad.
2) late 1960s: Peneliti di Stanford Research Institute membuat perangkat sejenis mouse.
3) 1970: Xerox PARC Alto computer memiliki GUI.
4) 1980s: Komputer-komputer lain seperti Apple Lisa and Machintos, Sun workstation
mengadopsi teknologi GUI Xerox PARC.
5) Kemunculan World Wide Web pada tahun 1990an membawa perkembangan dalam
Sejarah UI atau UX. Hyperlink pada halaman browser membuat pengguna internet
dapat mengakses dan bertukar informasi secara online dengan mudah.
6) Kemunculan telepon genggam pada tahun 2000an juga memberi pengaruh kepada
perkembangan GUI. Desainer UI atau UX harus menyesuaikan tampilan dengan layar
ponsel yang kecil dan teknologi touchscreen.
c. Perbedaan Graphical User Interface (GUI) dan Command Line Interface (CLI)
Berikut ini merupakan perbedaan dari Graphical User Interface (GUI) dan Command
Line Interface (CLI).
1) Graphical User Interface (GUI)
a) User baru lebih cepat menguasai pengoperasian dan navigasi
b) Graphical User Interface (GUI) memberikan lebih banyak akses pada file, fitur
software, dan fitur sistem operasi secara keseluruhan.
c) Graphical User Interface (GUI) memiliki windows yang dapat memudahkan user
untuk melihat, mengontrol, memanipulasi, dan mengatur beberapa program dan
folder pada waktu yang bersamaan.
d) Walaupun perkembangan teknologi membuat Graphical User Interface (GUI)
semakin lebih cepat, akan tetapi penggunaan mouse dan keyboard untuk navigasi
Graphical User Interface (GUI) masih lebih lambat dibandingkan dengan
command line.
e) Graphical User Interface (GUI) membutuhkan system resource yang lebih besar
karena proses loading elemen-elemen visual seperti icon, video, gambar.
77
Gambar 11.1. A screenshot of the Macintosh operating system desktop from 1984
2) Command Line Interface (CLI)
a) User baru sulit mengoperasikan Command Line Interface (CLI) karena banyak
memerlukan memori dalam pengoperasian dan navigasi.
b) User baru memiliki control terhadap file dan sistem operasi melalui command line
interface (CLI), Akan tetapi tidak se-user friendly Graphical User Interface (GUI).
c) Walaupun banyak sistem command line dapat multitasking, Command Line
Interface (CLI) tidak dapat menampilkan beberapa layar sekaligus dengan mudah.
d) Lebih cepat karena user hanya membutuhkan keyboard dalam menavigasi
interface.
e) Komputer yang hanya menggunakan command line membutuhkan resource yang
jauh lebih sedikit dibanding Graphical User Interface (GUI).
78
Gambar 11.2. Command Line Interface
d. Elemen Graphical User Interface (GUI)

Berikut ini adalah beberapa contoh elemen yang ada pada Graphical User Interface
(GUI).
1) Frame
Dalam aplikasi komputer, sebuah area persegi yang berisi teks atau gambar dapat
disebut sebagai frame.
Frame memberikan space bagi user untuk menempatkan objek dimanapun yang
mereka inginkan dalam sebuah halaman.
Gambar 11.3. Frame
79
2) Window
Window adalah tampilan aplikasi yang terlihat langsung. Window terdiri dari area
visual yang memuat beberapa graphical user interface dari program komputer.
Sebuah window dibingkai oleh window decoration, berbentuk persegi, serta dapat
diposisikan overlap satu sama lainnya.
Gambar 11.4. Window

3) Label
Label biasanya digunakan untuk mengidentifikasi text box terdekat. Dalam Graphical
User Interface (GUI), label seperti halnya tulisan label pada benda yang berisi
informasi mengenai produk.
Dalam komputer, label digunakan ketika teks dituliskan sebagai informasi atau tujuan
penamaan.
Gambar 11.5. Label
80
4) Text Box
Elemen grafis yang biasanya muncul bersama label, berupa area yang bertujuan agar
user dapat menginput teks yang digunakan oleh program komputer.
Gambar 11.6. Text Box

5) Text field
Text field adalah elemen Graphical User Interface (GUI) yang dapat digunakan oleh
user untuk menginputkan teks singkat.
Gambar 11.7. Text field

6) Menu
Menu adalah elemen Graphical User Interface (GUI) yang memungkinkan user untuk
memilih opsi dari list opsi yang disediakan. Opsi-opsi tersebut merepresentasikan
perintah yang akan dijalankan oleh program komputer.
81
Gambar 10.8. Menu
7) Buttons
Buttons adalah elemen Graphical User Interface (GUI) yang dapat di klik untuk
memilih salah satu opsi yang disediakan. Namanya elemen ini berdasarkan tombol
mekanis yang terdapat pada penerima gelombang radio dalam mobil.
Gambar 10.9. Buttons

8) Combo Box
Combo box adalah kombinasi dari single-line text box dan drop-down list atau list box.
User dapat mengetikkan teks atau memilih salah satu teks dalam list tersebut. Elemen
Graphical User Interface (GUI) ini berguna ketika user harus memilih satu diantara
sejumlah opsi yang disediakan.
Gambar 10.10. Combo box
82
9) Radio Button
Radio button selalu ditampilkan berkelompok. User hanya dapat memilih salah satu
opsi dari kelompok radio button. Ketika user men-select opsi lain, maka radio button
yang sebelumnya ter-select akan kembali ke keadaan semula.
Gambar 10.11. Radio Button

10) Check Box
Pada check box, user dapat memilih beberapa opsi sekaligus. Check box biasanya
ditampilkan sebagai beberapa kotak persegi dengan ukuran kecil. Check box
ditampilkan beserta label yang memberikan informasi mengenai opsi apa yang telah
dipilih oleh user begitu mengklik check box.
Gambar 10.12. Check Box

11) Tree View
Tree view adalah elemen control grafis yang merepresentasikan tampilan hirarki
informasi. Setiap item dapat memiliki beberapa sub-item. Tree view biasanya terdapat
pada aplikasi manajemen file, yang memungkinkan user untuk menavigasi sistem
direktori file.
83
Gambar 10.13. Tree View
12) Tab
Tab memungkinkan multiple dokumen atau panel untuk dibuka dalam satu window.
Gambar 10.14. Tab
4. Langkah Kerja
a. Buatlah desain tampilan dari Graphical User Interface (GUI) yang berhubungan dengan
smart home atau smart campus ataupun smart city.
b. Buatlah desain menggunakan Canva, Figma, Mockup atau yang lainnya.
c. Buatlah laporan dari hasil desain Graphical User Interface (GUI) tersebut, sertakan hasil
dari desain yang telah dibuat.
84
Akhir Pembelajaran
Pembelajaran
memahami desain Muka: mamahami dan melakukan
Graphical User Interface Ceramah, rancangan desain Graphical User
(GUI). Problem based Interface (GUI).
learning, latihan.
6. Tugas Laporan
PDF.
7. Referensi:
Publishing Ltd.
Cham: Springer.
85
DESAIN DIALOG
Pokok / Sub Bahasan : Desain Dialog:

1. Definisi Desain Dialog.
2. Bahasa Komputer.
3. Dialog Manusia - Komputer.
4. Perancangan Dialog.
5. Contoh Prinsip Desain Dialog.
6. Proses Perancangan Dialog.
7. Mengapa perlu digunakan notasi deskripsi dialog yang
terpisah?
8. 2 Notasi dalam Desain Dialog.
9. Notasi Dialog Tekstual.
10. Mockup.
11. Command Language.
12. Window, Icon, Menu, Pointer (WIMP).
13. Direct Manipulation.
14. PDA dan Pen.
15. Speech dan Natural Language.
16. User Interface Software.
1. Tujuan
Mahasiswa mampu memahami dan melakukan desain dialog pada User Interface (UI).
2. Alat dan Bahan

2) PowerPoint
3) Canva
86
3. Teori Singkat
a. Definisi Desain Dialog
Dialog dalam arti umum yaitu percakapan antara dua kelompok atau lebih, sedangkan
dialog dalam konteks perancangan user interface yaitu struktur dari percakapan antara
user dan komputer.
b. Bahasa Komputer
Bahasa komputer dibagi menjadi tiga (3) tingkatan, yaitu:
1) Leksikal
Merupakan tingkat yang paling rendah.
Contoh: Bentuk icon pada layar, tombol yang ditekan. Pada bahasa manusia,
ekuivalen dengan bunyi dan ejaan suatu kata.
2) Sintaksis
Urutan dan struktur dari input dan output. Pada bahasa manusia, ekuivalen dengan
grammar atau tatabahasa suatu kalimat.
3) Semantik
Arti dari percakapan yang berkaitan dengan pengaruhnya pada struktur data internal
komputer dan atau dunia eksternal. Pada bahasa manusia, ekuivalen dengan arti yang
berasal dari para partisipan dalam percakapan.
c. Dialog Manusia - Komputer

Berbeda dengan dialog antar manusia pada umumnya, dialog dengan komputer biasanya
terstruktur dan terbatas.
Beberapa ciri-ciri dari dialog terstruktur yang nantinya ditemukan dalam dialog
komputer, yaitu:
1) Menyebutkan beberapa hal tertentu secara berurutan.
2) Beberapa bagian dari dialog dilakukan secara bersamaan.
3) Dialog berikutnya tergantung pada respon dari partisipan.
4) Dialog terstruktur biasanya tidak langsung menuju pada arti kata-katanya atau
semantik tapi pada level sintaksis.
d. Perancangan Dialog
Beberapa hal yang perlu diperhatikan dalam perancangan dialog, yaitu:
1) Rangkaian dialog menggambarkan struktur tugas.
87
2) Beberapa rangkaian dialog tambahan digunakan untuk user support, misalnya help
system, tutorial sub-system.
3) Rangkaian dialog diurutkan sesuai dengan struktur tugas.
Prinsip yang digunakan dalam desain dialog adalah membagi sistem menjadi beberapa
bagian yang disebut module.
e. Contoh Prinsip Desain Dialog

Berikut merupakan contoh pada prinsip desain dialog:
Gambar 13.1. Contoh Prinsip Desain Dialog
f. Proses Perancangan Dialog

Empat hal utama dalam desain yang harus diperhatikan dalam Graphical User Interface
(GUI) metaphor:
1) Pemilihan dan representasi dari conceptual metaphor.
2) Representasi dari obyek interaktif dalam metaphor.
3) Perancangan manipulasi untuk mengimplementasikan user action.
4) Desain micro-metaphor untuk control action dan representasi dari commands.
g. Mengapa perlu digunakan notasi deskripsi dialog yang terpisah?

Agar mudah di analisa.
Pemisahan elemen-elemen interface dari logika program (semantik).
88
Apabila notasi dialog ditulis sebelum program dibuat, maka notasi tersebut bisa
membantu desainer untuk menganalisa struktur yang diajukan.
Notasi dialog dapat digunakan sebagai salah satu cara bagi anggota tim perancangan
untuk mendiskusikan rancangan dialog dan pada akhirnya diberikan kepada programmer
aplikasi.
h. Terdapat Dua (2) Notasi dalam Desain Dialog

1) Notasi Diagramatik
Metode yang digunakan untuk notasi diagramatik, yaitu;
a) State Transition Network (STN).
b) Hirarchical State Transition Network.
c) Harel State Chart.
Notasi diagramatik merupakan bentuk yang paling sering digunakan dalam desain
dialog. Kelebihan dalam bentuk ini adalah memungkinkan desainer untuk melihat
secara sekilas struktur dialog sedangkan kelemahannya sulit untuk menjelaskan
struktur dialog yang lebih luas dan kompleks.
Beberapa bentuk notasi diagramatik adalah:
a) State Transition Network (STN)
Komponen yang ada pada State Transition Network (STN), yaitu:
[1] Lingkaran
Menggambarkan state dari system.
[2] Tanda panah
Terdapat antara state disebut juga transisi. Tanda panah ini diberi label yang
menjelaskan tentang tindakan user yang menyebabkan transisi dan response
dari sistem.
State Transition Network (STN) dapat menggambarkan beberapa pilihan dialog:
[1] Urutan tindakan dan response dari sistem (sequence).
[2] Pilihan bagi user (choice).
Contoh:
Dari state Menu, user dapat memilih “Circle” sehingga sistem berpindah ke
state Circle-1 sehingga option “Circle” highlight;
Alternatif lain, user dapat memilih “Line” sehingga sistem berpindah ke state
Line-1.
[3] Iterasi (iteration)
89
Contoh
Terdapat pilihan dari state Line-2: user dapat melakukan double click pada
suatu titik dan menyelesaikan polyline, berpindah ke state Finish;
Atau user dapat melakukan single click yang berarti menambah titik baru pada
polyline sehingga terjadi transisi kembali ke state Line-2.
State Transition Networks (STN) untuk menu Drawing Tools:
Gambar 13.2. State Transition Networks (STN) untuk menu drawing tools
Penjelasan Gambar 13.2:
[1] Menu tool terdiri dari dua pilihan yaitu ‘Circle’ dan ‘Line’.
[2] Jika menu ‘Circle’ yang dipilih maka user diperkenankan memilih dua titik
pada kertas gambar. Pertama adalah pusat lingkaran dan yang kedua sebagai
jarak dari lingkaran.
[3] Menu ‘Line’ dipilih jika user akan menggambar polyline. User dapat memilih
beberapa titik pada bidang gambar.
b) Hierarchical State Transition Networks
Karakteristiknya Hierarchical State Transition Networks yaitu;
[1] Digunakan untuk deskripsi sistem yang lebih lengkap.
[2] Mirip dengan STN, dengan fitur tambahan berupa gabungan state (composit
state).
[3] Digunakan untuk sistem yang besar.
Contohnya; Pada drawing tool terdapat 3 sub-menu yaitu grapich, text dan paint.
Hierarchical State Transition Network dari sebuah tool:
90
Gambar 13.3. Hierarchical State Transition Network dari sebuah tool
c) Harel’s State Charts
Harel’s State Charts dapat digolongkan sebagai kelompok STN.
Chart ini dibangun untuk menspesifikasikan secara visual sistem reaktif yang
kompleks dan mampu mengakomodasi masalah seperti concurrency dan escape.
Chart ini memiliki karakter struktur hirarki dalam satu diagram tunggal yang
membagi elemen mana yang merepresentasikan state alternatif dan yang
merepresentasikan aktifitas concurrent (dijalankan bersama-sama).
Gambar 13.4. Harel’s State Charts

d) Flowcharts
91
Karkteristik Flowcharts yaitu;
[1] Mendeskripsikan dialog yang sederhana.
[2] Sederhana dan mudah dimengerti.
[3] Merefleksikan sudut pandang programer dari pada user.
Flowchart sub-dialog fungsi delete:
Gambar 13.5. Flowcharts

e) Jackson Stuctured Design (JSD) Diagrams
Karakteristik Jackson Stuctured Design (JSD) Diagrams yaitu:
[1] Jackson Stuctured Design digunakan untuk berbagi aspek dari analisis tugas
dan desain dialog.
[2] Digunakan untuk system yang sederhana, terbatas dan berbasis menu.
Contoh JSD Diagrams untuk sistem kepegawaian:
92
Gambar 13.6. JSD Diagrams untuk sistem kepegawaian
2) Notasi dialog tekstual
Dalam notasi tekstual terdapat tiga (3) metode yang digunakan, yaitu:
a) Tata Bahasa (Grammar)
Notasi dialog tekstual berfokus pada aksi yang dilakukan oleh user. Ada dua (2)
jenis grammar yaitu Backus-Naur Form (BNF) dan Regular Expression.
Karakteristik Tata Bahasa (Grammar) yaitu:
[1] Regular Expression banyak digunakan untuk mendeskripsikan kriteria
pencarian tekstual yang kompleks.
[2] Regular Expression digunakan untuk analisis leksikal bahasa pemograman.
[3] Regular Expression dan BNF tidak digunakan untuk merepresentasikan
councurency dialog.
a) Aturan Produksi
Unordered list of rules:
Gambar 13.7. Aturan Produksi

Dikarenakan menggunakan if, maka kondisi then.
Karakteristik aturan produksi yaitu:
[1] Berorientasi pada event, state atau gabungan keduanya,
[2] Baik untuk task parallel bukan task sequence.
93
b) CSP dan Proses Aljabar
Digunakan untuk proses sekunsial (urut) pada natural language based dan
bersama-sama. Misalnya dalam penggunaan mouse, keyboard dan draw menu
secara bersama-sama.
i. Mockup
You can replace the image on the screen with your own. Just right-click on it and select
“Replace image”.
j. Command Language
Merupakan paradigma user interface yang pertama kali.
Contoh Command Language:
MS-DOS shell, UNIX shell, dBase.
Keuntungan Command Language:
[1] Lebih cepat.
[2] Dapat melakukan kegiatan meskipun di luar batas.
[3] Perulangan.
[4] Implementasi yang mudah dan hemat.
Tujuan Command Language:
[1] Konsistensi.
[2] Penamaan dan pemberian singkatan yang baik.
[3] Melakukan tugas perancangan dapat membantu meminimalkan kekurangan.
k. Window, Icon, Menu, Pointer (WIMP)

Berfokus pada Menus, Buttons, Forms, Icons.
l. Direct Manipulation
Definisi dari Direct Manipulation:
[1] Kesinambungan tampilan dari objek-objek dan aksi-aksi yang dilakukan.
[2] Cepat, dapat dikembalikan, peningkatan aksi dimana efeknya dapat segera terlihat.
[3] Penggantian dari sintaks command language dengan manipulasi langsung pada
objek.
Keuntungan dari Direct Manipulation:
[1] Mudah dipelajari dan diingat, khususnya untuk pemula.
94
[2] What You See Is What You Get (WYSIWYG)
[3] Fleksibel.
[4] Menyediakan konteks dan tampilan yang cepat dari feedback, sehingga user dapat
mengetahui apakah tujuan telah tercapai.
[5] Membatasai beberapa jenis kesalahan yang dapat terjadi.
Kekurangan dari Direct Manipulation:
[1] Penggunaan seluruh ruang pada layar.
[2] Harus mempelajari arti dari komponen-komponen yang tampak pada layar.
[3] Tampilan visual mungkin dapat disalah artikan.
[4] Penggunaan mouse dapat lebih lambat daripada pengetikan.
[5] Tidak ada penjelasan otomatis.
[6] Tidak bagus pada: pengulangan, penyimpanan history, tugas tertentu (seperti
merubah semua huruf cetak miring menjadi cetak tebal), variabel.
m. PDA dan Pen

Menjadi lebih umum dan penggunaan yang lebih luas.
Tampilan yang lebih kecil (160 x 160 atau 320 x 240).
Tombol-tombol yang lebih sedikit, interaksi melalui “pen” (atau stylus).
Peningkatan wireless, warna, memory yang lebih besar, CPU dan OS yang lebih baik.
Palmtop vs Handheld.
n. Speech dan Natural Language

a) Speech (Suara)
Adalah getaran pada suara menimbulkan bunyi “ahh”.
Mulut, tenggorokan, bibir membentuk bunyi.
Input speech dapat berupa pengenalan speaker, pengenalan suara, dan pemahaman
bahasa natural.
b) Natural Language
Memberi arti pada kata-kata.
Input dapat berupa suara atau dari keyboard.
Keuntungan dari Natural Language:
[1] Mudah dipelajari dan diingat.
[2] Lebih kuat.
[3] Cepat, efisien (tidak selalu).
95
[4] Layar yang kecil.
Kekurangan dari Natural Language:
[1] Belum dapat bekerja dengan baik.
[2] Mengasumsikan pengetahuan dari permasalahan.
[3] Membutuhkan keahlian pengetikan.
[4] Peningkatan tidak terlihat.
[5] Implementasi membutuhkan biaya yang mahal.
o. User Interface Software

Aplikasi apa yang biasa digunakan oleh programmer untuk membuat program.
Kombinasi dari objek-objek interface dan perilaku manajemen.
Sekarang sudah object-oriented.
Pustaka dari komponen-komponen perangkat lunak dan routines yang digunakan oleh
programmer:
a) Xwindows : Xtoolkit & Motif
b) Macintosh : Mac Toolbox, MacApp
c) Windows : Windows Developer’s Toolkit
d) Java : Swing
Bagaimana cara kerja toolkit?
Apa yang sebenarnya disediakan olehnya?
Bagaimana mengaturnya?
a) User mengadakan aksi, berinteraksi dengan interface.
b) Aksi-aksi tersebut harus disampaikan kepada aplikasi dalam cara-cara yang penuh
arti.
c) Aplikasi melakukan aksi yang sesuai, mungkin memperbaharui tampilan.
Beberapa model yang terdapat pada User Interface Software:
a) Model Seeheim: Model Percakapan.
b) Model Objek
UI adalah kumpulan objek yang saling berinteraksi.
User secara langsung memanipulasi objek-objek tersebut.
Objek-objek bertanggung jawab untuk mentransmisikan aksi-aksi user ke aplikasi
dengan cara yang berguna.
Object Oriented Systems pada User Interface Software
a) Pemrograman GUI Java dikerjakan dengan AWT dan Swing.
96
b) Lebih banyak model terdistribusi.
c) Aksi utama disini adalah mengirimkan event ke objek-objek sebagai pesan.
d) Pendelegasian yang penting dapat membuat beberapa objek tertentu bertanggung
jawab untuk menangani event.
GUI Builder Tools (Alat Pembuat GUI) pada User Interface Software
Mengapa membangun interface grafis dengan perintah-perintah tekstual?
Mengapa tidak menunjukkan apa yang Anda suka?
Visual builder tools: Visual Basic, Visual C++, Borland Delphi, Symantec Café.
Metode-metode Tool pada User Interface Software
a) Area kerja (interface yang sedang dibangun).
b) Pindahkan dan letakkan interaktor ke dalam area kerja.
c) Spesifikasi lokasi, warna, tampilan, dan sebagainya.
d) Biasanya menyediakan mode Build atau Pengujian.
4. Langkah Kerja
a. Buatlah desain tampilan dari Graphical User Interface (GUI) yang berhubungan dengan
smart home atau smart campus ataupun smart city.
97
Akhir Pembelajaran
Pembelajaran
memahami dan Muka: memahami konsep desain dialog
melakukan desain dialog Ceramah, dan melakukan desain dialog.
pada User Interface (UI). Problem based
learning, latihan.
6. Tugas Laporan
PDF.
7. Referensi:
Publishing Ltd.
Cham: Springer.
98
DESAIN AUDIO
Pokok / Sub Bahasan : Desain Audio:

1. Audio Formats.
2. Compressed vs. uncompressed.
3. Compressed Audio.
4. 11 most common audio file formats.
5. How to use audio in web design.
6. Create a positive user interaction.
7. Enhance the mood of the user.
8. Reward users.
9. Improve accessibility.
10. How to decide when to use audio on your website or app.
11. What audio file format is best for use on the web?
12. Free sounds to download.
1. Tujuan
Mahasiswa mampu mengenal dan memahami penggunaan audio untuk aplikasi komputer
2. Alat dan Bahan

2) PowerPoint
3) Canva
3. Teori Singkat
a. Audio Formats
Program yang digunakan untuk memproses file audio disebut audio codecs, yang
berfungsi mengkompres audio untuk mengirimkan data dan melakukan proses
decompress saat data diterima.
99
Kecepatan audio codecs diukur dengan bitrate (kbps) atau ribuan bits diproses setiap
detiknya.
b. Compressed VS Uncompressed
Compressed audio merupakan sebagian data dihilangkan dari rekaman untuk membuat
ukuran file menjadi lebih kecil sehingga lebih mudah untuk disimpan dan dibagikan.
c. Compressed Audio
Compressed audio dibagi menjadi dua format:
1) Lossless audio formats
Kualitas file jenis ini dijamin sama dengan audio aslinya karena file di decompress ke
ukuran aslinya. Biasanya ukurannya jauh lebih besar dibandingkan dengan format
lossy.
Contoh file jenis ini adalah M4A, MQA, WMA, FLAC, dan ALAC.
2) Lossy audio formats
File audio mengalami sebagian kehilangan data dalam format lossy audio formats,
karena saat file di compress maka file tidak di decompress lagi keukuran semula. File
jenis ini antara lain MP3, AAC, Ogg Vorbis (OGG)
100
d. 11 Most Common Audio File Formats
Gambar 14.1. Audio File Type

1) Advanced Audio Coding (AAC)
The AAC format, short for Advanced Audio Coding, is similar to MP3 and is generally
better for streaming over mobile devices. AAC provides enhanced audio quality even
at the same bit rate. Due to its versatility, it's the default audio format for many
devices, such as iPhones and Android phones, and apps like Apple Music (formerly
iTunes) and YouTube.
2) Audio Interchange File Format
Apple created the Audio Interchange File Format, which is similar to the more well-
known WAV file. AIFF retains all of the original data and tends to be a larger file
size.
Professionals in the music industry might use AIFF files for master recordings before
converting to other formats for distribution. However, AIFF files don’t have time
codes, so they aren’t necessarily helpful in mixing and editing. You can play AIFF files
on Macs and PCs.
101
3) Apple Interchange Audio Codec (ALAC)
This format is Apple’s Lossless Audio Codec (similar to FLAC) and only works on
Apple devices. When decompressed, the audio will be identical to the source material.
Because it retains all the original audio data, many audiophiles and music enthusiasts
use ALAC. It offers a smaller file size than uncompressed formats like WAV or AIFF
while maintaining the same sound quality.
If you want to archive an audio collection, ALAC is a good option. It ensures that
even if the original physical sources (like CDs) are lost or damaged, the digital files
retain the full audio quality.
4) M4A
An M4A file extension is for audio files encoded with advanced audio coding (AAC),
which is lossy compression. It's part of the MPEG-4 multimedia standard and offers
better sound quality than MP3 files at the same bitrate.
You'll often find M4A files in digital storefronts and streaming platforms. It’s also
a popular podcast file format because it offers good quality at a smaller file size.
5) Direct Stream Digital (DSD)
The Direct Stream Digital is a high-quality single-bit format—which means larger file
sizes. They’re usually found on Super Audio CDs and played on high-end audio
systems. DSD isn’t appropriate for streaming.
The DSD uses 1-bit samples at 2.8224 MHz, 64 times the CD's 44.1 kHz sample rate.
Because of its 1-bit depth, DSD recordings can only represent two amplitude values,
but the high sampling rate lets it reproduce audio frequencies up to half the sampling
rate accurately.
DSD was mainly used for SACDs, which were aimed at providing higher sound
quality than traditional CDs. Some specialty stores sell DSD files, but only to cater to
audiophiles who want high-resolution music.
6) Free Lossless Audio Codec (FLAC)
The Free Lossless Audio Codec is an uncompressed, royalty-free codec that also stores
metadata. Most use the format to download and store high-resolution audio files.
FLAC is open-source, so its source code is available for free, and you can use it
without licensing fees. Unlike lossy codecs like MP3 and AAC, which discard audio
data to achieve smaller file sizes, FLAC retains all the audio data from the original
source.
102
The compression ratio for FLAC depends on the type of music or audio, but typically
it ranges from 30% to 50%. This means that a FLAC file will be much smaller than
its equivalent raw WAV or AIFF file but bigger than a lossy MP3 or AAC file of the
same audio.
7) MP4
This multimedia container format supports video, audio, subtitles, images, and even
text. It’s based on Apple QuickTime, but has been standardized as ISO/IEC 14496-14
by the Moving Picture Experts Group.
Many sites like YouTube, Vimeo, and many others use MP4 for their video uploads
due to its high compression and good quality. It's a great format for storing movies,
TV shows, music videos, and other video content.
Many devices can play MP4 files, including smartphones, tablets, computers, and
televisions. Given its wide acceptance, many video editing software tools support
MP4, making it easier for creators to work with their content.
8) MP3
MP3 is a popular lossy compression audio format that offers small file sizes but at the
cost of potentially poor sound quality. It’s a popular choice for media players and
storing files on mobile devices.
Since MP3 files are smaller, transferring them between devices and downloading them
from the internet is easier. MP3 can also be played on a wide variety of devices,
including smartphones, computers, tablets, and standalone MP3 players.
9) OGG
The name "OGG" comes from "ogging," a term from the video game "Netrek."
However, over time, OGG has come to be seen less as an acronym and more as a
brand or umbrella term for the various media formats developed by Xiph.Org.
Ogg Vorbis is similar to MP3s and AACs, and is an open-source codec. Spotify uses
this in their streaming services, streaming at 160kbps for the free version and 320kbps
for the paid version. The OGG container isn’t restricted to any specific codec or
format and can contain streams encoded with various codecs, such as Theora for
video or Vorbis for audio.
OGG is mainly used to store audio files compressed with the Vorbis codec, which is
why people call them "OGG Vorbis". Vorbis offers similar audio quality to MP3 at
lower bit rates. You can also store video streams with OGG, usually using the Theora
codec. It's less common than audio, though.
103
10) Waveform Audio File Format (WAV)
Microsoft and IBM developed the Waveform Audio File Format (WAV) for storing
audio bitstreams on Windows PCs. It’s based on the Resource Interchange File
Format (RIFF) to store both compressed and uncompressed audio files. WAV files
use the Pulse-Code Modulation (PCM) format to store uncompressed audio data,
which you can encode onto audio CDs.
Suppose you're a music producer working on a new track. When recording
instruments and vocals, you'd prefer the WAV format to ensure you're getting the
best quality recordings.
After the recording is done, you mix and master the track using audio editing
software. To prevent quality degradation, the audio remains in WAV format
throughout the whole thing. You might then convert the track to a more compressed
format, like MP3, for distribution or streaming, but keep the original WAV files
because they're the purest, highest quality version.
11) Pulse Code Modulation (PCM)
Pulse Code Modulation is a method used to convert analog audio signals into digital
files.
The analog signal’s amplitude is measured (or "sampled") periodically at uniform
intervals. Each of these sampled values is then rounded to the nearest value within
a set of predetermined levels. Then the quantized values are then represented in
binary form.
PCM was popular for CDs, but today it’s used in telecommunications and music
production to transmit high resolution audio and video.
e. How to Use Audio In Web Design

Menambahkan audio pada website atau aplikasi berbasis web memerlukan perencanaan
dan pemahaman yang baik terhadap pengguna.
Pada masa sekarang, user sudah terbiasa dengan suara-suara saat menggunakan barang
apapun. Contohnya seperti suara camera’s shutter saat mengambil foto menggunakan
handphone. Suara-suara seperti itu dapat membantu kita untuk berinteraksi dengan
aplikasi, dan jika kita tidak mendengar bunyi tersebut kita akan beranggapan bahwa ada
yang salah.
104
f. Create a Positive User Interaction
Did you ever experience the uncomfortable feeling of taking an action on a website and
not being able to understand if it was successful or not?
Web designers usually add visual effects to help users understand what is happening. A
sound can reinforce even more the user interface (UI) interaction, reassuring your user
that their action has been successful.
g. Enhance the Mood of the User

If you are featuring a product or a service presentation on your website or app, the music
in the background can affect the emotions of your user. If you choose your audio carefully,
you can strike a positive note with your audience and they will be more inclined to take
positive action.
h. Reward Users
If you are featuring a product or a service presentation on your website or app, the music
in the background can affect the emotions of your user. If you choose your audio carefully,
you can strike a positive note with your audience and they will be more inclined to take
positive action.
i. Improve Accessibility
It could be easily forgotten that some visitors might be visually impaired. It’s good to give
attention to these users and make your content accessible to them. Audio is the best option
in this regard. When you enable an audio reading of your text, you will perfectly serve
the needs of your visually impaired users.
j. How to Decide When to Use Audio on Your Website or App

Berikut adalah beberapa faktor yang harus dipertimbangkan sebelum memilih audio
yang akan digunakan dalam website:
1) Is The Audio Necessary?
Audio is not used to entertain the user. It must make an action obvious or send a clear
message. Make sure you associate the sound with an action that requires the attention
of your user. Avoid using sounds for general interactions while the user is navigating
your website or app. For instance, you don’t need to have a sound every time they
click on a link.
105
2) Is The Audio Annoying?
This has to do with the kind of sound you choose and how often it will be repeated
during the navigation. Make sure, for instance, that the sound is short and pleasant to
listen to. In any case, the sound shouldn’t be repeated too many times, especially if it
is not strictly necessary.
3) Where Will the User Most Likely Use The Application?
Some web apps are mainly used in open, possibly noisy environments. Others are more
related to office environments or quiet settings. Considering where the most common
environment that the app will be used in will give you important insights into the type
of audio to use. In a noisy environment, for instance, your sounds must be louder and
more pitchy, while in an office setting, deep-toned sounds are more appropriate since
they cause less distraction.
4) Who Is Your User?
Your audience is a primary factor in determining the kind of sound you will add to
your website or app. Are you addressing young people, children, businessmen, women,
others? Make sure the sound you choose resonates with your audience. Even the topic
of your website is a critical factor. Obviously, an app used for leisure time will have
sounds that are very different than an app used for financial purposes.
5) Think About Performances
Adding sounds should never affect the performances of your website or web app. If
your site or application is not fast enough because of the audio files, the user
experience will suffer. Audio files can be very large, even larger than most images. A
good practice is to avoid having audio files download alongside HTML and images.
Performances will improve if the audio loads in the background after the page has
loaded.
Even better is the option of using the Web Audio API whenever possible. Even though
it is not yet supported by all browsers, the Web Audio API is supported on some of the
main ones like Chrome, Firefox, Safari, and Opera. Another advantage of the Web
Audio API is that it allows you to create your custom audio from scratch.
k. What audio file format is best for use on the web?

The best audio file formats to use on the web are MP3s and MP4s. They’re most likely to
be compatible with most web browsers such as Google Chrome and Firefox. Other
106
formats that most browsers support include AAC, OGG, and WAV, though they tend to
have large file sizes.
l. Free Sounds to Download

Pada gambar di bawah ini merupakan beberapa contoh dari suara yang bisa di download
secara gratis:
Gambar 14.2. Pixabay
Gambar 14.3. Uppbeat
4. Langkah Kerja
a. Masukkanlah file audio pada hasil desain Graphical User Interface (GUI) yang sudah
dibuat pada pertemuan sebelumnya.
107
d. Kerjakan secara berkelompok, kumpulkan hasil tugasnya dan presentasikan di depan
kelas.
Akhir Pembelajaran
Pembelajaran
mengenal dan memahami Muka: memahami konsep desain audio.
penggunaan audio untuk Ceramah,
aplikasi komputer. Problem based
learning, latihan.
6. Tugas Laporan
Berdasarkan langkah kerja yang telah dikerjakan sebelumnya, buatlah file presentasi dan
presentasikan hasil kerjaan kelompok anda di depan kelas.
7. Referensi:
Publishing Ltd.
Cham: Springer.
108
HELP DAN DOKUMENTASI
Pokok / Sub Bahasan : Help dan Dokumentasi:

1. Definisi Help dan Dokumentasi.
2. Sifat-sifat Help dan Dokumentasi.
3. Jenis-jenis Help dan Dokumentasi.
4. Merancang Help dan Dokumentasi.
5. Isu Presentasi dalam Help dan Dokumentasi.
6. Masalah yang ada dalam implementasi.
7. Writing Documentation.
8. Tips Menulis Help.
1) Tujuan
Mahasiswa mampu memahami proses penyusunan help dokumentasi.
2) Alat dan Bahan

2) PowerPoint
3) Canva
3) Teori Singkat
a. Definisi Help dan Dokumentasi
Rancangan sistem yang baik adalah rancangan dimana user dapat langsung
menggunakan sistem dengan mudah tanpa pelatihan dan program bantuan sama sekali.
Hal ini mungkin ideal, akan tetapi jauh dari kenyataan. Pendekatan yang lebih membantu
adalah dengan mengasumsikan bahwa user akan membutuhkan bantuan pada suatu
waktu dan merancang bantuan (help) dan dokumentasi ke dalam sistem.
Sistem bantuan berorientasi terhadap masalah khusus sedangkan dokumentasi
berorientasi kepada sistem dan sifatnya umum.
109
b. Sifat-sifat Help dan Dokumentasi
Di bawah ini merupakan sifat-sifat help dan dokumentasi:
1) Availabillity
User dapat menggunakan help selama berinteraksi dengan sistem (tidak perlu keluar
aplikasi untuk membuka help).
2) Accuracy dan Completeness
Help tersedia secara lengkap dan akurat.
3) Consistency
Konsistensi pada sistem yang ada, juga dari sisi konten, terminology, dan bentuk
presentasi.
4) Robustness
Help dan dokumentasi biasanya digunakan oleh user yang sedang dalam kesulitan.
5) Unobtrusiveness
Help dan dokumentasi seharusnya tidak mencegah user dalam melanjutkan
pekerjaanya. Presentasi help atau dokumentasi dapat menggunakan layer terpisah.
c. Jenis-jenis Help dan Dokumentasi

1) Paper Based (tercetak)
a) Keunggulan Paper Based (tercetak)
[1] Pengguna dapat menggunakannya di luar masa pengerjaan tugas.
[2] Pengguna dapat menuliskan catatan tertentu yang diperoleh saat menjalankan
sistem.
b) Kekurangan Paper Based (tercetak)
[1] Agak sulit mendeskripsikan sesuatu yang bergerak.
[2] Sulit menyesuaikan antara sesuatu yang dibaca dengan kenyataan yang
sebenarnya di dalam sistem.
[3] Pengguna akan kesulitan membaca saat menjalankan sistem, karena kurang
praktis.
2) Computer based
Jenis dari computer based:
a) Command assistance
Ditemui pada sistem DOS dan UNIX. Pengguna dapat menggunakan bantuan
dengan mengetikkan parameter tertentu.
110
b) Command prompts
Jenis bantuan yang biasanya tampil bila pengguna melakukan kesalahan sederhana
misalnya kesalahan sintaks.
c) Context sensitive help
Jenis ini berbentuk menu based system yang menyediakan bantuan pada menu
option.
d. Merancang Help dan Dokumentasi

Hal-hal yang perlu diperhatikan dalam merancang help dan dokumentasi yaitu:
1) Perancangan seharusnya tidak seperti “add-on” pada sistem. Secara ideal seharusnya
merupakan bagian integral dalam sistem.
2) Perancangan harus memperhatikan isi dari bantuan dan konteks sebelum teknologi
tersedia.
e. Isu Presentasi dalam Help dan Dokumentasi

Bagaimana help dan dokumentasi dipanggil?
Pilihan pertama bagi perancang untuk membuat bagaimana bantuan dapat diakses oleh
user. Bantuan ini dapat berupa command, tombol fungsi yang dapat memilih on atau off
atau aplikasi yang terpisah.
Bagaimana help dan dokumentasi ditampilkan?
Dalam sistem window akan ditampilkan dalam window yang baru. Dalam sistem lain
mungkin dalam layar yang penuh atau bagian dari layar. Alternatif lain dapat berbentuk
pop-up box atau tingkat command line.
Bagaimana help dan dokumentasi memiliki keefektifan?
Tidak menjadi masalah teknologi apa yang digunakan untuk membuat help dan
dokumentasi, tetapi yang perlu diperhatikan yaitu prinsip keefektifan.
f. Masalah yang ada dalam implementasi

Para perancang harus membuat keputusan untuk implementasi berupa secara fisik
maupun pilihan yang tersedia untuk user. Keputusan ini sudah termasuk dalam
pernyataan command operating system, apakah berbentuk meta-command atau aplikasi.
Hambatan fisik berupa screen space, kapasitas memori dan kecepatan.
Masalah lain adalah bagaimana struktur data bantuan: apakah berbentuk single file,
hierarchy file atau database.
111
g. Writing Documentation
Siapa yang seharusnya menulis dokumentasi?
Programmer, Technical author dan Outsourcing.
Siapa yang harus melakukan review dokumentasi?
Setiap dokumentasi harus di-review oleh paling sedikit satu orang ahli. Selain itu orang-
orang yang dirasa relevan untuk melakukan review bagian dari dokumentasi juga dapat
melakukan review.
Siapa yang harus memanage dokumentasi?
Documentation project manager wajib terlibat dalam penulisan dan pe-review-an
dokumentasi. Selain itu juga memanage dokumentasi.
h. Tips Menulis Help

Berikut ini adalah beberapa tips untuk menulis help:
1) Think about what your audience needs (wants).
2) If you can’t talk to your users, talk to your Help Desk and Training departments.
3) Plan your Table of Contents, before you start writing.
4) Structure the Table of Contents, so that your users will find it easy to navigate.
5) Write to a level of detail that is appropriate for your audience.
6) Name your topics sensibly so that a user can look at them and know what information
they’ll find within a particular topic.
7) Have just one procedure per topic.
8) Address your instructions directly to the user – avoid the passive voice.
9) Don’t mix conceptual information with instructional information.
10) Use a style sheet for consistency.
11) Use popups/expanding text/drop-down text to hide any information that will be
optional for the user.
12) Avoid using indentation to indicate sub-sections.
13) Spend time on the index, as many users will look for topics here.
14) Include synonyms in your index.
15) Avoid use of a large screen-capture, instead, clip the image to show only the part
being describe.
112
4) Langkah Kerja
a. Buatlah help dan dokumentasi pada desain Graphical User Interface (GUI) di pertemuan
sebelumnya.
5) Rubrik Ketercapaian
Akhir Pembelajaran
Pembelajaran
memahami proses Muka: memahami penyusunan help
penyusunan help Ceramah, dokumentasi dan kemampuan dalam
dokumentasi. Problem based menyusun help dokumentasi.
learning, latihan.
6) Tugas Laporan
PDF.
113
7) Referensi:
Publishing Ltd.
Cham: Springer.
114
DESAIN MOBILE
Pokok / Sub Bahasan : Desain Mobile:

1. What is mobile UI?
2. 8 mobile UI design tips every designer should follow.
3. Design guidelines.
4. Guide to mobile app design.
5. Skeuomorphic design.
6. Flat design.
7. Material design.
8. Hal yang perlu diperhatikan sebelum membuat desain
mobile.
1. Tujuan
Mahasiswa mampu memahami konsep dan proses desain UI untuk mobile.
2. Alat dan Bahan

2) PowerPoint
3) Canva
3. Teori Singkat
a. What is Mobile UI?
Antarmuka Pengguna Ponsel, atau UI Ponsel, adalah tampilan atau layar pada
perangkat seluler. Ini adalah ruang di mana pengguna dapat berinteraksi dengan apa yang
ada di layar - mulai dari tombol menu hingga kolom teks (dan segala sesuatu di antaranya,
tergantung pada apakah pengguna dapat mengetuk, menggulir, menyapu, mengetik, atau
hanya melihatnya).
115
Sebagian besar interaksi pengguna ini berbasis sentuhan dan terjadi pada layar sentuh
berwarna-warni yang penuh dengan interaksi tingkat tinggi. Secara alami, prinsip dasar
desain UI ponsel berbeda dari prinsip UI desktop tradisional. Pada dasarnya, pengguna
bergerak, kontrol terbatas, memberikan makna baru pada frase 'semua jari'. Tindakan dan
informasi perlu besar, jelas, tegas, dan sederhana.
b. 8 Mobile UI Design Tips Every Designer Should Follow

Berikut merupakan 8 tips atau panduan desain antarmuka pengguna mobile yang
seharusnya diikuti oleh setiap desainer:
1) Pastikan visi yang jelas mengenai aplikasi mobile yang ingin dibuat.
Mari mulai dengan beberapa dasar antarmuka pengguna (UI) yang mungkin Anda
pahami selama tahap awal proses desain produk visi.
Visi adalah apa yang dibagikan sejak awal desain aplikasi seluler anda. Ini harus
disampaikan dengan jelas (dan, jika memungkinkan, secara visual) kepada semua
pemangku kepentingan kunci, sehingga semua orang, tanpa memandang departemen,
mengetahui tujuan dan tujuan proyek.
Ini mencegah orang-orang bekerja pada apa yang mereka pikir visinya atau
seharusnya, menarik ke arah yang berbeda, menambahkan fitur lebih banyak dan lebih
banyak (dan melewatkan semua batas waktu).
Singkatnya, dengan visi yang jelas, seluruh proses desain dan pengembangan menjadi
lebih efisien. Semua orang memahami seperti apa keberhasilan yang diharapkan,
peran mereka dalam proyek, dan apa yang dibutuhkan dari mereka.
2) Tingkatkan desain produk dalam setiap iterasi.
‘Peningkatan progresif’ adalah cara untuk terus menyempurnakan desain anda hingga
mencapai tingkat yang anda butuhkan. Jadi, alih-alih menghabiskan waktu, uang, dan
sumber daya berharga lainnya untuk menciptakan versi yang sempurna dalam satu
langkah, Anda memulainya dengan konsep dasar – mungkin dalam bentuk wireframe,
mockup, atau prototipe lo-fi yang dapat ditingkatkan oleh tim anda hingga sesuai
dengan visi keseluruhan aplikasi seluler.
Ini tidak berbeda dengan pendekatan yang digunakan pengembang perangkat lunak
dalam mengembangkan modul-modulnya. Sedikit demi sedikit. Itu tidak sesulit yang
mungkin terlihat pada awalnya. Dengan menggunakan alat desain, seperti UXPin
Merge, Anda dapat dengan cepat memulai pembuatan prototipe aplikasi seluler
dengan komponen kode yang sepenuhnya interaktif yang terlihat dan berfungsi seperti
116
aplikasi nyata Android atau iOS. Ini tidak hanya memastikan kecepatan dan efisiensi
kerja, tetapi juga berguna saat anda menjalankan uji pengguna.
anda dapat dengan cepat membuat prototipe yang terlihat dan terasa seperti aplikasi
seluler nyata, menguji desain pengalaman pengguna, dan mengulang berdasarkan
hasil uji. Elemen UI yang Anda gunakan untuk prototyping adalah kode langsung.
Artinya, komponen-komponen ini terlihat dan berfungsi sama dengan yang digunakan
oleh tim pengembangan anda untuk produksi.
3) Jaga keseragaman (uniformity) desain.
Desain anda harus konsisten di seluruh papan, mulai dari tombol dan ikon hingga
warna merek. Kunjungi Amazon di ponsel anda. Itu adalah contoh utama konsistensi
desain antarmuka pengguna aplikasi seluler. Setiap aspek desain seragam, dari palet
warna hingga tata letak halaman, baik Anda membeli oven microwave baru atau buku
bekas.
Ini bukan hanya karena enak dipandang. Ini tentang membantu pengguna untuk
familiar dengan aplikasi, sehingga pada akhirnya, mereka bahkan tidak perlu berpikir
tentang apa yang mereka lakukan. Setiap tindakan akan menjadi intuitif dan menarik.
Untuk memastikan keseragaman, anda mungkin akan menemukan berguna untuk
menambahkan kit antarmuka pengguna seluler ke dalam sistem desain anda.
Jadilah spesifik jika diperlukan. Misalnya, apakah semua tombol panggilan untuk
tindakan dalam warna tertentu? Haruskah jenis huruf tertentu digunakan atau
dihindari? Tanyakan pada diri sendiri pertanyaan-pertanyaan tersebut sebelum anda
perlu menjawabnya.
4) Pastikan splash screen menarik.
Splash screen seharusnya menarik perhatian pengguna dan cepat. Ketika aplikasi anda
mulai di latar belakang, anda dapat menggunakan splash screen anda untuk
melibatkan pengguna. Karena, mari kita akui, di era segalanya instan, tidak ada yang
ingin duduk, menunggu, dan tidak melakukan apa-apa.
Ilustrasi yang menarik perhatian. Headline yang tak terlewatkan. Promosi merek. Tips
pengguna. Semua ini dapat membuat pengguna terlibat dan mencegah mereka keluar
dan menghapus aplikasi pada saat pertama kali. Pertimbangkan untuk menambahkan
batang kemajuan, terutama jika aplikasi anda membutuhkan waktu untuk dimuat.
Pengguna suka tahu bahwa sesuatu sedang terjadi.
Hanya saja, jangan berlebihan.
117
Splash screen anda seharusnya sederhana. Nama aplikasi, logo Anda, gambar latar
belakang - tidak perlu mewah untuk memberikan kesan pertama yang hebat.
5) Tampilkan data dengan sejelas mungkin.
Tata letak adalah faktor desain antarmuka pengguna seluler yang penting, terutama
saat menyajikan statistik dan data. Jika ini merupakan bagian inti dari aplikasi anda,
maka luangkan waktu untuk mengidentifikasi cara membuatnya mudah dibaca,
diinterpretasi, dan diekstrapolasi.
Tanyakan: Apakah teksnya mudah dibaca? Apakah pengguna dapat dengan mudah
memilah grafik dan diagram? Apakah arti ikon jelas?
Mungkin juga bermanfaat untuk mempertimbangkan bagaimana pengguna dapat
memperoleh informasi tersebut dari aplikasi dan memindahkannya ke perangkat lain,
misalnya, saat menggunakan aplikasi akuntansi.
6) Desain agar aplikasi dapat di-load dengan cepat.
Pengguna saat ini lebih tidak sabar daripada sebelumnya. Seberapa sering anda merasa
bosan menunggu dua detik penuh untuk memutar video?
Atau sebuah situs web untuk dimuat?
Karena hampir segalanya online terjadi secara instan dan secara real-time, kita
memiliki toleransi rendah terhadap halaman dan aplikasi yang memuat lambat.
Secara umum, anda sebaiknya mendesain dengan meminimalkan waktu pemuatan
halaman, yaitu sekitar tiga detik. Lebih lama dari itu, dan pengguna anda mulai pergi.
Bagaimana bentuknya?
a) Pastikan hierarki visual dan navigasi yang jelas.
b) Pastikan gambar kecil (dan tidak terlalu banyak).
c) Gunakan kontras, warna, dan ruang kosong untuk meningkatkan keterlihatan dan
menyampaikan emosi yang tepat.
d) Tipografi penting dengan menggunakan ukuran font 11pt atau lebih tinggi dan
batasi penggunaan font hanya dua (2).
e) Buat setiap elemen berarti - dapatkah Anda menggantikan kotak teks dengan ikon?
Gambar latar belakang mungkin terlihat cantik, tetapi apakah itu perlu?
Ingatlah, 94% pengguna seluler menggunakan mode potret, sehingga anda harus
menyampaikan banyak informasi di sepanjang bidang yang sangat sempit.
7) Jangan lupakan accessibility.
Aksesibilitas lebih dari sekadar kata populer. Ini adalah suatu etos desain menyeluruh.
Microsoft adalah contoh bagusnya, di mana desain yang dapat diakses (di bidang
118
komputasi, permainan, dan seluler) pada dasarnya membentuk seluruh budaya
perusahaan. Dan ini adalah sesuatu yang layak diadopsi oleh tim anda sendiri.
Bagaimanapun, ini adalah cara yang bagus untuk mencapai audiens yang lebih luas,
dan menunjukkan bahwa anda menghargai semua pengguna anda.
Tetapi apa arti desain yang dapat diakses benar-benar bagi pengguna seluler?
Salah satu fitur paling umum adalah 'mode tuli warna'. Anda juga sering melihat opsi
untuk memperbesar teks atau elemen interaktif. Ini memiliki keuntungan ganda,
membantu mereka yang memiliki gangguan motorik untuk menavigasi aplikasi Anda,
serta membantu mereka yang memiliki gangguan penglihatan. Hal ini terutama
berguna untuk negara-negara dengan populasi yang menua.
Sebaliknya, desain yang dapat diakses anda akan berbeda jika pengguna target anda
adalah anak-anak. Anak-anak memiliki kemampuan fisik dan kognitif yang sangat
berbeda dari orang dewasa (dan bahkan satu sama lain). Dan meskipun, pada
pandangan pertama, ini mungkin lebih merupakan kekhawatiran untuk desainer UX,
tim desain UI anda perlu mempertimbangkan aspek seperti font, warna, dan elemen
interaktif visual lainnya.
Ini tidak berarti Anda harus mengubah seluruh desain UI seluler anda. Anda dapat
menyertakan opsi aksesibilitas di dalamnya, seperti mode tuli warna. Pastikan hanya
memberi tahu pengguna tentang keberadaannya di menu pengaturan. Namun, lebih
baik menggunakan alat yang memiliki fitur aksesibilitas bawaan, seperti UXPin,
untuk membuat desain UI seluler yang dapat digunakan oleh semua orang.
8) Ikuti prinsip desain UI.
Prinsip desain UI menjaga desain tetap efisien dan ramah pengguna. Desainer tidak
perlu meraba-raba dengan elemen-elemen. Menebak, bereksperimen,
meninggalkannya semua pada kebetulan. Dengan mematuhi prinsip desain UI seluler
yang dapat diprediksi, dan mungkin berhasil, anda dapat menciptakan pengalaman
yang dicintai pengguna anda.
Prinsip dasar desain antarmuka pengguna UXPin membantu anda meningkatkan cara
anda bekerja dan cara pengguna berinteraksi dengan aplikasi seluler anda, baik itu
aplikasi di perangkat Android atau iPhone (petunjuk:ini tentang membuat hidup lebih
mudah bagi mereka).
Mari ambil contoh onboarding sebagai tempat di mana anda dapat menerapkan prinsip
desain UI. Layar onboarding memiliki tujuan yang jelas mereka membimbing
pengguna melalui fungsi-fungsi utama aplikasi. Mereka juga membuat mereka
119
familiar dengan antarmuka aplikasi. Prinsip desain UI seluler untuk onboarding
termasuk memberikan penunjuk yang jelas dan menjaga hal-hal tetap sederhana.
Bagaimana dengan layar beranda? Salah satu prinsip desain UI untuk layar beranda
aplikasi seluler adalah memiliki struktur visual yang jelas.
c. Design Guidelines
Berikut ini adalah beberapa pedoman untuk melakukan desain mobile:
1) Desain untuk Kesederhanaan.
Sesuaikan tampilan visual dengan kepentingan fitur.
Jaga agar navigasi tetap ramping dan dangkal.
Hindari terlalu banyak informasi dalam tiap tampilan.
a) Decluttering
Gambar 17.1. Decluttering

Jaga konten sekecil mungkin (berikan pengguna hanya informasi yang perlu
mereka ketahui).
Jaga elemen antarmuka sekecil mungkin.
Desain yang sederhana akan membuat pengguna merasa nyaman dengan produk.
120
b) Gunakan bobot visual untuk menyampaikan kepentingan
Gambar 17.2. Bobot visual

Elemen yang paling penting di layar harus memiliki bobot visual yang paling besar.
Menambahkan bobot lebih pada suatu elemen dapat dilakukan dengan
menggunakan bobot font, ukuran, dan warna.
c) Optimalkan konten video.
Konten video dioptimalkan untuk mode potret.
Gambar 17.3. Video mode potret
121
d) Desain untuk Sentuhan.
Desain untuk jari, bukan kursor.
Pertimbangkan zona ibu jari.
Gambar 17.4. Desain untuk sentuhan

Ketika merancang target sentuhan, anda dapat mengandalkan studi MIT Touch Lab
(PDF) untuk memilih ukuran yang sesuai untuk elemen interaktif. Studi ini
menemukan bahwa ukuran rata-rata telapak jari antara 10 dan 14 mm, dan ujung
jari antara 8 dan 10 mm, sehingga ukuran target sentuhan minimum yang baik
adalah 10 x 10 mm. Tidak hanya ukuran target yang penting, tetapi juga penting
untuk memiliki jumlah ruang yang tepat antara target. Jika beberapa target
sentuhan berdekatan satu sama lain (misalnya, tombol "Setuju" dan "Tidak
Setuju"), pastikan ada jumlah ruang yang cukup di antara mereka.
Gambar 17.5. Zona ibu jari
122
Gambar 17.6. Zona ibu jadi pada berbagai tampilan
Merancang untuk ibu jari tidak hanya tentang membuat target cukup besar, tetapi
juga tentang mempertimbangkan cara kita memegang perangkat kita. Banyak
pengguna memegang ponsel mereka dengan satu tangan. Hanya sebagian kecil
layar yang akan menjadi wilayah yang benar-benar mudah dijangkau oleh ibu jari
mereka. Wilayah ini disebut zona ibu jari alami. Zona lain memerlukan
perpanjangan jari atau bahkan mengubah pegangan untuk mencapainya. Di bawah
ini, anda dapat melihat seperti apa zona aman pada perangkat seluler modern.
Pertimbangkan semua zona saat merancang untuk seluler:
[1] Zona hijau adalah tempat terbaik untuk opsi navigasi atau tindakan interaktif
yang sering digunakan (seperti tombol panggilan ke tindakan).
[2] Zona merah adalah tempat terbaik untuk opsi potensi berbahaya (seperti
"Hapus" atau "Hapus"). Pengguna kurang mungkin secara tidak sengaja
memicu opsi ini.
123
e) Jadikan teks mudah dibaca dan jelas.
Gambar 17.7. Teks pada layar HP

Keterangan pada Gambar 17.7. di atas:
Kiri: Teks terlalu kecil untuk dibaca pada perangkat kecil tanpa perlu memperkecil
dan memperbesar.
Kanan: Teks nyaman untuk dibaca pada layar seluler.
Kunci tipografi seluler adalah keterbacaan dan kejelasan. Jika pengguna tidak
dapat membaca konten anda, tidak ada gunanya menawarkan konten tersebut.
Pertama, beberapa rekomendasi praktis tentang kejelasan:
[1] Ukuran font
Ukuran font secara umum, apa pun yang lebih kecil dari 16 piksel (atau 11
poin) sulit dibaca di layar apa pun.
[2] Jenis font
Jenis font Sebagian besar pengguna lebih suka jenis huruf yang jelas dan
mudah dibaca. Pilihan yang aman adalah jenis huruf default sistem (Apple iOS
menggunakan huruf San Francisco; Google Android menggunakan Roboto).
[3] Kontras Teks
Kontras Teks berwarna terang (seperti abu-abu terang) mungkin terlihat
estetis, tetapi pengguna akan kesulitan membacanya, terutama di latar
belakang terang. Pastikan ada kontras yang cukup antara font dan latar
belakang untuk keterbacaan yang mudah. Pedoman aksesibilitas konten web
WC3 memberikan rekomendasi rasio kontras untuk gambar dan teks.
124
Dan sekarang, di bawah ini beberapa rekomendasi untuk keterbacaan:
[4] Hindari huruf kapital semua
Hindari huruf kapital semua. Teks huruf kapital semua - artinya teks dengan
semua huruf kapital - baik dalam konteks yang tidak melibatkan pembacaan
yang teliti (seperti singkatan dan logo), tetapi hindari ketika pesan Anda
memerlukan pembacaan yang intensif.
[5] Batasi panjang baris teks
Batasi panjang baris teks. Aturan praktis yang baik adalah menggunakan 30
hingga 40 karakter per baris untuk seluler.
[6] Jangan merapatkan baris
Sebaiknya tidak mengatur baris teks secara terlalu rapat satu sama lain. Hindari
mengurangkan jarak antara baris teks karena dapat mempengaruhi keterbacaan
dan kenyamanan pengguna saat membaca. Pastikan untuk memberikan ruang
yang cukup di antara baris untuk meningkatkan kejelasan dan daya baca teks.
2) Desain dengan perhatikan layar kecil
Minimasi input user.
Minimasi scrolling vertical dan hindari scrolling horizontal.
Gunakan hyperlink secara efektif.
Sediakan pesan error yang berguna.
a) Minimalkan input pengguna
Pertahankan formulir sesingkat mungkin dengan menghapus semua bidang yang
tidak diperlukan. Aplikasi seharusnya hanya meminta informasi paling dasar dari
pengguna.
Gambar 17.8. Meminimalkan input pengguna

125
b) Berikan masker input.
Masker lapangan adalah teknik yang membantu pengguna memformat teks yang
dimasukkan. Masker muncul begitu pengguna fokus pada suatu bidang, dan secara
otomatis memformat teks saat bidang diisi, membantu pengguna untuk fokus pada
data yang diperlukan dan lebih mudah mendeteksi kesalahan.
Berikan masker input, gunakan fitur pintar seperti autocomplete dan gunakan
validasi nilai lapangan secara dinamis.
Gambar 17.9. Penggunaan fitur autocomplete
Gambar 17.10. Penggunaan fitur validasi dinamis

Gunakan fitur pintar seperti autocomplete. Misalnya, mengisi bidang alamat
seringkali menjadi bagian yang paling bermasalah dalam formulir pendaftaran.
Menggunakan alat seperti Place Autocomplete Address Form (yang menggunakan
kedua geo-lokasi dan pengisian alamat sebelumnya untuk memberikan saran yang
akurat berdasarkan lokasi tepat pengguna) memungkinkan pengguna memasukkan
alamat dengan lebih sedikit ketukan dibandingkan dengan menggunakan bidang
input reguler.
126
Validasi nilai lapangan secara dinamis. Ini menjengkelkan ketika, setelah
mengirimkan data, anda harus kembali dan memperbaiki kesalahan. Selalu periksa
nilai bidang segera setelah diisi sehingga pengguna dapat memperbaikinya segera.
Berikan masker input. Masker lapangan adalah teknik yang membantu pengguna
memformat teks yang dimasukkan. Masker muncul begitu pengguna fokus pada
suatu bidang, dan secara otomatis memformat teks saat bidang diisi, membantu
pengguna untuk fokus pada data yang diperlukan dan lebih mudah mendeteksi
kesalahan.
c) Sesuaikan keyboard untuk jenis pertanyaan.
Gambar 17.11. Pertanyaan pada keyboard

Kustomisasi keyboard sesuai dengan jenis pertanyaan. Tampilkan keyboard
numerik saat meminta nomor telepon, dan sertakan tombol @ saat meminta alamat
email. Pastikan fitur ini diimplementasikan secara konsisten di seluruh aplikasi,
bukan hanya untuk formulir tertentu.
127
d) Mengantisipasi kebutuhan pengguna
Gambar 17.12. Antisipasi kebutuhan pengguna

Presentasi adalah alat yang dapat digunakan sebagai demonstrasi, kuliah, pidato,
laporan, dan lainnya. Biasanya disampaikan di depan audiens.
e) Tombol "Kembali" harus berfungsi dengan baik.
Tombol 'Kembali' yang dibuat dengan tidak benar dapat menyebabkan banyak
masalah bagi pengguna. Hindari situasi di mana mengetuk tombol 'Kembali' dalam
proses multi-langkah akan membawa pengguna kembali ke layar utama.
Desain yang baik membuatnya lebih mudah bagi pengguna untuk kembali dan
melakukan koreksi. Ketika pengguna tahu bahwa mereka dapat melihat kembali
data yang mereka berikan atau opsi yang mereka pilih, hal ini memungkinkan
mereka melanjutkan dengan mudah.
f) Artikan pesan error dengan baik.
Kesalahan adalah hal yang manusiawi. Kesalahan terjadi ketika orang berinteraksi
dengan aplikasi. Kadang-kadang, kesalahan terjadi karena pengguna membuat
kesalahan. Kadang-kadang, kesalahan terjadi karena aplikasi mengalami
kegagalan. Apapun penyebabnya, kesalahan-kesalahan ini dan bagaimana mereka
ditangani memiliki dampak besar pada Pengalaman Pengguna (UX). Penanganan
kesalahan yang buruk disertai dengan pesan kesalahan yang tidak berguna dapat
membuat pengguna merasa frustrasi dan mungkin menjadi alasan mengapa
pengguna meninggalkan aplikasi anda.
128
Ambil layar keadaan kesalahan dari Spotify sebagai contoh. Ini tidak membantu
pengguna memahami konteks dan tidak membantu mereka menemukan jawaban
atas pertanyaan, 'Apa yang bisa saya lakukan tentang ini?
3) Sediakan Feedback yang berguna
Identifikasi critical feedback dan pastikan waktu respon sistem cepat.
a) Jadikan aplikasi anda terlihat cepat dan responsif
[1] Fokus pada memuat konten di area terlihat layar
Muat cukup konten untuk mengisi layar ketika halaman dibuka. Konten yang
tersedia saat di-scroll seharusnya terus memuat di latar belakang. Manfaat dari
pendekatan ini adalah bahwa pengguna akan terlibat dalam membaca konten
awal dan, dalam beberapa kasus, mungkin bahkan tidak menyadari bahwa
konten masih dalam proses pemuatan.
[2] Jadikan jelas saat proses loading berlangsung
Layar kosong atau statis yang dilihat pengguna saat konten sedang dimuat
dapat membuat aplikasi anda terlihat membeku, menyebabkan kebingungan
dan frustrasi, dan potensial membuat orang meninggalkan aplikasi anda.
Setidaknya, tampilkan spinner pemuatan yang jelas bahwa sesuatu sedang
terjadi. Untuk waktu tunggu yang lebih lama (lebih dari 10 detik), penting
untuk menampilkan batang kemajuan agar pengguna dapat menilai berapa
lama mereka akan menunggu.
Pertimbangkan untuk membaca 'Best Practices for Animated Progress
Indicators' untuk informasi lebih lanjut tentang indikator pemuatan.
[3] Berikan elemen visual
Jika sebuah aplikasi memberikan pengguna sesuatu yang menarik untuk dilihat
saat menunggu, pengguna akan kurang memperhatikan waktu tunggu itu
sendiri. Oleh karena itu, untuk memastikan orang tidak merasa bosan saat
menunggu sesuatu terjadi, berikan mereka sesuatu yang mengalihkan
perhatian. Indikator menunggu animasi yang baik dapat mempertahankan
perhatian pengguna selama mereka menunggu.
b) Jadikan aplikasi terlihat cepat dan responsif
Skeleton screens (contoh: wadah informasi sementara) pada dasarnya adalah versi
kosong dari halaman di mana informasi secara bertahap dimuat.
129
Gambar 17.13. Skeleton screens
c) Umpan balik pada interaksi
Di dunia fisik, objek memberikan respons terhadap interaksi kita. Orang
mengharapkan tingkat responsivitas yang serupa dari kontrol antarmuka pengguna
digital. Anda perlu memberikan umpan balik instan pada setiap interaksi pengguna.
Jika aplikasi Anda tidak memberikan umpan balik, pengguna akan bertanya-tanya
apakah aplikasi itu membeku atau jika mereka melewatkan sasaran. Umpan balik
dapat berupa visual (menggantikan tombol yang ditekan) atau taktil (getaran
perangkat pada input).
4) Jaga standar desain yang sudah ada
Gunakan standar yang sudah ada.
Gunakan istilah-istilah yang ada didunia nyata.
a) Sederhanakan navigasi
Gunakan komponen navigasi standar, berikan prioritas pada opsi navigasi, jangan
campuradukkan pola navigasi dan buat navigasi terlihat.
130
Gambar 17.14. Penyederhanaan bentuk navigasi
b) Gunakan layar yang familiar
Gambar 17.15. Penggunaan layar yang familiar

Layar yang familiar adalah layar yang sering ditemui oleh pengguna di banyak
aplikasi. Layar seperti 'Memulai,' 'Apa yang baru,' dan 'Hasil Pencarian' telah
menjadi standar de facto untuk aplikasi seluler. Mereka tidak memerlukan
penjelasan tambahan karena pengguna sudah akrab dengan mereka. Ini
memungkinkan pengguna menggunakan pengalaman sebelumnya untuk
berinteraksi dengan aplikasi, tanpa kurva pembelajaran.
131
c) Hindari istilah khusus
Gambar 17.16. Hindari istilah khusus

Komunikasi yang jelas selalu harus menjadi prioritas utama dalam setiap aplikasi
seluler. Gunakan pengetahuan anda tentang audiens sebagai target untuk
menentukan apakah kata-kata atau frasa tertentu sesuai.
d) Buat desain yang konsisten
Konsistensi adalah prinsip dasar desain. Konsistensi menghilangkan kebingungan.
Menjaga tampilan keseluruhan yang konsisten dalam suatu aplikasi sangat penting.
Terkait dengan aplikasi seluler, konsistensi memiliki makna sebagai berikut:
[1] Konsistensi visual
Jenis huruf, tombol, dan label perlu konsisten di seluruh aplikasi.
[2] Konsistensi fungsional
Elemen interaktif harus berfungsi dengan cara yang serupa di semua bagian
aplikasi.
[3] Konsistensi eksternal
Desain harus konsisten di sejumlah produk. Dengan cara ini, pengguna dapat
menerapkan pengetahuan sebelumnya ketika menggunakan produk lain.
Bagaimana membuat desain konsisten:
[1] Patuhi panduan platform
Setiap sistem operasi seluler memiliki panduan standar untuk desain
antarmuka yaitu Apple's Human Interface Guidelines dan Google's Material
132
Design Guidelines. Saat merancang untuk platform asli, ikuti panduan desain
OS untuk kualitas maksimal. Alasan mengapa mengikuti panduan desain
penting adalah sederhana: Pengguna menjadi akrab dengan pola interaksi
setiap OS, dan apa pun yang bertentangan dengan panduan akan menciptakan
gesekan.
[2] Jangan meniru elemen antarmuka pengguna dari platform lain
Saat membangun aplikasi untuk Android atau iOS, hindari menggunakan
elemen antarmuka pengguna dari platform lain. Ikon, elemen fungsional
(kotak input, checkbox, switch), dan jenis huruf harus memiliki nuansa asli.
Gunakan komponen asli sebanyak mungkin, agar pengguna percaya pada
aplikasi.
[3] Pertahankan konsistensi aplikasi seluler dengan situs web
Ini adalah contoh konsistensi eksternal. Jika memiliki layanan web dan
aplikasi seluler, pastikan keduanya memiliki karakteristik yang serupa. Ini
akan memungkinkan pengguna beralih dengan lancar antara aplikasi seluler
dan web seluler. Ketidak konsistenan dalam desain (misalnya, skema navigasi
yang berbeda atau skema warna yang berbeda) bisa menyebabkan
kebingungan.
e) Merancang antarmuka yang dapat diakses
Berhati-hatilah terhadap penderita daltonisme (kondisi penglihatan yang
memengaruhi kemampuan seseorang untuk membedakan beberapa warna).
Buatlah animasi opsional.
Gambar 17.17. Form tanpa validasi
133
Gambar 17.18. Form menggunakan validasi
Desain bidang formulir hanya mengandalkan warna merah dan hijau untuk
menunjukkan bidang dengan dan tanpa kesalahan. Pengguna yang menderita
daltonisme tidak dapat membedakan bidang yang di-highlight dengan warna
merah.
f) Fokus pada pengalaman pertama (first-time experience)
[1] Hindari dinding masuk (sign-in walls) yang bertele tele
Gambar 17.19. Halaman awal pada Pinterest

Pinterest meminta pengguna untuk membuat akun baru atau masuk saat
pertama kali dimuat.
Dinding pendaftaran (sign-in wall) adalah pendaftaran wajib sebelum
menggunakan aplikasi. Ini adalah sumber gesekan umum bagi pengguna dan
salah satu alasan mengapa pengguna meninggalkan aplikasi. Jumlah pengguna
yang meninggalkan proses pendaftaran terutama signifikan untuk aplikasi
134
dengan pengenalan merek rendah atau yang nilai proposisinya tidak jelas.
Sebagai aturan umum, hanya minta pengguna mendaftar jika itu sangat penting
(misalnya, jika fitur inti aplikasi hanya tersedia saat pengguna menyelesaikan
pendaftaran). Dan bahkan dalam hal ini, lebih baik menunda masuk sebanyak
mungkin - izinkan pengguna merasakan aplikasi untuk sementara waktu
(misalnya, mengambil tur), dan hanya kemudian dengan lembut mengingatkan
mereka untuk mendaftar. Ini akan memberikan pengalaman kepada pengguna,
dan mereka akan lebih cenderung mendaftar.
[2] Buatlah pengalaman onboarding yang baik
Gambar 17.20. Tes cepat pada Duolingo

Dalam konteks UX mobile, memberikan pengalaman onboarding yang sangat
baik adalah dasar untuk mempertahankan pengguna. Tujuan onboarding
adalah menunjukkan nilai yang diberikan aplikasi. Di antara banyak strategi
onboarding, salah satunya sangat efektif aeperti onboarding kontekstual.
Onboarding kontekstual berarti petunjuk diberikan hanya ketika pengguna
membutuhkannya. Duolingo adalah contoh yang sangat baik. Aplikasi ini
menggabungkan tur interaktif dengan pengungkapan progresif untuk
menunjukkan kepada pengguna cara kerja aplikasi. Pengguna didorong untuk
langsung ikut serta dan melakukan tes cepat dalam bahasa yang mereka pilih.
Ini membuat pembelajaran menjadi menyenangkan dan mudah ditemukan.
135
g) Jangan minta informasi pengaturan di awal
Gambar 17.21. Gambaran pengaturan awal

Hindari situasi di mana hal pertama yang dilihat pengguna saat meluncurkan
aplikasi adalah dialog yang meminta izin. Sama seperti dinding masuk atau fase
pengaturan awal, permintaan izin saat peluncuran harus dilakukan hanya ketika itu
benar-benar diperlukan untuk fungsi inti aplikasi. Pengguna tidak akan terganggu
oleh permintaan ini jika jelas bahwa aplikasi bergantung pada izin tersebut untuk
beroperasi (misalnya, jelaskan mengapa editor foto meminta akses ke foto).
Beberapa saran hal pertama yang dilihat pengguna saat meluncurkan aplikasi:
[1] Minta hanya apa yang jelas dibutuhkan aplikasi
Jangan minta semua izin yang mungkin. Akan mencurigakan jika aplikasi
meminta sesuatu yang tidak jelas dibutuhkannya. Misalnya, aplikasi alarm
yang meminta izin untuk mengakses daftar kontak akan mencurigakan.
[2] Jelaskan mengapa aplikasi membutuhkan informasi tersebut, jika tidak jelas.
Terkadang perlu memberikan konteks lebih untuk permintaan. Untuk alasan
ini, pengembang dapat merancang peringatan kustom untuk meminta izin.
h) Menghumanisasi pengalaman digital
[1] Pengalaman terpersonalisasi
Personalisasi adalah salah satu aspek paling kritis dari aplikasi seluler saat ini.
Ini adalah kesempatan untuk terhubung dengan pengguna dan menyediakan
informasi yang mereka butuhkan dengan cara yang terasa otentik.
Ada banyak cara untuk meningkatkan UX seluler dengan menggabungkan
personalisasi. Mungkin untuk menawarkan konten yang dipersonalisasi
tergantung pada lokasi pengguna, pencarian masa lalu, dan pembelian masa
lalu mereka. Misalnya, jika pengguna lebih suka membeli kelompok produk
136
tertentu setiap bulan, sebuah aplikasi mungkin melacaknya dan menawarkan
penawaran khusus pada jenis produk tersebut.
[2] Animasi menyenangkan
Berbeda dengan animasi fungsional, yang digunakan untuk meningkatkan
kejelasan antarmuka pengguna, animasi menyenangkan digunakan untuk
membuat antarmuka terasa manusiawi. Jenis animasi ini menunjukkan bahwa
orang yang merancang aplikasi peduli terhadap pengguna mereka.
[3] Optimalkan notifikasi push
Notifikasi yang mengganggu adalah alasan utama orang menghapus aplikasi
seluler (menurut 71% responden). Jangan kirim notifikasi push hanya karena
bisa. Setiap notifikasi harus berharga dan waktu yang tepat.
Ketika pengguna mulai menggunakan aplikasi, mereka tidak akan keberatan
mendapatkan notifikasi, asalkan nilai yang mereka dapatkan jauh lebih besar
daripada gangguan. Hampir 50% pengguna bersyukur atas notifikasi yang
menarik minat mereka. Personalisasi konten untuk menginspirasi dan
menyenangkan adalah kunci. Netflix adalah contoh yang sangat baik dari
perusahaan yang "mendorong nilai". Ini dengan hati-hati menggunakan data
penonton untuk menyajikan rekomendasi yang terasa dibuat khusus.
[4] Pertimbangkan saluran lain untuk mengirim pesan
Notifikasi push bukan satu-satunya cara untuk menyampaikan pesan. Gunakan
email, notifikasi dalam aplikasi, dan pesan umpan berita untuk memberi tahu
pengguna tentang acara penting, sesuai dengan tingkat urgensi dan jenis
konten yang ingin dibagikan.
i) Optimalkan desain seluler
[1] Desain untuk gangguan
Kita hidup di dunia yang sering terganggu. Sesuatu selalu mencoba untuk
mengalihkan perhatian kita ke tempat lain. Belum lagi, banyak sesi seluler
terjadi ketika pengguna sedang bepergian. Sebagai contoh, pengguna mungkin
menggunakan aplikasi sambil menunggu kereta. Sesi seperti itu dapat
terganggu kapan saja. Pengguna dapat dengan mudah frustrasi ketika sebuah
aplikasi melupakan kemajuan terkini begitu mereka menutupnya.
Ketika terjadi gangguan, aplikasi sebaiknya menyimpan keadaan (konteks)
terkini dan memungkinkan pengguna untuk melanjutkan dari tempat terakhir.
137
Hal ini akan memudahkan pengguna untuk terlibat kembali dengan aplikasi
ketika mereka kembali setelah gangguan.
[2] Manfaatkan kemampuan perangkat
Perangkat seluler memiliki banyak sensor (kamera, pelacakan lokasi,
accelerometer) yang dapat digunakan untuk meningkatkan UX. Berikut adalah
beberapa fitur yang dapat dimanfaatkan untuk hal tersebut:
i. Kamera
Pengguna dapat menyederhanakan operasi input data dengan menggunakan
kamera. Sebagai contoh, pengguna dapat menggunakan kamera digital
untuk membaca nomor kartu kredit secara otomatis.
ii. Pemahaman lokasi
Pemahaman lokasi aplikasi dapat menggunakan data lokasi perangkat
untuk menyediakan konten yang relevan dengan lokasi pengguna atau
untuk menyederhanakan beberapa operasi. Sebagai contoh, jika merancang
aplikasi untuk pengiriman makanan, alih-alih meminta pengguna untuk
memberikan alamat pengiriman, maka dapat mendeteksi lokasi mereka saat
ini secara otomatis dan meminta pengguna untuk mengonfirmasi bahwa
mereka ingin menerima pengiriman ke lokasi tersebut.
iii. Otentikasi biometrik
Pengguna dapat meminimalkan jumlah langkah yang diperlukan untuk
masuk ke aplikasi dengan menggunakan fitur seperti login sentuh sidik jari
atau identifikasi wajah.
Gambar 17.21. Otentikasi biometrik

138
j) Pengujian dan umpan balik
Semua prinsip yang baru saja dibaca dapat membantu dalam merancang
pengalaman seluler yang lebih baik, namun prinsip tersebut tidak akan
menggantikan kebutuhan akan riset dan pengujian pengguna. Oleh karena itu
masih perlu menguji solusi dengan pengguna sebenarnya untuk memahami bagian
mana dari UI yang memerlukan perbaikan.
[1] Feedback Loop
Dorong umpan balik pengguna di setiap kesempatan. Untuk mengumpulkan
umpan balik yang berharga, maka perlu memudahkan pengguna untuk
memberikannya. Jadi, bangun mekanisme umpan balik langsung ke dalam
produk. Ini bisa sesederhana formulir bertanda “Tinggalkan masukan.”
Pastikan saja itu berfungsi dengan lancar untuk pengguna.
[2] Desain adalah proses yang tidak pernah berakhir
Dapat dikatakan bahwa desain adalah proses perbaikan terus-menerus.
Sebagai desainer produk, maka gunakanlah analitik dan masukan pengguna
untuk terus meningkatkan pengalaman.
d. Skeuomorphic Design
Skeuomorphism adalah elemen yang terlihat seperti benda dunia nyata. Aplikasi didesain
untuk memiliki elemen yang terlihat dan berperilaku seperti counterpart mereka didunia
nyata.
Contoh: Tekstur kayu, kertas robek dan pita yang dijahit, dll
Gambar 17.22. Skeuomorphism dengan tekstur kayu
139
Misalnya, tekstur kertas dapat merangsang ingatan tentang bagaimana bentuk dari kertas
itu. Contoh lain, objek yang seolah-olah seperti bentuk tombol mewakili bahwa objek
tersebut dapat di tekan atau diklik.
1) Kelebihan pada skeuomorphism
a) User merasa lebih nyaman karena sudah familiar dengan tampilannya.
b) Kemampuan untuk menyampaikan atau membangkitkan emosi tertentu. Dengan
meniru bagaimana objek dunia nyata terlihat, elemen digital juga bisa menyulap
sifat lain dari objek tersebut.
2) Kekurangan pada skeuomorphism
a) Pengguna dapat kebingungan jika UI tidak berperilaku seperti yang diasumsikan.
b) Boros space layout, terutama bagi pengguna ponsel dengan layar kecil.
e. Flat Design
Flat design adalah desain dengen pendekatan minimalistik yang lebih mengutamakan
usability. Biasanya memuat tampilan yang bersih, lapang, sudut-sudt yang tegas, dan
warna cerah.
Gambar 17.23. Flat design

Dalam flat design elemen ornamental dianggap sebagai hal yang tidak diperlukan. Jika
suatu aspek interface tidak memiliki fungsi, maka hanya akan menjadi distractor bagi
pengguna.
140
1) Karakter flat design
Flat design dikembangkan untuk membuat website dan aplikasi mobile menjadi jauh
lebih responsif dalam berbagai variasi ukuran layar.
Berikut beberapa karakter dari flat design menurut MasterClass:
a) Warna-warna yang cerah
Karena flat design pada UI pada dasarnya adalah desain yang minimalis, maka ia
menggunakan warna-warna cerah untuk menyampaikan isyarat visual kepada
pengguna.
b) Bentuk-bentuk yang simpel
Dalam flat design, bentuk-bentuk yang dipilih dirancang dengan detail yang
minim. Alih-alih menggunakan gambar yang realistis dan kompleks, gaya desain
ini menggunakan seni vektor dua dimensi yang sederhana untuk menggambarkan
objek.
c) Tekstur yang minimal
Penggunaan tekstur dalam flat design juga cenderung minim. Bahkan, gradien dan
drop shadow tidak banyak digunakan.
d) Tipografi yang simpel
Dalam flat design, kamu tidak akan menemukan font yang mencolok. Biasanya,
gaya desain ini menggunakan tipografi yang sederhana seperti Sans Serif yang
mudah dibaca dan mempercepat proses loading. Tipografi yang simpel membuat
UX menjadi lebih efisien.
2) Kelebihan pada flat design
a) Tipografinya mudah dibaca.
b) Memiliki visual yang tajam dan bersih.
c) Desain yang responsif.
3) Kekurangan pada flat design
a) Membuat tipografi yang jelek lebih kentara
Flat design memang dapat membantu menciptakan fokus pada tipografi yang baik.
Sayangnya, gaya desain ini juga dapat membuat tipografi yang jelek menjadi lebih
jelas. Maka dari itu, perlu ekstra hati-hati dalam menentukan tipografi untuk
desainmu jika ingin menggunakan gaya desain ini.
b) Dapat terlihat terlalu simpel
Beberapa orang menganggap flat design “terlalu sederhana”. Maka, mungkin akan
lebih sulit untuk menyampaikan pesan visual yang rumit dengan flat design.
141
Hierarki visual juga dapat menjadi salah satu hal yang harus diperhatikan dalam
desain interface yang sangat sederhana. Terutama dalam penekanan visual yang
paling penting.
c) Desain yang cenderung mirip dengan yang lain
Flat design cenderung terlihat monoton. Padahal, setiap brand tentu ingin terlihat
secara unik agar mudah diingat. Maka, perlu diingat untuk menggunakan elemen
yang menjadi ciri khas brand-mu.
f. Material Design
Material design adalah design system yang dikembangkan oleh developer dan desainer
dari Google berupa framework yang digunakan oleh Android.
Fondasi material design yaitu:
1) Layout
2) Navigasi
3) Navigasi Drawer
4) Bottom Navigasi
Gambar 17.24. Material design
142
g. Hal yang Perlu Diperhatikan Sebelum Membuat Desain Mobile
Berikut ini adalah beberapa hal yang perlu diperhatikan oleh developer sebelum
membuat desai pada aplikasi mobile:
1) Tentukan tujuan utama aplikasi mobile
Poin penting dalam pembuatan desain mobile adalah dimana kita dapat
mendefinisikan tujuan utama dari aplikasi. Karena hal ini akan memandu agar tidak
keluar dari hasil yang ingin diperoleh. Dan tujuan itu haruslah mengacu pada
kebutuhan pelanggan. Desain mobile yang dibuat harus menjawab permasalahan yang
timbul dari pelanggan ataupun dari masyarakat luas.
Mulailah melakukan riset untuk mengetahui apa yang dibutuhkan untuk menunjang
kemudahan dalam kehidupan mereka sehari - hari.
2) Desain aplikasi mobile yang mudah dan jelas
Dalam mendesain aplikasi mobile, hal yang perlu diperhatikan adalah semudah apa
aplikasi yang digunakan oleh target market tanpa adanya petunjuk pemakaian. Harus
dapat membandingakan aplikasi mobile yang sudah ada. Gunakan metode ATM
(Amati - Tiru - Modifikasi) untuk menentukan desain aplikasi yang sesuai dengan
tujuan. Misalnya usaha pelanggan bergerak di bidang penjualan barang, cobalah
melihat aplikasi berjenis marketplace. Pelajari bagaimana mereka menampilkan
produk dan kemudahan dalam pembayaran hingga pengecekan pengiriman.
3) Platform yang mudah dalam pengembangan
Harus mengetahui sedikit hal teknis tentang cara membuat desain mobile. Sekarang
sangat banyak platform yang dapat digunakan untuk membuat aplikasi mobile.
Platform - platform tersebut pastinya memiliki kelebihan dan kelemahan. Hal ini
penting karena semakin banyak developer yang menggunakannya, pastinya bagus
juga perkembangannya untuk kebutuhan user kedepan dalam pengembangan desain
aplikasi mobile.
4) Multi user dan multi device
Fitur ini yang perlu pastikan ada juga di desain apilkasi mobile. Selain itu, perlu juga
harus memahami bahwa aplikasi akan diakses dari berbagai macam perangkat dan
berbagai merk perangkat mobile. Seperti halnya kedua jenis sistem operasi pada
mobile yaitu android dan iOS. Penting bagi kita memastikan aplikasi tidak
mengalamai perubahan tampilan serta fungsi dan harus konsisten di setiap perangkat.
Lakukan pengetesan menggunakan layanan pihak ketiga seperti Testdroid atau
Elusivestars.
143
5) Feedback dan Evaluasi
Desain aplikasi mobile perlu mendapat tanggapan dari pemakai. Ini yang mendasari
aplikasi itu sukses atau tidak. Bahwa setiap feedback menghasilkan pengembangan
aplikasi yang sesuai kebutuhan masyarakat. Oleh karena itu, penting bagi
pengembang mempermudah pengguna aplikasi tersebut dalam penyampaian pendapat
mereka tentang aplikasi mobile yang dibuat. Dari hasil evaluasi yang dibuat, hal
terpenting adalah kita dapat mengelompokkan mana yang benar - benar menjadi
kebutuhan pelanggan atau hanya sebagai “penghias” pada aplikasi.
Fitur - fitur yang nantinya akan dibuat pastikan juga telah dilakukan proses testing
dari target market. Hal ini dilakukan untuk menghasilkan pengalaman yang
menyenangkan saat mereka menggunakan aplikasi yang dibuat.
4. Langkah Kerja
a. Mengacu pada desain Graphical User Interface (GUI) yang telah dirancang pada
pertemuan sebelumnya, maka buatlah desain Graphical User Interface (GUI) pada
Aplikasi Mobile.
c. Buatlah laporan dari hasil desain Graphical User Interface (GUI) pada Aplikasi Mobile
tersebut, sertakan hasil dari desain yang telah dibuat.
Akhir Pembelajaran
Pembelajaran
memahami konsep dan Muka: memahami konsep dan proses dasar
proses desain UI untuk Ceramah, desain UI mobile.
mobile. Problem based
learning, latihan.
144
6. Tugas Laporan
PDF.
7. Referensi:
Publishing Ltd.
Cham: Springer.
145

Pedoman Praktikum - IMK 20231

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pedoman Praktikum - IMK 20231

Diunggah oleh

Hak Cipta:

Format Tersedia

PROGRAM STUDI TEKNOLOGI INFORMASI

In the name of Allah, the Most Gracious, the Most Merciful.

Wassalamu'alaikum warahmatullahi wabarakatuh.

KATA PENGANTAR .............................................................................................................. iii

Praktikum Pertemuan 1 : Overview Interaksi Manusia dan Komputer

Pokok / Sub Bahasan : Overview

2. Alat dan Bahan

Gambar 1.2. Bagian aplikasi

Gambar 1.3. Contoh media tekstual

Gambar 1.4. Contoh media Grapichal User Interface (GUI)

Gambar 1.5. Prinsip kerja sistem komputer

g. Keperluan Interaksi Manusia dan Komputer (IMK)

Gambar 1.8. AZERTY Keyboard

i. Keterlibatan dalam IMK

Gambar 1.9. Keterlibatan dalam Interaksi Manusia dan Komputer

5. Rubrik Ketercapaian Praktikum

Pokok / Sub Bahasan : Piranti Interaktif:

2. Alat dan Bahan

b. Piranti Masukan Keyboard

Gambar 2.2. Keyboard DVORAK

Gambar 2.3. Keyboard Alphabetic

Gambar 2.4. Keyboard Klockenberg

Gambar 2.5. Sistem Palantype

Gambar 2.6. Sistem Stenotype

c. Piranti Penunjuk dan Pengambil

Gambar 2.7. Mouse

Gambar 2.8. Joystick

Gambar 2.9. trackball

Gambar 2.10. Barcode Reader

b) Magnetic Ink Character Recognation (MICR)

Gambar 2.11. Magnetic Ink Character Recognation (MICR)

Gambar 2.12. Optical Mark Recognation (OMR)

Gambar 2.13. Optical Character Recognation (OCR)

Gambar 2.14. Kode QR atau QR Code

Gambar 2.15. Imager Scanner

Gambar 2.16. Kamera Digital

Gambar 2.17. Headset

Gambar 2.18. Glove

Pokok / Sub Bahasan : Usability

2. Alat dan Bahan

b. Penentu Keberhasilan Sistem

Pokok / Sub Bahasan : User Centered Design (UCD):

2. Alat dan Bahan

b. Prinsip User Centered Design (UCD)

Gambar 5.1. Proses User Centered Design

e. Tujuan User Centered Design (UCD)

f. Manfaat Usability engineering

Pokok / Sub Bahasan : Analisis Tugas:

2. Alat dan Bahan

b. Alasan Perlunya Analisis Tugas

d. Contoh Analisis Tugas

e. Teknik Analisis Tugas

Gambar 6.3. Teknik berbasis relasi entitas

h. Hierarki pada Analisa Tugas

i. Fungsi Analisis Tugas

Pokok / Sub Bahasan : Computer Support Cooperative Work (CSCW):

2. Alat dan Bahan

b. Tujuan Kerja Sama

Gambar 7.1. Matriks waktu-ruang untuk mengelompokkan sistem kerja sama

f. Penerapan CSCW pada Dunia Pendidikan

Pokok / Sub Bahasan : Ubiquitous Computing:

2) Alat dan Bahan

b. Three Generation of Computing