MODUL RESPONSI INTERAKSI MANUSIA DAN …lab.ilkom.unila.ac.id/modul/semester genap/D3 Manajemen...

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.


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:


Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:



Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:



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


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:

Task:

Sketsa Antarmuka:


Task:

Sketsa Antarmuka:

Task:

Sketsa Antarmuka:

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.

Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:



Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:



PERTEMUAN KE-7

Develop System Menu and Navigation Schemes

Materi:


• 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

Task:

Sketsa Antarmuka:

Task:

Sketsa Antarmuka:

Task:

Sketsa Antarmuka:


Task:

Sketsa Antarmuka:

Task:

Sketsa Antarmuka:


PERTEMUAN KE-9

Presentasi


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:


Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:



Nomor Kelompok:


Nomor Kelompok:



PERTEMUAN KE-10

Select the Proper Kind of Windows dan Select the Proper Interaction

Devices

Materi:


• 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, operasi-

operasi 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.


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. Karakteristik pengguna, baik saat ini maupun yang akan dating.

2. Persyaratan/permintaan yang telah ditentukan oleh pengguna/klien.

3. Karakteristik perangkat yang dapat Anda manfaatkan.

4. 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


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:


Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:


Nomor Kelompok:



Nomor Kelompok:


Nomor Kelompok:



PERTEMUAN KE-13

Select the Proper Kind of Windows dan Select the Proper Interaction

Devices

Materi:


• 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 Memasukkan atau memilih suatu nilai.

2 Mengubah atau mengedit suatu nilai.

3 Menampilkan bagian dari suatu teks, nilai, atau grafik.

4 Menyebabkan suatu perintah tereksekusi.

5 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 nilai-

nilai 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


yang ia ketikkan. Jika terdapat jumlah karakter maksimum, cantumkan informasi

tersebut di dekat kontrol yang bersesuaian.

8 Gunakanlah radio button untuk pilihan yang sifatnya mutually exclusive.

9 Gunakanlah check boxes untuk pilihan ganda.

10 Gunakanlah widget yang familiar dengan pengguna.

11 Antisipasi kesalahan yang sering dilakukan oleh pengguna. Lakukan validasi terhadap

nilai yang dimasukkan oleh pengguna.

12 Lakukan partisi terhadap data yang panjang. Misalnya untuk memasukkan serial

number.

13 Urutkan tombol berdasarkan kepentingannya. Biasanya, tombol yang terletak paling kiri

memiliki tingkat kepentingan yang lebih tinggi.

14 Berikan label keterangan pada kontrol yang menerima masukan dalam satuan tertentu.

Misalnya suhu (celcius, farenheit, atau kelvin) dan berat (kilogram, gram, atau ons).

15 Tampilkan nilai default dari suatu kontrol. Gunakanlah nilai yang paling sering

dimasukkan oleh pengguna.

16 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:


Nomor Kelompok:



Nomor Kelompok:


Nomor Kelompok:


MODUL RESPONSI INTERAKSI MANUSIA DAN …lab.ilkom.unila.ac.id/modul/semester genap/D3 Manajemen...

Documents

Transcript of MODUL RESPONSI INTERAKSI MANUSIA DAN …lab.ilkom.unila.ac.id/modul/semester genap/D3 Manajemen...