SlideShare a Scribd company logo

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

MULTIMRDIA SMK NEGERI 1 PUNGGING MOJOKERTO

1 of 13
Download to read offline
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.

Recommended

More Related Content

What's hot

Materi Augmented Reality
Materi Augmented RealityMateri Augmented Reality
Materi Augmented RealityFajar Baskoro
 
Rpl 10-perancangan user interface
Rpl 10-perancangan user interfaceRpl 10-perancangan user interface
Rpl 10-perancangan user interfacef' yagami
 
Ebook praktikum adobe photoshop cs2
Ebook    praktikum adobe photoshop cs2Ebook    praktikum adobe photoshop cs2
Ebook praktikum adobe photoshop cs2Mhd. Abdullah Hamid
 
Evolusi Antarmuka Komputer
Evolusi Antarmuka KomputerEvolusi Antarmuka Komputer
Evolusi Antarmuka KomputerAndhi Pratama
 
SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2
SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2
SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2SMK MUhammadiyah Singkut
 
Membuat Games dengan Scratch
Membuat Games dengan ScratchMembuat Games dengan Scratch
Membuat Games dengan ScratchPutri Lestari
 
Pengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe PremierePengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe PremiereErwin Rasyid
 
Interaksi manusia dan komputer
Interaksi manusia dan komputerInteraksi manusia dan komputer
Interaksi manusia dan komputerMiftahul Khair N
 
Storyboard multimedia interaktif uas
Storyboard multimedia interaktif uasStoryboard multimedia interaktif uas
Storyboard multimedia interaktif uasijat13
 
Kisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimediaKisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimediaSMK MUhammadiyah Singkut
 

What's hot (20)

Materi Augmented Reality
Materi Augmented RealityMateri Augmented Reality
Materi Augmented Reality
 
Rpl 10-perancangan user interface
Rpl 10-perancangan user interfaceRpl 10-perancangan user interface
Rpl 10-perancangan user interface
 
Ebook praktikum adobe photoshop cs2
Ebook    praktikum adobe photoshop cs2Ebook    praktikum adobe photoshop cs2
Ebook praktikum adobe photoshop cs2
 
Konsep dasar UI/UX
Konsep dasar UI/UXKonsep dasar UI/UX
Konsep dasar UI/UX
 
Evolusi Antarmuka Komputer
Evolusi Antarmuka KomputerEvolusi Antarmuka Komputer
Evolusi Antarmuka Komputer
 
SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2
SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2
SOAL ESSAY HOTS DESAIN GRAFIS DAN PERCETAKAN KELAS XI SEMSTER 2
 
Desain grafis
Desain grafisDesain grafis
Desain grafis
 
