Notasi dialog dan desain

NOTASI DIALOG DAN DESAIN

A. Pengertian Dialog

Dialog dalam arti umum yaitu percakapan antara dua kelompok atau lebih, sedangkan dialog dalam konteks perancangan user interface yaitu struktur dari percakapan antara user dan komputer.
Pada IMK dan komputer, bahasa komputer dapat dibagi atas tiga tingkatan;
1. Leksikal merupakan tingkat yang paling rendah yaitu bentuk icon pada layar tombol yang ditekan. Pada bahasa manusia, ekuivalen dengan bunyi dan ejaan suatu kata.
2. Sintaksis yaitu urutan dan struktur dari input dan output. Pada bahasa manusia, ekuivalen dengan grammar suatu kalimat.
3. Simantik yaitu arti dari percakapan yang berkaitan dengan pengaruhnya pada struktur data internal komputer dan dunia eksternal.Pada bahasa manusia, ekuivalen dengan arti yang berasal dari partisipan dalam percakapan.
Dialog manusia dan komputer pada umumnya berbeda dengan dialog antar manusia, dialog dengan komputer biasanya terstruktur dan terbatas.
Karakteristik Dialog User- Sistem Komputer;
• Partisipan harus menyebutkan dialognya dalam urutan yang jelas.
• Beberapa dialog telah ditetapkan sebelumnya.
• Beberapa bagian tertentu dari dialog dilakukan secara bersamaan.
• Umumnya dialog berikutnya bergantung pada respon partisipan.

B. Notasi Desain Dialog

Dalam desain dialog harus diperhatikan beberapa hal yaitu;
1. Rangkaian dialog mempresentasikan struktur tugas.
2. Beberapa rangkaian dialog tambahan digunakan untuk user support, misalnya help system, tutorial sub system .
3. Rangkaian dialogdiurutkan sesuai struktur tugas

DFD Desain dialog :

C. Notasi Diagramatik

Notasi diagramatik merupakan bentuk yang paling sering digunakan dalam desain dialog. Kelebihan dalam bentuk ini adalah memungkinkan desainer untuk melihat secara sekilas struktur dialog sedangkan kelemahannya sulit untuk menjelaskan struktur dialog yang lebih luas dan kompleks.
Ada 5 metode yang digunakan untuk notasi dramatic, yaitu;
1. State Transition Network (STN).
Komponen STN:
• Lingkaran, menggambarkan “state” dari system.
• Tanda panah, yang terdapat antara state disebut juga transisi.
Tanda panah ini diberi label yang menjelaskan tentang tindakan user yang menyebabkan transisi dan response dari system.

STN dapat menggambarkan beberapa pilihan dialog:
• Urutan tindakan dan response dari sistem (sequence)
• Pilihan bagi user (choice)
contoh: dari state Menu, user dapat memilih “Circle” sehingga sistem berpindah ke state Circle-1 sehingga option “Circle” highlight; alternatif lain, user dapat memilih “Line” sehingga sistem berpindah ke state Line-1.
• Iterasi (iteration)
contoh: terdapat pilihan dari state Line-2: user dapat melakukan double click pada suatu titik dan menyelesaikan polyline, berpindah ke state Finish; atau user dapat melakukan single click yang berarti menambah titik baru pada polyline sehingga terjadi transisi kembali ke state Line-2.

2. Hirarchical State Transition Network
Karakteristiknya yaitu;
• Digunakan untuk deskripsi sistem yang lebih lengkap.
• Mirip dengan STN, dengan fitur tambahan berupa gabungan state (composit state).
• Digunakan untuk system yang besar.
Contohnya; Pada drawing tool terdapat 3 sub-menu yaitu grapich, text dan paint.

3. Harel State Chart
Karakteristiknya yaitu;
• Digunakan untuk spesifikasi system reaktif yang kompleks secara visual.
• Mampu mengakomodasi masalah seperti concurrency dan escape.
Contohnya; Panel kendali TV dengan 5 tombol kendali ( On, Off, Mute, Set, Reset).
4. Flow Chart
Karkteristiknya yaitu;
• Mendeskripsikan dialog yang sederhana .
• Sederhana dan mudah dimengerti.
• Merefleksikan sudut pandang programer dari pada user.
5. JSD Diagram
Karakteristiknya yaitu;
• Jackson Stuctured Design digunakan untuk berbagi aspek dari analisis tugas dan desain dialog.
• Digunakan untuk system yang sederhana, terbatas dan berbasis menu.

