Menu Form Fill-In and Dialog Box

Pernahkah kita melihat tampilan dibawah ini?


Ya benar itu adalah contoh dari dialog box yang dimiliki oleh Sistem Operasi Windows 7. Hal tersebut merupakan bagian kecil dari begitu banyaknya tampilan menu yang ada. Dalam post ini kita akan membahas tentang Menu, lalu ada juga Form Fill In dan Dialog Boxes.


Menu
Menu adalah bagian dimana berbagai pilihan yang disediakan oleh aplikasi yang berguna untuk mendukung fungsional aplikasi. Menu terbaggi dalam 2 kategori besar : Single Menu dan Multiple Menu.

Single Menu
Single Menu adalah menu yang merepresentasikan sebuah tugas yang spesifik. Dalam Single Menu terbagi lagi beberapa menu seperti Binary Menu, Multiple Item Menu, Multiple Selection, Pull Down, Pop Up, Menu untuk list yang panjang, Embedded Menu.

Multiple Menu
Multiple menu adalah menu yang merepresentasikan lebih dari satu instruksi. Contohnya Tree Structured Menu, yang ada ketika kita buka Windows Explorer

Form Fill - In

Hal ini berkaitan dengan menu yang berupa Form, dimana kita diminta memasukkan inputan sesuai dengan perintah yang diminta. Ada beberapa hal penting yang harus diperhatikan seperti Form Validation, Layout Design, Separating the Section. Form Validation berkaitan dengan memvalidasi  inputan yang diberikan user. Layout Design lebih kepada tata letak itemnya, dan yang terakhir adalah mengelompokkan inputbox yang sesuai dengan keperluannya.

Read more

Direct Manipulation and Virtual Environment

Pada bagian ini kita akan membahas 2 point penting, yaitu mengenai Direct Manipulation (atau manipulasi secara langsung) serta Lingkungan Virtual. Langsung saja kita ke intinya.

Direct Manipulation (System)

Pernahkah kita menggunakan aplikasi Microsoft Word? atau Adobe Photoshop? Ya tentunya hampir dari kita semua pasti pernah menggunakan aplikasi tersebut, baik untuk masalah pekerjaan maupun tugas kuliah. Kedua aplikasi ini bila kita telaah lebih dalam, ketika kita selesai membuat dokumen misalkan dalam Ms Word lalu kita mencetaknya dalam selembar kertas, maka akan kita dapatkan apa yang persis seperti yang kita kerjakan di komputer. Atau biasa disebut dengan istilah What You See Is What You Get (WYSIWIG).
Nah lalu apakah Direct Manipulation ini?

Direct Manipulation adalah sebuah konsep antarmuka aplikasi dimana kita seakan - akan membuat dokumen tersebut secara langsung di komputer. Contohnya Microsoft Word, dimana kita seakan - akan membuat dokumen tersebut di komputer secara langsung

Contoh aspek lain yang menggunakan konsep ini adalah Video Game, CAD (Computer Aided System), Serta Office Automation

Masalah yang biasanya ditemukan di dalam Direct Manipulation adalah :

1. Ruang (spatial), atau representasi visual yang terkadang terlalu lebar
2. Flowchart dan Database yang kompleks
3. User harus mempelajari graphical yang merepresentasikan suatu perintah

Prinsipnya adalah, object seperti icon, tombol, dsb harus benar, benar merepresentasikan perintah, lalu reversible action juga penting, hal ini berkaitan dengan mengembalikan perubahan  ke state sebelumnya.

Lingkungan Virtual

Lingkungan Virtual, kalau secara teori akan sulit dijelaskan. namun apakah pernah kita melihat Film Fiksi Ilmiah dimana seakan muncul objek hologram di dunia nyata? Atau mungkin pernah melihat Simulator Penerbangan? Nah kedua hal tersebut akan berhasil jika memiliki lingkungan virtual. Artinya dalam Flight Simulator akan terasa bahwa kita dalam penerbangan sungguhan bila ada animasi virtual yang melibatkan kita di dalamnya. Biasanya ada 2 bagian penting dalam hal ini Virtual Reality dan Augmented Reality.

Virtual Reality adalah sebuah konsep antarmuka dimana sekan - akan kita masuk ke dunia virtual. Biasanya menggunakan kacamata virtual dsb. Sedangkan Augmented Reality adalah konsep dimana seakan - akan di dunia nyata muncul object virtual.   

Read more

Evaluating Interface Designs

Mengevaluasi proses desain adalah proses kelanjutan setelah membuat dan memanage proses desain. Proses Evaluasi mencakup Expert Review, Usability Testing, Survey Instruments, Acceptance Test, Evaluation During Active Use. Langsung saja kita mulai pembahasannya.

Expert Review

Seperti pada post sebelumnya, saya sudah juga memberikan alasan singkat mengapa butuh Expert Review atau Tinjauan Pakar. Kali ini saya juga akan memberikan berbagai alasan spesifik mengapa butuh Tinjauan Pakar.

1. Tinjauan Pakar lebih bersifat Formal dan Efektif, karena pakar lebih mengetahui bagian mana saja yang perlu diperbaiki, dan sebagainya
2. Pakar membutuhkan waktu tinjau yang relatif lebih cepat
3. Setiap pakar mungkin menemukan berbagai bug atau kesalah yang berbeda, sehingga lebih variatif
4. Pakar lebih produktif
5. Pakar haruslah mengerti tentang task domain, user behavior, dan first-sight user behavior 

Usability Testing and Lboratories

Hal ini berkaitan dengan kegunaan dan juga pengetest-an lebih lanjut seperti halnya laboratorium testing. Contohnya adalah aplikasi simulasi operasi jantung, maka perlu di test secara mendalam apalagi yang menyangkut nyawa manusia dan perlengkapan laboraturium.

Survey Instrument

Survey Instruments atau alat - alat serta indikator yang digunakan untuk proses survey. Kunci kesuksesan survey adalah mengetahui secara jelas tujuan survey, dan proses development mengenai item apa saja yang ingin di survey. Prosesnya bisa bertanya kepada user tentang bagaimanakah kesan anda terhadap aplikasi yang dugunakan sejauh ini ? Adakah hal yang perlu diperbaiki? dan sebagainya

Acceptance Test

Nah pada bagian ini kita akan membahas mengenai sejauh mana User "menerima" desain/aplikasi kita. Hal ini dapat kita lihat dari :

1. Berapa lama user memahami aplikasi
2. Bagaimanakah kecepatan performa aplikasi
3. Berapa banyak error yang terjadi selama penggunaan
4. Berapa lama untuk menjalankan sebuah perintah
5. Kepuasan Individu dari User sendiri

Evaluation During Active Use

Ini adalah proses evaluasi dimana penggunaan sedang berjalan, artinya ketika ada masalah / error biasanya aplikasi akan mengirimkan feedback seperti email, notifikasi, dan lain sebagainya kepada Ddeveloper

Read more

Managing Design Process

Pada bagian ini kita akan membahas semua tentang proses desain, setelah sebelumnya mengetahui tentang Guideline, Principle, dan Theory. Sedikit spoiler untuk bagian ini kita akan membahas Methodologi Pengembangan, lalu ada juga 4 Pilar Pengembangan, serta beberapa jenis Metode Pengerjaan.

Pengantar

Menururt (Rosson dan Carrol, 2002) salah satu metode untuk mengidentifikasi desain adalah :
- Desain itu adalah proses
- Proses desain itu Non - Hierarchical.
- Desain itu melibatkan penemuan tujuan baru.


Four Pillars of Design (Empat Pilar Desain)

 Nah bagian ini adalah bagian menarik yang akan membahas tahapan serta aspek penting yang perlu  diperhatikan dalam proses mendesain. Langsung saja kita mulai.

1. User Interface Requirement
    Pada tahap ini lebih mengumpulkan spesifikasi desain yang sesuai dengan kebutuhan. Mengerti desain apa yang diinginkan oleh User secara jelas adalah kunci utamanya. User Interface Requirement juga menjelaskan system behavior. Kalau kita perhatikan pada tahap ini adalah istilah kunci yakni Ethnographic Observation. 

Ethnographic Observation berkenaan dengan budaya atau kultur yang berlaku di daerah tempat desain tersebut ingin diimplementasikan. Misalnya di Indonesia lebih kental dengan budaya Timur, maka layaknya sebuah desain harus mengikuti adat budaya Indonesia.

