Tempat/Tanggal Lahir : Medan, 29 September 1990

Pekerjaan : PNS (Instruktur)

Pendidikan : S-1 Teknologi Informasi USU (2013)
E-Mail : sani.Fadhly @gmail.com
HP/WA : +62 853 7370 5429
Pengalaman : Network Administrator (2010 – 2012)
Programmer Web (2012 – 2015)
Sistem Analis (2016 – 2018)

MUHAMMAD FADHLY SANI, STI

 https://bit.ly/OJT_ABSEN_AWA
L
ABSENSI AWAL PELATIHAN
ATURAN DALAM CLASS ONLINE
RANCANGAN USER INTERFACE
 ROAD MAP
Program:
Pemrograman Web

Unit Kompetensi:
Mengimplementasikan User Interface (J.620100.005.02)

Elemen Kompetensi:
Mengidentifikasi rancangan user interface

Kriteria Unjuk Kerja:

Rancangan user interface diidentifikasi sesuai kebutuhan

Judul:
Rancangan User Interface
TUJUAN PEMBELAJARAN

◼SETELAH MENGIKUTI PELATIHAN INI PESERTA PELATIHAN

DAPAT MENGIDENTIFIKASI RANCANGAN USER INTERFACE
PADA APLIKASI BERBASIS WEB SESUAI DENGAN PEDUMAN
MANFAAT PEMBELAJARAN

◼MENGINDETIFIKASI RANCANGAN USER INTERFACE

KONSEP USER INTERFACE
USER INTERFACE (UI) DAN USER EXPERIENCE (UX)

◼ User Interface (UI) adalah tampilan visual sebuah produk yang menjembatani sistem dengan
pengguna (user).
◼ Tampilan UI dapat berupa bentuk, warna, dan tulisan yang didesain semenarik mungkin.
◼ UI adalah bagaimana tampilan sebuah produk dilihat oleh pengguna. 
KONSEP USER INTERFACE
USER INTERFACE (UI) DAN USER EXPERIENCE (UX)
◼ User Experience (UX) merupakan proses mendesain suatu produk melalui pendekatan pengguna.
◼ Dengan pendekatan ini, Anda jadi bisa menciptakan produk yang sesuai dengan kebutuhan dan
keinginan pengguna.
KONSEP USER INTERFACE
PERBEDAAN USER INTERFACE (UI) DAN USER EXPERIENCE (UX)

Perbedaan User Interface (UI) User Experience (UX)

Tujuan Membuat tampilan produk lebih menarik Memberikan kenyamanan saat
memakai produk
Fokus Berfokus pada tampilan yang bagus Berfokus pada kenyamanan pengguna
Elemen Animasi, typography, warna, video, Usability, navigasi, struktur desain,
buttons, dll fitur-fitur, interaction design, dll
Based On Desain berdasarkan riset dan konsep Desain berdasarkan riset pengguna
produk
Tools Spesifikasi utama desain grafis, seperti Spesifikasi utama prototyping seperti
Flinto, Principle, Frames X, Adobe Sketch, InVision, Figma, Adobe XD,
Illustrator Axure
Pre-building Berupa Mockup Berupa wireframe dan prototype
Skill yang dibutuhkan Desain grafis, creative thinking, Riset, critical thinking, creative thinking,
convergent thinking, desain branding analysis, problem solving, wireframing
KONSEP USER INTERFACE
BAGAIMANA UI DAN UX YANG BAIK?

◼ UI yang Baik
◼ Konsisten. Konsistensi desain dapat membantu pengguna untuk mengerti pola website atau
aplikasi Anda.
◼ Responsif. Tampilan website yang baik harus fleksibel di segala perangkat.
◼ Jelas dan Ringkas. Tampilan website Anda harus terlihat jelas dan ringkas agar pengguna dapat
memahami informasi aplikasi atau website Anda.
◼ Intuitif. Desain yang intuitif secara sederhana artinya mudah dimengerti secara natural.
◼ Kontras Warna yang Baik. Pemilihan warna dalam desain interface sangatlah penting.
◼ Informasi Terstruktur. Desain UI yang baik tidak hanya harus indah, namun juga mudah untuk
digunakan.
KONSEP USER INTERFACE
BAGAIMANA UI DAN UX YANG BAIK?

