PERANCANGAN INTERFACE USER

MUHLIS TAHIR - 092904033

PTIK A 2009

PERANCANGAN

INTERFACE

TUJUAN

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

MATERI

• PRINSIP PRINSIP PERANCANGAN INTERFACE USER

• INTERAKSI USER

• PRESENTASI USER

• PENDUKUNG USER

PENDAHULUAN

• 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

PENDAHULUAN

• 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

• Berikut ini karakteristik-karakteristik GUI sebagai interface user

Karakteristik

Keterangan

Windows Mulitipel window memungkinkan berbagai informasi ditampilkan ditampilkan secara simultan pada layar user.

Icon Icon memrepresentasikan berbagi tipe informasi. Pada beberapa system, icon mempresentasikan file pada system lainnya dan icon mempresentasikan proses.

Menu Command dipilih dari menu dan bukan diketiikkan dalam suatu bahasa command.

Pointing(Alat Penunjuk) Piranti petunjuk seperti mouse digunakan untuk melakukan pemilihan dari menu atau menunjukmitem yang diinginkan pada window.

Grafik Elemen-elemen grafis dapat dicampur dengan teks pada tampilan yang sama.

PENDAHULUAN

 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

• 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

PENDAHULUAN

•

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.

PRINSIP-PRINSIP PERANCANGAN

INTERFACE USER

• 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

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

PRINSIP-PRINSIP PERANCANGAN

INTERFACE USER

 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

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

Interaksi User

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

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

Interaksi User

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

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

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

• Interaksi User Multipel

Linux op erat ing sy st em X-windows GU I mana ger Grap hical us er int er face (Gnome/KDE) Command langua ge int erpret er Unix s hell int er face (ksh/cs h)

Presentasi Informasi

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

• Presentasi Informasi

• Dengan memisahkan system presentasi dari data, representasi pada

layar user dapat diubah tanpa harus mengubah system komputasi yang mendasarinya.

Presentasi User

Presentasi User

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

• 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

Presentasi Informasi

• 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

• Presentasi Informasi Alternatif

0 1 000 2 000 3000 4000

Jan Feb M ar Ap ril M ay June Jan 2 842 Feb 285 1 M ar 3 164 Ap ril 2 789 M ay 12 73 June 2 83 5

Presentasi Informasi

• 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

• 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

Presentasi Informasi

• Metode Presentasi informasi numerik yang bervariasi dinamic

•

1

3

4 2 0 10 20

Presentasi informasi

• Tampilan informasi grafis yang menunjukkan nilai yang relatif

0 1 00 200 300 400 0 2 5 5 0 75 100

Presentasi Informasi

Presentasi Informasi

• 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

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

Warna Pada Desain

Interface

• 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

• 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

Warna Pada Desain

Interface

 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

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

Pesan Error

• 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

• Faktor Faktor Perancangan pada pembuatan

kata-kata pesan

Faktor Keterangan

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

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

Tingkat Keahlian 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.

Gaya Pesan harus positif dan tidak negative. Harus dipakai mode aktif dan bukan pasif. Pesan tersebut tidak boleh menyinggung perasaan atau mencoba untuk lucu.

Budaya 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

Pesan Error

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

Perancang Sistem Help

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

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

Dokumentasi user

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

Dokumentasi User

• Dokumen Dokumen ini adalah:

1) Deskripsi Fungsional

2) Dokumen Instalasi

3) Manual Pendahuluan

4) Manual Referensi

Evaluasi Interface

 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

Evaluasi Interface

• Atribut Kemampulabaan

Atribut keterangan Dapat

dipelajari(Learnability)

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) Seberapa toleran system ini terhadap error user?

Kemampuan

Lebih(recoverability)

Seberapa baik system pulih dari error user?

Kemampuan

Adaptasi(adaptability)

Evaluasi Interface

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

Hal-Hal Penting

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

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