PERANCANGAN INTERFACE USER

Transkripsi

1 PERANCANGAN INTERFACE USER MUHLIS TAHIR PTIK A 2009

2 Memahami prinsip-prinsip perancangan umum yang harus diikuti oleh perekayasa yang bertanggung jawab terhadap perancangan interface user. Menyadari adanya lima gaya interaksi dengan sistem perangkat lunak. Memahami berbagai gaya presentasi informasi dan mengetahui kapan presentasi informasi secara grafis layak digunakan. Memahami beberapa dasar perancangan pendukung user yang menjadi satu dengan perangkat lunak. Memahami atribut kegunaan dan pendekatan-pendekatan sederhana terhadap evaluasi sistem. TUJUAN

3 PRINSIP PRINSIP PERANCANGAN INTERFACE USER INTERAKSI USER PRESENTASI USER PENDUKUNG USER EVALUASI INTERFACE MATERI

4 Proses perancangan interface harus terpusat pada user. Interface harus berinteraksi dengan user dengan segala keterbatasan dan kelebihannya, harus logis dan konsisten, dann harus menyertakan fasilitas untuk membantu user, memakai sistem dan memulihkan kesalahan-kesalahan mereka. Perancangan interface user yang baik harus bersifat kritis bagi keberhasilan suatu sistem Interface harus bersifat tekstual atau berbasis form PENDAHULUAN

5 Hampir semua user komputer sekarang memiliki personal komputer. Komputer-komputer ini menyediakan interface user grafis(gui) yang mendukung tampilan berwarna dengan resolusi tingggi dan interaksi dengan memakai mouse dan keyboard. Interface berbasis teks sering digunakan secara luas, terutama pada sistem warisan, user komputer sekarang normalnya mengharapkan sistem aplikasi memiliki suatu bentuk interface user grafis. PENDAHULUAN

6 Berikut ini karakteristik-karakteristik GUI sebagai interface user Karakteristik Keterangan Windows Icon Menu Pointing(Alat Penunjuk) Grafik PENDAHULUAN Mulitipel window memungkinkan berbagai informasi ditampilkan ditampilkan secara simultan pada layar user. Icon memrepresentasikan berbagi tipe informasi. Pada beberapa system, icon mempresentasikan file pada system lainnya dan icon mempresentasikan proses. Command dipilih dari menu dan bukan diketiikkan dalam suatu bahasa command. Piranti petunjuk seperti mouse digunakan untuk melakukan pemilihan dari menu atau menunjukmitem yang diinginkan pada window. Elemen-elemen grafis dapat dicampur dengan teks pada tampilan yang sama.

7 Keunggulan GUI GUI relatif mudah dipelajari dan digunakan. User tanpa pengalaman komputasi pun dapat mempelajari cara pemakaian interface tersebut setelah mengikuti sesi pelatihan yang singkat. User memiliki banyak layar(window) untuk interaksi sistem. Peralihan dari satu pekerjaan ke pekerjaan yang lainnya dapat dilakukan tanpa kehilangan pandangan dari informasi yang dihasilkan pada pekerjaan pertama. Interaksi yang cepat dengan layar yang penuh dapat dilakukan dengan akses ke bagian mana pun pada layar PENDAHULUAN

8 Tujuan dari bab ini adalah untuk membuat perekayasa perangkat lunak peka terhadap isu-isu penting yang mendasari perancangan interface user. Interface desain user adalah sebuah pendekatan untuk merancang interface user dimana kebutuhan pengguna adalah hal yang terpenting dan dimana pengguna terlibat dalam proses desain. Desain interface user melibatkan pengembangan antarmuka. PENDAHULUAN

9 Gambar Proses Perancangan Interface User PENDAHULUAN

10 Keterangan Gambar Proses Perancangan Interface User Mengilustrasikan proses iterative dari perancangan interface user. Proses prototype ini dapat dimulai dengan membuat tiruan interface diatas kertas yang sederhana sebelum meneruskannya dengan pengembangan perancangan pada layar mensimulasikan interaksi user. End-user system memegang peran aktif pada proses perancangan. Peran user adalah mengevaluasi. PENDAHULUAN

11 Perancang interface user harus memperhitungkan kemampuan fisik dan mental orang-orang yang memakai perangkat lunak. Manusia normal(rata-rata) memiliki memori jangka pendek yang terbatas dan mereka melakukan kesalahan, terutama ketika harus menangani terlalu banyak informasi, atau berada dibawah tekanan. Jadi ketika anda ingin menjadi seorang perancang maka harus memperhitungkan semua ini ketika merancang interface user. PRINSIP-PRINSIP PERANCANGAN INTERFACE USER

12 Prinsip kebiasaan user yang menyarankan bahwa user tidak boleh dipaksa beradaptasi dengan suatu interface karena implementasinya tidak tepat. Interface harus menggunakan istilah-istilah yang dikenal user dan objek yang dimanipulasi oleh sistem harus langsung berhubungan dengan lingkungan user. Sebagai contoh jika suatu sistem dirancang untuk digunakan oleh kontroler lalu lintas udara, objek yang dimanipulasi harus berupa pesawat,jalur penerbangan,menara dsb. PRINSIP-PRINSIP PERANCANGAN INTERFACE USER

13 Prinsip-prinsip Perancangan Interface User Prinsip Kebiasaan User Konsistensi Kejutan minimal Kemampuan Pemulihan Panduan User Keragaman User Keterangan Interface harus menggunakan istilah dan konsep yang diambil dari pengalaman orang-orang yang kan paling sering menggunakan system tersebut. Interface harus konsisten dalam hal, jika dimungkinkan, operasi-operasi yang hamper sama harus diaktifkan dengan cara yang sama. User harus tidak dikejutkan oleh perilaku system Interface harus mencakup mekanisme untuk memungkinkan user pulih dari error. Interface harus menyediakan umpan balik yang berarti ketika terjadi kesalahan dan menyediakan fasilitas bantuan yang context sensitive. Interface harus menyediakan fasilitas interaksi yang sesuai untuk berbagai tipe user system. PRINSIP-PRINSIP PERANCANGAN INTERFACE USER

14 Kebiasaan User Interface harus didasarkan pada berorientasi pengguna istilah dan konsep daripada konsep-konsep komputer. Misalnya sistem kantor harus menggunakan konsep-konsep seperti surat, dokumen, folder dll bukan direktori, file pengidentifikasi. Konsistensi Sistem harus menampilkan tingkat yang sesuai konsistensi. Perintah dan menu yang sama harus memiliki format dan perintah baca harus sama. Minimal Kejutan Jika perintah beroperasi dengan cara yang diketahui, pengguna harus dapat memprediksi operasi perintahnya. PRINSIP-PRINSIP PERANCANGAN INTERFACE USER

15 Kemampuan Pemulihan Sistem harus menyediakan beberapa ketahanan terhadap kesalah pengguna dan memungkinkan pengguna untuk pulih dari kesalahan. Ini mungkin termasuk membatalkan fasilitas, konfirmasi tindakan destruktif. Panduan User Beberapa panduan penggunaan seperti bantuan pada baris manual,dll harus disediakan. Keragaman User Interaksi fasilitas untuk berbagai jenis pengguna harus didukung. Sebagai contoh, beberapa pengguna telah melihat kesulitan dan teks yang lebih besar sehungga harus tersedia. PRINSIP-PRINSIP PERANCANGAN INTERFACE USER

16 Dua masalah harus ditangani secara interaktif oleh interface user 1) Bagaimana informasi dari user dapat diberikan ke sistem komputer?. 2) Bagaimana informasi dari komputer dapat dipresentasikan pada user?. Interaksi user merupakan fokus dari subbab ini, dengan presentasi informasi. Interaksi user berarti dimasukannya command dan data yang berhubungan ke sistem komputer Interaksi User

17 Interaksi Gaya 1) Manipulasi Langsung 2) Pemilihan Umum 3) Bahasa Natural 4) Pemgisian form 5) Bahasa Command Interaksi User

18 1) Manipulasi Langsung. User berinteraksi langsung dengan objek di layar. Sebagai contoh, untuk menghapus file, user dapat menarik objek tersebut ke trash can. 2) Pemilihan Umum. User memilih command dari satu daftar kemungkinan(menu). Seringkali terjadi bahwa objek layar yang lain dipilih pada saat yang sama dan command beroperasi pada objek tersebut. Pada pendekatan ini, untuk menghapus sebuah file, user memilih file kemudian memilih command delete. 3) Bahasa Natural. User memberikan command dalam bahasa natural. Untuk menghapus file, user dapat mengetikkan delete the file named xxx. Interaksi User

19 4) Pengisian Form. User menjadi field-field pada sebuah form. Beberapa field mungkin memiliki menu yang berhubungan dan form bisa memiliki tombol yang berhubungan yang, ketika ditekan, mengakibatkan dimulainya suatu aksi. Penghapusan file dengan menggunkan interface berbasis form akan bersifat artifisial. Cara ini mencakup pemasukan nama file, yang dilanjutkan dengan penekanan tombol delete. 5) Bahasa Command. User mengeluarkan command khusus dan parameter-parameter yang berhubungan untuk menginstruksikan sistem melakukan sesuatu. Untuk menghapus file, user mengeluarkan command delete dengan nama file sebagai parameter Interaksi User

20 Gaya Interaksi Keuntungan Utama Kerugian Utama Contoh Aplikasi Manipulasi Langsung Interaksi cepat dan intuitif mudah dipelajari Mungkin sulit diimplementasi hanya cocok jika ada metaphor visual untuk task dan objek Video game dan system CAD Pemilihan Menu Menghindari kesalahan user hanya dibutuhkan sedikit pengetikkan Lambat untuk user yang berpengalaman bias menjadi kompleks jika ada banyak pilihan menu Sebagian besar system umum Pengisian Form Entri data yang mudah dan mudah dipelajari Mengambil banyak tempat pada layar Bahasa Command Ampuh dan Fleksibel Sulit dipelajari dan manajemen error yang buruk Control stok pemrosesan pinjaman pribadi System operasi,system pencarian informasi perpustakaan Bahasa Natural Bias diakses oleh user biasa dan mudah diperluas Membutuhkan lebih banyak pengetikkan dan system pemahaman bahasa natural tidak dapat diandalkan System jadwal system pencarian informasi WWW Interaksi User

21 Interaksi User Multipel Graphical user inter face (Gnome/KDE) Unix shell inter face (ksh/cs h) X-windows GU I mana ger Command langua ge int erpret er Linux operating system Interaksi User

22 Semua sistem interaktif harus menyediakan suatu cara untuk menyatakan informasi kepada user. Presentasi informasi mungkin hanya berupa representasi langsung dari Informasi input (contohnya, teks pada pengolahan kata) tapi bisa juga informasi grafis. Model View Controller adalah cara mendukung beberapa presentasi data, Presentasi Informasi

23 Presentasi Informasi Dengan memisahkan system presentasi dari data, representasi pada layar user dapat diubah tanpa harus mengubah system komputasi yang mendasarinya. Presentasi Informasi

24 Model MVC dari Interaksi User Presentasi User

25 Keterangan Model MVC dari Interaksi User Setiap view memilki objek kontroler yang berhubungan yang menangani input user dan interaksi peranti.model yang merepresentasikan data numeric dapat memiliki view yang merepresentasikan data sebagai histogram dan view yang menyatakan data sebagai table. Presentasi User

26 Informasi Statis Diinisialisasi pada awal Sesi dan ini tidak akan berubah selama sesi ini berlangsung Dapat berupa angka maupun teks Informasi Dinamik Akan terjadi perubahan selama sesi berlangsung dan perubahan tersebut harus dikomunikasikan kepada interface user Dapat berupa angka maupun teks Presentasi Informasi

27 Faktor Menampilkan Informasi 1) Apakah user tertarik pada informasi yang tepat? Atau pada hubungan antara nilai-nilai data yang berbeda? 2) Seberapa cepat nilai-nilai informasi berubah? Apakah perubahan pada suatu nilai ditunjukkan langsung kepada user? 3) Haruskah user mengambil tindakan sebagai tanggapan terhadap perubahan informasi? 4) Apakah user perlu berinteraksi dengan informasi yang ditampilkan melalui manipulasi langsung? 5) Apakah informasi yang akan ditampilkan berbentuk tekstual? Atau numerik? Apakah relatif item infomasi penting? Presentasi Informasi

