Tata letak

Tata letak adalah ukuran, penspasian, dan penempatan konten dalam jendela atau halaman. Tata letak yang efektif sangat penting dalam membantu pengguna menemukan apa yang mereka cari dengan cepat, serta membuat penampilan menarik secara visual. Tata letak yang efektif dapat membuat perbedaan antara desain yang segera dipahami pengguna dan yang membuat pengguna merasa bingung dan kewalahan.

Catatan: Panduan yang terkait dengan manajemen jendela disajikan dalam artikel terpisah. Ukuran dan penspasian kontrol khusus yang direkomendasikan disajikan dalam artikel pedoman masing-masing.

Konsep desain

Hierarki visual

Jendela atau halaman memiliki hierarki visual yang jelas ketika tampilannya menunjukkan hubungan dan prioritas elemennya. Tanpa hierarki visual, pengguna harus mencari tahu hubungan dan prioritas ini sendiri.

Hierarki visual dicapai dengan menggabungkan atribut berikut dengan terampil:

• Fokus. Tata letak menunjukkan di mana pengguna perlu melihat terlebih dahulu.
• Mengalir. Mata mengalir dengan lancar dan alami dengan jalur yang jelas melalui permukaan, menemukan elemen antarmuka pengguna (UI) dalam urutan yang sesuai untuk penggunaannya.
• Pengelompokan. Elemen UI terkait logis memiliki hubungan visual yang jelas. Item terkait dikelompokkan bersama-sama; item yang tidak terkait terpisah.
• Penekanan. Elemen UI ditekankan berdasarkan kepentingan relatifnya.
• Alignment. Elemen UI memiliki penempatan terkoordinasi, sehingga mudah dipindai dan tampak teratur.

Selain itu, tata letak yang efektif memiliki atribut ini:

• Kemandirian perangkat. Tata letak muncul seperti yang dimaksudkan terlepas dari jenis huruf atau ukuran font, titik per inci (dpi), tampilan, atau adaptor grafis.
• Mudah dipindai. Pengguna dapat menemukan konten yang mereka cari sekilas.
• Efisiensi. Elemen UI yang besar harus besar, dan elemen yang kecil bekerja dengan baik kecil.
• Resizability. Jika bermanfaat, jendela dapat diubah ukurannya dan tata letak kontennya efektif tidak peduli seberapa besar atau kecil permukaannya.
• Neraca. Konten tampak didistribusikan secara merata di seluruh permukaan.
• Kesederhanaan visual. Persepsi bahwa tata letak tidak lebih rumit daripada yang diperlukan. Pengguna tidak merasa kewalahan dengan tampilan tata letak.
• Konsistensi. Jendela atau halaman serupa menggunakan tata letak serupa, sehingga pengguna selalu merasa berorientasi.

Meskipun ukuran, penspasian, dan penempatan adalah konsep sederhana, tantangan dengan tata letak adalah mencapai campuran atribut ini yang tepat.

Di Windows, tata letak dikomunikasikan menggunakan metrik independen perangkat seperti unit dialog (DPU) dan piksel relatif.

Model desain untuk membaca

Pengguna memilih apa yang mereka baca berdasarkan tampilan dan organisasi konten. Untuk membuat tata letak yang efektif, Anda harus memahami apa yang cenderung dibaca pengguna dan mengapa.

Anda dapat membuat keputusan tata letak menggunakan model desain ini untuk membaca:

• Orang membaca dalam urutan kiri-ke-kanan, atas-ke-bawah (dalam budaya Barat).

• Ada dua mode membaca: pembacaan dan pemindaian imersif. Tujuan pembacaan imersif adalah pemahaman.

  

  Diagram ini memodelkan pembacaan imersif.

  Sebaliknya, tujuan pemindaian adalah untuk menemukan hal-hal. Jalur pemindaian keseluruhan terlihat seperti ini:

  

  Model diagram ini memindai.

  

  Jika ada teks yang berjalan di sepanjang tepi kiri halaman, pengguna memindai tepi kiri terlebih dahulu.

• Saat menggunakan perangkat lunak, pengguna tidak dibenamkan di UI itu sendiri tetapi dalam pekerjaan mereka. Akibatnya, pengguna biasanya tidak membaca teks UI yang mereka pindai. Mereka kemudian membaca bit teks secara komprehensif hanya ketika mereka percaya bahwa mereka perlu.

• Pengguna cenderung melewati panel navigasi di sisi kiri atau kanan halaman. Pengguna mengenali bahwa mereka ada di sana, tetapi lihat panel navigasi hanya saat mereka ingin menavigasi.

• Pengguna cenderung melewati blok besar teks yang tidak diformat tanpa membacanya sama sekali.

  

  Pengguna cenderung melewati blok besar panel teks dan navigasi saat mereka memindai.

• Semua hal yang sama, pengguna pertama-tama melihat di sudut kiri atas jendela, memindai di seluruh halaman, dan mengakhiri pemindaian mereka di sudut kanan bawah. Mereka cenderung mengabaikan sudut kiri bawah.

  

  Semua hal yang sama, pengguna akan membaca angka-angka ini dalam urutan berikut: 1, 2, 4, dan 3.

• Tetapi dalam antarmuka pengguna interaktif, tidak semua hal sama sehingga elemen UI yang berbeda menerima tingkat perhatian yang berbeda. Pengguna cenderung melihat kontrol interaktif terutama kontrol di kiri atas dan tengah jendela dan teks menonjol terlebih dahulu.

Pengguna fokus pada kontrol interaktif utama dan instruksi utama yang menonjol, dan melihat hal-hal lain hanya ketika mereka perlu.

• Pengguna cenderung membaca label kontrol interaktif, terutama yang tampak relevan dengan menyelesaikan tugas yang ditangani. Sebaliknya, pengguna cenderung membaca teks statis hanya ketika mereka berpikir mereka perlu.
• Item yang tampak berbeda menarik perhatian. Teks tebal dan teks besar menonjol dari teks normal. Item UI dengan warna atau pada latar belakang berwarna menonjol. Item dengan ikon menonjol dari item tanpa ikon.
• Pengguna tidak menggulir kecuali mereka memiliki alasan untuk. Jika konten di atas lipatan tidak memberikan alasan untuk menggulir, konten tersebut tidak akan.
• Setelah pengguna memutuskan apa yang harus dilakukan, mereka segera berhenti memindai dan melakukannya.
• Karena pengguna berhenti memindai ketika mereka berpikir mereka selesai, mereka cenderung mengabaikan apa pun di luar apa yang tampaknya menjadi titik penyelesaian.

Pengguna berhenti memindai ketika mereka berpikir mereka sudah selesai.

Tentu saja, akan ada pengecualian untuk model umum ini. Perangkat pelacakan mata menunjukkan bahwa perilaku pengguna nyata cukup tidak menentu. Tujuan dari model ini adalah untuk membantu Anda membuat keputusan dan tradeoff yang baik, bukan untuk memodelkan perilaku pengguna secara akurat. Tetapi seperti yang telah Anda baca daftar ini, mudah-mudahan Anda telah mengenali banyak pola membaca Anda sendiri juga.

Merancang untuk pemindaian

Pengguna tidak membaca, mereka memindai sehingga Anda harus merancang permukaan UI untuk pemindaian. Jangan berasumsi bahwa pengguna akan membaca teks seperti yang ditulis dalam urutan kiri-ke-kanan, atas-ke-bawah, melainkan mereka melihat elemen UI yang menarik perhatian mereka.

Untuk merancang pemindaian:

• Asumsikan bahwa pengguna mulai dengan cepat memindai seluruh jendela, lalu membaca elemen UI secara kira-kira urutan berikut:
  • Kontrol interaktif di tengah
  • Tombol penerapan
  • Kontrol interaktif ditemukan di tempat lain
  • Instruksi utama
  • Penjelasan tambahan
  • Teks disajikan dengan ikon peringatan
  • Judul jendela
  • Teks statis lainnya dalam isi utama
  • Catatan kaki
• Tempatkan elemen UI yang memulai tugas di sudut kiri atas atau tengah atas.
• Tempatkan elemen UI yang menyelesaikan tugas di sudut kanan bawah.
• Jika memungkinkan, letakkan teks penting pada kontrol interaktif alih-alih teks statis.
• Hindari meletakkan informasi penting di sudut kiri bawah atau di bagian bawah kontrol atau halaman yang dapat digulir panjang.
• Jangan sajikan blok besar teks. Hilangkan teks yang tidak perlu. Gunakan gaya presentasi piramida terbalik.
• Jika Anda melakukan sesuatu untuk menarik perhatian pengguna, pastikan bahwa perhatian dijaga.

Jika memungkinkan, bekerja dengan model ini daripada melawannya; tetapi akan ada saat-saat ketika Anda perlu menekankan atau mende-menekankan elemen UI tertentu.

Untuk menekankan elemen antarmuka pengguna utama:

• Letakkan elemen antarmuka pengguna utama di jalur pemindaian .

• Letakkan UI apa pun untuk memulai tugas di sudut kiri atas atau tengah atas.

• Letakkan tombol penerapan di sudut kanan bawah.

• Letakkan UI utama yang tersisa di tengah.

• Gunakan kontrol yang menarik perhatian, seperti tombol perintah, tautan perintah, dan ikon.

• Gunakan teks menonjol, termasuk teks besar dan teks tebal.

• Menempatkan pengguna teks harus membaca dalam kontrol interaktif, atau dengan ikon, atau pada banner .

• Gunakan teks gelap pada latar belakang terang.

• Kelilingi elemen dengan ruang yang murah hati.

• Tidak memerlukan interaksi apa pun, seperti menunjuk atau melayang, untuk melihat elemen yang Anda tegaskan.

  

  Contoh ini menunjukkan banyak cara untuk menekankan elemen UI utama.

Untuk mende-menekankan elemen UI sekunder:

• Letakkan elemen UI sekunder di luar jalur pemindaian.

• Letakkan apa pun yang biasanya tidak perlu dilihat pengguna di sudut kiri bawah atau bawah jendela.

• Gunakan kontrol yang tidak menarik perhatian, seperti tautan tugas alih-alih tombol perintah.

• Gunakan teks normal atau abu-abu.

• Gunakan teks terang pada latar belakang gelap. Teks putih pada latar belakang abu-abu gelap atau biru berfungsi dengan baik.

• Kelilingi elemen dengan ruang minimal.

• Pertimbangkan untuk menggunakan pengungkapan progresif untuk menyembunyikan elemen UI sekunder.

  

  Contoh ini menunjukkan banyak cara untuk membatalkan penekanan elemen UI sekunder.

Menggunakan ruang layar secara efektif

Menggunakan ruang layar secara efektif mengharuskan Anda menyeimbangkan beberapa faktor: menggunakan terlalu banyak ruang dan jendela terasa berat dan boros, dan bahkan sulit digunakan berdasarkan Hukum Fitts.

Salah:

Dalam contoh ini, jendela terlalu besar untuk kontennya.

Di sisi lain, gunakan ruang yang terlalu sedikit dan jendela terasa sempit, tidak nyaman, dan mengintimidasi, dan sulit digunakan jika memerlukan pengguliran dan manipulasi lain untuk digunakan.

Salah:

Dalam contoh ini, jendela terlalu kecil untuk kontennya.

Meskipun antarmuka pengguna penting harus sesuai dengan resolusi minimum yang didukung efektif, jangan asumsikan bahwa menggunakan ruang layar secara efektif berarti bahwa jendela harus sesingkat mungkin. Tata letak yang efektif menghormati ruang terbuka dan tidak mencoba menjejalkan semuanya ke ruang sekecil mungkin. Tampilan modern memiliki ruang layar yang signifikan dan masuk akal untuk menggunakan ruang ini secara efektif ketika Anda bisa. Akibatnya, kesalahan di sisi menggunakan terlalu banyak ruang layar daripada terlalu sedikit. Melakukannya membuat jendela Anda terasa lebih ringan dan lebih mudah didekati.

Anda tahu tata letak menggunakan ruang layar secara efektif saat:

• Windows, panel jendela, dan kontrol tidak perlu diubah ukurannya agar dapat digunakan. Jika hal pertama yang dilakukan pengguna adalah mengubah ukuran jendela, panel, atau kontrol, ukurannya salah.
• Data tidak terpotong. Sebagian besar data dalam tampilan daftar dan tampilan pohon tidak memiliki elipsis, dan data di kontrol lain tidak diklip kecuali panjang datanya sangat besar. Data yang harus dibaca untuk melakukan tugas tidak boleh dipotong.
• Jendela dan kontrol berukuran tepat untuk menghilangkan pengguliran yang tidak perlu. Ada beberapa bilah gulir horizontal dan tidak ada bilah gulir vertikal yang tidak perlu.
• Kontrol sebagian besar menggunakan ukuran standarnya. Berusahalah untuk mengurangi jumlah ukuran kontrol, dengan, misalnya, hanya menggunakan satu atau dua lebar tombol perintah pada permukaan.
• Permukaan UI seimbang. Tidak ada area layar besar yang tidak digunakan.

