Prinsip Desain User Interface Dalam Multimedia Interaktif

Berbasis Halaman Web Dan Media Interaktif

1. Pengertian
Antarmuka Pemakai (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 membangun 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. Dengan demikian, user
interface bisa juga diartikan sebagai mekanisme inter-relasi atau integrasi total dari
perangkat keras dan lunak yang membentuk pengalaman bekomputer. 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. Prinsip Desain User interface

User interface desain adalah desain komputer, peralatan, mesin, perangkat komunikasi
mobile, aplikasi perangkat lunak, dan situs web dengan fokus pada pengalaman pengguna
dan interaksi. Tujuan dari user interface design adalah membuat interaksi pengguna
sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna-apa yang sering
disebut pengguna desain yang berpusat. User interface design yang bagus memfasilitasi dan
menyelesaikan tugas di tangan tanpa menarik perhatian yang tidak perlu pada dirinya
sendiri. Desain grafis dapat dimanfaatkan untuk mendukung kegunaan. Proses desain harus
menyeimbangkan fungsi teknis dan elemen visual (misalnya, model mental) untuk
menciptakan sebuah sistem yang tidak hanya operasional saja tetapi juga bermanfaat serta
dapat disesuaikan dengan kebutuhan pengguna berubah.
Interface design terlibat dalam berbagai proyek dari sistem komputer, untuk mobil, untuk
pesawat komersial; semua proyek-proyek ini melibatkan banyak interaksi sama manusia,
namun juga membutuhkan beberapa keterampilan yang unik dan pengetahuan. Akibatnya,
desainer cenderung mengkhususkan diri pada jenis proyek tertentu dan memiliki
kemampuan berpusat di sekitar keahlian mereka, apakah itu perancangan perangkat lunak,
penelitian pengguna, desain web, atau desain industri.
Prinsip desain juga merupakan petunjuk secara umum yang dihasilkan dari para pakar
desain. Beberapa prinsip antar muka salahsatunya oleh Deborah J. Mayhew’s dengan
“General Principles of User Interface Design”, yaitu :
1. User Compatibility : Kesesuaian tampilan dengan tipikal dari user, karena berbeda
user bisa jadi kebutuhan tampilannya berbeda.

2. Product Compatibility : Produk aplikasi yang dihasilkan juga harus sesuai, memiliki
tampilan yang sama/serupa, baik untuk user yang awam maupun ahli.

3. Task Compatibility : Fungsional dari task/tugas yang ada harus sesuai dengan
tampilannya.
4. Work Flow Compatibility : Aplikasi bisa dalam satu tampilan untuk berbagai
pekerjaan, dengan pertimbangan tidak terlalu overload.

5. Consistency : Adalah sebuah sistem harus sesuai dengan sistem nyata serta sesuai dengan
produk yang dihasilkan.
6. Familiarity : Memberikan tampilan yang familiar terhadap user. Antarmuka sebisa
mungkin didesain sesuai dengan antarmuka pada umumnya, dari segi tata letak, model, dsb
7. Simplicity : Kesederhanaan perlu diperhatikan pada saat membangun antarmuka. Tidak
selamanya antarmuka yang memiliki menu banyak adalah antarmuka yang baik. .

8. Direct Manipulation : User ingin sekali aplikasi yang dihadapannya bisa disesuaikan
dengan kebutuhan, sifat dan karakteristik user tersebut.
9. Control : Berikan kontrol penuh pada user, tipikal user biasanya tidak mau terlalu
banyak aturan. Prinsip control ini berkenaan dengan sifat user yang mempunyai tingkat
konsentrasi yang berubah-ubah.

10. WYSIWYG : WYSIWYG(What You See Is What You Get), artinya adanya
korespondensi satu ke satu antara informasi di layar dengan informasi di printed-
outputatau Buatlah tampilan mirip seperti kehidupan nyata user dan pastikan
fungsionalitas yang ada berjalan sesuai tujuan.
11. Flexibility : Bentuk dari dari solusi pada saat menyelesaikan masalah. Software engineer
dapat membuat berbagai solusi penyelesaian untuk satu masalah. Tool/alat yangbisa
digunakan user dan jangan hanya terpaku pada keyboard atau mouse saja.

12. Responsiveness : Tampilan yang di buat harus ada responnya. sistem langsung memberi
respon atau tanggapan yang cepat terhadap yang diinputkan. Misal, tampilan please wait
68%…
13. Invisible Technology : Secara umum, user mempunyai keingintahuan sebuah
kecanggihan dari aplikasi yang digunakannya. Untuk itu aplikasi yang dibuat
hendaknya mempunyai kelebihan yang tersembunyi. Bisa saja kelebihan itu
berhubungan dengan sistem yang melingkupinya atau bisa saja kecanggihan atau
kelebihan itu tidak ada hubungannya.

Contoh: sebuah aplikasi mempunyai voice recognize sebagai media inputan, pengolah
kata yang dilengkapi dengan language translator.

Alat dan bahan :

a. komputer kusunya windows 7

b. microphone
c. SO speech rocognition

Cara penggunaan:

1. Klik Start –> Control Panel

2. Pilih menu ease of acces (klik)

3. Klik pada menu speech recognition

4. Jika speech recognition belum terinstal di komputer, maka pilih jenis microphone
dan ikuti langkah selanjutnya untuk menginstal. tinggal klik next saja.

5. Setelah menginstal dan mengatur microphone –> start speech recognition setelah
itu akan muncul tanda speech recognition seperti gambar di atas.Setelah muncul
tulisan listening pada speech recognition katakan satu menu Yang ada dalam
komputer melalui microphone. Maka dengan otomatis speech recognition akan
melakukan perintah tersebut selama pengucapan yang dilakukan sesuai dengan
pronouns dalam bahasa inggris.
Contoh hasil uji:
 Setelah mengucapkan kata “start menu” maka dengan otomatis akan muncul start
menu.

Saat kita membuka suatu aplikasi dan kita mengatakan “close” maka dengan
sendirinya aplikasi itu akan tertutup.

Selain untuk membuka suatu program alam komputer, speech rocognition juga dapat
digunakan untuk menulis dalam word atau notepad selama pengucapan yang
diucapkan benar dan sesuai dalam bahasa inggris. Jika speech recognition ini tidak
digunakan maka dengan sendirinya akan off (sleeping). Sedangkan jika kita
mengucapkan kata “stop listening” maka dengan otmatis speech recognition akan off.
14. Robustness : Dapat mengakomodir kesalahan user, jangan malah eror, apalagi sampai
crash.

15. Protection : Melindungi user dari kesalahan yang umum dilakuakan. Misalnya,
dengan memberikan fitur back atau undo.

16. Ease of Learning : Aplikasi mudah dipelajari bagi user novice (awam). Hal ini akan
memberikan motivasi kepada user tersebut untuk menggunakannya.
17. Ease of Use : Buatlah sistem yang mudah digunakan untuk expert user.Sehingga
sistem yang kita bangun tidak hanya dipakai untuk novice usertetapi bisa juga dipakai
untuk user yang sudah ahli.
5. Penyajian User Interface
 Fungsi persyaratan pengumpulan hingga perakitan daftar fungsi yang diperlukan oleh
sistem untuk mencapai tujuan proyek dan potensi kebutuhan pengguna.
 User analisis – menganalisis potensi pemakai sistem baik melalui diskusi dengan orang-
orang yang bekerja dengan pengguna dan / atau potensi pemakai sendiri. pertanyaan
Khas meliputi:
 Apa yang akan pengguna ingin sistem untuk melakukan?
 Bagaimana sistem fit dengan alur kerja normal pengguna atau kegiatan sehari-hari?
 Bagaimana cerdas secara teknis adalah pengguna dan apa sistem tidak seupa
pengguna sudah gunakan?
 Seperti apa tampilan & merasa gaya banding kepada pengguna?
 Arsitektur Informasi – pengembangan proses dan / atau arus informasi
darisistem(misalnya untuk sistem pohon telepon, ini akan menjadi sebuah pohon pilihan
flowchart dan untuk situs web ini akan menjadi aliran situs yang menunjukkan hirarki
dari halaman).
 Prototyping – pengembangan wireframes, baik dalam bentuk kertas atau prototip layar
interaktif sederhana. Prototipe ini dilepaskan dari semua tampak & merasa elemen dan
konten yang paling dalam rangka untuk berkonsentrasi pada antarmuka jaringan.
 Kegunaan pengujian – pengujian prototipe pada teknik pengguna-sering menggunakan
yang sebenarnya yang disebut berpikir keras protokol di mana Anda meminta pengguna
untuk berbicara tentang pikiran mereka selama pengalaman.
 Grafis Desain interface – tampilan yang sebenarnya & merasa User interface desain
akhir grafis (GUI). Ini mungkin didasarkan pada temuan dikembangkan selama
pengujian kegunaan jika kegunaan adalah terduga, atau berdasarkan tujuan komunikasi
dan gaya yang menarik bagi pengguna. Dalam kasus yang jarang terjadi, mungkin grafis
drive prototipe, tergantung pada pentingnya bentuk visual versus fungsi. Jika interface
telah membutuhkan beberapa kulit, mungkin ada beberapa desain interface untuk satu
panel kontrol, fitur fungsional atau widget. Fase ini sering merupakan upaya kolaborasi
antara desainer grafis dan interface designer pengguna, atau ditangani oleh orang yang
ahli dalam kedua disiplin.
6. Perancangan Antar Muka ( interface) Pengguna
Tujuan dari Perancangan Antarmuka Pengguna adalah merancang interface yang efektif
untuk sistem perangkat lunak. Efektif artinya siap digunakan, dan hasilnya sesuai dg
kebutuhan. Kebutuhan disini adalah kebutuhan penggunanya. Pengguna sering menilai
sistem dari interface, bukan dari fungsinya melainkan dari user interfacenya. Jika desain user
interfacenya yang buruk, maka itu sering jadi alasan untuk tidak menggunakan software.
Selain itu interface yang buruk sebabkan pengguna membuat kesalahan fatal. Saat ini
interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface).
GUI memberikan keuntungan seperti:
1. Gampang dipelajari oleh pengguna yang pengalaman dalam menggunakan komputer
cukup minim.
2. Berpindah dari satu layar ke layar yang lain tanpa kehilangan informasi dimungkinkan.
3. Akses penuh pada layar dengan segera untuk beberapa macam tugas/keperluan.

