Layout

Catatan

Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kita saat ini.

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.
• Aliran. 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 secara logis memiliki hubungan visual yang jelas. Item terkait dikelompokkan bersama; 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 membantu, jendela dapat diubah ukurannya dan tata letak kontennya efektif tidak peduli seberapa besar atau kecil permukaannya.
• Keseimbangan. 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 penampilan tata letak.
• Konsistensi. Jendela atau halaman serupa menggunakan tata letak yang sama, 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 (DSU) 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 terbenam 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 terlebih dahulu 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 berfokus 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 untuk 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 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 menyajikan 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 kalanya Anda perlu menekankan atau membatalkan penekanan 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 spanduk.

• 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 membatalkan penekanan elemen UI sekunder:

• Letakkan elemen UI sekunder di luar jalur pemindaian.

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

• Gunakan kontrol yang tidak menarik perhatian, seperti tautan tugas, bukan 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 mende-menekankan 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 terlalu sedikit ruang dan jendela terasa sempit, tidak nyaman, dan mengintimidasi, dan sulit digunakan jika membutuhkan pengguliran dan manipulasi lain untuk digunakan.

Salah:

Dalam contoh ini, jendela terlalu kecil untuk kontennya.

Meskipun antarmuka pengguna kritis harus sesuai dengan resolusi efektif minimum yang didukung, jangan berasumsi bahwa menggunakan ruang layar secara efektif berarti bahwa jendela harus sesingkat mungkin. Tata letak yang efektif memiliki rasa hormat pada 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 ketika:

• Windows, panel jendela, dan kontrol tidak harus diubah ukurannya agar dapat digunakan. Jika hal pertama yang dilakukan pengguna adalah mengubah ukuran jendela, panel, atau kontrol, ukurannya salah.
• Data tidak terpotok. Sebagian besar data dalam tampilan daftar dan tampilan pohon tidak memiliki elipsis, dan data dalam kontrol lain tidak diklip kecuali panjang datanya sangat besar. Data yang harus dibaca untuk melakukan tugas tidak boleh dipotok.
• 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 Ukuran kontrol serta ukuran yang direkomendasikan dalam artikel pedoman kontrol tertentu.

Hukum Fitts menyatakan bahwa semakin kecil target, semakin lama waktu yang diperlukan 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 putar 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 Penspasian.

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, mengakibatkan pengguna mengetuk di luar target yang dimaksudkan. Ketika kontrol interaktif ditempatkan sangat berdekatan tetapi sebenarnya tidak 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 jaraknya terlalu dekat, 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 DLA (5 piksel relatif) ruang di antaranya.

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 terpisah.
• 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 yang dapat diubah, tetapi jendela dengan konten yang dapat diubah besar harus dapat diubah. 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 paling diuntungkan dari jendela yang dapat diubah.

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

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

Teks menjadi sulit dibaca saat panjang baris 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 pembacaan sulit.

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 mereka harus diberi ukuran minimum atau beberapa elemen harus dihapus sepenuhnya.

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, Pemutar Media Windows mengubah formatnya ketika jendela menjadi terlalu kecil untuk format standar.

Fokus

Tata letak memiliki fokus ketika ada satu tempat yang jelas untuk dilihat 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 berupa 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.

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 paling visual, tetapi bukan titik fokus yang dimaksudkan. Pengguna mungkin terjebak melihat tombol ini mencoba mencari tahu apa yang harus dilakukan dengannya.

Salah:

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

Alur

Tata letak memiliki alur ketika pengguna dipandu dengan lancar dan alami oleh jalur yang jelas melalui permukaannya, menemukan elemen UI dalam urutan yang sesuai untuk penggunaannya. 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 ada di alur utama.
• Langkah opsional berada di luar alur utama, mungkin tidak ditekankan 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 ketika 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):

• Tatak 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 menciptakan hubungan visual antara kontrol yang sangat terkait.

  

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

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

  

  Dalam contoh ini, kotak grup mengelilingi dan memberi label 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 termuda yang melakukan pekerjaan dengan baik adalah pilihan terbaik. Untuk informasi selengkapnya, lihat Kotak Grup, Tab, Pemisah, dan Latar Belakang.

Terlepas dari gaya pengelompokan, Anda bisa menggunakan inden untuk memperlihatkan hubungan kontrol dalam grup. Kontrol yang serekan satu sama lain harus selaras kiri, dan kontrol dependen diindentasi 12 DLUs atau 18 piksel relatif.

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

Anda tahu tata letak memiliki pengelompokan yang baik ketika:

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

Penjajaran

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 membaca kiri-ke-kanan, penyelarasan 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 benar karena ditempatkan pada tepi jendela kanan.

Perataan tengah

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

Dalam contoh ini, kontrol pemutar media berpusat 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

Bagian atas elemen

Karena urutan membaca dari 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 ketika:

• 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 tertentu. 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 yang terpotong.

Tujuan keseluruhan adalah untuk mengurangi jumlah pergerakan mata yang diperlukan untuk menemukan apa yang mungkin 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 rata kiri di sebelah kiri kontrol
• Label kiri di sebelah kiri kontrol, kontrol yang dikakukan di sebelah kiri
• Label kanan kanan di sebelah kiri kontrol