◼ UX yang Baik
◼ Mudah digunakan (usability). Mudah digunakan artinya, pengguna bisa menggunakan fitur-fitur
aplikasi atau website tanpa membutuhkan effort yang berlebih.
◼ Memiliki nilai (valuable). Bernilai atau memiliki nilai berarti fitur-fitur yang ada pada produk
sesuai dengan kebutuhan pengguna.
◼ Mudah untuk didapatkan (Adoptability). Sebuah produk yang bernilai seharusnya mudah untuk
didapatkan, mudah dibeli, dan mudah diunduh sehingga pengguna bisa dengan mudah untuk
memulai menggunakan produk tersebut.
◼ Kesukaan (Desirable). Istilah ini berkaitan dengan perasaan emosi tertentu. Misalnya, pengguna
merasakan pengalaman yang menyenangkan saat menggunakan produk tertentu.
 https://bit.ly/Pemahaman_U
I
PEMAHAMAN UI DAN UX
KONSEP USER INTERFACE
MEMAHAMI LAYOUT DAN PRINSIP DISAIN ATOMIC

◼ Atom: Materi dasar dalam interface

◼ Jika atom adalah blok bangunan dasar materi, maka atom antarmuka / interface berfungsi sebagai
blok bangunan dasar yang terdiri dari semua antarmuka pengguna.
KONSEP USER INTERFACE
MEMAHAMI LAYOUT DAN PRINSIP DISAIN ATOMIC
◼ Molekul
◼ Dalam kimia, molekul adalah kelompok atom terikat bersama yang mempunyai sifat baru yang
berbeda
◼ Dalam terminologi interface, molekul adalah kelompok elemen UI yang relatif sederhana berfungsi
bersama sebagai satu unit.
KONSEP USER INTERFACE
MEMAHAMI LAYOUT DAN PRINSIP DISAIN ATOMIC

◼ Organisme
◼ Organisme adalah komponen UI yang relatif kompleks yang terdiri dari kelompok molekul dan /
atau atom dan / atau organisme lain
ELEMEN USER INTERFACE

◼ Kontrol Input: kotak centang, tombol radio, daftar dropdown, kotak daftar, tombol, matikan, bidang teks, bidang
tanggal
◼ Komponen Navigasi: breadcrumb, slider, kolom pencarian, pagination, slider, tag, ikon
◼ Komponen Informasi: tooltips, ikon, bilah kemajuan, pemberitahuan, kotak pesan, jendela modal
◼ Wadah: accordion
ELEMEN USER INTERFACE
KONTROL INPUT
◼ Checkbox (kotak centang). Kotak centang memungkinkan pengguna untuk memilih satu atau lebih opsi dari satu
set/himpunan.
◼ Radiobutton (Tombol radio), Tombol radio digunakan untuk memungkinkan pengguna memilih satu item dalam
satu waktu.
◼ Dropdown List (Daftar dropdown), Daftar dropdown memungkinkan pengguna untuk memilih satu item pada
satu waktu, mirip dengan tombol radio, tetapi lebih kompak memungkinkan sehngga kita untuk menghemat ruang
◼ ListBox (Daftar kotak), Daftar kotak, seperti kotak centang, memungkinkan pengguna untuk memilih beberapa
item sekaligus, tetapi lebih kompak dan dapat mendukung daftar opsi yang lebih panjang jika diperlukan.
ELEMEN USER INTERFACE
KONTROL INPUT
◼ Button (Tombol), Suatu tombol menunjukkan tindakan saat disentuh dan biasanya diberi label menggunakan teks,
ikon, atau keduanya
◼ Dropdown Button (Tombol Dropdown), Tombol dropdown terdiri dari tombol yang ketika diklik menampilkan
daftar drop-down dari item-item yang saling eksklusif.
◼ Toggle Button (Tombol toggle) memungkinkan pengguna untuk mengubah pengaturan antara dua negara bagian.
◼ Text field (Bidang teks) Bidang teks memungkinkan pengguna memasukkan teks. Hal ini dapat memungkinkan
satu baris atau beberapa baris teks.
◼ Date and time Picker (Pemilih tanggal dan waktu) Pemilih tanggal memungkinkan pengguna memilih tanggal
dan / atau waktu
ELEMEN USER INTERFACE
KOMPONEN NAVIGASI

