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 :
2.
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
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)
c.
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)
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)
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)
b.
Kelebihan :
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
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.
c.
Bisa memperlambat user yang sering memakai sistem (expert user).
Membutuhkan banyak tempat di layar.
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.
4
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
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.
b.
Menekankan penggunaan sistem pertama kali.
Buruk untuk mendeteksi masalah inkonsistensi
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 selfexplanatory 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