Pilih ukuran jendela yang cukup besar untuk memenuhi tujuannya dengan baik. (Dan jika jendela dapat diubah ukurannya, tujuan ini berlaku untuk ukuran defaultnya.) Kombinasi data atau bilah gulir yang terpotong dan banyak ruang layar yang tersedia adalah tanda yang jelas dari tata letak yang tidak efektif.

Mengontrol ukuran

Biasanya langkah pertama dalam menggunakan ruang layar secara efektif adalah menentukan ukuran yang tepat untuk berbagai elemen UI. Lihat tabel Kontrol ukuran serta ukuran yang direkomendasikan dalam artikel panduan kontrol tertentu.

Hukum Fitts menyatakan bahwa semakin kecil target, semakin lama waktu yang dibutuhkan untuk memperolehnya dengan mouse. Selain itu, untuk komputer yang menggunakan Tablet Windows dan Teknologi Sentuh, "mouse" mungkin benar-benar pena atau jari pengguna, jadi Anda harus mempertimbangkan perangkat input alternatif saat menentukan ukuran untuk kontrol kecil. Ukuran kontrol 16x16 piksel relatif adalah ukuran minimum yang baik untuk perangkat input apa pun. Sebaliknya, tombol kontrol spin piksel relatif 15x9 standar terlalu kecil untuk digunakan secara efektif oleh pena.

Jarak

Menyediakan ruang yang murah hati (tetapi tidak berlebihan) membuat tata letak terasa lebih nyaman dan lebih mudah diurai. Ruang yang efektif bukan ruang yang tidak digunakan, ruang ini memainkan peran penting dalam meningkatkan kemampuan pengguna untuk memindai, dan juga menambah daya tarik visual desain Anda. Untuk panduan, lihat tabel Spasi.

Untuk komputer yang menggunakan Tablet Windows dan Teknologi Sentuh, sekali lagi "mouse" mungkin benar-benar pena atau jari pengguna. Penargetan lebih sulit saat menggunakan pena atau jari sebagai perangkat penunjuk, yang mengakibatkan pengguna mengetuk di luar target yang dimaksudkan. Ketika kontrol interaktif ditempatkan sangat berdekatan tetapi tidak benar-benar menyentuh, pengguna dapat mengklik ruang tidak aktif di antara kontrol. Karena mengklik ruang tidak aktif tidak memiliki hasil atau umpan balik visual, pengguna sering kali tidak yakin apa yang salah. Jika kontrol kecil terlalu berspasi erat, pengguna perlu mengetuk dengan presisi untuk menghindari mengetuk objek yang salah. Untuk mengatasi masalah ini, wilayah target kontrol interaktif harus menyentuh atau memiliki setidaknya 3 DPU (5 piksel relatif) ruang di antara mereka.

Anda tahu tata letak memiliki penspasian yang baik ketika:

• Secara keseluruhan, permukaan UI terasa nyaman dan tidak terasa sempit.
• Ruang tampak seragam dan seimbang.
• Elemen terkait berdekatan dan elemen yang tidak terkait relatif jauh.
• Tidak ada ruang mati antara kontrol yang dimaksudkan untuk bersama-sama, seperti tombol toolbar.

Jendela yang dapat diubah

Jendela yang dapat diubah ukurannya juga merupakan faktor dalam menggunakan ruang layar secara efektif. Beberapa jendela terdiri dari konten tetap dan tidak mendapat manfaat dari dapat diubah ukurannya, tetapi jendela dengan konten yang dapat diubah ukurannya harus dapat diubah ukurannya. Tentu saja, alasan pengguna mengubah ukuran jendela adalah untuk mengambil tingkat lanjut dari ruang layar tambahan, sehingga konten harus diperluas dengan memberikan lebih banyak ruang ke elemen UI yang membutuhkannya. Windows dengan konten dinamis, dokumen, gambar, daftar, dan pohon mendapat manfaat paling besar dari jendela yang dapat diubah ukurannya.

Dalam contoh ini, mengubah ukuran jendela mengubah ukuran kontrol tampilan daftar.

Yang mengatakan, jendela dapat direntangkan terlalu lebar. Misalnya, banyak halaman panel kontrol menjadi tidak kuat ketika konten lebih luas dari 600 piksel relatif. Dalam hal ini, lebih baik tidak mengubah ukuran area konten di luar lebar maksimum ini atau mengubah asal konten karena jendela diubah ukurannya lebih besar. Sebagai gantinya, pertahankan lebar maksimum dan asal kiri atas tetap.

Teks menjadi sulit dibaca saat panjang garis meningkat. Untuk dokumen teks, pertimbangkan panjang baris maksimum 80 karakter untuk membuat teks mudah dibaca. (Karakter mencakup huruf, tanda baca, dan spasi.)

Salah:

Dalam contoh ini, panjang teks yang panjang membuat sulit dibaca.

Akhirnya, jendela yang dapat diubah ukurannya juga perlu menggunakan ruang layar secara efektif ketika dibuat lebih kecil, dengan membuat konten yang dapat diubah ukurannya lebih kecil dan dengan menghapus ruang dari elemen UI yang dapat bekerja secara efektif tanpanya. Pada titik tertentu, jendela atau elemen UI-nya menjadi terlalu kecil untuk digunakan, sehingga harus diberi ukuran minimum atau beberapa elemen harus dihapus sepenuhnya.

pita

Dalam contoh ini, panel memiliki ukuran minimum.

Beberapa program mendapat manfaat dari menggunakan presentasi yang sama sekali berbeda untuk membuat konten dapat digunakan pada ukuran yang lebih kecil.

Dalam contoh ini, Windows Media Player mengubah formatnya ketika jendela menjadi terlalu kecil untuk format standar.

Fokus

Tata letak memiliki fokus ketika ada satu tempat yang jelas untuk melihat terlebih dahulu. Fokus penting untuk menunjukkan kepada pengguna tempat mulai memindai jendela atau halaman Anda. Tanpa fokus yang jelas, mata pengguna akan berkeliaran tanpa tujuan. Titik fokus harus menjadi sesuatu yang penting yang perlu ditemukan dan dipahami pengguna dengan cepat, dan harus memiliki penekanan visual terbesar. Sudut kiri atas adalah titik fokus alami untuk sebagian besar jendela.

Seharusnya hanya ada satu titik fokus. Sama seperti dalam kehidupan nyata, mata hanya dapat fokus pada satu hal pada satu waktu, pengguna tidak dapat fokus pada beberapa tempat secara bersamaan.

