INTERAKSI MANUSIA &

KOMPUTER
Dwi Krisbiantoro, M.Kom
 DESAIN INTERFACE
WEB BASED USER FRIENDLY
 Tujuan Pembelajaran

 Mampu membuat desain interface web yang user friendly

 Mengenal tools yang digunakan untuk mendesain interface
 Mengenal tahapan-tahapan membangun interface web
1. Scannability pada Laman atau Layar

Scannability adalah cara seseorang membaca sesuatu di laman website atau layar
yang mereka gunakan.

Saat Pengunjung tiba disuatu website, mereka tentunya tidak membaca semua konten
yang ada melainkan melakukan quick scan atau cara membaca cepat untuk
menentukan informasi yang ada relevan atau tidak.
Pola Z Pola Zig- Zag
Pola F
2. Letakan Menu Navigasi pada Bagian Header
3. Visualisasikan Brand

• Dalam Interface website maupun aplikasi mobile, branding berarti menambahkan

serangkaian elemen visual yang mendefinisikan merk atau gaya perusahaan seperti
logo, tipografi, warna merek, dan sejenisnya.
4. Keistimewaan Angka Dalam UI

Dalam salah satu investigasi perilaku

pengguna, Nielsen Norman berbagi
temuan menarik. Studi pelacakan mata
membuktikan bahwa pemindaian halaman
web, mata pengguna seringkali berhenti
pada angka.
5. CTA mudah ditemukan
6. Testing Persepsi pada Icon User Interface
 Tahapan-Tahapan membangun Interface

• Konsisten
• Sederhana
• Mengetahui siapa pengguna
• Penempatan/Layout yang mudah dilihat
 Beberapa hal yang harus di ketahui dalam menyusun UI

• Mengidentifikasi masalah yang akan di selesaikan

• Memiliki kemampuan product knowledge yang baik
• Menganalisa dan melakukan riset tampilan UI dari competitor
• Mengumpulkan data untuk semua produk secara keseluruhan
Tools yang dapat digunakan untuk membuat UI ??
1. MockFlow
2. Balsamiq
3. Axure
4. Sketch
5. InVision Studio
6. Figma
7. Adobe XD
8. Adobe Illustrator
9. Origami Studio
10. FluidUI
11. Pencil Project
12. NinjaMock
Atribut- Atribut Web

• Bagaimana mendesain antarmuka sistem berbasis web untuk membangun website

dengan halaman yang efektif?

Beberapa atribut yang perlu diperhatikan:

– Textual content
– Graphic design
– Navigation
– Structure
– Links
 Textual Content

• Content yang ditampilkan dalam sebuah website memiliki nilai yang lebih penting
dibandingkan desain dari website itu sendiri.
• Informasi yang sesuai merupakan hal yang sangat penting dalam sebuah website.
• Hal yang perlu diperhatikan:
– Kemampuan membaca pada monitor lebih lambat daripada kertas
– User cenderung hanya membaca header, highlights dan paragraf tertentu

• Usahakan setiap halaman hanya menggunakan satu layar, hindari scrolling layar jika
memungkinkan.
• Jika tidak memungkinkan, scrolling hanya sesuai untuk content, hindari scrolling untuk
halaman navigasi. Gunakan scrolling layar ke atas/bawah, jangan ke samping (kiri/kanan).
• Letakkan link yang penting pada bagian atas halaman website.
 Graphic Design

• Tampilan grafis harus memperhatikan masalah konsistensi, susunan antara teks dan
gambar, kontras, warna dan fungsionalitas dari gambar yang ditampilkan.

• Hal yang perlu diperhatikan:

– Pemilihan format gambar yang sesuai dan pertimbangan masalah ukuran file gambar
yang akan mempengaruhi kecepatan akses dan waktu tunggu (delay)
– Menyesuaikan tampilan grafis dengan dimensi halaman website yang akan
ditampilkan di layar
 Graphic Design

• Pemilihan format file gambar yang sesuai

• GIF – Graphic Interchange Format
– Compressed, lossless format, 8-bit
– Keuntungan: memungkinkan warna transparan dan animasi
– Cocok untuk icon atau gambar dengan warna yang solid
• JPEG – Joint Photographic Expert’s Group
– Compressed, lossy, 24-bit
– Keuntungan: memungkinkan memilih faktor kompresi dan menentukan kualitas gambar
– Cocok untuk fotografi dan gambar dengan warna kompleks
• PNG – New Universal Format
– Seperti halnya JPEG
 Navigation

• Navigasi merupakan elemen kritis dalam menentukan efektivitas antarmuka sebuah

website
• Navigasi harus memberikan penjelasan tentang struktur informasi pada website, dengan
menyediakan:
– Daftar isi (site map)
– Index
– Navigation bar
– Kemampuan Searching
Structure

• Homepage merupakan halaman yang terpenting dalam website

• Berikan tampilan yang menarik pada homepage dan penjelasan tentang informasi apa
saja yang dapat ditemukan pada website
• Tampilkan beberapa real content maupun berita aktual pada homepage
• Jika link yang dibuat pada homepage menggunakan gambar, maka berikan pula label
berupa teks
• Tampilkan informasi dinamis pada homepage
 Links

• Link sama seperti gaya dialog buttons, harus memberikan penjelasan tentang apa yang dapat dilakukan
pada halaman berikutnya

• Sebuah link yang baik berpedoman pada:

– Bagaimana user dapat memprediksi tujuan sebuah link
– Bagaimana user dapat membedakan antara sebuah link dengan link lainnya yang memiliki
kemiripan
– Sesuai tidaknya content yang ditampilkan oleh link

