TUGAS AKHIR MATA KULIAH

INTERAKSI MANUSIA DAN KOMPUTER

Interaksi Manusia dan Komputer - Pembahasan Mengenai Antar Muka,

Desain Layar, dan Usabilitas dari situs https://www.karawangkab.go.id/

Oleh :
GITA SEKAR CINDEWANGI
02032011043

TEKNIK INFORMATIKA
FAKULTAS ILMU KOMPUTER
UNIVERSITAS NASIONAL PASIM
2023

Halaman | 0
 Kata Pengantar

Segala puji dan syukur penulis panjatkan ke hadirat Allah SWT karena
atas segala karuniaNya penulis dapat menyelesaikan tugas ini. Topik yang
dibahas dalam makalah ini ialah mengenai situs
https://www.karawangkab.go.id. mulai dari desain antar muka, tampilan layar,
navigasi, fungsi-fungsi, sampai dengan ukuran tingkat usabilitas situs ini.
Keberhasilan ini tidak lepas dari bantuan berbagai pihak. Oleh karena itu,
dalam kesempatan ini penulis ingin mengucapkan terimakasih kepada teman-
teman mata kuliah Interaksi Manusia dan Komputer, dan Bapak Nur achadi
selaku dosen mata kuliah ini, serta semua pihak yang telah memberikan saran
dan bantuan selama menyelesaikan tugas ini.
Penulis menyadari bahwa masih banyak terdapat kekurangan dalam
menyelesaikan tugas ini baik dari segi materi maupun penyajiannya, untuk itu
saran serta kritikan yang membangun dari dosen dan rekan-rekan sangat
diharapkan guna perbaikan penulisan ini.
Akhir kata penulis berharap semoga tulisan ini bermanfaat bagi pembaca
pada umumnya dan penulis pada khususnya.

Bandung, 25 mei 2023

Gita cindewangi

Halaman | 1
 Daftar Isi

Halaman

INTERAKSI MANUSIA DAN KOMPUTER.....................................................0

FAKULTAS ILMU KOMPUTER.......................................................................0
Kata Pengantar...................................................................................................1
Halaman.............................................................................................................2
Latar Belakang...................................................................................................3
Tujuan................................................................................................................4
Interaksi Manusia dan Komputer (IMK)...........................................................4
Usabilitas...........................................................................................................4
Fleksibilitas........................................................................................................5
Antar Muka Pemakai (User Interface)...............................................................5
Desain Layar yang Baik.....................................................................................6
Hasil dan Pembahasan.......................................................................................7
1. Header ...........................................................................................................8
2. Navigasi.........................................................................................................8
3 Menu selayang pandang.................................................................................9
4.Navigasi sub menu........................................................................................10
5.Sub menu pemerintahan...............................................................................10
5.Sub menu informasi......................................................................................10
5.Sub menu sosialisasi.....................................................................................11
5.Sub menu transparansi anggaran..................................................................12
5.Sub menu layanan.........................................................................................12
5.Sub menu pengumuman...............................................................................13
5.Menu covid 19..............................................................................................14
5.Body content.................................................................................................15
5.Footer............................................................................................................16
Kesimpulan......................................................................................................18
Saran................................................................................................................18
V. Daftar Pustaka.............................................................................................19

Halaman | 2
 I. Pendahuluan
Latar Belakang

Dewasa ini Sistem komputer yang kompleks sedang "mencari" jalan

