Mencetak Presensi Kuliah Mencetak Presensi Ujian Mencetak KRS Mencetak Nilai Ujian Mencetak KHS Mencetak Data Mahasiswa Mencetak Data Mata Kuliah
Selesai
Pilih salah satu: _
13
13
16/09/2013
Pilihan pada menu datar dioperasikan dengan memilih selektor Selektor: ◦ Huruf Kompatibel: sama dengan huruf pertama pilihan Tak Kompatibel: tidak harus sama
◦ Angka Kompatibel: sama dengan nomor urut huruf pertama pilihan Tak kompatibel: tidak harus sama
14
14
16/09/2013
MENU DATAR DENGAN SELEKTOR HURUF KOMPATIBEL B. C. D. E. G. H. I.
Baca Data Cetak Laporan Data Baru Ed it Rekaman Gabung Berkas Hapus Rekaman Isi Rekaman
Pilih salah satu:_
MENU DATAR DENGAN SELEKTOR HURUF TAK KOMPATIBEL A. B. C. D. E. F. G.
Pilih salah satu: _
a. MENU DATAR DENGAN SELEKTOR ANGKA KOMPATIBEL 2. 3. 4. 5. 7. 8. 9.
Baca Data Cetak Laporan Data Baru Edit Rekaman Gabung Berkas Hapus Rekaman Isi Rekaman
Pilih salah satu:_
Baca Data Cetak Laporan Data Baru Edit Rekaman Gabung Berkas Hapus Rekaman Isi Rekaman
b. MENU DATAR DENGAN SELEKTOR ANGKA TAK KOMPATIBEL 1. 2. 3. 4. 5. 6. 7.
Baca Data Cetak Laporan Data Baru Edit Rekaman Gabung Berkas Hapus Rekaman Isi Rekaman
Pilih salah satu:_ 15
15
16/09/2013
Menu datar tidak lagi disukai karena terlalu memakan kapling pada layar monitor Untuk menampilkan daftar pilihan yang banyak sekarang banyak digunakan menu tarik (pulldown menu), dan hampir semua program aplikasi menggunakannya.
16
16
16/09/2013
17
17
16/09/2013
Pada menu berbasis ikon dan toolbar, pilihan dinyatakan sebagai suatu ikon atau toolbar tertentu. Contoh:
18
18
16/09/2013
Menu gulung
Kotak kombo
Menu mata ikan
Penggeser
Menu dua dimensi 19
19
16/09/2013
Menu tertanam adalah menu yang dapat ditambahkan sendiri oleh pengguna suatu aplikasi, misalnya Google Earth. Menu hotlink banyak dijumpai di situs Website yang tujuannya untuk membawa pengguna ke informasi tertentu.
20
20
16/09/2013
Contoh:
21
21
16/09/2013
Untuk membantu pengguna menavigasi dirinya ke ruang informasi yang tersedia, seringkali digunakan menu breadcrumb Contoh:
22
22
16/09/2013
Pada sejumlah aplikasi, khususnya yang berbasis Web, biasanya dijumpai sejumlah ragam menu yang berbeda Menu yang ada ditampilkan satu persatu atau secara serempak (bersamaan): Contoh kombinasi banyak menu yang ditampilkan satu per satu misalnya pada pemesanan tiket pesawat terbang atau kamar hotel: ◦ www.airasia.com
23
23
16/09/2013
Contoh menu serempak:
24
24
16/09/2013
Menu berstruktur pohon dan jaring:
25
25
16/09/2013
Peta situs: digunakan untuk membantu pengguna mengetahui secara keseluruhan ruang informasi yang tersedia
www.ebay.com
26
26
16/09/2013
Shneiderman (1983): ◦ Manipulasi langsung adalah ragam dialog yang mempunyai karakteristik: penyajian visual dari obyek yang akan dimanipulasi tindakan fisik sebagai pengganti teks masukan reaksi langsung yang dapat dilihat.
27
27
16/09/2013
Preece, 1994: ◦ kenampakan obyek dan tindakan yang dilakukan pengguna ◦ cepat, dapat dibalik/dibatalkan, tindakan meningkat ◦ penggantian perintah yang diketik dengan tindakan menunjuk ke obyek yang diinginkan
28
28
16/09/2013
Definisi lain yang lebih umum: ◦ Mengklik dan menggeser obyek pada layar tampilan ◦ Definisi di atas hanya menekankan pada tindakan fisik oleh pengguna ◦ Istilah ini sering disebut dengan manipulasi visual (Cooper dan Reimann, 2003)
29
29
16/09/2013
Aspek kognitif: ◦ Directness:
gagasan tentang arah perasaan yang timbul sebagai hasil dari interaksi dengan antarmuka
◦ Aspek dari directness:
Jarak antara yang dipikirkan pengguna dengan kebutuhan sistem Keterlibatan secara kualitatif
30
30
16/09/2013
Manipulasi Program vs Manipulasi Isi ◦ Manipulasi program:
cara pengguna menggunakan program aplikasi untuk menyelesaikan satu tugas Tidak perlu keahlian khusus
◦ Manipulasi isi:
lebih merujuk ke data yang diolah oleh program aplikasi tersebut Perlu keahlian khusus atau pelatihan dalam jangka waktu agak lama
31
31
16/09/2013
Dix et al. (2004):
◦ kenampakan obyek yang menjadi perhatian, ◦ penggantian bahasa perintah yang rumit dengan suatu tindakan yang memanipulasi obyek yang nampak secara langsung (sehingga disebut dengan manipulasi langsung) ◦ tindakan bertahap pada antarmuka dengan umpan balik segera untuk semua tindakan yang diambil, ◦ kebenaran sintaksis untuk semua tindakan, sehingga semua tindakan pengguna merupakan langkah yang sah ◦ semua tindakan dapat dibatalkan
32
32
16/09/2013
Pengisian borang hampir dilakukan oleh setiap orang sepanjang hidup mereka Antarmuka berbasis pengisian borang adalah jenis antarmuka yang menggunakan metafor borang untuk mengisi data ke komputer
33
33
16/09/2013
Aspek-aspek IBPB (1):
◦ Proteksi tampilan - adanya pembatasan agar pengguna tidak dapat mengakses semua tampilan yang ada di layar. ◦ Batasan medan tampilan - medan data dapat ditentukan untuk mempunyai panjang yang tetap atau berubah, menggunakan format bebas atau tertentu. ◦ Isi medan - pengguna biasanya mempunyai sejumlah gambar-an tentang isi medan yang diperbolehkan; petunjuk pengisian dapat juga ditampilkan sebagai bagian dari tampilan
34
34
16/09/2013
Aspek-aspek IBPB (2): ◦ Medan opsional - beberapa medan isian dapat bersifat opsional; medan opsional dapat dinyatakan secara tekstual atau menggunakan aturan tertentu seperti penggunaan warna berintensitas rendah, warna tampilan yang berbeda dan lain-lain ◦ Default - apakah dalam medan isian dimungkinkan adanya nilai default. Jika ya, tentukan tempatnya, apakah pada bagian yang tidak dapat diakses pengguna ataukah pada bagian masukan data.
35
35
16/09/2013
Aspek-aspek IBPB (3):
◦ Bantuan - adanya bantuan (help) yang menunjukkan cara pengisian borang dapat pula, atau malah sebaliknya, ditambahkan, tetapi harus terpisah dari bentuk dasar borang. Jika terdapat fasilitas bantuan, pengguna perlu dineritahu cara mengakses bantuan tersebut. ◦ Medan penghentian - masukan data dalam medan dapat diakhiri dengan jalan menekan tombol Enter atau Return atau mengisi karakter terakhir dengan karakter tertentu, atau de-ngan cara berpindah ke medan lain. ◦ Navigasi - kursor dapat digerakkan di sekeliling layar yang menggunakan tombol Tab untuk urutan yang tetap, atau dapat pula digerakkan secara bebas menggunakan piranti seperti mouse.
36
36
16/09/2013
Aspek-aspek IBPB (4): ◦ Pembetulan kesalahan - pengguna dapat membetulkan kesalahan menggunakan tombol BackSpace, dengan menumpang-tindihi isian lama, dengan jelan membersihkan dan mengisi kembali medan tersebut dan lain-lain. ◦ Penyelesaian - perlu diperhatikan cara yang digunakan untuk memberitahu pengguna bahwa seluruh proses pengisian telah selesai.
37
37
16/09/2013
38
38
16/09/2013
Paper min 5 halaman Review aplikasi – mobile/web/desktop Kumpulkan hardcopy max 23 sept (next week) Individual – tidak boleh ada yg sama Isi : ◦ Deskripsi aplikasi (fungsi,kelompok pengguna,dsb) ◦ Terapkan dan bahas sisi visibilitas, affordance, mapping dan constraint dari aplikasi tersebut (+/-)
39
39