BAHAN AJAR

DESAIN MEDIA INTERAKTIF

PRINSIP-PRINSIP DESAIN USER INTERFACE PADA MULTIMEDIA
INTERAKTIF

OLEH
I KOMANG FERRY ASTRAWAN, S.PD
NO. UKG : 201900938736

UNIVERSITAS PENDIDIKAN GANESHA

SINGARAJA
2022
 KATA PENGANTAR

Puji syukur penulis haturkan kehadirat Tuhan Yang Maha Esa Atas rahmat-Nya lah Penulis
dapat menyelesaikan materi ajar ini tepat pada waktunya.Tak lupa Penulis juga menghaturkan
terima kasih yang sebesar-besarnya kepada semua pihak yang telah mendukung dan membantu
Penulis dalam menyelesaikan makalah ini.
Dalam makalah yang berjudul Prinsip-Prinsip Dasar User Interface Pada Multimedia
Interaktif ini, akan dibahas mengenai Perkembangan User Interface, tujuan dan manfaat desain
user interface dan Prinsip desain user interface. Selain itu, untuk mempermudah pemahaman juga
sebagai bahan latihan, Penulis juga menyertakan contoh desain user interface yang dapat dipahami
dan dirancang oleh para pembaca.
Namun demikian, Penulis merasa masih banyak sekali kekurangan dalam penyusunan
makalah ini, Oleh karena itu, segala saran dan kritik yang membangun dari yang lebih
berkompeten di bidang desain user interface, penulis terima dengan penuh rasa terima kasih.

Bangli, Agustus 2022

Penulis

ii
 DAFTAR ISI

A. PENDAHULUAN
1. Deskripsi Singkat .................................................................................. 1
2. Relevansi ............................................................................................... 1
3. Petunjuk Belajar .................................................................................... 2
B. INTI
1. Capaian Pembelajaran .......................................................................... 2
2. Sub Capaian Pembelajaran ................................................................... 3
3. Pokok-Pokok Materi ............................................................................ 3
4. Uraian Materi ....................................................................................... 3
5. Tugas .................................................................................................... 8
6. Forum Diskusi ...................................................................................... 8
C. PENUTUP
1. Rangkuman .......................................................................................... 8
2. Tes Formatif ......................................................................................... 9

Daftar Pustaka

iii
 DAFTAR GAMBAR

Gambar 1. User Compatibility .................................................................................... 4

Gambar 2. Product Compatibility ............................................................................... 5
Gambar 3. Task Compatibility.................................................................................... 5
Gambar 4. Work Flow Compatibility ........................................................................ 6
Gambar 5 Cosnistency ................................................................................................ 6
Gambar 6 Familiarity .................................................................................................. 6
Gambar 7. Simplicity .................................................................................................. 7

4
 PRINSIP-PRINSIP DESAIN USER INTERFACE

A. Pendahuluan

1. Deskripsi Singkat
Desain user interface sangat penting karena berpengaruh pada end-user dalam
berkomunikasi menggunakan komputer. Jika suatu program sulit untuk digunakan akan
memaksa end user melakukan kesalahan pada saat menggunakan program tersebut.
Dalam penggunaan teknologi jenis kapak pun akan terjadi hubungan atau komunikasi
dengan suatu sistem didalamnya yang bisa dinyatakan sebagai user interface (antar
muka pengguna). user interface bermanfaat dalam menerjemahkan informasi antar
end-user akhir (end-end-user) dengan sistem komputer dengan tujuan tertentu,
misalnya dalam pemberian dan penerimaan informasi, penginputan data, penampilan
suatu sistem, dan memberikan tata cara tertentu sehingga membuat seorang user bisa
paham dengan apa yang dikerjakan.
Secara khusus, tujuan kegiatan belajar ini adalah agar peserta didik mampu: (1)
Melalui diskusi peserta didik diharapkan dapat menggunakan prinsip-prinsip desain
user interface pada multimedia interaktif berbasis halaman web dan media interaktif
dengan tepat; (2) Melalui demonstrasi peserta didik diharapkan dapat
mendemonstrasikan user interface pada multimedia interaktif dengan tepat; (3) Melalui
praktek peserta didik diharapkan dapat merancang tampilan user interface
menggunakan prinsip-prinsip desain user interface pada multimedia interaktif berbasis
halaman web dan media interaktif yang tepat; (4) Melalui praktek peserta didik
diharapkan dapat membuat tampilan user interface menggunakan prinsip-prinsip
desain user interface pada multimedia interaktif berbasis halaman web dan media
interaktif yang tepat;

