Modul Interaksi Dan Manusia

MODUL PERKULIAHAN

EDISI 1 Perancangan Antarmuka

Penulis : Mira Kania Sabariah, M.T.

JURUSAN TEKNIK INFORMATIKA

UNIVERSITAS KOMPUTER INDONESIA BANDUNG 2009

INTERAKSI MANUSIA DAN KOMPUTER

DAFTAR ISI

Daftar Isi

.

2 3

Bab 1 Pendahuluan Bab 2 Profile User

11

Bab 3 Fungsi Bisnis 18 Bab 4 Menu Sistem Dan Skema Navigasi .. 24 Bab 5 Windows ... 31

Bab 6 Pengendali Layar .. 38 Bab 7 Perancangan Antarmuka 43 Bab 8 Mobile Interface&Web Interface .. 51 Daftar Pustaka .. 59

IF/2009

2


1

PENDAHULUAN

JUMLAH PERTEMUAN : 2 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Memahami pentingnya User Interface (UI) serta karakteristik UI yang tepat untuk setiap aplikasi. 2. Mengerti dan menerapkan proses desain UI untuk menghasilkan UI yang berkualitas 3. Mengetahui tren-tren desain UI yang terkini

Materi

:

1.1 Pendahuluan Perancangan antarmuka pada dasarnya adalah proses penggambaran dari bagaimana sebuah bagian sistem dibentuk. Maka dari itu pada saat akan melakukan tahap perancangan antarmuka diperlukan untuk mendefinisikan kebutuhan-kebutuhan fungsional dari sistem yang akan dibangun serta mengetahui sejauh mana kemampuan pengguna pada saat akan menggunakan sistem tersebut. Antarmuka merupakan media komunikasi pengguna saat akan berinteraksi dengan sistem, oleh karena itu agar proses interaksi pengguna dengan sistem berjalan dengan baik maka antarmuka pengguna yang dihasilkan harus dapat dengan mudah dipelajari, mudah digunakan, dan nyaman pada saat penggunaannya.

1.2 Interaksi Manusia dan Komputer Perancang Antarmuka harus memperhatikan beberapa faktor dalam merancang antarmuka, faktor faktor yang perlu diperhatikan adalah sebagai berikut: a. Apa keinginan dan harapan orang b. Apa batasan dan kemampuan fisiknyaIF/2009 3


c. Bagaimana sistem penerimaan dan pemrosesan informasi mereka bekerja d. Apa yang dianggap menarik dan menyenangkan. Perancang juga harus memperhatikan karakteristik dan batasan teknis dari perangkat keras dan perangkat lunak komputer Interaksi manusia dan komputer dapat didefinisikan sebagai irisan antara 2 lingkaran merepresentasikan antarmuka antara manusia dan komputer, dimana merupakan 2 subsistem dapat saling berkomunikasi. Hal tersebut dapat dilihat pada gambar 1.1.

Human

Computer

Gambar 1.1. Interaksi Manusia dan Komputer

Manusia cenderung fleksibel & mampu beradaptasi, dapat belajar bagaimana bekerja di lingkungan yang baru. Manusia terbatas dalam kapasitas memproses informasi, informasi pada manusia diterima dan direspon melalui saluran input dan direspon melalui saluran masukan/keluaran, disimpan di memori kemudian diproses dan diaplikasikan. Komputer cenderung tidak fleksibel / tidak mampu beradaptasi, masukan harus dalam format yang jelas dan keluaran harus didefinisikan sebelumnya, tidak dapat belajar, dapat di desain ulang. Memori pada komputer bersifat permanen/tetap dan memilki kapasitas yang cukup besar, serta tidak bersifat asosiatif. Irisannya adalah merupakan interaksi antara 2 komponen tersebut, atau dengan kata lain interaksi adalah proses komunikasi antara pengguna dan komputer. Berdasarkan dari definisi diatas dapat kita simpulkan bahwa interaksi manusia dan komputer adalahIF/2009 4


reka bentuk, penilaian, implementasi sistem komputer interaktif untuk kegunaan manusia dan berisi kajian tentang fenomena yang terlibat didalamnya atau dengan kata lain interaksi pengguna dengan komputer.

1.3 User Interface Antarmuka/user interface (UI) merupakan bagian dari komputer dan perangkat lunaknya yang dapat dilihat, didengar, disentuh, dan diajak bicara, baik secara langsung maupun dengan proses pemahaman tertentu. UI yang baik adalah UI yang tidak disadari, dan UI yang memungkinkan pengguna fokus pada informasi dan task tanpa perlu mengetahui mekanisme untuk menampilkan informasi dan melakukan task tersebut. Komponen utamanya adalah Input dan Output

1.4 Pentingnya Desain UI yang Baik Banyak sistem dengan fungsionalitas yang baik tapi tidak efisien, membingungkan, dan tidak berguna karena desain UI yang buruk. Antarmuka yang baik merupakan jendela untuk melihat kemampuan sistem serta jembatan bagi kemampuan perangkat lunak. Desain yang buruk akan membingungkan, tidak efisien, bahkan menyebabkan frustasi. 1984 Apple Computer Inc membuat Macintosh, brosurnya fokus pada UI. Of the 235 milion people in America, only a fraction can use a computer.. Introducing Macintosh for the rest of us. Wouldnt it make more sense to teach computers about people, instead of teaching people about computers? Macintosh. Designed on the principle that a computer is a lot more useful if it is easy to use. The real genius is that you dont have to be a genius to use a Macintosh.

Hasil penelitian mengatakan bahwa : Pengguna bekerja 20% lebih produktif dengan layar yang sederhana.

IF/2009

5


Pengguna layar yang dimodifikasi menyelesaikan transaksi 25% lebih cepat dan error berkurang 25% dari sebelumnya. Window yang didesain dengan efektif menghemat $20,000 dalam 1 tahun. Fungsi searching yang diperbaiki dapat meningkatkan success rate hingga 15% dan waktu pencarian 50% lebih cepat.

1.5 Sejarah Interaksi Manusia dan Komputer Kebutuhan manusia akan komunikasi terbagi seperti yang terlihat digambar 1.2 berikut ini : written language spoken language

movements and gestures Gambar 1.2 Kebutuhan Manusia akan komunikasi Kemampuan komputer untuk mendukung kebutuhan komunikasi manusia tergantung pada kemudahan yang dirasakan manusia dalam menggunakannya. Perkembangan Interaksi Manusia dan Komputer terbagi menjadi : 1. Pengenalan GUI (Graphical User Interface) 2. Perkembangan WWW (World Wide Web) 3. Sejarah Desain Layar

1.6 Prinsip User Interface Dalam perancangan antarmuka perangkat lunak ada beberapa prinsip yang harus diperhatikan oleh perancang (Deborah,1992), diantaranya adalah sebagai berikut : 1. Kompatibilitas PenggunaIF/2009 6


Semua pengguna adalah tidak sama dan semua pengguna tidak seperti seorang pembangun aplikasi (lihat gambar 1.3). Pembangun aplikasi harus paham tentang pengetahuan psikologi dasar manusia, hal ini mempengaruhi terhadap kompatibilitas pengguna.

User A ............. ..

User B

User A ............. ..

User B

Designer Semua User Bukan Designer

Designer Semua User Tidak Sama

Gambar 1.3 Kompatibilitas Pengguna 2. Kompatibilitas Produk Kompatibilitas antar produk harus diperhatikan dan dipertahankan. Hal ini dilakukan dengan mengorbankan perubahan antarmuka pengguna dimana sistem mungkin lebih kompatibel. 3. Kompatibilitas Transisi antar Tugas Sistem harus diorganisasikan dengan baik sehingga dapat memudahkan pengguna dalam melakukan transisi tugasnya. Fungsi yang disajikan dalam antarmuka pengguna disesuaikan dengan kebutuhannya.

IF/2009

7


4. Konsistensi Konsisten merupakan hal yang sangat penting untuk membantu pengguna dalam mengembangkan mentalitas yang diperlukan dalam pengoperasian sistem komputer. Konsistensi membuat pengguna berfikir dengan meng-analogi-kan dan memprediksi bagaimana melakukan sesuatu yang belum pernah dilakukan sebelumnya. 5. Kebiasaan Konsep, terminologi, pengaturannya di antarmuka harus yang dapat dipahami pengguna dengan baik, sehingga pengguna tidak merasa bingung pada saat berinteraksi. 6. Kesederhanaan Sajikan antarmuka dalam bentuk sederhana tanpa mengurangi fungsionalitas dari produk yang dibangun. Kesalahan umum yang terjadi pada perancangan antarmuka adalah berusaha untuk menyediakan semua fungsionalitas tanpa melakukan pengelompokan atau ortogonalitas. 7. Manipulasi Langsung Manipulasi langsung merupakan gaya dialog dimana aksi yang dilakukan oleh user dapat langsung terlihat pada obyek yang tampak di layar monitor. Manipulasi langsung biasanya menyertakan alat penunjuk seperti mouse, trackball, atau layar sentuh, dan banyak menggunakan grafik dalam menampilkan obyek dan aksi. 8. Kontrol Sistem selalu berada di bawah kontrol pengguna. Sistem dapat membuat frustasi dan demoralisasi bagi pengguna, jika mereka merasa dikontrol oleh mesin. Agar hal ini dapat tercapai, antarmuka harus mempunyai sarana yang memungkinkan pengguna dapat menentukan : Dimana sebelumnya pengguna berada. Dimana pengguna berada sekarang.IF/2009 8


