MATERI KK5 RPL UI/UX

User Experience
User Experience Design atau yang biasa disebut UX Design yaitu adalah:
Proses meningkatkan kepuasan pengguna (pengguna aplikasi, pengunjung website) dalam
meningkatkan kegunaan dan kesenangan yang diberikan dalam interaksi antara pengguna dan
produk.
Bahasa gampangnya, UX Design itu proses membuat sebuah website atau aplikasi yang kamu buat
menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh
pengguna.Dasar dari User Experience Design ini bisa kamu pelajari di
situs uxapprentice.com (berbahasa inggris) atau di uniteux.com (situs blog berbahasa indonesia)

User Interface
User Interface Design atau yang bahasa Indonesianya itu Desain Antarmuka Pengguna adalah :
Desain antarmuka untuk mesin dan perangkat lunak, seperti komputer, peralatan rumah tangga,
perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada memaksimalkan
pengalaman pengguna.

Bahasa gampangnya yaitu UI Design adalah bagaimana suatu website atau aplikasi yang kamu
buat terlihat seperti apa. Orang biasa menyebutnya sebagai tampilan atau desain sebuah
website. Kamu bisa mendapatkan inspirasi desain
dari behance.com, dribbble.com atau webdesignserved.com.

Perbedaan UX dan UI
Banyak orang yang salah kaprah bahwa UI sama UX itu adalah suatu hal yang sama. Pada faktanya
UX dan UI itu berbeda, namun satu sama lain saling berhubungan. Pada dasarnya, User
Experience adalah tentang “memahami penggunamu”. Tujuan UX adalah mencari tahu siapa
mereka, apa yang mereka capai dan apa cara terbaik bagi mereka untuk melakukan “sesuatu”. UX
berkonsentrasi pada bagaimana sebuah produk terasa dan apakah itu memecahkan masalah bagi
pengguna. Sedangkan User Interface adalah bagaimana suatu website atau aplikasi yang kamu
buat terlihat dan berbentuk seperti apa. Hal tersebut mencakup Layout (tata letak), Visual Design
(desain visual) dan Branding.
Human Computer Interaction (HCI)
adalah sekumpulan proses, dialog, dan kegiatan dimana melaluinya pengguna memanfaatkan dan
berinteraksi dengan komputer. Saat kita menggunakan komputer, kita sedang berinteraksi dengan
komputer. Di waktu ini kita sedang memberikan perintah kepada komputer, dan sistem komputer
menerima perintah kemudian ditanggapinya hingga pekerjaan kita selesai. Definisi HCI, Suatu
disiplin ilmu yang menekankan pada aspek desain, evaluasi, dan implementasi dari sistem
komputer interaktif untuk kegunaan manusia dengan mempertimbangkan fenomena-fenomena
disekitar manusia itu sendiri.

Prinsip Dasar User Interface

Sebelum membuat User Interface kita perlu tahu aturan atau prinsip – prinsip dasar User Interface.
Menurut Deborah J. Mayhew, dengan General Principles Of UI Design nya ada 17 prinsip dasar
dalam pepbuatan User Interface. Mari kita bahas satu per satu prinsip tersebut.

