GRAPHICAL USER INTER-

Transkripsi

1 Ariesto Hadi Sutopo Ariesto Hadi Sutopo GRAPHICAL USER INTER- Setelah mempelajari bab ini, Anda diharapkan dapat: 1. Memahami konsep graphical interface 2. Membuat user interface yang baik 1

2 Pengantar Grafika Komputer DEVICES Penggunaan utamauntuk menampilkan output pada sistem grafik adalah video monitor. Operasi pada sebagian besar video monitor berdasarkan perancangan cathoderay tube (CRT), namun juga terdapat beberapa teknologi yang digunakannya. Pada Gambar... dapat dijelaskan dasar operasi dari CRT. Sebuah elektron gun memancarkan Interface interaksi manusia dengan komputer untuk kebanyakan sistem menggunakan grafik supaya memudahkan penggunaan aplikasi. Pada umumnya, sistem sekarang menggunakan window, pull-down dan pull-up menu, icon, pointing device, dan lainnya. Interface tersebut digunakan dalam bermacam-macam aplikasi termasuk word processing, spreadsheet, database, file management systems, presentation systems, dan lain-lain. Pada umumnya, interface dilengkapi dengan sistem standar. Dalam bab ini dijelaskan elemen dasar graphical user interface dan teknik untuk membuat user interface dengan baik. 1 Dialog User Pada perancangan dialog untuk aplikasi tertentu, model user digunakan sebagai dasar perancangan. Model user menjelaskan bagaimana sistem dirancang untuk menyelesaikan fungsinya dengan operasi grafik yang tersedia. Hal ini berhubungan dengan jenis objek yang ditampilkan dan bagaimana objek dimanipulasi. Contohnya, bila sistem grafika digunakan sebagai alat bantu desain arsitektur, model menggambarkan bagaimana paket aplikasi dapat menampilkan tampak gedung dengan posisi dinding, jendela, pintu, dan komponen gedung yang lain. Hal yang sama, bila sistem digunakan untuk desain interior, maka harus dapat menampilkan furnitur seperti meja, kursi, dan lain-lain. Semua informasi dalam dialog user disajikan dalam aplikasi, dan dapat dimengerti oleh user yang berhubungan dengan sistem tersebut. Simbol atau informasi yang tidak ada manfaatnya bagi user tidak perlu disajikan. Beberapa pertimbangan diperlukan untuk pembuatan dialog user, yaitu manipulasi langsung, window dan icon, akomodasi beberapa kemampuan, konsistensi, minimisasi memori, backup dan penanganan kesalahan, serta feedback. 1.1 Manipulasi langsung Manipulasi langsung (direct-manipulation user interface) merupakan salah satu interface di mana objek, atribut, atau relasi dapat dioperasikan dan ditampilkan dalam bentuk visual. Operasi dilakukan dengan action yang disajikan dalam bentuk visual seperti mouse. Perintah tidak dibuat dengan cara tradisional, seperti pilihan menu melalui keyboard, tetapi perintah diberikan dalam bentuk visual. Penyajian perintah ini dapat berupa teks atau icon. Manipulasi langsung merupakan bentuk user interface yang baik dan mudah diperlajari oleh user. Namun beberapa user telah terbiasa menggunakan command language, yaitu dengan memasukkan perintah melalui keyboard ses- 2