28 Presentasi Informasi Alternatif Jan 2842 Feb 2851 Mar 3164 April 2789 May 1273 June Jan Feb M ar Ap ril M ay June Presentasi Informasi

29 Keterangan gambar Presentasi Informasi Alternatif Nilai-nilai relatif misalnya seperti pada Gambar diatas. Selain nilai yang disajikan relatif, informasinya bersifat dinamis, karena berubah saat sesi berjalan. Untuk nilai digital kita biasanya gunakan untuk menunjukkan jam pada jam sistem di komputer. Selain ketepatan diperlukan, perubahannya tidak terjadi secara cepat. Presentasi Informasi

30 Analog atau Presentasi Digital Presentasi Digital Compact memakan ruang yang sangat kecil Precise nilainya dapat dikomunikasikan Presentasi Analog Lebih mudah untuk mendapatkan kesan yang baik dan dapat dibaca sekilas. Kemungkinan dapat menunjukkan nilai yang relatif Lebih mudah untuk melihat data dari nilai luar biasa. Presentasi Informasi

31 Metode Presentasi informasi numerik yang bervariasi dinamic Dial with needle Pie char t Ther mometer Horizontal bar Presentasi Informasi

32 Tampilan informasi grafis yang menunjukkan nilai yang relatif Pressur e Temper atur e Presentasi informasi

33 Highlight Tekstual Dari Informasi Alfanumerik Presentasi Informasi

34 Keterangan gambar Highlight Tekstual Dari Informasi Alfanumerik Etika informasi alfanumerik disajikan, grafik dapat dipakai untuk mengambil informasi dari latar belakangnya. Ketimbang menyatakan sebaris informasi, nilai nilai tersebut dapat ditampilkan pada suatu kotak atau ditunjukkan dengan menggunakan icon. Kotak yang menampilkan bertumpuk dengan display layar pada saat itu. Dengan demikian perhatian user akan langsung tertangkap kekotak tersebut. Presentasi Informasi

35 Visualisasi Data I. Informasi cuaca, yang dikumpulkan dari sejumlah sumber, ditunjukkan sebagai peta cuaca dengan isobar, muka cuaca, dll II. Status jaringan telepon secara grafis sebagai satu set node yang terhubung pada pusat manajemen jaringan III. Status pabrik kimia divisualisasi dengan menunjukkan tekanan dan tempratur dalam bentuk tangki dan pipa yang terhubung. IV. Model molekul ditampilkan dan dimanipulasi dalam tiga dimensi dengan menggunakan sistem virtual reality V. Satu set web page ditampilkan sebagai pohon hiperbolik(lamping et al..,1995). Presentasi Informasi

36 Semua sistem interaktif, selain sistem khusus dengan layar kecil, mengdukung tampilan berwarna dan interface user menggunakan warna dengan cara yang berbeda beda. Pada beberapa sistem (seperti pengolahan kata),warna hanya digunakan untuk high-light pada sistem lain (seperti sistem CAD), warna dipakai untuk menunjukkan layer yang berbeda pada desain. Warna dapat memperbaiki interface user dengan membantu user memahami dan menangani kompleksitas. Shneiderman(1998) memberikan 14 panduan kunci untuk penggunaan warna yang efektif pada interface user. Warna Pada Desain Interface

37 Tips memilih warna agar tidak terjadi kesalahan dalam interface user 1) Batasi jumlah warna yang digunakan dan gunakan secara konservatif. 2) Gunakan perubahan warna untuk menunjukkan perubahan status sistem 3) Gunakan pengkodean warna untuk mendukung pekerjaan yang sedang dilakukan user 4) Gunakan kode warna dengan hati-hati dan konsisten 5) Berhati-hatilah dalam membuat pasangan warna. Warna Pada Desain Interface

38 Kesalahan yang sering terjadi antara lain: i. Perancang ketika memakai warna pada interface user adalah menghubungkan arti dengan earna tertentu dan menggunakan terlalu banyak warna pada satu display. ii. Jika warna dipakai terlalu banyak, atau jika warna-warna tersebut terlampau cerah, display bisa membingungkan. iii. Tumpukan warna bisa membingungkan user dan menyebabkan kelelahan visual. iv. Kebingungan user juga mungkin terjadi jika warna dipakai secara tidak konsisten. Warna Pada Desain Interface