2. Relevansi
Perkembangan teknologi pada saat sekarang ini sudah menghasilkan
perkembangan yang cukup besar terhadap kehidupan. Perkembangan ini
mempengaruhi kegiatan pembelajaran di sekolah pada bidang teknologi informasinya.
Teknologi informasi ini berpengaruh dalam pengaksesan pelajaran yang tergolong
cepat tergantung penggunaanya. Kondisi inilah yang mempengaruhi pendidikan saat
ini.
Di dalam penggunaan teknologi tersebut akan terjadi hubungan atau komunikasi
yang bisa dibilang dengan User Interface (Antarmuka Pengguna). Secara definisinya
User interface itu merupakan komunikasi yang terjadi antara si pengguna dengan suatu
sistem di dalamnya. User interface design ialah peralatan yang berhubungan langsung
dengan komputer yang terarah dan pengalaman dari si pengguna. Tujuan dari user

1
 interface design ini yaitu membuat efek secara sederhana dan efektif. Desain ini dapat
dipakai dalam hal pendukungan kegunaannya.
User interface ini bertugas dalam penerimaan informasi, memberikan informasi,
penginputan data, penampilan suatu sistem dan juga memberikan tata cara yang
membuat pemakai bisa paham dengan yang dikerjakan. User interface juga bermanfaat
dalam menerjemahkan informasi antar pengguna dengan sistem yang memungkinkan
komputer dapat berguna.

3. Petunjuk Belajar
Proses pembelajaran untuk materi modul kegiatan belajar ini dapat berjalan dengan
lancar bila Anda mengikuti langkah-langkah belajar sebagai berikut:
a. Pahami dulu kegiatan penting dalam program pelatihan ini dengan memperhatikan
isi capaian pembelajaran
b. Lakukan kajian terhadap setiap materi, agar memudahkan proses pembelajaran.
c. Untuk memperluas wawasan, baca, dan pelajari sumber-sumber lain yang relevan.
Anda dapat menemukan bacaan dari berbagai sumber, termasuk dari internet.
d. Guru akan meng-orientasi peserta didik terhadap masalah yang meliputi:
menyampaikantujuan pembelajaran dan aktivitas yang akan dilakukan agar peserta
didik tahu apa tujuan utama pembelajaran, apa permasalahan yang akan dibahas,
kemudian bagaimana guru akan mengevaluasi proses pembelajaran. Hal ini untuk
memberi konsep dasar kepada peserta didik. Guru harus bisa memberikan motivasi
peserta didik untuk terlibat aktif dalam pemecahan masalah yang dipilihakan
dibahas.
e. Guru Mengorganisasikan peserta didik, yaitu membantu peserta didik
mendefinisikan dan mengorganisasikan tugas belajar yang berhubungan dengan
masalah yang telah diorientasi, misalnya membantu peserta didik membentuk
kelompok kecil, membantu peserta didik membaca masalah yang ditemukan pada
tahap sebelumnya, kemudian mencoba untuk membuat hipotesis atas masalah yang
ditemukan tersebut.
f. Guru membimbing penyeledikan individu dan kelompok, guru mendorong peserta
didik untuk mengumpulkan informasi sebanyak-banyaknya, melaksanakan
eksperimen, menciptakan dan membagikan ide mereka sendiri untuk mendapatkan
penjelasan dan pemecahan masalah.

B. INTI
1. Capaian Pembelajaran
Setelah mengikuti seluruh tahapan pada kegiatan belajar ini, peserta didik
diharapkan mampu memahami dan menggunakan prinsip-prinsip desain user interface
pada multimedia interaktif dan mampu merancang user interface yang ada kaitannya
dengan kehidupan sehari-hari.

2
2. Sub Capaian Pembelajaran
a. Melalui diskusi peserta didik diharapkan dapat menggunakan prinsip-prinsip desain
user interface pada multimedia interaktif berbasis halaman web dan media
interaktif dengan tepat;
b. Melalui demonstrasi peserta didik diharapkan dapat mendemonstrasikan user
interface pada multimedia interaktif dengan tepat;
c. Melalui praktek peserta didik diharapkan dapat merancang tampilan user interface
menggunakan prinsip-prinsip desain user interface pada multimedia interaktif
berbasis halaman web dan media interaktif yang tepat;
d. Melalui praktek peserta didik diharapkan dapat membuat tampilan user interface
menggunakan prinsip-prinsip desain user interface pada multimedia interaktif
berbasis halaman web dan media interaktif yang tepat;

3. Pokok-Pokok Materi
a. Definisi Desain User Interface
b. Tujuan dan Manfaat User Interface
c. Prinsip Desain User Interface
d.

4. Uraian Materi
a. 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 embangun user
interface adalah kemudahan dalam memakai/ menjalankan sistem, interaktif,
komunikatif, sedangkankesulitan dalam mengembangkan/ membangun suatu program
jangan terlalu diperlihatkan.

b. Tujuan dan Manfaat User Interface

Tujuan Antar Muka (interface) Pengguna
➢ Menyesuaikan antar muka pengguna dengan tugas.
➢ Membuat antar muka pengguna menjadi efisien.
➢ Memberikan arus balik yang tepat kepada pengguna.

3
 ➢ Memunculkan pertanyaan-pertanyaan yang dapat dimanfaatkan.
➢ Memperbaiki produktivitas dari pengetahuan pegawai

Manfaat User Interface

Manfaat Antar Muka (Interface) penggunaManfaat User Interface untuk
menghubungkan atau penterjemah informasi antarapengguna dengan system
operasi, sehingga computer dapat digunakan. Dengan demikian,user interface bisa
juga diartikan sebagai mekanisme inter-relasi atau integrasi total dariperangkat
keras dan lunak yang membentuk pengalaman bekomputer. Use interface dari
sisisoftware 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.

c. Prinsip-prinsip Desain User Interface

Deborah J. Mayhew, dengan General Principles Of UI Design, atau
Prinsip Umum Desain User Interface. Ada 17 prinsip yang harus dipahami para
perancang sistem, terutama untuk mendapatkan hasil maksimal dari tampilan
yang dibuat.
➢ 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.

Gambar 1. User Compatibility

➢ 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.

4
 Gambar 2. Product Compatibility

➢ 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).

Gambar 3. Task Compatibility

➢ Work Flow Compatibility, aplikasi bisa dalam satu tampilan untuk berbagai
pekerjaan.. jika tampilan yang ada hanya untuk satu pekerjaan saja. Missal
untuk kirim mail, maka kita harus membuka tampilan tersendiri untuk
daftar alamat.

5
 Gambar 4. Work Flow Compatibility
➢ Consistency. Konsisten. Contohnya, jika anda menggunakan istilah save
yang berarti simpan, maka gunakan terus istilah tersebut.

Gambar 5. Consistency
➢ Familiarity, memberikan tampilan yang mudah dikenali dan end user tidak
kesulitan dalam memakainya.

Gambar 6. Familiarity

6
➢ Simplicity, menekankan kepada kesederhanaan yang harus diperhatikan
pada saat membangun sebuah antar muka

Gambar 7. Simplicity

➢ Direct Manipulation, manipulasi secara langsung. misalnya untuk

mempertebal huruf, cukup dengan ctrl+B.

➢ Control, berikan kontrol penuh pada user, 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.

➢ Flexibility, tool/alat yang bisa digunakan user. jangan hanya terpaku pada
keyboard atau mouse saja.

➢ Responsiveness, tampilan yang dibuat harus ada responnya. misal, yang

sering kita lihat ketika ada tampilan please wait... 68%...

➢ Invisible Technology. user tidak penting mengetahui algoritma apa yang

digunakan. Contohnya untuk mengurutkan pengguna tidak perlu
mengetahui algoritma yang digunakan programmer (max sort, bubble sort,
quick sort, dst)

➢ Robustness, handal. Dapat mengakomodir kesalahan user. jangan malah

error, apalagi sampai crash.

7
 ➢ Protection, melindungi user dari kesalahan yang umum dilakukan. Misalnya
dengan memberikan fitur back atau undo. Ease of Learning. aplikasi. mudah
dipelajari.

➢ Ease of use, aplikasi harus mudah digunakan

d. Tipe Interaksi Antar Muka Pengguna

Ada beberapa tipe antarmuka yang dapat digunakan untuk menjembatani
interaksi antara pengguna dengan aplikasi multimedia interaktif, yaitu
➢ Commad line interface
➢ Menu selection
➢ Form fill in
➢ Command language
➢ Natural language
e. Perancangan Desain, Menu, Tombol pada Media Interaktif
Dalam perancangan user interface media interaktif setidaknya harus memuat
beberapa tampilan yaitu
➢ Tampilan awal
➢ Tampilan judul
➢ Tampilan konten
➢ Tampilan pendukung.
5. Tugas
Buatlah sebuah sketsa Desain User Interface dari Media Pembelajaran yang sederhana
sesuai dengan prinsip-prinsip desain user interface.

6. Forum Diskusi
Setelah belajar tentang prinsip-prinsip desain user interface pada multimedia interaktif
berbasis halaman web dan media interaktif, apa masalah yang dihadapi ketika kalian
disuguhkan user interface dari sebuah media pembelajaran yang belum pernah kalian
gunakan!

C. PENUTUP
1. Rangkuman
a. Antarmuka Pemakai (User Interface) merupakan mekanisme komunikasi antara
pengguna (user) dengan sistem.
b. Tujuan Menyesuaikan antar muka pengguna dengan tugas, Membuat antar muka
pengguna menjadi efisien, Memberikan arus balik yang tepat kepada pengguna

8
 Memunculkan pertanyaan-pertanyaan yang dapat dimanfaatkan, Memperbaiki
produktivitas dari pengetahuan pegawai.
c. Manfaat Antar Muka (Interface) penggunaManfaat User Interface untuk
menghubungkan atau penterjemah informasi antarapengguna dengan system
operasi, sehingga computer dapat digunakan
d. Prinsip-prinsip Desain User Interface : User Compatibility, Consistency, Control,
Dirrect Manipulation, Ease of Learning And Ease of Use, Familiarity, Flexibility,
Invisible Technology, Protection, Rebotsness, Responssiveness, Simplicity,
WYSIWYG (What You See Is What You Get)

2. Tes Formatif
1. Jika yang tercetak di printer pada dasarnya informasi yang terkumpul dari data-data yang
terlihat dilayar monitor pada saat mencari data, termasuk ke dalam prinsip ....
a. Control
b. Simplicity
c. Familiarity
d. direct manipulation
e. WYSIWYG

2.

9
 Menurut gambar diatas, merupakan prinsip sebuah desain user interface yaitu ....
a. Compatibility
b. Familiary
c. Flexibility
d. WYSIWYG
e. Control
3.

Gambar diatas menunjukan prinsip desain user interface ....

a. Control
b. Simplicity
c. Responssiveness
d. Direct Manipulation
e. WYSIWYG
4.

10
 Kemudahan dalam mengoperasikan software hanya dengan memandangi atau belajar
beberapa jam saja. Seperti, kemudahan dalam memahami icon, menu-menu, alur data
software dsb. Jika sudah memahami tentunya akan membantu proses menjalankan
sistem dengan cepat dan baik. merupakan ciri dari prinsip ...
a. Protection
b. Invisible technology
c. Ease of Learning and Ease of Use
d. WYSIWYG(What You See Is What You Get)
e. Control
5. Memberikan sistem sederhana yang tidak membuat si pemakai kebingungan. Hal
yang membuat si pemakai bosan ialah dengan sistem yang tidak sederhana atau
bisa di bilang dengan berbelit. Tetapi si pemakai akan merasa senang apabila sistem
itu mempunyai nilai kesederhanaan. Hal ini sesuai dengan prinsip...
a. Consistency
b. Work Flow
c. Control
d. User Friendly
e. Simplicity
6.

Saat instalasi sebuah aplikasi, terkadang terbaca sebagai virus, hal ini karena menggunakan
prinsip...
a. Protection
b. Compability]
c. User Compability
d. Consistency
e. WYSIWYG
7. WYSIWYG adalah ....
a. Desain tampilan harus menarik orang yang melihatnya
b. Yang didapat pada saat melihat desain
c. Apa yang dilihat pada desain tampilan, itulah yang didapatkan oleh
pengguna.
d. Tampilan sudah sering dilihatnya atau didapatkannya

8.

11
 Perhatikan gambar diatas, gambar tersebut termasuk user interface dengan masukan
menggunakan....
a. Sensor
b. Sentuhan
c. Keyboard
d. Mouse
e. Controller
9. Seorang perancang sistem harus benar-benar paham tentang pengetahuan, cara
berpikir dan cara menerima informasi dari user sehingga sistem yang nantinya
akan digunakan oleh user dapat membuat user lebih produktif adalah jenis sitem
perancangan user interface bersifat..
a. User Compability
b. Product Compability
c. Tasks Compability
d. Work flow
e. Consistency
10. Microsoft powerpoint, microsoft excel dan microsoft word memiliki keseragaman tool dan
tampilan tatap muka yang hampir mirip. Dari pernyataan tersebut, dapat disimpulkan bahwa
pengembang aplikasi microsoft memegang prinsip interface yaitu….
a. Consistency
b. Simplicity
c. Familiarity
d. Flexibility
e. Responisiveness

12
 Daftar Pustaka

1. Asmoro, Siwi Widi. 2019. Desain Media Interaktif. Yogyakarta : ANDI

2. Buku Panduan Guru / Modul Desain Media Interaktif

13