Animasi 2D dan 3D (KD: Menerapkan teknik pembuatan karakter sederhana menggun...
Animasi 2D dan 3D (KD: Menerapkan teknik pembuatan karakter sederhana menggun...Animasi 2D dan 3D (KD: Menerapkan teknik pembuatan karakter sederhana menggun...
Animasi 2D dan 3D (KD: Menerapkan teknik pembuatan karakter sederhana menggun...
 
Membuat Games dengan Scratch
Membuat Games dengan ScratchMembuat Games dengan Scratch
Membuat Games dengan Scratch
 
Pengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe PremierePengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe Premiere
 
Desain grafis percetakan
Desain grafis percetakanDesain grafis percetakan
Desain grafis percetakan
 
Interaksi manusia dan komputer
Interaksi manusia dan komputerInteraksi manusia dan komputer
Interaksi manusia dan komputer
 
Storyboard multimedia interaktif uas
Storyboard multimedia interaktif uasStoryboard multimedia interaktif uas
Storyboard multimedia interaktif uas
 
Animasi 2D dan 3D KD : Memahami material pada object 3 d
Animasi 2D dan 3D KD : Memahami material pada object 3 dAnimasi 2D dan 3D KD : Memahami material pada object 3 d
Animasi 2D dan 3D KD : Memahami material pada object 3 d
 
Kisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimediaKisi kisi soal dasar desain grafis kelas xi multimedia
Kisi kisi soal dasar desain grafis kelas xi multimedia
 
SOAL ESSAY HOTS ANIMASI 2D 3D SEMESTER 2
SOAL ESSAY HOTS ANIMASI 2D 3D SEMESTER 2SOAL ESSAY HOTS ANIMASI 2D 3D SEMESTER 2
SOAL ESSAY HOTS ANIMASI 2D 3D SEMESTER 2
 
Animasi 2D dan 3D KD: Menggambarkan konsep dasar object 3 d dalam sketsa ran...
Animasi 2D dan 3D  KD: Menggambarkan konsep dasar object 3 d dalam sketsa ran...Animasi 2D dan 3D  KD: Menggambarkan konsep dasar object 3 d dalam sketsa ran...
Animasi 2D dan 3D KD: Menggambarkan konsep dasar object 3 d dalam sketsa ran...
 
Jobsheet multimedia
Jobsheet multimediaJobsheet multimedia
Jobsheet multimedia
 
Produk Kreatif dan Kewirausahaan Hak atas kekayaan intelektual
Produk Kreatif dan Kewirausahaan Hak atas kekayaan intelektualProduk Kreatif dan Kewirausahaan Hak atas kekayaan intelektual
Produk Kreatif dan Kewirausahaan Hak atas kekayaan intelektual
 
dkv1.pptx
dkv1.pptxdkv1.pptx
dkv1.pptx
 

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

PPT Desain Antar Muka.pptx
PPT Desain Antar Muka.pptxPPT Desain Antar Muka.pptx
PPT Desain Antar Muka.pptxMirnaNia
 
T ugas 7 daya guna website dengan blog-artayahonest-imk
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
 
Design interface dalam_interaksi_manusia
Design interface dalam_interaksi_manusiaDesign interface dalam_interaksi_manusia
Design interface dalam_interaksi_manusiapt.ccc
 
IMK-Pertemuan5.pptx
IMK-Pertemuan5.pptxIMK-Pertemuan5.pptx
IMK-Pertemuan5.pptxRedyWinatha1
 
Rpl 8-ui desain
Rpl 8-ui desainRpl 8-ui desain
Rpl 8-ui desainf' yagami
 
Tampilan GUI di NetBeans.pptx
Tampilan GUI di NetBeans.pptxTampilan GUI di NetBeans.pptx
Tampilan GUI di NetBeans.pptxIYudarma
 
K2 interaksi manusia dan komputer
K2 interaksi manusia dan komputerK2 interaksi manusia dan komputer
K2 interaksi manusia dan komputerImaduddin Amrullah
 
ppt_IMK-design-interface
ppt_IMK-design-interfaceppt_IMK-design-interface
ppt_IMK-design-interfaceyusuf09
 
Interaksi Manusia Dan Komputer 6
Interaksi Manusia Dan Komputer 6Interaksi Manusia Dan Komputer 6
Interaksi Manusia Dan Komputer 6Hide Maru
 
Lesson 04 - Desain.ppt
Lesson 04 - Desain.pptLesson 04 - Desain.ppt
Lesson 04 - Desain.pptAlTechnology
 
UI, Prinsip UI, Know Ur Users
UI, Prinsip UI, Know Ur UsersUI, Prinsip UI, Know Ur Users
UI, Prinsip UI, Know Ur UsersRizki Ogawa
 
Interaksi Manusia Dan Komputer 5
Interaksi Manusia Dan Komputer 5Interaksi Manusia Dan Komputer 5
Interaksi Manusia Dan Komputer 5Hide Maru
 
Pendahuluan Interaksi Manusia dan Komputer
Pendahuluan Interaksi Manusia dan KomputerPendahuluan Interaksi Manusia dan Komputer
Pendahuluan Interaksi Manusia dan KomputerDENDIKURNIADITIF
 
Pendahuluan imk
Pendahuluan imkPendahuluan imk
Pendahuluan imkfatahlity
 
Interaksi Manusia dan Komputer - Bab 1 Konsep Dasar
Interaksi Manusia dan Komputer - Bab 1 Konsep DasarInteraksi Manusia dan Komputer - Bab 1 Konsep Dasar
Interaksi Manusia dan Komputer - Bab 1 Konsep DasarEpafraditus Memoriano
 
Chapt 7. daya guna
Chapt 7. daya gunaChapt 7. daya guna
Chapt 7. daya gunaIbnu Dzakwan
 
Paradigma,proses desain dan rekayasa daya guna
Paradigma,proses desain dan rekayasa daya gunaParadigma,proses desain dan rekayasa daya guna
Paradigma,proses desain dan rekayasa daya gunaShary Armonitha
 

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

PPT Desain Antar Muka.pptx
PPT Desain Antar Muka.pptxPPT Desain Antar Muka.pptx
PPT Desain Antar Muka.pptx
 
T ugas 7 daya guna website dengan blog-artayahonest-imk
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
 
Design interface dalam_interaksi_manusia
Design interface dalam_interaksi_manusiaDesign interface dalam_interaksi_manusia
Design interface dalam_interaksi_manusia
 
Usability
UsabilityUsability
Usability
 
IMK-Pertemuan5.pptx
IMK-Pertemuan5.pptxIMK-Pertemuan5.pptx
IMK-Pertemuan5.pptx
 
Rpl 8-ui desain
Rpl 8-ui desainRpl 8-ui desain
Rpl 8-ui desain
 
Antarmuka_pengguna.pptx
Antarmuka_pengguna.pptxAntarmuka_pengguna.pptx
Antarmuka_pengguna.pptx
 
Daya guna
Daya gunaDaya guna
Daya guna
 
Tampilan GUI di NetBeans.pptx
Tampilan GUI di NetBeans.pptxTampilan GUI di NetBeans.pptx
Tampilan GUI di NetBeans.pptx
 
K2 interaksi manusia dan komputer
K2 interaksi manusia dan komputerK2 interaksi manusia dan komputer
K2 interaksi manusia dan komputer
 
ppt_IMK-design-interface
ppt_IMK-design-interfaceppt_IMK-design-interface
ppt_IMK-design-interface
 
Interaksi Manusia Dan Komputer 6
Interaksi Manusia Dan Komputer 6Interaksi Manusia Dan Komputer 6
Interaksi Manusia Dan Komputer 6
 
Lesson 04 - Desain.ppt
Lesson 04 - Desain.pptLesson 04 - Desain.ppt
Lesson 04 - Desain.ppt
 
UI, Prinsip UI, Know Ur Users
UI, Prinsip UI, Know Ur UsersUI, Prinsip UI, Know Ur Users
UI, Prinsip UI, Know Ur Users
 
Interaksi Manusia Dan Komputer 5
Interaksi Manusia Dan Komputer 5Interaksi Manusia Dan Komputer 5
Interaksi Manusia Dan Komputer 5
 
Pendahuluan Interaksi Manusia dan Komputer
Pendahuluan Interaksi Manusia dan KomputerPendahuluan Interaksi Manusia dan Komputer
Pendahuluan Interaksi Manusia dan Komputer
 
Pendahuluan imk
Pendahuluan imkPendahuluan imk
Pendahuluan imk
 
Interaksi Manusia dan Komputer - Bab 1 Konsep Dasar
Interaksi Manusia dan Komputer - Bab 1 Konsep DasarInteraksi Manusia dan Komputer - Bab 1 Konsep Dasar
Interaksi Manusia dan Komputer - Bab 1 Konsep Dasar
 
Chapt 7. daya guna
Chapt 7. daya gunaChapt 7. daya guna
Chapt 7. daya guna
 
Paradigma,proses desain dan rekayasa daya guna
Paradigma,proses desain dan rekayasa daya gunaParadigma,proses desain dan rekayasa daya guna
Paradigma,proses desain dan rekayasa daya guna
 

More from MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO

More from MULTIMEDIA 'n BROADCASTING SMKN 1 PUNGGING MOJOKERTO (20)

KD Mendiskusikan format gambar
KD Mendiskusikan format gambarKD Mendiskusikan format gambar
KD Mendiskusikan format gambar
 
Menerapkan tata cahaya dalam pengambilan gambar
Menerapkan tata cahaya dalam pengambilan gambarMenerapkan tata cahaya dalam pengambilan gambar
Menerapkan tata cahaya dalam pengambilan gambar
 
Menerapkan struktur kontrol percabangan dalam bahasa pemrograman
Menerapkan struktur kontrol percabangan dalam bahasa pemrogramanMenerapkan struktur kontrol percabangan dalam bahasa pemrograman
Menerapkan struktur kontrol percabangan dalam bahasa pemrograman
 
Menerapkan struktur kontrol perulangan dalam bahasa pemrograman.
Menerapkan struktur kontrol perulangan dalam bahasa pemrograman.Menerapkan struktur kontrol perulangan dalam bahasa pemrograman.
Menerapkan struktur kontrol perulangan dalam bahasa pemrograman.
 
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...
PEMROGRAMAN DASAR KD. Menganalisis penggunaan array untuk penyimpanan data di...
 
Menerapkan tipografi
Menerapkan tipografiMenerapkan tipografi
Menerapkan tipografi
 
KD. Menganalisi video sesuai naskah produksi.
KD. Menganalisi video sesuai naskah produksi.KD. Menganalisi video sesuai naskah produksi.
KD. Menganalisi video sesuai naskah produksi.
 
TEKNIK PENGOLAHAN AUDIO dan VIDEO KD Menganalisis proses pengemasan produksi ...
TEKNIK PENGOLAHAN AUDIO dan VIDEO KD Menganalisis proses pengemasan produksi ...TEKNIK PENGOLAHAN AUDIO dan VIDEO KD Menganalisis proses pengemasan produksi ...
TEKNIK PENGOLAHAN AUDIO dan VIDEO KD Menganalisis proses pengemasan produksi ...
 
Menganalisis prosedur pengukuran bidang pandang dan sudut pengambilan gambar
Menganalisis prosedur pengukuran bidang pandang dan sudut pengambilan gambarMenganalisis prosedur pengukuran bidang pandang dan sudut pengambilan gambar
Menganalisis prosedur pengukuran bidang pandang dan sudut pengambilan gambar
 
Menerapkan pengoperasian kamera digital dan perawatan peralatan fotografi
Menerapkan pengoperasian kamera digital dan perawatan peralatan fotografiMenerapkan pengoperasian kamera digital dan perawatan peralatan fotografi
Menerapkan pengoperasian kamera digital dan perawatan peralatan fotografi
 
KD Menerapkan pengalamanatan ip pada jaringan komputer
KD Menerapkan pengalamanatan ip pada jaringan komputerKD Menerapkan pengalamanatan ip pada jaringan komputer
KD Menerapkan pengalamanatan ip pada jaringan komputer
 
Menganalisis permasalahan pada instalasi software aplikasi
Menganalisis permasalahan pada instalasi software aplikasiMenganalisis permasalahan pada instalasi software aplikasi
Menganalisis permasalahan pada instalasi software aplikasi
 
KOMPUTER DAN JARINGAN DASR KD : Menganalisis permasalahan pada perangkat keras
KOMPUTER DAN JARINGAN DASR KD : Menganalisis permasalahan pada perangkat kerasKOMPUTER DAN JARINGAN DASR KD : Menganalisis permasalahan pada perangkat keras
KOMPUTER DAN JARINGAN DASR KD : Menganalisis permasalahan pada perangkat keras
 
KOMPUTER DAN JARINGAN DASR KD : Menerapkan instalasi driver perangkat keras k...
KOMPUTER DAN JARINGAN DASR KD : Menerapkan instalasi driver perangkat keras k...KOMPUTER DAN JARINGAN DASR KD : Menerapkan instalasi driver perangkat keras k...
KOMPUTER DAN JARINGAN DASR KD : Menerapkan instalasi driver perangkat keras k...
 
KD 3.6 Menerapkan gerak digital puppetter pada animasi 2 d
KD 3.6 Menerapkan gerak digital puppetter pada animasi 2 dKD 3.6 Menerapkan gerak digital puppetter pada animasi 2 d
KD 3.6 Menerapkan gerak digital puppetter pada animasi 2 d
 
Animasi 2 d dan 3d memahami prinsip dasar menggambar latar
Animasi 2 d dan 3d memahami prinsip dasar menggambar latarAnimasi 2 d dan 3d memahami prinsip dasar menggambar latar
Animasi 2 d dan 3d memahami prinsip dasar menggambar latar
 
Animasi 2D dan 3D KD: Memahami teknik rendering pada object 3d
Animasi 2D dan 3D KD: Memahami teknik rendering pada object 3dAnimasi 2D dan 3D KD: Memahami teknik rendering pada object 3d
Animasi 2D dan 3D KD: Memahami teknik rendering pada object 3d
 
ANIMASI 2D dan 3D KD : Menerapkan model obyek sederhana berbasis 3 d hardsurface
ANIMASI 2D dan 3D KD : Menerapkan model obyek sederhana berbasis 3 d hardsurfaceANIMASI 2D dan 3D KD : Menerapkan model obyek sederhana berbasis 3 d hardsurface
ANIMASI 2D dan 3D KD : Menerapkan model obyek sederhana berbasis 3 d hardsurface
 
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...
Animasi 2D dan 3D KD: Menganalisis elemen gambar digital puppeter dalam anima...
 
Animasi 2D dan 3D KD : Menerapkan teknik animasi tweening 2 d
Animasi 2D dan 3D KD : Menerapkan teknik animasi tweening 2 dAnimasi 2D dan 3D KD : Menerapkan teknik animasi tweening 2 d
Animasi 2D dan 3D KD : Menerapkan teknik animasi tweening 2 d
 

Recently uploaded

STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...
STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...
STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...SantiKartini1
 
SERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdf
SERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdfSERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdf
SERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdfDOWENSAPETUASIMARMAT
 
Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR) _Pel...
Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR)  _Pel...Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR)  _Pel...
Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR) _Pel...Kanaidi ken
 
Suku Bare'e (Baree) di Sulawesi Bagian Tengah
Suku Bare'e (Baree) di Sulawesi Bagian TengahSuku Bare'e (Baree) di Sulawesi Bagian Tengah
Suku Bare'e (Baree) di Sulawesi Bagian TengahPejuangKeadilan2
 
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Biologi Kelas 11 Fase F Kurikulum MerdekaModul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Biologi Kelas 11 Fase F Kurikulum MerdekaModul Guruku
 
Teks Terjemahan Website Desa Wisata Melung.pdf
Teks Terjemahan Website Desa Wisata Melung.pdfTeks Terjemahan Website Desa Wisata Melung.pdf
Teks Terjemahan Website Desa Wisata Melung.pdfKangMargino
 
PPT OPTIMALISASI KOMUNITAS BELAJAR .pptx
PPT  OPTIMALISASI KOMUNITAS BELAJAR .pptxPPT  OPTIMALISASI KOMUNITAS BELAJAR .pptx
PPT OPTIMALISASI KOMUNITAS BELAJAR .pptxAhmadMuzaniMPdI
 
Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]
Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]
Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]Modul Guruku
 
SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024
SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024
SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024ImronRosyadi182049
 
Media Infografis IPAS Mari Berkenalan Dengan Bumi Kita
Media Infografis IPAS Mari Berkenalan Dengan Bumi KitaMedia Infografis IPAS Mari Berkenalan Dengan Bumi Kita
Media Infografis IPAS Mari Berkenalan Dengan Bumi KitaHYwg
 
PPT PERSIAPAN OBSERVASI (MODUL AJAR).pptx
PPT PERSIAPAN OBSERVASI (MODUL AJAR).pptxPPT PERSIAPAN OBSERVASI (MODUL AJAR).pptx
PPT PERSIAPAN OBSERVASI (MODUL AJAR).pptximamasyari24
 
Contoh Sertifikat Komunitas Belajar SMPN
Contoh Sertifikat Komunitas Belajar SMPNContoh Sertifikat Komunitas Belajar SMPN
Contoh Sertifikat Komunitas Belajar SMPNwatihirma7
 
Pentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptx
Pentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptxPentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptx
Pentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptxNursyahirsyahmiSyahi
 
Bab 2_Etika Lingkungannnnnnnnnnnnnnn.ppt
Bab 2_Etika Lingkungannnnnnnnnnnnnnn.pptBab 2_Etika Lingkungannnnnnnnnnnnnnn.ppt
Bab 2_Etika Lingkungannnnnnnnnnnnnnn.pptMichael Bradley
 
Panduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptx
Panduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptxPanduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptx
Panduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptxgiriindrakharisma
 
Kamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'e
Kamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'eKamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'e
Kamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'ePejuangKeadilan2
 
559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptx
559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptx559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptx
559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptxPutriSoniaAyu
 
LANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptx
LANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptxLANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptx
LANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptxkavinjimustofa
 
Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...
Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...
Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...Abdiera
 
DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...
DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...
DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...MasudinMuhJinan
 

Recently uploaded (20)

STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...
STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...
STUNTING SEDERHANA. Pengertian Stunting, ciri, ciri, gejala(penyebab), pengob...
 
SERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdf
SERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdfSERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdf
SERTIFIKAT KOMUNITAS BELAJAR FIX UPLOAD.pdf
 
Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR) _Pel...
Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR)  _Pel...Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR)  _Pel...
Strategi Perbaikan Proses Bisnis + Business Process Reengineering (BPR) _Pel...
 
Suku Bare'e (Baree) di Sulawesi Bagian Tengah
Suku Bare'e (Baree) di Sulawesi Bagian TengahSuku Bare'e (Baree) di Sulawesi Bagian Tengah
Suku Bare'e (Baree) di Sulawesi Bagian Tengah
 
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Biologi Kelas 11 Fase F Kurikulum MerdekaModul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka
 
Teks Terjemahan Website Desa Wisata Melung.pdf
Teks Terjemahan Website Desa Wisata Melung.pdfTeks Terjemahan Website Desa Wisata Melung.pdf
Teks Terjemahan Website Desa Wisata Melung.pdf
 