1) User Compatibility, yang berarti sebuah user interface harus sesuai dengan user yang
menggunakannya. Misalnya saja sebuah interface yang mencolok dan penuh warna tidak akan
tepat di buat untuk professor karena professor lebih memilih interface yang standard dan tidak
penuh warna.
2) Produk Compatibility, yang berarti user interaface juga harus mempertahankan kompabilitas
antar produk. Misalnya user interface yang lama dapat di korbankan jika tidak kompatibel
dengan suatu produk baru yang dibuat.
3) Task Compatibility, Rancanglah user interace sesuai dengan tugas yang akan dilakukan user.
Jangan sampai user kesulitan menggunakan aplikasi karena user interfacenya tidak sesuai.
4) Workflow Compatibility, Jika command atau kegiatan yang dapat dilakukan user sangat
banyak, maka organisasikan fungsi – fungsi tersebut berdasarkan group atau yang lain agar
user dapat lebih mudah melakukan tugasnya.
5) Consistency, Command atau fungsi suatu perintah di dalam user interface harus konsisten.
Jangan membuat command – command yang membuat user ambigu.
6) Familiarity, Gunakan gambaran atau konsep yang sudah familiar / sudah banyak orang tau.
Misalnya saja untuk fungsi copy, cut, paste gunakan icon yang sesuai dan sudah banyak orang
tau.
7) Simplicity, Suatu User Interface yang kompleks dapat membuat user tidak nyaman. Maka dari
itu rancanglah user interface dengan tidak menampilkan semua fungsionalitasnya,
sembunyikan fungsi – fungsi yang kiranya tidak terlalu sering digunakan.
8) Direct Manipulation, Maksudnya adalah user langsung menyaksikan suatu perubahan yang
user lakukan. Contoh sederhana saat kita mengetik “K” di layar langsung keluar “K” tidak
perlu menunggu lama.
9) Control, User interface yang akan di buat harus sepenuhnya dapat mengontrol user. Jangan
sampai user menjadi frustrasi gara – gara interface yang out of control.
10) WYSIWYG, (What you see is what you get) Tampilan yang di sodorkan haruslah tepat seperti
yang di inginkan user. Misalnya saat mencetak halaman document, system menyediakan
fasilitas print preview dan yang keluar di kertas harus sama dengan tampilan print previewnya.
11) Flexibility, maksudnya adalah bagaimana membuat user interface yang fitur- fiturnya dapat di
capai tidak hanya dengan 1 cara saja. Misalnnya untuk copy paste tidak hanya melalui menu
edit saja melainkan dapat menggunakan hot key ctrl + c dan ctrl + v.
12) Invisible Technology, User dalam menggunakan aplikasi tidak perlu tahu apa saja yang
sedang terjadi saat memnggunakan aplikasi tersebut. Misalnya untuk mennyalin tulisan saat di
tekan tombol copy sebenrnya hal ini melalui banyak proses dan algoritma yang ruwet. Jika hal
ini di jabarkan akan membuat interface ruwet dan tidak nyaman.
13) Robustness, maksudnya handal. Sistem yang di buat harus dapat menangani kesalahan user
dengan menyediakan recovery atau semacamnya. Misalnya perintah undo saat user salah
mengedit dokumen.
14) Protection, User interface yang dibuat harus melindungi user dari kesalahan – kesalahan
umum yang sering dilakukan. Misalnya saja menampilkan popup persetujuan saan menutup
aplikasi yang belum di simpan.
15) Ease of Learning, User interface yang dibuat haruslah mudah di pelajari untuk user awam
atau baru saja memakai aplikasi. Hal ini akan membuat user termotivasi untuk
menggunakannya.
16) Ease of Use, maksudnya adalah user interface yang dibuat harus mudah di gunakan agar dapat
mempercepat kinerja user baik user awam atau user berpengalaman. Hal ini akan membuat
pekerjaan user semakin cepat selesai.

Software Design Utama Pembuat UI Design

Software-software ini aku rekomendasikan karena bedasarkan banyaknya pengguna bedasarkan
klien aku yang berasal dari Dubai, USA, Malaysia, Singapore, dan China. Dari mereka, aku bisa
banyak belajar mengenai software design untuk UI design yang benar-benar kita fokusin.
Sketch App
Software design yang satu ini tadinya belum banyak yang menggunakannya, sehingga belakangan
ini sangat banyak sekali yang menggunakan aplikasi ini bahkan mereka yang menggunakan
aplikasi ini kebanyakan pindahan dari Photoshop, tapi software ini hanya terdapat pada sistem
operasi Mac (tidak pada Windows).
Adobe XD
Adobe tidak ingin kalah dengan aplikasi Photoshop mereka sehingga mereka mengeluarkan
produk terbaru yang hanya berfokus untuk UI design yaitu Adobe XD atau Experience Design.
Pada software ini terdapat di sistem operasi Windows/Mac sehingga kamu boleh coba.
Figma.com
Aplikasi ini online, tapi banyak yang menggunakannya, selain lebih ringan dalam sisi RAM pada
aplikasi ini kita juga bisa membuat sebuah UI design, prototype, collaborate team, commenting,
dan tentu masih banyak lainnya yang bisa kamu dapatkan.

