Proses Desain UI

Layout Layar
 Mengatur Layout Layar
• Bagaimana cara mengatur layout “windows”dan “web
page” sehingga jelas dan mengandung arti
• Presentasi dan struktur layar yang tepat akan mendorong
informasi dapat dilakukan dengan cepat dan benar
• Pemahaman, Pelaksanaan Tugas, Fungsi yang cepat, serta
meningkatkan penerimaan pengguna

Bagaimana Layar diatur dan Bagaimana

Informasinya benar-benar disajikan, merupakan
sesuatu yang sangat PENTING
 Panduan Umum Mengatur Layar
Informasi harus
tepat, jangan Keselaransan /
Elemen yang tepat
menjejalkan Alignment
informasi

Proporsi informasi
Pengelompokan /
hanya 30-40 Konsisten
Grouping
persen dari layar

Margin yang cukup

Efisiensi dalam
antar elemen layar
navigasi
dan batas layar

Sajikan dalam
Diurutkan dalam
bentuk yang logis,
aliran atas-ke-
berurutan dan
bawah, kiri-ke-
berirama, agar
kanan
mudah dilihat
Membuat Grouping
• Elemen: radio button atau
check box
• Pengelompokan sampai 5
sudut pandang
• Memberikan Judul
• Dapat ditambahkan
border
 Membuat Border

• Border dibuat untuk meningkatkan perbedaan secara visual

dari grouping
• Memberikan judul pada atas atau kiri border
Contoh Border
Grouping Section menggunakan
Border
Hindari Menggunakan Border Seperti
Ini
Multi Kolom dengan menggunakan
Border
 Panduan untuk Window
Window harus diatur agar mendukung tugas pengguna

Minimalkan penggunaan Window

Tampilkan semua informasi yang diperlukan dalam satu tampilan Window (jika
memungkinkan)

Hindari Window Scrolling

Jika harus menambah Window, buatlah Window baru untuk informasi yang jarang
dibutuhkan

Jangan menggunakan Full Screen Window (pilihan untuk Maximize harus ada)

Gunakan Window Utama, Window Sekunder dan Dialog Boxes secara konsisten
 Panduan Web Page

Layout harus: Pengorganisasian Formatting

• Effisien • Tempatkan informasi • Sediakan white space
• Logis penting dibagian atas minimal 30%
• Konsisten • Batasi penggunaan • Jika harus dibaca
• Indikasi yang Jelas gambar yang cepat, gunakan 75-100
• Mudah memilih berukuran besar karakter per baris
informasi • Atur elemen • Hindari penggunakan
berdasarkan kolom yang sempit
kepentingannya
• Hindari kompleksitas
grafis dan kerapatan
tekstual pada bagian
bawah halaman
Page Layout Grids (Jelek)
Page Layout Grids (Bagus)
Contoh (1)
Contoh (2)
 Daftar Pustaka
1. Galitz, W. O., 2007, The Essential Guide to User Interface
Design an Introduction to GUI Design Principles and
Techniques, Third Edition, John Wiley Sons, Inc
2. Tidwel, J., 2011, Designing Interfaces, Second Edition,
Sebastopol, CA, USA: O’Reilly Media, Inc.