Kemana pengguna dapat pergi. Apakah pekerjaan yang sudah dilakukan dapat dibatalkan.

9. Tepat dalam penggunaan (Efektivitas) Reka bentuk antarmuka sistem yang sesuai dengan fungsi dari sistem. Pertanyaan-pertanyaan yang muncul dalam mencapai efektivitas adalah apakah sistem yang dibangun dapat membuat pengguna mudah untuk mempelajarinya, efisien dalam melakukan pekerjaan, pengguna dapat mengakses informasi yang mereka perlukan, dan sebagainya. 10. Efisien dalam pengunaan Efisiensi merujuk pada apakah sistem menyediakan fasilitas untuk pengguna mengerjakan tugasnya. 11. Keamanan dalam Penggunaan Keamanan merupakan hal yang paling utama untuk melindungi pengguna dalam menghadapi kondisi yang membahayakan dan yang tidak diinginkan. Salah satunya dapat dilakukan dengan cara membuat sebuah pesan dari sebuah aktivitas yang dilakukan pengguna (lihat gambar 1.4)

Gambar 1.4 Pesan Dokumen belum disimpan pada Microsoft Word 12. Kesesuaian Fungsi Kesesuaian fungsi merujuk pada fungsi-fungsi yang disediakan sistem harus sesuai dengan definisi dari sistem tersebut. Sebagai contoh aplikasi untuk pengolah kata harus menyediakan seluruh fasilitas pengolah kata, seperti pembuatan dokumen baru, penyimpanan dokumen, dan sebagainya.

IF/2009

9


13. Mudah dalam mempelajari Sistem yang mudah untuk digunakan adalah sistem yang mudah dalam mempelajarinya. Untuk membangun sistem yang mudah dipelajari oleh pengguna maka perancang harus mengetahui karakteristik dari pengguna, seperti kemampuan dan keahlian pengguna sistem yang akan dibangun. 14. Mudah Diingat Sistem yang mudah digunakan juga adalah sistem yang mudah diingat bagaimana cara menggunakannya, tidak perlu waktu yang cukup lama untuk mempelajarinya. Memori manusia terbagi menjadi dua bagian, yaitu memori jangka pendek dan memori jangka panjang. Penyerapan informasi pada manusia diterima pertama kali oleh memori jangka pendek, dimana karakteristik memori jangka pendek dalam menyimpan informasi sangat singkat. Agar pengguna mudah dalam mengingat informasi maka informasi perlu disimpan dalam memori jangka panjang melalui proses belajar, oleh karena itu reka bentuk antarmuka yang mudah dipelajari. Hal tersebut dapat dilakukan dengan cara organisasikan informasi dalam pola yang berarti karena kapasitas dan durasi STM terbatas, sebagai contoh : 1112222 lebih mudah diingat drpd 68934762 100 + 100 lebih mudah diproses drpd 147 + 732 Rancang label dan penamaan yang mudah untuk membedakan kata secara fonematik. Latihan : Lakukan analisis terhadap antarmuka dari sebuah situs, apakah sudah memenuhi prinsip user interface, serta berikan saran perbaikkan jika perlu.

IF/2009

10


2

USER PROFILE

JUMLAH PERTEMUAN : 2 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Mengetahui jenis-jenis karakteristik pengguna. 2. Memahami karakteristik pengguna sebagai panduan untuk merancang sebuah antarmuka.

Materi

:

2.1 Pendahuluan Sistem Interaktif bertujuan meningkatkan efisiensi & efektifitas performansi pengguna. Perfomansi pengguna dapat diukur melalui waktu ditambah dengan usaha (PERFORMANCE = TIME + EFFORT). Oleh karena itu seorang System designer harus mampu : 1. 2. Mengukur performansi Memanipulasi faktor faktor yang berpengaruh.Untuk mengukur perfomasi dari pengguna dapat dilihat dari Determinan performansi pengguna berikut : a. Sistem pengolahan informasi pada manusia (Human Information Processing System) b. Karakteristik psikologi Pengguna (User physchology characteristic) c. Pengetahuan dan pengalaman Pengguna (User knowledge & experience)

d. Tugas dan Pekerjaan Pengguna (User Job & Task) e. f. g. Karakteristik phisik pengguna (User Physical Characteristic) Lingkungan secara phisik dari pengguna (User Physical Environment) Alat Bantu pengguna (User Tool)

IF/2009

11


2.2 Sistem Pengolahan Informasi pada Manusia Faktor penentu utama untuk merancang sistem interaktif adalah pada system pengolahan informasi pada manusia, dimana harus ada pemahaman bagaimana orang berpikir, belajar dan berkomunikasi atau bisa dianalogikan dengan model pemrosesan dalam Komputer. Sistem pengolahan pada manusia sangat kompleks dan sulit dimengerti sehingga sulit untuk dijadikan model secara akurat. Tetapi pendekatan yang sudah ada dibagi atas tiga bagian (Preece, 1994): 1. Pengolahan Persepsi Persepsi merupakan proses dasar dalam berinteraksi dengan komputer. Penerimaan informasi pada saat berinteraksi dengan komputer direpesentasikan dengan antarmuka, sehingga perlu diperhatikan dalam reka bentuk antarmuka agar tidak menyebabkan ambigu dalam penerimaan/penyerapan informasi. 2. Pengolahan Intelektual (Kognitif) Proses kognitif mengacu pada proses dimana manusia dapat tertarik pada sesuatu, atau dengan kata lain bagaimana kita dapat menambah ilmu. Hal ini termasuk proses untuk mengerti, mengingat, memberi alasan, mengadakan sesuatu, mewaspadai, memperoleh ketrampilan, ataupun

mengemukakan/mengeluarkan ide atau gagasan. 3. Pengendalian Motorik Responder utama dari manusia pada sistem interaksi manusia komputer adalah dua tangan dengan kesepuluh jarinya, dua mata dan satu suara. Oleh karena itu perlu dilakukan diskusi dalam keterbatasan fisik manusia dalam mengoperasikan alat masukan dan keluaran.

2.3 Karakteristik psikologi Pengguna (User physchology characteristic) Perilaku (Attitude) dan Motivasi (Motivation) memainkan peranan penting dalam menilai perfomansi untuk keahlian motorik, keahlian kognitif atau keahlian perceptual. Sistem interaktif dapat digambarkan sebagai berikut :IF/2009 12


1. Meminimalkan negatif emosi dari rasa takut, gugup dan sebagainya. 2. Maksimalkan kepuasan kerja, motivasi dan perilaku. Berikut dalam tabel 2.1 merupakan table yang berisi kategori dari karakteristik

psikologi pengguna. Tabel 2.1 Kategori Karakteristik Psikologi Pengguna Cognitive Style Attitude Motivation

Verbal/Analytic Spatial/Intuitive

Positive Neutral Negative

High Moderate Low

Implikasi karakteristik psikologi pengguna terhadap perancangan antarmuka pengguna dapat dilihat ditabel 2.2 dibawah ini. Tabel 2.2 Implikasi Untuk Perancangan Antarmuka pengguna Karakteristik Pengguna Low motivation, discretionary use Low motivation, mandatory use High motivation, due to fear High motivation, due to interest Desain Akhir Ease of learning Control, power Ease of learning, robustness,

control, power Power, ease of use

2.4 Pengetahuan dan Pengalaman Pengguna (User Knowledge&Experience) Berdasarkan Pengetahuan dan pegalaman, pengguna tidak hanya dapat dikategorikan sebagai pengguna yang awan dan pengguna yang ahli. Banyak item yang dapat dijadikan sebagai penilaian, dan relative dapat berdiri sendiri untuk setiap itemnya. Meskipun banyak kombinasi item dan berbeda-beda, dapat dikategorikan menjadi 2, yaitu berdasarkan pengalaman terhadap tugas dan pengalaman terhadap sistem. BerikutIF/2009 13


dalam tabel 2.3 adalah item-item yang dapat dijadikan penilaian berdasarkan pengetahuan dan pengalaman pengguna Tabel 2.3 Item-item dalam pengetahuan dan pengalaman pengguna Educational Level High School College Advanced Computer Literacy Highly Moderate Low Task Experience (Semantic Knowledge) Reading Level Related to Educational Typing Skills Expert (135 wpm) Good (55 wpm) Average (40 wpm) System Experience (Syntactic knowledge)

Refer to knowledge of task Refer to knowledge of domain particular language or mode of interaction

Application Experience Refer to have used other similar systems

Native Language

Use of Others System

Implikasi pengetahuan dan pengalaman pengguna terhadap perancangan antarmuka pengguna dapat dilihat ditabel 2.4 dibawah ini. Tabel 2.4 Implikasi terhadap perancangan antarmuka penggunaSystem Experience Low Task Experience Low Design Goal Many prompt & efective error recovery procedure High High Efficient commands, concise error msg, not verbose prompting High Low Low High Semantic help facilities & message Minimal semantic prompting, a lot of syntactic prompting & instruction

