Kegiatan Pembelajar
belajaran 3 AntarMuka Multim Interaktif
eserta diklat dapat menganalisis prinsip-prin n antarmuka sebuah aplikasi bagi penggun hargai pendapat peserta lain.
si peserta diklat dapat menentukan tipe antarm aplikasi multimedia pembelajaran interaktif se wab
capaian Kompetensi
sip-prinsip dasar dalam pembuatan antarmuk guna
sil analisis prinsip-prinsip dasar dalam p h aplikasi bagi pengguna
antarmuka yang digunakan dalam aplikasi m raktif
(User Interface) merupakan mekanisme ko ser) dengan sistem. Antarmuka pemakai dapat
una dan memberikan informasi kepada pengg kan alur penelusuran masalah sampai ditemu antarmuka penggunamemiliki peranti masuka n media input lainnya), peranti keluaran (seper ri pengguna (seperti garis, gerakan mouse da
ang dikeluarkan oleh komputer (seperti grafik,
rinsip yang harus diperhatikan dalam pembua
imedia
rinsip dasar una secara rmuka yang secara teliti uka sebuah pembuatan si multimedia komunikasi at menerima gguna untuk ukan suatu kan (seperti erti monitor, dan ketikan ik, bunyi dancompatibility, ta familiarity,simplici a. User compatib Antarmuka m gerbang masu perangkat lun mengenal use kebiasaan Desainerharusm ariuser jumlahnyabisa tersebutharust mukadengand b. Product comp Sebuah aplika sistem asliny berbeda deng tidak diharap perangkat lun mampu mengh c. Task compatib Sebuah aplika para user dala tugas user antarmuka.Se memilih dan b dan proses b melalui antarm next, next, fini d. Workflow com Sebuah aplika didalamnya t pekerjaan.Dal
task compatibility, workflow compatibility
licity. tibility
merupakan topeng dari sebuah sistem atau suk ke sistem dengan diwujudkan ke dalam lunak. Oleh karena itu sebuah perangkat lun usernya, mengenal karakteristik usernya, da
manusia secara rusmencaridanmengumpulkanberbagaikarakte karenaantarmukaharusdisesuaikandenganu isajadilebihdari1 danmempunyaikarakteryang usterpikirkanolehdesainerdantidakdianjurkanm ndidasarkanpadadirinyasendiri. patibility
likasi yang menggunakan antarmuka harus inya.Seringkali sebuah aplikasi menghasilk ngan sistem manual atau sistem yang ada.Hal apkan dari perusahaan karena dengan a unak diharapkan dapat menjaga produk yang nghasilkan produk yang jauh lebih baik.
tibility
ikasi yang menggunakan antarmuka harus ma alam menyelesaikan tugasnya. Semua pekerja r harus diadopsi di dalam aplikasi te Sebisa mungkin user tidak dihadapkan d n berpikir, tapi user dihadapkan dengan piliha berpikir dari tugas-tugas user dipindahkan armuka.Contoh : User hanya klik setup, teka
inish, ok untuk menginstal suatu perangkat lun mpatibility
likasi sistem sudah pasti mengapdopsi sistem tentunya terdapat urutan kerja dalam
alam sebuah aplikasi, software engineer ha
ility, consistency,
tau sebuah pintu m sebuah aplikasi lunak seolah-olah dari sifat sampai umum. kteristiksertasifatd nuser yang ng berbeda.Hal merancangantar s sesuai dengan silkan hasil yang al tersebut sangat adanya aplikasi ng dihasilkan dan
ampu membantu rjaan serta tugas- tersebut melalui dengan kondisi lihan yang mudah an dalam aplikasi kan tombol next, unak.
m manualnya dan menyelesaikan harus memikirkan
Jangan sampai u pekerjaannya kare pekerjaan yang ada yang dihadapinya. pilihan menu yan merupakan urutan compatibility dapat pekerjaannya. e. Consistency
Sebuah sistem haru produk yang dihasi memperhatikan hal aplikasi khususnya font, format desain sehingga user tida pekerjaan atau berp didasarkan pada ka menggunakan ana memprediksi. Conto PowerPoint, Access f. Familiarity
Sifat manusia mud dilihatnya atau dida Antarmuka sebisa umumnya, dari seg membantu user cep familiar bagi user. g. Simplicity
Kesederhanaan per Tidak selamanya antarmuka yang bai ringkas dan tidak te
user mengalami kesulitan dalam meny rena user mengalami kebingungan ketik da pada sistem manual tidak ditemukan pada
. Selain itu user jangan dibingungkan denga ang terlalu banyak dan semestinya me n dari runutan pekerjaan. Sehingga dengan pat membantu seorang user dalam mem
arus sesuai dengan sistem nyata serta sesua hasilkan. Oleh karena itu software engine
al-hal yang bersifat konsisten pada saat m a antarmuka, contoh : penerapan warna, strukt in yang seragam pada antarmuka di berbaga dak mengalami kesulitan pada saat berpind erpindah lokasi dalam menyelesaikan pekerjaa karakteristik manusia yang mempunyai pemik analogi serta kemampuan manusia da ntoh : keseragaman tampilan toolbar pada Wo
ss hampir sama.
udah mengingat dengan hal-hal yang suda idapatkannya. Secara singkat disebut dengan sa mungkin didesain sesuai dengan antarm
segi tata letak, model dan sebagainya.Hal cepat berinteraksi dengan sisem melalui antarm
.
perlu diperhatikan pada saat membangun a a antarmuka yang memiliki menu banya baik.Kesederhanaan disini lebih berarti sebaga k terlalu berbelit. User akan merasa lelah dan b
nyelesaikan tika urutan da software gan pilihan- menu-menu an workflow empercepat suai dengan ineer harus merancang ruktur menu, agai bagian, indah posisi jaan. Hal itu ikiran yang dalam hal ord, Excell, sudah sering gan familiar. rmuka pada al ini dapat rmuka yang antarmuka. yak adalah gai hal yang n bosan jika
terlalu panjan sederhana teta h. Direct manipu Userberharap patdigunakanu Useringinseka an,sifatdankar ahataumempu (misal pink) tampilan skin w i. Control Prinsip contro konsentrasi ya berjalannya si biasabagiseor danakanberak karaktersajain Olehkarenaitu mampumenga command”, “ca j. Flexibility Fleksibel mer masalah. So penyelesaian atau model dia
Ada 5 tipe antarm antara pengguna manipulation, me language. 1. Direct manipu Interaksi langsu memasukkann
ang dan berbelit. User lebih menyukai hal-ha tetapi mempunyai kekuatan/ bobot.
pulation
apaplikasiyangdihadapinyamempunyaimediaat anuntukmelakukanperubahanpadaantarmukate kaliaplikasiyangdihadapannyabisadisesuaikan karakteristikusertersebut.Selainitu,sifatdariusery
punyairasabosan.Contoh : tampilan warna se ) pada window bisa dirubah melalui desk in winamp bisa diubah, dan lain-lain.
trol ini berkenaan dengan sifat user yang mem yang berubah-ubah. Hal itu akan sangat meng sistem.Kejadiansalahketikatausalahentry mer oranguser. Akantetapihalituakandapatmengg rakibatsangatfatal karenasalahmemasukkand informasiyang dihasilkansangatdimu itusoftware engineer haruslahmerancangsu gatasidanmenanggulangihal-halsepertiitu.Cont “can’t recognize input” sebagai portal jika terja
erupakan bentuk dari dari solusi pada saat Software engineer dapat membuat be n untuk satu masalah. Sebagai contoh adanya dialog yang lainnya.
armuka yang dapat digunakan untuk menjem una dengan aplikasi multimedia interaktif
menu selection, form fill in, command langua
ipulation– pengoperasian secara langsung
ngsung dengan objek pada layar. Misalnya de nnya ke trash. Kelebihannya adalah waktu
l-hal yang bersifat
atautoolsyangda atersebut. andengankebutuh seryangsukamerub sesuai keinginan sktop properties, empunyai tingkat engganggu proses erupakanhalyang gganggu system ndata 1 digit/1 imungkinkansalah. gsuatukondisiyang ontoh : “illegal rjadi kesalahan. at menyelesaikan berbagai solusi nya menu, hotkey,
embatani interaksi ktif, yaitu direct
uage dan natural
delete file dengan ktu pembelajaran
sehingga kesalah Kekurangannya ada fasilitas pada sistem untuk satu operasi a
Gambar 13 Direct manipulation
2. Menu selection– pil
Memilih perintah da dan memilih aksi ya perlu ingat nama p rendah. Kekurangan struktur menu jika pengguna ahli diban
ahan terdeteksi dan diperbaiki dengan dalah antarmuka tipe ini rumit dan memerluka em komputer, cocok untuk penggambaran seca si atau objek.
Gambar 13 Direct manipulation
pilihan berbentuk menu
dari daftar yang disediakan. Misalnya saat k yang dikehendaki. Kelebihannya adalah pengg perintah, pengetikan minimal, dan tingkat k annya adalah tidak ada logika AND atau OR, ka banyak pilihan, dan menu dianggap lam
andingcommand language.
gan cepat. kan banyak secara visual
Gambar 13 Direct manipulation
t klik kanan gguna tidak t kesalahan R, perlu ada lambat oleh
Gambar 14 Menu selection 3. Form fill-in– p Mengisi area sederhana da tempat di laya pengguna.
Gambar 14 Menu selection
– pengisian form
ea-area pada form. Kelebihannya masuk dan mudah dipelajari. Kekurangannya mem yar, harus menyesuaikan dengan form manua
Gambar 14 Menu selection
sukan data yang merlukan banyak ual dan kebiasaan
Gambar 15 Form fill in
4. Command language
Menuliskan perint Kelebihannyaperinta pada terminal yang copy file dan renam dan diingat cara p sering terjadi kesa pemulihan kesalaha
Gambar 15 Form fill in
ge– perintah tertulis
rintah yang sudah ditentukan pada ntah diketikan langsung pada system, dapat d
ng murah, kombinasi perintah dapat dilakuk ame nama file. Kekurangannya perintah harus penggunaannya, tidak cocok untuk penggu esalahan menggunakan perintah, perlu ad
han.
Gambar 15 Form fill in
program. t diterapkan ukan. Misal us dipelajari guna biasa, ada sistem
5. Natural langua Menggunakan engine di Inte dengan kosa tentukan untu sistem cocok m
Gambar 17 Natural language
(h Berdasarkan stor antarmukanya seb a. Rancangan ta Tampilan awa mencapai an pengguna apli
guage– perintah dengan bahasa alami
an bahasa alami untuk mendapatkan hasil. nternet. Kelebihannya perintah dalam bentuk sa kata yang terbatas (singkat) misalnya kata tuk dicari oleh search engine. Kekuranganny k menggunakan ini.
Gambar 17 Natural language
(http://www.intellexer.com/natural_language.h
storyboard pada kegiatan belajar 2 dapat dib sebagai berikut
tampilan awal
wal adalah animasi hitungan waktu mundur. S angka 1 maka akan tampil ucapan selama
plikasi
sil. Contoh: search tuk bahasa alami, ta kunci yang kita nnya tidak semua
Gambar 17 Natural language
.html)
dibuat rancangan
. Setelah hitungan mat datang bagi
Gambar 18 Rancangan tampilan awal
b. Rancangan tampilan Halaman judul m pembelajaran intera dalam aplikasi yait petunjuk, materi, ku langsung memilih pengguna memilih m
Gambar 18 Rancangan tampilan awal
ilan halaman judul
menampilkan judul materi dalam aplika raktif. Pada halaman ini sudah ditampilkan me aitu menu standar kompetensi, sejarah ma kuis dan keluar. Dari halaman judul ini, penggu h salah satu menu yang ada dalam aplik h menu keluar, maka aplikasi akan tertutup.
Gambar 18 Rancangan tampilan awal
kasi media menu-menu matematika, gguna dapat plikasi. Jika
c. Rancangan ta Jika penggun halaman yang halaman ini te berikutnya da Terdapat juga kembali ke tam
Gambar 20 Rancangan tampilan menu STANDAR KOMPETENSI
d. Rancangan ta Sejarah mat berdasarkan z terdapat bebe sesuai dengan yang akan di sesuai dengan
tampilan halaman standar kompetensi
una memilih menu standar kompetensi, ma ng memuat informasi mengenai standar kom i terdapat tombol untuk lanjut ke halaman stan
dan tombol kembali untuk menuju halama ga tombol home yang jika dipilih akan memb tampilan judul.
Gambar 20 Rancangan tampilan menu STANDAR KOMPETENSI
tampilan menu sejarah matematika
atematika sangat panjang dan dapat n zamannya. Oleh karena itu, pada menu seja
berapa tombol pilihan untuk mempelajari seja gan zamannya. Pengguna tinggal memilih sa di pelajari, maka akan tampil halaman sejar an zamannya.
aka akan tampil kompetensi. Pada tandar kompetensi man sebelumnya. mbawa pengguna
Gambar 20 Rancangan tampilan menu STANDAR KOMPETENSI
t dikelompokkan sejarah matematika sejarah matematika salah satu zaman jarah matematika
Gambar 21 Rancangan tampilan menu SEJARAH MATEMATIKA
e. Rancangan tampilan Pada menu kuis terd dan NIM, setelah itu maka akan akan me
Gambar 21 Rancangan tampilan menu SEJARAH MATEMATIKA
ilan menu kuis
erdapat form fill in. Pengguna harus memasukk itu menekan tombol lanjut. Jika tombol lanjut menuju ke halaman yang menampilkan soal-so
Gambar 21 Rancangan tampilan menu SEJARAH MATEMATIKA
sukkan nama jut di tekan, -soal kuis.
D.Aktivitas Pembelaj
Pengajar member diklat membentuk kelompok melaku - Melaku interak - Menga compa simplici interak - Menuli product consist aplikasiE. Latihan/ Kasus /Tu
Berdasarkan stor cobalah untuk m (halaman judul) da
F. Rangkuman
1. Antarmuka pe antara penggu 2. Terdapat beb suatu antarmu compatibility, familiarity, sim 3. Ada 5 tipe interaksi anta direct manipul natural languambelajaran
erikan beberapa contoh aplikasi multimedia in tuk kelompok yang terdiri dari 3-5 orang. kukan kegiatan berikut :
kukan pengamatan terhadap antarmuka apli aktif
ganalisis prinsip user compatibility, product co patibility, workflow compatibility, consisten licity yang ada dalam antarmuka aplika aktif.
uliskan laporan hasil analisis prinsip use uct compatibility, task compatibility, workflow sistency, familiarity, simplicity yang ada da
asi multimedia interaktif.
Kasus /Tugas
storyboard yang telah Anda buat dalam kegi membuat rancangan antarmukanya untuk ) dan halaman isi.
pemakai (User Interface) merupakan mekanis guna (user) dengan sistem.
eberapa prinsip yang harus diperhatikan dal muka sebuah aplikasi, diantaranya user comp y, task compatibility, workflow compatibility simplicity.
e antarmuka yang dapat digunakan untuk tara pengguna dengan aplikasi multimedia ipulation, menu selection, form fill in, comman
uage. interaktif. Peserta g. Masing-masing plikasi multimedia compatibility, task stency, familiarity, likasi multimedia ser compatibility, kflow compatibility, dalam antarmuka egiatan belajar 2, uk tampilan awal nisme komunikasi dalam pembuatan patibility, product ility, consistency, uk menjembatani ia interaktif, yaitu
G.Kunci Jawaban
Ceklist pembuatan antar No Kelengkapan d 1 Halaman judul 2 Halaman menu u 3 Halaman submen 4 Halaman submen 4 Halaman submen
tarmuka multimedia interaktif
n desain antarmuka Ada Ti
utama enu 1 enu 2 enu 3