Untuk menjadikan elemen UI sebagai titik fokus, Anda dapat memberinya penekanan visual dengan:

• Menempatkannya di bagian kiri atas atau tengah atas permukaan.
• Menggunakan kontrol interaktif yang penting dan mudah dipahami.
• Menggunakan teks menonjol, seperti instruksi utama.
• Memberikan pilihan default kontrol dan fokus input awal.
• Menempatkan kontrol di latar belakang berwarna yang berbeda.

Pertimbangkan Windows Search. Titik fokus untuk Pencarian Windows harus menjadi kotak Pencarian karena ini adalah titik awal untuk tugas tersebut. Namun, terletak di sudut kanan atas agar konsisten dengan penempatan kotak Pencarian standar. Kotak Pencarian memiliki fokus input, tetapi mengingat lokasinya di jalur pemindaian, petunjuk itu saja tidak cukup.

Untuk mengatasi masalah ini, ada instruksi menonjol di bagian tengah atas jendela untuk mengarahkan pengguna ke lokasi yang tepat.

Dapat Diterima:

Dalam contoh ini, instruksi menonjol di bagian tengah atas jendela mengarahkan pengguna ke kotak Pencarian.

Tanpa instruksi, jendela tidak akan memiliki titik fokus yang jelas.

Salah:

Contoh ini tidak memiliki titik fokus yang jelas. Pengguna tidak tahu di mana harus mencari.

Jika Anda memberikan penekanan visual elemen UI, pastikan bahwa perhatian dijaga. Dalam contoh Windows Search yang salah sebelumnya, tombol Semua yang disorot berada di sudut kiri atas dan memiliki penekanan visual terbanyak, tetapi bukan titik fokus yang dimaksudkan. Pengguna mungkin terjebak melihat tombol ini mencoba mencari tahu apa yang harus dilakukan dengannya.

Salah:

Tanpa instruksi menonjol sebagai titik fokus, tombol Semua yang disorot adalah titik fokus yang tidak disengaja.

Mengalir

Tata letak memiliki alur ketika pengguna dipandu dengan lancar dan alami dengan jalur yang jelas melalui permukaannya, menemukan elemen UI dalam urutan yang sesuai untuk penggunaan mereka. Setelah pengguna mengidentifikasi titik fokus, mereka perlu menentukan cara menyelesaikan tugas. Penempatan elemen UI menyampaikan hubungan mereka dan harus mencerminkan langkah-langkah untuk melakukan tugas. Biasanya, ini berarti langkah-langkah tugas harus mengalir secara alami dalam urutan kiri-ke-kanan, atas-ke-bawah (dalam budaya Barat).

Anda tahu tata letak memiliki alur yang baik ketika:

• Penempatan elemen UI mencerminkan langkah-langkah yang diperlukan pengguna untuk melakukan tugas.
• Elemen UI yang memulai tugas berada di sudut kiri atas atau tengah atas.
• Elemen UI yang menyelesaikan tugas berada di sudut kanan bawah.
• Elemen UI terkait bersama-sama; elemen yang tidak terkait terpisah.
• Langkah-langkah yang diperlukan berada dalam alur utama.
• Langkah opsional berada di luar alur utama, mungkin ditolak dengan menggunakan latar belakang yang sesuai atau pengungkapan progresif.
• Elemen yang sering digunakan muncul sebelum elemen yang jarang digunakan di jalur pemindaian.
• Pengguna selalu tahu apa yang harus dilakukan selanjutnya. Tidak ada lompatan atau jeda tak terduga dalam alur tugas.

Salah:

Dalam contoh ini, pengguna tidak tahu apa yang harus dilakukan selanjutnya. Ada lompatan dan jeda tak terduga dalam alur tugas.

Benar:

Dalam contoh ini, presentasi elemen UI mencerminkan langkah-langkah untuk melakukan tugas.

Pengelompokan

Tata letak memiliki pengelompokan saat elemen UI terkait logis memiliki hubungan visual yang jelas. Grup penting karena lebih mudah bagi pengguna untuk memahami dan fokus pada sekelompok item terkait daripada item satu per satu. Grup membuat tata letak tampak lebih sederhana dan lebih mudah diurai.

Anda dapat menunjukkan pengelompokan dengan cara berikut (dalam meningkatkan berat):

• Tata letak. Anda dapat mengelompokkan kontrol terkait di samping satu sama lain dan menempatkan penspasian ekstra di antara kontrol yang tidak terkait.

  

  Dalam contoh ini, tata letak saja digunakan untuk memperlihatkan hubungan kontrol.

• Pemisah. Pemisah adalah garis horizontal atau vertikal yang menyandingkan sekelompok kontrol. Pemisah memberikan tampilan yang lebih sederhana dan lebih bersih. Namun, tidak seperti kotak grup, mereka bekerja paling baik ketika mereka menjangkau permukaan penuh.

  

  Dalam contoh ini, pemisah berlabel digunakan untuk memperlihatkan hubungan kontrol.

• Agregator. Agregator adalah grafik yang membuat hubungan visual antara kontrol yang sangat terkait.

  

  Dalam contoh ini, agregator batas digunakan untuk menekankan hubungan antara kontrol dan membuatnya terasa seperti satu kontrol alih-alih delapan.

• Kotak grup. Kotak grup adalah bingkai persegi panjang berlabel yang mengelilingi sekumpulan kontrol terkait.

  batas persegi panjang

  Dalam contoh ini, kotak grup mengelilingi dan melabeli sekumpulan kontrol terkait.

• Latar belakang. Anda dapat menggunakan latar belakang untuk menekankan atau mendefinisikan berbagai jenis konten.

  

  Dalam contoh ini, panel tugas panel kontrol digunakan untuk mengelompokkan tugas terkait dan item panel kontrol.

  Untuk menghindari kekacauan visual, pengelompokan bobot paling ringan yang melakukan pekerjaan dengan baik adalah pilihan terbaik. Untuk informasi selengkapnya, lihat Kotak Grup, Tab , Pemisah dan Latar Belakang.

Terlepas dari gaya pengelompokan, Anda dapat menggunakan inden untuk memperlihatkan hubungan kontrol dalam grup. Kontrol yang saling serekan harus diratakan kiri, dan kontrol dependen diinden 12 DPU atau 18 piksel relatif.

Kontrol dependen diinden 12 DLUS atau 18 piksel relatif, yang secara desain adalah jarak antara kotak centang dan tombol radio dari labelnya.

Anda tahu tata letak memiliki pengelompokan yang baik saat:

• Jendela atau halaman memiliki paling banyak 7 grup.
• Tujuan dari setiap grup sudah jelas.
• Hubungan kontrol dalam setiap grup jelas, terutama dependensi kontrol.
• Pengelompokan menyederhanakan konten daripada membuatnya lebih kompleks.

Alignment

Penyelarasan adalah penempatan terkoordinasi elemen UI. Penyelarasan penting karena membuat konten lebih mudah dipindai dan memengaruhi persepsi pengguna tentang kompleksitas visual.

Ada beberapa tujuan yang perlu dipertimbangkan saat menentukan keselarasan:

• Kemudahan dalam pemindaian horizontal. Pengguna dapat membaca secara horizontal dan menemukan item terkait di samping satu sama lain, tanpa celah canggung.
• Kemudahan dalam pemindaian vertikal. Pengguna dapat memindai kolom item terkait dan segera menemukan apa yang mereka cari, dengan pergerakan mata horizontal minimal.
• Kompleksitas visual minimal. Pengguna melihat tata letak menjadi rumit secara visual jika memiliki garis kisi perataan vertikal yang tidak perlu.

Perataan horizontal

perataan kiri

Karena urutan pembacaan kiri-ke-kanan, perataan kiri berfungsi dengan baik untuk sebagian besar konten. Perataan kiri membuat data kolumnar mudah dipindai secara vertikal.

perataan kanan

Perataan kanan adalah pilihan terbaik untuk data numerik, terutama kolom data numerik. Perataan kanan juga berfungsi dengan baik untuk tombol penerapan serta kontrol yang selaras dengan tepi jendela kanan.

Dalam contoh ini, kontrol pengungkapan progresif pencarian tingkat lanjut diselaraskan dengan tepat karena ditempatkan pada tepi jendela kanan.

perataan Pusat

Perataan tengah paling baik dicadangkan untuk situasi di mana perataan kiri atau kanan tidak pantas atau tampak tidak seimbang.

Dalam contoh ini, kontrol pemutar media dipusatkan untuk memberikan penampilan yang seimbang.

Jangan tengahkan konten jendela hanya untuk mengisi ruang.

Salah:

Dalam contoh ini, konten salah dipusatkan di jendela yang dapat diubah ukurannya untuk mengisi ruang.

Perataan vertikal

atas elemen

Karena urutan pembacaan atas ke bawah, penyelarasan atas berfungsi dengan baik untuk sebagian besar konten. Perataan atas membuat elemen UI mudah dipindai secara horizontal.

garis besar teks

Saat meratakan kontrol secara vertikal dengan teks, ratakan garis besar teks untuk memberikan alur baca horizontal yang halus.

Benar:

Salah:

Dalam contoh yang benar, kontrol dan labelnya diratakan secara vertikal oleh garis besar teksnya.

Anda tahu tata letak memiliki perataan yang baik saat:

• Sangat mudah untuk memindai secara horizontal dan vertikal.
• Ini memiliki tampilan visual yang sederhana.

Perataan label

Aturan perataan umum berlaku untuk label kontrol, tetapi ini adalah masalah umum yang layak mendapat perhatian khusus. Perataan label memiliki tujuan berikut:

• Kemudahan dalam pemindaian vertikal untuk menemukan kontrol yang tepat.
• Kemudahan dalam pemindaian horizontal untuk mengaitkan label dengan kontrolnya.
• Kemudahan dalam pelokalan, menangani label yang berbeda panjangnya di seluruh bahasa.
• Bekerja dengan baik dengan campuran panjang label yang berbeda.
• Memanfaatkan ruang yang tersedia secara efisien sambil menghindari teks terpotong.

Tujuan keseluruhan adalah untuk mengurangi jumlah pergerakan mata yang diperlukan untuk menemukan apa yang kemungkinan dicari pengguna, tetapi sifat kontrol dan apa yang dicari pengguna tergantung pada konteksnya.

Ada empat gaya penempatan dan perataan label umum, masing-masing dengan manfaatnya:

• Label rata kiri di atas kontrol
• Label kiri-dibenarkan di sebelah kiri kontrol
• Label kiri-dibenarkan di sebelah kiri kontrol, kontrol ragged di sebelah kiri
• Label kanan-dibenarkan di sebelah kiri kontrol

Label yang dibenarkan kiri di atas kontrol

Gaya ini adalah yang paling mudah untuk dilokalkan karena tata letak tidak bergantung pada panjang label, tetapi membutuhkan ruang vertikal paling banyak.

Gaya ini mengambil ruang paling vertikal tetapi paling mudah untuk dilokalkan. Ini adalah pilihan yang lebih baik untuk melabeli sebagian besar kontrol interaktif.

Paling baik digunakan saat:

• Kontrol yang diberi label bersifat interaktif (bukan hanya teks).
• UI akan dilokalkan. Gaya ini sering memberi ruang untuk menggandakan atau bahkan tiga kali lipat panjang label.
• UI menggunakan teknologi tata letak tetap (seperti Win32).
• Ada sepuluh atau lebih sedikit kontrol. Dengan lebih banyak kontrol, label sulit dipindai.
• Ada cukup ruang vertikal untuk mengakomodasi label.
• Tata letak harus berupa bentuk bebas, bukan hanya kolom.

Label kiri-dibenarkan di sebelah kiri kontrol

Gaya ini adalah yang paling mudah dipindai secara vertikal dan juga berfungsi dengan baik ketika label sangat berbeda panjangnya, tetapi lebih sulit untuk mengaitkan label dengan kontrolnya. Gaya ini dapat menggunakan label multibaris jika perlu.

Gaya ini bekerja dengan baik. Namun, ada dua kolom tetapi secara visual terlihat seperti ada empat yang membuat data tampak lebih kompleks.

Paling baik digunakan saat:

• Pengguna cenderung memindai secara vertikal untuk menemukan label tertentu.
• Pengguna tidak mungkin membaca label dan kontrol dengan cara kiri-ke-kanan, atas-ke-bawah.
• Ada cukup ruang horizontal untuk mengakomodasi label.
• Panjang label bervariasi secara signifikan.
• Ada banyak kontrol, seperti dengan formulir.
• Ada beberapa kolom. Secara visual label dan kontrol muncul sebagai dua kolom individual.

Label kiri-dibenarkan di sebelah kiri kontrol, kontrol dilapisi di kiri

Gaya ini memudahkan untuk memindai label secara vertikal dan label dan kontrol secara horizontal, dan sangat hemat ruang; tetapi lebih sulit untuk memindai kontrol secara vertikal. Kontrol dibenarkan dengan benar untuk memanfaatkan ruang yang tersedia sepenuhnya.