IF/2009

14


2.5 Tugas dan Pekerjaan Pengguna (User Job & Task) Tugas dan pekerjaan dari pengguna merupakan suatu bagian dari profile pengguna yang harus diketahui pada saat merancang sebuah antarmuka pengguna. Item-item penilaian dalam tugas dan pekerjaan pengguna dapat dilihat pada tabel 2.5 dibawah ini. Tabel 2.5 Item-item penilaian dalam Tugas dan Pekerjaan penggunaFrequency of Use High Medium Low Primary Training None Manual only Formal Mandatory System Use Mandatory Discretionary

Task Importance High Low

Task Structure High Moderate Low

Job Categories Executive Engineer Secretary Clerk

Turnover Rate High Moderate Low

Other Tools Calculator Telephone

Implikasi tugas dan pekerjaan pengguna terhadap perancangan antarmuka pengguna dapat dilihat ditabel 2.6 dibawah ini. Tabel 2.6 Implikasi terhadap perancangan antarmuka penggunaCharacteristic Frequency of Use High Low Ease of Use Ease of Learning & Remember Design Goal

Task Importance High Low Ease of Use Ease of Learning & Remember

System Use Mandatory Discretionary Ease of Use Ease of Learning & Remember

IF/2009

15


2.6 Karakteristik Phisik Pengguna (User Physical Characteristic) Karakteristik phisik pengguna merupakan bagian dari performansi pengguna yang harus dinilai. Item penilaian dari karakteristik ini dapat dilihat pada tabel 2.7 dibawah ini. Tabel 2.7 Item-iten dalam karakteristik phisik pengguna Color Blind Yes No Handedness Right Left Ambidextrous Gender Female Male

Implikasi karakteristik phisik pengguna terhadap perancangan anatrmuka adalah : Handedness berpengaruh pada kemudahan penggunaan input device Color Blindness berpengaruh pada saat menggunakan layar berwarna Gender berpengaruh pada motorik

2.7 Lingkungan secara phisik dari pengguna (User Physical Environment) Hal-hal yang mempengaruhi dari lingkungan phisik pengguna adalah sebagai berikut : a. Noise Level berpengaruh pada kemampuan berkonsentrasi b. Privacy berpengaruh pada psikologi dan keamanan c. Lighting berpengaruh pada kemampuan mata dalam membaca d. Workspace dimension & layout, Furniture & Equipment berpengaruh pada kenyamanan bekerja

2.8 Alat Bantu Pengguna (User Tool) Performansi dapat dipengaruhi jenis tool yang tepat untuk digunakan oleh pengguna, sebagai contoh adalah berhitung dibantu kalkulator, sekretaris lebih produktif mengetik dengan aplikasi word processor.

IF/2009

16


Jika level pengguna pada semua performansi determinan dapat diketahui maka dapat didisain tool yang efektif. Salah satu tool yang sangat bermanfaat untuk knowing the user dengan menggunakan User classification strategy.

Kesimpulan dari determinat perfomansi bahwa ada 2 determinan yang tidak dapat diperbaiki, yaitu : 1. users information processing capability 2. users physical characteristic

Latihan : Analisis Karakteristik Pengguna dari situs yang anda telah nilai prinsip User Interface-nya

IF/2009

17


3

FUNGSI BISNIS

JUMLAH PERTEMUAN : 2 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Memahami fungsi bisnis dari task aplikasi yang akan dibuat sebagai acuan untuk merancang antarmuka.

Materi

:

3.1 Pendahuluan Sebuah pemahaman menyeluruh tentang pengguna telah diperoleh, dan fokus sekarang bergeser ke fungsi bisnis. Persyaratan harus ditentukan dan kegiatan yang dilakukan pengguna harus digambarkan melalui analisis tugas. Desain standar juga harus dibuat (jika belum tersedia), tujuan kegunaan didirikan, dan pelatihan dan dokumentasi kebutuhan ditentukan. Langkah ini akan menghasilkan sebuah model konseptual. Langkah Umumnya adalah sebagai berikut : Lakukan definisi bisnis dan analisa kebutuhan. Menentukan fungsi bisnis dasar. Menjelaskan kegiatan arus melalui analisis tugas. Mengembangkan model konseptual dari sistem. Menetapkan desain standar atau bentuk panduan. Menetapkan desain implementasi sistem. Mendefinisikan kebutuhan pelatihan dan dokumentasi.

3.2 Definisi Bisnis dan Analisa Kebutuhan Maksud dan Tujuan dari tahap ini adalah untuk menetapkan kebutuhan suatu sistem. Sebuah deskripsi produk dikembangkan dan disempurnakan, berdasarkan masukan dariIF/2009 18


pengguna, pemasaran, atau pihak lain yang berkepentingan. Pengembang harus menyadari kebijakan dan budaya kerja organisasi. Pengumpulan Informasi Teknik dapat dilakukan dengan cara : a. Metode langsung: tatap muka pertemuan dengan, atau melihat sebenarnya pengguna untuk meminta persyaratan. b. Metode tidak langsung: memaksakan seseorang, perantara atau sesuatu, antara pengguna dan para pengembang.

3.3 Dasar Fungsi Bisnis Penjelasan rinci tentang produk apa yang akan dibuat disusun. Fungsi sistem Mayor terdaftar dan digambarkan, termasuk masukan sistem kritis dan output. Proses dalam mendefinisikan fungsi bisnis dapat dilakukan dengan : Dapatkan pemahaman yang lengkap dari model mental pengguna berdasarkan Pengguna kebutuhan dan profil pengguna. Analisis tugas pengguna. Mengembangkan model konseptual dari sistem berdasarkan model mental pengguna,termasuk mendefinisikan objek dan mengembangkan metafora. Model Mental adalah representasi internal dari konseptualisasi saat seseorang dan pemahaman tentang sesuatu. Model Mental secara bertahap dikembangkan melalui pengalaman, pelatihan, dan instruksi. Memungkinkan seseorang untuk memahami, menjelaskan, dan melakukan sesuatu. Mental model memungkinkan seseorang untuk memprediksi tindakan yang diperlukan untuk melakukan hal-hal jika tindakan telah lupa atau belum ditemukan. 3.4 Analisis Tugas Analisis tugas adalah Analisis kegiatan pengguna, cara di mana orang melakukan tugastugas. Analisis Tugas melibatkan mendobrak aktivitas pengguna ke tingkat tugas individu. Tujuannya adalah memperoleh pemahaman tentang mengapa dan bagaimana orang-orang saat melakukan hal-hal yang akan otomatis. Keluarannya adalahIF/2009 19


keterangan lengkap dari semua tugas-tugas pengguna dan interaksi, termasuk skenario dan daftar objek. Skenario adalah merupakan deskripsi naratif tugas saat pengguna

