MODUL RESPONSI INTERAKSI MANUSIA DAN KOMPUTER OLEH ASISTEN INTERAKSI MANUSIA DAN KOMPUTER

MODUL RESPONSI INTERAKSI MANUSIA DAN KOMPUTER

OLEH

ASISTEN INTERAKSI MANUSIA DAN KOMPUTER

D3 MANAJEMEN INFORMATIKA JURUSAN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS LAMPUNG 2017

Modul IMK Semester Genap 2016-2017

PERTEMUAN KE-1 Understand the Business Function Materi: • Penjelasan mengenai task analysis • Diskusi kelompok • Presentasi

Tujuan Responsi: Setelah responsi ini, mahasiswa mampu memahami business function dari sebuah kasus, mengidentifikasi goal dan task yang terlibat, serta melakukan task analysis dengan menggunakan hierarchical task analysis.

Penjelasan Materi Goal, Task, dan Action Dalam proses pengembangan antarmuka, goal, task, dan action adalah istilah yang sering muncul. Goal merupakan keinginan pengguna yang ingin ia capai. Task adalah langkah-langkah yang harus dilakukan pengguna untuk memenuhi goal dengan menggunakan perangkat tertentu. Action adalah task yang sederhana yang tidak melibatkan proses penyelesaian masalah, contohnya ialah mengklik sebuah tombol atau menggerakkan kursor (Preece et al. 1994).

Task Analysis Task analysis adalah kegiatan untuk mendeskripsikan hal-hal yang dilakukan oleh pengguna (bukan pengembang!) untuk mencapai tujuannya (Galitz 2007). Salah satu bentuk dari task analysis adalah hierarchical task analysis (HTA). Jenis-jenis task analysis lainnya dapat dilihat di Galitz (2007).

Hierarchical Task Analysis HTA adalah bentuk task analysis yang paling dikenal. HTA membentuk representasi grafis yang menggambarkan dekomposisi sebuah task ke dalam sub-task dan action yang lebih kecil (Preece et al. 1994). Sebagai contoh, misalnya kita akan membuat sebuah situs toko buku. Pada kasus tersebut, terdapat beberapa goals dari pengguna seperti:

• • • •

Memesan buku Melihat informasi buku Melihat promo yang sedang berlangsung Membuat akun

Sekarang, kita akan mendaftarkan task yang harus dilakukan oleh pengguna untuk memenuhi goals Memesan Buku. Task tersebut dapat diperoleh dengan memperhatikan model mental dan meniru proses yang dilakukan pengguna sebelum sistem tersebut dibuat. Sebagai contoh, saat membeli buku di toko buku, seseorang akan melakukan hal-hal berikut:

• • • •

Ia mencari buku yang ingin ia beli. Ia memasukkan buku tersebut ke keranjang belanja yang ia bawa. Ia pergi ke kasir untuk melakukan pembayaran. Ia menerima buku yang telah dikemas oleh penjaga kasir.

Modul IMK Semester Genap 2016-2017 Kita dapat menggunakan ilustrasi di atas sebagai dasar pembuatan rangkaian task yang harus dilakukan pengguna pada situs toko buku yang akan dibuat. Langkah-langkah tersebut misalnya:

• Pengguna mencari buku yang ingin ia beli. • Pengguna memasukkan buku tersebut ke keranjang belanja yang ia bawa. • Pengguna memasukkan informasi pembayaran (dengan cara apa ia membayar? Kartu kredit? Transfer?). • Pengguna mengisi alamat pengiriman buku. • Pengguna melakukan konfirmasi pembayaran. Bentuk HTA dari hasil analisis di atas ialah:

Skenario dapat dituliskan pada bagian Plan. Plan menyatakan urutan pengerjaan task yang harus dilakukan pengguna. Pada HTA di atas, tertulis Plan 0: 1-2 (dapat diulang) kemudian 2,3,4,5. Hal ini menyatakan bahwa seorang pengguna dapat mencari lebih dari satu buah buku yang ia beli (task 1) dan memasukkannya ke dalam keranjang (task 2). Setelah seluruh buku yang ingin ia beli sudah masuk ke dalam keranjang belanja, ia dapat melanjutkan ke proses pembayaran (task 3). Notasi further redescribed digunakan untuk menandakan bahwa task tersebut masih dapat dipecah lagi ke dalam beberapa sub-task. Bentuk tersebut dapat kita detailkan lebih lanjut. Sebagai contoh, Mengisi Alamat Pengiriman dapat dipecah kembali menjadi sub-task berikut:

• • • • • • • •

Pengguna memasukkan nama lengkap. Pengguna memasukkan alamat pertama. Pengguna memasukkan alamat kedua, jika dirasa perlu. Pengguna memasukkan kota. Pengguna memasukkan provinsi. Pengguna memasukkan kode pos. Pengguna memasukkan negara. Pengguna memasukkan nomor telepon.

Sekarang, HTA yang telah kita buat dapat diperdetil menjadi:


Sekarang, kita akan mendetailkan task Memasukkan Kota. Untuk memasukkan nama kota pada sistem, pengguna harus melakukan langkah-langkah berikut:

• Mengarahkan kursor ke kotak Town/City. • Mengetikkan nama kota tempat ia tinggal. Karena ukuran task tersebut sudah kecil, task tersebut dapat dianggap sebagai sebuah action. Action tidak perlu didetailkan kembali karena sifatnya yang sederhana. Sekarang, HTA yang kita miliki telah menjadi (perhatikan bahwa action ditandai dengan garis tebal):

Berdasarkan HTA di atas, seorang perancang antarmuka dapat membuat sebuah form untuk melakukan Pengisian Alamat Pengiriman sebagai berikut:



PERTEMUAN KE-2 Diskusi Pada bagian ini, terdapat beberapa soal yang harus Anda diskusikan pada responsi ini. Ketikkanlah hasil diskusi kelompok Anda pada kotak yang disediakan. Ketua kelompok diminta untuk mengumpulkan dokumen ini beserta dokumen lainnya (jika ada) ke Pengumpulan Hasil Responsi 2 yang tersedia di LMS. Kelompok terdiri dari minimal 3-5 orang. Kemudian setiap kelompok harus memiliki konsep yang berbeda dengan kelompok lainnya.

1. Deskripsikan topik yang Anda angkat (15 poin).

2. Identifikasi goals yang terdapat pada topik tersebut. Berikan urutan kepentingan pada setiap goals. Nilai 1 diberikan pada goals yang paling penting (15 poin).

3. Jabarkan task-task yang harus dikerjakan oleh pengguna untuk melakukan sebuah goals. Pilih goals yang paling penting (15 poin).


4. Gambarkanlah HTA dari goals yang paling penting dari topik yang Anda angkat. Apabila diperlukan, Anda dapat menggambar HTA dengan menggunakan aplikasi lain. Hasil pengerjaan dilampirkan pada saat pengumpulan lembar kegiatan (35 poin).


PERTEMUAN KE-3 Presentasi Pada bagian ini, semua kelompok yang melakukan presentasi hasil diskusinya di depan kelas selama kurang lebih 10 menit. Penyajian hasil dilakukan selama 5 menit dan dilanjutkan dengan sesi diskusi selama 5 menit. Kelompok yang tidak presentasi diminta untuk memberikan komentar mengenai hasil pengerjaan setiap kelompok yang melakukan presentasi. Berikanlah komentar yang objektif dan konstruktif. Nomor Kelompok: Komentar Kelompok Anda:

Nomor Kelompok: Komentar Kelompok Anda:



Nomor Kelompok:

Modul IMK Semester Genap 2016-2017 Komentar Kelompok Anda:






PERTEMUAN KE-4 Principles of Good Interface and Screen Design Materi: • Pembahasan dari Asisten • Diskusi • Presentasi

Tujuan Responsi: Mahasiswa dapat membuat desain antarmuka aplikasi dengan menerapkan prinsip-prinsip antarmuka yang baik dan prinsip desain layar.

