DESAIN ANTAR MUKA PENGGUNA

MAKALAH
Penyusun

Nama : Agung Samudra

NIM : 6301130137

Kelas : PIS 13-06/DBD 13-04

1. Apakah Anda pernah mempelajari Prinsip2 UID? jika lupa atau belum pernah, silahkan lihat
halaman 44-59, pada buku referensi [1]. Baca dan Cermati dengan baik semua prinsip yang ada
tersebut.
Jawaban :
Saya sudah pernah mempelajari Prinsip-prinsip UID. Contoh-contoh yaitu :

 Determine users’ skill level/Menentukan tingkat keterampilan pengguna

 Identify the tasks/Mengidentifikasi tugas

 Choose an interaction style/Gaya Interaksi yang dipilih

 The eight golden rules/8 Aturan emas

 Prevent errors/Mencegah kesalahan

2. Temukan referensi yang menjelaskan tentang “Four Pillars of Design User Interface“.
Kemudian Buat ringkasannya menurut bahasa dan pemahaman Anda, berikan juga contoh kasus
penerapannya. Berikut clue untuk keempat pillar prinsip tersebut,
 Ethnographic Observation provides User-interface Requirements
 Theories and Models provide a means of developing Guidelines Documents & Process
 Algorithms and Prototypes assist the development of User-interface Software Tools which
can be used for Rapid-Prototyping.
Controlled Experimentation provides Expert Reviews & Usability Testing

Jawaban :

Penjelasan tentang “Four Pillar of Design User Interface”

a. User Interface Requirements

Mengetahui dengan jelas apa saja yang menjadi keinginan user pada user interface
sehingga pada tahap pengembangan akan lebih mudah dan sesuai dengan keinginan user.
b. Guidelines documents& process
 Guideline sangat dibutuhkan karena setiap project pasti berbeda kebutuhan, di
antaranya seperti:
kata, ikon, grafik
 Jenis karakter,jenis font dan sifatnya (tebal, miring, garis bawah)
  Ikon, grafis, ketebalan garis, dan
 Penggunaan warna dan background
1) Layout layar
 Pilihan menu, bentuk fill-in, dan dialog-box format
 Kalimat prompt, umpan balik, dan pesan kesalahan
 Pembenaran, spasi, dan margin– Entri data dan menampilkan format
 Penggunaan dan isi header dan footer
2) Input /output device
 Keyboard, layar, kontrol kursor, dan perangkat petunjuk
 Suara Audible, umpan balik suara, input sentuhan, dan perangkat khusus
 Respon waktu untuk berbagai tugas)
3) Action sequences
 Mengklik atau manipulasi langsung, menyeret, menjatuhkan, dan gerak tubuh
 Sintaks Command, semantik, dan urutan
 Tombol fungsi Programmed
 Kesalahan penanganan dan pemulihan prosedur)
4) Training
 Bantuan online dan tutorial
 Pelatihan dan referensi bahan
 Sintaks Command, semantik, dan urutan)

c. User-interface software tools

Proses pembuatan tampilan atau desain dengan menggunakan aplikasi atau software
khusus pembuat tampilan seperti html/css,Mockups,Adobe,CorelDraw
d. Expert reviews & usability testing

Testing dan review terhadap desain UI yang mengacu pada kebutuhan user sehingga akan
menghasilkan evaluasi terhadap produk dan meningkatkan efisiensi kebutuhan antarmuka
3. Temukan Referensi tentang Konsep Direct Manipulation, Form Dialog, dan Command Natural
Language. Buat penjelasan terhadap ketiga konsep itu dengan baik, dan berikan argumen tentang
kelebihan dan kekurangan masing-masing konsep tersebut (minimal 3). Kemudian berikan contoh
penerapan dari masing-masing konsep tersebut. (penjelasan dasar bisa Anda temukan pada
kedua buku referensi diatas)

Jawaban :

