Menu, Formulir, dan Kotak Dialog

A.  Organisasi Semantik Menu

1. Single Menu

– Binary Menus

Binary Menu

– Multiple Selection Menus

Multiple Selection Menus

– Multiple – item menus / Radio Buttons

Radio Buttons

– Pull-down dan Pop-up Menus

Pull Down Menu

Pop-up Menus

– Scrolling dan two-dimensional Menus

Scrolling dan 2D Menus

– Alphasliders

AlphaSliders

– Embedded links

Links

– Iconic Menus, Toolbars, or Palettes

Iconic Menus, and Toolbars

B.  Urutan Presentasi Item

– Ketika item-item menu telah dipilih, urutan presentasinya perlu diperhatikan.

– Beberapa dasar pengurutan :

1. Waktu (kronologis)

2. Numeris (meningkat atau menurun)

3. Sifat fisik (panjang, luas, volume)

– Banyak kasus pengurutan tidak mempunyai aturan pengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan :

1. Pengurutan alfabetis istilah-istilah.

2. Pengelompokan item-item serupa.

3. Yang sering digunakan ditempatkan di awal.

4. Yang paling penting ditempatkan di awal.

C. Pergerakkan Cepat pada Menu

– Menu dengan typeahead

~ Penting jika menu sudah sering digunakan sementara waktu respons atau kecepatan tampil lambat.

~ Pendekatan BLT (Bacon, Lettuce, Tomato sandwich) : pembentukan mnemonik dari penggabungan    huruf-huruf pilihan menu.

– Nama menu atau bookmarks

~ Penamaan sederhana memudahkan pemakai mengakses menu secara langsung.

~ Web browser menyediakan bookmarks atau favourites sebagai jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.

– Menu macros

~ Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.

~ Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.

D.  Tata Letak Menu

– Judul

~ Menu tunggal : judul yang deskriptif.

~ Menu tree : nama pilihan harus sama dengan judul halaman yang dipanggil.

– Penamaan pilihan menu

~ Gunakan peristilahan yang dikenal dan konsisten.

~ Pastikan item dapat dibedakan dari pilihan lain.

~ Gunakan pemilihan kata yang konsisten dan singkat.

~ Tempatkan kata kunci di kiri.

– Tata letak dan desain grafis

~ Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.

~ Buat pedoman/panduan untuk komponen-komponen : judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.

E.  Formulir

– Formulir isian cocok dipakai jika banyak field data dibutuhkan.

– Pendekatan formulir isian menarik karena :

~ Kelengkapan penuh informasi terlihat.

~ Seperti formulir kertas.

~ Sedikit petunjuk diperlukan.

Contoh Formulir

F. Kotak Dialog

– Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI modern.

– Perlu diperhatikan :

~ Tata letak internal kotak dialog.

~ Hubungan eksternal kotak dialog.

Dialog box pada PowerQuest PartitionMagic

Dialog Box pada system properties

Bahasa Perintah dan Bahasa Alami

Tujuan Tingkat Lebih Tinggi :

Ø  Hubungan yang dekat antara realitas dan notasi.

Ø  Kemudahan dalam melaksanakan manipulasi yang relevan dengan tugas.

Ø  Kompatibilitas dengan notasi yang telah ada.

Ø  Fleksibilitas untuk mengakomodasi pemakai pemula dan ahli.

Ø  Ekspresif, mendukung kreativitas.

Ø  Daya tarik visual.

Kendala-kendala Penggunaan Bahasa :

Ø  Kapasitas manusia mengingat notasi.

Ø  Kecocokan antara ingatan dan media penampil.

Ø  Kemudahan berbicara (mengucapkan).

Bahasa Komputer :

Bahasa komputer yang efektif harus tidak hanya merepresentasikan tugas pemakai dan memenuhi kebutuhan manusia untuk berkomunikasi, tetapi juga harus selaras dengan mekanisme perekaman, manipulasi, dan penampilannya di komputer.

Beberapa Contoh Bahasa Komputer :

