Upload
buikiet
View
250
Download
0
Embed Size (px)
Citation preview
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:
Modul IMK Semester Genap 2016-2017
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:
Modul IMK Semester Genap 2016-2017
Modul IMK Semester Genap 2016-2017
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).
Modul IMK Semester Genap 2016-2017
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).
Modul IMK Semester Genap 2016-2017
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:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Modul IMK Semester Genap 2016-2017
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Modul IMK Semester Genap 2016-2017
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:
Modul IMK Semester Genap 2016-2017
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:
Modul IMK Semester Genap 2016-2017
Task:
Sketsa Antarmuka:
Task:
Sketsa Antarmuka:
Task:
Sketsa Antarmuka:
Modul IMK Semester Genap 2016-2017
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:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Modul IMK Semester Genap 2016-2017
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Modul IMK Semester Genap 2016-2017
PERTEMUAN KE-7
Develop System Menu and Navigation Schemes
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
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.
Modul IMK Semester Genap 2016-2017
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.
Modul IMK Semester Genap 2016-2017
• 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.
Modul IMK Semester Genap 2016-2017
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:
Modul IMK Semester Genap 2016-2017
Task:
Sketsa Antarmuka:
Task:
Sketsa Antarmuka:
Modul IMK Semester Genap 2016-2017
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:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Modul IMK Semester Genap 2016-2017
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Modul IMK Semester Genap 2016-2017
PERTEMUAN KE-10
Select the Proper Kind of Windows dan Select the Proper Interaction
Devices
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
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.
Modul IMK Semester Genap 2016-2017
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. 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.
Modul IMK Semester Genap 2016-2017
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).
Modul IMK Semester Genap 2016-2017
Modul IMK Semester Genap 2016-2017
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:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Modul IMK Semester Genap 2016-2017
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda:
Modul IMK Semester Genap 2016-2017
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 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
Modul IMK Semester Genap 2016-2017
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/).
Modul IMK Semester Genap 2016-2017
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.
Modul IMK Semester Genap 2016-2017
Modul IMK Semester Genap 2016-2017
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:
Nomor Kelompok:
Komentar Kelompok Anda:
Modul IMK Semester Genap 2016-2017
Nomor Kelompok:
Komentar Kelompok Anda:
Nomor Kelompok:
Komentar Kelompok Anda: