BAB 7 GUIDELINE - TUJUAN AKHIR GUIDELINE - PETUNJUK PENGGUNAAN GUIDELINE - CONTOH GUIDELINE

BAB 7 GUIDELINE - TUJUAN AKHIR GUIDELINE - PETUNJUK PENGGUNAAN GUIDELINE - CONTOH GUIDELINE Interaksi Manusia dan Komputer Membangun UI yang Konsisten 54

BAB 7 GUIDELINE Guideline Goals Guideline style harus dibuat berdasarkan tujuan yang spesifik. Ada beberapa alasan dalam pembuatan guideline untuk membangun style UI : Membuat tampilan yang konsisten. Guideline sebaiknya menawarkan interface yang memiliki tampilan konsisten supaya mudah dipahami dan digunakan. Element-elemen UI harus tampak seragam. Membuat image perusahaan konsisten. Guideline harus membantu memastikan bahwa program-program berbeda yang dibuat oleh perusahaan yang sama juga mempromosikan image yang sama. Menyederhanakan tampilan dan perilaku. Guideline harus men-support interface yang menghindari kompleksitas visual yang tidak perlu dan perilaku yang non standard. Menyederhanakan usaha pengembangan aplikasi. Guideline harus membuat pengembangan UI lebih mudah bagi programmer, sehingga tidak harus memahami secara detail atau membuat banyak keputusan. Tujuan yang terakhir sangat penting. Guideline yang efektif harus membuat pekerjaan programmer lebih mudah, tidak semakin sulit. Guideline harus membantu programmer untuk mengerjakan pekerjaannya, tidak mengganggu pekerjaan. Implementasi yang sulit suatu style guideline seharusnya tidak perlu terjadi, karena progammer harus tahu kapan menerapkan guideline dan kapan tidak perlu diterapkan. Selanjutnya, eksistensi guideline tidak boleh menjadikan programmer berhenti berpikir. Menerapkan style guideline yang tidak cocok dengan situasi akan menyebabkan hasil kurang baik. Petunjuk membuat Guideline Beberapa hal yang perlu diperhatikan dan dipertimbangkan dalam membuat style guideline suatu User Interface: Interaksi Manusia dan Komputer Membangun UI yang Konsisten 55

Menghindari mengulang apa yang sudah ada dalam standard. Standard yang dimaksud disini adalah style guideline yang dikeluarkan oleh microsoft (Designing for the User Experience), artinya guideline yang kita buat bukan mengganti, tetapi melengkapi standard yang ada. Mungkin beberapa kesamaan antara guideline yang kita buat dengan standard masih bisa diterima sejauh bertujuan untuk memperbaiki. Hindari membuat guideline yang sembarangan. Contoh, jangan membuat pernyataan jangan gunakan warna kuning, tetapi beri penjelasan yang masuk akal misalnya hindari warna kuning cerah sebagai warna foreground, karena kuning merupakan warna yang membingungkan dan sulit dibedakan pada background warna putih. Usahakan membuat guideline yang mudah diikuti. Berikan banyak screen shot dan contoh untuk membuat guideline menjadi jelas dan menarik. Jika ada contoh baik dan buruk, pastikan contoh yang buruk ditandai. Indikasikan dengan jelas guideline yang harus diikuti dan yang direkomendasikan. Usahakan membuat guideline yang singkat. Guideline yang panjang dan membosankan sangat tidak efektif, karena kemungkinan kecil akan digunakan. Pastikan guideline sesuai dengan tool yang digunakan. Contoh, guideline dialog box untuk programmer Microsoft Visual C++ menggunakan satuan units, sedangkan guideline yang sama untuk programmer Microsoft Visual Basic menggunakan twips. Hindari guideline yang membahas Windows requirements. Contoh, jangan memasukkan guideline seperti, "Child windows harus ditutup saat parent window ditutup." Dalam windows, hal ini selalu terjadi tidak ada pilihan. Usahakan fokus ke guideline yang riil, bukan prinsip desain UI yang umum. Sample User Interface Guidelines Di bawah merupakan daftar contoh guideline yang bisa jadi bahan pertimbangan dalam desain UI. Item yang ditandai * menunjukkan bahwa aturan tersebut harus diikuti, yang lain hanya sebagai petunjuk (hanya bersifat direkomendasikan). Bagaimanapun juga, tidak aturan yang absolut dalam desain UI. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 56

Penampilan Secara Umum (General appearance) Gunakan konsistensi Tampilan yang konsisten akan membuat UI lebih mudah dipahami dan digunakan. Elemen-elemen UI harus tampak seragam seperti dibuat oleh satu desainer. Gunakan penyusunan dan aliran yang umum Dalam budaya kita, orang membaca dari kiri ke kanan dan dari atas ke bawah, jadi tempatkan informasi yang penting di atas dan sebelah kiri. Sudut kiri atas menerima perhatian lebih. Gunakan perataan Gunakan perataan kiri untuk membuat elemen UI lebih mudah dilihat. Gunakan perataan kanan untuk teks numerik. Hindari perataan kanan dan tengah untuk teks non-numerik. Tidak suatu keharusan untuk menengahkan atau membuat simetris suatu teks. Lebih baik membuat white space pada sisi kanan dan bawah. Gunakan grouping Kelompokkan elemen UI yang berhubungan untuk menunjukkan keterkaitan (relationship). Tampilkan informasi terkait secara bersamaan. Gunakan white space, group box, line dan label, atau separator lain untuk mengelompokkan elemen UI yang terkait. Gunakan penekanan Usahakan menarik perhatian ke elemen UI yang perlu dilihat pertama kali dengan menggunakan fokus, letak, grouping, hirarki, enabling/disabling, ukuran, warna atau atribut huruf. Usahakan secara visual memberi indikasi pada user apa yang harus dilakukan. Gunakan petunjuk visual Usahakan menggunakan sizing dan spacing untuk mengindikasikan perbedaan/persamaan elemen UI. Gunakan white space Gunakan white space untuk membentuk ruang yang membuat tata letak window lebih mudah dipahami dan lebih nyaman dilihat. Hindari terlalu banyak white space. Jika mungkin, buat window lebih kecil. Hindari in-efisiensi Jangan letakkan nama produk atau perusahaan dan logo di semua tempat. Pada umumnya, logo dan nama perusahaan/produk hanya muncul di splash screen atau kotak dialog "about me". Perhatikan satuan pengukuran Gunakan system metric untuk menetapkan ukuran elemen UI, hindari satuan pengukuran dengan menggunakan pixel. Pertimbangkan menggunakan template Template akan membantu kita mendapatkan konsistensi antara windows yang berbeda. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 57

Perhatikan dialog box kedua di bawah (bandingkan dengan dialog box pertama), memiliki aliran dari kiri ke kanan, dari atas ke bawah, label rata yang rata kiri mudah di lihat, edit box yang diratakan dan terukur memberikan kesan rapi dan tampak seimbang. Affordansi visual Windows Affordansi berhubungan dengan kemampuan user untuk menetapkan bagaimana menggunakan suatu object hanya dengan melihat petunjuk visualnya. Daftar berikut merupakan affordansi visual yang digunakan dalam windows : Raised item (item yang menonjol) dapat di click. Item yang menjadi highlighted (misal berubah warna atau membentuk hyperlink) saat cursor mouse melewatinya, dapat di click. Recessed item (lawan dari raised item) tidak dapat di click. Item dengan background putih dengan flashing vertical bar dapat di edit. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 58

Item dengan background abu-abu tidak dapat di edit. Item berwarna abu-abu berarti disabled. Raised line dapat di seret (dragged). Interaksi Usahakan menyediakan akses keyboard ke semua fitur. Idealnya, semua fungsi (kecuali fungsi grafis) sebaiknya dapat di akses dengan keyboard. Usahakan menyediakan akses mouse ke semua fitur. Idealnya, semua fungsi (kecuali teks input) sebaiknya dapat diakses dengan mouse. * Pastikan bahwa aktifitas yang memiliki dampak critical memerlukan seleksi yang eksplisit dari user. User perlu hati-hati dengan aktifitas yang bersifat destruktif atau critical. * Berikan feedback untuk semua operasi yang memerlukan waktu. Pastikan ada wait cursor, progress meter, atau feedback visual lainnya saat ada operasi yang memerlukan waktu lama. User sebaiknya bisa membatalkan (cancel) operasi yang yang lama. Beri tombol dengan label Cancel untuk membatalkan operasi, dan label Stop untuk menghentikan operasi. * Indikasikan mode secara visual. Berikan pada user feedback visual saat selesai memasukkan suatu mode, biasanya dengan merubah cursor atau teks di title bar. * Pastikan konsistensi single-clicking dan double-clicking. Gunakan singleclicking pilihan non-button. Gunakan double-clicking untuk pilihan sekaligus melakukan tindakan default. Dengan kata lain, double-clicking (dalam list box, combo box, atau control lain yang menerima double click) sebaiknya memiliki efek yang sama dengan memilih item dalam control dan menekan tombol Enter. * Gunakan tombol kanan mouse hanya untuk context menu. Pastikan tombol kanan mouse digunakan hanya untuk context menu dan tidak untuk yang lain. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 59