Ø  Bahasa pemrograman:

Ø  Pemakaian noninteraktif: Fortran, COBOL, ALGOL, PL/I, Pascal.

Ø  Inkremental: BASIC, LISP, APL, PROLOG.

Ø  Kompilasi dan eksekusi cepat: C.

Ø  Pemrograman tim, sharing, reusability: ADA, C++.

Ø  Jaringan, cross-platform: Java.

Ø  Scripting World Wide Web: PHP, JavaScript, VBScript.

Simple Command Set :

Ø  Setiap perintah dipilih untuk melaksanakan tugas (task) tunggal, jumlah perintah sama dengan jumlah tugas.

Ø  Contoh: vi editor (Unix):

Ø  0                      : go to start of line

Ø  $                      : go to end of line

Ø  (space) : go right one space

Ø  H                     : go left one space

Ø  W                    : forward one word

Ø  b                      : backward one word

Ø  )                       : forward one sentence

Ø  (                       : backward one sentence

Hirarki Command structure : Perangkat penuh perintah disusun menjadi struktur tree, seperti menu tree.

Manfaat Struktur : Membantu proses belajar manusia, pemecahan masalah, dan ingatan.

Membantu task concepts, computer concepts, dan rincian sintaktik bahasa perintah.

Simbol lawan Keyboard :

• Penggunaan keyword lebih mudah daripada simbol.
• Pemakai berpengalaman dapat mengembangkan keterampilan untuk menggunakan notasi aneh sehingga variasi sintaktik tidak banyak berpengaruh.

Symbol Editor                       Keyword Editor

FIND:/TOOTH/-1                  BACKWARD TO “TOOTH”

LIST;10                                   LIST 10 LINES

RS:/KO/,/OK/;*                      CHANGE ALL “KO” TO “OK”

Struktur Hierarkis dan Kongruensi :

Kongruen: pasangan yang berlawanan secara selaras dan berarti (simetris).

Struktur hierarkis dan kongruensi dapat membantu ingatan pemakai.

Sumber struktur yang terbukti bermanfaat meliputi:

Konsistensi posisi

Konsistensi tatabahasa

Pasangan yang kongruen

Bentuk hierarkis

Penamaan Perintah :

• Penamaan penting untuk proses belajar, pemecahan masalah, dan ingatan.
• Ketertentuan (specificity) vs keumuman (generality):

1.Istilah-istilah yang spesifik lebih deskriptif dan lebih mudah diingat.

2.Istilah-istilah yang umum lebih dikenal dan mudah diterima.

Strategi Penyingkatan Perintah :

• Pemotongan sederhana.

directory ® dir, delete ® del.

• Buang huruf hidup dengan pemotongan sederhana.

check disk ® chkdsk, move ® mv.

• Huruf pertama dan terakhir.

sort ® ST, block ® BK.

• Huruf awal setiap kata dalam frase.

change directory ® cd, switch user ® su.

• Singkatan standar dari konteks lain.

quantity ® QTY, transfer ®  XFER,
backup ® BAK.

• Fonik: fokus pada suara.

execute ® XQT, I seek you ® ICQ,
connection ® CNXN.

Menu Perintah :

• Untuk mengatasi beban penghafalan perintah, beberapa perancang memberikan daftar perintah yang tersedia, dalam format yang disebut menu perintah.
• Contoh:
  • Lynx

H)elp O)ptions P)rint G)o M)ain screen Q)uit /=search [delete]=history list

• • Pico

^G Get Help  ^O Writeout  ^R Read File
^X Exit      ^J Justify   ^W Where is

• • WordStar

–Cursor Movement–    | -Delete-
^S char left ^D char right |^G char
^A word left ^F word right |DEL chr lf
^E line up   ^X line down  |^T word rt
–Scrolling–        |^Y line
^Z line down ^W line up    |
^C screen up ^R screen down|

Bahasa Alami di Dunia Komputer :

• Natural-language interaction
  • Operasi komputer menggunakan bahasa alami manusia (mis. Inggris) untuk memberi instruksi dan menerima respons.