PPT OPTIMALISASI KOMUNITAS BELAJAR .pptx
PPT  OPTIMALISASI KOMUNITAS BELAJAR .pptxPPT  OPTIMALISASI KOMUNITAS BELAJAR .pptx
PPT OPTIMALISASI KOMUNITAS BELAJAR .pptx
 
Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]
Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]
Modul Ajar Informatika Kelas 11 Fase F - [modulguruku.com]
 
SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024
SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024
SOSSIALISASI PESTA SIAGA KOTA TEGAL 2024
 
Media Infografis IPAS Mari Berkenalan Dengan Bumi Kita
Media Infografis IPAS Mari Berkenalan Dengan Bumi KitaMedia Infografis IPAS Mari Berkenalan Dengan Bumi Kita
Media Infografis IPAS Mari Berkenalan Dengan Bumi Kita
 
PPT PERSIAPAN OBSERVASI (MODUL AJAR).pptx
PPT PERSIAPAN OBSERVASI (MODUL AJAR).pptxPPT PERSIAPAN OBSERVASI (MODUL AJAR).pptx
PPT PERSIAPAN OBSERVASI (MODUL AJAR).pptx
 
Contoh Sertifikat Komunitas Belajar SMPN
Contoh Sertifikat Komunitas Belajar SMPNContoh Sertifikat Komunitas Belajar SMPN
Contoh Sertifikat Komunitas Belajar SMPN
 
Pentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptx
Pentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptxPentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptx
Pentaksiran Praktikal (Project) Cg Afifah (1) KUMPULAN.pptx
 
Bab 2_Etika Lingkungannnnnnnnnnnnnnn.ppt
Bab 2_Etika Lingkungannnnnnnnnnnnnnn.pptBab 2_Etika Lingkungannnnnnnnnnnnnnn.ppt
Bab 2_Etika Lingkungannnnnnnnnnnnnnn.ppt
 
Panduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptx
Panduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptxPanduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptx
Panduan Media Sosial bagi mahasiswa kampus mengajar KM 7.pptx
 
Kamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'e
Kamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'eKamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'e
Kamus Bahasa Bare'e (Bare'e-Taal woordenboek), Indonesia - Bare'e
 
559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptx
559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptx559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptx
559517533-PPT-krisis-Moneter-Politik-Hukum-Dan-Kepercayaan.pptx
 
LANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptx
LANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptxLANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptx
LANGKAH-LANGKAH OBSERVASI GURU DALAM PMM.pptx
 
Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...
Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...
Modul Ajar Pendidikan Pancasila Kelas 8 Fase D Bab 5 Jati Diri Bangsa Dan Bud...
 
DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...
DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...
DEMONSTRASI KONTEKSTUAL MODUL 3.1.pdf-MAS'UDIN MUH. JINAN-SGP ANGKATAN-9_SMP ...
 

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.