Penjelasan Materi Hasil dari task analysis dapat digunakan sebagai dasar untuk membuat sebuah rancangan antarmuka. Terdapat step by step dalam rancangan antarmuka yang terus menerus diperbaiki, sesuai dengan topik-topik dari setiap Step yang Anda lalui. Pada pertemuan ini, tugas Anda adalah membuat ‘sketsa’ antarmuka dari sistem yang Anda buat, berdasarkan HTA yang telah Anda peroleh dari pertemuan sebelumnya. Hal-hal yang harus menjadi tujuan Anda dalam membuat desain antarmuka ialah (Galitz 2007):

• • • • •

Reduce visual work. Reduce intellectual work. Reduce memory work. Reduce motor work. Minimize or eliminate any burdens or instructions imposed by technology.

Untuk memenuhi tujuan tersebut, Anda harus memperhatikan hal-hal berikut pada saat merancang antarmuka. Penjelasan lebih lanjut dapat Anda lihat pada Galitz (2007).

• • • • • • • • • • • •

Organizing Elements Clearly and Meaningfully. Consistency. Starting Point. Ordering of Data and Content. Navigation and Flow. Visually Pleasing Composition. Distinctiveness. Focus and Emphasis. Conveying Depth of Levels or a Three-Dimensional Appearance. Presenting Information Simply and Meaningfully. Application and Page Size. Application Screen Elements.

Apabila Anda telah menentukan platform tempat aplikasi berjalan, Anda dapat menggunakan guidelines yang disediakan oleh masing-masing platform. Guidelines menyediakan standar-standar

Modul IMK Semester Genap 2016-2017 dalam pembuatan desain antarmuka dan cara berinteraksi pada suatu platform. Beberapa guidelines juga menyediakan gambar-gambar komponen yang tersedia pada platform tersebut. Beberapa guidelines yang tersedia ialah: Android

• • •

http://developer.android.com/design/index.html http://developer.android.com/guide/practices/ui_guidelines/index.html http://www.androidpatterns.com

Windows Phone

•

http://msdn.microsoft.com/en-us/library/hh202915.aspx

iOS

•

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/ MobileHIG/Introduction/Introduction.html

Contoh sketsa sederhana antarmuka dari sebuah aplikasi pengaturan diet dapat Anda lihat pada berikut:


PERTEMUAN KE-5 Diskusi Pada bagian ini, Anda diminta untuk membuat desain antarmuka sederhana dari aplikasi yang akan Anda buat. Desain dibuat dengan memperhatikan hal-hal berikut:

• HTA yang telah Anda miliki. • Prinsip-prinsip antarmuka yang baik serta desain layar. • Guidelines dari platform yang Anda gunakan. Desain dapat dibuat dengan menggunakan perangkat lunak apapun (contoh: PowerPoint, Axure, Balsamic, dan Photoshop). Hasil pengerjaan berikut LKP disatukan dalam sebuah berkas terkompresi. Ketua kelompok mengumpulkan berkas tersebut ke LMS. Selain dikumpulkan, hasil pengerjaan Anda dibawa kembali pada responsi selanjutnya. Catatan: Sebuah task dapat memiliki sebuah sketsa antarmuka. Namun, bisa saja ada sebuah antarmuka yang mengakomodasi lebih dari satu task. Task: Isikan nama task di sini Sketsa Antarmuka: Masukkan gambar sketsa antarmuka di sini

Task: Sketsa Antarmuka:


Modul IMK Semester Genap 2016-2017 Task: Sketsa Antarmuka:




PERTEMUAN KE-6 Presentasi Pada bagian ini, semua kelompok yang diminta untuk maju presentasi. Yang dipresentasikan ialah hasil desain antarmuka yang telah Anda buat. Setiap kelompok mendapatkan kesempata menyajikan selama kurang lebih 10 menit, untuk desainnya 5 menit. Sebanyak 5 menit sisanya digunakan untuk diskusi. Berikanlah komentar yang relevan dengan poin-poin berikut. Apakah sketsa yang ditampilkan di depan telah memenuhi poin-poin antarmuka yang baik ini?

• • • • • • • • • • • •

Organizing Elements Clearly and Meaningfully. Consistency. Starting Point. Ordering of Data and Content. Navigation and Flow. Visually Pleasing Composition. Distinctiveness. Focus and Emphasis. Conveying Depth of Levels or a Three-Dimensional Appearance. Presenting Information Simply and Meaningfully. Application and Page Size. Application Screen Elements.










PERTEMUAN KE-7 Develop System Menu and Navigation Schemes Materi: • Pembahasan dari Asisten • Diskusi • Presentasi


Penjelasan Materi Sebuah aplikasi harus memberi tahu pengguna akan fitur-fitur yang ia miliki. Hal ini dapat dicapai dengan menggunakan pilihan atau alternatif (menu) yang dimiliki pengguna pada saat menggunakan sebuah sistem. Dari sisi pengguna, fungsi dari menu adalah (a) membuka menu lain, (b) mengeksekusi suatu aksi atau prosedur, (c) menampilkan informasi, atau (d) memasukkan data atau parameter (Galitz 2007). Adanya pilihan ini juga akan mengingatkan pengguna akan pilihan yang tersedia dan informasi yang mungkin saja tidak diketahui atau terlupakan oleh pengguna. Sebagai contoh, Android menyediakan tombol menu yang dapat menampilkan opsi-opsi yang dapat digunakan oleh pengguna pada saat tertentu. Karena fungsinya yang menampilkan opsi-opsi yang dapat digunakan oleh pengguna pada waktu tertentu, menu dapat mengalami perubahan. Adobe Reader, seperti aplikasi lain pada umumnya, menampilkan seluruh menu yang tersedia. Namun, tidak semua menu dapat dipilih oleh pengguna. Misalnya, ketika pengguna belum melakukan perubahan apapun, menu Undo tidak aktif (Gambar 1). Menu Undo baru akan aktif setelah pengguna mengubah isi dari dokumen.

Gambar 1 Menu Undo pada Adobe Reader yang hanya akan aktif setelah pengguna melakukan perubahan pada dokumen

Contoh lainnya ialah Ribbon yang terdapat pada Microsoft Office 2010. Tab yang tersedia pada Ribbon akan bertambah sesuai dengan keadaan yang dilakukan pengguna. Sebagai contoh, Gambar 2(a) adalah kondisi default Ribbon, sedangkan Gambar 2(b) adalah kondisi Ribbon saat pengguna memilih sebuah gambar. Dapat dilihat bahwa muncul tab baru yang bernama Picture Tools – Format. Perhatikan emphasis yang diberikan pada tab yang baru muncul tersebut.


Gambar 2 Ribbon pada Microsoft Office 2010. (a) adalah kondisi default Ribbon, sedangkan (b) adalah kondisi Ribbon setelah pengguna memilih sebuah gambar. Setelah pengguna memilih gambar, sebuah tab baru yang bernama Picture Tools – Format akan muncul. Hal ini menginformasikan pada pengguna bahwa terdapat menu-menu yang dapat ia akses pada gambar tersebut.

Beberapa poin penting mengenai desain menu dan navigasi dari Galitz (2007) ialah:

• Memiliki format yang konsisten. • Tampilkan menu yang memiliki pilihan yang jelas dengan mengonsistenkan struktur, lokasi, dan cara penggambaran menu. • Sesuaikan struktur menu dengan struktur task pada aplikasi tersebut. • Jangan menggunakan menu yang memiliki pilihan terlalu banyak sehingga pengguna harus men-scroll layar. Contoh: menggunakan drop down list untuk memilih tanggal. • Mengurutkan daftar menu. Menu dapat diurutkan berdasarkan sifat alaminya (seperti nama bulan dan nama fakultas di IPB), atau diurutkan berdasarkan ukuran numeriknya (seperti ukuran gambar dan harga barang). • Kelompokkan menu-menu yang memiliki fungsi yang mirip. • Berikan label yang jelas, singkat, deskriptif, dan tidak ambigu pada menu. Pilihlah kata yang merupakan kalimat perintah kepada komputer. Misal: “Save and Exit”. • Shortcut bagi pengguna yang telah mahir menggunakan aplikasi. • Nilai default dari menu jika memang diperlukan. Selain hal-hal tersebut, ingatlah bahwa menu yang digunakan harus mencakup semua pilihan dan memungkinkan pengguna meralat pilihannya. Pada Gambar 3, terdapat sebuah antarmuka pada sebuah prototipe situs kontes desain. Seorang pembuat kontes dapat memilih jenis kontes yang akan berpengaruh pada durasi kontes tersebut. Terdapat tiga durasi waktu yang memungkinkan:

• Fastest Contest (3 hari) yang dipilih dengan cara menekan radio button Fastest Context. • Standard Contest (7 hari) yang dipilih dengan tidak menekan radio button apapun.


• Extend Contest (10 hari) yang dipilih dengan cara menekan radio button Extend Contest. Sekarang, perhatikanlah kasus berikut. Apabila pengguna telah memilih Extend Contest (Gambar 4), bagaimana cara pengguna dapat mengganti pilihannya ke Standard Contest? Antarmuka tersebut tidak memberikan jalan untuk melakukan hal tersebut sehingga pengguna harus me-refresh halaman web tersebut.

Gambar 3 Antarmuka untuk memilih jenis kontes desain yang akan diadakan. Bagaimana cara pengguna memilih Standard Contest apabila ia telah menekan radio button Extend Contest?

Selain prinsip-prinsip yang terdapat pada Galitz (2007), Anda juga harus memperhatikan guidelines yang disediakan oleh platform yang Anda gunakan. Sebagai contoh, Android menyediakan tombol Menu yang dapat menampilkan opsi yang dapat dipilih pengguna. Android mengatur jenis icon dan layout dari menu tersebut pada guidelines yang tersedia. Untuk aplikasi berbasis web, Galitz (2007) memberikan sebuah bagian tersendiri pada Step 4 yang membahas navigasi pada aplikasi web.


PERTEMUAN KE-8 Diskusi Tugas Anda ialah menambah bagian menu dan skema navigasi pada desain antarmuka yang telah Anda buat minggu sebelumnya. Desain dapat dibuat dengan menggunakan perangkat lunak apapun (contoh: PowerPoint, Axure, Balsamic, dan Photoshop). Hasil pengerjaan berikut LKP disatukan dalam sebuah berkas terkompresi. Ketua kelompok mengumpulkan berkas tersebut ke LMS. Selain dikumpulkan, hasil pengerjaan Anda dibawa kembali pada responsi selanjutnya. Task: Isikan nama task di sini Sketsa Antarmuka: Masukkan gambar sketsa antarmuka di sini




Modul IMK Semester Genap 2016-2017 Task: Sketsa Antarmuka:



PERTEMUAN KE-9 Presentasi Pada bagian ini, semua kelompok yang diminta untuk maju presentasi. Yang dipresentasikan ialah hasil desain antarmuka yang telah Anda buat. Setiap kelompok mendapatkan kesempatan menyajikan selama kurang lebih 10 menit, untuk desainnya selama 5 menit. Sebanyak 5 menit sisanya digunakan untuk diskusi. Nomor Kelompok: Komentar Kelompok Anda:




Nomor Kelompok:





PERTEMUAN KE-10 Select the Proper Kind of Windows dan Select the Proper Interaction Devices Materi: • Pembahasan dari Asisten • Diskusi • Presentasi