Label rata kiri di atas kontrol

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

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 memberikan ruang untuk dua kali lipat atau bahkan tiga kali lipat panjang label.
• UI menggunakan teknologi tata letak tetap (seperti Win32).
• Ada sepuluh atau lebih sedikit kontrol. Dengan kontrol yang lebih banyak, label sulit dipindai.
• Ada ruang vertikal yang cukup untuk mengakomodasi label.
• Tata letak harus berupa bentuk bebas, bukan hanya kolom.

Label rata kiri di sebelah kiri kontrol

Gaya ini 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, dari 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 di sebelah kiri kontrol, kontrol yang dikakukan di sebelah 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 sepenuhnya ruang yang tersedia.

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 kanan 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 saat labelList dengan label dan kontrol yang diindentasi sangat berbeda panjangnya.

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:

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

Saldo

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 yang 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 saldo 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.

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

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

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

Grid

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 mengatur 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 garis kisi yang lebih banyak.

Kompleks secara visual:

Sederhana secara visual:

Garis kisi yang tidak perlu menciptakan kompleksitas visual.

Anda tahu tata letak menggunakan kisi secara efektif saat:

• Windows atau halaman dengan konten atau fungsi serupa memiliki tata letak yang sama.
• Elemen desain berulang muncul di lokasi yang sama 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 ketika:

• Menghilangkan lapisan chrome 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 memadai 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, itu mungkin seharusnya.

Panduan

Resolusi layar dan dpi

• Mendukung resolusi efektif Windows minimum 800x600 piksel. Untuk UI penting yang harus berfungsi dalam mode aman, mendukung resolusi efektif 640x480 piksel. Pastikan untuk mempertangungjawabkan ruang yang digunakan oleh taskbar dengan menyimpan 48 piksel relatif vertikal 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 mode 1024x768 piksel), dan 144 dpi (pada 1200x900 piksel). Periksa masalah tata letak, seperti kliping kontrol, teks, dan jendela, dan peregangan ikon dan bitmap.
• Untuk program dengan skenario sentuh dan penggunaan seluler, optimalkan untuk 120 dpi. Layar dpi tinggi saat ini lazim di PC sentuh dan 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 rasio aspek tinggi hingga lebar yang seimbang. 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 yang terpotong. Windows dengan konten dinamis, dokumen, gambar, daftar, dan pohon paling diuntungkan dari jendela yang dapat diubah.
• Untuk dokumen teks, pertimbangkan panjang baris 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 berukuran 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 isi yang dapat diubah ukurannya.

  • Pertahankan asal kiri atas konten tetap saat 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 berat, 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 pada ukuran yang lebih kecil.

    

    Dalam contoh ini, Pemutar Media Windows 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 yang terpotong. Jangan memotong data yang harus dibaca untuk melakukan tugas. Ukuran kolom tampilan daftar untuk menghindari data yang 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 bila perlu, gunakan beberapa kontrol yang lebih besar atau lebih kecil berukuran konsisten. Coba gunakan 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 tambahan 30 persen (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:

  

  Dalam contoh ini, teks kontrol tidak perlu dipotong.

Penspasian kontrol

• Jika kontrol tidak menyentuh, memiliki setidaknya 3 DLA (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.
• Tempatkan 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-langkah opsional di luar alur utama, mungkin tidak ditekankan 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.
• Beri titik fokus penekanan visual terbesar, seperti teks menonjol, pilihan default, atau fokus input awal.

Penjajaran

• Biasanya, gunakan perataan kiri.
• Gunakan perataan yang tepat 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 sesuai 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 alat bantu aksesibilitas. Namun, grup yang ditentukan hanya oleh penempatan dan latar belakang tidak, dan harus ditentukan secara terprogram untuk aksesibilitas.

Untuk panduan selengkapnya, lihat Aksesibilitas.

Ukuran dan penspasian yang direkomendasikan

Mengontrol ukuran

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	Kontrol	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 tarik turun	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 terpotok x jumlah item integral
	Bilah kemajuan	107 atau 237 x 8	160 atau 355 x 15
	Tombol radio	10	17
	Penggeser	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 terpanjang 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)

Jarak

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

	Elemen	Unit dialog	Piksel relatif
	Margin kotak dialog	7 di semua sisi	11 di semua sisi
	Antara label teks dan kontrol terkaitnya (misalnya, kotak teks dan kotak daftar)	3	5
	Antara kontrol terkait	4	7
	Antara kontrol yang tidak terkait	7	11
	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
	Antara tombol yang disusun secara horizontal atau vertikal	4	7
	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
	Label teks di samping kontrol	3 turun dari atas kontrol	5 turun dari atas kontrol
	Di antara paragraf teks	7	11
	Ruang terkecil di antara kontrol interaktif	3 atau tanpa spasi	5 atau tanpa spasi
	Ruang terkecil antara kontrol non-interaktif dan kontrol lainnya	2	3