Cara Membuat Desain User Interface yang Menarik dan Memudahkan Pengguna
1. Ketahui Karakteristik Penggunamu
Pertama-tama, kamu harus mengetahui apa keahlian dan pengalaman penggunamu, serta apa yang
mereka inginkan. Jangan pernah mengikuti desain antarmuka yang trendy saja. Atau,
menambahkan fitur baru hanya karena takut dikalahkan oleh kompetitor.
Utamakan kebutuhan penggunamu agar kamu bisa membuat desain user interface yang
kesannya “mereka banget”.
2. Pecahkan Masalah
Tidak perlu berusaha menciptakan hal-hal yang baru. Misalnya, jika seorang pengguna ingin
memilih item dari sebuah list, tentu sudah ada cara untuk melakukannya. Misalnya,
melalui checkbox.
Jangan menciptakan sesuatu hanya ingin dibilang berbeda saja. Gunakan metode yang sudah ada
agar penggunamu langsung akrab dengan desain antarmuka buatanmu.
3. Tetap Konsisten
Pengguna membutuhkan konsistensi, artinya ketika mereka tahu cara melakukan sesuatu, mereka
dapat melakukannya kembali.
Desain antar muka yang konsisten akan membantu pengguna mengerti tentang bagaimana sesuatu
bekerja. Pada akhirnya, ini dapat membantu mereka meningkatkan efisiensinya.
4. Penempatan/Layout
Tujuan pertama dalam membuat desain antarmuka (user interface) adalah agar pengguna tidak
disulitkan dalam menjelajah isi website atau aplikasi. Oleh karena itu, tempatkan
elemen websiteatau aplikasimu di tempat yang mudah dicari oleh pengguna, contohnya search
bar.
5. Toleransi Kesalahan Pengguna
Sebagus-bagusnya atau sejelas-jelasnya desainmu, pengguna bisa saja melakukan kesalahan.
Desain antarmuka (user interface) buatanmu harus bisa menolerir kesalahan mereka. Misalnya
jika pengguna salah memasukkan tanggal lahir mereka, maka pengguna dapat menghapus dan
memasukkan kembali tanggal lahir mereka.
Selain itu, jika terjadi error karena pengguna, berilah pesan yang dapat dimengerti bahwa
pengguna telah melakukan kesalahan. Pastikan juga mereka tahu tentang cara
mencegah error tersebut sebelum terjadi kembali.
6. Buatlah Sesederhana Mungkin
Desain antar muka (user interface) yang bagus adalah jika di dalamnya tidak terdapat elemen yang
tidak diperlukan. Elemen yang sebetulnya diperlukan justru yang terlihat singkat dan nyambung.
Kapanpun kalau kamu ingin menambahkan fitur atau elemen baru ke dalam interface, tanyakan
terlebih dahulu kepada dirimu, “Apakah pengguna benar-benar membutuhkan ini?” Jangan
biarkan egomu yang kemudian merusak tampilan interface-mu.
7. Lanjut Terus
Kunci utama dari prinsip desain antar muka (user interface) adalah lanjut terus. Banyak yang
berkata bahwa saat mengembangkan desain antar muka, kamu harus lebih banyak gagal, dan sering
mengulang. Kamu pasti sering membuat kesalahan saat membuat desain tersebut. Lanjut terus
saja, dan ingat, jangan mengulanginya dari awal lagi.
LATIHAN SOAL

1. Proses meningkatkan kepuasan pengguna (pengguna aplikasi, pengunjung website) dalam

meningkatkan kegunaan dan kesenangan yang diberikan dalam interaksi antara pengguna
dan produk dalam software biasa disebut dengan … .
A. User Interface
B. User Experience
C. User Manual
D. Interface
E. UIX
2. Desain antarmuka untuk mesin dan perangkat lunak, seperti komputer, peralatan rumah
tangga, perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada
memaksimalkan pengalaman pengguna disebut dengan … .
A. User Interface
B. User Experience
C. User Manual
D. Interface
E. UIX

3. Sekumpulan proses, dialog, dan kegiatan dimana melaluinya pengguna memanfaatkan dan
berinteraksi dengan komputer. Saat kita menggunakan komputer, kita sedang berinteraksi
dengan komputer. Hal tersebut dalam ilmu computer dikenal dengan istilah … .
A. Human Computer
B. Human Cmputer Interface
C. Human Interaction
D. Human Capital
E. Human Experience

4. User interaface juga harus mempertahankan kompabilitas antar produk. Misalnya user
interface yang lama dapat di korbankan jika tidak kompatibel dengan suatu produk baru
yang dibuat merupakan … .
A. User Capability
B. Product Capability
C. Task Capability
D. Workflow Capability
E. Direct Manipulation

5. Jika command atau kegiatan yang dapat dilakukan user sangat banyak, maka organisasikan
fungsi – fungsi tersebut berdasarkan group atau yang lain agar user dapat lebih mudah
melakukan tugasnya adalah … .
A. User Capability
B. Product Capability
C. Task Capability
D. Workflow Capability
 E. Direct Manipulation