Penjelasan Materi Setiap platform yang menggunakan layar sebagai perangkat output memiliki jendela. Jendela inilah yang ‘membungkus’ informasi dan komponen kontrol antarmuka yang dapat digunakan oleh pengguna. Galitz (2007) telah membahas mengenai karakteristik jendela, komponen-komponen jendela, gaya dan tampilan jendela, jenis-jenis jendela, cara mengorganisasikan fungsi jendela, operasioperasi pada jendela, serta frame dan jendela pop up pada aplikasi web. Platform yang berbeda akan memiliki karakteristik yang berbeda pula. Hal ini juga mengakibatkan terjadinya perbedaan karakteristik jendela pada setiap platform yang digunakan. Sebagai konsekuensinya, Anda harus melakukan penyesuaian terhadap antarmuka yang Anda desain. Sebagai contoh, perhatikanlah tampilan situs Facebook yang diakses pada sebuah peramban berbasis desktop (Gambar 1) dan pada sebuah smartphone (Gambar 2). Pada peramban yang berjalan di desktop, halaman utama Facebook memuat sebagian besar funsionalitas yang terdapat pada situs tersebut, mulai dari meng-update status sampai melihat iklan yang ditampilkan secara otomatis oleh Facebook. Informasi yang ditampilkan pun kaya. Namun, seluruh informasi dan fungsionalitas itu tidak dapat diakses dalam sebuah jendela saja. Apabila hal tersebut dilakukan, yang terjadi adalah antara pengguna harus melakukan scrolling secara berlebihan atau melihat tampilan yang sangat kecil (sebagai ilustrasi, bukalah sebuah situs yang tidak memiliki mobile site). Oleh karena itu, pada telepon genggam, informasi dan fungsionalitas tersebut dibagi-bagi ke dalam banyak jendela.


Gambar 1 Halaman utama situs Facebook pada peramban desktop. Terdapat banyak informasi yang disajikan kepada pengguna. Selain itu, terdapat banyak hal yang dapat dilakukan oleh pengguna pada satu layar ini. Apakah seluruh fungsionalitas ini dapat disajikan dalam sebuah layar telepon genggam berukuran 3 inci?

e Gambar 2

Halaman utama situs Facebook pada peramban yang berjalan di telepon genggam dengan ukuran layar kecil. Informasi dan fungsionalitas yang dapat diakses oleh pengguna dibagi-bagi ke dalam beberapa layar yang lebih kecil.

Perangkat genggam sebagian besar telah memiliki sensor akselerometer yang memungkinkan perubahan orientasi layar (landscape atau portrait). Beberapa platform berbasis Windows memiliki jenis-jenis jendela seperti pivot, grid, dan split view. Oleh karena itu, kenalilah platform Anda dan manfaatkan kelebihan dari masing-masing platform secara maksimal. Beberapa kontrol yang dapat berhubungan dengan jendela ialah accordion dan tab.

Modul IMK Semester Genap 2016-2017 Terdapat berbagai jenis perangkat yang dapat Anda gunakan sebagai perangkat interaksi pada aplikasi yang kelompok Anda kembangkan. Alat input yang dibahas pada Galitz (2007) meliputi: trackball, joystick, trackpad, touch screen, light pen, voice, mouse, dan keyboard. Alat output yang dibahas pada Galitz (2007) meliputi layar dan speaker. Masing-masing perangkat tersebut memiliki kelebihan dan kekurangan tersendiri. Oleh karena itu, sebagai seorang perancang antarmuka, adalah tugas Anda untuk memilih perangkat interaksi yang dapat mempermudah pengguna menggunakan Aplikasi yang Ada gunakan. Selain itu, Anda juga perlu memahami karakteristik dari perangkat yang ada agar aplikasi yang Anda buat dapat memanfaatkan secara penuh perangkat tersebut. Untuk memilih perangkat yang sesuai, pertimbangkanlah hal-hal berikut:

1. 2. 3. 4.

Karakteristik pengguna, baik saat ini maupun yang akan dating. Persyaratan/permintaan yang telah ditentukan oleh pengguna/klien. Karakteristik perangkat yang dapat Anda manfaatkan. Kemudahan penggunaan perangkat pada lingkungan tempat pengguna menggunakan aplikasi. 5. Ketersediaan perangkat.