3 memmperhitikan uai dengan bahasa atau untuk sintaks kondidi yang khusus. ditentukan. Interface dapat menggunakan kombinasi antara direct-manipulation dan command language. Teks dapat dibaca dari kiri ke kanan, miring searah diagonal (slanted diagonal), atau vertical sesuai kolom. Salah satu cara untuk mengatur atribut output primitif, yaitu dengan daftar parameter fungsi yang 1.2 Window berkaitan. dan Contohnya, icon fungsi menggambar garis dapat berisi parameter Sistem untuk window warna, dilengkapi tebal dan dengan lainnya. window-manager Cara ;ain adalah untuk dengan user dan mengatur fungsi untuk daftar menangani system display dari dan atibut manipulasi tertentu. window. Fungsi Fungsi yang yang terpisah biasanya atau terdapat bergbeda dalam sistem dimasuan window ke dalam di antaranya pakert membuka grafik untuk dan menutup mengatur window, nilai memindahkan pada daftar window, atribut. mengubah Beberapa ukuran paket window, program dan menampilkan menyediakan routine perintah yang melengkapi kombinasi. clipping Dengan bagian standar dalam dan KGS luar, dan serta PHIGS, fungsi grafik pengaturan yang lain. atributaccom[plish Pada umumnya, window dengan dilengkapi fungsi dengan yang berbeda slider, button, tabf dan mewngubah icon yang digunakan untuk daftar menentukan atribut. beberapa pilihan. system Bentuk icon yang disajikan menggambarkan simbol yang mudah dimengerti oleh user, seperti furnitur dan komponen gedung yang disebut application icon. Icon yang menyajikan gerakan seperti rotasi, skala, clip, disebut control Atribut icon atau Garis command icon. Pembuatan desain icon mempunyai tiga macam tujuan: Mudah dikenali - bagaimana icon dapat dikenali dengan cepat dan mempunyai arti yang jelas Atribut dasar untuk garis lurus adalah type (tipe), tebal, dan warna. Mudah diingat - bagaimana arti suatu icon mudah diingat oleh user Dala beberapa paket grafik, garis dapat ditampilkan menggunakan pilihan pen Mudah atau dibedakan brush. Berikut - bagaimana ini dibicarakan suatu icon dapat bagaimana dibedakan fungsi dengan garis dapat yang mengubah lainnya dengan mengakomodasi bermacam-macam spesifikasi atribut. Icon menyajikan objek berikut propertinya yang dengan mudah nilai dari properti tersebut dapat ditampilkan dengan bentuk visual. Bermacam-macam cara pembuatan icon, di antaranya: Tipe garis Perintah icon menggambarkan objek yang digunakan dalam dunia nyata. Contohnya, gambar gunting dapat digunakan untuk Cut. gambar kaca Garis mempunyai beberapa type line (tipe garis) di antaranya solid pembesar untuk Zoom, dan sebagainya. Gambar 8.1 memperlihatkan line, dashed (garis putus), dan dotted line (garis titik-titik). Algoritma icon yang mudah dimengerti, dan icon lain sulit dimengerti oleh user, pembentukan karena garis harus dilengkap[i mempelajari gambar sdengan terlebih pengaturan dahulu. panjang dan jarak yang menampilkan bagian solid sepanjang garis. Garis putus dibuat Icon dengan mungkin memberikan mempunyai nilai arti yang jarak berbeda dengan untuk bagian proses solid lain. yang Contohnya, titik-titikdapat icon brush digunakan ditampilkan untuk dengan membuat memberikan gambar dengan jarak kuas, sama. Garis yang lebih tetapi besar di lain dari proses bagian brush solid. digunakan Prosedur untuk yang mengisi serupa warna digunakan suatu bidang. untuk membuat bermacam-macam tipe garis. Untuk mengatur atribut dalam program aplikasi PHIGS, menggunakan fungsi Linetype (it) Set- Dimana parameter it menunjukkan integer positif dengan nilai 1, 2, 3, 4 untuk membuat garis solid, dashed, dotted atau dotted-dash.nilai lain untuk parameter garis dapat digunakan untuk menampilkan berbagai macam pola dot-dash. Ketika parameter linetype diatur dalam aplikasi PHIGS, perintah line drawing membuat garis 3

4 Pengantar Grafika Komputer Gambar 8.1 Icon yang mudah (kiri) dan sulit dimengerti oleh user Gambar 8.2 Icon untuk transformasi geometri menunjukkan sebelum dan sesudah action Gambar 8.3 Icon dengan gambar abstrak untuk transformasi geometri Icon dapat dibuat dengan menggambarkan operasi sebelum dan sesudahnya, seperti pada Gambar 8.2. Penyajian abstrak untuk action dapat dibuat, seperti pada Gambar 8.4. Penyajian ini dipengaruhi oleh konsep budaya tertentu, seperti tanda X untuk delete. 1.3 Akomodasi beberapa kemampuan user Graphical user interface yang interaktif pada umumnya menggunakan beberapa metode untuk memilih action. Contohnya, pilihan dapat dilakukan dengan menunjuk icon kemudian menekan tombol mouse, menggunakan pulldown menu, atau menuliskan perintah dengan keyboard. Cara ini mengakomodasi kebiasaan atau kemampuan user yang berbeda-beda, sehingga user merasakan kemudahan dalam menggunakan sistem. Keberhasilan suatu sistem bukan hanya ditentukan oleh masalah teknis, tetapi masalah psikologis sangat berpengaruh. 4

5 Gambar 8.4 Dua macam dialog untuk membuka file Bagi user yang belum berpengalaman, interface dengan menggunakan sedikit macam operasi dan perintah akan lebih bermanfaat dari pada penggunaan yang lebih luas. Menu yang sederhana dan pilihan yang mudah dipelajari dan diingat oleh user, sehingga membuat konsentrasi user pada aplikasi lebih terpusat. Penggunaan pilihan dengan menunjuk dan menekan mouse merupakan pilihan yang mudah digunakan, sehingga interface untuk user tergantung dari audiens yang menggunakannya. Bagi user yang sudah berpengalaman biasanya menginginkan kecepatan dalam menggunakan aplikasi. Hal ini berarti bahwa penggunaan input melalui keyboard atau dengan penggunaan beberapa tombol mouse sangat bermanfaat. Action dipilih dengan function key, atau kombinasi tombol pada keyboard dapat digunakan untuk mengakomodasi keinginan user. Hal yang sama berlaku pada fasilitas penggunaan Help yang dapat dirancang untuk tingkat kemampuan user. Bagi user pada tingkat pemula, penggunaan Help secara rinci diperlukan, namun beberapa bantuan yang bersifat dasar tidak diperlukan lagi bagi user tingkat lanjut. 1.4 Konsistensi Pertimbangan penting untuk desain user interface adalah konsistensi. Contohnya, bentuk icon harus mempunyai satu arti dalam penggunaan, karena bila digunakan pada berbagai macam fungsi akan membingungkan bagi user. 5

6 Pengantar Grafika Komputer Biasanya, model yang kompleks dan tidak konsisten membuat user sulit untuk memahami dan menjalankan sistem. Objek dan operasi dirancang sedemikian rupa sehingga menyajikan macam bentuk yang sedikit dan konsisten. Cara untuk mendapatkan konsistensi dapat dilakukan sebagai berikut: Penggunaan warna pada coding harus sama, sehingga tidak menimbulkan penafsiran yang berbeda. Pesan dari sistem ditampilkan pada lokasi tertentu secara logika. Posisi menu sebaiknya diletakkan pada lokasi yang sama, sehingga user tidak selalu mencari-cari untuk menemukannya. Penggunaan function key harus sama untuk action yang sama. Contoh penggunaan konsistensi pada penggunaan input: Karakter dari keyboard, seperti return, tab, dan backspace selalu mempunyai fungsi yang sama dan dapat digunakan setiap saat input dilakukan. Global command, seperti Help, Status, dan Cancel dapat digunakan setiap saat. Generic command, seperti Move, Copy, dan Delete dilengkapi pada setiap pemakaian untuk setiap objek dari sistem. 1.5 Minimisasi memori Interface dan operasi dibuat terstruktur supaya mudah dimengerti dan diingat. Penggunaan tombol delete pada keyboard untuk mengapus suatu operasi akan lebih mudah digunakan dari pada pengguanaan tombol lain, dan konsistensi dari suatu sistem sangat diperlukan. Sistem window dengan icon membantu untuk mengurangi penggunaan memori. Informasi lain dapat ditampilkan pada window yang lainnya, sehingga tidak diperlukan penambahan memori pada saat informasi tersebut ditampilkan. Bermacam-macam informasi dapat ditampilkan pada beberapa window bergantian dengan berpindah dari window satu ke window yang lain bila diperlukan. Icon digunakan untuk mengurangi memori dengan mengorganisasi bentuk untuk bermacam-macam objek dan action. 6

7 8.1.6 Backup dan penanganan kesalahan Tujuan backup dan penanganan keselahan adalah untuk menghindari kesalahan yang dilakukan oleh user. Mekanisme untuk backup dan pembatalan suatu action selama operasi belangsung merupakan bentuk umum yang terdapat dalam interface. Sering suatu operasi dibatalkan sebelum eksekusi lengkap, dengan kembalinya sistem pada keadaan sebelum operasi dimulai. Dengan fasilitas backup setiap saat, kesadaran akan kesalahan yang telah dilakukan oleh user tidak sangat diperlukan. Backup dapat dibuat dalam berbagai bentuk, seperti tombol atau perintah undo yang merupakan bentuk standar dapat digunakan. Kadang-kadang sistem memerlukan backup pada beberapa operasi, memberikan fasilitas kepada user untuk kembali pada keadaan yang diinginkannya. Suatu sistem dengan backup yang baik menyimpan input yang dilakukan oleh user, sehingga user dapat menjalankan kembali operasi yang telah dibatalkan. Kadang-kadang suatu operasi tidak dapat dibatalkan dan terhapus masuk ke dalam trash dari window yang tidak dapat dilakukan recover lagi. Untuk menangani hal tersebut, interface perlu membuat verifikasi apakah operasi benar-benar akan dihapus. 1.7 Feedback Interface dirancang untuk untuk menangani dialog interaktif yang berkesinambungan. Tanpa feedback, tidak diketahui apa yang dikerjakan oleh sistem dan bagaimana input harus diberikan lagi. Pada umumnya sistem dilengkapi dengan pemberitahuan kepada user bahwa input telah diterima. Dalam beberapa aplikasi, perubahan warna, munculnya icon, dan tampilan pesan merupakan bentuk dari feedback yang banyak ditemukan. Hal ini bukan saja memberikan keterangan bahwa input telah diterima, tetapi menggambarkan apa yang dikerjakan oleh sistem. Feedback dapat diberikan dalam beberapa macam tingkat, tergantung dari fungsi, sekuens dan perangkat keras dari user interface: Tingkat perangkat keras (hardware design) merupakan tingkat paling rendah dari feedback. Setiap action yang diberikan oleh user dengan alat input akan segera dapat diketahui feedback-nya. Contohnya, bila terjadi kesalahan pada mouse dan keyboard, maka muncul pesan kesalahan pada monitor. Feedback pada tingkat sekuens yaitu sequencing feedback terjadi bila setiap unit dari input (perintah, posisi, objek, dan lainnya) diterima 7

8 Pengantar Grafika Komputer oleh sistem dari mouse dan keyboard. Objek yang diseleksi atau menu dapat berubah warnanya sehingga user mengetahui bahwa action sudah diterima dan dimengerti oleh sistem. Bentuk yang sama adalah prompt untuk input berikutnya. Bentuk lain dari sequencing feedback yaitu terjadi bila sekuens lengkap telah dimasukkan dan sudah memenuhi syarat. Penerimaan perintah biasanya memerlukan satu atau dua detik. Tingkat fungsi (functional feedback) digunakan hanya bila suatu operasi memerlukan waktu beberapa detik, sehingga user tidak harus menunggu lama untuk mengetahui kesalahan yang ada. Problem domain feedback digunakan bila user dapat melihat sebagian dari gambar besar, sehingga dapat menentukan bagian dari gambar yang ditampilkan. Bila user membedakan antar problem domain dan contol domain, maka problem domain feedback dipusatkan pada objek yang dimanipulasi. Cara yang lebih efektif dilakukan dengan menampilkan seluruh bagian pada satu window dan bagian yang diperlukan pada window lain, seperti pada Gambar 8.5. Gambar 8.5 Contoh problem domain feedback 8

9 Gambar 8.5 Contoh control domain feedback Bentuk dari control-domain feedback adalah current setting yang dapat memperlihatkan feedback area. Bila menu atau alat interaktif lain dipilih, selalu dapat ditampilkan current setting, seperti pada gambar 8.6. Feedback ini digunakan untuk mengontrol atau mengubah spesifikasi layout yang ada, sehingga user tidak perlu menutup aplikasi untuk membuat spesifikasi baru. Pesan diberikan dengan jelas supaya user mempunyai kesempatan untuk melihatnya, tetapi tidak menonjol sehingga menghilangkan konsentrasi pada hal yang utama. Function key dapat digunakan untuk menampilkan feedback yang disertai suara tertentu atau dengan highlight pada saat suatu key ditekan. Feedback yang berupa suara mempunyai keuntungan karena tidak memerlukan ruangan pada monitor, dan perhatian pada pesan tidak terpusat dalam work area. Dengan beberapa jenis input, echo feedback dapat digunakan. Karakter yang diketik dengan keyboard dapat ditampilkan pada screen, sehingga user mengetahui kesalahan ketik yang telah dilakukan dan dapat memperbaikinya. Untuk mempercepat jawaban sistem, teknik pembuatan feedback dapat dipilih sesuai dengan karakteristik alat yang digunakan oleh user. Cara tersebut di antaranya adalah penggunaan intensitas pixel pada saat pilihan menu dilakukan. Cara lain dengan menampilkan highlight, blinking, dan perubahan warna. 9

10 Pengantar Grafika Komputer 2 Desain Visual Desain visual dari interface user-komputer berpengaruh pada user dalam menggunakan komputer. Desain visual mencakup elemen grafik yang digunakan pada interface, termasuk layout secara keseluruhan, menu, desain form, penggunaan warna, coding, dan penempatan tiap unit dari informasi. Desain visual yang baik memberikan pengaruh yang kuat pada kejelasan, konsistensi, dan estetis. 2.1 Kejelasan visual Arti dari tampilan visual harus jelas. Untuk mendapatkan kejelasan dari arti suatu bentuk visual perlu diikuti pedoman yang ada. Beberapa aturan dasar dalam mengorganisasi visual untuk memenuhi kebutuhan telah diterapkan oleh desainer grafis sejak beberapa abad yang lalu, dengan adanya peraturan Gestalt yang didefinisikan oleh ahli psikologi Wertheimer pada tahun Dia berpendapat bahwa pandangan individu menentukan pandangan dalam bentuk luas. Pedoman untuk mengorganisasi visual terfokus pada kesamaan, pendekatan, penutupan, dan kontinuitas yang baik Gambar 8.6 Peraturan Gestalt menggambarkan kesamaan (a dan d), pendekatan (b dan c), kombinasi kesamaan dan pendekatan (e), dan penutupan (f) 10

11 Gambar 8.6 Gambar yang memberikan lebih dari satu penafsiran Kesamaan mempunyai arti bahwa dua bentuk visual mempunyai properti yang kelihatan dimiliki oleh keduanya. Begitu juga, pendekatan mempunyai arti bahwa dua bentuk visual mempunyai properti yang dimiliki bersama-sama. Penutupan mempunyai arti bahwa dua bentuk visual dapat menutup suatu area yang sama. Kontinuitas mengatakan bahwa suatu bentuk visual akan terhubung dengan bentuk berikutnya sebagai garis yang lurus. Gambar 8.6 memperlihatkan peraturan Gestalt. Pada gambar (a), semua segiempat mempunyai kesamaan antara satu dengan lainnya. Pada gambar (b), pendekatan menghasilkan kelompok horisontal. Pada gambar (c), pendekatan menghasilkan kelompok vertikal. Pada gambar (d), kesamaan menghasilkan kelompok horisontal. Pada gambar (e), kombinasi antara pendekatan dan kesamaan menghasilkan kelompok horisontal. Pada gambar (f), persegi empat yang dibentuk oleh titik-titik terdapat kekurangan dua buah titik. Penyajian visual tidak boleh memberikan pengertian ambigu, sehingga tidak membingungkan user, seperti pada Gambar 8.7. Gambar (a) dapat memberikan dua macam penafsiran seperti gambar (b) dan (c). Demikian pula gambar (d) dapat memberikan penafsiran seperti gambar (e) dan (f). Contoh penyajian visual menggunakan peraturan Gestalt dapat dilihat pada Gambar 8.7, dimana elemen desain dibagi dalam kelompok horisontal. 11

12 Pengantar Grafika Komputer Gambar 8.7 (atas) Elemen desain dibagi dalam kelompok horisontal Gambar 8.8 (kanan) Konsistensi dalam menggunakan simbol radio -button dan checkbox 2.2 Konsistensi visual 12 Prinsip konsistensi merupakan bagian dari user interface secara keseluruhan yang telah dibicarakan sebelumnya. Konsistensi bentuk visual memudahkan user dalam menggunakan perintah. Contohnya, radio-button digunakan untuk menentukan hanya satu macam pilihan, sedangkan checkbox dapat digunakan untuk pilihan yang lebih dari satu, seperti pada Gambar 8.8. Konsistensi harus diatur untuk suatu image tertentu maupun keseluruhan desain. Informasi mudah dimengerti oleh user bila mempunyai aliran yang baik dengan sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat dibuat dengan membuat gaya, bentuk atau warna yang memberikan user merasakan ada kesinambungan.

13 Gambar 8.9 (kiri) Desain yang seimbang Gambar 8.10 (kanan) Desain yang tidak seimbang 2.3. Estetis Desain uer interface berhubungan dengan prinsip desain grafis secara umum. Elemen desain tidak hanya harus dirancang dengan baik, tetapi harus dapat bekerja sama. Untuk mendapatkan desain yang komunikatif dan estetis, perlu diperhatikan pedoman untuk membuat tata letak suatu tampilan, yaitu dengan mengatur elemen-elemen layout seperti teks, image, animasi serta video. Empat prinsip dasar layout user interface adalah: Kesatuan. Elemen-elemen desain harus ditempatkan sedemikain rupa sehingga merupakan kesatuan informasi. Keseimbangan. Elemen-elemen desain harus ditempatkan sedemikian rupa sehingga terdapat keseimbangan (balance) secara keseluruhan. Gambar 8.9 menunjukkan layout yang seimbang, sedangkan layout pada Gambar 8.10 tidak seimbang, karena tidak layak bila mata user tertuju pada sebelah kanan bidang layout untuk memulai menggambar. 13

14 Pengantar Grafika Komputer Irama. Garis irama(grid) vertikal dan horisontal dapat dibuat lebih dari satu. Garis tersebut digunakan untuk menempatkan elemen-elemen desain. Kontinuitas. Informasi mudah dimengerti oleh pengguna bila mempunyai aliran yang baik dan sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat dibuat dengan membuat halaman-halaman mempunyai gaya, bentuk atau warna yang memberikan pengguna merasakan kesinambungan dengan halaman lainnya. 8.3 Metodologi Desain Walaupun desain user interface cenderung menjadi bagian dari seni dari pada sains, dapat disimpulkan pendekatan pada proses desain. Proses pembuatan user interface meliputi beberapa tahap, yaitu: 1. Menentukan tujuan. Pada tahap ini ditentukan tujuan dari sistem, serta audiens yang menggunakan sistem tersebut. 2. Memahami karakteristik user. Tingkat kemampuan audiens sangat mempengaruhi pembuatan desain. Dengan demikian user interface dapat dikatakan komunikatif. 3. Mempelajari user interface yang lama. User interface seperti menu dan icon yang sama sekali baru memerlukan pelatihan yang harus diberikan kepada user, karena user telah terbiasa dengan interface yang lama. Pelatihan memerlukan biaya, penggunaan interface baru harus layak secara ekonomis. 4. Pembuatan desain konseptual. Desain konseptual dikembangkan terlebih dahulu, dengan membuat beberapa macam desain. Pembuatan desain harus mempertimbangkan bahwa desain harus sederhana dan bersifat umum. 5. Pembuatan desain fungsional. Fokus dari desain ini pada perintah (command) dan bagaimana mengerjakan perintah tersebut. Desain fungsional dibuat untuk mengurangi kemungkinan kesalahan. 14

15 6. Pembuatan desain dialog. Desain ini dibuat secara keseluruhan bersamasama, dan lebih baik dari pada dibuat secara terpisah. Desain icon termasuk dalam tahap ini. 7. Pembuatan prototipe. Prototipe diperlukan untuk melihat secara keseluruhan desain yang dikembangkan. Prototipe dapat juga dibuat bersamaan dengan pembuatan desain dialog, setelah desain konseptual diselesaikan. Gambar 8.11 Dua buah desain yang menggunakan garis irama vertikal dengan alignment simetris (kiri) dan asi,etris (kanan) Gambar 8.12 Dua buah desain yang tidak memperhatikan garis irama 15