atau cara untuk masuk ke dalam kehidupan sehari-hari, dan pada waktu yang
sama pasar dipenuhi dengan merek-merek yang bersaing. Ini telah mendorong
usabilitas menjadi semakin populer dan secara luas dikenal di tahun terakhir ini.
Dalam pengembangan produknya, sekarang ini perusahaan-perusahaaan mulai
beralih dari metode lama yaitu metode berorientasi teknologi (technology-
oriented methods) menjadi metode berorientasi pengguna (user-oriented
methods). sasaran dari metode ini menetapkan kebutuhan suatu sistem. suatu
kebutuhan adalah suatu sasaran yang harus ditemui. suatu produk yg
dikembangkan, didasarkan pada masukan dari para pemakai atau pihak-pihak
lain yang berkepentingan.
Metode berorientasi pengguna inilah yang melahirkan istilah usabilitas.
Usabilitas adalah suatu istilah yang digunakan untuk menandakan bahwa orang
dapat mempekerjakan alat tertentu dengan mudah dalam rangka mencapai
tujuan tertentu. usabilitas dapat juga mengacu pada metode yang digunakan
untuk mengukur kemudahan dan studi mengenai kerapian atau efisiensi suatu
obyek yang dalam hal ini ialah kemudahan dalam penggunaan sistem dan
aplikasi komputer itu sendiri. Usabilitas memegang peranan penting dalam
pengembangan sebuah website, pembelajaran mengenai perilaku pengguna web
ini sangat penting, karena sebagaimana kita ketahui bahwa pengguna tidak ingin
menunggu akibat sistem yang terlalu lambat (slow site), dan pengguna pun tidak
ingin belajar mengenai cara menggunakan web tersebut, sebuah web yang
interaktif akan membuat penggunanya mampu menyerap dan mempelajari web
tersebut dengan seketika setelah membacanya sekilas (scanning).
Pemahaman mengenai kemudahan penggunaan suatu aplikasi (dalam hal
ini website) inilah yang akan kita bahas dalam makalah ini, ada beberapa
pertanyaan yang mengindikasikan kemudahan penggunaan tersebut, diantaranya
ialah seberapa mudah pengguna menggunakan fungsi-fungsi saat pertama kali
mereka menggunakan aplikasi tersebut (berhadapan dengan desain pertama
kali)?, sekali ketika para pemakai sudah mempelajari disain, seberapa cepat
mereka dapat melaksanakan tugas?, seberapa banyak kesalahan yang dibuat
pengguna ketiak memakai aplikasi ini? Seberapa cepatkah mereka memperbaiki
kesalahan tersebut? Dan seberapa menyenangkan desain tersebut bagi
pengguna? Itulah beberapa hal yang akan kita bahas lebih lanjut dalam makalah
ini.

Halaman | 3
Tujuan
Makalah ini memuat tentang pembahasan mengenai desain antarmuka
yang baik dan usabilitas dari fungsi-fungsi dari situs
https://www.karawangkab.go.id/ . Makalah ini bertujuan untuk melihat sejauh
mana tingkat usabilitas dari fungsi-fungsi pada website ini, serta melihat desain
antarmukanya, dan juga beberapa saran perbaikan fungsi-fungsi dan antar muka
yang baik untuk meningkatkan usabilitas dari website tersebut.

II. Tinjauan Pustaka

Interaksi Manusia dan Komputer (IMK)

Interaksi Manusia dan Komputer (IMK) adalah disiplin ilmu yang
berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer,
interaktif untuk digunakan oleh manusia, serta studi mengenai hal-hal yang
berhubungan dengannya, misalnya pengguna.

Usabilitas
Usabilitas adalah suatu istilah yang digunakan untuk menandakan bahwa
orang dapat mempekerjakan alat tertentu dengan mudah dalam rangka mencapai
tujuan tertentu. usabilas dapat juga mengacu pada metode yang digunakan untuk
mengukur usabilitas dan studi mengenai kerapian atau efisiensi suatu obyek.

Dimensi usabilitas oleh Quesenbery ( 2003).

1. Efektif (Effective). ketelitian dan Kelengkapan para pemakai dalam
mencapai gol mereka.
2. Efisien (Efficient). Kecepatan (dengan ketelitian) para pemakai dalam
menyelesaikan tugas mereka.
3. Keterlibatan (Engaging). Derajat atau tingkat gaya interface yang membuat
produk nymaan untuk digunakan.
4. toleransi Kesalahan (Error tolerant). Seberapa baik disain mencegah
kesalahan dan emmebantu memeperbaiki kesalahan ini.
5. Mudah untuk sipelajari (Easy to learn). Seberapa baik produk mendukung
orientasi awal dan memperdalam pemahaman tentang kemampuan prosuk
tersebut.

Nielsen ( 2003) menyarankan lima komponen usabilitas:

1. Learnabilitas (Learnability): Seberapa mudah bagi user untuk memenuhi
tugas dasar aplikasi ketika pertama kali mereka menghadapi disain?
2. Efisiensi (Efficiency): Sekali ketika para pemakai sudah mempelajari disain,
seberapa cepat mereka dapat menggunakannya?
3. Memorabilas (Memorability): Ketika para pengguna kembali menggunakan
aplikasi tsb setelah sekian lama tidak menggunakannya, seberapa mudah
mereka dapat kembali mahir dalam menggunakannya?

Halaman | 4
4. Kesalahan (Errors): Berapa banyak kesalahan yg dilakukan para pemakai,
seberapa burukkah kesalahan ini, dan Seberapa mudah mereka dapat
memperbaiki kesalahannya?
5. Kepuasan (Satisfaction): seberapa menyenangkan dalam menggunakan
disain itu?

Fleksibilitas
Usabilas juga mempunyai suatu hubungan dengan fleksibilitas dalam
disain. Secara umum, ketika fleksibilitas dari suatu disain meningkat, usabilitas
nya berkurang.Disain fleksibel dapat melakukan banyak fungsi dibanding disain
khusus, tapi kurang efisien, hal Ini memebuat disain lebih kompleks.
Fleksibilitas membuat para pemakai tidak bisa dengan jelas mengantisipasi
sistem kebutuhan mereka yang akan datang. Kemudian, pada akhirnya
Fleksibilitas itu akan mengakibatkan suatu pengurangan usabilitas. sehingga
perlu dipertimbangkan.

Antar Muka Pemakai (User Interface)

Antarmuka pemakai adalah bagian sistem komputer yang memungkinkan
manusia berinteraksi dengan komputer. Desain antar Muka yang baik memiliki
karakteristik di berikut ini:
 Standardisasi: keseragaman sifat-sifat antarmuka pemakai pada
aplikasi yang berbeda.
 Integrasi: keterpaduan antara paket aplikasi dan software tools.
 Konsistensi: keseragaman dalam suatu program aplikasi.
 Portabilitas: dimungkinkannya data dikonversi pada berbagai hardware
dan software.

Ada beberapa hal yang menyebabkan menurunnya tingkat usabilitas dari suatu
desain antar muka system, diantaranya ialah :
1. Teks belum jelas dan pemilihan kata yang tidak tepat dalam bertanya
menjadi penyebab Keraguan dan akhirnya dibaca kembali, yang
memungkinkan para pengguna salah dalam menafsirkannya.
2. Grafis yang tidak tepat sehingga unsur-unsur penting tersembunyi.
3. Judul yang tidak representatif. Ini juga menciptakan kebingungan dan
menghalangi kemampuan dalam melihat hubungan yang ada.
4. Permintaan informasi yang tidak penting atau tidak relevan, permintaan
informasi yang memerlukan pemikirkan ulang dari jawaban sebelumnya
sehingga membingungkan pengguna yang pada akhirnya menimbulkan
kekeliruan.
5. Layout yang tidak terstruktur dan terarah yang memungkinkan terjadinya
kesalahan.
6. Kualitas presentasi yang jelek, sulit dibaca, akan menurunkan kemampuan
pemakai dan menyebabkan kesalahan lagi.

Halaman | 5
Analisa Kebutuhan dan Definisi Bisnis.
Sasaran dari tahap ini menetapkan kebutuhan suatu sistem.Suatu
kebutuhan adalah suatu sasaran yang harus ditemui. Suatu produk yg
dikembangkan, didasarkan pada masukan dari para pemakai, pemasaran, atau
pihak-pihak lain yang berkepentingan.

Desain Layar yang Baik

1. Mencerminkan kemampuan, kebutuhan, dan tugas dari para pemakai nya.
2. Dikembangkan dalam batasan fisik yang menggunakan perangkat keras
dengan cara ditampilkan (berupa layout).
3. Menggunakan kapabilitas/kemampuan dari pengendalian perangkat
lunaknya secara efektif.
4. Mencapai sasaran dan tujuan bisnis dari sistem yang dirancang tersebut.