• Natural-language queries
  • Operasi pada database relasional.
  • Masih lebih buruk daripada SQL.
  • Contoh: INTELLECT, Symantec Q&A.
• Text-database searching
  • Untuk mencari database tekstual.
  • Contoh: Ask Jeeves (ask.com).

Pedoman Bahasa Perintah :

• Buat model objek dan aksi yang eksplisit.
• Pilih nama yang berarti, spesifik, dan dapat dibedakan.
• Coba mencapai struktur hierarkis.
• Gunakan struktur yang konsisten (hierarki, urutan argumen, aksi-objek).

Manipulasi Langsung dan Lingkungan Maya

Manipulasi Langsung

• Representasi visual dari “dunia aksi” :

–          Objek dan aksi terlihat.

–          Mengundang pemikiran analogis.

• Aksi yang cepat, incremental, dan dapat dilibatkan.
• Mengetik diganti dengan menunjuk dan memilih.
• Hasil aksi langsung terlihat.

Kelebihan manipulasi langsung

• Kompatibilitas kendali dan tampilan.
• Lebih sedikit sintaks, karena itu tingkat kesalahan berkurang.
• Lebih banyak pencegahan kesalahan.
• Lebih cepat dipelajari dan lebih mudah diingat.
• Mendorong penjelajahan.

Kekurangan manipulasi langsung

• Memakan lebih banyak sumber daya system.
• Beberapa aksi menyusahkan.
• Teknik makro sering lemah.
• Sulit dicatat dan ditelusuri.
• Sulit digunakan oleh pemakai yang penglihatannya terganggu.

Contoh sistem manipulasi langsung :

1.      Command-line vs Display Editor vs Word Processors

• Dengan display editor kinerja meningkat dan waktu belajar berkurang.
• Word processor bersifat WYS/WYG.

Kelebihan WYS/WYG word processor :

–          Menampilkan sehalaman penuh teks.

–          Menampilkan dokumen dalam bentuk sebagaimana akan terlihat pada bentuk cetakan.

–          Menampilkan aksi kursor yang terlihat.

–          Mengendalikan kursor dengan cara yang jelas secara fisik dan alami intuitif.

–          Menggunakan iko berlabel.

–          Menampilkan hasil aksi segera.

–          Memberikan respons dan tampilan yang cepat.

–          Memungkinkan aksi dibatalakan.

Command Line

Word Processor

Teknologi yang diturunkan dari pengolah kata

• Integrasi grafik, spreadsheet, animasi, foto.
• Desktop publishing software, Adobe PageMaker, Corel Ventura.
• Slide-presentation software, Microsoft PowerPoint.
• Hypermedia environments, WWW, HyperCard.
  

  Adobe PageMaker

2.      Spreadsheet

• Lembar kerja yang menampilkan data yang dapat dimanipulasi dalam bentuk kolom dan baris.
• Mendukung formula, makro, grafik.

Contoh :

VISICALC, Microsoft Excel, Lotus 1-2-3, Lotus Improv.

Spreadsheet

3.      Spatial Data Management

• Representasi spasial dalam bentuk peta.
• Digunakan dalam system informasi geografis.

Contoh :

ArcView GIS dari ESRI, Inc.

ArcView GIS

4.      Video Games

• Bidang aksi visual yang membangkitkan minat.
• Perintah berupa aksi fisik dan hasilnya langsung terlihat.
• Kini berkembang pada PC maupun mesin game seperti Sony Playstation 1-2-3, bahkan handphone.

5.      Computer-Aided Design (CAD)

• Untuk merancang mobil, rangkaian elektronik, arsitektur, pesawat terbang.
• Aplikasi ini menyenangkan untuk digunakan karena objek yang diinginkan dapat dimanipulasi secara langsung.
  

  CAD

6.      Office Automation

• System office automation dewasa ini menggunakan prinsip-prinsip manipulasi langsung.

Contoh : GUI, Windows, Mac OS.

GUI