* Jangan gunakan tombol tengah mouse. Jika user memiliki mouse dengan tombol tengah, biarkan user menetapkan perilakunya dengan menggunakan utility mouse dalam Control Panel. Pastikan konsistensi dalam menetapkan kunci shortcut. Gunakan kombinasi function key dan Ctrl key untuk shortcut. Jangan gunakan kombinasi Alt key kecuali ada kesepakatan, karena Alt key digunakan untuk access key. Jangan pernah mengkombinasikan Alt dan Ctrl key, karena kombinasi ini membuat shortcut menjadi tidak praktis dan sulit di akses (less accessible). * Selalu membuat beberapa shortcut key untuk satu perintah. Jangan pernah membuat suatu shortcut key menjadi satu-satunya cara mengakses suatu perintah. Berikan alternatif lain pada user. Hindari horizontal scroll bar. Horizontal scrolling tidak dianjurkan, karena membuat sulit membaca suatu item. Sebagai alternatif, coba gunakan vertical scroll bar, membuat window lebih lebar, memperpendek teks item, atau memotong teks. Tentu saja, gunakan horizontal scroll bar jika terpaksa. Programs * Hanya program utama windows yang memiliki title bar icon, menu bar, toolbar, dan status bar. Secondary windows tidak harus muncul di taskbar, karena clicking pada primary window taskbar button juga mengaktifkan setiap secondary windows-nya. Secondary windows seharusnya tidak memerlukan menu bar, toolbar, atau status bar. Title bar icon digunakan sebagai pembedaan visual antara primary windows dan secondary windows. Juga, jangan pernah gunakan default Windows icon (flying window icon) sebagai window icon. Buat konfigurasi default se-simple mungkin. Biarkan user berkembang sesuai dengan kecepatan dan kemampuan mereka. Aplikasi sebaiknya menggunakan multiple-document interface (MDI) atau single-document interface (SDI). Interface program ini sesuai dengan pola yang digunakan aplikasi. Aplikasi sebaiknya memiliki kondisi default maksimum. User biasanya lebih produktif jika aplikasi dibuat full screen. Utility sebaiknya menggunakan SDI atau interface dialog box. Interface MDI tidak dianjurkan digunakan untuk utility, karena memerlukan waktu untuk me-manage semua windows. Utilitiy sebaiknya bekerja dalam ruang layar yang kecil. Utility sering digunakan terkait dengan program lain, sehingga perlu hanya memerlukan ruang layar yang kecil. Utility sebaiknya memiliki layout window yang fleksibel sehingga dapat mengakomodasi berbagai ukuran. Utility jarang dibuat full-screen. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 60

* Program-progam SDI yang menggunakan dokumen aktual harus mensupport multiple instance. Dengan kemampuan berjalan dalam multiple instance akan membuat user bisa bekerja dengan beberapa dokumen dalam waktu yang bersamaan. Gunakan perintah Exit untuk keluar dari program. Gunakan Exit untuk keluar dari program, Close untuk menutup primary windows dan dialog box modeless, dan Cancel untuk menutup dialog box modal. Gunakan Close sebagai pengganti Exit untuk primary windows yang saat ditutup tidak mempengaruhi terhentinya process. Contohnya, menutup window status printer tidak membuat batal job yang dilakukan oleh printer. Terminology Gunakan istilah yang sama untuk mendeskripsikan hal yang sama. Penggunaan istilah yang berbeda untuk item yang hanya memiliki perbedaan kecil akan membingungkan user. Nilai Default Save dan restore pilihan user. Suatu program sebaiknya mampu me-restore ke state awal saat program dihentikan. Program MDI seharusnya mampu me-restore ukuran dan lokasi dokumen windows. Dialog box pada umumnya menggunakan input terakhir sebagai nilai default. Sediakan nilai default yang sesuai. Menyediakan nilai default yang sesuai membantu user mengerjakan pekerjaan mereka. Berikan nilai default yang sering digunakan. Nilai default terbaik adalah nilai terakhir yang diinput user. * Pertimbangkan keamanan saat pemilihan nilai default. Tindakan yang destruktif atau yang tidak dapat diubah jangan digunakan sebagai nilai default. Jangan pernah menggunakan nilai default yang membuat user bingung. Dialog box Dialog box sebaiknya ditampilkan dengan benar dalam semua mode video. Jika ditampilkan dalam mode VGA (640 x 480), dialog box seharusnya tidak lebih besar dari 640 x 460 (dipotong 20 pixel untuk taskbar). Hal ini akan menjamin bahwa dialog box dapat ditampilkan dalam semua mode video. * Pastikan dialog box modal benar-benar modal. Pastikan bahwa semua dialog box modal yang memiliki parent windows men-supply parent window handle (bukan NULL handle). Jika parent window handle tidak diberikan, parent window masih aktif, maka dialog box belum benar-benar modal. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 61

* Jangan pernah menggunakan scrollable dialog box. Artinya, jangan pernah menggunakan dialog box yang memerlukan scroll bar untuk melihat isinya. Dialog box seperti ini akan sulit digunakan. * Jangan pernah menggunakan menu bar dalam dialog box yang bertindak sebagai secondary windows. Dialog box seperti ini akan rumit dalam menggunakannya. Menu bar diterima dalam dialog box yang digunakan sebagai primary windows (misal utility Pencarian). Context menu dan menu button dapat digunakan dalam semua dialog box : * Jangan pernah menggunakan title bar icon dalam dialog box yang bertindak sebagai secondary windows. Title bar icon digunakan sebagai pembedaan visual antara primary windows dan secondary windows. * Jangan pernah menampilkan dialog box yang bertindak sebagai secondary windows pada taskbar. Ingat, clicking pada primary window taskbar button akan mengaktifkan setiap secondary windows-nya. Gunakan tata-letak dan spacing dalam dialog box seperti di bawah : Interaksi Manusia dan Komputer Membangun UI yang Konsisten 62

Pada dialog box yang sama/serupa, gunakan letak control untuk menekankan kesamaan. Jika control yang sama dengan fungsi yang sama muncul dalam beberapa dialog box yang sama, sebaiknya diletakkan dalam posisi yang sama. Hal ini dimaksudkan supaya tidak membingungkan user. Lebih baik dockable toolbars dari pada dialog box modeless. Dockable toolbar (toolbar yang dapat di pindah) secara fungsional sama dengan modeless dialog box, kecuali bahwa dockable toolbar lebih fleksibel penempatannya. Atur fokus input. Atur awal fokus input pada control yang pertama kali di akses. Jangan letakkan ellipses pada teks di title dialog box. Contohnya, dialog box yang ditampilkan sebagai hasil dari pemilihan perintah Print Options sebaiknya diberi title Print Options, kecuali yang mengindikasikan bahwa perintah sedang di proses, seperti "Connecting To The Internet " * Tetapkan access key ke semua control yang dapat meng-handle access key. Access key membuat tangan user tetap pada keyboard dan membuat program lebih accessible. Access key dapat di-assign ke control seperti command button, radio button, dan check box melalui property Caption. Access key dapat juga di assign ke control seperti edit box, list box, dan combo box dengan cara meng-assign access key ke label static text atau group box yang mendahului control tersebut (bisa dilihat dari urutan tab order control). Tombol OK tidak boleh memiliki access key, karena tombol ini dipilih dengan Enter key saat menjadi default button. Tombol Cancel tidak boleh memiliki access key, karena Esc key digunakan untuk membatalkan suatu dialog box modal. Jika mungkin, hindari meng-assign access key dengan huruf kecil g, j, p, q, atau y, atau ke karakter yang mendahului/mengikuti salah satu karakter tersebut di atas, karena garis bawah menjadi tidak tampak jelas. Access key harus unique dalam satu lingkungan (misal dalam satu form). Interaksi Manusia dan Komputer Membangun UI yang Konsisten 63

Hindari penggunaan bold text (teks tebal). Bold text digunakan pada dialog box di Windows 3.1, karena saat itu video hardware belum bisa menampilkan huruf yang jernih (dithered gray). Sekarang, windows menggunakan teks normal dalam dialog box agar tampak lebih jelas. Gunakan bold text hanya untuk penekanan. Kebanyakan dialog box dianjurkan tidak menggunakan bold text. Menyediakan context-sensitive help. Jika suatu dialog box sangat kompleks, sebaiknya disediakan context-sensitive help untuk seluruh dialog box tersebut (di akses dengan help button atau F1 key). Untuk bantuan pada control tertentu, bisa di akses dengan tombol What's This? atau Shift+F1 key. Command button utama dialog box * Pisahkan command button utama dari main body dialog box. Command button utama adalah command button seperti OK, Cancel, Close, Help, Stop, Hide, dan tombol lain yang berkaitan. Pemisahan ini membuat command button utama lebih mudah di cari dan diidentifikasi. Pilih orientasi dialog box dengan hati-hati. Pada umumnya, orang membaca dari kiri ke kanan dan dari atas ke bawah, sehingga command button utama lebih mudah di cari jika terletak di bawah atau di sebelah kanan. Command button utama letakkan rata kanan di bawah. Perataan kanan command button utama mengikuti aliran dari kiri ke kanan. Command button utama. Perkecualian bisa terjadi, misal command button utama bisa rata tengah jika hanya ada satu button. Hindari penyusunan command button utama yang multi baris/kolom. Penyusunan command button utama dalam multi baris/kolom akan membuat user tidak nyaman. Jika anda memiliki banyak command button utama, lebih baik tempatkan dalam multi baris di sebelah kanan. * Jika dialog box bersifat modal, selalu sediakan tombol OK dan Cancel Untuk menggunakan dialog box, user perlu dengan mudah mengidentifi-kasi bagaimana melanjutkan proses (dengan OK button) dan membatal-kan proses (dengan Cancel button). Tombol OK dapat diganti dengan command yang spesifik, tetapi jangan pernah mengganti Cancel dalam suatu dialog box modal, kecuali dengan Stop untuk mengindikasikan bahwa operasi yang sedang berlangsung tidak dapat dibatalkan. * Untuk dialog box modeless atau dialog box yang digunakan sebagai primary windows, sediakan Close button tetapi jangan sediakan OK dan Cancel button. Penggunaan OK dan Cancel cocok untuk dialog box modal. OK dan Cancel tidak memiliki arti jika digunakan dalam konteks modeless. Gunakan Close untuk menghindari kebingungan user. * Selalu tempatkan tombol OK di urutan pertama, Cancel urutan kedua, Help urutan terakhir. OK atau tombol yang ekivalen sebaiknya selalu Interaksi Manusia dan Komputer Membangun UI yang Konsisten 64