pengujian untuk disain yang baik:

1. Pengaturan unsur-unsur layar.
2. Navigasi layar dan aliran.
3. Komposisi yang memuaskan secara visual.
4. Tipografi.
5. Penyeteman (pengaturan) prosedur.
6. Keluaran data / data output.
7. Grafik secara statistik
8. Pertimbngan secara teknologi

Task Analysis task analysis adalah Teknik untuk memperoleh suatu pemahaman
dari fungsi yang harus
dilakukan oleh sistem
computer.

Halaman | 6
 Hasil dan Pembahasan

Gambar 0 : gambar keseluruhan halaman utama

Halaman | 7
 Untuk memudahkan dalam pembahasan, pada tampilan halaman utama
website ini kita bagi menjadi header, menu konten, dan footer.perhatikan
gambar di bawah ini.

1. Header
Navigasi

Bagian kanan Bagian kiri

Gambar 1 : pembagian komponen header website
Header website adalah bagian dari website yang terletak di sisi paling atas.
Pada bagian ini biasanya terdapat nama brand, logo, atau gambar pendukung
yang berukuran besar. Posisinya yang tepat di bagian atas memungkinkan untuk
meletakkan gambar konten atau layanan unggulan dari situs .

Navigasi

Gambar 1 : pembagian komponen header website

Halaman | 8
 Navigasi website yang ditampilkan pada menu dan link adalah petunjuk
bagi pengunjung, untuk mendapatkan informasi halaman-halaman pada
website . Tidak hanya bagi pengunjung, navigasi pada website juga sangat
penting bagi search engine dalam memahami karakteristik website.

Bisa dilihat pada navigasi website diatas , menggunakan struktur navigasi

hirarki berisi menu utama yaitu selayang pandang, pemerintahan, informasi,
sosialisasi, transparasi anggaran, layanan dan pengumuman. Menu pada
navigasi tersusun rapi namun sukar dilihat karena warnanya tidak kontras
dengan latar belakang halaman, pengunjung mungkin akan sulit menemukan
menu lainnya.

Saran : pemilihan warna pada bar navigasi dan font yang di pakai untuk sub
menu pada navigasi sedikit ditambahkan tone yang sedikit cerah dan
tidak terkesan gelap sehingga sulit di temukan.

Menu Selayang pandang

Gambar 2 : menu selayang pandang

Halaman | 9
 Menu selayang pandang berisi informasi umum , alamat dan juga kontak
dari pemerintahan Karawang, disini juga tertera gambaran umum , arti lambang
daerah, nama-nama bupati serta sejarah Karawang
Tampilan sub menu sudah jelas dan kontras ditambah dengan foto-foto
ikon monumen Karwang sudah menggambarkan ciri khas dari website sebagai
protofolio kabupaten Karawang

Navigasi sub menu

Navigasi di website ini terlihat memiliki beberapa sub menu yang

kompleks dan lengkap , ada beberapa sub menu yang memiliki sub menu lain
nya yang membuat data menjadi terkelompok secara sistematis .

a. Sub menu pemerintahan

Gambar 3 : submenu pemerintahan

Sub menu pemerintahan berisikan organisasi perangkat daerah, badan ,
kecamatan , biodata , visi misi

b. Sub menu informasi

Halaman | 10
Gambar 4 : sub menu informasi
Sub menu ini berisikan dua menu yang juga memiliki sub menu lainnya.
Tampak data pada sub menu ini memiliki rincian data lainnya.Menu informasi
berisi menu info RUP & Lelang serta info data.

Gambar 5 : sub menu info RUP&lelang Gambar 6 : sub menu info

data
Sub mebu RUP & Lelang berisikan menu rencana umum pengadaan RUP
dan menu lelang, sedangkan sub menu info data berisikan alamat OPD, peta
karawang, ,statistic sectoral 2020 , statistic sectoral 2021, statistic sectoral
kecamatan 2020, statistic sectoral kecamatan 2021.

c. Sub menu sosialisasi

Halaman | 11
Gambar 7 : sub menu sosialisasi

Sub menu sosialisasi berisikan menu produk hokum, kerja sama, citarum
harum, PPID, dalam angka, gender dan anak

d. Sub menu Transparansi anggaran

Gambar 8 : sub menu transparansi anggaran

Sub menu transparansi anggaran berisikan menu Dokumentasi perencanaan,

rancangan APBD, peraturan daerah, peraturan bupati, RPJMD Karawang,
ringkasan, laporan keuangan, serta hibah BANSOS.

e. Sub menu layanan

Halaman | 12
Gambar 9 : sub menu layanan

Sub menu layanan berisikan cek PBB online, EDukcapil, infoloker, mal
pelayanan public, pengaduan public, portal perizinan, serta menu kecamtan

f. Sub menu pengumuman

Halaman | 13
Gambar 10 : sub menu pengumuman Gambar 11 : sub menu layananI
Sub menu pengumuman memiliki menu dengan sub menu lainnya yaitu
menu seleksi JPT Pratama yang berisikan menu pengumuman, hasil seleksi
administrasi JPT Pratama, hasil rekam jejak peserta, pengumuman hasil
penulisan makalah, pengumuman hasil uji kompetensi asesmen, pengumuman
hasil paparan dan wawancara, hasil seleksi terbuka pengisian JPT Pratama.

Halaman | 14
Menu covid 19

Halaman | 15
Gambar 12 : menu covid 19 secara keseluruhan

Halaman | 16
 Menu covid 19 adalah menu baru yang ditambahkan karna adanya
wabah covid 19 . Menu in berisi Layanan Unit Kegawatdaruratan, Layanan Call
Center Satgas Penanganan Covid-19, update data penduduk dan sebaran kasus,
Pantauan kasus aktif covid-19 untuk sebaran kecamatan, data dan sebaran peta
covid 19, deteksi dini, laporan covid 19 perusahaan, layanan covid 19, berita
terkini, pertanyaan seputas covid 19 , serta infografis.
Desain setiap button action terlihat sangat futuristic dan sederhana
memudahkan pengunjung mencari serta menjelajahi setiap menu di halaman ini.

2. Body content

Gambar 13 : pembagian body content

Kita lihat setiap kolom di sebelah kanan website ini, pada kolom kiri
tersebut ada beberapa list menu kategori, nampak jelas sekali menu-menu
tersebut tersusun dengan baik, dengan perbedaan warna kolom di setiap selisih
kolomnya memudahkan pengguna dalam mencari kategori yang memang benar-
benar diinginkan.
Namun kolom menu berita kekurangan space atau jarak antar konten
sehingga konten terlihat sedikit berantakan dan mebuat bingung.

Halaman | 17
 Gambar 18 : body content berantakan

Slide berita berita di sebelah kanan ini menyatu dengan konten update berita
di sebelah kirinya sehingga membuat website terlihat berantakan.

Saran: Dibutuhkan visual dividers sebagai pemisah konten agar setiap konten
mempunyai space dan terpisah secara rapi.
Visual dividers adalah elemen tata letak yang membantu memisahkan
potongan konten menjadi grup, bagian, opsi, atau bagian yang jelas.
Dengan cara ini, ini membantu perancang mengatur halaman sesuai
dengan pola persepsi visual yang khas dan membuat tata letak lebih jelas
dan lebih mudah dicerna oleh pengguna.

3. Footer

Footer adalah ringkasan dari website. Biasanya footer akan berisi tautan

penting di situs web, atau, terkadang, tautan ke semua halaman situs web. Hak
cipta dan stempel tanggal adalah umum, untuk melindungi informasi di situs
web dan memberi tahu pengunjung kapan situs web terakhir
diperbarui. Informasi terkait lainnya – mungkin formulir kontak mini, CTA,
galeri foto bergulir, atau informasi permanen lainnya yang ingin Anda
tampilkan di akhir setiap halaman – terdapat di footer.

Halaman | 18
 Gambar 20 : footer website

Nampak pada footer website diatas terlihat berantakan karna konten sebelah
kanan kurang berjarak dengan konten di sebelahnya . terlihat juga footer dari
website kurang memiliki space pada bottom yang mana harusnya di bottom
tersebut terdapat Hak cipta dan stempel tanggal , untuk melindungi informasi di
situs web dan memberi tahu pengunjung kapan situs web terakhir diperbarui.