• Pastikan semua link pada website dapat bekerja sesuai dengan fungsi masing-masing
 Links
• Hati-hati terhadap penggunaan kata “here”/”disini” pada sebuah link:
– Klik disini untuk menampilkan Artikel.
– Dapatkan informasi detail pada Artikel.
• Penulisan sebuah link harus pada satu baris yang sama.
Profil Kota Bandung
Kawasan Wisata di
Kota Bandung
Informasi Hotel
– Ada 3 atau 4 link?
Tips membuat
tampilan Web
 1. Jangan gunakan Border terlalu tipis hampir tidak terlihat

• Ketika Anda menyukai design minimalis dan clean. Hal itu membuat Anda berusaha untuk
selalu membuat design yang clean. Bahkan jika diperlukan adanya border, maka akan
membuat border itu sehalus mungkin, agar terlihat clean.
• Padahal dengan border yang halus akan membuat user kesulitan untuk memisahkan antar
konten saat melihatnya. Seperti contoh dibawah ini.
Border Tipis Border tebal
Dengan menambahkan blok warna
dan border tebal pada gambar
thumbnail nya membuat design
sebelah kanan terlihat berbeda.
2. Jangan membuat semua tombol CTA terlihat sama
• Jika konteksnya adalah memberikan konfirmasi dalam sebuah flow. (Misal: Flow
Download File, Flow Pemesanan, Flow Pengisian Data) , Maka sebaiknya tombol yang
menuntun user untuk melanjutkan ke flow berikutnya dibuat menjadi lebih jelas.
• Karena dengan membuat tombol terlihat sama akan membuat user berpikir selama
beberapa saat untuk mencari tombol untuk melanjutkan ke flow berikutnya.
3. Jangan membuat form isian yang terlalu panjang
• Form isian yang terlalu panjang dalam satu halaman akan membuat user sedikit
ketakutan. Maka jika memungkinkan untuk dibuat menjadi beberapa halaman maka
lakukanlah.
• Dengan membuat flow pengisian data menjadi beberapa halaman akan ada semacam
“Sense of achievement” yang membuat user nyaman untuk melanjutkan ke halaman
berikutnya karena mengetahui berapa step yang harus dilalui.
• Dan jika terjadi kesalahan dalam pengisian inputan, user juga akan lebih cepat untuk
memperbaikinya.
 4. Jangan lupa membuat Feedback

• Feedback yang dimaksud disini adalah hal yang selanjutnya terjadi setelah user
melakukan suatu operasi. Misalnya: Upload Foto. Upload foto membutuhkan waktu untuk
mengupload ke server , sehingga user diharuskan untuk menunggu.

• Jika setelah user memilih foto dan tidak ada feedback sama sekali maka user akan
kebingungan. Mereka akan bertanya tanya apa yang terjadi? apa yang harus dilakukan?
apakah fotonya sudah terupload?
Saat membuat design jangan
lupa untuk selalu membuat
feedback, terlebih jika ada
kondisi dimana user diharuskan
untuk menunggu.
Berikut adalah beberapa designer yang bisa kalian follow untuk
mendapatkan inspirasi mengenai layout

• https://dribbble.com/abaygulov
• https://dribbble.com/mstrba
• https://dribbble.com/antalik
• https://dribbble.com/aureliensalomon
Contoh Wireframe Admin
Implementasi Interface Admin
Contoh Desain/ Wireframe Form Peminjaman Barang
Implementasi Interface Form Peminjaman barang
Steve Jobs Said :

“Design is not just what it looks like and feels like.

Design is how it work.”
 Tugas Kelompok (terdiri dari 5 – 6 anggota)

1. Buatlah tampilan user interface pilih salah satu (web,mobile, Desktop) harus murni desain sendiri bukan hasil editing
tampilan yang sudah jadi, jika ditemukan hasil editing tidak akan dinilai.
2. Tentukan tema dari user interface yang dibangun (misal aplikasi penjualan tiket, aplikasi rental mobil atau yang lain)
jelaskan sasaran pengguna siapa?
3. Tahapan yang dilakukan (buatlah wireframe lalu mockupnya atau prototypenya (contoh seperti di pertemuan 12)
gunakan salah satu tools yang sudah dibahas seperti balsamiq dan lainnya.
4. Lengkapi dengan penjelasan untuk kegunaan dan fungsinya dari tiap-tiap halaman/tampilan yang dibuat serta alasan
pemilihan warna yang digunakan dan penggunaan ragam dialog yang digunakan (misal berbasis icon, menu dsb)
5. Kemudian Anda perlu untuk memberikan gambaran tentang desain anda yang akan membantu memudahkan
pemahaman, dan bagaimana pengguna akan berinteraksi dengan sistem tersebut untuk melakukan tugasnya.
6. Desain harus muncul dalam laporan ini dalam bentuk apa saja, baik sketsa, atau yang sudah jadi menggunakan
software bantu, Yang akan diutamakan disini adalah fitur kegunaan dan juga bagaimana desain anda sesuai dengan
asumsi yang anda gunakan tentang konteks, pengguna, tugas, dan sebagainya, ingat prinsip dalam mendesain agar
desain dapat mencapai user friendly.
7. Tugas dikumpulkan pada Sabtu 25 Juni 2022 cukup ketua kelompoknya saja yang mengumpulkan. Kirim ke
dwikris@amikompurwokerto.ac.id (Tugas Kelompok_Design Interface_kelas)