2. Guidelines Documents & Process
     Pada tahap ini kita akan membahas berkenaan dengan Panduan berupa Dokumentasi dan Panduan Proses. Nah setelah sebelumnya kita mengobservasi tentang apa yang User mau serta bagaimana Etnografi nya, maka tahap selanjutnya adalah mencatat semuanya dan menjadikannya sebagai sebuah Dokumen, untuk dijadikan Panduan. Yang biasa harus dipertimbangkan dalam proses ini adalah :

• Grafik dan Ikon
• Screen Layout
• Perangkat masukan dan keluaran (I/O Device)
• Urutan Tindakan (Action Sequences)
• Pembelajaran

3. User Interface Software Tools
    Pada tahap ini kita akan membahas mengenai perangkat lunak yang akan digunakan untuk mempermudah proses desain. Di era sekarang sangat banyak software modern dan canggih yang dapat mempermudah pengerjaan, seperti Adobe Photoshop, Visual Basic 6.0 Studio, Visual Studio .NET.

4. Expert Review and Usability Testing
    Setelah desain dibuat, lalu selanjutnya akan di test oleh pakar / expert, dan juga di test semua kegunaannya. Apakah desain tersebut cocok dan berguna, dan sebagainya.

Mengapa harus pakar ? Karena dengan menggunakan pakar dalam proses ini akan sangat menguntungkan. Pertama, dua atau lebih pakar biasanya membutuhkan sedikit waktu untuk mengetest. Kedua dari setiap pakar pasti memiliki masukkan yang berbeda mengenai kekurangan desain. Yang terakhir karena pakar lebih mengerti apa saja yang perlu diperbaiki.

Methodologi Pengembangan

Ada banyak sekali methodologi pengembangan yang biasa digunakan. Namun kita akan membahas 2 Metodologi saja, yakni Participatory Design dan Scenario Design. 

1. Paticipatory Design
    Adalah proses dimana desainer dan user terlibat langsung dalam meracang aplikasi.

   Kelemahannya 

1. Biaya lebih besar karena banyak yang terlibat
2. Membutuhkan waktu yang lama
3. Akan terlihat banyak konflik yang terjadi

   Kelebihannya

1. Lebih akurat karena user juga terlibat
2. User dapat mengemukakan langsung pendapatnya
3. Penerimaan desain lebih tinggi karena sesuai dengan yang user mau.

2. Scenario Design
    Berkaitan dengan bagaimana skenario yang terjadi saat menggunakan aplikasi. Ciri - cirinya adalah : 

1. Menjelaskan apa yang terjadi ketika user melakukan sebuah tugas
2. Bisa juga dideskripsikan dalam sebuah Walkthrough.
3. Atau juga menggunakan Video Tape.

Untuk lebih lanjut lagi mengenai materi ini bisa langsung mengunjungi situs. www.infodesign.com.au/ftp/participatoryDesign.pdf

Read more

Panduan, Prinsip dan Teori Interaksi Manusia komputer

Prolog

Dalam merancang interface (Antarmuka) yang baik, ada beberapa panduan yang bisa diikuti. Nah di bagian ini kita akan mempelajari kaitan antara Panduan, Prinsip dan Teori dalam merancang Antarmuka yang menarik dan mendekati sempurna.

Kaitan

Panduan digunakan untuk menentukan cakupan atau lingkup serta acuan agar tidak jauh keluar jalur.

Prinsip adalah aturan - aturan yang umum yang dapat digunakan sebagai panduan dan yang umum digunakan.

Teori digunakan untuk mendukung prinsip - prinsip yang digunakan.

Panduan

Seperti yang sudah dibahas sebelumnya panduan digunakan untuk mengarahkan kita pada saat merancang tampilan sehingga kita tidak jauh keluar jalur. Ketika kita pergi ke suatu website atau ketika kita membuka suatu aplikasi dan desain dari aplikasinya sangat berantakan, maka akan sangat sulit kita untuk menentukan apa yang akan kita lakukan dengan aplikasi tersebut, dan akan sangat merepotkan bila harus menggunakannya. Maka dari itu diperlukan beberapa  panduan bagaimana membuat Antarmuka Navigasi yang baik. Ada contoh yang diberikan oleh National Cancer Institute dalam merancang antarmuka :

• Standarisasi squence task
• Bila ada tautan (link) pastikan tautan tersebut diberi deskripsi secara jelas
• Gunakan Headings yang jelas dan unik
• Bila ada pilihan (options) ada baiknya menggunakan check box.
• Gunakan thumbnail untuk mengakses gambar yang lebih besar.

Navigasi yang baik adalah navigasi yang setidaknya dapat memberikan kita informasi tentang di halaman/bagian mana kita ada di aplikasi tersebut, halaman/bagian apa saja yang bisa kita kunjungi, dan apa yang akan kita kunjungi setelahnya.

Lalu mengatur tampilan juga menjadi salah satu yang paling penting, artinya panduan dalam membuat peletakan tampilan yang baik akan menjadi point yang cukup penting. Smith dan Mosier (1986) menawarakan 5 tingkat tujuan :

Konsistensi dari penyajian data

Maksudnya adalah data yang ditampilkan kepada user sesuai dengan apa yang user inginkan atau     butuhkan. Jadi sesuai dengan query/permintaan user. Konsep konsistensi yang lainnya adalah misalnya sebagai contoh ketika kita mengguankan text editor misalnya Ms Word, lambang disket digunakan untuk Save. Maka dari itu sebaiknya kita menggunakan stereotype umum untuk menjaga konsistensi.

Informasi yang padat dan efisien

Informasi yang dihasilkan dari aplikasi haruslah padat tapi efisien, sehingga user dapat langsung mengerti apa maksud informasi tersebut. Mengurangi informasi yang ambigu dan kurang relevan.

Penggunaan memory yang minimal.

Memory yang digunakan aplikasi haruslah efisien dan se minimal mungkin sehingga aplikasi tersebut dapat berjalan baik. Jangan karena tampilan yang bagus lalu mengorbankan fungsional utama dari aplikasi. Karena aplikasi tujuan utamanya adalah untuk digunakan secara funsionalitas dan tampilan adalah pendukung untuk memudahkan berinteraksi dengan 

Kesesuaian data yang ditampilkan sesuai dengan data yang dimasukkan

Sebenarnya ini hampir sama dengan konsistensi yang tadi disebutkan. Data yang hendak di sajikan ke user harus sesuai dengan data di inpnut sebelumnya. In case walaupun data tersebut dimanipulasi pun, hendaknya sumbernya sesuai dengan data yang diinput.

Kontrol user yang fleksibel

Hal ini berkaitan dengan antarmuka serta komponen - komponen yang berhubungan langsung dengan user, sebagai contoh button, link, dsb. Hendaknya harus fleksibel artinya dapat digunakan untuk beragam tipe pengguna, baik pengguna normal maupun yang memiliki keterbelakangan fisik.


Prinsip

Seperti yang kita sudah bahas diatas, prinsip - prinsip digunakan sebagai panduan dalam membuat rancangan desain. Prinsip yang pertama adalah menentukan dan menspesifikasikan kemampuan user. Untuk melakukan hal ini ada beberapa step yang memudahkan kita :

• Mengenali user (Umur, Jenis Kelamin, Tujuan, Latar belakang kemampuan, dsb)
• Mespesifikasikan user berdasarkan latar belakang kemampuan dalam penggunaan komputer
• Novice (pengguna pertama kali)
• Knowledgeable (Memiliki cukup kemampuan penggunaan komputer)
• Expert (Ahli)
• Multi Layer Design

Setelah kita mengenali siapa user kita, ada baiknya kita mengenali tugas apa saja yang akan dilakukan oleh aplikasi kita. Ada beberapa jenis:

• Analisis 
• berhubungan dengan pengolahan informasi dan mencari informasi dan fakta dari pengguna.
• Penguraian pekerjaan yang kompleks.
• Memperhatikan pekerjaan/tugas dengan frekuensi yang relatif fluktuatif.

Lalu prinsip yang terakhir berkenaan dengan pemilihan gaya interaksi (interaction style). Ada beberapa jenis gaya interaksi :

1. Manipulasi Langsung (Mengkondisikan seakan akan kita seakan akan memanipulasi data secara langsung)
2. Pemilihan Menu
3. Pengisian Form
4. Command Language (Menggunakan instruksi teks yang dieksekusi secara langsung. Contoh Ms. DOS)
5. Bahasa Alami (Penggunaan bahasa alami manusia yang dimengerti oleh komputer)

Lalu ada 8 Prinsip Utama yang diperkenalkan oleh Schneiderman dan Plaisant (2010). Atau yang biasa dikenal dengan sebutan The Eight Golden Rules. 

Dan ada satu prinsip yang cukup krusial yaitu penanganan error/kesalahan. Biasanya ada beberapa bahasa pemrograman yang menyediakan teknik penanganan error. seperti blok try catch dan juga hendaknya kita memberi informasi yang relevan tentang error tersebut dan bagaimana solusi cepat untuk menyelesaikannya.

Teori

Explanatory and Predictive Theory

Read more

Apa itu IMK

Ketika saya mulai mengenal dunia komputer sekitar 6 tahun yang lalu, saya ingat pertama kali melihat tampilan (setara dengan istilah Interface), ketika itu saya menggunakan Microsoft Windows 98. Saat itu Sistem Operasi buatan Microsoft ini sudah mampu menampilkan grafis antarmuka (seperti Jendela Program, dsb) dengan cukup baik. Ketimbang versi sebelumnya yang masih menggunakan Command Line Instruction yang cukup rumit untuk digunakan oleh orang awam (seperti saya). Hal itu juga terus dikembangkan oleh banyak Sistem Operasi dan begitu juga dengan Aplikasi Komputer yang dirancang dengan tampilan grafis yang menarik sehingga semakin mudah untuk digunakan.

Lalu apa hubungannya dengan IMK ?

Hubungannya sangat erat, setelah membaca sedikit ulasan saya diatas mengenai tampilan antarmuka program komputer maka kita (saya asumsikan kita adalah calon Software Developer) pasti berpikir dengan adanya perkembangan komputer yang sudah mendukung antarmuka grafis, kita dapat memudahkan user yang menggunakan aplikasi kita untuk lebih mudah mengoperasikan software/aplikasi yang kita buat dengan memanfaatkan grafis dan komponen antarmuka lainnya. Nah, maka dari itu ada baiknya kita tahu bagaimana membuat tampilan antarmuka yang sesuai dengan aplikasi kita.

Apa itu IMK ?

Setelah kita tahu ulasan sedikit diatas, kita setidaknya tahu secara mendasar apa itu IMK atau yang dalam Bahasa Inggris dikenal Human Computer Interaction (HCI). Berikut ini saya kutip tafsiran tentang IMK yang ditulis di Wikipedia.

Interaksi Manusia Komputer adalah disiplin ilmu yang mempelajari hubungan antara manusia dan komputer yang meliputi perancangan, evaluasi, dan implementasi antarmuka pengguna komputer agar mudah digunakan oleh manusia. Ilmu ini berusaha menemukan cara yang paling efisien untuk merancang pesan secara digital. - Wikipedia -

Lalu kalau saya sendiri sih menafsirkannya

Interaksi Manusia Komputer adalah suatu ilmu yang fokus pada bagaimana merancang tampilan antarmuka aplikasi sehingga mendukung fungsi dari aplikasi tersebut.

Contohnya : Microsoft Word yang dirancang dengan Toolbar sehingga lebih mudah digunakan, namun Toolbar tersebut tidak hanya asal dibuat namun ada tujuan untuk memudahkan user. Nah IMK adalah ilmu yang mempelajari bagaimana cara merancang desain yang baik, dan berguna.



Desain Meningkatkan Kegunaan (Usability)

Pastinya dengan adanya tampilan yang bermanfaat akan meningkatkan kegunaan dari aplikasi. Ada beberapa hal penting yang menjadi atribut (titik berat) dalam hal kegunaan.

• Understandability
• Learn Ability
• Operability
• Attractiveness

Understandability adalah bagaimana tampilan aplikasi mudah dimengerti oleh pengguna.
Learn Ability adalah bagaimana tampilan aplikasi tersebut dapat dipelajari oleh pengguna secara cepat
Operability adalah bagaimana tampilan aplikasi tersebut dapat dioperasikan dan berfungsi secara baik, misalnya button save yang kita buat di aplikasi kita, harus bisa menjalankan fungsi save nya secara benar.
Attractiveness adalah bagaimana tampilan antarmuka dibuat menarik untuk digunakan.