Saran : Penambahan space pada bottom footer dengan penambahan stempel

penting seperti hak cipta dan stempel tanggal , untuk melindungi informasi di
situs web dan memberi tahu pengunjung kapan situs web terakhir diperbarui.

Halaman | 19
 IV. Kesimpulan dan Saran

Kesimpulan

Desain layar yang baik, antar muka yang interaktif, dan tingkat
usabilitas yang tinggi memegang peranan penting terhadap kemajuan sebuat
website, pengembangan sistem yang berorientasi pengguna ini merupakan hal
yang mutlak dilakukan oleh pengelola situs tersebut untuk memperoleh hasil
yang optimal.

Dari beberapa hasil dan pembahasan di atas, website ini bisa dinilai
cukup baik dalam hal interface meskipun ada beberapa hal yang masih perlu
diperbaiki dan dikembangkan oleh pengelola website tersebut
(https://www.karawangkab.go.id) untuk meningkatkan kualitas websitenya,
terutma mengenai desain antar mukanya dan cara menampilkan fungsi serta
informasinya.
Suatu desain layar yang baik harus mencerminkan kemampuan,
kebutuhan, dan tugas dari para pemakai nya, dikembangkan dalam batasan fisik
yang jelas, menggunakan kapabilitas/kemampuan dari pengendalian perangkat
lunaknya secara efektif. dan mampu mencapai sasaran dan tujuan bisnis dari
sistem yang dirancang tersebut.

Saran
Berikut adalah saran untuk analisis user interface website pemerintah
Kabupaten Karawang berdasarkan kerangka kerja dari 7C's Framework :

1. Context (Konteks): Sebagai website resmi pemerintah Kabupaten

Karawang, konteks website menunjukan tujuan, visi, dan misi
pemerintah Kabupaten Karawang tercermin dengan jelas dalam desain
dan fungsionalitas website.
2. Content (Konten): Jenis konten yang disediakan oleh website relevan
termasuk informasi tentang pemerintahan daerah, kebijakan, program-
program pemerintah, berita terkini, dan layanan publik kontennya
informatif, terkini, dan mudah diakses.
3. Community (Komunitas): Website menyediakan platform untuk
membangun komunitas dan keterlibatan publik. Ada forum diskusi,
ruang komentar, atau fitur sosial lainnya yang memungkinkan interaksi
antara pemerintah dan masyarakat.
4. Customization (Penyesuaian): Website memberikan opsi penyesuaian
atau personalisasi kepada pengguna.Pengguna dapat mengatur preferensi
bahasa, mendapatkan notifikasi berita terbaru, atau mengakses informasi
yang relevan dengan kebutuhan mereka.
5. Communication (Komunikasi): Website menyediakan saluran
komunikasi yang jelas antara pemerintah dan masyarakat, kontak
 informasi yang mudah ditemukan, formulir pengaduan atau saran, atau
saluran komunikasi online seperti email atau chat.
6. Commerce (Perdagangan): Dalam konteks website pemerintah, unsur
perdagangan mungkin tidak relevan. Fokus utama harus pada
menyediakan informasi dan layanan publik yang berkaitan dengan
pemerintah daerah.
7. Connection (Koneksi): Website memfasilitasi koneksi antara pemerintah
dan masyarakat. Misalnya, apakah ada informasi terkait acara atau
pertemuan pemerintah, forum partisipasi publik, atau pembaruan terkait
program-program pemerintah yang sedang berjalan.
 Halaman | 18
V. Daftar Pustaka

Ambler, Scott W. 2001. User Interface Design Tips, Techniques, and

Principles. Second Edition. McGraw-Hill Book Co., Singapore.
Ambler, Scott W. 2004. Maturing Usability, Quality in Software, Interaction
and Volume. Third Edition. Springer Inc.
Galitz, Wilbert O. 2007.The Essential Guide to User Interface Design. Third
Edition.
WileyPublishing. Inc.
Quesenbery. 2003.
Nielsen. 2003.
Halaman | 19 /