PERANCANGAN INTERFACE USER

PERANCANGAN INTERFACE USER MUHLIS TAHIR - 092904033

PTIK A 2009 CHAPTER 15

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 CHAPTER 15

• • • • •

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

MATERI CHAPTER 15

• 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 CHAPTER 15

• 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.


• Berikut ini karakteristik-karakteristik GUI sebagai interface user

Karakteristik

Keterangan

Windows

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.

Icon

Menu Pointing(Alat Penunjuk)

Grafik


 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


• 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.


• Gambar Proses Perancangan Interface User


• Keterangan Gambar Interface User

Proses

Perancangan

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.


• 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 CHAPTER 15

• 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 Prinsip

Keterangan

Kebiasaan User

Interface harus menggunakan istilah dan konsep yang diambil dari pengalaman orang-orang yang kan paling sering menggunakan system tersebut.

Konsistensi

Interface harus konsisten dalam hal, jika dimungkinkan, operasi-operasi yang hamper sama harus diaktifkan dengan cara yang sama.

Kejutan minimal

User harus tidak dikejutkan oleh perilaku system

Kemampuan Pemulihan

Interface harus mencakup mekanisme untuk memungkinkan user pulih dari error.

Panduan User

Interface harus menyediakan umpan balik yang berarti ketika terjadi kesalahan dan menyediakan fasilitas bantuan yang context sensitive.

Keragaman User

Interface harus menyediakan fasilitas interaksi yang sesuai untuk berbagai tipe user system.


 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.


 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.


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 CHAPTER 15

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


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’.


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


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

Control stok pemrosesan pinjaman pribadi

Bahasa Command

Ampuh dan Fleksibel

Sulit dipelajari dan manajemen error yang buruk

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 Multipel Unix s hell int er face (ksh/cs h)

Grap hical us er int er face (Gnome/KDE)

Command langua ge int erpret er

X-windows GU I mana ger

Linux op erat ing sy st em


 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 CHAPTER 15

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


• Model MVC dari Interaksi User

Presentasi User CHAPTER 15

• 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 CHAPTER 15

• 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


• 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 Alternatif Jan 2 842

Feb 285 1

M ar 3 164

Feb

M ar

Ap ril 2 789

M ay 12 73

June 2 83 5

M ay

June

4000

3000

2 000

1 000

0 Jan

Ap ril


• 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.


• 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.


• Metode Presentasi informasi numerik yang bervariasi dinamic 1 4

0

2

10

3

• Dial with needle

Pie char t

Ther mometer

Horizontal bar


20

• Tampilan informasi grafis yang menunjukkan nilai yang relatif

Pres sur e 0

1 00

200

Temp er atur e 300

400

0

25

50

Presentasi informasi CHAPTER 15

75

100

• Highlight Tekstual Dari Informasi Alfanumerik


• 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.


• 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).


• 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 CHAPTER 15

• 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.


 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.


• 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 CHAPTER 15

• 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 CHAPTER 15

• Faktor Faktor Perancangan pada pembuatan katakata pesan Faktor Konteks

Pengalaman

Tingkat Keahlian

Gaya

Budaya


Keterangan System panduan user harus mengetahui apa yang dilakukan user dan harus menyesuaikan pesan output dengan konteks pada saat itu.

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.

Gambar input perawat untuk nama pasien


 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.


 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 CHAPTER 15

• 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 CHAPTER 15

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 CHAPTER 15

• Jenis Dokumen yang dihasilkan untuk mendukung user

Dokumentasi User CHAPTER 15

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

Dokumentasi User CHAPTER 15

 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 CHAPTER 15

• Atribut Kemampulabaan Atribut Dapat dipelajari(Learnability)

keterangan Berapa lama waktu yang dibutuhkan user baru sampai dapat produktif dengan system?

Kecepatan operasi(speed Seberapa baik respons system sesuai dengan praktek kerja of operation) 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?


• 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.


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 CHAPTER 15

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 CHAPTER 15

Terima Kasih CHAPTER 15

PERANCANGAN INTERFACE USER

Recommend Documents