INTERAKSI MANUSIA DAN KOMPUTER

  

INTERAKSI MANUSIA DAN KOMPUTER

DESAIN DIALOG

DIALOG STYLE 1) Command Language 2) WIMP 3) Direct Manipulation (DM) 4) PDA & Pen 5) Speech dan bahasa natural

USER INTERFACE SOFTWARE

  

LISNAWATI _065108086

Jurusan Ilmu Komputer

Fakultas Matematika dan Ilmu Pengetahuan Alam

  

Universitas Pakuan

Bogor

2010

DIALOG STYLE

  Dialog dalam arti umum adalah percakapan antara dua kelompok atau lebih. Sedangkan dialog dalam konteks perencanaan user interface adalah struktur dari percakapan antara user dan

  sistem komputer.

   Bahasa komputer dapat dibagi atas tiga tingkatan: 1.

  Leksikal merupakan tingkat yang paling rendah yaitu bentuk icon pada layar 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. Semantik yaitu arti dari percakapan yang berkaitan dengan pengaruhnya pada struktur data internal komputer dan/atau dunia eksternal. pada bahasa manusia, ekuivalen dengan arti yang berasal dari para partisipan dalam percakapan

  Dalam user interface, istilah dialog hampir mirip dengan tingat sintaksis, tapi juga meliputi sifat-sifat leksikal.

  Dialog manusia-komputer

  Berbeda dengan dialog antar manusia pada umumnya, dialog dengan komputer biasanya

  terstruktur dan terbatas

  Beberapa ciri-ciri dari dialog terstruktur yang nantinya ditemukan dalam dialog komputer:

   menyebutkan beberapa hal tertentu secara berurutan

   beberapa bagian dari dialog dilakukan secara bersamaan (concurrently)

   dialog berikutnya tergantung pada respons dari partisipan

   dialog terstruktur biasanya tidak langsung menuju pada arti kata-katanya / semantik tapi pada level sintaksis

PROSES PERANCANGAN DIALOG

  Advice: 1.

  Rangkaian Dialog menggambarkan struktur tugas, i.e. 1 rangkaian dialog 1 goal achieve

  2. Beberapa rangkaian dialog tambahan digunakan untuk user support, mis. help system, tutorial sub-sytem

  3. Rangkaian dialog diurutkan sesuai dengan struktur tugas.

  DFD untuk desain dialog _{Task Design Task Specification Interface Access & Modules Control} Specify UI Specification Add User _{Prototype Using UI Design}

_{Standard designs}