Ukuran Keberhasilan Tampilan Aplikasi

Sebenarnya ada 3 hal yang lebih kita fokuskan dalam membicarakan kegunaan antarmuka dalam aplikasi :

• Keefektifan
• Efisiensi
• Kepuasan User

Untuk menentukan apakah tampilan yang kita buat dapat mendukung penggunaan aplikasi secara sempurna ada 5 indikator.

1. Lama waktu user untuk mempelajari aplikasi dari tampilan tersebut.
2. Kecepatan performa aplikasi
3. Banyaknya error yang dihasilkan user ketika menggunakan aplikasi
4. Waktu user untuk mengingat langkah - langkah pengoperasian
5. Kepuasan pribadi

Macam - Macam Kategori Perancangan Desain

1. Sistem yang menyangkut nyawa manusia (Life Critical System)

    Contoh : Pengatur Lalu-lintas udara untuk penerbangan, Software untuk dibidang medis

    Biasanya :

• Harganya mahal
• Lebih fokus ke fungsi nya dan keefektifan dari fungsinya
• Tampilan yang kurang kaya dengan grafis

2. Sistem yang digunakan untuk Industri dan Komersial

    Contoh : Aplikasi perbankan, Asuransi, Aplikasi Manajemen Inventaris.

    Biasanya :

• Mudah dipelajari oleh User
• Kecepatan proses dan Error nya bergantung dari 'biasanya' harga yang dibayarkan
• Performa yang baik sangat penting karena berhubunga dengan transaksi

3. Aplikasi Rumahan dan Aplikasi Hiburan
    Contoh : Word Processing (Aplikasi Pengolahan Kata)
    Biasanya :

• Mudah digunakan
• Interaktif desain
• dan Kemungkinan Error yang sedikit

4. Aplikasi Penjelajahan, Creative Application, dan Cooperative Application
    Contoh : Aplikasi Web Browser, Aplikasi Arsitektur, dsb

    Biasanya :

• Aplikasi ini dapat bekerja secara kolaboratif dengan User

5. Aplikasi Sosial Yang Melibatkan Banyak Orang

    Contoh : Aplikasi Voting, Catatan Kriminal, Kesehatan, dll

    Biasanya :

• Aman dan dapat dipercaya
• Mudah digunakan

Aplikasi Dengan Kegunaan Universal

Apa sih yang dimaksud aplikasi dengan kegunaan yang Universal ? 

Aplikasi dengan kegunaan yang universal adalah aplikasi yang dapat dijangkau oleh orang-orang dengan berbagai macam karakteristik, budaya, kekurangan fisik, serta usia.

Nah demikian beberapa hal dasar yang dapat dipelajari mengenai Pengenalan IMK. Materi selanjutnya adalah Guidelines, Priciple dan Theory.

Read more

Pengantar Interaksi Manusia Komputer

Selamat datang di blog ini. Kita akan membahas mengenai Interaksi Manusia dan Komputer. Di sini akan dibahas secara menyeluruh bahasan tentang Interaksi Manusia dan Komputer atau lebih mudahnya kita singkat menjadi IMK. Di blog ini akan dibahas secara sekuensial - berurutan, sehingga pembaca dapat mengikuti materi secara kontinyu. 

Ada beberapa pesan yang ingin saya sampaikan.

• Di blog ini hanya merupakan rangkuman (Summary) ?
• Penulis bukanlah orang yang selalu benar
• Lakukan crosscheck
• Bacalah buku referensi terkait

Lalu ada lagi yang paling penting untuk diperhatikan, yaitu hal - hal yang harus disiapkan

• Siapkan diri
• Siapkan waktu
• Siapkan pikiran
• dan yang paling penting, siapkan cemilan (hehehe)

Bila point - point di atas sudah disiapkan, maka kita bisa memulai untuk ke level berikutnya. Untuk langkah berikutnya adalah pengenalan IMK. Silakan mengunjungi Apa sih itu IMK.

Terima kasih.

Read more