Menerapkan prinsip desain user interface pada multimedia interaktif berbasis web dan media interaktif.

MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTOMULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO

MULTIMRDIA SMK NEGERI 1 PUNGGING MOJOKERTO

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

Recomendados

KD : Memahami konsep multimedia interaktif berbasis halaman web dan media in... von
KD : Memahami konsep multimedia interaktif  berbasis halaman web dan media in...KD : Memahami konsep multimedia interaktif  berbasis halaman web dan media in...
KD : Memahami konsep multimedia interaktif berbasis halaman web dan media in...MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
9.5K views13 Folien
Desain multimedia interaktif_pertemuan 1 von
Desain multimedia interaktif_pertemuan 1Desain multimedia interaktif_pertemuan 1
Desain multimedia interaktif_pertemuan 1Willys Advenda
8.4K views17 Folien
Memahami perancangan alur multimedia interaktif berbasis halaman web dan medi... von
Memahami perancangan alur multimedia interaktif berbasis halaman web dan medi...Memahami perancangan alur multimedia interaktif berbasis halaman web dan medi...
Memahami perancangan alur multimedia interaktif berbasis halaman web dan medi...MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
2.2K views16 Folien
Desain grafis von
Desain grafisDesain grafis
Desain grafisLula Wanitama
683 views20 Folien
Prinsip User Interface Design von
Prinsip User Interface DesignPrinsip User Interface Design
Prinsip User Interface DesignMateri Kuliah Online
12K views21 Folien
DASAR-DASAR DESAIN GRAFIS - dewifitriyani__ von
DASAR-DASAR DESAIN GRAFIS - dewifitriyani__DASAR-DASAR DESAIN GRAFIS - dewifitriyani__
DASAR-DASAR DESAIN GRAFIS - dewifitriyani__Dewi Fitriyani
24K views23 Folien

Más contenido relacionado

Was ist angesagt?

Animasi 2D dan 3D KD: Menganalisis elemen gambar digital puppeter dalam anima... von
Animasi 2D dan 3D KD: Menganalisis elemen gambar digital puppeter dalam anima...Animasi 2D dan 3D KD: Menganalisis elemen gambar digital puppeter dalam anima...
Animasi 2D dan 3D KD: Menganalisis elemen gambar digital puppeter dalam anima...MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
3.1K views10 Folien
Dasar desain grafis Fungsi dan Unsur Warna CMYK dan RGB von
Dasar desain grafis Fungsi dan Unsur Warna CMYK dan RGBDasar desain grafis Fungsi dan Unsur Warna CMYK dan RGB
Dasar desain grafis Fungsi dan Unsur Warna CMYK dan RGBMULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
5.8K views10 Folien
Materi Teknik Editing video von
Materi Teknik Editing videoMateri Teknik Editing video
Materi Teknik Editing videoErwin Rasyid
3.9K views21 Folien
3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector) von
3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector)3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector)
3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector)Dewa Mahardika
1K views18 Folien
Dasar dasar sinematografi von
Dasar dasar sinematografiDasar dasar sinematografi
Dasar dasar sinematografiruangbelajarku
325 views55 Folien
Soal HOTS Desain Grafis dan Percetakan von
Soal HOTS Desain Grafis dan PercetakanSoal HOTS Desain Grafis dan Percetakan
Soal HOTS Desain Grafis dan PercetakanSMK MUhammadiyah Singkut
697 views1 Folie

Was ist angesagt?(20)

Materi Teknik Editing video von Erwin Rasyid
Materi Teknik Editing videoMateri Teknik Editing video
Materi Teknik Editing video
Erwin Rasyid3.9K views
3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector) von Dewa Mahardika
3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector)3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector)
3.1 memahami prinsip dasar pembuatan animasi 2 dimensi (vector)
Dewa Mahardika1K views
Rpl 10-perancangan user interface von f' yagami
Rpl 10-perancangan user interfaceRpl 10-perancangan user interface
Rpl 10-perancangan user interface
f' yagami12.3K views
Presentasi desain grafis von emuh
Presentasi desain grafisPresentasi desain grafis
Presentasi desain grafis
emuh26.2K views
Presentasi Animasi Multimedia von Fitria Hati
Presentasi Animasi MultimediaPresentasi Animasi Multimedia
Presentasi Animasi Multimedia
Fitria Hati7.1K views
2. Materi Pembelajaran Storyboard von Martin Arale
2.  Materi Pembelajaran Storyboard2.  Materi Pembelajaran Storyboard
2. Materi Pembelajaran Storyboard
Martin Arale6K views
Topik 1 (konsep multimedia interaktif) von titiwerdhy
Topik 1 (konsep multimedia interaktif)Topik 1 (konsep multimedia interaktif)
Topik 1 (konsep multimedia interaktif)
titiwerdhy8.4K views

Similar a Menerapkan prinsip desain user interface pada multimedia interaktif berbasis web dan media interaktif.