cukup rinci sehingga desainer dapat menyimpulkan, dan alasan tentang, implikasi kegiatan dan aliran mereka miliki di desain antarmuka. Menurut Straub (2004a): Skenario memainkan peran pemersatu kritis pada beberapa tingkatan, diantaranya : Mereka membawa tingkat koherensi kebutuhan dengan menyediakan sebuah tingkat deskripsi tugas dalam "dunia nyata". Mereka menyediakan jembatan desain-netral antara pengembang yang bekerja pada modul yang berbeda. Mereka menyediakan landasan bersama yang bermakna dan dapat diakses untuk berkomunikasi dan menyampaikan pikiran dan kebutuhan pengguna ke model sistem yang membuat para pengembang. Obyek adalah Sesuatu yang sangat penting pengguna lihat sebagai acuan apa yang harus mereka lakukan. Obyek dapat diurutkan ke dalam kategori berikut: Benda Nyata - hal yang dapat disentuh. Orang yang menjadi objek misalnya). Form atau jurnal - hal-hal yang melacak informasi. Orang yang menjadi subjek - biasanya para pengguna sistem. Benda Abstrak - apa tidak termasuk di atas. - biasanya organisasi karyawan (pelanggan,

3.5 Membangun Model Konseptual Apakah kerangka konseptual yang berfungsi umum melalui sistem disajikan. Menjelaskan bagaimana antarmuka akan menampilkan objek, hubungan antara obyek, sifat-sifat objek, dan tindakan yang akan dilakukan. Sebuah model konseptual didasarkan pada model mental pengguna. Tujuannya adalah untuk memudahkan bagi pengguna pengembangan model mental yang berguna dari sistem.IF/2009 20


Panduan merancang model konseptual adalah sebagai berikut : Merefleksikan model mental pengguna, bukan perancang. Menggambarkan analogi fisik atau metafora hadir. Mematuhi harapan, kebiasaan, rutinitas, dan stereotip. Menyediakan kompatibilitas tindakan-respon. Membuat bagian tak terlihat dan proses sistem terlihat. Memberikan umpan balik yang tepat dan benar. Hindari sesuatu yang tidak perlu atau tidak relevan. Memberikan konsistensi desain. Menyediakan dokumentasi dan sistem bantuan yang akan memperkuat model konseptual. Mempromosikan pengembangan baik pemula dan model mental ahli.

Kemudian definisikan obyeknya dengan cara sebagai berikut : Tentukan semua objek yang harus dimanipulasi untuk mendapatkan pekerjaan. Menggambarkan objek yang digunakan dalam tugas. Obyek perilaku dan karakteristik. Hubungan objek. Tindakan yang dilakukan. Objek yang menerapkan tindakan. Informasi atau atribut bahwa setiap objek dalam tugas harus melestarikan, menampilkan, atau mengizinkan akan diedit. Identifikasi obyek dan tindakan yang muncul paling sering dalam alur kerja. Buatlah beberapa objek yang paling penting sangat jelas dan mudah untuk memanipulasi. Metafora adalah konsep dimana Body of knowledge seseorang tentang satu hal yang digunakan untuk memahami sesuatu yang lain. Pedoman dalam mengembangkan metafora adalah : Pilih analogi yang bekerja terbaik untuk setiap obyek dan tindakannya.IF/2009 21


Gunakan metafora dunia nyata. Gunakan metafora sederhana. Gunakan metafora umum. Beberapa metafora dapat hidup berdampingan. Gunakan metafora utama, bahkan jika Anda tidak bisa persis meniru mereka secara visual.

Menguji metafora dipilih.

Ketika sistem diimplementasikan, seseorang berinteraksi dengan sistem baru dan antarmuka. Jika perancang telah benar mencerminkan model mental pengguna dalam desain maka model mental pengguna diperkuat dan perasaan bahwa antarmuka intuitif kemungkinan akan mengembangkan. Jika sistem baru tidak akurat mencerminkan model yang ada mental pengguna hasilnya adalah mencakup kerusakan dalam pemahaman, kebingungan, kesalahan, kehilangan kepercayaan, dan frustrasi karena ketidakmampuan untuk melakukan tugas atau pekerjaan. Jika ada kesenjangan antara model konseptual dan model mental, kemudian mencoba untuk menjembatani kesenjangan ini melalui dokumentasi yang ekstensif dan pelatihan.

3.6 Menetapkan desain standar atau bentuk panduan Dalam desain antarmuka menggambarkan penampilan dan perilaku antarmuka dan menyediakan beberapa panduan pada penggunaan yang tepat dari komponen sistem. Hal ini juga mendefinisikan prinsip-prinsip antarmuka, aturan, pedoman, dan konvensi yang harus diikuti dalam desain rinci. Ini akan didasarkan pada karakteristik perangkat keras sistem dan perangkat lunak, prinsip-prinsip antarmuka dan desain layar yang baik. Nilai standard dan pedoman untuk pengguna adalah sebagai berikut : Izinkan performa yang lebih cepat Mengurangi kesalahan Mengurangi waktu pelatihan Membantu perkembangan pemanfaatan sistem yang lebih baikIF/2009 22


Meningkatkan kepuasan Meningkatkan sistem penerimaan Mengurangi biaya pengembangan dan dukungan

Untuk Pengembang Sistem adalah sebagai berikut : Meningkatkan visibilitas dari antarmuka manusia-komputer Menyederhanakan desain Menyediakan program yang lebih dan alat bantu, mengurangi waktu pemrograman Mengurangi upaya berlebihan Mengurangi waktu pelatihan Menyediakan acuan untuk pengujian kontrol kualitas

3.7 Menetapkan Desain Panduan Implementasi Gunakan semua sumber referensi yang tersedia dalam menciptakan pedoman. Gunakan alat pengembangan dan implementasi yang mendukung pedoman. Mulailah menerapkan pedoman segera.

3.8 Pelatihan dan Dokumen Panduan Sistem pelatihan akan didasarkan pada kebutuhan pengguna, desain sistem konseptual, tujuan sistem pembelajaran, dan tujuan kinerja sistem. Pelatihan mungkin termasuk perangkat seperti pelatihan formal atau video, manual, tutorial online, referensi buku panduan, panduan referensi cepat, dan bantuan online. Sistem dokumentasi adalah titik acuan, suatu bentuk komunikasi, dan desain yang lebih konkrit - kata yang dapat dilihat dan dipahami. Ini juga akan didasarkan pada

kebutuhan pengguna, desain sistem konseptual, dan tujuan kinerja sistem.

Latihan : Analisis fungsi bisnis dari sistem yang akan dibangun.

IF/2009

23


4

MENU SISTEM DAN SKEMA NAVIGASI

JUMLAH PERTEMUAN : 1 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Mengetahui jenis dari gaya dialog sebuah antarmuka. 2. Memahami prinsip dari gaya dialog yang digunakan.

Materi : 4.1 Pendahuluan Menu merupakan bentuk utama navigasi sistem, jika dirancang dengan benar akan membantu pengguna membangun model mental dari sistem. Menu efektif karena menggunakan kelebihan manusia dalam hal recognition (pengenalan) dan bukan kelemahannya dalam hal ingatan. Yang perlu kita pelajari dan perhatikan dari pembuatan menu adalah : - Struktur Menu - Fungsi Menu - Format Menu - Menulis Menu - Navigasi menggunakan Menu - Navigasi dan Link web site - Elemen-elemen navigasi web site - Memelihara rasa tempat pada web site - Jenis-jenis Menu 4.2 Struktur Menu Struktur menu mendefinisikan tingkat kendali pengguna dalam melaksanakan sebuah task (tugas). Struktur menu yang dikenal terdiri dari :IF/2009 24


1. Menu Tunggal 2. Menu Linier Sekuensial 3. Menu Simultan 4. Menu Hirarki atau Sekuensial 5. Menu Terhubung 6. Menu Event-trapping

Gambar 4.1 Contoh Jenis Struktur Menu 4.3 Fungsi Menu Fungsi daripada menu adalah : 1. Navigasi ke menu baru

IF/2009

25


Menu digunakan sebagai alat untuk navigasi ke menu baru atau menu lain dalam sebuah antarmuka. 2. Mengeksekusi sebuah aksi / prosedur Menu juga dapat digunakan untuk melakukan eksekusi terhadap sebuah aksi/prosedur. 3. Menampilkan informasi Selain itu menu juga dapat dijadikan sebagai alat untuk menampilkan informasi dalam sebuah antarmuka. 4. Memasukkan data Fungsi menu yang lain adalah dapat digunakan sebagai alat untuk memasukkan data.

4.4 Isi Menu Isi dari sebuah menu harus terdiri atas 4 (empat) elemen, yaitu: 1. Konteks, konteks menyediakan informasi untuk menjaga orientasi pengguna, terutama pada sistem menu yang kompleks/hirarkis. 2. Judul, mendeskripsikan sebuah menu. 3. Pilihan, menu harus memiliki pilihan. 4. Instruksi penyelesaian, berfungsi memberitahu pengguna bagaimana cara memilih.

4.5 Format Menu Menu saat disusun harus memiliki format, berikut adalah yang perlu diperhatikan saat membuat format menu : 1. Konsisten a. Konsisten dengan ekspektasi pengguna b. Konsisten dalam menu : Format : organisasi, presentasi, urutan pilihan Frasa : judul, deskripsi pilihan, instruksi Cara pilihIF/2009 26


-

Skema navigasi

2. Tampilan Tampilan dari Menu harus permanen / on demand. 3. Presentasi Sebuah menu dan pilihan-pilihannya harus dapat langsung dikenali sebagai sebuah menu pada saat ditampilkan. 4. Organisasi a. Sediakan menu utama. b. Tampilkan : semua alternatif relevan, hanya alternatif relevan (hilangkan atau gray-out). c. Sesuaikan struktur menu dengan struktur task. d. Minimalkan tingkat menu, untuk website batasi hingga 2 level. e. Jumlah pilihan : tanpa pengelompokan elemen : 4-8 pilihan; dengan pengelompokan : 18-24. f. Sediakan cara memendekkan menu. g. Jangan sampai menu di-scroll. 5. Kompleksitas Sediakan menu sederhana (untuk pemula, jumlah aksi dan menu secukupnya) dan menu kompleks (untuk ahli, jumlah aksi dan menu lengkap). 6. Susunan pilihan Sedapat mungkin satu kolom; top-down, left-to-right. 7. Urutan pilihan. 8. Pengelompokan. 9. Garis pembatas pada menu. 10. Pemilihan menu pendukung. 11. Bahasa / kata yang digunakan perlu diperhatikan disesuaikan dengan karakteristik pengguna 12. Instruksi menu :IF/2009 27


Pemula : sediakan cara menyelesaikan menu Ahli : sediakan cara untuk mengabaikan instruksi ini 13. Intent Indicator. 14. Keyboard Shortcuts. 15. Memilih pilihan Pilihan dapat dipilih dengan cara menunjuk pada pilihan dengan penunjuk mekanis, melalui keyboard, atau dengan mengetikkan nilai pilihan. 16. Sediakan defaults 17. Pilihan yang tidak dapat dipilih 18. Tanda aktif / non-aktif sebuah pilihan 19. Toggled menu items

4.6 Navigasi untuk Website Navigasi adalah cara orang mencari apa yang mereka inginkan dari sebuah web site. Pencarian ini terdiri atas 4 (empat) langkah, yaitu: 1. orientasi, 2. keputusan rute, 3. monitoring rute, dan 4. pengenalan tujuan.

4.7 Navigasi Website Navigasi untuk Website harus memperhatikan beberapa hal, diantaranya adalah sebagai berikut : Navigasi harus dapat menjelaskan pengguna sedang ada dimana saat ini. Navigasi harus dapat menjelaskan dari mana pengguna berasal. Navigasi harus dapat menjelaskan kepada pengguna kemana selanjutnya arah yang dapat pengguna kunjungi.

IF/2009

28


Navigasi juga harus dapat membantu pengguna untuk dapat ke suatu temat yang pengguna diijinkan untuk berkunjung dengan cara yang cepat.

Pada saat merancang navigasi websitepun perlu memperhatikan beberapa hal, diantaranya : 1. Pertolongan navigasi web site Untuk membantu navigasi perlu diperhatikan Sediakan peta atau overview hirarki menu Sediakan clickability cues Sediakan pilihan-pilihan yang akan ada di level selanjutnya Ganti warna sebuah link yang sudah diklik

Sediakan umpan balik berkaitan dengan lokasi saat ini Sediakan sejarah (history) navigasi Cocokkan antara teks/label sebuah link dengan judul halaman tujuan

2. Organisasi Web site Bagi isi menjadi fragmen-fragmen lojik - Hirarki generality atau kepentingan. - Struktur relasi antar fragmen. 3. Disain halaman navigasi a. Gunakan tipe menu yang cocok Menu sekuensial untuk task yang sederhana Menu simultan untuk task yang dapat balik

b. Jaga halaman navigasi supaya tetap pendek c. Batasi teks prosa d. Scrolling Hindari scrolling halaman navigasi Batasi scrolling untuk melihat semua link pada halaman daftar isi Hindari horizontal scrolling

IF/2009

29


4. Komponen Sistem Navigasi Semua elemen navigasi haruslah : selalu ada, jelas, konsisten tampilan; fungsi; dan urutannya. Pada gambar 4.2 dapat dilihat elemen dan penempatan komponen navigasi pada website.

Gambar 4.2 Lokasi komponen navigasi website Latihan : Buatlah struktur menu dari fungsi bisnis sistem yang telah dianalisis.

IF/2009

30


5

WINDOWS

JUMLAH PERTEMUAN : 1 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Mengetahui jenis dari gaya dialog sebuah antarmuka 2. Memahami prinsip dari gaya dialog yang digunakan

MATERI : 5.1 Windows Window adalah sebuah area di layar, biasanya berbentuk persegi empat, memiliki batasbatas dan memiliki bagian yang menunjukkan aktivitas komputer atau bagian yang memungkinkan manusia berdialog dengan komputer. Karakteristik dari Windows adalah sebagai berikut : Nama atau judul, sebagai identitas window Ukuran (tinggi dan lebar) bisa bervariasi Status: aktif / dapat diakses atau pasif / tidak dapat diakses Visibilitas bagian yang dapat dilihat (sebagian atau seluruhnya dapat tersembunyi di balik window lain) Lokasi, relatif terhadap batas layar Tampilan, yaitu pengelolaan terkait dengan windows lain (tiled, overlap, cascading) Kemampuan manajemen, metode manipulasi window pada layar Highlight, yaitu bagian yang dipilih Fungsi, task, atau aplikasi yang didukung

Windows harus dapat mendukung pekerjaan manusia yang memerlukan banyak sumber, berpindah-pindah dari satu tugas ke tugas lain, dapat dihentikan sewaktu-waktu, diulang,IF/2009 31


diubah dan dilanjutkan lagi. Windows harus meringankan memori manusia. Tampilan Windows memiliki fungsi sebagai berikut : Menampilkan informasi dalam beberapa level Menampilkan berbagai jenis informasi Menampilkan beberapa level dan jenis informasi secara sekuensial Mengakses dan mengkombinasikan berbagai sumber informasi Melaksanakan lebih dari satu task Mengingatkan pengguna (pilihan menu, rencana) Mengawasi perubahan internal dan eksternal Menampilkan sebuah task dalam beberapa representasi yang berbeda Mengatasi pertimbangan historis, batasan perangkat keras, dan batasan manusia

Pada saat membangun Window, pertimbangan historis perlu diperhatikan. Hal ini mengingat ada beberapa hal yang sering pengguna lakukan saat membuat window, diantaranya adalah : Panduan desain yang ada biasanya hanya menyelesaikan masalah perangkat keras, tanpa memperhatikan usabilitas. Standar desain yang ada sangat umum dan terbatas untuk lingkup produk tertentu. Tiap pengembang memperkenalkan standar dan panduan desain baru yang sesuai dengan produk mereka. Akibatnya, pengguna harus mempelajari gaya desain yang berbeda-beda setiap berhadapan dengan produk tertentu. Kemudian perhatikan juga batasan hardware dan manusia, hal yang perlu diperhatikan adalah : Ukuran layar yang tersedia seringkali tidak cukup besar bagi pengguna untuk memanfaatkan windowing dengan optimal. Kecepatan pemrosesan yang rendah dan ukuran memori yang kecil membatasi penggunaan windows; membatasi kemampuan feedback dan animasi, kualitas grafis dan resolusi yang rendah.

IF/2009

32


Kemampuan windows yang terbatas, mengharuskan pengguna memiliki kemampuan dalam mengelola windowing.

Pada gambar 5.1 dibawah ini adalah merupakan komponen dari window.

Gambar 5.1 Komponen Windows Gaya Penampilan Windows terbagi menjadi beberapa tipe, diantaranya adalah sebagai berikut : 1. Tiled Windows: gaya tertua, menampilkan semua windows hingga memenuhi layar. Kelebihan a. Pengaturan windows dilakukan oleh sistem b. Seluruh windows yang terbuka dapat dilihat oleh pengguna c. Tidak ada informasi yang tersembunyi d. Sederhana, mudah dipahami dan digunakan e. Meningkatkan performansi pada tasks dengan manipulasi windows minimal Kekurangan a. Jumlah windows yang dapat ditampilkan terbatas b. Setiap kali window baru dibuka, window lain berubah posisi dan ukuran c. Perubahan posisi dan ukuran sulit diprediksi d. Konfigurasi windows mungkin tidak sesuai dengan kebutuhan pengguna e. Layar bisa terlalu padat dan dipenuhi scroll bar atau control iconsIF/2009 33


f. Pengguna kurang dapat mengelola windows secara aktif 2. Overlapping Windows: windows dapat saling bertumpuk acak. Kelebihan a. Secara visual tampak 3 dimensi, sehingga lebih familiar bagi pengguna b. Pengguna memiliki kontrol untuk mengelola windows sesuai kebutuhan c. Windows berukuran besar dapat ditampilkan lebih baik d. Posisi windows lebih konsisten e. Menutup dan menghapus windows tidak berakibat fatal f. Layar tidak terlalu padat dan kompleks g. Performansi task dengan manipulasi windows lebih baik Kekurangan a. Operasional windows lebih kompleks daripada tiled windows b. Informasi pada windows dapat tertutup oleh windows lain c. Windows dapat hilang atau terlupakan oleh pengguna d. Visualisasi 3 dimensi tidak selalu disadari oleh pengguna e. Kontrol windows yang terlalu banyak dapat merepotkan pengguna 3. Cascading Windows: overlap secara teratur Kelebihan a. Tidak ada window yang tersembunyi seluruhnya b. Mudah memilih dan mengaktifkan window manapun c. Tampilan visual sederhana dan rapi Kekurangan a. Pengaturan windows mungkin tidak sesuai dengan kebutuhan pengguna Cara memilih gaya tampilan windows yang sesuai dapat dilakukan dengan cara berikut ini, Gunakan tiled windows untuk Aktivitas single-task Data yang perlu dilihat secara simultanIF/2009 34


Tasks yang kurang memerlukan manipulasi window Pengguna awam atau kurang pengalaman

Gunakan overlapping windows untuk Berpindah antar tasks Tasks yang memerlukan banyak manipulasi window Pengguna yang berpengalaman atau pakar Isi tampilan yang tidak dapat diprediksi

Untuk tipe windows terbagi menjadi 3 tipe diantaranya adalah primary windows, secondary windows, dan dialog box. Berikut adalah penjelasan dari masing-masing tipe windows, Primary windows Window utama yang muncul di layar saat sebuah aktivitas atau aksi dimulai Disebut juga application window / main window / parent window Merupakan titik utama aktivitas pengguna

Fungsi dari Primary windows adalah Untuk fungsi atau aplikasi independen Untuk komponen dan kontrol window yang terus dipakai Untuk informasi yang terus di-update, misal : tanggal dan waktu Untuk menunjukkan konteks dari dependent windows Jangan membagi fungsi independen ke dalam 2 / lebih primary windows Jangan menampilkan fungsi-fungsi yang tidak berkaitan dalam satu primary window

Secondary windows Windows tambahan yang dapat berupa independent maupun dependent window terhadap primary window-nya Dapat berupa modal maupun modeless

Fungsi dari Primary windows adalahIF/2009 35


Untuk aksi lanjutan atau tambahan yang lebih kompleks dan berkaitan dengan primary window Untuk komponen window yang jarang digunakan Sebaiknya tidak muncul sebagai entry pada taskbar Sebaiknya tidak lebih besar dari 263x263 dialog units Modal VS Modeless Modal: Interaksi harus diselesaikan sebelum berpindah window Modeless: Bisa parallel Cascading VS Unfolding Cascading: beberapa secondary windows ditampilkan secara cascading Unfolding: tambahan fungsi ditampilkan sebagai bagian dari window

Dialog box Untuk memperluas dan melengkapi interaksi dengan aksi tertentu yang sangat terbatas Untuk menampilkan pesan, aksi singkat, atau tombol command (OK, cancel, dll)

5.2 Pengorganisasian Fungsi Windows Pengorganisasian windows untuk mendukung task pengguna; yaitu mendukung the most common tasks dengan the most efficient sequence of steps. Gunakan primary windows untuk memulai interaksi dan memberikan top-level context untuk dependent windows dan melakukan interaksi utama. Gunakan secondary windows untuk perluasan interaksi dan memperoleh atau menampilkan informasi tambahan berkaitan dengan primary window. Gunakan dialog boxes untuk Informasi yang jarang digunakan atau kurang diperlukan Informasi yang nice to know.

IF/2009

36


Faktor penyebab organisasi fungsional yang buruk disebabkan oleh beberapa hal, diantaranya adalah : (Mayhew, 1992) Penekanan pada kemudahan teknik implementasi daripada analisis mendalam tentang user tasks. Fokus pada aplikasi, fitur, fungsi, atau tipe data daripada tasks. Tim desain terbagi sesuai aplikasi, dengan komunikasi antar tim yang rendah Terlalu mengikuti petunjuk manual beserta in-efisiensi di dalamnya pada sistem komputer. Panduan umum dalam melakukan pengorganisasian windows, yaitu dengan cara berikut ini : Minimalkan jumlah windows yang digunakan untuk tujuan tertentu. Sebisa mungkin, gunakan window tunggal. Pertimbangkan user tasks. Jangan memenuhi window dengan informasi yang jarang digunakan; letakkan pada secondary window yang jarang diakses. Latihan : Analisis sebuah aplikasi yang menggunakan windows, apakah penggunaan Windows sudah sesuai dengan kebutuhannya.

IF/2009

37


6

PENGENDALI LAYAR

JUMLAH PERTEMUAN : 1 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Mengidentifikasi karakteristik dan kemampuan dari berbagai layar kontrol. 2. Memilih kontrol yang tepat bagi pengguna dan tugasnya.

Materi : 6.1 Pengendali Layar Definisi dari pengendali layar adalah merupakan objek grafis yang mewakili sifat atau operasi dari objek lain. Fungsi dari pengendali layar adalah : a. Mengizinkan masuk atau pemilihan nilai tertentu. b. Mengizinkan perubahan atau penyuntingan suatu nilai tertentu. c. Menampilkan hanya bagian tertentu dari teks, nilai, atau grafis. d. Suatu perintah yang harus dilakukan. e. Memiliki jendela pop-up kontekstual. Pengendali layar jarus memiliki karakteristik bentuknya dapat memperlihatkan bagaimana cara kerjanya dan sebaliknya, selain itu harus memiliki bentuk yang standar. Pengendali layar dapat dibagi menjadi Buttons, Text Entry dan selection controls. Hal yang perlu diperhatikan dalam memilih pengendali layar adalah : a. Lakukan pemilihan alat pengendali layar yang umum dikenal pengguna. b. Sesuaikan alat pengendali layar yang dipilih sesuai dengan kebutuhan atau tugasnya. c. Kurangi penggunan klik dalam mengendalikan alat pengendali layar.

IF/2009

38


d. Tampilkan sebanyak mungkin alat pengendali yang mungkin digunakan agar mengurangi jumlah pengetikkan. 6.2 Buttons Buttons adalah suatu pengendalian persegi atau berbentuk persegi panjang dengan label di dalam yang menunjukkan tindakan yang harus diselesaikan. Label dapat terdiri dari teks, grafis, atau keduanya. Sebagai contoh dapat digunakan untuk memulai suatu aksi, mengubah property, menampilkan layar yang berjenis pop-up menu. Pada gambar 6.1 adalah contoh dari buttons.

Gambar 6.1 Contoh Buttons Keuntungan menggunakan button adalah : Selalu terlihat, mengingat salah satu pilihan yang tersedia. Mudah. Dapat diselenggarakan secara logis dalam pekerjaan daerah. Dapat memberikan gambaran yang berarti dari tindakan yang akan dilakukan. ukuran lebih besar biasanya memberikan target seleksi lebih cepat. Dapat memiliki penampilan 3-D Menambah gaya estetis menyenangkan untuk layar Menyediakan umpan balik visual melalui gerakan tombol bila diaktifkan Dapat mengizinkan penggunaan keyboard dan akselerator setara Lebih cepat daripada menggunakan menu bar dua langkah / urutan pulldown Kekurangan dari buttons adalah Menghabiskan ruang layar Ukuran membatasi jumlah yang dapat ditampilkanIF/2009 39


Membutuhkan berpaling dari wilayah kerja utama untuk mengaktifkan Membutuhkan memindahkan pointer untuk memilih

Fungsi dari buttons di windows adalah untuk melakukan aksi yang harus segera dilakukan, membuka windows lain, menampilkan menu pilihan, dan melakukan

perubahan nilai suatu property. Sementara buttons dalam aplikasi berbasis web digunakan sebagai link menuju informasi lain. Ada hal-hal yang perlu diperhatikan saat menggunakan buttons, diantaranya adalah : Perhatikan kegunaan dari buttons tersebut Struktur dari buttons Label dari buttons Ukuran dari buttons Jumlah buttons Lokasi dan layout buttons Organisasi buttons Defaults buttons

IF/2009

40

6.3 Text Entry Text entry biasa dikenal dengan istilah field atau text box. Setiap Text entry berbentuk sebuah garis persegi panjang dan biasanya diikuti dengan sebuah caption yang mendefinisikan isi dari Text entry tersebut. Ada dua tipe Text entry, yaitu single-line dan multiple-line. Saat pertama dibuka sebuah kota Text entry harus kosong. Text entry dapat digunakan untuk menampilkan, memasukkan dan mengubah informasi yang berbentuk teks. Keuntungan dari penggunaan Text entry adalah sangat fleksibel, familiar dan tidak membutuhkan ruang yang terlalu besar. Kerugiannya adalah dibutuhkan kemampuan pengguna dalam mengetik dan pengguna harus mengetahui data apa yang akan dimasukkan. Text entry ada baiknya digunakan untuk mengisikan data yang cukup panjang isi teksnya, data yang sulit untuk dikategorikan dan data yang nilainya tidak dapat ditentukan. Gambar 6.2 memperlihatkan contoh dari sebuah text entry.

Gambar 6.2 Contoh sebuah Text Entry

6.4 Selection Controls Selection controls adalah sebuah pengendali layar yang dapat digunakan untuk membantu pengguna dalam memasukkan data yang isi datanya telah tersedia dilayar dan diinteraksikan dengan cara dipilih.


Tipe dari Selection controls adalah sebagai berikut : Radio button Digunakan untuk memilih satu nilai dari suatu data. Berikut pada gambar 6.3 contoh dari Radio button.

Gambar 6.3 Contoh Radio button Check box Digunakan untuk memilih lebih dari satu untuk nilai dari suatu data. Berikut pada gambar 6.4 contoh dari Check box

Gambar 6.4 Contoh Check box Palette Digunakan untuk menampilkan pilihan data, dimana pilihan datanya tidak berbentuk tek melainkan berbentuk warna atau gambar. List box List view control Drop-down / Pop-up list box Banyak digunakan saat melakukan pemilihan diaplikasi berbasis web.

Latihan : Analisis sebuah aplikasi, apakah penggunaan pengendali layar sudah sesuai dengan kebutuhannya.IF/2009 42


7

PERANCANGAN ANTARMUKA

JUMLAH PERTEMUAN : 1 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Mengetahui hal-hal yang perlu diperhatikan pada saat merancang sebuah tampilan. 2. Memahami tatacara dalam merancang antarmuka.

Materi : 7.1 Pendahuluan Seorang desainer saat bekerja harus memperhatikan batasan hardware dan software. Termasuk didalamnya ukuran layar, screen orientation (horisontal atau vertikal), dan tersedianya kemampuan terminal seperti highlighting, reverse video, bit-mapped graphics, color, dan sound. Perancang harus memutuskan what (apa) yang harus diletakkan dilayar, where (dimana) meletakkannya, dan how (bagaimana) meletakkannya. Kriteria umum dalam merancang sebuah tampilan adalah sebagai berikut [Tullis,1984]: a. Kepadatan secara keseluruhan : Harus tidak melebihi 40 %. b. Kedalaman setiap level : < 62 %. c. Number of groups: antara 2.5 and 5 derajat dari sudut penglihatan. d. Number of groups: antara 19 and 40

IF/2009

43


7.2 Prinsip dan Panduan dalam Perancangan Antarmuka Lima hal yang harus diperhatikan dalam perancangan antarmuka perangkat lunak adalah : 1. Tampilan secara Umum (General Layout) 2. Teks (Text) 3. Angka (Numbers) 4. Teknik pengkodean (Coding techniques) 5. Warna (Color) Tampilan secara umum (General Layout) Hal yang harus diperhatikan dalam merancang sebuah tampilan secara umum adalah : Masukkan hanya informasi penting untuk membantu pengguna dalam membuat keputusan. Masukkan semua informasi penting untuk membantu pengguna dalam membuat keputusan. Mulailah dari ujung kiri atas layar Desain format standard dan terapkan secara konsisten di semua layar pada sistem Kelompokkan item-item secara logika Sebaiknya simetri dan seimbang (gunakan whte-space) Hindari penggunaan huruf yang semuanya kapital (uppercase) Perjelas antara Captions dan Fields. Name : John F. Kennedy Teks (Text) Dalam teks dapat dibagi menjadi tiga jenis, yaitu: 1. Pesan (Messages) Pesan-pesan harus jelas dan singkatIF/2009 44


Desain level detil berdasarkan pengetahuan pengguna dan pengalaman pengguna Ekspresikan pesan-pesan dalam bentuk mengajak Pesan- pesan harus membangun, bukan kritikan Messages harus spesifik dan menyeluruh Messages harus ditampilkan seolah-olah user yang mengontrol. Saat messages menerangkan hal penting (aksi), gunakan kata aksi yang konsisten.

Contoh sebuah pesan yang baik dan pesan yang buruk dapat dilihat di tabel 7.1. Tabel 7.1.Contoh Pesan No 1 Pesan yang Buruk The processing of the text editor yielded 23 pages of output. Error in Dress Size field. Cannot exit before saving file. Bad / Illegal / Invalid File name. Syntax Error 210. Enter Command. Pesan yang Baik Output 23 pages.

2 3 4 5 6

Error : Dress size range is 4 to 16. Save file before exiting. Max file name : 8 char. Unmatched left parenthesis in line 210. Ready for command.

2. Perintah Instruksi (Instructional Prompts) Tempatkan prompts diwaktu dan di tempat yang tepat. Desain level detil berdasarkan pengetahuan dan pengalaman pengguna. Phrase prompts dalam active voice. Hindari negatif. Urutkan prompts berdasarkan kronologi.IF/2009 45


Format prompts gunakan white space, justification, dan visual cues for easy scanning. Gunakan terminologi yang konsisten.

3. Instruksi (Instructions) Menurut Galitz,1985 : Gunakan kalimat singkat, simpel, dan kata-kata yang sering digunakan / didengar (familiar). Pertahankan paragraf yang pendek, pisahkan antar paragraf minimal 1 baris kosong. Batas instruksi 50-55 karakter tiap baris atau gunakan 2 kolom, dengan 30-35 karakter tiap kolom. Hindari hyphenation (word separating). Hindari right justifying dengan spasi yang tidak sama.

Tambahan lainnya menurut Tullis,1988 instruksi harus : Spasi antar baris harusnya sama atau lebih besar sedikit dari tinggi karakter (kirakira spasi = 2) Hindari panjang baris kurang dari 26 karakter

Angka (Numbers) Numbers (bilangan) ditulis rata kanan. Untuk bilangan real, ditulis rata berdasarkan point desimalnya. Hindari bilangan Nol di awal kalau memang tidak diperlukan dan bukan bentuk standar. Buat kelompok-kelompok untuk bilangan yang panjang dengan 3 atau 4 digit ditiap kelompok tersebut.IF/2009 46


Gunakan separator saat bilangan tersebut dipecah-pecah, atau gunakan spasi.

Contoh dari penulisan angka yang baik dan kurang baik dapat dilihat ditabel 7.2. Tabel 7.2 Contoh Angka

Teknik Pengkodean (Coding Techniques) Gunakan teknik-teknik untuk menarik perhatian yang tersedia. Gunakan blinking jika ingin menarik perhatian mata user secara langsung. Gunakan bold text untuk : judul, caption, dan peringatan, maksimum 3 level yang berbeda. Gunakan reverse video untuk pilihan menu atau error. Gunakan ukuran yang berbeda untuk kuantitas atau hal penting yang bersifat relatif (max 5 level). Gunakan 2 atau 4 tipe karakter yang berbeda dengan cara yang konsisten. Gunakan underlining untuk membedakan pengisian field dari item lainnya atau sebagai pointer. Gunakan bentuk-bentuk khusus yang memiliki konotasi yang pasti bagi pengguna. Gunakan karakter khusus dan icon. Penempatan / adanya jarak antar item di layar mempengaruhi dan mengarahkan mata untuk melihat item-item sebagai bagian dari keseluruhan. Penggunaan suara dengan pertimbangan :IF/2009 47


- Tidak perlu : jika mengganggu lingkungan. - Konsistenkan pada beberapa pesan. - Beri pilihan untuk mematikan suara tersebut ( beberapa pengguna tidak nyaman jika orang lain mengetahui kesalahannya). Warna (Color) Cahaya yang tampak merupakan sebagian kecil dari spektrum elektromagnetik. Panjang gelombang cahaya tampak berkisar antara 400-700nm (dari ultraviolet hingga infra red). Jika pada kisaran tersebut, luminans konstan dan saturasinya(jumlah cahaya putih ditambahkan) dijaga tetap, seseorang yang normal dapat membedakan sekitar 128 warna. Jika luminans dan saturasi berbeda selain dari panjang gelombang cahaya maka sekitar 8000 warna dapat dibandingkan, namun hanya 8 hingga 10 warna saja dapat didefinisikan secara akurat tanpa pelatihan. Akurasi terhadap warna pada saat mata dan kepala diam membentuk sudut busur sekitar 600 dari limit 900 dari posisi kepala.

Contoh Penggunaan Warna dapat dilihat di tabel 7.3.Tabel 7.3 Kombinasi Warna

Symbol Blue Blue Red Red Cyan Cyan Magenta

Low Contrast Background Black Yellow Black Yellow White Green RedIF/2009 48


Symbol White Green Cyan Yellow Blue Black Yellow Red Magenta

HIgh Contrast Background Black Black Black Black White White Blue Cyan Green

Pada saat merancang antarmuka dipelukan sebuah cara untuk merancang, dimana saat merancang tidak hanya sekedar merancang tampilan saja namun tatacar interaksi dengan setiap obyek yang ada dilayarpun perlu dijelaskan. Berikut ini adalah contoh dari perancangan antarmuka dapat dilihat pada gambar 7.1, gambar 7.2 dan gambar 7.3.

Gambar 7.1 Contoh Perancangan Antarmuka

IF/2009

49


Gambar 7.2 Contoh Perancangan Antarmuka

Gambar 7.3 Contoh Perancangan Antarmuka Untuk mengetahui keterhubungan dari setiap tampilan yang dibuat dapat menggunakan Jaringan Semantik. Berikut ini adalah symbol-simbol yang digunakan dalam menggambarkan jaringan semantk dan disertai dengan contoh jaringan semantik dari ke -3 tampilan diatas.

IF/2009

50


Gambar 7.4 Contoh Jaringan Semantik dari sebuah perancangan antarmuka diatas Latihan : Lakukan perancangan antarmuka berikut Jaringan semantik terhadap sistem yang akan dibangun.

IF/2009

51


8

MOBILE INTERFACE & WEB BASED INTERFACE

JUMLAH PERTEMUAN : 2 PERTEMUAN TUJUAN INSTRUKSIONAL KHUSUS : 1. Memahami prinsip perancangan antarmuka untuk aplikasi yang berbeda platform.

Materi

:

8.1 Mobile Interface Perangkat mobile memiliki perbedaan dengan perangkat komputer biasa (Personal computer). Perbedaannya dapat dilihat dari beberapa hal, diantaranya adalah : Perbedaan input One-handed, keypad, camera, pens, soft keyboard Digunakan pada tempat berbeda Power yang terbatas Mudah rusak Bandwidth yang rendah Layar yang kecil Ada beberapa hal yang perlu kita perhatikan dalam perancangan antarmuka berbasis mobile, diantaranya adalah 1. Memungkinkan pemakai menggunakan shortcut. Hal ini bermaksud dilandasi karena: Pemakai cenderung lebih suka mengurangi jumlah interaksi. Pengurangan jumlah operasi untuk melakukan aktivitas. Shortcut untuk memudahkan pengoperasian fungsi tertentu. Tombol yang mudah digunakan.IF/2009 52


2. Menawarkan umpan balik informasi Setiap aksi dari sebuah operasi, disediakan adanya umpan balik sistem, misalnya dengan suara beep ketika tombol ditekan atau terjadi kesalahan. Umpan balik harus mudah dipahami oleh pemakai. 3. Mendesain dialog yang mudah digunakan Urutan aksi dan fungsionalitas sistem harus diorganisasikan dalam grup/kategori. Pemakai akan lebih nyaman jika menemukan gaya dialog yang sama antara penggunaan PC dengan perangkat mobile. 4. Mendukung kendali internal Pemakai akan lebih suka apabila sistem memberikan respon terhadap aksi mereka, daripada sistem yang mengontrol mereka. Hal yang perlu diperhatikan dalam merancang antarmuka berbasis mobile adalah sebagai berikut : Gaya dialog yang memungkinkan penggunaan layar yang terbatas. Konsistensi Tampilan dan gaya dialog suatu aplikasi harus sama pada lintas platform maupun ketika ditampilkan pada perangkat mobile yang berbeda-beda. Mobile device harus dibekali dengan kemampuan metodologi I/O ketika menampilkan sebuah dokumen untuk menjaga konsistensi ketika ditampilkan pada mesin/komputer desktop dan mobile device itu sendiri. Pencegahan kesalahan dengan error handling yang sederhana. Efisiensi dan optimasi penggunaan memori internal. Aplikasi mobile device harus memiliki desain antarmuka yang menggunakan memori sangat kecil selama menjalankan berbagai tugas.IF/2009 53


Stabilitas koneksi jaringan dan pemanfaatan akses jaringan yang seminimal mungkin.

Prinsip dalam melakukan desain antarmuka perangkat mobile, diantaranya adalah : Desain konteks multiple dan dinamis. Memungkinkan user mengatur konfigurasi yang diinginkan. Memungkinkan pengoperasian dengan satu tangan atau hand-free. Memungkinkan aplikasi beradaptasi otomatis menyesuaikan lingkungan kerja pemakai. Desain perangkat dengan ukuran kecil Memanfaatkan layar yang terbatas dengan menyusun fungsi berdasarkan urutan aktivitas. Menyediakan pemilihan huruf atau kata pada input teks. Desain dengan perhatian khusus Menyediakan suara dan opsi keluaran sebagai umpan balik sistem. Desain kecepatan dan recovery Memungkinkan aplikasi dihentikan, dimulai maupun dilanjutkan tanpa masalah. Aplikasi harus dapat berjalan cepat. Desain interaksi top-down Menampilkan struktur informasi yang dapat dipilih detail informasi mana saja yang akan ditampilkan. Desain personalisasi Menyediakan personalisasi aturan dan desain sesuai yang diinginkan pemakai. Desain yang menyenangkan Aplikasi harus memiliki tampilan yang menarik dan interaktif saat digunakan.

IF/2009

54


Diperlukan Auto-converting yang baik dari tampilan web menjadi tampilan pada perangkat mobile karena tidak selamanya dapat bekerja dengan baik, artinya saat dibuka di perangkat mobile diperlukan untuk perlu re-design.

8.2 Web based Interface Aplikasi berbasis web dibangun harus memenuhi efektif. Hal ini berkaitan dengan halaman yang ditampilkan, dimana halaman yang ditampilkan harus efektif juga. Agar sebuah halaman web menjadi efektif ada beberapa hal yang perlu diperhatikan, diantaranya adalah : a. Textual content Content yang ditampilkan dalam sebuah website memiliki nilai yang lebih penting dibandingkan desain dari website itu sendiri. Informasi yang sesuai merupakan hal yang sangat penting dalam sebuah website. Hal yang perlu diperhatikan: a. b. Kemampuan membaca pada monitor lebih lambat daripada kertas. User cenderung hanya membaca header, highlights dan paragraf tertentu.

b. Graphic design Tampilan grafis harus memperhatikan masalah konsistensi, susunan antara teks dan gambar, kontras, warna dan fungsionalitas dari gambar yang ditampilkan Hal yang perlu diperhatikan: Pemilihan format gambar yang sesuai dan pertimbangan masalah ukuran file gambar yang akan mempengaruhi kecepatan akses dan waktu tunggu (delay). Menyesuaikan tampilan grafis dengan dimensi halaman website yang akan ditampilkan di layar.

IF/2009

55


-

Apabila monitor menampilkan resolusi 640 x 480 pixel maka dimensi rata-rata yang dapat digunakan untuk tampilan halaman website pada sebuah web browser yakni 595 x 295 pixel.

-

Dimensi umum yang digunakan untuk halaman website yaitu 800 x 640 pixel, untuk website dengan informasi yang sangat banyak dapat menggunakan ukuran yang lebih besar.

-

Usahakan setiap halaman hanya menggunakan satu layar, hindari scrolling layar jika memungkinkan.

-

Jika tidak memungkinkan, scrolling hanya sesuai untuk content, hindari scrolling untuk halaman navigasi. Gunakan scrolling layar ke atas/bawah, jangan ke samping (kiri/kanan).

-

Letakkan link yang penting pada bagian atas halaman website. Meskipun monitor telah mampu menampilkan jutaan warna, namun hanya 216 warna yang biasa digunakan untuk aktivitas browsing.

-

Pemilihan format file gambar yang sesuai GIF Graphic Interchange Format Compressed, lossless format, 8-bit Keuntungan: memungkinkan warna transparan dan animasi Cocok untuk icon atau gambar dengan warna yang solid

JPEG Joint Photographic Experts Group Compressed, lossy, 24-bit Keuntungan: memungkinkan memilih faktor kompresi dan menentukan kualitas gambar Cocok untuk fotografi dan gambar dengan warna kompleks

PNG New Universal Format Seperti halnya JPEGIF/2009 56


c.

Navigation Navigasi merupakan elemen kritis dalam menentukan efektivitas antarmuka sebuah website. Navigasi harus memberikan penjelasan tentang struktur informasi pada website, dengan menyediakan: Daftar isi (site map) Index Navigation bar Kemampuan Searching

d. Structure Struktur website yang diperhatikan: Connectivity and compactness Branching factor Page length Number of links Homepage merupakan halaman yang terpenting dalam website. Berikan tampilan yang menarik pada homepage dan penjelasan tentang informasi apa saja yang dapat ditemukan pada website. Tampilkan beberapa real content maupun berita aktual pada homepage Jika link yang dibuat pada homepage menggunakan gambar, maka berikan pula label berupa teks. Tampilkan informasi dinamis pada homepage. e. Links Link sama seperti gaya dialog buttons, harus memberikan penjelasan tentang apa yang dapat dilakukan pada halaman berikutnya. Sebuah link yang baik berpedoman pada: a. Bagaimana user dapat memprediksi tujuan sebuah linkIF/2009 57


b. Bagaimana user dapat membedakan antara sebuah link dengan link lainnya yang memiliki kemiripan. c. Sesuai tidaknya content yang ditampilkan oleh link Pastikan semua link pada website dapat bekerja sesuai dengan fungsi masingmasing. Hati-hati terhadap penggunaan kata here/disini pada sebuah link: a. Klik disini untuk menampilkan Artikel.

b. Dapatkan informasi detail pada Artikel. c. Penulisan sebuah link harus pada satu baris yang sama. Seperti contoh dibawah ini : Profil Kota Bandung Kawasan Wisata di Kota Bandung Informasi Hotel Link diatas menimbulkan pertanyaan apakah ada 3 atau 4 link?

Latihan : Implementasikan ke dalamsistem yang akan dibangun

IF/2009

58


DAFTAR PUSTAKA

Anderson, B., Smyth, M., Knott, R., Bergan, J., Alty, J. (1994): Minimising Conceptual Baggage: Making choices about metaphor. In G. Cockton, S. Draper & G. Weir: People and Computers IX - Proceedings of HCI94, Glasgow, pp 179-194.

Bridging User Interface Desing and Software Engineering. Macmillan Technical Pub. Deborah J. Mayhew. (1992). Principles and Guidelines in Software User Interface Design. Prentice Hall International.

Gentner, S. & Stevens, A. L. [Eds.] (1983): Mental Models. Hillsdale, NJ: Erlbaum. Johnson-Laird, P. N. (1983): Mental Models. Cambridge: Cambridge University Press. Memmel, T. Gundelsweiler, F., Reiterer, H. (2007) CRUISER: A Cross-Discipline User Interface and Software Engineering Lifecycle, from

http://hci.unikonstanz.de/downloads/HCI_Int_2007_AgileUsability_Cruiser.pdf

Nielsen, J. (1990): A Meta-Model for Interacting with Computers. Interacting with Computers, 2, 147-160. Norman, D.A. (1986). Cognitive Engineering. In Norman & Draper [Eds.] User-Centered System Design, 1986, Hillsdale, NY: LEA. Norman, D. A. & Draper, S. W. [Eds.] (1986): User-Centered System Design. Hillsdale, NY: LEA. Preece, J.(1994), Human Computer Interaction, 3rd edition, Addison-Wesley. Preece, J., Rogers, Y., & Sharp, H. (2002). Interaction design : beyond human computer interaction. John Wiley & Sons , Inc.

Pressman, R. (2004) Software Engineering: A Practitioner's Approach, 6th Edition, Mc Graw-Hill.IF/2009 59


Robert, D., Berry, D., Mullaly, J. Isensee, S. (1998): Designing for the User with OVID. Shneiderman, B. (1991) Human values and the future of technology : a Declaration of responsibility, SIGCHI Bulletin.

Tognazzini, B. (1992): Tog on Interface. Reading, Mass.: Addison-Wesley.

IF/2009

60

Documents

Modul Interaksi Dan Manusia