a. Direct Manipulation adalah interaksi langsung dari aktivitas desain pada user.Ketika
pengguna memberi instruksi langsung maka dikerjakan langsung oleh sistem
computer.
1) Kelebihan :
 Mempunyai analogi yang jelas dengan suatu pekerjaan nyata.
 Mengurangi waktu pembelajaran
 Memberikan tantangan untuk eksplorasi pekerjaan yang nyata.
 Mengurangi waktu pembelajaran
 Penampilan visual yang bagus.
2) Kekurangan:
 Memerlukan program yang rumit dan berukuran besar.
 Memerlukan tampilan grafis ber-kinerja tinggi.
 Memerlukan piranti masukan seperti mouse, track ball.
 Memerlukan perancangan tampilan dengan kualifikasi tertentu
b. Form Dialog adalah merupakan suatu penerapan langsung dari aktivitas pengisian
borang dalam kehidupan sehari-hari dimana pengguna akan dihadapkan pada suatu
bentuk borang yang ada di layar komputer yang mereka gunakan.
1) Kelebihan:
 Mempersingkat waktu training
 Mengurangi pengetikan tombol key
 Membutuhkan sedikit memory computer
2) Kekekurangan:
 Kurang baik jika terlalu banyak menu.
  Bisa memperlambat user yang sering memakai sistem (expert user).
 Membutuhkan banyak tempat di layar.
c. Command Natural Language adalah cabang ilmu komputer dan linguistic yang
mengkaji interaksi antara komputer dengan bahasa alami manusia. Natural language
sering dianggap sebagai cabang dari kecerdasan buatan dan bidang kajiannya
bersinggungan dengan linguistic komputasional.
1) Kelebihan:
 Ideal bagi pengguna baru/tidak ahli.
 Menginstruksikan pengambilan keputusan.
 Pengguna tidak perlu mengingat item yang diinginkan.
2) Kekurangan:
 Tidak cocok untuk tampilan grafis kecil.
 Cukup lambat bagi pengguna ahli.
 Terlalu banyak menu menyebabkan overload informasi

4 Temukan Penjelasan dan Definisi tentang Usability Test pada referensi buku [1], Jelaskan juga
tentang
a. Manfaat dan Kegunaan,
b. Kelebihan dan Kekurangan
c. Cara Penggunaan dari model test ini.

Jawaban :

Penjelasan dan Definisi tentang Usability Test pada referensi buku [1], dan juga tentang

d. Manfaat dan Kegunaan,

e. Kelebihan dan Kekurangan
f. Cara Penggunaan dari model test ini.

Usability test merupakan pengujian terhadap kualitas yang mengecek seberapa mudah interaksi
antarmuka pengguna yang diterapkan dan digunakan. Usability test memiliki 2 tujuan, yaitu
menjelaskan kemampuan sistem/aplikasi awal sebelum desain ditetapkan. Tujuan pengujian yang
kedua yaitu untuk mengevaluasi desain dan memvalidasi kesalahan desain. Sebuah usability test
mengevaluasi interaksi antarmuka bawah dunia nyata atau dikendalikan.. Evaluasi juga
mengumpulkan data tentang masalah yang timbul. Kegunaanya:

a. Learnability: Seberapa mudah bagi user untuk menyelesaikan tugas-tugas dasar pertama
kalinya ketika berhadapan dengan desain dari sistem/aplikasi?
b. Efisiensi: Setelah user telah mempelajari desain, seberapa cepat mereka dapat melakukan
dan menyelesaikan tugas?
c. Memorability: Ketika user tidak berinteraksi dengan sistem/aplikasi dalam waktu yang
cukup lama, apakah user mampu mengingat kembali cara untuk melakukan dan
menyelesaikan tugasnya?
d. Kesalahan: Berapa banyak kesalahan yang dibuat oleh user, kesalahan apa saja, dan
dapatkah user untuk belajar dari kesalahannya?
e. Kepuasan: Apakah desain yang ditetapkan dalam sistem/aplikasi sudah memuaskan bagi
user untuk membantu dalam menyelesaikan tugasnya ?

Adapun manfaatnya yaitu :

a. Efektif : Ketepatan dan akurasi di mana user mencapai tujuan mereka.

b. Efisien : Kecepatan (dengan akurasi) dimana user dapat menyelesaikan tugas-tugas
mereka.
c. Keterlibatan : Sejauh mana gaya dan sifat dari desain interface dapat membuat produk
menyenangkan atau memuaskan untuk digunakan.
d. Kesalahan toleran : Seberapa baik desain mencegah kesalahan dan membantu pemulihan
dari kesalahan yang terjadi.
e. Mudah untuk dipelajari : Seberapa baik desain dari produk mendukung kedua orientasi
awal dan memperdalam pemahaman kemampuannya.

Keuntungan dan kerugiannya yaitu

a. Kerugiannya
 Biaya tinggi untuk membangun fasilitas dan desain yang memadai.
 Membutuhkan pengujian dengan keahlian user interface.
  Menekankan penggunaan sistem pertama kali.
 Buruk untuk mendeteksi masalah inkonsistensi
b. Keuntungan
 Memanfaatkan lingkungan kerja yang sebenarnya.
 Mengidentifikasi masalah serius atau berulang

Cara penggunaan

Sebuah usability test pertama kali dilakukan dengan mengumpulkan data profil user seperti
tingkat penyelesaian tugas dan tingkat kesalahan. Data kinerja berfokus pada seberapa baik user
dapat melakukan apa yang ditugaskan . Data proses terdiri dari langkah-langkah tentang apa
yang user lakukan selama penyelesaian tugas.

5. Anda diminta untuk mencari salah satu web portal pemerintah (bisa pemda, pemkot,
pemkab, pemprov) harus dengan domain resmi .go.id. Pilihan web portal tidak boleh sama
dengan pilihan mahasiswa yang lain. Silahkan surfing setiap halaman pada web portal
tersebut dan amati bagaimana bentuk design yang disajikan pada web tersebut.

Mencari dan mengamati salah satu web portal pemerintah (bisa pemda, pemkot, pemkab,
pemprov) harus dengan domain resmi .go.id.

Saya mengamati salah satu website resmi dari kota kelahiran saya yaitu kota Makassar
http://makassarkota.go.id gambarnya seperti berikut :

Gambar 1 Header
Untuk bagian headernya,saya kira sudah cukup bagus karena menampilkan beberapa Menu utama,dan
juga terdapat beberapa foto suasana kota Makassar yang menjadi latar atau backgroundnya.Bagian ini
juga dilengkapi dengan kolom search engine bagi user yang ingin mencari informasi terkait dengan kota
Makassar.Untuk masalah pewarnaan,saya kira sudah pas karena tidak terlalu kontras dan sesuai dengan
warna dari foto yang dijadikan background.Jenis interaksi yang disediakan adalah Menu Selection dan
Command Line.

Gambar 2 Konten bagian atas

Pada bagian ini konten,kita dapat melihat beberapa artikel,cuaca,galeri foto dan video,serta beberapa
kategori yang menjadi penawaran bagi pengunjung situs seperti Profil kepala daerah,Pesona kota
Makassar,dan CCTV kota.Untuk jenis interaksi,Direct Manipulation menjadi pilihan karena kita dapat
memilih konten atau berita dengan menggunakan mouse atau pointer.Untuk masalah
pewarnaan,menurut saya sudah lumayan karena tidak terdapat warna background yang tidak pas atau
kurang cocok dengan warna font sehingga user tidak mengalami gangguan ketika hendak membaca.
 Gambar 3 Konten bagian bawah dan footer

Pada bagian bawah dan juga footer website,menurut saya juga sudah cukup bagus.Pewarnaan
yang pas dan jenis jenis font serta ukuran dari konten tidak bertabrakan.

6. Anda wajib menemukan minimal 3 Kesalahan Design pada Web tersebut (pada pilihan point.5),
lebih banyak lebih bagus. Kesalahan yang Anda temukan harus disertai Argumen dan Penjelasan
tentang Prinsip2 Design UI yang telah dilanggar. Kemudian berikan solusi perbaikan menurut
pengetahuan Anda terhadap kesalahan2 tersebut.