PPT Desain Antar Muka.pptx von
PPT Desain Antar Muka.pptxPPT Desain Antar Muka.pptx
PPT Desain Antar Muka.pptxMirnaNia
425 views16 Folien
T ugas 7 daya guna website dengan blog-artayahonest-imk von
T ugas 7 daya guna website dengan blog-artayahonest-imkT ugas 7 daya guna website dengan blog-artayahonest-imk
T ugas 7 daya guna website dengan blog-artayahonest-imkArtaya Honest
200 views14 Folien
Design interface dalam_interaksi_manusia von
Design interface dalam_interaksi_manusiaDesign interface dalam_interaksi_manusia
Design interface dalam_interaksi_manusiapt.ccc
641 views7 Folien
Usability von
UsabilityUsability
UsabilityBrigita Wensen
116 views29 Folien
IMK-Pertemuan5.pptx von
IMK-Pertemuan5.pptxIMK-Pertemuan5.pptx
IMK-Pertemuan5.pptxRedyWinatha1
11 views34 Folien
Topik 3 (prinsip desain interface) von
Topik 3 (prinsip desain interface)Topik 3 (prinsip desain interface)
Topik 3 (prinsip desain interface)titiwerdhy
2.3K views29 Folien

Similar a Menerapkan prinsip desain user interface pada multimedia interaktif berbasis web dan media interaktif.(20)

PPT Desain Antar Muka.pptx von MirnaNia
PPT Desain Antar Muka.pptxPPT Desain Antar Muka.pptx
PPT Desain Antar Muka.pptx
MirnaNia425 views
T ugas 7 daya guna website dengan blog-artayahonest-imk von Artaya Honest
T ugas 7 daya guna website dengan blog-artayahonest-imkT ugas 7 daya guna website dengan blog-artayahonest-imk
T ugas 7 daya guna website dengan blog-artayahonest-imk
Artaya Honest200 views
Design interface dalam_interaksi_manusia von pt.ccc
Design interface dalam_interaksi_manusiaDesign interface dalam_interaksi_manusia
Design interface dalam_interaksi_manusia
pt.ccc641 views
Topik 3 (prinsip desain interface) von titiwerdhy
Topik 3 (prinsip desain interface)Topik 3 (prinsip desain interface)
Topik 3 (prinsip desain interface)
titiwerdhy2.3K views
Rpl 8-ui desain von f' yagami
Rpl 8-ui desainRpl 8-ui desain
Rpl 8-ui desain
f' yagami507 views
Daya guna von arfianti
Daya gunaDaya guna
Daya guna
arfianti3.4K views
ppt_IMK-design-interface von yusuf09
ppt_IMK-design-interfaceppt_IMK-design-interface
ppt_IMK-design-interface
yusuf098.5K views
Interaksi Manusia Dan Komputer 6 von Hide Maru
Interaksi Manusia Dan Komputer 6Interaksi Manusia Dan Komputer 6
Interaksi Manusia Dan Komputer 6
Hide Maru485 views
UI, Prinsip UI, Know Ur Users von Rizki Ogawa
UI, Prinsip UI, Know Ur UsersUI, Prinsip UI, Know Ur Users
UI, Prinsip UI, Know Ur Users
Rizki Ogawa472 views
Interaksi Manusia Dan Komputer 5 von Hide Maru
Interaksi Manusia Dan Komputer 5Interaksi Manusia Dan Komputer 5
Interaksi Manusia Dan Komputer 5
Hide Maru356 views
Pendahuluan imk von fatahlity
Pendahuluan imkPendahuluan imk
Pendahuluan imk
fatahlity135 views
Pendahuluan Interaksi Manusia dan Komputer von DENDIKURNIADITIF
Pendahuluan Interaksi Manusia dan KomputerPendahuluan Interaksi Manusia dan Komputer
Pendahuluan Interaksi Manusia dan Komputer
DENDIKURNIADITIF100 views
Paradigma,proses desain dan rekayasa daya guna von Shary Armonitha
Paradigma,proses desain dan rekayasa daya gunaParadigma,proses desain dan rekayasa daya guna
Paradigma,proses desain dan rekayasa daya guna
Shary Armonitha1.4K views

Más de MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO

Menerapkan struktur kontrol percabangan dalam bahasa pemrograman von
Menerapkan struktur kontrol percabangan dalam bahasa pemrogramanMenerapkan struktur kontrol percabangan dalam bahasa pemrograman
Menerapkan struktur kontrol percabangan dalam bahasa pemrogramanMULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
1.3K views11 Folien
Menerapkan struktur kontrol perulangan dalam bahasa pemrograman. von
Menerapkan struktur kontrol perulangan dalam bahasa pemrograman.Menerapkan struktur kontrol perulangan dalam bahasa pemrograman.
Menerapkan struktur kontrol perulangan dalam bahasa pemrograman.MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
512 views8 Folien
PEMROGRAMAN DASAR KD. Menganalisis penggunaan array untuk penyimpanan data di... von
PEMROGRAMAN DASAR KD. Menganalisis penggunaan array untuk penyimpanan data di...PEMROGRAMAN DASAR KD. Menganalisis penggunaan array untuk penyimpanan data di...
PEMROGRAMAN DASAR KD. Menganalisis penggunaan array untuk penyimpanan data di...MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO
1.3K views12 Folien

Más de MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO(20)

Último

SISTEM KOMPUTER_DELVIA ANDRINI.pptx von
SISTEM KOMPUTER_DELVIA ANDRINI.pptxSISTEM KOMPUTER_DELVIA ANDRINI.pptx
SISTEM KOMPUTER_DELVIA ANDRINI.pptxDelviaAndrini1
16 views32 Folien
Materi Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptx von
Materi Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptxMateri Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptx
Materi Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptxahmadmistari
108 views12 Folien
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ... von
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...Kanaidi ken
15 views70 Folien
PELAKSANAAN & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045". von
PELAKSANAAN  & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".PELAKSANAAN  & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".
PELAKSANAAN & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".Kanaidi ken
66 views66 Folien
Katalog Penerbit Baca von
Katalog Penerbit BacaKatalog Penerbit Baca
Katalog Penerbit Bacapenerbitbaca
51 views91 Folien
Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC) _Training "TOTAL PROD... von
Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC)  _Training "TOTAL PROD...Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC)  _Training "TOTAL PROD...
Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC) _Training "TOTAL PROD...Kanaidi ken
10 views12 Folien

Último(20)

SISTEM KOMPUTER_DELVIA ANDRINI.pptx von DelviaAndrini1
SISTEM KOMPUTER_DELVIA ANDRINI.pptxSISTEM KOMPUTER_DELVIA ANDRINI.pptx
SISTEM KOMPUTER_DELVIA ANDRINI.pptx
DelviaAndrini116 views
Materi Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptx von ahmadmistari
Materi Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptxMateri Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptx
Materi Hijrah Nabi Muhammad ke Madinah Kelas 4 SD Kurikulum Merdeka.pptx
ahmadmistari108 views
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ... von Kanaidi ken
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...
Link2 MATERI & RENCANA Training _"Effective LEADERSHIP"di OMAZAKI BSD City - ...
Kanaidi ken15 views
PELAKSANAAN & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045". von Kanaidi ken
PELAKSANAAN  & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".PELAKSANAAN  & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".
PELAKSANAAN & Link2 MATERI Workshop _"Pembangunan SDM_INDONESIA EMAS 2045".
Kanaidi ken66 views
Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC) _Training "TOTAL PROD... von Kanaidi ken
Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC)  _Training "TOTAL PROD...Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC)  _Training "TOTAL PROD...
Studi Kasus-1_Equivalent Annual Cost Comparisons (EAC) _Training "TOTAL PROD...
Kanaidi ken10 views
LATIHAN7_DWIHANA GRACE MARSHELLA_E1G021095.pptx von gracemarsela01
LATIHAN7_DWIHANA GRACE MARSHELLA_E1G021095.pptxLATIHAN7_DWIHANA GRACE MARSHELLA_E1G021095.pptx
LATIHAN7_DWIHANA GRACE MARSHELLA_E1G021095.pptx
gracemarsela0120 views
Latihan 7_M.Ilham Raditya_E1G020017..pptx von MIlhamRaditya
Latihan 7_M.Ilham Raditya_E1G020017..pptxLatihan 7_M.Ilham Raditya_E1G020017..pptx
Latihan 7_M.Ilham Raditya_E1G020017..pptx
MIlhamRaditya33 views
Perhitungan OEE (Overall Equipment Effectiveness) _Training "TOTAL PRODUCTIV... von Kanaidi ken
Perhitungan  OEE (Overall Equipment Effectiveness) _Training "TOTAL PRODUCTIV...Perhitungan  OEE (Overall Equipment Effectiveness) _Training "TOTAL PRODUCTIV...
Perhitungan OEE (Overall Equipment Effectiveness) _Training "TOTAL PRODUCTIV...
Kanaidi ken13 views
Edukasi dan Peran Aktif dalam Pencegahan.pdf von Irawan Setyabudi
Edukasi dan Peran Aktif dalam Pencegahan.pdfEdukasi dan Peran Aktif dalam Pencegahan.pdf
Edukasi dan Peran Aktif dalam Pencegahan.pdf
Irawan Setyabudi27 views
BEST PRACTISE UNDHA USUK BASA JAWA.pdf von DidikSupriyadi6
BEST PRACTISE UNDHA USUK BASA JAWA.pdfBEST PRACTISE UNDHA USUK BASA JAWA.pdf
BEST PRACTISE UNDHA USUK BASA JAWA.pdf
DidikSupriyadi644 views
3. LKPD STATISTIKA.pdf von azizdesi
3. LKPD STATISTIKA.pdf3. LKPD STATISTIKA.pdf
3. LKPD STATISTIKA.pdf
azizdesi12 views

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.