◼ Searching field (Bidang Pencarian) Kotak pencarian memungkinkan pengguna memasukkan kata kunci atau
frasa (permintaan) dan mengirimkannya untuk mencari indeks dengan maksud untuk mendapatkan kembali hasil
yang paling relevan.
◼ Breadcrumb, Breadcrumbs memungkinkan pengguna untuk mengidentifikasi lokasi mereka saat ini di dalam
sistem dengan memberikan jejak yang dapat diklik pada halaman yang sedang berjalan untuk menavigasi.
◼ Penanda Halaman (Paginasi/Pagination), membagi konten di antara halaman, dan memungkinkan pengguna
untuk melewati halaman atau mengirimkan request melalui konten.
ELEMEN USER INTERFACE
KOMPONEN NAVIGASI

◼ Tag (Tags) memungkinkan pengguna menemukan konten dalam kategori yang sama.
◼ Slider, slider, juga dikenal sebagai track bar, memungkinkan pengguna untuk mengatur atau menyesuaikan nilai.
◼ Icon (Ikon), Ikon adalah gambar sederhana yang berfungsi sebagai simbol intuitif yang digunakan untuk
membantu pengguna menavigasi sistem
◼ Gambar Carousel (Image carousels) memungkinkan pengguna untuk menelusuri serangkaian item dan membuat
pilihan satu jika mereka memilihnya. Biasanya, gambar tersebut hyperlink.
ELEMEN USER INTERFACE
KOMPONEN INFORMASI

◼ Pemberitahuan (Notification/Notifikasi), Pemberitahuan adalah pesan pembaruan yang mengumumkan sesuatu

yang baru bagi pengguna untuk dilihat
◼ Bilah Kemajuan (Progress Bars), Sebuah bilah kemajuan menunjukkan di mana pengguna berada saat mereka
maju melalui serangkaian langkah dalam suatu proses. Biasanya, bilah kemajuan tidak dapat diklik.
ELEMEN USER INTERFACE
KOMPONEN INFORMASI
◼ Tips Kakas (Tools Tips) Sebuah tooltip memungkinkan pengguna untuk melihat petunjuk ketika mereka
membawa lebih dari satu item yang menunjukkan nama atau tujuan dari item tersebut.
◼ Kotak Pesan (Message Box), Kotak pesan adalah jendela kecil yang memberikan informasi kepada pengguna dan
mengharuskan mereka untuk mengambil tindakan sebelum dapat bergerak maju
◼ Modal Window (pop-up), Jendela modal mengharuskan pengguna untuk berinteraksi dengannya dalam beberapa
cara sebelum mereka dapat kembali ke sistem
ELEMEN USER INTERFACE
WADAH (CONTAINER)

◼ Akordeon adalah daftar item yang ditumpuk secara vertikal yang memanfaatkan fungsi pertunjukan /
sembunyikan
 https://bit.ly/Pemahaman_EL_U
I
PEMAHAMAN LAYOUT DAN ELEMEN USER INTERFACE
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES

◼ Dialog adalah overlay yang mengharuskan pengguna untuk berinteraksi dengannya dan dirancang untuk
mendapatkan tanggapan dari pengguna.
◼ Dialog menginformasikan pengguna tentang informasi penting, mengharuskan pengguna untuk membuat
keputusan, atau melibatkan banyak tugas.
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
PANDUAN DALAM MENGIMPLEMENTASIKAN DIALOG

◼Mengurangi Gangguan/Interruption
◼Sesuaikan arti Dialog dengan Kondisi Sebenarnya
◼Upayakan untuk Minimalis
◼Pilih Jenis Dialog yang Tepat
◼Konsistensi Visual
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
MENGURANGI GANGGUAN/INTERRUPTION

◼ Kebutuhan Informasi

◼ Hindari dengan tiba-tiba membuka dialog

PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
SESUAIKAN ARTI DIALOG DENGAN KONDISI SEBENARNYA
◼ Hapus Pertanyaan dan Opsi
◼ Kita harus menggunakan pertanyaan atau pernyataan yang jelas dengan penjelasan di bidang konten, seperti "Hapus
penyimpanan kita?" Atau "Hapus akun kita?" Secara umum, kita harus menghindari permintaan maaf, ambiguitas, atau
pertanyaan, seperti "Peringatan!" atau "Apakah kamu yakin?"
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
SESUAIKAN ARTI DIALOG DENGAN KONDISI SEBENARNYA