Gaya ini ringkas dan mudah dibaca, tetapi sulit untuk memindai kontrol secara vertikal.

Paling baik digunakan saat:

• UI menggunakan teknologi tata letak variabel (seperti Windows Presentation Foundation).
• Pengguna cenderung memindai secara vertikal untuk menemukan label tertentu.
• Pengguna cenderung membaca label dan kontrol dengan cara kiri-ke-kanan, atas-ke-bawah.
• Pengguna tidak mungkin memindai kontrol secara vertikal.
• Panjang teks kontrol bervariasi dan kemungkinan akan terpotong jika gaya lain digunakan.
• Kontrol bersifat baca-saja, seperti kotak teks baca saja. Untuk kontrol lain, perataan ini akan terlihat ceroboh. Namun, kontrol mungkin dapat diedit saat diklik.
• Ada banyak kolom, tetapi beberapa kontrol dalam kolom.

Label kanan-dibenarkan di sebelah kiri kontrol

Gaya ini adalah yang paling mudah dibaca secara horizontal untuk mengaitkan label dengan kontrolnya, tetapi sulit untuk memindai label secara vertikal dan tidak berfungsi dengan baik ketika labelList dengan label dan kontrol yang diindentasi sangat berbeda panjangnya.

daftar

Gaya ini memungkinkan pemindaian vertikal kontrol yang mudah, tetapi membuatnya sulit untuk memindai label secara vertikal.

Paling baik digunakan saat:

• Pengguna cenderung membaca label dan kontrol dengan cara kiri-ke-kanan, atas-ke-bawah.
• Pengguna tidak mungkin memindai secara vertikal untuk menemukan label tertentu, mungkin karena:
  • Ada beberapa kontrol.
  • Label terkenal.
  • Kontrol sebagian besar cukup jelas dan jarang kosong (mungkin memiliki nilai default untuk mencegah kontrol kosong).
• Ada cukup ruang horizontal untuk mengakomodasi label.
• Panjang label tidak bervariasi secara signifikan.
• Ada banyak kolom. Secara visual label dan kontrol muncul sebagai kolom tunggal.

Namun, sebelum mengadopsi salah satu gaya ini, pertimbangkan dua faktor lagi:

• Lebih suka gaya yang dapat Anda gunakan secara konsisten di seluruh program Anda.
• Label yang dibenarkan kiri baik kontrol di atas di sebelah kiri kontrol adalah gaya yang paling umum, sehingga harus diberikan preferensi.

Neraca

Jendela atau halaman memiliki keseimbangan saat kontennya tampak didistribusikan secara merata di seluruh permukaannya. Jika permukaan secara fisik memiliki bobot yang sama seperti yang ada secara visual, tata letak seimbang tidak akan berujung ke satu sisi.

Masalah keseimbangan yang paling umum adalah memiliki terlalu banyak konten di sisi kiri jendela atau halaman. Anda dapat membuat keseimbangan dengan cara berikut:

• Menggunakan margin yang lebih besar di sisi kiri daripada kanan.
• Menempatkan elemen UI yang digunakan untuk menyelesaikan tugas di sebelah kanan.
• Menempatkan elemen UI yang digunakan di seluruh tugas di tengah.
• Memperpanjang kontrol yang dapat diubah ukurannya atau multibaris.
• Menggunakan penyelarasan tengah secara strategis.

kanan

Tata letak halaman wizard yang seimbang ini memperlihatkan margin kiri yang lebih besar dari kanan untuk meningkatkan keseimbangan.

Jika teknik ini tidak mencapai keseimbangan, pertimbangkan untuk mengurangi lebar jendela atau halaman agar lebih sesuai dengan kontennya.

Untuk permukaan yang dapat diubah ukurannya, jangan pusatkan konten hanya untuk mencapai keseimbangan. Sebaliknya, pertahankan asal kiri atas tetap, tentukan area permukaan maksimum, dan seimbangkan konten dalam ruang yang digunakan.

Grids

Kisi adalah sistem penyelarasan yang mendasar yang tidak terlihat. Kisi bisa simetris, tetapi kisi asimetris juga berfungsi. Saat digunakan oleh satu jendela atau halaman, kisi membantu menata konten dalam permukaan. Saat digunakan kembali, kisi membuat tata letak yang konsisten di seluruh permukaan.

Jumlah garis kisi memengaruhi persepsi kompleksitas visual. Tata letak dengan lebih sedikit garis kisi tampak lebih sederhana daripada tata letak dengan lebih banyak garis kisi.

Kompleks secara visual:

Sederhana secara visual:

Garis kisi yang tidak perlu menciptakan kompleksitas visual.

Anda tahu tata letak menggunakan kisi secara efektif ketika:

• Windows atau halaman dengan konten atau fungsi serupa memiliki tata letak yang sama.
• Elemen desain berulang muncul di lokasi serupa di seluruh jendela dan halaman.
• Tidak ada garis kisi perataan vertikal dan horizontal yang tidak perlu.

Kesederhanaan visual

Kesederhanaan visual adalah persepsi bahwa tata letak tidak lebih rumit daripada yang diperlukan.

Anda tahu tata letak memiliki kesederhanaan visual saat:

• Menghilangkan lapisan krom jendela yang tidak perlu.
• Menyajikan konten menggunakan paling banyak tujuh grup yang mudah diidentifikasi.
• Menggunakan pengelompokan ringan, seperti tata letak dan pemisah alih-alih kotak grup.
• Menggunakan kontrol ringan, seperti tautan alih-alih tombol perintah untuk perintah sekunder, dan daftar drop-down alih-alih daftar untuk pilihan.
• Mengurangi jumlah garis kisi perataan vertikal dan horizontal.
• Mengurangi jumlah ukuran kontrol, dengan, misalnya, hanya menggunakan satu atau dua lebar tombol perintah pada permukaan.
• Menggunakan pengungkapan progresif untuk menyembunyikan elemen UI hingga diperlukan.
• Menggunakan ruang yang cukup sehingga jendela atau halaman tidak terasa sempit.
• Ukuran jendela dan kontrol dengan tepat untuk menghilangkan pengguliran yang tidak perlu.
• Menggunakan font tunggal dengan sejumlah kecil ukuran dan warna teks.

Sebagai aturan umum, jika elemen tata letak dapat dihilangkan tanpa merusak efektivitas UI, mungkin seharusnya.

Pedoman

Resolusi layar dan dpi