D. NOTASI TEKSTUAL

Dalam notasi tekstual ada 3 metode yang digunakan, yaitu;
1. Tata Bahasa / Grammer
Notasi dialog tekstual focus pada aksi yang dilakukan oleh user. Ada 2 jenis grammer yaitu BNF, Regular Expression.
Karakteristiknya yaitu;
• Regular Expression banyak digunakan untuk mendeskripsikan kriteria pencarian tekstual yang kompleks.
• Regular Expression digunakan untuk analisis leksikal bahasa pemograman
• Regular Expression dan BNF tidak digunakan untuk mere-presentasikan councurency dialog.

2. Aturan Produksi
Bentuk umumnya if conditional then action, karena menggunakan if kondisi then.
Karakteristiknya yaitu;
• Berorientasi pada event, state atau gabungan keduanya,
• Baik untuk task parallel bukan task sequence.
3. CSP dan Proses Aljabar
Digunakan untuk proses sekunsial (urut) pada natural langange based dan bersama-sama . Misalnya dalam penggunaan mouse, keyboard dan draw menu secara bersama-sama.

E. SEMANTIK DIALOG

Biasanya structur dialog bersifat sintaksis, dialog semantic memberi tambahan catatan dialog formal mengenai arti suatu aksi dan user dibiarkan menginterpretasikan sendiri.
Ada 2 aspek dalam dialog aplikasi dan user, pendekatan yang dilakukan ;
1. Spesifikasi notasi semantik untuk spesial purpose
2. Berhubungan dengan bahasa pemrograman dengan menyertakan beberapa koding dalam notasi dialog
3. Berhubungan dengan spesifikasi notasi formal.

F. DESAIN DAN ANALISIS DIALOG

Ada 3 pendekatan dalam perancangan dialog:
1. Berfokus pada aksi user; apakah terspesifikasi dengan baik
2. Memperhatikan kondosi dialog
3. Isu presentasi dan leksikal; bagaimana tampilan dan fungsi tombol

Dasar dasar IMK

KONSEP DASAR IMK (INTERAKSI MANUSIA DAN KOMPUTER)

Latar Belakang

Meningkatnya kebutuhan informasi dan kemajuan ilmu pengetahuan mendorong para ilmuwan untuk terus merancang dan mengembangkan komputer. Banyak sekali perkembangan yang terjadi pada komputer, diantaranya :

·                     Komputer yang awalnya berukuran besar dan mahal kini beralih menjadi lebih kecil dan murah.

·                     Komputer yang awalnya digunakan oleh orang-orang tertentu (scientists dan engineers) kini digunakan oleh semua orang.

Selain itu juga dibutuhkan user interface/man-machine interface yang interaktif pada komputer agar nyaman digunakan oleh manusia.

Pada tahun 70-an user interface/man-machine interface, yaitu aspek-aspek sistem yang membuatuser dapat berhubungan langsung dengan sistem komputer, menjadi perhatian utama para peneliti serta perancang sistem. Perusahaan-perusahaan komputer berusaha memperbaiki tampilan agar menjadi user friendly.

Pengertian IMK

IMK atau HCI (Human-Computer Interaction) adalah disiplin ilmu yang berkaitan dengan perancangan, evaluasi dan implementasi dari sistem komputer interaktif untuk digunakan manusia dan studi tentang fenomena/aspek-aspek penting di sekelilingnya. Sedangkan interaksi manusia dan komputer sendiri adalah serangkaian proses, dialog dan kegiatan yang dilakukan oleh manusia untuk berinteraksi dengan komputer yang keduanya saling memberikan masukan dan umpan balik melalui sebuah antarmuka untuk memperoleh hasil akhir yang diharapkan.

Sistem harus sesuai dengan kebutuhan manusia dan dirancang berorientasi kepada manusia sebagai pemakai.

Tujuan IMK

IMK bertujuan untuk membangun atau memperbaiki safety, utility (finctionality), effectiveness, efficiency dan usability sistem yang berkaitan dengan komputer.

Faktor kemudahan pengoperasian (usability) menjadi konsep penting dalam IMK, meliputi :

·                     Learnability (ease or learn)

·                     Throughput (ease of use)

·                     Flexibility

·                     Attitude

Untuk mencapai itu semua dibutuhkan cara sebagai berikut:

1.             Memahami faktor-faktor yang berkaitan dengan bagaimana manusia menggunakan teknologi komputer (psikologi, ergonomik, sosial dan organisasi).

2.             Membangun teknik-teknik dan tools untuk membantu perancang yakin bahwa sistem komputer tersebut sesuai untuk aktivitas manusia yang akan menggunakannya.

3.             Mencapai interaksi yang efisien, efektif dan aman (baik interaksi individual antara manusia dan komputer maupun interaksi kelompok).

Tantangan IMK

Perubahan teknologi yang cepat, konflik dalam tujuan perancangan, banyaknya komponen yang berbeda (termasuk area studi) menjadi tantangan untuk membentuk IMK. Perancangan dituntut untuk mengikuti perkembangan teknologi yang pesat serta menghasilkan IMK yang baik dengan menggunakan fungsi-fungsi potensial teknologi baru.

IMK Sebagai Bidang Interdisipliner

IMK dapat dikatakan sebagai salah satu bidang yang merupakan gabungan dari berbagai bidang, yaitu:

·                     Teknik Elektronika, membantu kita untuk mempelajari aspek-aspek yang berhubungan dengan perangkat keras komputer.

·                     Ilmu Komputer, membantu kita untuk mempelajari aspek-aspek yang berhubungan dengan perangkat lunak komputer.

·                     Psikologi, membantu kita untuk memahami perilaku, persepsi, pengolahan kognitif dan keterampilan motorik (psikologi kognitif dan perilaku). Juga memberikan dasar-dasar teknik evaluasi formal untuk mengukur unjuk kerja dan opini tentang sistem manusia dan komputer (psikologi eksperimen).

·                     Perancangan Grafis dan Tipologi, menjadi salah satu kunci dalam menunjang keberhasilan sistem manusia dan komputer seperti ungkapan "one picture says more than thousands words".

·                     Linguistik, membantu untuk menjembatani kesenjangan antara bahasa manusia dan bahasa komputer.

·                     Ergonomi, berhubungan dengan lingkungan fisik (komponen fisik, penataan tempat) yang dapat membantu kita untuk mendapatkan lingkungan kerja yang nyaman.

·                     Antropologi, membantu merekomendasikan model kerja kelompok yang baik menggunakan sistem komputer.

·                     Sosiologi, membantu mengkaji dampak sosial atas sistem manusia dan komputer.

Media Antarmuka Manusia dan Komputer

·                     Media Tekstual adalah bentuk sederhana dialog atau komunikasi antara manusia dan komputer yang hanya berisi teks dan kurang menarik. Salah satu contoh antarmuka manusia dan komputer berbentuk teks yang menggunakan bahasa pemrograman PASCAL adalah readln dan writeln.

·                     Media GUI (Graphical User Interface) adalah bentuk dialog atau komunikasi antara manusia dan komputer yang berbentuk grafis dan sangat atraktif. Contoh antarmuka manusia dan komputer yang berbentuk grafis menggunakan pemrograman visual (Visual Basic, Visual Foxpro, Delphi dan lain-lain)

Pengembangan IMK

Hal-hal yang perlu diperhatikan dalam pengembangan antarmuka adalah:

·                     Pemahaman tentang fungsi -fungsi mekanis manusia.

·                     Informasi mengenai karakteristik dialog. Menyangkut ragam dialog, struktur, materi (teks/grafis), tanggapan waktu dan kecepatan tampilan.

·                     Penggunaan prototipe untuk mengukur tingkat usability rancangan antarmuka yang sedang dibuat.

·                     Teknik evaluasi terhadap prototipe, yang dapat berupa evaluasi oleh pakar IMK, metode empirik dengan pengamatan langsung maupun metode survei dengan wawancara secara terstruktur terhadap pengguna.

Template tabel dalam Html bentuk Dinamis

<html>
<body>
<tr>
<table border="1" width="100%" height="10%">
<tr>
<table border= "1" width="100%" height="5%">
</tr>
<tr>
<table border="1" width="100%" height="50%">
</tr><html>
<body>
<tr>
<table border="1" width="100%" height="10%">
<tr>
<table border= "1" width="100%" height="5%">
</tr>
<tr>

<table border="1" width="100%" height="50%">
</tr>
<tr>
<td><td width="70%" height="30%">

</tr>
V</body>
</html>
<tr>
<td><td width="70%" height="30%">

</tr>
</table>
</body>
</html>

 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.