◼ Berikan informasi penting

◼ Penting bahwa dialog tidak mengaburkan informasi yang mungkin bergunabagi pengguna. Misalnya, dialog yang meminta
pengguna untuk mengonfirmasi penghapusan beberapa item harus mencantumkan item yang dihapus.
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
SESUAIKAN ARTI DIALOG DENGAN KONDISI SEBENARNYA

◼ Menawarkan Umpan Balik Informatif

◼ Ketika suatu proses selesai, ingatlah untuk menampilkan pesan pemberitahuan (atau umpan balik visual). Beri tahu pengguna
bahwa dia telah melakukan semua yang diperlukan.
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
UPAYAKAN UNTUK MINIMALIS

◼ Kita tidak boleh mencoba menjejalkan terlalu banyak komponen ke dalam dialog.

Terlalu banyak
komponen
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
UPAYAKAN UNTUK MINIMALIS

◼ Jangan Sertakan Beberapa Langkah di Dialog

◼ Memecah tugas yang rumit menjadi beberapa langkah adalah ide yang bagus, tetapi itu juga secara umum merupakan tanda
bahwa ada sesuatu yang terlalu rumit untuk meminta pengguna menyelesaikan dalam Batasan dialog.

Dialog yang
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
PILIH JENIS DIALOG YANG TEPAT

◼ Dialog diperlukan dalam dua tipe utama.

◼ pop up pay attention dialog yang memaksa pengguna untuk berinteraksi dengan system sebelum melanjutkan.
◼ dialog non-modal yang memungkinkan pengguna untuk mengklik atau ketuk di luar mereka untuk menghapus mereka.
PENGGUNAAN DIALOG SESUAI KONTEKS RANCANGAN PROSES
KONSISTENSI VISUAL

◼ Saat membuka dialog, penting bahwa halaman di belakang sedikit gelap

◼ Harus ada opsi tutup untuk dialog di sudut kanan atas.
◼ Sebaiknya izinkan pengguna untuk keluar dari jendela non-modal ketika mereka mengeklik area latar belakang di
luarnya, jika pengguna tidak wajib memilih opsi pada dialog.
◼ Hindari Dialog menampilkan Dialog
 https://bit.ly/Pemahaman_Moda
l
PEMAHAMAN PENGGUNAAN DIALOG
 SIMULASI (MOCK-UP) DARI APLIKASI YANG AKAN
DIKEMBANGKAN DIBUAT

◼ Mockup adalah gambaran mid-fidelity ataupun high-fidelity yang

menggambarkan pilihan warna desain, layout, tipografi, iconography,
visual navigasi, dan keseluruhan tampilan produk yang didesain.
◼ Mock up bisa dibuat dengan cara manual dengan mengandalkan kertas, cat
warna, dan pena. juga bisa dibuat secara lebih modern dengan
mengandalkan aplikasi seperti CorelDraw, Adobe Photoshop, Marcomedia
Freehand, Adobe Illustrator, dan sebagainya. Bahkan, bisa juga memakai
aplikasi khusus untuk mock up desain website.
SIMULASI (MOCK-UP) DARI APLIKASI YANG AKAN
DIKEMBANGKAN DIBUAT

◼ FUNGSI DARI MOCKUP

◼ Media presentasi proyek desain web.
◼ Menampilkan konsep desain yang akan ditawarkan, seakan-akan nyata.
◼ Pedoman teknis untuk merancang halaman web.
◼ Kontrol agar display desain yang dibuat tak melenceng dari rencana awal.
◼ Memudahkan Anda mendapat gambaran konsep web.
KESIMPULAN

◼ UI dan UX
◼ Konsep User Interface
◼ Elemen User Interface
◼ Penggunaan Dialog
◼ Mockup
 KODE :
EVALUASI
 Lakukan Analisa konsep dan elemen user interface website:

https://dcust.com/

TUGAS TAMBAHAN
 https://bit.ly/OJT_ABSEN_AKHI
R
ABSENSI AKHIR PELATIHAN
THANK YOU