Masalah – masalah dengan manipulasi langsung :

–          Representasi visual atau visual dapat terlalu menyebar.

–          Pemakai harus mempelajari arti komponen-komponen representasi visual.

–          Representasi visual dapat menyesatkan.

–          Mengetik perintah di keyboard bisa lebih cepat.

Pemikiran Visual dan ikon

Ikon adalah gambar atau symbol yang mewakili suatu konsep. Arah baru pemikiran visual : WIMP (Windows, Icon, Mouse, Pull-down menu).

Icon

Pedoman perancangan ikon :

–          Representasikan objek atau aksi dengan cara yang dikenal.

–          Batasi jumlah ikon yang tampil.

–          Buat agar ikon jelas terlihat dari latar belakangnya.

–          Pertimbangkan ikon tiga dimensi, menarik tapi bisa mengalihkan perhatian.

–          Pastikan ikon yang terpilih jelas ketika dikelilingi yang tidak terpilih.

–          Pastikan ikon dapat dibedakan dari yang lain.

–          Pastikan keselarasan setiap ikon sebagai anggota kelompok ikon.

–          Rancang animasi pergerakan ikon.

–          Tambahkan informasi rinci.

–          Pikirkan penggunaan kombinasi ikon untuk menciptakan objek atau aksi baru.

Manipulasi Langsung Remote

Arsitektur lingkungan manipulasi langsung remote mempunyai beberapa factor komplikasi :

–          Penundaan waktu

a.       Penundaan transmisi.

b.      Penundaan operasi.

–          Umpan balik yang tidak lengkap.

–          Umpan balik dari berbagai sumber.

–          Interferensi yang tidak diantisipasi.

Direct Manipulation Remote

Lingkungan Maya

Virtual reality adalah lingkungan buatan yang diciptakan dengan hardware dan software dan dipresentasikan kepada pemakai dengan cara sedemikian sehingga lingkungan tersebut tampil dan terasa seperti lingkungan asli.

• Augmented reality, dunia nyata dengan lapisan tambahan informasi.
• Situational awareness, informasi tentang dunia nyata disekitar pemakai dengan mendeteksi pergerakan dan lokasi.
  

  Virtual Reality

  

  Virtual Reality

Alat Bantu Perangkat Lunak

1.      Metode spesifikasi :

–          Multiparty Grammar

Pada multiparty grammar ada nonterminal yang diberi label untuk menyatakan pihak yang menghasilkan string.

Contoh : Proses log-in (U: user, C: computer)

<session> ::= <U: opening> <C: responding>

<U: opening> ::= LOGIN <u:name>

<U: name> ::= <U: string>

<C: responding> ::= HELLO [<U: name>]

Multiparty grammar efektif untuk rentetan perintah berorientasi teks yang berulang-ulang dipertukarkan, seperti pada terminal bank.

–          Unified Modeling Language (UML)

• UML class diagram

UML Class Diagram

• UML statechart diagram
  

  Purchase Order Statechart

–          User Action Notation (UAN)

Digunakan untuk mengatasi keanekaragaman dunia manipulasi langsung.

Simbol – symbol UAN :

• ~[icon] : bergerak menuju icon
• ~[x,y] : menuju koordinat (x,y)
• Mv : tombol mouse ditekan
• M^ : tombol mouse dilepas
• icon! : icon di highlight
• icon-! : icon kembali normal
• icon! : icon berkedip
• icon > ~ : icon bergerak mengikuti kursor
• * : dapat berulang (>= 0 kali)

Contoh :

Select an icon

User Actions Interface Feedback                   Interface state

~[file] Mv        file!, forall(file!) : file-!           selected = file

~[x,y] *           outline(file) > ~

~[trash]            outline(file) > ~, trash!

M^                   erase(file), trash!!                    selected = null

2.      Interface Building Tools

Fitur – fitur :

• Kebebasan antarmuka pemakai

~ Memisahkan perancangan antarmuka dari program internal.

~ Memungkinkan strategi multiple user interface.