7. Tipe-Tipe 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
trackbal

Berdasarkan contoh storyboard pada bagian sebelumnya, dapat dibuat rancangan antarmukanya
sebagai berikut:
a. Rancangan tampilan awal
Tampilan awal adalah animasi hitungan waktu mundur. Setelah hitungan mencapai angka 1
maka akan tampil ucapan selamat datang bagi pengguna aplikasi.

Selamat Datang di
Media Pembelajaran Interaktif

Gambar. Rancangan tampilan awal

b. Rancangan tampilan halaman judul.

Halaman judul menampilkan judul materi dalam aplikasi media pembelajaran interaktif.
Pada halaman ini sudah ditampilkan menu-menu dalam aplikasi yaitu menu kompetensi
dasar, mengenal komputer, materi, kuis dan keluar. Dari halaman judul ini, pengguna dapat
langsung memilih salah satu menu yang ada dalam aplikasi. Jika pengguna memilih menu
keluar, maka aplikasi akan tertutup.
 Media Pembelajaran Interaktif Suara Keluar
Mengenal Komputer

KD Indikator Materi

Quis Tentang

Gambar 4. 18. Rancangan tampilan halaman judul

c. Rancangan tampilan halaman kompetensi dasar.

Jika pengguna memilih menu kompetensi dasar, maka akan tampil halaman yang memuat
informasi mengenai kompetensi dasar. Pada halaman ini terdapat tombol untuk lanjut ke
halaman kompetensi berikutnya dan tombol kembali untuk menuju halaman sebelumnya.
Terdapat juga tombol menu utama yang jika dipilih akan membawa pengguna kembali ke
tampilan judul.

Media Pembelajaran Interaktif Suara Keluar

Mengenal Komputer

Menu
Utama
KD Indikator

Gambar. Rancangan tampilan menu KD Indikator

d. Rancangan tampilan menu Mengenal Komputer.
Pengenalan Komputer dikelompokkan berdasarkan bagian-bagiannya. Oleh karena itu, pada
menu pengenalan komputer terdapat beberapa tombol pilihan untuk mempelajari bagian-
bagian yang ada pada komputer. Pengguna tinggal memilih salah satu bagian komputer yang
akan dipelajari, maka akan tampil halaman bagian komputernya.

Media Pembelajaran Interaktif Suara Keluar

Mengenal Komputer

Menu
Koputer Komponen
Utama
Input

Komponen Komponen
Proses output

Gambar. Rancangan tampilan menu

e. Rancangan tampilan menu kuis

Pada menu kuis terdapat tombol kuis masuk. Jika tombol lanjut ditekan, maka akan akan
menuju ke halaman yang menampilkan soal-soal kuis.

Media Pembelajaran Interaktif Suara Keluar

Mengenal Komputer

Menu
QUIZ
Utama
Selamat Datang di Quis Interaltif

Masuk

Gambar. Rancangan tampilan menu KUIS