Jawaban :

Ada beberapa kesalahan yang saya temukan dari website kota Makassar,contohnya sebagai
berikut :

 Gambar table yang tidak informative

Menurut saya ini melanggar prinsip 8 aturan emas,terutama pada poin tentang
menawarkan sebuah informasi,karena user tidak dapat mengerti dengan gambar yang
salah dan tidak dapat menarik informasi.Menurut saya kalau informasi seperti ini ada
baiknya kalau ditampilkan dalam bentuk chart atau grafik sehingga user dengan mudah
mengerti dan dapat menarik informasi.
 Gambar 4 Kesalahan pada tampilan table

 Gambar dan tulisan terlalu kecil

Sama seperti poin yang diatas,user tidak mampu untuk melihat dengan jelas peta secara
kesulurahn walaupun kita melakukan direct manipulation seperti mendrag gambar dan
membukanya di tab baru,tetapi gambar yang dihasilkan tetap buram dan ukuran font yang
sangat kecil sehingga user tidak dapat membaca dengan jelas.Sebaiknya jika ingin
menampilkan peta geografis seperti ini,ada baiknya jika menyediakan sebuah link dengan
self-explanatory “peta geografis kota makassar” dan peta akan muncul tetapi tetap di
halaman tersebut.
 Gambar 5 Gambar dan Tulisan sangat kecil

 Tidak menawarkan umpan balik yang informatif

Sama seperti poin diatas,kita lihat bahwa ternyata sub-menu yang ditampilkan tidak
memenuhi keinginan user untuk melihat informasi dan hanya mengantarkan user ke
halaman awal.Sebaiknya jika memang isi dari menu tersebut tidak ada,maka ada
penjelasan berupa isi konten tidak ada atau menawarkan umpan balik yang informatif
bagi user.Dan juga kita dapat melihat sebuah kotak menu yang berisikan “CCTV kota”
ternyata tidak berfungsi dan hanya mengantarkan kita ke halaman awal.Menurut saya ini
sangat bertentangan dengan prinsip mengurangi beban atau memory load pada
website.Dan juga terdapat sebuah konten yang memperlihatkan jadwal penerbangan dari
atau tujuan kota Makassar,padahal ternyata isinya tidak ada sehingga membuat user
bingung dengan tampilannya.Jika ingin memperlihatkan jadwal penerbangan,maka ada
baiknya jika bekerja sama dengan link penerbangan untuk kota Makassar,sama seperti
tampilan Cuaca yang berada diatas konten penerbangan.Kesalahan tersebut juga tidak
sesuai dengan teori Entry Data,karena data yang diinputkan oleh user tidak menghasilkan
output yang sesuai
Gambar 6

Gambar 7
Gambar 8

Gambar 9
 Tulisan pada button “Info Lengkap”

Menampilkan button dengan tulisan untuk mengetahui info yang lengkap memang
penting,tetapi jika ternyata itu tidak memberikan dampak apa apa hanya akan membuat
user bingung dan juga menjadikannya tidak berguna sehingga hanya terjadi memory load
yang banyak.Dan juga tidak memenuhi teori navigasi tampilan

Gambar 10

 Terdapat 2 kolom search engine

Adanya 2 kolom search engine hanya membuat user bingung dan bertentangan dengan
prinsip atau teori navigasi tampilan.Dan juga untuk prinsip menawarkan umpan yang
informative,ternyata kolom search yang berada diatas tidak berfungsi dan hanya sebagai
hiasan menurut saya.Sebaiknya jika kita ingin membuat lebih dari 1 kolom search engine
maka letaknya juga tidak berdekatan atau jika memang berdekatan,maka ada self-
explanatory dari kolom tersebut.Ini juga menyebabkan inkonsistensi dari desain interaksi
untuk user terhadap website
 Gambar 11

DAFTAR PUSTAKA

1. Galitz, Wilbert ( 2007 ). The Essential Guide to User Interface Design An Introduction to
GUI Design Principles and Techniques. Wiley, Canada.

2. http://makassarkota.go.id