~ Memungkinkan dukungan multi platform.

~ Memberi peranan arsitek antarmuka pemakai.

~ Menegakkan standar.

• Metodologi dan notasi

~ Mengembangkan prosedur perancangan.

~ Menemukan cara berbicara tentang perancangan.

~ Melakukan manajemen proyek.

• Rapidprototyping

~ Mencoba gagasan dengan sangat dini.

~ Uji, revisi, uji, revisi, ….

~ Mengikutsertakan end user, manajer, pelanggan.

• Dukungan perangkat lunak

~ Meningkatkan produktivitas.

~ Memberikan pemeriksaan kendala dan konsistensi.

~ Memfasilitasi pendekatan tim.

~ Memudahkan pemeliharaan.

Contoh :

Design Tools, membuat gambaran awal dengan cepat.

Misalnya,

• CAI Software : Macromedia Autorware, IconAuthor, Quest.
• Multimedia Construction Tools : HyperCard, Macromedia Director, Macromedia Flash.
• Slide Presentation Software : Microsoft PowerPoint.
• Visual Programming Toos : Microsoft Visual Basic (Visual Studio .NET), Borland Delphi.
• Web Design Tools : Macromedia Dreamweaver, Macromedia Fireworks.

Contoh Web Design Tools

Contoh Multimedia Construction Tools

Software Engineering Tools

Misalnya,

• Tcl/Tk

#First make a menu button

menubutton.menu1 -text “Unix Commands” – menu.menu1.m – underline 0

#make the menu, and add the lines one at a time

menu.menu1.m

.menu1.m add command -label “List Files” – command {ls}

.menu1.m add command -label “Get Date” -command {date}

.menu1.m add command -label “Start Calendar” -command {xcalendar}

pack.menu1

• Java

class test

{

Public static void main(string[] args)

{

For(int i = 0; i < args.length; i++)

system.out.print(i == 0 ? args[i] : ” ” + args[i]);

system.out.println();

}

}

• JavaScript

<script language=”JavaScript” type=”text/javascript”>

<!- –

Function square (i);

{

return i * i;

}

document.write(‘The function returned : ‘ + square(5) + ‘.’);

//- ->

</script>

Mengelola Proses Perancangan, Ulasan Pakar, dan Uji Usability

Mengelola Proses Perancangan

Perancangan system interaktif harus memadukan pengetahuan saksama dari kelayakan teknis dan rasa estetik apa yang menarik bagi pemakai.

Contoh Proses Perancangan

Karakteristik Perancangan

–          Perancangan adalah proses, bukan keadaan.

–          Proses perancangan nonhierarkis.

–          Proses perancangan transformasional secara radikal.

–          Perancangan secara intrinsic melibatkan penemuan tujuan-tujuan baru.

Metodologi LUCID

LUCID = Logical User-Centered Interactive Design

1.      Kembangkan konsep produk.

2.      Riset dan analisis kebutuhan.

3.      Konsep perancangan dan prototype layar kunci.

4.      Perancangan iterative dan perbaikan.

5.      Implementasikan software.

6.      Dukungan rollout.

Bidang – bidang kegiatan :

1.      Definisi produk

2.      Business case

3.      Sumber daya

4.      Lingkungan fisik

5.      Lingkungan teknis

6.      Pemakai

7.      Fungsionalitas

8.      Prototype

9.      Usability

10.  Panduan perancangan

11.  Panduan isi

12.  Dokumentasi

Observasi Etnografis

1.      Persiapan

• Pahami kebijakan dan budaya kerja organisasi
• Kenali system dan sejarahnya.
• Tentukan tujuan awal dan siapkan pertanyaan.
• Minta akses dan izin untuk observasi dan wawancara.

2.      Studi lapangan

• Bangun hubungan dengan manajer dan pemakai.
• Amati atau wawancarai pemakai di tempat kerjanya. Kumpulkan data subjektif dan objektif, kuantitatif dan kualitatif.
• Ikuti semua petunjuk yang muncul dari kunjungan.
• Catat kunjungan.