• Mendukung resolusi efektif Windows minimum 800x600 piksel. Untuk UI penting yang harus berfungsi dalam mode aman, dukung resolusi efektif 640x480 piksel. Pastikan untuk memperhitungkan ruang yang digunakan oleh taskbar dengan mengirimkan 48 piksel vertikal relatif untuk jendela yang ditampilkan dengan taskbar.
• Optimalkan tata letak jendela yang dapat diubah ukurannya untuk resolusi efektif 1024x768 piksel. Ubah ukuran jendela ini secara otomatis untuk resolusi layar yang lebih rendah dengan cara yang masih berfungsi.
• Pastikan untuk menguji jendela Anda dalam 96 titik per inci (dpi) (pada 800x600 piksel), 120 dpi (pada 1024x768 piksel), dan 144 dpi (pada mode 1200x900 piksel). Periksa masalah tata letak, seperti kliping kontrol, teks, dan jendela, dan peregangan ikon dan bitmap.
• Untuk program dengan skenario sentuhan dan penggunaan seluler, optimalkan untuk 120 dpi. Layar dpi tinggi saat ini lazim disentuh dan PC seluler.

Ukuran jendela

• Pilih ukuran jendela default yang sesuai untuk isinya. Jangan takut untuk menggunakan ukuran jendela awal yang lebih besar jika Anda dapat menggunakan ruang secara efektif.
• Gunakan tinggi seimbang untuk rasio aspek lebar. Rasio aspek antara 3:5 dan 5:3 lebih disukai, meskipun rasio aspek 1:3 dapat digunakan untuk kotak dialog pesan (seperti kesalahan dan peringatan).
• Gunakan jendela yang dapat diubah ukurannya kapan pun praktis untuk menghindari bilah gulir dan data terpotong. Windows dengan konten dinamis, dokumen, gambar, daftar, dan pohon mendapat manfaat paling besar dari jendela yang dapat diubah ukurannya.
• Untuk dokumen teks, pertimbangkan panjang garis maksimum 80 karakter untuk membuat teks mudah dibaca. (Karakter mencakup huruf, tanda baca, dan spasi.)
• Jendela berukuran tetap:
  • Jendela berukuran tetap harus sepenuhnya terlihat dan berukuran agar pas dalam area kerja.
• Jendela yang dapat diubah:

  • Jendela yang Dapat Diubah Ukurannya dapat dioptimalkan untuk resolusi yang lebih tinggi, tetapi ukurannya turun sesuai kebutuhan pada waktu tampilan ke resolusi layar aktual.

  • Ukuran jendela yang semakin besar harus menunjukkan informasi lebih lanjut secara progresif. Pastikan setidaknya satu bagian atau kontrol jendela memiliki konten yang dapat diubah ukurannya.

  • Pertahankan asal kiri atas konten tetap sebagai jendela diubah ukurannya. Jangan pindahkan asal untuk menyeimbangkan konten saat ukuran jendela berubah.

  • Atur ukuran konten maksimum jika konten dapat terlalu direntangkan terlalu lebar. Jika konten menjadi tidak kuat, jangan ubah ukuran area konten di luar lebar maksimumnya atau ubah asal konten saat jendela diubah ukurannya lebih besar. Sebagai gantinya, pertahankan lebar maksimum dan asal kiri atas tetap.

  • Atur ukuran jendela minimum jika ada ukuran di bawah ini yang kontennya tidak lagi dapat digunakan. Untuk kontrol yang dapat diubah ukurannya, atur ukuran elemen minimum yang dapat diubah ukurannya ke ukuran fungsional terkecilnya, seperti lebar kolom fungsional minimum dalam tampilan daftar. Elemen UI opsional harus dihapus sepenuhnya.

  • Pertimbangkan untuk mengubah presentasi agar konten dapat digunakan dengan ukuran yang lebih kecil.

    

    Dalam contoh ini, Windows Media Player mengubah formatnya ketika jendela menjadi terlalu kecil untuk format standar.

Ukuran kontrol

• Buat semua kontrol interaktif setidaknya relatif 16x16 piksel. Melakukannya berfungsi dengan baik untuk semua perangkat input, termasuk Tablet Windows dan Teknologi Sentuh.

• Kontrol ukuran untuk menghindari data terpotong. Jangan memotong data yang harus dibaca untuk melakukan tugas. Ukuran kolom tampilan daftar untuk menghindari data terpotong.

• Kontrol ukuran untuk menghilangkan pengguliran yang tidak perlu. Buat kontrol sedikit lebih besar jika melakukannya menghilangkan bilah gulir. Harus ada beberapa bilah gulir vertikal dan tidak ada bilah gulir horizontal yang tidak perlu.

  

  Dalam contoh ini, daftar drop-down berukuran untuk menghilangkan bilah gulir.

• Kurangi jumlah ukuran kontrol pada permukaan. Lebih suka menggunakan ukuran kontrol standar yang direkomendasikan dan jika perlu, gunakan beberapa kontrol yang lebih besar atau lebih kecil secara konsisten. Cobalah untuk menggunakan lebar tunggal untuk kotak daftar dan tampilan pohon, dan tidak lebih dari tiga lebar untuk tombol perintah dan daftar drop-down. Namun, lebar kotak teks dan kotak kombo harus menyarankan panjang input terpanjang atau yang diharapkan.

  

  Dalam contoh ini, satu kotak daftar dan ukuran tombol perintah digunakan secara konsisten.

• Untuk kontrol yang berukuran berdasarkan teksnya, sertakan 30 persen tambahan (hingga 200 persen untuk teks yang lebih pendek) untuk teks apa pun yang akan dilokalkan. Pedoman ini mengasumsikan tata letak dirancang menggunakan teks bahasa Inggris. Perhatikan juga bahwa pedoman ini mengacu pada teks yang dilokalkan, bukan angka.

• Perluas kontrol teks statis, kotak centang, dan tombol radio ke lebar maksimum yang akan pas di tata letak. Melakukannya menghindari pemotongan dari teks panjang variabel dan pelokalan.

  Salah:

  teks parsial

  Dalam contoh ini, teks kontrol tidak perlu dipotong.

Penspasian kontrol

• Jika kontrol tidak menyentuh, memiliki setidaknya 3 DPU (5 piksel relatif) ruang di antaranya. Jika tidak, pengguna dapat mengklik ruang tidak aktif di antara kontrol. Karena mengklik ruang tidak aktif tidak memiliki hasil atau umpan balik visual, pengguna sering kali tidak yakin apa yang salah.

Penempatan

