Ragam dialog

1. 1. Pendahuluan • RAGAM DIALOG (DIALOQUE STYLE) adalah cara pengorganisasian berbagai teknik dialog interaktif yang  memungkinkan terjadinya komunikasi antara manusia dengan komputer. • Tujuan perancangan antarmuka dengan berbagai dialog  pada dasarnya adalah untuk mendapatkan satu kriteria yang sangat penting dalam pengoperasian sebuah program aplikasi, yakni aspek ramah dengan pengguna (user friendly).
2. 2. • Inisiatif • Keluwesan • Kompleksitas • Kekuatan • Beban informasi • Konsistensi • Umpan balik • Observabilitas • Kontrolabilitas • Efisiensi • Keseimbangan Beberapa sifat penting ragam dialog
3. 3. Beberapa sifat penting ragam dialog (Lanjutan) • Inisiatif, dpt menentukan tipe‐tipe pengguna yg dituju oleh sistem yg dibangun. Ada 2 : ‐ inisiatif oleh komputer, pengguna memberikan tanggapan atas prompt yg diberikan komputer ‐ inisiatif oleh pengguna, pengguna diharapkan memahami sekumpulan perintah dgn sintaks tertentu • Keluwesan, sistem hrs menyesuaikan diri dgn keinginan pengguna. Keluwesan juga memberi kesempatan pada pengguna utk costumizing sistem
4. 4. Beberapa sifat penting ragam dialog (Lanjutan) • Kompleksitas, kita tdk perlu menggunakan atau membuat antarmuka lebih dari apa yg diperlukan. • Kekuatan, jml kerja yg dpt dilakukan oleh sistem utk setiap perintah yg diberikan pengguna. misal : pengguna ahli memberikan respon positif thd perintah2 yg powerful • Beban informasi, penyajian informasi hrs disesuaikan dgn arah pengguna.
5. 5. Beberapa sifat penting ragam dialog (Lanjutan) • Konsistensi, perintah hrs mempunyai sintaksis yg terstandarisasi dan urutan parameter hrs mempunyai tata letak yg konsisten, format pemasukan data hrs  kompatibel. Konsistensi bukan berarti semua interface harus terlihat sama
6. 6. Contoh Konsistensi • Layout – Konsisten menggunakan tampilan sehingga user tahu dimana harus melihat instruksi, pesan error dan status suatu informasi.  • Information coding – warna – highlighting • Commands – Penggunaan nama perintah/instruksi – standard key bindings e.g.  ESC selalu dipakai untuk cancel F1 selalu dipakai untuk menampilkan help – syntax • Format data entry
7. 7. Beberapa sifat penting ragam dialog (Lanjutan) • Umpan Balik, Setiap aksi dari user harus menghasilkan suatu respon yang  dapat diterima dengan baik oleh user.  Tujuannya adalah untuk mengurangi ketidakpastian /keraguan user bahwa sistem: – menerima input yang terakhir, – sedang mengerjakan sesuatu yang diinginkan user, – sedang menunggu input berikutnya. • Instruksi atau perintah harus menghasilkan suatu perubahan yang nampak pada interface – Misal: ‘mail has been sent’ saat merespon ‘Send’ – Menunjukkan suatu perubahan status objek yang merupakan refleksi perintah user • Informasi yang tepat sebagai feedback mutlak diperlukan
8. 8. Beberapa sifat penting ragam dialog (Lanjutan) • Observabilitas, berfungsi secara benar dan nampak sederhana meskipun sebenarnya pengolahan internalnya sangat rumit • Kontrolabilitas, sistem selalu berada di bawah kontrol pengguna. • Efisiensi, sangat penting jika berpengaruh pada waktu tanggap atau laju penampilan sistem, seringkali dgn menggunakan hasil teknologi baru.
9. 9. Beberapa sifat penting ragam dialog (Lanjutan) • Keseimbangan, perbedaan antara manusia dan komputer : ‐ manusia dpt menangani berbagai persoalan yg berurusan dgn perubahan lingkungan,  pengetahuan tdk pasti dan tdk lengkap.  ‐ komputer dpt melakukan pekerjaan yg berulang dan rutin, penyimpanan dan pencarian data yg handal dan memberikan hasil komputasi yg sangat akurat
10. 10. Ragam Dialog Interaktif • Dialog Berbasis Perintah Tunggal • Dialog Berbasis Bahasa Pemrograman • Antarmuka Berbasis Bahasa Alami • Sistem Menu • Dialog Berbasis Pengisian Borang • Antarmuka Berbasis Ikon • Sistem Windows • Manipulasi Langsung • Antarmuka Berbasis Interaksi Grafis
11. 11. Dialog Berbasis Perintah Tunggal • Perintah‐perintah tunggal yang  dapat dioperasikan biasanya tergantung dari sistem komputer yang  dipakai,  dan berada dalam domain yang  disebut bahasa perintah (command  language) • Bahasa perintah harus dirancang sedemikian rupa shg mudah dipelajari dan diingat oleh kebanyakan pengguna • Contoh : Perintah‐perintah yang dimiliki oleh DOS dan UNIX
12. 12. Dialog Berbasis Perintah Tunggal (Lanjutan) • Perintah‐perintah tunggal yang  dapat dioperasikan biasanya tergantung dari sistem komputer yang  dipakai,  dan berada dalam domain yang  disebut bahasa perintah (command  language) • Bahasa perintah harus dirancang sedemikian rupa shg mudah dipelajari dan diingat oleh kebanyakan pengguna • Contoh : Perintah‐perintah yang dimiliki oleh DOS dan UNIX
13. 13. Dialog Berbasis Perintah Tunggal (Contoh)
14. 14. Dialog Berbasis Perintah Tunggal (Lanjutan) Keuntungan Kerugian • cepat • akurat • efisien • ringkas • luwes • inisiatif oleh pengguna • memerlukan pelatihan yang lama • membutuhkan penggunaan yang teratur • beban ingatan yang  tinggi • Jelek dalam menangani kesalahan
15. 15. Dialog Berbasis Bahasa Pemrograman • Merupakan ragam dialog yang memungkinkan pengguna untuk mengemas sejumlah perintah kedalam suatu berkas yang sering disebut batch file. • Perintah yang dituliskan tidak harus menggunakan salah satu bhs pemrograman baik aras rendah maupun aras tinggi seperti assembler, Pascal, C,  FORTRAN atau BASIC, tetapi tetap harus mengikuti aturan‐aturan tertentu.
16. 16. Antarmuka Berbasis Bahasa Alami • Pada dialog berbasis bahasa alami pengguna menggunakan instruksi‐instruksi dalam bahasa alami yang lebih umum sifatnya, pengguna dapat secara bebas memberikan instruksinya dengan kalimat‐ kalimat yang lebih “manusiawi”. • Contoh instruksi bahasa alami : Cetak daftar semua mahasiswa yang  mempunyai IP semester lebih besar dari 3,0
17. 17. Antarmuka Berbasis Bahasa Alami(lanjutan) Diterjemahkan dalam dialek Turbo Pascal : while not eof (T) do begin readln(T,S) ; if S.IpSem > 3.0 then writeln(S.NamaMahasiswa); end;
18. 18. Antarmuka Berbasis Bahasa Alami (lanjutan) Keuntungan Kerugian • tidak memerlukan sintaksis khusus • luwes dan powerful • alamiah • merupakan inisiatif campuran • mempunyai dualisme • bertele‐tele • opaque (tidak jelas) • perancangan perangkat lunak yang rumit • tidak efisien
19. 19. Sistem Menu Menu merupakan bentuk utama navigasi sistem, jika dirancang dengan benar akan membantu pengguna membangun model mental dari sistem. Menu efektif karena menggunakan kelebihan manusia dalam hal recognition (pengenalan) dan bukan kelemahannya dalam hal ingatan.
20. 20. Sistem Menu (Lanjutan) Yang perlu diperhatikan dalam sistem menu : • Struktur Menu • Fungsi Menu • Format Menu • Menulis Menu • Navigasi menggunakan Menu • Navigasi dan Link web site • Elemen‐elemen navigasi web site • Memelihara rasa ‘tempat’ pada web site • Jenis‐jenis Menu
21. 21. Struktur Menu Struktur menu mendefinisikan tingkat kendali pengguna dalam melaksanakan sebuah task (tugas). Struktur menu yang dikenal :  1.Menu Tunggal 2.Menu Linier Sekuensial 3.Menu Simultan 4.Menu Hirarki atau Sekuensial 5.Menu Terhubung 6.Menu ‘Event‐trapping’
22. 22. Struktur Menu (lanjutan)
23. 23. Fungsi Menu • Navigasi ke menu baru • Mengeksekusi sebuah aksi / prosedur • Menampilkan informasi • Memasukkan data
24. 24. Isi Menu Sebuah menu terdiri atas 4 (empat) elemen, yaitu: 1. Konteks menyediakan informasi untuk menjaga orientasi pengguna, terutama pada sistem menu yang  kompleks/hirarkis 2. Judul 3. Pilihan 4. Instruksi penyelesaian memberitahu pengguna bagaimana cara memilih
25. 25. Format Menu (Petunjuk) 1. Konsisten • Konsisten dengan ekspektasi pengguna • Konsisten dalam menu : • Format : organisasi, presentasi, urutan pilihan • Frasa : judul, deskripsi pilihan, instruksi • Cara pilih • Skema navigasi 2. Tampil • permanen / on demand 3. Presentasi • sebuah menu dan pilihan‐pilihannya dapat langsung dikenali sebagai sebuah menu
26. 26. 4. Organisasi • Sediakan menu utama • Tampilkan : semua alternatif relevan, hanya alternatif relevan (hilangkan atau ‘gray‐out’) • Sesuaikan struktur menu dengan struktur ‘task’ • Minimalkan tingkat menu : untuk web site batasi hingga 2 level • Jumlah pilihan : tanpa pengelompokan elemen : 4‐8 pilihan; dengan pengelompokan : 18‐24 • Sediakan cara memendekkan menu • Jangan sampai menu di‐scroll 5. Kompleksitas • Sediakan menu sederhana (untuk pemula, jumlah aksi dan menu secukupnya) dan menu kompleks (untuk ahli, jumlah aksi dan menu lengkap) Format Menu (Petunjuk)
27. 27. Format Menu (Petunjuk) 6. Susunan pilihan sedapat mungkin satu kolom; top‐down, left‐to‐right 7. Urutan pilihan 8. Pengelompokan 9. Garis pembatas pada menu 10. Pemilihan menu pendukung 11. Bahasa / kata yang digunakan 12. Instruksi menu :  Pemula : sediakan cara menyelesaikan menu Ahli : sediakan cara untuk mengabaikan instruksi ini 13. Intent Indicator 14. Keyboard Shortcuts
28. 28. Format Menu (Petunjuk) 15. Memilih pilihan Pilihan dapat dipilih dengan cara menunjuk pada pilihan dengan penunjuk mekanis, melalui keyboard, atau dengan mengetikkan nilai pilihan. 16. Sediakan defaults 17. Pilihan yang tidak dapat dipilih 18. Tanda aktif / non‐aktif sebuah pilihan 19. Toggled menu items
29. 29. Navigasi Untuk Web Site Navigasi adalah cara orang mencari apa yang mereka inginkan dari sebuah web site. Pencarian ini terdiri atas 4  (empat) langkah, yaitu:  1.orientasi,  2.keputusan rute,  3.monitoring rute, dan 4.pengenalan tujuan.
30. 30. Navigasi Untuk Web Site Goals  dapat menjawab: ‐ Where am I now? ‐ Where did I come from? ‐ Where can I go from here? ‐ How can I get there quickly?
31. 31. Desain Navigasi Website 1. Pertolongan navigasi web site a. Untuk membantu navigasi ‐ Sediakan peta atau overview hirarki menu ‐ Sediakan clickability cues ‐ Sediakan pilihan‐pilihan yang akan ada di level selanjutnya ‐ Ganti warna sebuah link yang sudah diklik b. Sediakan umpan balik berkaitan dengan lokasi saat ini ‐ Sediakan sejarah (history) navigasi ‐ Cocokkan antara teks/label sebuah link dengan judul halaman tujuan
32. 32. Desain Navigasi Website 2. Organisasi Web site a. Bagi isi menjadi fragmen‐fragmen lojik ‐ Hirarki generality atau kepentingan ‐ Struktur relasi antar fragmen • Establish global or site‐wide navigation requirements. • Create a well‐balanced hierarchical tree. • Restrict to two levels requiring no more than two clicks to reach deepest  content, whenever possible. • It is easier to develop a clear and comprehendible navigation scheme if  the web site.
33. 33. Desain Navigasi Website 3. Disain halaman navigasi a. Gunakan tipe menu yang cocok ‐ Menu sekuensial untuk task yang sederhana ‐ Menu simultan untuk task yang dapat balik b.  Jaga halaman navigasi supaya tetap pendek c.  Batasi teks prosa d.  Scrolling ‐ Hindari scrolling halaman navigasi ‐ Batasi scrolling untuk melihat semua link pada halaman daftar isi ‐ Hindari horizontal scrolling
34. 34. Desain Navigasi Website 4. Komponen Sistem Navigasi Semua elemen navigasi haruslah : selalu ada, jelas, konsisten tampilan;  fungsi; dan urutannya.
35. 35. Elemen – elemen Navigasi
36. 36. Menu Grafis
37. 37. Dialog Berbasis Pengisian Borang • Teknik dialog berbasis pengisian borang (form filling dialogue) merupakan suatu penerapan langsung dari aktifitas pengisian borang dalam kehidupan sehari‐hari dimana pengguna akan dihadapkan suatu bentuk borang yang ada di layar komputer yang mereka gunakan. • Kualitas antarmuka berbasis pengisian borang tergantung pada tiga aspek: – Tampilan pada layar monitor yang mencerminkan struktur data  masukan yang diperlukan oleh sistem. – Kejelasan perancangan dan penyajiannya secara visual pada layar  monitor. – Derajat kebenaran dan kehandalan penerimaan data masukan oleh  program lewat berbagai fasilitas pemasukan data yang ada di dalam  borang tersebut.
38. 38. Dialog Berbasis Pengisian Borang (Lanjutan) Hal yg perlu diperhatikan dalam perancangan tampilan : Proteksi tampilan, pembatasan tampilan yg tidak dapat diakses  pengguna. Batasan medan tampilan, penentuan  panjang yang tetap atau berubah,  menggunakan format bebas atau tertentu. Isi medan,  petunjuk pengisian tampilan. Medan opsional, dinyatakan secara tekstual atau menggunakan aturan  tertentu, seperti penggunaan warna berintensitas rendah, warna  tampilan yang berbeda, dan lain‐lain.
39. 39. Dialog Berbasis Pengisian Borang (Lanjutan) Hal yg perlu diperhatikan dalam perancangan tampilan (Lanjutan) : 6. Default. tentukan tempatnya, apakah pada bagian yang tidak dapat  diakses pengguna ataukah pada bagian pemasukan data. 7. Bantuan, bantuan (help) cara pengisian borang. 8. Medan penghentian. Masukan data dapat diakhiri dengan menekan  tombol Enter atau Return atau mengisi karakter terakhir dengan karakter  tertentu atau dengan cara berpindah ke medan lain. 9. Navigasi. menggunakan tombol Tab untuk urutan yang tetap, atau dapat  pula digerakkan secara bebas menggunakan mouse.
40. 40. Dialog Berbasis Pengisian Borang (Lanjutan) 10. Pembetulan kesalahan. menggunakan tombol BackSpace dengan  menindihi (overwrite) isian lama, dengan jalan membersihkan dan  mengisi kembali medan tersebut, dan lain‐lain. 11. Penyelesaian. memberitahu pengguna bahwa seluruh proses  pengisian telah selesai.
41. 41. Dialog Berbasis Pengisian Borang (Lanjutan) Keuntungan Kerugian • pengguna sudah terbiasa dengan pengisian borang • isian data yang disederhanakan • diperlukan sedikit pelatihan • beban memori rendah • strukturnya jelas • perancangan mudah • tersedia berbagai piranti bantu perancangan tampilan • seringkali lambat • memakan ruang layar (khususnya untuk menu datar) • tidak cocok untuk pemilihan perintah/instruksi • memerlukan pengontrol kursor • mekanisme navigasinya tidak terlihat secara eksplisit • memerlukan suatu bentuk pelatihan
42. 42. Dialog Berbasis Ikon • Adalah ragam dialog  yang  banyak menggunakan simbol‐ simbol dan tanda‐tanda untuk menunjukkan suatu aktifitas tertentu. • Keuntungannya gambar bersifat umum,  mudah diingat,mudah dipelajari shg mempertinggi kinerja pengguna,  tidak bergantung pada suatu bahasa. • Kerugian :  cenderung membingungkan,  boros tempat,  dan sangat tidak efektif, tidak adanya standarisasi bentuk‐bentuk ikon seringkali menimbulkan persoalan tersendiri.
43. 43. Dialog Berbasis Ikon (Lanjutan)
44. 44. Sistem Windows • Window adalah sebuah area di layar,  biasanya berbentuk persegi empat,  memiliki batas‐batas dan memiliki  bagian yang menunjukkan aktivitas  komputer atau bagian yang  memungkinkan manusia berdialog  dengan komputer.
45. 45. Karakteristik Sistem Windows • Nama atau judul, sebagai identitas window • Ukuran (tinggi dan lebar) bisa bervariasi • Status: aktif / dapat diakses atau pasif / tidak dapat diakses • Visibilitas – bagian yang dapat dilihat (sebagian atau seluruhnya dapat tersembunyi di balik window lain) • Lokasi, relatif terhadap batas layar • Tampilan, yaitu pengelolaan terkait dengan windows lain (tiled, overlap,  cascading) • Kemampuan manajemen, metode manipulasi window pada layar • Highlight, yaitu bagian yang dipilih • Fungsi, task, atau aplikasi yang didukung
46. 46. Dukungan Sistem Windows • Windows harus dapat mendukung pekerjaan manusia yang memerlukan banyak sumber, berpindah‐pindah dari satu tugas ke tugas lain, dapat dihentikan sewaktu‐waktu, diulang, diubah dan dilanjutkan lagi. • Windows harus meringankan memori manusia
47. 47. Tampilan Windows • Menampilkan informasi dalam beberapa level • Menampilkan berbagai jenis informasi • Menampilkan beberapa level dan jenis informasi secara sekuensial • Mengakses dan mengkombinasikan berbagai sumber informasi • Melaksanakan lebih dari satu task • Mengingatkan pengguna (pilihan menu, rencana) • Mengawasi perubahan internal dan eksternal • Menampilkan sebuah task dalam beberapa representasi yang berbeda • Mengatasi pertimbangan historis, batasan perangkat keras, dan batasan manusia
48. 48. Pertimbangan Historis • Panduan desain yang ada biasanya hanya menyelesaikan masalah perangkat  keras, tanpa memperhatikan usabilitas • Standar desain yang ada sangat umum dan terbatas untuk lingkup produk  tertentu • Tiap pengembang memperkenalkan standar dan panduan desain baru yang  sesuai dengan produk mereka. Akibatnya, pengguna harus mempelajari gaya  desain yang berbeda‐beda setiap berhadapan dengan produk tertentu.
49. 49. Batasan Hardware dan Manusia • Ukuran layar yang tersedia seringkali tidak cukup besar bagi pengguna untuk  memanfaatkan windowing dengan optimal • Kecepatan pemrosesan yang rendah dan ukuran memori yang kecil  membatasi penggunaan windows; membatasi kemampuan feedback dan  animasi, kualitas grafis dan resolusi yang rendah • Kemampuan windows yang terbatas, mengharuskan pengguna memiliki  kemampuan dalam mengelola windowing.
50. 50. Komponen ‐ Komponen Windows • Frame • Title bar • Title bar icon • Window sizing buttons • Help button • Menu bar • Status/ message bar • Scroll bars • Split box • Tool/ command bar • Command area • Size grip • Work area
51. 51. Gaya Penampilan Windows • Tiled Windows: gaya tertua,  menampilkan semua windows hingga memenuhi layar • Overlapping Windows: windows dapat saling bertumpuk acak • Cascading Windows: overlap secara teratur
52. 52. Tiled Windows • Kelebihan – Pengaturan windows dilakukan oleh sistem – Seluruh windows yang terbuka dapat dilihat oleh pengguna – Tidak ada informasi yang tersembunyi – Sederhana, mudah dipahami dan digunakan – Meningkatkan performansi pada tasks dengan manipulasi windows minimal • Kekurangan – Jumlah windows yang dapat ditampilkan terbatas – Setiap kali window baru dibuka, window lain berubah posisi dan ukuran – Perubahan posisi dan ukuran sulit diprediksi – Konfigurasi windows mungkin tidak sesuai dengan kebutuhan pengguna – Layar bisa terlalu padat dan dipenuhi scroll bar atau control icons – Pengguna kurang dapat mengelola windows secara aktif
53. 53. Overlapping Windows • Kelebihan – Secara visual tampak 3 dimensi, sehingga lebih familiar bagi pengguna – Pengguna memiliki kontrol untuk mengelola windows sesuai kebutuhan – Windows berukuran besar dapat ditampilkan lebih baik – Posisi windows lebih konsisten – Menutup dan menghapus windows tidak berakibat fatal – Layar tidak terlalu padat dan kompleks – Performansi task dengan manipulasi windows lebih baik • Kekurangan – Operasional windows lebih kompleks daripada tiled windows – Informasi pada windows dapat tertutup oleh windows lain – Windows dapat hilang atau terlupakan oleh pengguna – Visualisasi 3 dimensi tidak selalu disadari oleh pengguna – Kontrol windows yang terlalu banyak dapat merepotkan pengguna
54. 54. Cascading Windows • Kelebihan – Tidak ada window yang tersembunyi seluruhnya – Mudah memilih dan mengaktifkan window manapun – Tampilan visual sederhana dan rapi • Kekurangan – Pengaturan windows mungkin tidak sesuai dengan kebutuhan pengguna
55. 55. Pemilihan Gaya Tampilan Windows • Gunakan tiled windows untuk – Aktivitas single‐task – Data yang perlu dilihat secara simultan – Tasks yang kurang memerlukan manipulasi window – Pengguna awam atau kurang pengalaman • Gunakan overlapping windows untuk – Berpindah antar tasks – Tasks yang memerlukan banyak manipulasi window – Pengguna yang berpengalaman atau pakar – Isi tampilan yang tidak dapat diprediksi
56. 56. Tipe ‐ tipe Windows • Primary windows – Window utama yang muncul di layar saat sebuah aktivitas atau aksi dimulai – Disebut juga application window / main window / parent window – Merupakan titik utama aktivitas pengguna • Secondary windows – Windows tambahan yang dapat berupa independent maupun dependent  window terhadap primary window‐nya – Dapat berupa modal  maupun modeless • Dialog box – Untuk memperluas dan melengkapi interaksi dengan aksi tertentu yang sangat terbatas – Untuk menampilkan pesan, aksi singkat, atau tombol command (OK, cancel, dll)
57. 57. Primary Windows • Untuk fungsi atau aplikasi independen • Untuk komponen dan kontrol window yang terus dipakai • Untuk informasi yang terus di‐update, misal : tanggal dan waktu • Untuk menunjukkan konteks dari dependent windows • Jangan membagi fungsi independen ke dalam 2 / lebih primary windows • Jangan menampilkan fungsi‐fungsi yang  tidak berkaitan dalam satu primary window
58. 58. Secondary Windows • Untuk aksi lanjutan atau tambahan yang lebih kompleks dan berkaitan dengan primary window • Untuk komponen window yang jarang digunakan • Sebaiknya tidak muncul sebagai entry pada taskbar • Sebaiknya tidak lebih besar dari 263x263 dialog units Modal VS Modeless • Modal: Interaksi harus diselesaikan sebelum berpindah window • Modeless: Bisa paralel Cascading VS Unfolding • Cascading: beberapa secondary windows ditampilkan secara cascading • Unfolding: tambahan fungsi ditampilkan sebagai bagian dari window
59. 59. Secondary Windows • Modal • Modeless • Cascading • Unfolding
60. 60. Dialog Box • Untuk menyampaikan pesan singkat • Untuk meminta aksi spesifik dari pengguna • Untuk menampilkan aksi yang – Singkat – Jarang dilakukan • Tombol command yang berisi – OK – Cancel – dll
61. 61. Property sheets dan Property Inspectors • Property sheet • Property inspector
62. 62. Property sheets dan Property Inspectors • Message box • Palette window • Pop‐up window
63. 63. Pengorganisasian Fungsi Windows • Pengorganisasian windows untuk mendukung task pengguna; yaitu mendukung the  most common tasks dengan the most efficient sequence of steps • Gunakan primary windows untuk: – Memulai interaksi dan memberikan top‐level context untuk dependent windows – Melakukan interaksi utama • Gunakan secondary windows untuk – Perluasan interaksi – Memperoleh atau menampilkan informasi tambahan berkaitan dengan primary  window • Gunakan dialog boxes untuk – Informasi yang jarang digunakan atau kurang diperlukan – Informasi yang “nice to know”
64. 64. Faktor Penyebab Organisasi Fungsional yang Buruk (Mayhew, 1992) • Penekanan pada kemudahan teknik implementasi daripada analisis mendalam tentang user tasks • Fokus pada aplikasi, fitur, fungsi, atau tipe data daripada tasks • Tim desain terbagi sesuai aplikasi, dengan komunikasi antar tim yang rendah • Terlalu mengikuti petunjuk manual beserta in‐efisiensi di dalamnya pada sistem komputer
65. 65. Panduan Umum Pengorganisasian Windows • Minimalkan jumlah windows yang digunakan untuk tujuan tertentu • Sebisa mungkin, gunakan window tunggal • Pertimbangkan user tasks • Jangan memenuhi window dengan informasi yang  jarang digunakan; letakkan pada secondary window yang jarang diakses
66. 66. Ukuran Windows • Sediakan windows yang cukup besar untuk – Menampilkan semua informasi yang relevan sesuai task – Hindari menyembunyikan informasi penting – Hindari memenuhi layar atau menyebabkan kebingungan visual – Minimalkan kebutuhan scrolling; gunakan sebagian dari layar • Jika sebuah window terlalu besar, tentukan – Apakah semua informasi diperlukan? – Apakah semua informasi berhubungan? • Jika tidak, buat window sekecil mungkin Ukuran window optimal: – Untuk teks, sekitar 12 baris – Untuk informasi alfanumerik, sekitar 7 baris
67. 67. Letak Windows • Dalam meletakkan window di layar, pertimbangkan penggunaan window, dimensi total layar,  dan alasan kemunculan window • Panduan umum: – Letakkan window sehingga tampak secara keseluruhan – Jika window di‐restore, letakkan di tempat muncul terakhirnya – Jika window baru dibuka, letakkan • Di titik perhatian pengguna, biasanya pada kursor / pointer • Pada posisi yang mudah dinavigasi • Tidak menutupi window lain yang penting/ berkaitan – Untuk banyak windows, berikan posisi unik untuk tiap window (cascade) – Jika konfigurasi monitor beragam, tampilkan secondary window pada monitor yang sama dengan primary window – Jika tidak, letakkan secondary window di tengah primary window secara horizontal – Cegah pengguna memindahkan window ke posisi yang sulit di‐reposisi
68. 68. Letak Windows • Dialog box: – Jika dialog box berkaitan dengan seluruh sistem, letakkan di tengah layar – Jaga informasi di layar tetap tampak – Jika sebuah dialog box memanggil dialog box lain, buat box yang pertama dapat dipindahkan kapanpun
69. 69. Web dan Web Browser Browser: user interface untuk World Wide Web Komponen standar browser: back, forward, stop, refresh, home, search, favorites, history Content area, biasanya berisi: Panel navigasi global, di atas Panel navigasi lokal, di kiri Panel navigasi bawah Informasi, data fields, tombol, dll Kemampuan windowing pada content area terbatas: Frames Java scripts
70. 70. Frames • Deskripsi:  – Beberapa bagian layar yang dapat menampilkan banyak dokumen pada sebuah halaman. – Dokumen dapat dilihat, di‐scroll dan di‐update secara independen – Dokumen ditampilkan dalam format tiled • Penggunaan: – Untuk content yang diharapkan sering berubah – Memungkinkan pengguna mengubah content  layar secara parsial – Memungkinkan pengguna membandingkan beberapa informasi • Panduan: – Gunakan sedikit frame (max 3) pada satu waktu – Pilih ukuran berdasarkan tipe informasi yang ditampilkan – Jangan buat pengguna mengubah ukuran frame untuk melihat informasi – Jangan menggunakan lebih dari 1 scrolling region dalam sebuah halaman
71. 71. Pop Up Windows • Mulai muncul di Web pada tahun 1996 • Gunakan dengan seksama • Anekdot:  When a pop‐up window begins to appear,  most people close them before they are  rendered.
72. 72. Manipulasi Langsung • Ragam dialog  yang  menyajikan langsung suatu aktifitas oleh sistem kepada pengguna sehingga aktifitas itu akan dikerjakan oleh sistem komputer ketika pengguna memberikan langsung instruksi lewat manipulasi langsung dari semacam kenyataan maya (virtual reality) yang  terpampang lewat tampilan yang muncul di layar. • Penerapan manipulasi langsung : ‐ kontrol proses contoh : sistem pembangkitan dan penyaluran listrik yang terhubung dengan sistem secara online ‐ Simulator  Adalah sistem miniatur yang  mencoba menirukan kerja suatu sistem yang  berskala sangat besar atau sangat kecil jika dilihat dari kacamata orang awam. contoh : Simulator penerbangan
73. 73. Manipulasi Langsung (Lanjutan) ‐ Kontrol lalu lintas penerbangan Dunia 3 dimensi tempat sebuah pesawat sedang menjelajahi dunia akan diterjemahkan ke dalam layar 2 dimensi yang ada di hadapan seorang operator. Lewat tampilan 2 dimensi yang merefleksikan dunia 3 dimensi itulah seorang operator dapat mengontrol lalu lintas penerbangan ‐ Perancangan berbantuan komputer Atau (Computer Aided Design) contoh : penggunaan program AutoCAD,
74. 74. Manipulasi Langsung (Lanjutan) Keuntungan Kerugian • mempunyai analogi yang  jelas dengan suatu pekerjaan nyata • mengurangi waktu pembelajaran • memberikan tantangan untuk eksplorasi pekerjaan yang nyata • penampilan visual yang bagus • mudah dioperasikan • tersedianya berbagai perangkat bantu u/  merancang ragam dialog  manipulasi langsung • memerlukan program  yang  rumit dan berukuran besar • memerlukan tampilan grafis berkinerja tinggi • memerlukan piranti masukan seperti mouse, trackball • memerlukan perancangan tampilan dengan kualifikasi tertentu
75. 75. Dialog Berbasis Interaksi Grafis • Agak susah dibedakan dengan antarmuka berbasis manipulasi langsung. • Secara umum,  keuntungan dan kerugian teknik antarmuka berbasis interaksi grafis sama dengan keuntungan dan kerugian menggunakan manipulasi langsung • Contoh : Pada Microsoft Word ketika kursor mendekati suatu ikon akan muncul pesan yang menunjukkan arti ikon tsb.