3.      Analisis

• Gabungkan data yang dikumpulkan dalam database numeris, tekstual, dan multimedia.
• Kuantifikasikan data dan gabungkan statistic.
• Konsolidasikan dan interpretasikan data.
• Perbaiki tujuan dan proses yang digunakan.

4.      Pelaporan

• Pertimbangkan peserta dan tujuan yang beraneka ragam.
• Persiapkan laporan dan presentasi kan hasil penelitian.

Ulasan pakar dan uji Usability

Ulasan pakar yang cukup formal telah terbukti efektif. Ulasan pakar dapat dilakukan di awal atau di akhir fase perancangan, dan keluarannya berupa laporan formal dengan masalah yang ditemui atau rekomendasi perubahan.

Metode :

a.       Evaluasi heuristik.

b.      Ulasan kesesuaian dengan pedoman.

c.       Pemeriksaan konsistensi.

d.      Penelusuran kognitif.

e.       Pemeriksaan usability formal.

Uji Usability memberikan konfirmasi kemajuan yang mendukung dan rekomendasi perubahan yang spesifik. Uji Usability tidak hanya mempercepat proses, tetapi juga menghasilkan pengehematan biaya yang dramtik.

Contoh Laboratorium Usability

Memilih peserta untuk uji usability

1.      Peserta dipilih mewakili komunitas pemakai dengan memperhatikan :

a.       Pemahaman computer.

b.      Pengalaman mengerjakan tugas.

c.       Motivasi dan pendidikan

d.      Kemampuan bahasa alami yang digunakan dalam antarmuka.

2.      Peserta uji usability harus diberitahu bahwa bukan mereka yang di uji, tetapi software dan antarmuka pemakai.

3.      Keikutsertaan dalam uji usability adalah sukarela, dengan perjanjian terlebih dahulu.

Teknik Laboratorium Usability

1.      Meminta pemakai mengucapkan apa yang mereka pikirkan dan akan kerjakan.

2.      Menggunakan dua peserta bekerja bersama untuk mendukung bicara.

3.      Memvideokan kegiatan peserta untuk dilihat lagi kemudian.

Uji lapangan berusaha menempatkan antarmuka pemakai dalam lingkungan realistic dalam periode waktu tertenu. Pencatatan software lebih membantu.

Survai, tujuannya dapat dikaitkan dengan model OAI(Open Archives Initiative). Pemaki dapat ditanyakan kesan subjektif mereka tentang aspek antarmuka.

Uji penerimaan (Acceptance Tests), untuk proyek implementasi besar, klien biasanya menentukan tujuan objektif dan terukur untuk kinerja hardware dan software. Jika produk gagal memenuhi criteria penerimaan, system harus diperbaiki sampai berhasil. Kriteria terukur dari antarmuka pemakai adalah kelima factor manusia terukur.

Setelah uji penerimaan berhasil, maka uji lapangan dapat meningkatkan :

–          Metode pelatihan

–          Materi tutorial

–          Prosedur bantuan melalui telepon

–          Metode pemasaran

–          Strategi publikasi

Interaksi Manusia dan Komputer

Definisi Intraksi manusia dan komputer adalah : disiplin ilmu yang berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh manusia, serta studi fenomena-fenomena besar yang berhubungan dengannya.

Tujuan dari Rekayasa sistem adalah:

1.  Tujuan tingkat tinggi yaitu membuat kualitas hidup pemakai lebih baik memang penting untuk diingat.

2.  Desainer ingin membuat sistem interaktif berkualitas tinggi yang dikagumi oleh orang-orang, beredar      luas dan sering ditiru.

3.  Kita perlu bergerak lebih dalam dari sekadar gagasan “user-friendly”.

4.  Fungsionalitas yang semestinya.

5.  Kehandalan, ketersediaan, keamanan, dan integritas data.

6.  Standardisasi, integrasi, konsistensi, dan portabilitas.

7.  Penjadualan dan anggaran.