39 Pendukung User meliputi semua fasilitas sistem mendukung pengguna termasuk-line bantuan, kesalahan pesan,manual dll Sistem pengguna user harus terintegrasi dengan pengguna user untuk membantu user saat mereka membutuhkan informasi tentang sistem atau ketika mereka membuat beberapa jenis kesalahan. Manajer harus memberikan waktu dan usaha yang cukup untuk perancangan message dan sebaliknya penulis dan ahli grafis yg profesional pada proses tersebut. Pendukung User

40 Kesan pertama yang mungkin didapat user dari sistem perangkat lunak adalah pesan error sistem. User tidak berpengalaman mungkin memulai pekerjaannya, membuat kesalahan awal, dan langsung harus memahami pesan error yang didapatnya. Hal ini mungkin cukup sulit bagi perekayasa perangkat lunak yang ahli sekalipun, bagi user yang tidak berpengalaman atau user biasa, pemahaman ini mungkin bisa tidak tercapai. Latar belakang dan pengalaman user harus diantisipasi ketika merancang pesan error. Pesan Error

41 Konteks Faktor Faktor Perancangan pada pembuatan katakata pesan Faktor Keterangan System panduan user harus mengetahui apa yang dilakukan user dan harus menyesuaikan pesan output dengan konteks pada saat itu. Pengalaman Tingkat Keahlian Gaya Budaya Selagi user menjadi terbiasa dengan system, mereka dapat menjadi kesal dengan adanya pesan yang panjang dan berarti. Dilain pihak, pemula akan sulit memahami penyataan yang singkat dan padat mengenai masalah yang dihadapi. System panduan user harus menyediakan kedua tipe pesan ini dan memungkinkan user mengontrol keringkasan pesan. Pesan harus disesuaikan dengan keahlian user di samping pengalaman mereka. Pesan untuk kelas user yang berbeda dapat dinyatakan dengan cara yang berbeda, tergantung pada istilah yang dikenal pembaca. Pesan harus positif dan tidak negative. Harus dipakai mode aktif dan bukan pasif. Pesan tersebut tidak boleh menyinggung perasaan atau mencoba untuk lucu. Jika mungkin, perancang pesan harus mengenai budaya Negara di mana system tersebut dijual. Ada perbedaan budaya yang jelas antara Eropa, Asia dan Amerika. Bisa jadi pesan yang cocok untuk satu budaya ternyata tidak dapat diterima di budaya lain. Pesan Error

42 Gambar input perawat untuk nama pasien Pesan Error

43 Keterangan Gambar input perawat untuk nama pasien Pesan kesalahan pada Gambar diatas ada dua macam: berorientasi pada sistem dan berorientasi pada pengguna. Pada pesan yang berorientasi pada sistem, pesan membuat pengguna merasa tidak berdaya karena tidak ada jalan keluar yang jelas, bahasa yang digunakan adalah bahasa teknis yang tidak berarti apa-apa. Pada pesan yang berorientasi pada pengguna, pesan lebih jelas dan memberikan alternatif jalan keluar. Sekalipun informasi yang diberikan lebih banyak dan terkesan penuh, tapi pengguna merasa tertolong. Pesan Error

44 Ketika user diberi pesan error yang tidak mereka pahami, mereka beralih ke sistem Help untuk mendapat informasi. Semua sistem Help yang komprehensif memiliki struktur jaringan yang kompleks dimana setiap frame informasi help bisa mengacu ke beberapa frame informasi lain. Masalah dalam sistem help dapat timbul ketika user memasuki jaringan setelah melakukan kesalahan dan kemudian menelusuri jaringan. Perancang Sistem Help

45 Teks pada sistem Help harus disiapkan dengan bantuan spesialis aplikasi. Frame help seharusnya bukan hanya merupakan reproduksi dari manual user karena user karena orang membaca kertas dan layar dengan cara yang berbeda. Sistem help dapat diimplementasikan sebagai satu set page World Wide Wen (WWW) atau dengan menggunakan sistem hiperteks generik yang dapat diintegrasikan dengan aplikasi. Sistem WWW memiliki keuntungan berupa kemudahannya diimplementasi dan tidak diperlukan perangkat lunak khusus. Perancang Sistem Help

46 Dokumentasi user tidak harus merupakan bagian dari perancangan interface user, tetapi adalah praktek yang baik untuk merancang dukungan help online dalam hubungannya dengan dokumentasi harus. Manual sistem harus menyediakan informasi yang lebih rinci dari help online dan harus dirancang agar dapat digunakan oleh berbagai kelas end user sistem. Dokumentasi user

47 Jenis Dokumen yang dihasilkan untuk mendukung user Dokumentasi User

48 Dokumen Dokumen ini adalah: 1) Deskripsi Fungsional 2) Dokumen Instalasi 3) Manual Pendahuluan 4) Manual Referensi 5) Manual Administrator Dokumentasi User

49 Beberapa evaluasi desain interface user harus dilakukan untuk menilai kesesuaian Evaluasi skala penuh adalah proses yang sangat mahal dan tidak praktis untuk sebagian besar sistem Idealnya evaluasi harus dilakukan terhadap spesifikasi kegunaan yang didasarkan pada atribut kegunaan Evaluasi yang sistematis dari desain interface user bisa jadi merupakan proses yang mahal yang melibatkan ilmuwan kognitif dan perancang grafis. evaluasi inteface dengan cara ini tidak realisitis dari segi ekonomi untuk sistem-sistem yang dikembangkan oleh organisasi-organisasi kecil dengan sumber daya yang terbatas Evaluasi Interface

50 Atribut Kemampulabaan Atribut Dapat dipelajari(learnability) keterangan Berapa lama waktu yang dibutuhkan user baru sampai dapat produktif dengan system? Kecepatan operasi(speed of operation) Seberapa baik respons system sesuai dengan praktek kerja user? Ketahanan(robustness) Kemampuan Lebih(recoverability) Kemampuan Adaptasi(adaptability) Seberapa toleran system ini terhadap error user? Seberapa baik system pulih dari error user? Seberapa dekat system bergantung pada satu model kerja? Evaluasi Interface

51 Teknik Evaluasi Sederhana a) Umpan balik terhadap kuesioner b) Peralatan video yang relatif murah mengandung arti bahwa observasi langsung dapat didukung dengan merekam sesi user untuk analisis berikutnya sebab dapat membantu dalam pendeteksian masalah dan harus digunakan metode evaluasi lain untuk menemukan operasi apa yang menyebabkan kesulitan bagi user. c) Pemakaian kode untuk mengumpulkan statistik penggunaan memungkinkan interface diperbaiki dengan sejumlah cara. Evaluasi Interface

52 Proses perancangan interface harus terpusat pada user. Interface harus berinteraksi dengan user dengan segala keterbatasan dan kelebihannya, harus logis dan konsisten, dan harus menyertakan fasilitas untuk membantu user memakai sistem dan memulihkan kesalahan-kesalahan mereka. Gaya interaksi dengan sistem perangkat lunak mencakup manipulasi langsung, sistem menu,form isian,bahasa command, dan bahasa natural. Tampilan informasi grafis harus digunakan ketika menampilkan tren dan nilai-nilai aproksimasi. Tampilan digital hanya harus dipakai jika yang dibutuhkan adalah ketepatan. Warna harus dipakai dengan hemat dan konsisten dengan interface user. Perancang harus memperhitungkan fakta bahwa tidak sedikit orang yang menderita buta warna Hal-Hal Penting

53 Sistem Help user harus menyediakan dua macam help: Help! Yang berarti tolong saya dalam kesulitan dan Help? Yang berarti tolong saya butuh informasi. Pesan Error tidak boleh menyatakan bahwa user-lah yang salah. Pesan-pesan tersebut harus memberikan saran bagaimana cara menghadapi kesalahan tersebut dan memberikan hubungan ke sistem help. Dokumentasi user harus mencakup manual pemula dan referensi. Dokumen yang terpisah untuk administrator sistem harus tersedia. Spesifikasi sistem harus mencakup, jika mungkin, nilai-nilai kuantitatif untuk atribut kegunaan dan evaluasi proses harus memeriksa sistem dengan persyaratan-persyaratan ini. Hal-Hal Penting

54 Terima Kasih