ditempatkan di urutan pertama. Cancel sebaiknya ditempatkan disebelah kanan atau di bawah OK. Tempatkan tombol OK dan Cancel berurutan. Tombol Help sebaiknya ditempatkan di urutan terakhir. Jika tidak ada tombol OK, tempatkan tombol Cancel sebelum tombol Help. Hal ini membuat command button utama lebih mudah dicari dan diidentifikasi. * Beri label tombol OK dan Cancel dengan benar. Tombol OK sebaiknya diberi label OK, bukan Ok atau OK. Tombol Cancel sebaiknya diberi label Cancel, bukan Cancel atau CANCEL. * Pastikan tombol Cancel benar-benar untuk membatalkan proses. Jika dicancel, state program sebaiknya kembali sama seperti sebelum dialog box modal ditampilkan. Jika tidak, tombol Cancel sebaiknya diganti dengan tombol Stop. Tombol Cancel dalam dialog box modal sebaiknya memiliki efek yang sama seperti tombol Close pada title bar. Lembar property (property sheet) merupakan perkecualian, karena tombol Cancel tidak meng-cancel atau membatalkan perubahan yang telah diterapkan. Property sheet dan property page Property page sebaiknya bekerja secara independen. Hindari memiliki perilaku atau operasi pada property page yang tergantung pada property page yang lain. User tidak mungkin mencari dependensi diantara property page. Sebaiknya tidak ada urutan property page mana yang harus dibuka lebih dulu. User sebaiknya bisa melihat property page setiap saat. Atur property page secara independen satu dengan yang lain. Isi dari beberapa property page tidak selalu dengan tepat memerlukan ruang yang sama. Tata letak property page yang memerlukan ruang kecil sebaiknya tidak diformat sama dengan property page yang memerlukan ruang besar. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 65

Hindari centering seperti di bawah. Lebih baik property sheet daripada dialog box dengan tab control. Tidak keuntungan yang signifikan dalam hal manfaat bahwa penggunaan property sheet lebih baik dari pada dialog box dengan tab control kecuali untuk konsistensi. Pilihannya, gunakan property sheet untuk dialog box yang benarbenar menampilkan property object dan tabbed dialog box untuk penggunaan yang lain. * Selalu menggunakan property sheet untuk sekumpulan property, meskipun hanya ada satu halaman property. Selalu gunakan property sheet untuk membuat jelas bahwa user sedang melihat property, bukan sedang melihat dialog box. Property sheet harus memiliki tombol Apply untuk membantu eksperimen user dengan setting-nya. * Jangan pernah menggunakan lebih dari dua baris tab. Satu baris tab lebih baik, tetapi dua baris tab masih bisa diterima. Lebih dari dua baris tab terlalu banyak. Gunakan hierarchical property atau multiple dialog box. * Selalu menggunakan tombol Apply untuk property. Sekali lagi, tombol Apply membantu user melihat langsung dampak setting yang diterapkan. * Selalu berikan kata Properties dan nama object dalam title property sheet yang menampikan properti. Sekali lagi, tidak semua property sheet digunakan untuk menampikan property. * Selalu tempatkan command button di lokasi sebelah kanan. Command button yang digunakan untuk memproses semua page harus terletak diluar area tabbed page. Command button yang digunakan untuk memproses individual page harus terletak di dalam area tabbed page. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 66

Wizards Gunakan wizard untuk tugas yang advance, kompleks atau jarang dilakukan. Wizard berguna untuk tugas yang advance atau kompleks yang membutuhkan kerja ekstra. Wizard paling efektif saat digunakan untuk tugas yang jarang dilakukan. Penggunaan wizard untuk tugas yang umum membuat tugas tersebut jadi rumit. Controls Lebih baik control standard. Usahakan menggunakan control standard. Program-program yang menggunakan control nonstandard. GunakanUse custom control hanya saat anda memerlukan validasi yang tepat. Customize control standard harus hati-hati. Hati-hati saat merubah penampilan atau perilaku control standard. Hal ini bisa menimbulkan salah persepsi. * Disable control yang invalid. Disable control yang tidak diperlukan dalam kondisi saat itu. Hilangkan scrollbar yang tidak diperlukan. Jika mungkin, buat control cukup panjang atau lebar untuk mencegah munculnya scroll bar. Command button Gunakan lebar minimum dan tinggi standard Command button dengan caption teks sebaiknya memiliki lebar minimum 50 dialog unit (1095 twips dalam Visual Basic) dan tinggi standard 14 dialog unit (375 twips dalam Visual Basic). Perhatikan screen shot di bawah untuk contoh command button. Pertimbangkan lebar button untuk internasionalisasi. Lebar command button 50 dialog units merupakan lebar minimum yang tepat untuk teks inggris, tetapi terlalu kecil untuk program yang menggunakan bahasa lain. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 67

Untuk program yang perlu diterjemahkan ke bahasa lain, lebar command button minimum 60 dialog unit (1335 twips dalamvisual Basic) mungkin lebih cocok. * Disable command button yang invalid daripada menampilkan error message. Jangan pernah meng- enabled-kan command button yang hanya akan menghasilkan error message. * Selalu gunakan ellipse untuk mengindikasikan perlunya tambahan informasi. Ellipsis dalam command button menunjukkan bahwa informasi tambahan diperlukan untuk melaksanakan perintah. * Jangan pernah meng-assign perilaku ke double click. User tidak mengharapkan command button me-respon double click, sehingga tidak mengharapkan menemui perilaku ini. Check box * Gunakan check box untuk pilihan on dan off, radio button untuk merubah mode. Check box sangat efektif untuk mengubah opsi on dan off, tetapi akan membingungkan jika digunakan untuk mengubah mode suatu kondisi selain on atau off. Contohnya, anda dapat menggunakan check box untuk mengindikasikan bahwa suatu toolbar ditampilkan atau tidak, tetapi menggunakan check box untuk menandai mode landscape dan mode portrait pada printer akan sangat membingungkan. Mode printer sebaiknya digunakan group radio button. Hindari grouping check box yang lebih dari 8 item. Sebagai penggantinya, pertimbangkan penggunaan check box list, karena akan memakan sedikit ruang, tetapi ingat bahwa check box list akan memerlukan scrolling jika diperlukan. Pertimbangkan meletakkan group-group check box yang berkaitan ke dalam suatu group box. Grouping seperti ini akan membuat hubungan antara check box lebih jelas. Lebih baik vertical alignment. Suatu group check box lebih nyaman di lihat jika diratakan vertical, walaupun perataan horisontal dapat diterima jikan menghasilkan layout yang lebih baik. Radio button Hindari grouping radio button yang lebih dari 8 item. Pertimbangkan list box atau combo box sebagai pengganti, karena memakan sedikit ruang. Hindari radio button untuk on/off atau pilihan yes/no. Gunakan check box sebagai pengganti. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 68

* Selalu letakkan radio button dalam suatu group box. Karena radio button membantuk sekumpulan pilihan yang mutually exclusive (hanya satu yang bisa dipilih), group box membuat pilihan lebih jelas. Lebih baik vertical alignment. Suatu group radio button lebih nyaman di lihat jika diratakan vertical, walaupun perataan horisontal dapat diterima jikan menghasilkan layout yang lebih baik. Combo box * Selalu berikan label pada combo box. Label diperlukan untuk mengidentifikasi kegunaan combo box. Buat combo box drop-down list minimal 5 baris. Daftar/list yang kurang dari 5 baris tidak akan menggunakan scroll bar, sehingga akan sulit menggulungnya. Jika combo box tidak mempunyai cukup item dalam list, panjang list otomatis di pendekkan. Hindari daftar combo box dengan jumlah item kurang atau sama dengan 4. Pertimbangkan menggunakan radio button sebagai pengganti, karena lbih mudah digunakan, walaupun memerlukan ruang yang lebih besar. Combo box yang hanya dengan sedikit item bisa digunakan dengan pertimbangan konsistensi dengan combo box lain dalam window yang sama. Edit box * Selalu berikan label pada edit box. Label diperlukan untuk mengidentifikasi kegunaan edit box. Jika label di sebelah kiri, ratakan vertikal dengan teks edit box. Hindari edit box untuk input bersyarat/terbatas (constrained input). Gunakan edit box untuk input yang tidak terbatas (boleh numerik atau teks), hal ini supaya tidak membingungkan user. Untuk constrained input, gunakan control lain, seperti combo box, list, slider, dan spin box. Gunakan control date and time picker untuk input tanggal dan waktu. Buat edit box tampak lebih jelas dengan spin box dan tombol browse. Spin box dan tombol browse memperjelas mekanisme untuk membantu user menginput data yang valid ke dalam edit box. Hindari memaksa user mengetik input secara langsung. Gunakan edit box dengan spin box hanya untuk input numerik, dan untuk input teks gunakan combo box. Atur lebar edit box sesuai dengan ukuran input yang diharapkan. Lebar edit box merupakan petunjuk visual mengenai input yang diharapkan. Contohnya, jika user memasukkan alamat, field State yang lebarnya hanya 2 karakter memberi petunjuk bahwa input yang diperlukan hanya 2 karakter. Jika input yang diharapkan tidak memiliki ukuran khusus, pilih lebar yang konsisten dengan edit box atau control yang lain. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 69

Slider * Selalu gunakan numeric edit box untuk input numerik. User sebaiknya tidak pernah menerima error message saat memasukkan teks non-numeric ke dalam field numerik. * Selalu beri label pada slider. Label diperlukan untuk mengidentifikasi kegunaan slider. Umumnya, slider juga memerlukan label untuk mengindikasikan nilai yang tertinggi dan terendah serta pilihan saat itu. Static text Teks dalam static text sebaiknya diratakan kiri. Perataan kiri memberikan label tampak tersusun rapi dan nyaman dilihat. Lebih baik menempatkan static text di sebelah kiri, bukan di atas control yang berkaitan. Perataan ini membuat label lebih mudah di cari dan kombinasi label-control lebih nyaman dilihat. Perkecualian aturan ini adalah untuk control dengan tinggi yang berbeda, seperti list, tree, dalam multiline edit box. * Selalu gunakan tanda titik dua (:) di akhir static text yang digunakan untuk mengidentifikasi control. Penggunaan (:) jelas mengindikasikan bahwa teks tersebut merupakan label control. Label yang digunakan untuk memberikan informasi tambahan mengenai control sebaiknya tidak menggunakan tanda titik dua, seperti label yang digunakan untuk menampilkan pilihan dalam control slider. * Selalu gunakan edit box yang read-only untuk teks yang nonlabel. Edit box read-only megijinkan user untuk menyalin teks ke dalam clipboard dan menggulung teks jika lebih panjang dari control. * Jangan pernah meletakkan static text pada border yang timbul (raised boder). Static text pada raised border akan tampak seperti button, dan user akan berusaha meng-klik-nya. List box * Selalu berikan label pada list box. Label diperlukan untuk mengidentifikasi kegunaan list box. Buat list box minimal panjangnya 5 baris. Daftar dengan panjang kurang dari 5 baris akan sulit digulung, karena tidak memiliki scroll bar. Penggunaan list box pendek diterima, jika list box tidak memiliki scroll bar. Pertimbangkan penggunaan check box list untuk pilihan ganda. Check box list membuat kemampuan memilih beberapa item lebih jelas. Jika check box list tidak bisa digunakan, gunakan multiple-selection list dengan static text Interaksi Manusia dan Komputer Membangun UI yang Konsisten 70

yang menunjukkan jumlah item terpilih untuk menunjukkan bahwa diijinkan memilih item lebih dari satu. Pertimbangkan menyediakan command Select All dan Deselect All untuk multiple-selection list. Perintah ini membuat lebih mudah bagi user untuk memilih, karena bisa memilih/membatalkan semua pilihan dengan satu perintah. List view * Selalu beri label pada list view. Label diperlukan untuk menunjukkan fungsi list view. Buat list view minimal panjangnya 5 baris. Daftar dengan panjang kurang dari 5 baris akan sulit digulung, karena tidak memiliki scroll bar. Penggunaan list view pendek diterima, jika list view tidak memiliki scroll bar. * Gunakan clickable header jika list bisa diurutkan. Header yang clickable sebaiknya digunakan untuk yang lain selain sorting. Click pertama akan mengurutkan list pada urutan normal, click kedua sebaiknya mengurutkan list dengan urutan terbalik. * Selalu membuat list view dapat diurutkan jika memuat lebih dari 30 item. Hal ini untuk membuat user lebih mudah mencari informasi. Scroll bar * Gunakan scroll bar hanya untuk penggulung. Gunakan slider atau spin box untuk men-setting nilai. Buat scroll bar cukup panjang. Hal ini unutk memudahkan menggulung scroll bar. Group box Gunakan group box untuk mengelompokkan control yang berkaitan. Group box tidak hanya untuk mengelompokkan radio button, tetapi bisa digunakan untuk mengelompokkan control-control dengan tipe berbeda. Hindari group box yang hanya berisi satu control, kecuali untuk konsistensi dengan group box lain dalam dialog box yang sama. Pertimbangkan menggunakan static line dan Static text sebagai pengganti group box. Group box kadang memerlukan ruang yang besar. Alternatif lain, bisa digunakan kombinasi static text dan static line untuk mengelompokkan control. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 71

Menu * Jangan gunakan titik dua pada akhir label group box. Label dengan titik dua pada group box akan membingungkan user dan tidak nyaman dilihat. * Gunakan satu kata untuk title menu. Title menu dengan banyak kata pada menu bar akan menyerupai multiple menu title dan ini membingungkan user. * Jangan meletakkan pemisah antar teks dalam menu bar. * Hindari menu bar yang multiple-line. * Jaga supaya menu stabil. Jangan menghilangkan menu item yang tidak digunakan saat itu, cukup di-disable saja. Jika ada menu yang tidak pernah digunakan pada konteks saat itu, hilangkan saja. Urutkan item menu. Kelompokkan item yang berkaitan. Command yang penting sebaiknya muncul di menu paling atas, sedangkan yang kurang penting letakkan di bawah. * Disable command yang invalid. Menu yang tidak dipakai pada konteks saat itu lebih baik di-disable, jangan gunakan error message. * Assign key untuk meng-akses (access key). Access key membantu user agar nyaman da program mudah untuk di akses. Jika mungkin, hindari menetapkan suatu access key ke huruf kecil g, j, p, q, atau y, atau ke karakter yang didahului oleh karakter tersebut, karena garis bawahnya tidak akan terlihat jelas. Access key harus unique dalam suatu menu. * Gunakan ellipsis untuk menunjukkan informasi tambahan. Gunakan menu yang standard. Sebaiknya dalam suatu menu ada menu File, Edit, dan Help. Menu ini merupakan menu standard dan user mengharapkan menu ini ada. Contoh, user mengharapkan menemukan command seperti Print dan Exit dalam menu File, walaupun command ini tidak ada hubungannya dengan file. Hal yang sama, user mengharapkan command Cut, Copy, dan Paste dalam menu Edit, dan minimal command About dalam menu Help. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 72

Tempatkan command Find dan Options secara konsisten. Letakkan command Find di menu Edit, dan command Options di menu Tools (jika ada). * Gunakan tanda check (check mark) untuk menandai option on dan off, radio groups untuk mengubah mode. Check mark efektif untuk menandai option on dan off, tetapi membingungkan saat digunakan untuk merubah mode. Misalnya, anda dapat menggunakan check mark untuk menunjukkan suatu toolbar ditampilkan atau tidak, tetapi menggunakan check mark untuk memilih mode printer (landscape atau portrait) akan membingungkan user. * Jangan pernah gunakan menu drop-down multicolumn. Hal ini kan menambah kompleksitas menu yang tidak perlu. * Jangan pernah gunakan menu "Bang". Menu Bang merupakan item dalam menu bar yang mirip menu drop-down, tetapi berisi command yang dieksekusi secara langsung tergantung pilihan. * Jangan pernah membuat rata kanan title menu. Style ini sudah tidak dipakai lagi dan membuat sulit menggunakan menu. Context menu Pertimbangkan menggunakan context menu, tetapi jangan jadikan satusatunya cara. Sebaiknya command dalam context menu juga harus tersedia dalam menu bar. Context menu ini merupakan cara untuk mengakses perintah dengan cara yang efisien. Hindari shortcut key dalam context menu. Lebih baik letakkan shortcut key di menu bar, karena context menu digunakan untuk akses cepat dengan menggunakan mouse, bukan dengan keyboard. Toolbar * Jaga toolbar tetap stabil. Untuk tombol yang tidak digunakan, di-disable saja, jangan di hilangkan, kecuali memang tombol tersebut tidak pernah digunakan dalam program tersebut. * Disable command yang invalid daripada menampilkan error message. Gunakan tombol toolbar besar (large button) untuk utility. Toolbar untuk utility berbeda dengan dengan toolbar aplikasi. Toolbar utility jauh lebih sederhana dan memiliki large button. Toolbar utility sebaiknya memiliki sedikit perintah yang jelas dengan deskripsi berupa teks dan grafik. Gunakan toolbar yang customizable untuk aplikasi dan fixed toolbar untuk utility. Sediakan cara untuk menampilkan dan menyembunyikan toolbar. * Gunakan tooltip. Tooltip membantu user memahami fungsi tombol toolbar. Interaksi Manusia dan Komputer Membangun UI yang Konsisten 73