Menerapkan

Prinsip Desain User

Interface
Pada Multimedia Interaktif Berbasis Halaman
Web dan Media Interaktif

Oleh: Mumpuni Wahyuning Tiyas, S. Kom

User Interface
adalah …
Sebuah bentuk tampilan yang berhubungan langsung
dengan pengguna dan berfungsi untuk menghubungkan
antara pengguna dengan sistem operasi sehingga
komputer dapat dioperasikan

User interface bertugas dalam penerimaan informasi,

memberikan informasi, penginputan data, penampilan
suatu sistem dan juga memberikan tata cara yang
membuat pemakai bisa paham dengan yang dikerjakan.

Tujuan User interface untuk menyesuaikan desain

interface dengan tugas, membuat desain interface
menjadi efisien, memberikan arus balik yang tepat
kepada end-user, memperbaiki produktivitas dari
pengetahuan pegawai, serta memunculkan pertanyaan-
pertanyaan yang dapat dimanfaatkan
 DESAIN
USER “Perancangan antarmuka pengguna
untuk mesin dan perangkat lunak
INTERFACE seperti komputer dan perangkat
elektronik lainnya dimana berfokus

ADALAH?
untuk memaksimalkan kegunaan dan
pengalaman pengguna”

Tujuannya untuk membuat efek secara sederhana