6. Sebuah user interface harus sesuai dengan user yang menggunakannya. Misalnya saja
sebuah interface yang mencolok dan penuh warna tidak akan tepat di buat untuk professor
karena professor lebih memilih interface yang standard dan tidak penuh warna merupakan
….
A. User Capability
B. Product Capability
C. Task Capability
D. Workflow Capability
E. Direct Manipulation

7. Rancanglah user interace sesuai dengan tugas yang akan dilakukan user. Jangan sampai
user kesulitan menggunakan aplikasi karena user interfacenya tidak sesuai merupakan
tujuan dari … .
A. User Capability
B. Product Capability
C. Task Capability
D. Workflow Capability
E. Direct Manipulation

8. User langsung menyaksikan suatu perubahan yang user lakukan. Contoh sederhana saat
kita mengetik “K” di layar langsung keluar “K” tidak perlu menunggu lama merupakan …
.
A. User Capability
B. Product Capability
C. Task Capability
D. Workflow Capability
E. Direct Manipulation

9. Command atau fungsi suatu perintah di dalam user interface harus konsisten. Jangan
membuat command – command yang membuat user ambigu merupakan kegunaan dari …
.
A. Consistency
B. Familiarity
C. Simplicity
D. Flexibility
E. Responsive

10. Suatu User Interface yang kompleks dapat membuat user tidak nyaman. Maka dari itu
rancanglah user interface dengan tidak menampilkan semua fungsionalitasnya,
sembunyikan fungsi – fungsi yang kiranya tidak terlalu sering digunakan yaitu … .
A. Consistency
B. Familiarity
C. Simplicity
D. Flexibility
 E. Responsive

11. Gunakan gambaran atau konsep yang sudah familiar / sudah banyak orang tau. Misalnya
saja untuk fungsi copy, cut, paste gunakan icon yang sesuai dan sudah banyak orang tau
dalam design dikenal dengan … .
A. Consistency
B. Familiarity
C. Simplicity
D. Flexibility
E. Responsive

12. Bagaimana membuat user interface yang fitur- fiturnya dapat di capai tidak hanya dengan
1 cara saja. Misalnnya untuk copy paste tidak hanya melalui menu edit saja melainkan
dapat menggunakan hot key ctrl + c dan ctrl + v adalah tujuan design dalam UI/UX … .
A. Consistency
B. Familiarity
C. Simplicity
D. Flexibility
E. Responsive

13. Software yang digunakan untuk membuat design user interface perangkat lunak keluaran
dari Adobe adalah … .
A. XD
B. AI
C. Premier
D. AE
E. CorelDraw

14. Software design user interface perangkat lunak yang dapat digunakan secara online adalah
….
A. Google docs
B. Figma.com
C. Freepik.com
D. Flaticon
E. CorelDraw

15. Software design user interface keluara Apple yang biasa digunakan oleh designer
perangkat lunak adalah … .
A. Sketch app
B. Autodesk
C. Paint
D. Sai
E. Toonboom
16. Tampilan yang di sodorkan haruslah tepat seperti yang di inginkan user. Misalnya saat
mencetak halaman document, system menyediakan fasilitas print preview dan yang keluar
di kertas harus sama dengan tampilan print previewnya adalah … .
A. What you see is what you get
B. Easy of use
C. Easy of learning
D. Easy of doing
E. Easy seeing

17. User interface yang dibuat haruslah mudah di pelajari untuk user awam atau baru saja
memakai aplikasi. Hal ini akan membuat user termotivasi untuk menggunakannya adalah
….
A. What you see is what you get
B. Easy of use
C. Easy of learning
D. Easy of doing
E. Easy seeing

18. User interface yang dibuat harus mudah di gunakan agar dapat mempercepat kinerja user
baik user awam atau user berpengalaman. Hal ini akan membuat pekerjaan user semakin
cepat selesai merupakan … .
A. What you see is what you get
B. Easy of use
C. Easy of learning
D. Easy of doing
E. Easy seeing

19. Cara membuat design interface yang menarik dan mudah adalah seperti berikut ini, kecuali
….
A. Pahami karakter pengguna
B. Konsisten
C. Layout
D. Sederhana
E. Susah digunakan

20. Berikut adalah prinsip membuat user interface, kecuali … .

A. Konsisten
B. Sederhana
C. Kontrol
D. Fleksibel
E. High Technology