• Susun elemen UI dalam permukaan untuk mengalir secara alami dalam urutan kiri-ke-kanan, atas-ke-bawah (dalam budaya Barat). Penempatan elemen UI menyampaikan hubungan mereka dan harus mencerminkan langkah-langkah untuk melakukan tugas.
• Tempatkan elemen UI yang memulai tugas di sudut kiri atas atau tengah atas. Berikan elemen UI yang harus dilihat pengguna terlebih dahulu penekanan visual terbesar.
• Menempatkan elemen UI yang menyelesaikan tugas di sudut kanan bawah.
• Tempatkan elemen UI terkait bersama-sama, dan pisahkan elemen yang tidak terkait.
• Tempatkan langkah-langkah yang diperlukan dalam alur utama.
• Tempatkan langkah opsional di luar alur utama, mungkin ditolak dengan menggunakan latar belakang yang sesuai atau pengungkapan progresif.
• Tempatkan elemen yang sering digunakan sebelum elemen yang jarang digunakan di jalur pemindaian.

Fokus

• Pilih satu elemen UI yang perlu dilihat pengguna terlebih dahulu untuk menjadi titik fokus. Titik fokus harus menjadi sesuatu yang penting yang perlu ditemukan dan dipahami pengguna dengan cepat.
• Tempatkan titik fokus di sudut kiri atas atau tengah atas.
• Berikan titik fokus penekanan visual terbesar, seperti teks menonjol, pemilihan default, atau fokus input awal.

Alignment

• Biasanya, gunakan perataan kiri.
• Gunakan perataan kanan untuk data numerik, terutama kolom data numerik.
• Gunakan perataan kanan untuk tombol penerapan, serta kontrol yang selaras dengan tepi jendela kanan.
• Gunakan perataan tengah saat perataan kiri atau kanan tidak pantas atau tampak tidak seimbang.
• Saat meratakan kontrol secara vertikal dengan teks, ratakan garis besar teks untuk memberikan alur baca horizontal yang halus.
• Untuk perataan label, lihat bagian perataan Label dalam konsep Desain.

Aksesibilitas

• Jangan gunakan tata letak sebagai satu-satunya cara untuk menyampaikan informasi penting tentang UI. Pengguna yang memiliki gangguan visual mungkin tidak dapat menafsirkan presentasi ini. Misalnya, pastikan bahwa label kontrol mengomunikasikan hubungan mereka dengan item lain.

• Jangan sematkan kontrol subordinat dalam label kontrol untuk membuat kalimat atau frasa. Asosiasi tersebut didasarkan murni pada tata letak dan tidak ditangani dengan baik oleh navigasi keyboard atau teknologi bantuan aksesibilitas. Selain itu, teknik ini tidak dapat dilokalkan karena struktur kalimat bervariasi menurut bahasa.

  Salah:

  

  Dalam contoh ini, kotak teks salah ditempatkan dalam label kotak centang.

  Benar:

  

  Di sini, kotak teks ditempatkan setelah label kotak centang.

• Membuat pengelompokan dapat diakses. Grup yang ditentukan oleh panel jendela, kotak grup, pemisah, label teks, dan agregator secara otomatis ditangani oleh bantuan aksesibilitas. Namun, grup yang ditentukan hanya oleh penempatan dan latar belakang tidak, dan harus didefinisikan secara terprogram untuk aksesibilitas.

Untuk panduan selengkapnya, lihat Aksesibilitas.

Ukuran dan penspasian yang direkomendasikan

ukuran Kontrol

Tabel berikut mencantumkan ukuran yang direkomendasikan (lebar x tinggi, atau tinggi jika satu angka) untuk elemen UI umum (untuk 9 pt. Segoe UI pada 96 dpi). Lebar berdasarkan item terpanjang dalam bahasa Inggris menambahkan 30 persen untuk pelokalan (hingga 200 persen untuk teks yang lebih pendek) untuk teks apa pun (tetapi bukan angka) yang akan dilokalkan.

Contoh	Menguasai	Unit dialog	Piksel relatif
	Kotak centang	10	17
	Kotak kombo	lebar item terpanjang + 30% x 14	lebar item terpanjang + 30% x 23
	Tombol perintah	50 x 14	75 x 23
	Tautan perintah	25 (satu baris) atau 35 (dua baris)	41 (satu baris) atau 58 (dua baris)
	Daftar drop-down	lebar data terlama yang valid + 30% x 14	lebar item terpanjang + 30% x 23
	Kotak daftar	lebar item terpanjang + 30% x jumlah item integral (minimum 3 item)
	Tampilan daftar	lebar kolom yang menghindari data terpotong x jumlah integral item
	Bilah kemajuan	107 atau 237 x 8	160 atau 355 x 15
	Tombol radio	10	17
	Slider	15	24
	Teks (statis)	8	13
	Kotak teks	lebar input terpanjang atau diharapkan + 30% x 14 (satu baris) + 10 untuk setiap baris tambahan	lebar data terlama yang valid + 30% x 23 piksel relatif (satu baris) + 16 untuk setiap baris tambahan
	Tampilan pohon	lebar item terpanjang + 30% x jumlah item integral (minimum 5 item)

Penspasian

Tabel berikut mencantumkan spasi yang direkomendasikan antara elemen UI umum (untuk 9 pt. Segoe UI pada 96 dpi).

	Elemen	Unit dialog	Piksel relatif
gambar	Margin kotak dialog	7 di semua sisi	11 di semua sisi
gambar	Antara label teks dan kontrol terkaitnya (misalnya, kotak teks dan kotak daftar)	3	5
gambar	Antara kontrol terkait	4	7
	Antara kontrol yang tidak terkait	7	11
gambar	Kontrol pertama dalam kotak grup	11 turun dari bagian atas kotak grup; ratakan secara vertikal ke judul kotak grup	16 turun dari bagian atas kotak grup; ratakan secara vertikal ke judul kotak grup
	Antara kontrol dalam kotak grup	4	7
gambar	Antara tombol yang disusun secara horizontal atau vertikal	4	7
Gambar	Kontrol terakhir dalam kotak grup	7 di atas bagian bawah kotak grup	11 di atas bagian bawah kotak grup
	Dari tepi kiri kotak grup	6	9
Gambar	Label teks di samping kontrol	3 turun dari bagian atas kontrol	5 turun dari bagian atas kontrol
gambar	Di antara paragraf teks	7	11
	Ruang terkecil antara kontrol interaktif	3 atau tanpa spasi	5 atau tanpa spasi
	Ruang terkecil antara kontrol non-interaktif dan kontrol lainnya	2	3