dan efektif. User Interface dapat menerima
informasi dari user dan memberikan informasi
kepada user (setelah melalui proses yang ada
pada komputer untuk kepentingan user.
 CONTOH
DESAIN
USER INTERFACE
Perkembangan
User
Inteface
Sistem Berkelompok
merupakan generasi pertama user interface dengan tampilan
yang masih sederhana
Seorang end-user berinteraksi dengan sistem melalui
perantara kerja secara berkelompok, sehingga bukan
termasuk jenis sistem interaktif yang efektif
 Sistem Perkongsian
(Baris Arahan)

Sistem ini dikenalkan pada tahun 1960an. End-user berinteraksi dengan pengguna antarmuka baris-arahan dengan cara menyusun arahan-
arahan tertentu dengan baris demi baris. Mesin yang digunakan sistem ini dikenal dengan Tele-type (TTY) seperti sistem DOS dan UNIX.
Interaksi antar end-user tergantung kepada penggunaan arahan berbentuk dialog soal jawab. Guna meningkatkan tampilan yang lebih baik
mayoritas sistem antarmuka jenis ini menggunakan penamaan konvensional yang seragam dan meniadakan huruf vokal.
 Sistem Layar
Sistem jenis ini menggunakan penghubung berupa layar CRT dan Plasma
 GUI
Interaksi di dalam user interface bergrafik merupakan
sebuah interaksi secara manipulasi langsung di mana
end-user berinteraksi dengan perwakilan-perwakilan
visual objek melalui mouse atau piranti pointer yang lain.
Ciri utama GUI (Graphical User Interface) adalah point
and click, drag and drop. Antarmuka GUI menggunakan metafora dunia dan
menyediakan berbagai interaksi berdasarkan setiap
tingkat, icon, menu dan pointer (Window, Icon, Menu,
and Pointer-WIMP). Dengan demikian, antarmuka
jenis ini termasuk jenis interface yang menggunakan
bentuk-bentuk visual seperti grafik, icon dan animasi
guna mewakili berbagai komponen antarmuka
tersebut
Generasi Masa Depan
Antarmuka jenis ini lebih borientasi kepada objek dan lebih meneitik beratkab pada
penambahan unsur animasi objek adan audio termasuk di dalamnya unsur 3D pada
antarmuka modern dalam pembentukan di seputar dunia maya.
Simple PowerPoint Presentation
Tujuan & Manfaat
Desain
User Inteface
“tujuannya untuk membuat interaksi end-user dengan cara sederhana dan seefisien mungkin di mana
end-user berinteraksi dengan komputer menggunakan tampilan antarmuka (interface) yang ada pada
layar komputer”

Terdapat dua kategori dalam user interface yaitu:

• GUI (Graphical User Interface) dalam menggunakan unsur-unsur multimedia seperti gambar, suara,
video untuk berinteraksi dengan end-user
• Text-Based yang menggunakan rumus (syntax) yang sudah ditentukan dalam memberikan perintah
Prinsip Desain
User Inteface
 Prinsip Compatibility
Product Compatibility
Tujuan utamanya adalah aplikasi perangkat
lunak (software) yang dapat menjaga
produk yang dihasilkan jauh lebih baik.
Penggunaan interface pada aplikasi harus
sesuai dengan sistem aslinya.
User Compatibility
Desainer multimedia harus mencari
karakteristik dari end-user karena
antarmuka harus disesuaikan dengan
karakter pengguna. Perangkat lunak harus
seolah-olah mengenal end-usernya,
karakteristiknya, sifat maupun
kebiasaannya secara umum.
Task Compatibility
Tujuannya adalah membantu para end-user
dalam menyelesaikan tugasnya, dimana
semua pekerjaan beserta tugas end-user
dapat diadopsi dalam aplikasi melalui
penggunaan interface dengan prosedur
yang mudah
Compa Misalnya instalasi : Next – Next –Finish
tibility Work Flow Compatibility
Tujuannnya adalah meminimalisir kesulitan
pada end-user dalam menyelesaikan
pekerjaan. Dalam aplikasi, seorang software
engineer harus memikirkan berbagai
rangkaian pekerjaan sebuah sistem dengan
mengadopsi sistem manual yang terdapat
urutan kerja dalam penyelesaian.
 Prinsip Desain User Interface
Sebuah sistem harus sesuai dengan Aplikasi yang dibuat harus sesuai
sistem nyata serta sesuai dengan dengan kebutuhan, sifat dan
produk yang dihasilkan. Misalnya karakteristik end-user yang
kesamaan struktur menu dan font, bersangkutan. End-user
penerapan warna, serta keseragaman Direct mengharapkan aplikasi dapat
Consistency Manipulation
format desain pada antarmuka, melakukan perubahan pada
sehingga end-user tidak mengalami antarmuka tersebut. Misalnya skin
kesulitan saat berpindah lokasi dalam media player yang bisa diubah
menyelesaikan pekerjaan menjadi black metalic, tampilan
window yang berubah dll.

Ease of
Control Learning and
Easy of Use

Prinsip control berkenaan dengan Kemudahan dalam memahami

sifat user yang memiliki tingkat icon, menu, alur data, yang
konsentrasi yang berubah-ubah meskipun baru saja mempelajari
misalnya salah ketik. Seorang dan mengopersikannya.
software engineer harus merancang
suatu kondisi yang mampu menatasi
hal-hal tersebut.
 Prinsip Desain User Interface
Yaitu memberikan tampilan yang
mudah dikenali dan end-user tidak
kesulitan dan kebingungan dalam
pemakaiannya. Misalnya tampilan
facebook dan twitter
Familiarity
Technology
Flexibility
Tujuannya untuk membuat berbagai
solusi penyelesaian untuk suatu
masalah tertentu. Misalnya
penggunaan menu atau model dialog
box pada Microsoft Office
Yaitu kemampuan menerima input berupa
suara dan mampu memprosesnya
sehingga komputer dapat melakukan
perintah end-user yang bersangkutan.
Misalnya penggunaan Speech Recognition,
setengan install windows dilanjutkan klik
Invisible
start speech recognition sehingga keluar
tanda aktif. Pengguna cukup dengan
melakukan perintah kepada komputer
dengan mengatakan satu kata dengan
begitu komputer akan otomatis
memprosesnya.
Protection
Tujuannya untuk menjaga kenyamanan end
user saat menggunakan aplikasi terutama
berhubungan dengan data-data beripa file
dimana end-user salah memasukkan data
atau salah eksekusi. Misalnya saat delete
secara tidak sengaja, maka prosesur
recovery tool seperti Undo, Recycle Bin atau
kata “Are you sure to remove..”
 Prinsip Desain User Interface
Pada dasarnya interaksi antar manusia
dan komputer bisa error pada saat
merancang interfacenya. Jadi penggunaan
kata yang friendly harus digunakan.
Misalnya bad command or files name,
Rebostness
windows disk drive not ready : exception
processing message. Error handling
adalah penanganan kesalahan eror pada
berbagai macam keadaan pemrograman
Responsiveness
Setelah input data ke aplikasi sistem
melalui interface, maka sistem yang
baik akan langsung memberi
tanggapan (respon) dari hasil data
yang diinputkan.
Yaitu kesederhanaan pada sebuah
interface (antarmuka). Dalam hal ini,
memberikan sistem sederhana
bertujuan memudahkan si pemakai,
karena pada dasarnya mereka lebih
Simplicity
menyukai sistem yang sederhana.
WYSIWYG
What You See Is What You Get
sesuai dengan usaha dari end-user
pada saat mencari data dan sesuai
dengan data yang ada pada aplikasi
perangkat lunak tersebut dan dapat
langsung dilihat pada tampilan objek
yang tampak pada monitor. Misalnya
apa yang tercetak pada printer sesuai
dengan apa yang ada pada layar
monitor.
Interaksi
END
User
COMMAND LANGUAGES

Command language dialogue (dialog bahasa perintah) merupakan bahasa perintah yang
tradisional dan orisinil. Karakteristik dari Command language di antaranya cocok
digunakan untuk perintah berulang menyediakan akses langsung pada fungsi sistem,
baris perintah harus memiliki makna (arti) dan lebih tepat untuk end-user yang sudah
mahir.
Beberapa kelebihan dari penggunaan Command Language adalah sebagai berikut :
• Powerfull
Sistem yang menyediakan kemampuan untuk nmembangun proses kompleks,
menyimpan sebagai file, script, macro dandapat dieksekusi dengan nama yang simple
• Flexible dan User Controlled
User dapat melakukan apa saja sesuai dengan keinginannya
• Fast dan Efficient
Command yang komplek lebih cepat dibandingkan melalui banyak screen scanning untuk
pilihan menu atau navigasi, pengisian field
• User Minimal Screen ‘Real Estate’
Interface ini hanya membutuhkan satu baris dari layar untuk entri command
SISTEM MENU

Menu identik dengan daftar sejumlah pilihan dalam jumlah terbatas dan ditampilkan pada
layar atau sekumpulan pilihan (option) pada menu interface yang tersedia bagi end-user
ditampilkan pada layar dan dapat dipilih menggunakan mouse atau7 tombol numerik
maupul alfabetik.
Jenis-jenis menu:
• Sistem Menu Datar
Kemampuan fasilitas yang dimiliki oleh suatu program aplikasi akan ditampilkan secara
lengkap dan biasanya menggunakan kalimat yang cukup panjang. Menggerakkan tanda
terang (highlight maker) kesuatu pilihan dan kemudian dikonfirmasikan dengan menekan
enter
• Sistem Menu Tarik
Merupakan sistem menu yang berbasis struktur pohon. Sebuah menu tarik pada
dasarnya merupakan sistem menu yang pilihan-pilihannya dikategorikan menurut kriteria
tertentu sehingga membentuk hirarki pilihan atau struktur pohon. Sebagian atau seluruh
menu utama memiliki sub menu dan setiap sub menu memiliki sub menu lainnya

Contoh Menu Datar Contoh Menu Tarik

NATURAL LANGUAGE

Natural language dibuthkan sebagai mekanisme komunikasi yang atraktif, karena pada
dasarnya komputer tidak menegrti instruksi yang dituliskan dalam bahasa sehari-hari.
Pengguna natural language dapat mengerti input tertulis dan suara, namun terdapat
kekurangan utama dalam hal kerancuan pada aspek sintaks dan semantik.
QUESTION & ANSWER DIALOGUE

Tujuannya adalah mekanisme yang menampilkan pertanyaan pada komputer agar user
merespon. Ciri khas interface Question Answer dialogue adalah mudah dipelajari tetapi
sangat terbatas pada fungsinya. Beberapa karakteristiknya adalah bahasa Query
digunakan untuk menyusun informasi yang akan ditampilkan dari database berdasarkan
jawaban dari proses tanya jawab tersebut, cocok untuk end-user pemula.
FORM-FILLS & SPREADSHEET

Merupakan suatu penerapan langsung dari aktivitas pengisian box dalam kehidupan
sehari-hari dimana end-user akan dihadapkan pada bentuk barang yang ada di layar
komputer yang mereka gunakan. Bentuk utama form-fill berupa display yang menyerupai
selembar kertas dengan beberapa slot/field untuk diisi dengan fungsi utama sebagai
aplikasi data entry dan data retreverial (pencarian data)
ELEMEN WYSIWYG

WINDOW MENU

ICON POINTER
Window

Window merupakan area layar yang berprilaku seperti terminal independen dan
berisi grafik/teks yang dapat dipindahkan dan diubah ukurannya. Salah satu
layar dapat berisi lebih dari satu window dengan berbagai tugas aktif pada saat
yang sama. Area ini dapat saling overlap dan menutupi yang lain, atau tersusun.

Fasilitas scrollbar dapat membantu pengguna menggerakkan isi window ke atas

atau bawah menyamping serta memiliki tittle bar yang menuntjuk nama window.

Keuntungfannya adalah memudahkan user untuk membuka lebih dari satu

window, sedangkan kelemahannya adalah menyulitkan user jika membuka
terlalu banyak window.
Icon

Icon adalah gambar kecil yang digunakan untuk mempresentasikan window

yang sedang berada dalam keadaan tertutup (closed). Icon memiliki bentuk
bervariasi, mulai dari symbol yang abstrak sampai gambar realitas.

Keutungannya untuk mengetahui aplikasi apa yang ada karena beberapa

aplikasi memiliki icon yang sama. Kekurangannya adalah beberapa aplikasi
memiliki icon yang sama sehingga membingungkan user.
 Menu

Menu adalah pilihan yang disediakan di ayar menggunakan pointer dan dapat
menampilkan pilihan operasi atau layanan yang diberikan/tersedia oleh sistem.
Kelebihannya memudahkan pengguna untuk melakukan aktivitas yang ingin
dilakukan. Kelemahannya dapat memakan ruang layar, maka dari itu menu
sebaiknya hanya muncul saat dibutuhkan.
Jenis Menu Keterangan
Mnemonic letters Pilihan item menggunakan huruf awal dapat berupa angka, huruf atau campuran. User harus
memasukkan pilihan sesuai dengan format yang diberikan
Radio Buttons Menu dengan bentuk radio button. User harus memilih salah satu pilihan yang diberikan
Button Choice Menu dengan menggunakan bentuk tombol atau button. User mengklik salah satu tombol menu
Multiple Selection Menus Menu dengan isinya dapat diseleksi lebih dari satu
Pop-up Menus Menu yang diaktifkan dengan mengklik tombol kanan mouse pada area yang ditentukan
Scrolling list box choice Menu dengan menggunakan list box
Scrolling combo box choice Menu dengan menggunakan combo box
Trackbar menu (alpha slider menu) Menu yang itemnya dipilih dengan menggeser petunjuk

Embedded links/hyperlinks Menu dengan item yang disusun tidak beraturan. Contoh browser dan help pada windows

Main menu, iconic menu, toolbars, atau palletes Menu yang digabungkan dengan icon-icon
KOMPONEN TOUCH SCREEN
Touchscreen
Sebuah perangkat dimana end-user
dapat mengontrol melalui gerakan
sederhana atau multi-touch
menggunakan sentuhan jari
Controller (Pengontrol):
Sebuah perangkat yang memproses
dan mengubah voltase sinyal yang
diterima komponen touch sensor
berupa alur listrik dan dihubungkan
ke prosesor atau perangkat lain
Touch Sensor:
Komponen ini terletak di bagian luar
tampilan sebagai lapisan penerima
inputan dari user atau sentuhan.
Bagian yang disentuk akan
menimbulkan aliran listrik.
Software Driver:
Software driver sebagai alat
penerjemah data dari proses
controller dan touch sensor yang
memungkinkan proses tersebut
bekerja dengan baik dan
ditampilkannya ke antarmuka melalui
sistem operasi
 Prosedur
Perancangan
Interface
01 Perancangan Tombol
02 Peracangan Interface
PERANCANGAN TOMBOL
A. PUSH BUTTON
SPIN BOX:
Digunakan untuk menampilkan nilai suatu
peubah saat itu, dan nilai peubat tersebut
selanjutnya akan berkurang jika end-user
menekan tombol dengan anak panah ke bawah
atau ke atas. Bagian pada spin box adalah
tampilan kotak peubah dan pengontrol dalam
bentuk anak panah ke atas atau kebawah

LIST BOX:
Komponennya berupa list box yang digunakan
untuk menampilkan sejumlah pilihan sekaligus
pada layar tampilan. List box terdiri dari bagian
yang digunakan untuk menampilkan pilihan-
pilihan yang tersedia

COMBO BOX:
Perbedaan list box dan combo box adalah
semua pilihan atau sebagian pada list box yang
tersedia langsung akan terlihat, sedangkan pada
combo box pilihan tersebut tidak akan terlihat
sampai end-user menekan tombol kontrol yang
dimaksud. Sedangkan end-user hanya dapat
memilih pilihan yang tersedia pada list box.
PERANCANGAN TOMBOL

B. LABEL BOX:
Label box hanya memberikan komentar atau
memberi nama pada antarmuka grafis yang
dapat dituylis dengan posisi secara rapi kiri, rapi
tengah, rapi kanan. Sehingga end-user dapat
dengan jelas mengetahui fungsi atau kegunaan
dari komponen antarmuka yang sedang
digunakan.

C. RADIO BUTTON:
Radio button terdiri dari 2 bagian yaitu bagian
pengendalian dalam bentuk lingkaran kecil dan
label untuk menunjukkan atribut. Beberapa
tombol dapat dioperasikan dalam satu kelompok
yang dikendalikan dengan cara tertentu,
terutama pada saat sebuah tombol bernilai ON.

D. SCROLL BUTTON:
Scroll button sebagai piranti yang digunakan
untuk mengulung atau menggeser layar guna
memperlihatkan bagian lain dari tampilan yang
semula tidak terlihat, sekaligus menghilangkan
ataupun menyembunyikan bagian-bagian yang
semula terlihat. Scroll button sendiri
dikategorikan menjadi penggeser horizontol dan
penggeser tegak (vertikal)
PERANCANGAN INTERFACE
1. TAHAP ANALISA INFORMASI
Sebelum perancangan harus di analis berbagai jenis masalah yang ingin diselesaikan dan
berbagai prosedur dalam melakukan pekerjaan yang bersangkutan. Proses perancangan
interface di awali dari kebutuhan user dengan menentukan profil end-user, melakukan analisa
terhadap task-task end-user, mengumpulkan kebutuhan-kebutuhan end-user, menaganalisa end-
user environments, dan terakhir mencocokkan kebutuhan tersebut dengan task

2. TAHAP PERANCANGAN ANTARMUKA

Langkah-langkah perancangan antarmuka:
• Menjelaskan kegunaan dan tujuan dari interface
• Menetapkan icon objek, views dan representasi visual secara mendetail
• Merancang objek dan jendela menu secara tepat
• Memperbaiki rancangan visual yang akan ditampilkan

3. TAHAP PENGEMBANGAN ANTARMUKA

Prototyping (desain awal) identik dengan prosedur-prosedur dalam membuat rancangan awal
dan membuat demonstrasi produk serta pengujian fungsi interface (antarmuka). Tujuannya dalah
mempercepat dan memudahkan dalam memvisualisasikan desain alternatif dan konsep, bukan
sekadar dari produk. Prototype harus dapat dibuang setelah digunakan (disposable).

4. TAHAP VALIDASI
Tahap validasi lebihmengarah pada evaluasi sebagai komponen pokok dari proses
pengembangan yang telah dilakukann sebelumnya, sekaligus mengetahui tanggapan end-user
terhadap antarmuka yang telah dibuat. Tahap ini juga dapat digunakan memperbaiki kekurangan
pada antarmuka yang telah dibangun.
THANK YOU