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