Menerapkan prinsip desain user interface pada multimedia interaktif berbasis web dan media interaktif.
1. DESAIN MEDIA INTERAKTIF
KD. MENERAPKAN PRINSIP DESAIN USER INTERFACE
PADA MULTIMEDIA INTERAKTIF BERBASIS WEB DAN
MEDIA INTERAKTIF.
Disusun Oleh : Zainul Arifin, S. Kom
SMK NEGERI 1 PUNGGING MOJOKERTO
A. PRINSIP DESAIN USER INTERFACE.
Secara definisi User interface itu merupakan komunikasi yang terjadi
antara pengguna dengan suatu sistem di dalamnya. User interface design ialah
peralatan yang berhubungan langsung dengan komputer yang terarah dan
pengalaman dari pengguna. Tujuan dari user interface design ini yaitu membuat
efek secara sederhana dan efektif. Desain ini dapat dipakai dalam hal
pendukungan kegunaannya.
User interface design adalah peralatan yang berhubungan langsung
dengan komputer yang terarah dan pengalaman dari pengguna. Tujuan dari
user interface design ini yaitu membuat efek secara sederhana dan efektif.
Desain ini dapat dipakai dalam hal mendukung kegunaannya.
2. User interface bertugas dalam penerimaan informasi, memberikan
informasi, penginputan data, penampilan suatu sistem dan juga memberikan
tata cara yang membuat pemakai dapat paham dengan apa yang dikerjakan.
User interface juga bermanfaat dalam menerjemahkan informasi antar
pengguna dengan sistem yang memungkinkan komputer dapat berguna.
B. PRINSIP DESAIN INTERFACE.
Terdapat 16 prinsip desain interface yang harusnya di pahami dan di
terapkan oleh pengembang dalam mendesain atarmuka atau user interface dari
system yang akan di kembangkan. Prinsip-prinsip Utama Mendesain User
interface sangat penting di perhatikan, guna memberikan user interface atau UI
yang memberikan kenyaman kepada user yang akan memakai system nantinya.
3. BERIKUT INI 16 PRINSIP UTAMA MENDESAIN USER INTERFACE YANG
BAIK.
a) User Compatibility.
Seorang desainer tidak diperbolehkan membuat atau merancang
sebuah interface yang berdasarkan selera atau keinginannya sendiri, para
desainer harus melihat dari berbera sisi bahwa di kemudian nantinya
system yang akan di buat bukan hanya untuk satu user saja, melainkan lebih
dari pada itu dan tentunya memiliki latar belakang yang berbeda pula, dan
tentu untuk kenyamanan UI bagi setiap orang punya tolak ukur yang
berbeda.
b) Product Compatibility.
Product Compatibility yaitu Sebuah system atau aplikasi yang dibuat
harus sesuai dengan kenyataan agar kemudian user mendapatkan informasi
yang benar, detail dan akurat di bandingkan dengan informasi yang
diperoleh melalui proses manual.
c) Ask Compatibility.
Task Compatibility, dalam hal ini Interface harus bisa memberikan
solusi dalam hal kemudahan dan tentunya dapat user dalam menyelesaikan
tugasnya lebih efektif.
d) Work Flow Compatibility.
Work Flow Compatibility, yaitu sebuah system atau aplikasi
seharusnya mengadopsi sistem manualnya dan kemudian di dalamnya juga
terdapat runtutan kerja dalam menyelesaikan pekerjaan, agar user nantinya
tidak kesulitan dalam menggunakannya dan menghindari adanya menu-
menu yang berlebihan yang nantinya justru akan membuat user jadi bingung
atas setiap fungsi menu-menu karena terlalu banyak.
4. e) Consistency.
Consistency atau konsisten, yaitu sebuah sistem atau aplikasi harus
sesuai dengan sistem nyata dan sesuai dengan produk yang akan dihasilkan,
oleh karena itu desainer tentunya harus memperhatikan juga hal-hal yang
bersifat konsisten pada saat merancang interface dari system yang akan di
kembangkan.
f) Familiarity.
Familiarity, yaitu Sebisa mungkin desainer mendesain interface yang
bentuknya atau modelnya bersifat umum agar membantu user dapat dengan
cepat beradaptasi dengan system nantinya.
g) Simplicity.
Simplicity, yaitu kesederhanaan dari sistem perlu diperhatikan dalam
membangun sebuah desain interface, karena bukan berarti system powerfull
membuat user nyaman, malah bisa saja user lebih senang dengan hal yang
sederhana tetapi berbobot.
h) Direct Manipulation.
Direct Manipulation, yaitu aplikasi atau Sistem harus mempunyai
media atau tool-tools yang dapat memberikan user hak untuk merubah
interface sesuai keinginan user nantinya. Dengan tujuan agar user tidak
merasa bosan dengan tampilan yang monoton seperti itu-itu saja.
i) Control.
Control, bahwa sistem yang baik harus bisa mengatasi masalah yang
ditimbulkan akibat human error atau disaat user melakukan kesalahan.
5. j) WYSIWYG (What You See Is What You Get).
Apa yang didapat adalah apa yang dilihatnya. Bahwasanya apa yang
diperoleh user nantinya adalah berdasarkan fakta.
k) Flexibility.
Flexibility, yaitu sistem harus mampu menyediakan solusi terhadap
permasalahan yang ada.
l) Responsiveness.
Responsiveness yaitu sistem seharusya mempunyai respon yang baik
terhadap keinginan user, karena pada dasarnya manusia tidak suka dalam
hal menunggu.
m)Invisible Technology.
Invisible Technology, yaitu sistem yang dibuat harusnya memiliki
kelebihan yang bersifat unik. Bisa saja kelebihan itu berhubungan dengan
sistem yang melingkupinya atau bagian yang lainnya.
n) Robustness.
Interaksi manusia dengan komputer atau IMK yang baik ialah berupa
frase-frase menu atau error handling yang baik dan sopan sehingga akan
memberikan kenyaman user dalam menggunakan system.
o) Protection.
Protection, yaitu system harus memberikan user sesuatu yang nyaman
dan aman ketika melakukan kesalahan. Serta memberikan solusi terhadap
hal tersebut.
6. p) Easy of learning and ease of use.
Sistem harus mudah di operasikan dan dapat dengan mudah dipahami
sehingga user dengan cepat dalam memahami baik setiap tools yang ada
serta kegunaannya untuk meminimalisir ketidaknyamanan user dalam
memakai system tersebut.
C. PERANCANGAN USER INTERFACE.
Merancang user interface merupakan bagian yang paling penting dari
merancang sistem. Biasanya hal tersebut juga merupakan bagian yang paling
sulit, karena dalam merancang user interface harus memenuhi tiga
persyaratan: sebuah user interface harus sederhana, sebuah user interface
harus lengkap, dan sebuah user interface harus memilki kinerja yang cepat.
Alasan utama mengapa user interface sulit untuk dirancang adalah karena
setiap user interface adalah sebuah bahasa pemrograman yang kecil. User
interface menjelaskan sekumpulan objek-objek dan operasi-operasi yang bisa
digunakan untuk memanipulasi objek.
7. Dalam proses pengembangan user interface, kita bisa atau mungkin saja
tidak bisa memisahkannya dari seluruh proses pengembangan sebuah produk.
Walaupun begitu, fokus dari dua proses tersebut sangatlah berbeda. Dalam
proses pengembangan user interface, fokus haruslah terletak pada elemen-
elemen user interface dan objek-objek yang pengguna lihat dan gunakan,
dibandingkan dengan kemampuan sebuah program.
Elemen-Elemen dalam perancangan antara lain :
a) Mendefinisikan konsep, Mengumpulkan kebutuhan-kebutuhan pengguna
dan mendefinisikan desain secara konseptual.
b) Memvalidasi konsep, Mengevaluasi konseptual desain tersebut.
c) Merancang, Mengevaluasi prototype. Menandai dan memperbaiki masalah-
masalah yang ditemukan.
d) Pengembangan, Melakukan pengujian secara berkala terhadap desain yang
lebih dahulu dibuat dan desain yang paling terakhir dibuat. Menandai dan
memperbaiki masalah-masalah yang ditemukan.
Proses yang secara rinci menggambarkan bagaimana perancangan dan
pengembangan user interface terlihat pada gambar di atas. Empat tahap utama
dalam proses tersebut adalah:
a) Mengumpulkan atau menganalisa informasi dari pengguna.
b) Merancang User interface.
c) Mengembangkan User interface.
8. d) Memvalidasi User interface.
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 user interface secara
iteratif.
1) Mengumpulkan atau Menganalisa Informasi Pengguna.
Proses perancangan user interface dimulai dari memahami pengguna.
Sebelum merancang user interface, 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:
a) Menentukan profil pengguna.
b) Melakukan analisa terhadap task-task pengguna.
c) Mengumpulkan kebutuhan-kebutuhan pengguna.
d) Menganalisa user environments.
e) Mencocokan kebutuhan tersebut dengan task.
2) Merancang User interface.
Dalam merancang user interface ada beberapa tahapan yang harus
dilalui, yaitu:
a) Menjelaskan kegunaan dan tujuan.
b) Menetapkan icon objek, views, dan representasi visual.
c) Merancang objek dan jendela menu
d) Memperbaiki rancangan visual.
9. 3) Mengembangkan User interface.
Hal pertama yang bisa dilakukan dalam membangun user interface
adalah membangun prototype. Membangun prototype adalah cara yang
berharga dalam membuat rancangan awal dan membuat demonstrasi
produk dan penting untuk pengujian kegunaan user interface. Dari prototype
tersebut, perancang user interface dapat mulai membangun user interface
secara utuh. Ketika membuat prototype, sangat penting untuk diingat bahwa
prototype 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.
4) Melakukan Validasi Terhadap User interface.
Evaluasi kegunaan adalah bagian penting dari proses pengembangan,
untuk mengetahui bagaimana tanggapan pengguna terhadap user interface
yang telah dibuat. Evaluasi ini akan digunakan untuk memperbaiki
kekurangan pada user interface yang telah dibangun. Aturan emas dalam
perancangan user interface:
a) Buat Pengguna menguasai user interface.
b) Kurangi user's memory load
c) Buat user interface konsisten
D. MERANCANG USER INTERFACE WEB DAN MEDIA INTERAKTIF.
Desain user interface website atau aplikasi memang sangat penting
karena itu akan menentukan bagaimana seseorang berinteraksi di platform
tersebut. User interface juga menentukan apakah pengunjung website atau
pengguna aplikasi dapat menavigasi website atau aplikasi dengan mudah.
10. Karakteristik User Interface (UI) yang baik.
Di berbagai informasi yang menyarankan teknik dan pola desain interface
yang dianggap baik dan benar. Memang jika Anda mengikuti saran-saran
tersebut, kemungkinan besar Anda akan membuat website atau aplikasi dengan
UI yang baik. Tetapi mungkin Anda juga perlu checklist karakteristik apa saja
yang sebenarnya membuat sebuah UI dibilang bagus.
a) Jelas.
Memiliki UI yang jelas adalah salah satu elemen penting dalam desain
user interface. Tentunya tujuan dari desain UI adalah agar orang-orang bisa
menggunakan dan berinteraksi dengan sistem dengan mudah. Jika user
tidak bisa mengerti bagaimana cara menggunakan dan menavigasi website
mereka pasti akan bingung.
11. b) Ringkas.
Tentunya memiliki UI yang jelas akan membuat tampilan tampak
bagus, tetapi juga harus hati-hati agar penjelasan tidak terlalu panjang.
Untuk meletakkan definisi dan penjelasan pada setiap bagian website agar
tidak tampak berantakan.
c) Familiar.
Mungkin salah satu kata yang sering kamu dengar saat membahas
desain web adalah intuitif. Apa sebenarnya arti dari kata itu? Secara simple,
intuitif artinya layout bisa dimengerti dengan mudah secara natural dan
hanya dengan menggunakan instinc. Tetapi bagaimana cara membuat layout
website kamu intuitif? perlu menggunakan desain web yang familiar.
Familiar yang dimaksud disini adalah sesuatu yang sudah pernah dilihat
sebelumnya.
d) Responsif.
Untuk UI sendiri, responsive memiliki beberapa arti yang berbeda.
Pertama, responsive berarti cepat. Interface website harus bisa bekerja
dengan cepat. Menunggu sebuah website loading lama pasti membosankan.
Jika interface bisa loading dengan cepat tentunya user experience juga akan
semakin baik.
Arti lain dari responsive pada UI juga harus bisa memberitahu user
apa yang sedang terjadi di halaman itu. Misalnya, jika seorang user mengklik
suatu tombol di website, apakah mereka sudah berhasil menekan tombol
tersebut? Mungkin text pada tombol kamu bisa menjadi kata “loading” jika
mereka sudah berhasil menekan tombolnya. Bisa juga menggunakan
progress bar seperti loading Gmail sebagai indikator kalau website sedang
loading.
12. e) Konsisten
Dalam mengembangkan user interface, konsistensi pada interface
dapat membantu user untuk mengerti pola. Dari satu interface, mereka bisa
mempelajari apa kegunaan tombol, tabs, icons, dan berbagai elemen yang
ada pada interface tersebut.
Jika mereka nantinya menemukan interface yang mirip, mereka bisa
mengerti apa kegunaan elemen-elemen yang ada pada interface tersebut.
Dengan begitu, mereka bisa mengerjakan sesuatu dengan lebih cepat dan
mempelajari fitur-fitur baru dengan lebih cepat.
Salah satu perusahaan yang kerap melakukan ini adalah Microsoft
dengan program Microsoft Officenya. Jika kamu perhatikan dari dulu,
meskipun mereka selalu mengupdate program-program Microsoft Office nya
seperti Word, Excel, dan Power Point, elemen-elemen yang ada pada ketiga
program tersebut tetap konsisten.
f) Menarik
Poin yang satu ini mungkin bisa dibilang subjektif tetapi interface akan
lebih baik jika mereka memiliki tampilan menarik. Yang dimaksud dengan
menarik disini adalah interface menarik untuk digunakan.
Tentunya apa yang dianggap menarik untuk website atau aplikasi
kamu juga perlu disesuaikan dengan pasar dan audience. Jadi tampilan
harus menarik sesuai dengan audience. Tetapi juga harus tetap
memerhatikan fungsi website agar mereka tetap berfungsi dengan baik.
g) Efisien
User interface yang baik harus memastikan bahwa website dan
aplikasinya bisa digunakan dengan efisien.
13. Agar bisa membuat UI yang efisien, perlu diketahui dulu apa yang ingin user
capai dan biarkan mereka melakukan langkah-langkahnya tanpa banyak
masalah. Buat interface yang memudahkan user untuk mencapai tujuan
mereka.
h) Forgiving
Anda mungkin pernah melakukan kesalahan saat sedang mengakses
website. Misalnya, Anda salah menghapus informasi, UI yang baik akan
membantu Anda mengembalikannya dengan cepat.
Misalnya user Anda masuk ke halaman website yang error, apakah
Anda menyarankan mereka untuk mencoba mengarah ke halaman lain
website? Tanpa Anda sadari, hal-hal ini bisa membantu meningkatkan user
experience Anda.