Design Metaphor _designs component _{Dialogue Design GUI design Metaphor & Interaction Design GUI Evaluation specification UI program Checked design Verify Detail} Dialogue network _{Dialogue Implementation} Code and

  Prinsip yang digunakan dalam desain dialog adalah membagi sistem menjadi beberapa bagian yang disebut module.

  Contoh: Sistem Pemesanan Buku di Perpustakaan _Reservation

  Borrower details Book reservation _{number details title reservatio} Reader Reader First More _{(input) (display n ) (input) (display code details} Title Title Titles _{(input) (display code details} Title Title

  Biasanya user access bukan merupakan bagian dari task desription, tapi harus dimasukan dalam sistem yang baru. Empat hal utama dalam desain yang harus diperhatikan dalam GUI metaphor: a.

  Pemilihan dan representasi dari conceptual metaphor.

  b.

  Representasi dari obyek interaktif dalam metaphor.

  c.

  Perancangan manipulasi untuk mengimplementasikan user action.

  d.

  Desain micro-metaphor untuk control action dan representasi dari commands. Dalam mendesain dialog, diperlukan deskripsi yang terpisah dari program secara keseluruhan.

  Mengapa perlu digunakan notasi deskripsi dialog yang terpisah?

   Agar mudah dianalisa  Pemisahan elemen-elemen interface dari logika program (semantik)  Apabila notasi dialog ditulis sebelum program dibuat, maka notasi tersebut bisa membantu desainer untuk menganalisa struktur yang diajukan.

NOTASI DIAGRAMATIK

   Notasi diagramatik paling sering digunakan dalam desain dialog  Kelebihan:

• Kekurangan:

  Memungkinkan desainer untuk melihat secara sekilas struktur dialog

• Contoh notasi diagramatik adalah :

  Sulit untuk menjelaskan struktur dialog yang lebih luas dan kompleks

   State transition networks (STN)

   Harel's state charts

   Traditional flow diagrams

   JSD diagrams

  State Transition Network (STN) Komponen STN:

• Lingkaran Menggambarkan “state” dari sistem.
• Tanda Panah Yang terdapat antara state disebut juga transisi. Tanda panah ini diberi label yang menjelaskan tentang tindakan user yang menyebabkan transisi dan respon dari sistem.

  STN dapat menggambarkan beberapa pilihan dialog:

  1) Urutan tindakan dan respon dari system

  2) Pilihan bagi user (Choice)

  Dari 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. 3)

  Iterasi Dari 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

  Hierarchical State Transition Networks Struktur Hierarchical STN mirip dengan STN, namun memiliki tambahan berupa gabungan state.

  Penggunaan hirarki STN ini, seperti menggabungkan beberapa STN ke dalam satu diagram besar, sehingga model ini dapat digabungkan untuk sistem-sistem yang besar. STN Hirarki dapat digunakan untuk mendeskripsikan suatu sistem yang lengkap.

  Harel’s State Charts

  Dapat digolongkan sebagai kelompok STN. Dibangun untuk menspesifikasikan secara visual sistem reaktif yang kompleks dan mampu mengakomodasi masalah seperti concurrency dan escape.

  Flowchart - Flowchart digunakan untuk mendeskripsikan dialog yang sederhana.

• Flowchart mudah dimengerti dan simple.

  Contoh penggunaan flow chart dalam desain dialog: _{Delete D1 Employee no. : _______} Please enter C1 _{read record} Delete D2 Delete D3 _{Name : Alan Dix delete? (Y/N) : ________ delete? (Y/N) : ________}

_{Dept : Computing Dept : Computing}

_{Name : Alan Dix}

_other

Please enter Y or N _Y C2 other _{answer? N Finish} C3 _{delete record} Finish

  Keterangan: Persegi panjang adalah screen yang digunakan untuk berkomunikasi dengan user Segi-enam adalah proses dan keputusan yang dibuat oleh sistem Elips "Finish" berarti kembali ke menu utama Tape berarti membaca atau mengubah database

   Perulangan  Implementasi yang mudah dan hemat. Tujuan:

   Penggantian dari sintaks command language dengan manipulasi langsung pada objek.

   Cepat, dapat dikembalikan, peningkatan aksi dimana efeknya dapat segera terlihat.

   Kesinambungan tampilan dari objek-objek dan aksi-aksi yang dilakukan.

   kekurangan.

   Melakukan tugas perancangan dapat membantu meminimalkan

   Penamaan dan pemberian singkatan yang baik.

   Konsistensi.

   Dapat melakukan kegiatan meskipun di luar batas.

  Jackson Diagram

   Lebih cepat.

  Contoh: MS-DOS shell, UNIX shell, dBase. Keuntungan:

  JENIS-JENIS DIALOG : 1) Command Language Merupakan paradigma user interface yang pertama kali.

   Modulary dalam desain dialog. dialog  event handling dalam bahasa pemrograman (misal VB)

   Sequence dalam notasi dialog dapat langsung ditransformasikan ke bahasa pemrograman dalam bentuk sequence dan selection.

  Link to Programming Language

  JSD (Jackson Structured Design) diagram digunakan untuk berbagai aspek dari analisis tugas dan notasi dialog.

2) WIMP (Window, Icon, Menu, Pointer) Berfokus pada Menus, Buttons, Forms, Icons. 3) Direct Manipulation (DM) Definisi:

• 4) PDA & Pen

   Tombol-tombol yang lebih sedikit, interaksi melalui “pen” (atau

   Input dapat berupa suara atau dari keyboard.

   Memberi arti pada kata-kata.

  Natural Language:

   Pemahaman bahasa natural.

   Pengenalan suara.

   Pengenalan speaker.

  Input speech:

  Mulut, tenggorokan, bibir membentuk bunyi.

   Palmtop vs Handheld.

   dan OS yang lebih baik.

   Peningkatan  wireless, warna, memory yang lebih besar, CPU

   stylus).

   Tampilan yang lebih kecil (160x160 atau 320x240).

  Keuntungan:

   Menjadi lebih umum dan penggunaan yang lebih luas.

   Tidak bagus pada: pengulangan, penyimpanan history, tugas tertentu (seperti merubah semua huruf cetak miring menjadi cetak tebal), variabel.

   Tidak ada penjelasan otomatis.

   Penggunaan mouse dapat lebih lambat daripada pengetikan.

   Tampilan visual mungkin dapat disalah artikan.

   Harus mempelajari arti dari komponen-komponen yang tampak pada layar.

   Penggunaan seluruh ruang pada layar.

  Kekurangan:

   Membatasai beberapa jenis kesalahan yang dapat terjadi.

   Fleksibel  Menyediakan konteks dan tampilan yang cepat dari feedback, sehingga user dapat mengetahui apakah tujuan telah tercapai.

   WYSIWYG

   Mudah dipelajari dan diingat, khususnya untuk pemula.

5) Speech dan bahasa natural Speech (Suara) Adalah getaran pada suara menimbulkan bunyi “ahh”.

  Keuntungan: Mudah dipelajari dan diingat.

   Lebih kuat.

   Cepat, efisien (tidak selalu).

   Layar yang kecil.

   Kekurangan: Belum dapat bekerja dengan baik.

   Mengasumsikan pengetahuan dari permasalahan.

   Membutuhkan keahlian pengetikan. Peningkatan tidak terlihat.

   Implementasi membutuhkan biaya yang mahal.

   USER INTERFACE SOFTWARE Alat Bantu User Interface: Aplikasi apa yang biasa digunakan oleh programmer untuk membuat program.

  Kombinasi dari objek-objek interface dan perilaku manajemen. Sekarang sudah object-oriented. Pustaka dari komponen-komponen perangkat lunak dan routines yang digunakan oleh programmer:

    Macintosh : Mac Toolbox, MacApp Windows : Windows Developer’s Toolkit

  Xwindows : Xtoolkit & Motif

   Java : Swing 

  Bagaimana cara kerja toolkit?

  Apa yang sebenarnya disediakan olehnya? Bagaimana mengaturnya? User mengadakan aksi, berinteraksi dengan interface.

• Aksi-aksi tersebut harus disampaikan kepada aplikasi dalamcara-cara yang penuh
• arti.
• Model Seeheim

  Aplikasi melakukan aksi yang sesuai, mungkin memperbaharui tampilan.

  Model Percakapan

  Model Objek UI adalah kumpulan objek yang saling berinteraksi.

    User secara langsung memanipulasi objek-objek tersebut. Objek-objek bertanggung jawab untuk mentransmisikan aksi-aksi user ke aplikasi dengan

   cara yang berguna _.

OBJECT-ORIENTED SYSTEMS

   Pemrograman GUI Java dikerjakan dengan AWT dan Swing.

   Lebih banyak model terdistribusi.

   Aksi utama disini adalah mengirimkan event ke objek-objek sebagai pesan.

   Pendelegasian yang penting _ dapat membuat beberapa objek tertentu bertanggung jawab untuk menangani event.

  GUI Builder Tools (Alat Pembuat GUI)

   Mengapa membangun interface grafis dengan perintah-perintah tekstual?

   Mengapa tidak menunjukkan apa yang Anda suka?

   Visual builder tools: Visual Basic, Visual C++, Borland Delphi, Symantec Café.

  Metode-metode Tool

   Area kerja (interface yang sedang dibangun).

   Pindahkan dan letakkan interaktor ke dalam area kerja.

   Spesifikasi lokasi, warna, tampilan, dsb.

   Biasanya menyediakan mode Build/Pengujian.

DAFTAR PUSTAKA 1.

  Wikipedia.com//Indonesia//Notasi desain Dialog 2. Dialog Desain//Interasksi Manusia dan Komputer//E-Book Scribd.com