Dalam lima tahun terakhir, banyak perangkat interaksi baru yang muncul. Perangkat tersebut tentunya belum dimuat dalam Galitz (2007). Oleh karena itu, pada bagian, akan dijelaskan beberapa perangkat input dan output yang belum dibahas pada Galitz (2007), misalnya 3D printer dan interactive whiteboard.


PERTEMUAN KE-11 Diskusi Diskusikanlah poin-poin berikut dengan kelompok Anda. Tuliskanlah jawaban Anda pada bagian yang telah disediakan. Hasil diskusi dikumpulkan di LMS.

1. Tentukanlah karakteristik layar dari aplikasi yang kelompok Anda kembangkan. Hal yang ditentukan setidaknya meliputi (a) ukuran dalam satuan piksel, (b) kedalaman warna, dan (c) elemen-elemen layar yang digunakan pada layar tersebut (10 poin).

2. Pilihlah 1 sketsa antarmuka yang kelompok Anda buat pada pertemuan sebelumnya. Lengkapilah sketsa tersebut dengan jendela yang sesuai dengan poin (1) (25 poin).

3. Apa saja alat input dan output yang digunakan oleh aplikasi kelompok Anda? Mengapa kelompok Anda memilih alat tersebut untuk melakukan interaksi (5 poin)?

4. Carilah dua buah alat input dan dua buah alat output yang belum dibahas pada LKP ini. Kemudian, berikanlah deskripsi alat yang meliputi (a) saat penggunaan, (b) kelebihan, (c) kekurangan, dan (d) tautan yang memberikan penjelasan lebih lanjut dari alat tersebut (15 poin).

5. Apakah terdapat alat input dan output yang dapat digunakan untuk meningkatkan interaksi pada antarmuka aplikasi yang kelompok Anda kembangkan? Jika tidak, jelaskan mengapa. Jika ya, jelaskan dengan cara apa alat tersebut dapat meningkatkan antarmuka aplikasi Anda (15 poin).



PERTEMUAN KE-12 Presentasi Pada bagian ini, semua kelompok yang diminta untuk maju presentasi. Yang dipresentasikan ialah hasil desain antarmuka yang telah Anda buat. Setiap kelompok mendapatkan kesempatan menyajikan selama kurang lebih 10 menit, untuk desainnya selama 5 menit. Sebanyak 5 menit sisanya digunakan untuk diskusi. Nomor Kelompok: Komentar Kelompok Anda:




Nomor Kelompok:





PERTEMUAN KE-13 Select the Proper Kind of Windows dan Select the Proper Interaction Devices Materi: • Pembahasan dari Asisten • Diskusi dan Presentasi

Tujuan Responsi: Mahasiswa dapat memilih kontrol layar yang sesuai dengan kebutuhan aplikasi yang dibangun.

Penjelasan Materi Kontrol (atau widgets) adalah komponen layar yang mewakili suatu operasi. Sebuah control dapat digunakan untuk (Galitz 2007):

1 2 3 4 5

Memasukkan atau memilih suatu nilai. Mengubah atau mengedit suatu nilai. Menampilkan bagian dari suatu teks, nilai, atau grafik. Menyebabkan suatu perintah tereksekusi. Menampilkan jendela pop-up.

Hal-hal yang harus diperhatikan dalam membuat dan menggunakan suatu kontrol adalah (Galitz 2007):

1 Memiliki tampilan yang konsisten dengan fungsi yang ia miliki. 2 Menggunakan kontrol sesuai dengan desain awal penggunaannya. 3 Menampilkan kontrol sesuai dengan standar atau guidelines yang berlaku. Usability.gov (2006) juga menambahkan hal-hal yang harus diperhatikan dalam menggunakan kontrol:

1 Minimalkan jumlah data yang harus diisi oleh pengguna. Sistem dapat mengisikan nilainilai yang dapat diperoleh secara otomatis, misalnya tanggal hari ini. Selain itu, apabila sistem memiliki sistem manajemen pengguna, nilai-nilai yang disimpan dalam database dapat diambil dan dimasukkan secara otomatis pada kontrol yang tersedia. Contohnya adalah alamat pengiriman barang. 2 Letakkan label di dekat kontrol yang dimaksud agar pengguna dapat memahami label itu dengan mudah. 3 Bedakan kontrol entri data yang wajib diisi dengan yang tidak wajib diisi. Misalnya, Anda dapat menambahkan tanda asterisk (*) pada field yang wajib diisi. 4 Berikan penamaan pada kontrol entri data dengan jelas dan tidak ambigu. Gunakanlah istilah-istilah yang familiar dengan pengguna. 5 Berikan nama tombol dengan jelas dan menggambarkan operasi yang ia lakukan. 6 Berikan penamaan yang konsisten. Contohnya adalah seluruhnya menggunakan kata kerja atau seluruhnya menggunakan kata benda. 7 Mungkinkan pengguna dapat melihat nilai yang mereka masukkan. Buatlah ukuran kontrol yang sesuai agar pengguna tidak harus melakukan scrolling untuk melihat data


8 9 10 11 12 13 14 15 16

yang ia ketikkan. Jika terdapat jumlah karakter maksimum, cantumkan informasi tersebut di dekat kontrol yang bersesuaian. Gunakanlah radio button untuk pilihan yang sifatnya mutually exclusive. Gunakanlah check boxes untuk pilihan ganda. Gunakanlah widget yang familiar dengan pengguna. Antisipasi kesalahan yang sering dilakukan oleh pengguna. Lakukan validasi terhadap nilai yang dimasukkan oleh pengguna. Lakukan partisi terhadap data yang panjang. Misalnya untuk memasukkan serial number. Urutkan tombol berdasarkan kepentingannya. Biasanya, tombol yang terletak paling kiri memiliki tingkat kepentingan yang lebih tinggi. Berikan label keterangan pada kontrol yang menerima masukan dalam satuan tertentu. Misalnya suhu (celcius, farenheit, atau kelvin) dan berat (kilogram, gram, atau ons). Tampilkan nilai default dari suatu kontrol. Gunakanlah nilai yang paling sering dimasukkan oleh pengguna. Secara otomatis, letakkan kursor pada field pertama.

Setiap platform pengembangan menyediakan set kontrol yang dapat Anda gunakan. Anda perlu memperhatikan bahwa terkadang terdapat perbedaan istilah untuk menyebut kontrol yang sebenarnya serupa. Apabila kontrol yang disediakan oleh platform tidak memenuhi kebutuhan Anda, Anda dapat menggunakan kontrol yang disediakan oleh pihak ketiga. Contohnya adalah jQuery (http://jquery.com/) dan jQuery Mobile (http://jquerymobile.com/).


PERTEMUAN KE-14 Diskusi Diskusikanlah poin-poin berikut dengan kelompok Anda. Tuliskanlah jawaban Anda pada bagian yang telah disediakan. Hasil diskusi dikumpulkan di LMS paling lambat hari Kamis, 21 Maret 2013 pukul 23:55 WIB.

Lengkapilah seluruh layar antarmuka Anda dengan kontrol berbasis layar dengan mempertimbangkan hal-hal yang harus diperhatikan dalam memilih dan menggunakan kontrol antarmuka.

Cara membaca gambar dari kiri ke kanan berurutan.



Presentasi Pada bagian ini, akan ada sebagian kelompok yang diminta untuk maju presentasi. Yang dipresentasikan ialah hasil desain antarmuka yang telah Anda buat. Setiap kelompok mendapatkan kesempata menyajikan selama kurang lebih 10 menit, untuk desainnya selama 5 menit. Sebanyak 5 menit sisanya digunakan untuk diskusi. Nomor Kelompok: Komentar Kelompok Anda:





MODUL RESPONSI INTERAKSI MANUSIA DAN KOMPUTER OLEH ASISTEN INTERAKSI MANUSIA DAN KOMPUTER

Recommend Documents