1. Pengertian Desain User Interface
merupakan
mekanisme komunikasi antara pengguna (user) dengan sistem. Antarmuka pemakai (User
Interface) dapat menerima informasi dari pengguna (user) dan memberikan
informasi kepada pengguna (user) untuk membantu mengarahkan alur penelusuran masalah
sampai ditemukan suatu solusi.
User
Interface,
berfungsi untuk menginputkan pengetahuan baru ke dalam basis pengetahuan sistem
pakar (ES), menampilkan penjelasan sistem dan memberikan panduan pemakaian
sistem secara menyeluruh step by step sehingga user mengerti apa yang akan
dilakukan terhadap suatu sistem. Yang terpenting dalam embangun user
interface adalah kemudahan dalam memakai/ menjalankan sistem, interaktif,
komunikatif, sedangkan kesulitan dalam mengembangkan/ membangun suatu program jangan
terlalu diperlihatkan.
2. Tujuan Antar
Muka (interface) Pengguna
·
Menyesuaikan antar muka pengguna dengan tugas.
·
Membuat antar muka pengguna menjadi efisien.
·
Memberikan arus balik yang tepat kepada pengguna.
·
Memunculkan pertanyaan-pertanyaan yang dapat dimanfaatkan.
·
Memperbaiki produktivitas dari pengetahuan pegawai
3. Manfaat Antar Muka
(Interface) pengguna
Manfaat User
Interface untuk menghubungkan atau penterjemah informasi antara pengguna dengan
system operasi, sehingga computer dapat digunakan. Use interface dari sisi
software bias berbentuk Graphical User Interface (GUI) atau Command Line
Interfae (CLI), sedangkan dari sisi hardware bias berbentuk Aplle Desktop Bus
(ADB), USB, dan fire wire.
4. Interaksi Antar Muka
(Interface) Pengguna
Pemilihan tipe interaksi yang
tepat dapat memberikan efek yang baik terhadap dialog antara user
dengan komputer. Terdapat beberapa tipe interaksi yang umum
digunakan, yaitu :
1. Command Line Interface (CLI)
Merupakan bentuk dialog
interaktif yang pertama digunakan dan masih dipakai hingga saat
ini. Dengan CLI, user memberikan instruksi secara langsung kepada
komputer menggunakan tombol fungsi, karakter tunggal, command dalam
bentuk singkat maupun panjang. CLI memungkinkan user mengakses dengan
cepat fungsi sistem dan beberapa tools.
2. Menu
Pada menu-driven interface , sekumpulan opsi / pilihan yang
tersedia bagi user ditampilkan pada layar dan dapat dipilh dengan
menggunakan mouse atau tombol numerik maupun alfabetik. Pilihan
pada menu harus merepresentasikan arti dan dikelompokkan
berdasarkan suatu kategori agar mudah dikenali dan memudahkan user
memilih sesuai dengan tugas yang akan dilaksanakan.
3. Natural language
Mungkin merupakan mekanisme komunikasi yang atraktif. Umumnya,
komputer tidak dapat mengerti instruksi yang dituliskan dalam bahasa
sehari-hari. Natural language dapat mengerti input tertulis (written
input) dan suara (speech input). Namun masih ada kekurangan dalam hal
ambiguity (kerancuan) pada aspek sintaks dan semantik.
4. Q/A & query dialogue
Merupakan mekanisme sederhana untuk input pada beberapa
aplikasi. User diberikan serangkaian pertanyaan umumnya dalam
bentuk jawaban ya/tidak (Y/N), pilihan ganda atau dalam bentuk kode,
dan dibimbing tahap demi tahap selama proses interaksi. Interface
ini mudah dipelajari namun terbatas fungsinya.
5. Form-fills and spreadsheet
Form-fill utamanya digunakan untuk aplikasi pemasukan (data
entry) dan pencarian (data retrieval) data. Bentuk form-fill adalah
berupa display yang menyerupai selembar kertas dengan beberapa slot /
field untuk diisi. Spreadsheet adalah variasi dari form-fill. Spreadsheet
terdiri dari sel yang dapat berisi nilai atau formula.
6. WIMP interface (Windows, Icons,
Menu, Pointers)
WIMP merupakan default interface untuk sebagian besar sistem
komputer interaktif yang digunakan saat ini terutama pada PC dan
desktop workstation.
Window merupakan area layar yang berprilaku seperti
terminal independent dan berisi grafik atau teks yang dapat dipindahkan
dan idiubah ukurannya. Satu layar dapat terdiri dari lebih 1 window yang
memungkinkan lebih dari satu tugas aktif pada saat yang sama. Icon
merupakan sebuah gambar kecil yang digunakan untuk merepresentasikan
windows yang sedang berada dalam keadaan tertutup (closed). Window dapat
diaktifkan / diperbesar dengan meng-klik icon yang bersangkutan, dan
sebaliknya jika user tidak menggunakan / mengerjakan tugas pada satu window
tertentu maka dia dapat menon-aktifkan window menjadi icon yang disebut
sebagai iconifying . Menu adalah tehnik interaksi yang umum digunakan
bahkan oleh sistem non-window sekalipun. Menu menampilkan pilihan operasi
atau layanan yang diberikan / tersedia oleh sistem. User dapat memperoleh
petunjuk mengenai operasi apa saja pada sistem melalui menu. Oleh karena
itu penamaan pad amenu haruslah memiliki arti dan informatif. Pointer
merupakan komponen yang penting dalam sistem WIMP karena interaksi pada
sistem ini memerlukan aktifitas menunjuk (pointing) dan memilih
(selecting). User diberikan cursor pada layar yang dapat dikendalikan
oleh peralatan input seperti mouse, joystick, ataupun trackball
7. Perancangan: Template, Menu, Tombol
Prinsip Perancangan
Tampilan
visual merupakan hal yang penting dalam interaksi manusia dan komputer.
karena keberadaan komputer adalah untuk membantu pekerjaan manusia.
sehingga komputer dalam tampilan visual dimonitornya tersebut harus
memenuhi beberapa klasifikasi, agar mudah mengerti manusia. kalau bahasa
aslinya komputasi itu bilangan biner, maka bingung juga tuh kalau
bit-bit yang ada tidak interpretasikan kedalam visualnya manusia. salah
satu tujuannya simple saja, yaitu karena ingin informasi yang
disampaikan lewat komputer itu mudah dipahami. dan kalau kita bicara
tampilan maka bisa berarti tampilan software yang kita buat, atau
tampilan web yang kita buat, atau yang lainnya.
kita
akan coba akan melihat apa yang oleh Deborah J. Mayhew, dengan General
Principles Of UI Design, atau dalam bahasa kita adalah Prinsip Umum
Perancangan User Interface. ada 17 prisip yang harus dipahami para
perancang sistem, terutama untuk mendapatkan hasil maksimal dari
tampilan yang dibuat. anda tidak perlu bingung dengan apa yang dimaksud
tampilan, karena salah satunya adalah tampilan web ini.
Berikut adalah beberapa prinsip tersebut :
- User Compatibility,
yang bisa berarti kesesuaian tampilan dengan tipikal dari user. karena
berbeda user bisa jadi kebutuhan tampilannya berbeda. misalnya, jika
aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah
atau tampilan orang dewasa.
- Product Compatibility,
istilah ini mengartikan bahwa produk aplikasi yang dihasilkan juga
harus sesuai. memiliki tampilan yang sama/serupa. baik untuk user yang
awam maupun yang ahli.
- Task Compatibility,
berarti fungsional dari task/tugas yang ada harus sesuai dengan
tampilannya. misal untuk pilihan report, orang akan langsung mengartikan
akan ditampilkan laporan. sehingga tampilan yang ada bukanlah tipe data
(dari sisi pemrogram). coba kalau pilihanya database, grafik, evaluasi
(dimana ketiga hal itu sebenarnya adalah laporan), ribet !bisa kebayang
kalau tampilan yang ada hanya untuk satu pekerjaan saja. misal untuk
kirim mail, kita harus membuka tampilan tersendiri untuk daftar alamat.
- Work Flow Compatibility.
adalah user interface yang mempermudah alur kerja kita. dengan satu
tampilan dan memiliki fungsi Ui yang banyak / lebih dari satu fungsi.
- Consistency.
contohnya, jika anda menggunakan istilah save yang berarti simpan, maka
gunakan terus istilah itu. kalau yang tidak konsisten, kadang
menggunakan save, kadang simpan, atau apalah.
- Familiarity,
untuk contoh ini saya akan contohkan dengan icon. anda pasti akan lebih
familiar jika mengartikan icon disket sebagai perintah untuk menyimpan.
maka jangan ganti dengan gambar kuda, mana ada yang tau kalau itu untuk
simpan.
- Simplicity, semua kompleksitas.
- Direct Manipulation,
manipulasi secara langsung. misalnya anda tidak perlu menuliskan sintax
yang repot hanya untuk mempertebal huruf, cukup dengan ctrl+B.
- Control,
berikan kontrol penuh pada user, tentunya dengan sebaik mungkin dan
jangan sampai merusak sistem. tipikal user biasanya tidak mau terlalu
banyak aturan.
- WYSIWYG,
What You See Is What You Get, buatlah tampilan mirip seperti kehidupan
nyata user. dan pastikan fungsionalitas yang ada berjalan sesuai tujuan.
user ingin tempe jangan dikasih tahu (red : pasti bingung dg istilah
ini).
- Flexibility, UI tidak hanya menggunakan Keyboard saja atau mouse saja,tapi dapat juga dengan touch screen.
- Responsiveness, tampilan yang dibuat harus ada responnya. misal, yang sering kita lihat ketika ada tampilan please wait... 68%...
- Invisible Technology.
sebagai programmer handal kita tidak boleh sombong (dan harus tetap
rajin nabung). user tidak penting mengetahui algoritma apa yang kita
gunakan, max sort, bubble sort, quick sort, atau apa sort, walaupun itu
bagian dari keahlian. yang user tahu cukup fungsinya yaitu untuk
sorting. Tampilkan fungsionalitas, sembunyikan teknologi.
- Robustness itu artinya handal, bisa mengakomodir kesalahan user. jangan malah error, apalagi sampai crash.
- Protection adalah melindungi user dari kesalahan yang umum dilakukan. misalnya dengan memberikan fitur back atau undo.
- Ease of Learning.
tanpa harus ada pelatihan, tanpa harus baca tutorial, tanpa harus
sekolah tinggi-tinggi, user sudah bisa menggunakan tampilan aplikasi
buatan anda. mudah dipelajari.
- Ease of use.
harus mudah digunakan. seperti halnya menggunakan fungsionalitas yang
ada di keseharian kita. misal tombol yang ada, harus mudah dong
nekennya, nggak usah pake tenaga ekstra.
Komponen Antarmuka
Tombol Tekan (PushButton)
- Tombol Tekan
- Komponen dasar yang dapat dipilih dengan cara “menekan” atau meng-klik (dengan mouse) tombol tersebut.
- Perhatikan pemilihan warna sehingga memberikan kesan tiga dimensi pada layar.
- Tombol Tekan Berlabel
- Tombol Tekan yg kepadanya dilekatkan suatu label.
- Untuk
alasan keluwesan,maka antara satu tombol berlabel dgn yg lain dpt
mempunyai variasi jenis font yg berbeda, jika diinginkan.
Spin BOX
Digunakan
untuk menampilkan nilai suatu peubah saat itu,dan kemudian nilai peubah
itu akan bertambah ketika pengguna menekan tombol dengan anak panah ke
atas , atau berkurang ketika pengguna menekan tombol dengan anak panah
ke bawah.
Terdiri 2 bagian:
- Bagian untuk menampilkan nilai peubah (kotak putih)
- Bagian pengontrol nilai (anak panah ke atas dan ke bwh
List box
Komponen
antar muka grafis yg digunakan untuk menampilkan sejumlah pilihan
sekaligus pada layar tampilan. ada dasar nya sebuah list box hanya
terdiri atas bagian yang digunakan untuk menampilkan pilihan-pillihan yg
tersedia.
Combo box
Combo box fungsinya sama dgn List box. Perbedaannya pada :
- Pada
list box semua atau sebagian pilihan yg tersedia langsung akan
terlihat,tetapi pd combo box pilihan tsb tdk akan terlihat sampai
pengguna menekan tombol kontrol yg dimaksud.
- Pada
list box pengguna hanya dpt memilih pilihan yg tersedia, maka dgn combo
box pengguna dpt memasukkan (mmengetikkan) pilihan yg mungkin.
Tombol radio
- Cara lain untuk menyajikan sejumlah pilihan.
- Masing-masing tombol radio bersifat otonom,artinya satu sama lain tidak saling bergantung.
- Sejumlah
tombol biasanya dioperasikan dlm satu kelompok yg dikendalikan dgn cara
tertentu,yaitu pada satu saat hanya sebuah tombol yg akan bernilai ON.
- Terdiri dari 2 bagian :
- Bagian pengendali (lingkaran kecil)
- Label (menunjukan atribut)
Penggeser
Suatu
piranti yang digunakan untuk menggulung atau menggeser layar untuk
memperlihatkan bagian lain dari tampilan yg semula tak terlihat,
sekaligus menghilangkan bagian yg semula terlihat.
Terdiri 2 bagian:
- Penggeser horisontal.
- nggeser tegak (vertikal)
Label box
Digunakan
untuk memberikan komentar atau memberi nama pada masing-masing komponen
antar muka grafis,sehingga pengguna dapat dengan jelas mengetahui
kegunaan dari komponen antarmuka yg sedang ia hadapi.Label dapat ditulis
secara rapi kiri, rapi tengah, dan rapi kanan.
Tahapan Perancangan Antarmuka
Proses yang secara rinci menggambarkan bagaimana perancangan dan
pengembangan antarmuka terlihat pada gambar di atas. Empat tahap utama
dalam proses tersebut adalah:
Proses-proses tersebut independen dari hardware dan software, sistem operasi dan peralatan yang digunakan untuk merancang dan mengembangakan produk. IBM Common User Access (CUA) interface design guide adalah yang pertama kali mendeskripsikan proses perancangan antarmuka secara iteratif.
Mengumpulkan atau Menganalisa Informasi Pengguna. Proses
perancangan antarmuka dimulai dari memahami pengguna. Sebelum merancang
antarmuka, kita harus mengetahui masalah apa yang ingin pengguna
selesaikan dan bagaimana mereka melakukan pekerjaan mereka. Pengumpulan
dan penganalisaan aktivitas-aktivitas pada tahap pertama ini dapat
dijabarkan dalam lima langkah:
Menentukan profil pengguna.
Melakukan analisa terhadap task-task pengguna.
Mengumpulkan kebutuhan-kebutuhan pengguna.
Menganalisa user environments.
Mencocokan kebutuhan tersebut dengan task.
Merancang Antarmuka. Dalam merancang antarmuka ada beberapa tahapan yang harus dilalui, yaitu:
Menjelaskan kegunaan dan tujuan.
Menetapkan icon objek, views, dan representasi visual.
Merancang objek dan jendela menu
Memperbaiki rancangan visual
.
Mengembangkan Antarmuka. Hal pertama yang bisa dilakukan dalam membangun antarmuka adalah membangun prototype. Membangun prototypeadalah
cara yang berharga dalam membuat rancangan awal dan membuat demonstrasi
produk dan penting untuk pengujian kegunaan antarmuka. Dariprototype tersebut, perancang antarmuka dapat mulai membangun antarmuka secara utuh. Ketika membuat prototype, sangat penting untuk diingat bahwaprototype harus dapat di buang setelah digunakan (disposable). Jangan takut untuk membuang sebuah prototype. Tujuan dalam membuat prototype adalah
untuk mempercepat dan mempermudah dalam memvisualisasikan desain
alternatif dan konsep, bukan untuk membangun kode yang akan digunakan
sebagai bagian dari produk
.
Melakukan Validasi Terhadap Antarmuka. Evaluasi
kegunaan adalah bagian penting dari proses pengembangan, untuk
mengetahui bagaimana tanggapan pengguna terhadap antarmuka yang telah
dibuat. Evaluasi ini akan digunakan untuk memperbaiki kekurangan pada
antarmuka yang telah dibangun. Aturan emas dalam perancangan antarmuka:
