Session 6 – Menu, Form Fill-in and Dialog Box

Selamat sore, IMK sesi ke 6 akan membahas tentang Menu, Form Fill-in dan Dialog Box. Adapun topik-topik yang akan kita bahas adalah:

  • Introduction
  • Task Related Menu Organization
  • Single Menus
  • Combinations of Multiple Menus
  • Content Organization
  • Fast Movement through Menus
  • Data Entry with Menus: Form Fill-in. Dialog Boxes and Alternatives

———————————————————————————————-

Introduction

Menu adalah suatu jalan untuk memberi tahu instruksi-instruksi yang tersedia kepada user.

Form fill-in adalah suatu bentuk dari sistem interaktif untuk meminta data atau informasi dari user.

Dialog Box adalah respon dari sistem interaktif ketika user memberi instruksi yang membutuhkan parameter.

————————————————————

Task Related Menu Organization

Tujuan utama adanya Menu, Form Fill-in dan Dialog-box itu adalah untuk menciptakan suatu sistem organisasi yang sensibel, komprehensif, gampang diingat dan cocok untuk task users

Ada beberapa jenis menu yaitu:

  • Single Menus
  • Linear Sequence Menus
  • Tree Structure Menus
  • Cyclic and Acyclic Network Menus

—————————————————————

Single Menus

Ada beberapa macam tipe Single Menus yaitu:

Binary Menus –> Menus dimana terdapat dua pilihan seperti yes,no. Male,Female. Variannya adalah Mnemonic Letters, Radio Buttons dan Button Choicebinary menus.

Multiple-item Menus –> Contohnya adalah Multiple-Selection Menus / Check Boxescheckboxes

Pull-down, pop-up dan toolbar    

Pull down menus biasanya ada di bagian atas aplikasi yaitu di menu bar. Biasanya pilihan action disupport oleh keyboard shortcut untuk efiesiensi.
pull down menus

Pop-up Menus muncul ke display sebagai respon dari klik-kan atau check-an dari pointing devicepop up menus

Toolbars, iconic menus dan palletes menawarkan berbagai actions untuk objek yang ada.toolbar menus

Menus for Long Lists

Beberapa menu untuk list yang panjang:

  • Scrolling Menus
  • Combo Boxes
  • Fisheye Menus
  • Sliders
  • Two Dimensional Menu

Scrolling Menus

scrolling menus

Combo Boxes

combo boxes

Fish Eye Menu

fish eye menus

Sliders

slider menu

Two Dimensional Menu

two dimensional menus

Embedded Menus –> Alternatif dari berbagai Single Menus yang sudah ada. Menu ini menjadikan users yang membaca tentang orang,event atau tempat untuk mencari tahu informasi sesuai dengan konteks yang dipilih.

embedded menu

———————————————————————————————————

Combinations of Multiple Menus

Ada beberapa tipe Multiple Menus:

  • Linear Sequence Menus –> Guide user untuk melalui Desicion-making process yang kompleks. Efektif bagi pengguna awam untuk melakukan task yang simpel
  • Simultaneous Menus –> menampilkan beberapa menu yang aktif dalam waktu yang bersamaan dan user dapat menentukan pilihan sesuai keinginannya tanpa harus berurutan.
  • Tree-structured Menus. Dibagi-bagi atas beberapa kategori seperti file,edit,view. Memiliki Menus yang expanding. Contohnya adalah Windows Explorer.

tree structured menus

  • Menu Maps –> membantu user untuk tetap pada tujuan dan mencegah user agar tidak kehilangan arah
  • Acyclic and Cylic Networks –> Social Relationships, Transportation routing, Scientific-Journal Citations. Bisa menyebabkan kebingungan dan kehilangan arah. Cyclic -> bisa kembali ke level atas (upper level). Acyclic -> satu seleksi bisa dicapai dari berbagai path ( jalur)

——————————————————————————————

Content Organization

Menjelaskan tentang bagaimana konten itu disusun dan diorganisir untuk ditampilkan

Ada beberapa hal yang harus diperhatikan:

Task-Related Grouping in Tree Organization

  • Group-group dibuat berdasarkan item-item yang mirip
  • Membuat grup yang meliputi semua possibility / kemungkinan
  • Harus dipastikan bahwa item-item yang ada tidak saling timpa tindih / overlapping
  • Gunakan istilah yang familiar, tapi pastikan satu item dengan item yang lain berbeda

Item Presentation Sequence

  • Biasanya urutan dalam penyusunan item adalah sebagai berikut: Waktu, Susunan berdasarkan numeric, Physical Properties
  • Berbagai basis penyusunan : Urutan item secara alphabetik, Grouping item-item yang saling berkaitan, Item yang paling sering digunakan (Most Frequently Used), Item yang paling penting terlebih dahulu (Most Important)

Beberapa contoh guidelines untuk membuat menu selection:

  • Jangan sembarangan mengrup Item
  • Jangan sembarangan mengurutkan Item
  • Pakailah grammar, layout dan istilah yang konsisten
  • Perbolehkan berbagai shortcut yang ada
  • Perbolehkan untuk langsung ke menu awal atau menu sebelumnya
  • Pertimbangkan Online Help, Display Rate, Screen Size dan hal-hal kecil lainnya.

Menu Layout

  • Judul dari Single Menu haruslah singkat namun deskriptif
  • Haruslah konsisten dalam merangkai kata-kata
  • Judul dari Tree-Structured Menus harus sama dengan judul dari menu diatasnya atau menu dibawahnya. contohnya jika menu berjudul Finance, jik diklik dan ke next screen, maka harus mempunyai frase yang sama dengan judul tersebut.
  • Gunakanlah istilah yang familiar dan konsisten
  • Item haruslah saling berbeda
  • Keyword ditempatkan di bagian kiri

Kendala dalam merancang Graphic Layout

  • Screen width dan length
  • Display Rate
  • Character Set
  • Highlighting Techiniques

Namun selain yang diatas, konsistensi harus dijaga setidaknya untuk komponen berikut ini:

  • Judul
  • Penempatan Item
  • Instructions
  • Error Messages
  • Status Reports

————————————————————————————————-

Fast Movement Through Menus

Fast Movement dalam Menus bisa dicapai dengan menggunakan keyboard shorcuts.

Keyboard shortcuts biasanya dipakai untuk expert. Namun dengan adanya shortcut ini, untuk menerjemahkan arti dari shortcut ke bahasa asing terkadang sulit. Contoh : undo , bahasa indonesia : kembali(?).

Contoh bentuk lain dari shortcuts misalnya Bookmars yang ada di browsers atau user-configured toolbars.

————————————————————————————————

Data Entry with Menus: Form Fill-in, Dialog Boxes and Alternatives

Form Fill-in

Dipakai ketika banyak data yang harus diisi. Display nya memiliki kesamaan dengan form dalam bentuk kertas.

Dalam memakai form fill-in, user harus familiar dengan keyboards, penggunaan tab/mouse untuk memindahkan kursor, metode dalam mendeteksi dan mencegah error, penggunaan enter key dan return key

Dalam mendesign Form fill-in, ada beberapa guideline yang harus diikuti:

  • Judul harus bermakna / berarti
  • Instructions harus komprehensif
  • Fields harus dikelompokkan secara logical dan berurutan
  • Visual harus dijaga dan menarik
  • Fields yang ada harus familiar
  • Istilah dan singkatan harus konsisten
  • Ada ruang dan batas yang cukup untuk mengisi data
  • Error Prevention
  • Mark field yang harus diisi
  • Explantory Message untuk tiap field
  • Signal / Kode jika User sudah mengisi secara lengkap

Contoh Form fill-in:

form fill-in

Dialog Boxes

Merupakan kombinasi dari Form Fill-in dan Menu

Beberapa guideline dalam merancang internal layout:

  • Judul harus berarti dan style yang digunakan harus konsisten
  • Pengurutan dari kiri atas ke kanan bawah
  • Clustering dan emphasis
  • Layout harus konsisten (Margins, Grid, Lines, Boxes)
  • Instilah, Fonts, Huruf besar (kapitalisasi), Justifikasi haruslah konsisten
  • Standard buttons (Ok,Cancel)
  • Error Prevention menggunakan direct manipulation

Guideline untuk external relationship:

  • Appearance dan disapperance harus smooth
  • Bisa dibedakan namun tidak terlalu jauh perbedaannya
  • Size harus cukup kecil untuk mengurangi saling timpah tindih
  • Display nya harus mirip dengan item yang bersangkutan
  • Item yang perlu tidak saling timpah tindih
  • Gampang untuk dihilangkan / dimatikan
  • Jelas bagaimana cara melengkapinya / men-cancel

Contoh Dialog Boxes:

dialog boxes

Berbagai alternatif lain yang ada:

  • Pie Menus
  • Control Menus
  • Marking Menus
  • Flow Menus
  • Toolglass

Contoh Pie Menus

pie menus

Advertisements

Posted on November 2, 2013, in Interaksi Manusia dan Komputer and tagged , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: