ADSI IX DESAIN INTERFACE

DESIGN

INTERFACE

Mukhamad Masrur, M.Kom. Sistem Informasi

Pendahuluan

 Antarmuka pengguna (User

Interface) : bagian sistem

komputer yang memungkinkan manusia berinteraksi dengan komputer.

 Perancangan antarmuka :

proses penggambaran

bagaimana sebuah bagian sistem dibentuk.

Prinsip User Interface (1)

Dalam perancangan antarmuka, ada beberapa

prinsip yang harus diperhatikan (Deborah, 1992) :

1. Kompatibilitas Pengguna 2. Kompatibilitas Produk

3. Kompatibilitas Transisi Antar Tugas 4. Konsistensi

5. Kebiasaan

6. Kesederhanaan

Prinsip User Interface (2)

8. Kontrol

9. Efektivitas (tepat dalam penggunaan) 10. Efisien dalam penggunaan

11. Keamanan dalam penggunaan 12. Kesesuaian Fungsi

2. Kompatibilitas Produk



Memungkinkan adanya perubahan

3. Kompatibilitas Transisi Antar Tugas



Sistem harus dapat digunakan untuk

4. Konsistensi

5. Kebiasaan

6. Kesederhanaan

7. Manipulasi Langsung

(1)

 Merupakan gaya/ragam dialog dimana aksi yang

dilakukan pengguna dapat langsung terlihat pada tampilan objek yang tampak pada layar monitor.

 Manipulasi langsung biasanya menyertakan alat

penunjuk, seperti : mouse, trackball, layar sentuh, dan menggunakan grafik dalam menampilkan objek dan aksinya.

 Contoh penerapan manipulasi langsung :

- Pada games  cth : Solitaire

7. Manipulasi Langsung (2)

 Karakteristik yang harus diperhatikan dalam

manipulasi langsung adalah : Bahwa meskipun pada layar tampilan banyak sekali objek yg dapat dioperasikan, tapi pada satu saat pengguna hanya “berkuasa penuh” pada sebuah objek yang ada disana.

 Manipulasi langsung jg dpt diterapkan pada bidang

yg lebih luas dan serius :

- Kontrol proses industri  pembangkitan dan penyaluran listrik dan industri makanan berskala besar.

- Editor Teks konsep WYSIWYG (what you see is what you get)

8. Kontrol

 Sistem selalu dibawah kontrol pengguna

 Antarmuka harus mempunyai sarana yang memungkinkan pengguna untuk dapat menentukan :

- dimana sebelumnya pengguna berada - dimana pengguna berada sekarang

- kemana pengguna dapat pergi

9. Efektivitas (Tepat dalam

Penggunaan)

 Apakah sistem yang dibangun dapat membuat pengguna:

- mudah untuk mempelajarinya

- efisien dalam melakukan pekerjaan

10. Efisien Dalam Penggunaan

11. Keamanan Dalam Penggunaan

 Untuk melindungi pengguna dalam menghadapi kondisi yang tidak diinginkan.

12. Kesesuaian Fungsi

 Fungsi-fungsi yang disediakan sistem harus sesuai dengan definisi sistem tersebut.

 Contoh :

13. Mudah Dalam Mempelajari

 Sistem yang mudah digunakan adalah sistem yang mudah dipelajari dan mudah diingat.

14. Mudah Diingat

Hal-hal Yang Harus Diperhatikan

Dalam Merancang Antarmuka

 Apa keinginan dan harapan orang?

 Apa batasan dan kemampuan fisiknya?

 Bagaimana sistem penerimaan dan

pemrosesan informasi mereka bekerja?

 Apa yang dianggap menarik dan

menyenangkan?

 Bagimana karakteristik dan batasan

Dokumentasi Rancangan

a)

Membuat sketsa pada kertas

b)

Menggunakan peranti prototipe GUI

c)

Menulis tekstual yang menjelaskan

tentang kaitan antara satu jendela

dengan jendela yang lain

d)

Menggunakan peranti bantu yg

Kategori Program Aplikasi

 Program aplikasi untuk keperluan khusus (special

purpose software)

- pengguna yang akan memanfaatkan aplikasi tersebut dapat diperkirakan, sehingga memudahkan dalam merancang antarmuka.

 Program aplikasi yang akan digunakan untuk banyak

pengguna (general purpose software) atau public software.

Cara Pendekatan (1)

1. User-Centered Design Approach

- digunakan pada program aplikasi untuk keperluan khusus.

Cara Pendekatan (2)

2.

User Design Approach

Komponen Antarmuka Pengguna

1.

Model pengguna

; memungkinkan user

untuk mengembangkan pemahaman yang

mendasar tentang apa yang dikerjakan oleh

program, bahkan oleh user yang sama

sekali tidak mengetahui teknologi komputer

2.

Bahasa perintah

; sedapat mungkin

menggunakan bahasa alami

3.

Umpanbalik

; kemampuan sebuah program

yang membantu user untuk

mengoperasikan program itu sendiri

4.

Tampilan informasi

; digunakan untuk

Urutan Perancangan Dialog

(1)

1. Pemilihan ragam dialog,

dipengaruhi oleh karakteristik populasi pengguna, tipe dialog yang

diperlukan, dan kendala teknologi yang ada untuk

mengimplementasikan ragam dialog tersebut.

2. Perancangan struktur dialog;

melakukan analisis tugas dan

menentukan model pengguna dari tugas tersebut

3. Perancangan format pesan; tata

Urutan Perancangan Dialog (2)

4. Perancangan penanganan kesalahan; untuk

menghindari adanya kesalahan yang timbul, maka adanya kondisi yang disebut abnormal termination, yaitu eksekusi program berhenti karena terjadi kesalahan. Bentuk penanganan kesalahan :

 Validasi pemasukan data  Proteksi pengguna

 Pemulihan dari kesalahan

Urutan Perancangan Dialog (3)

5. Perancangan struktur data

Setelah semua aspek antarmua dipertimbangkan, anda harus menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung

fungsional komponen-komponen antarmuka yang diperlukan. Struktur data ini harus dipetakan

langsung ke dalam model pengguna yang telah dibuat.

Hal ini perlu ditekankan agar keinginan pengguna dan model sistem yang telah dirancang saling

6 Faktor Agar Tata Letak

Tampilan

1. Urutan Penyajian

2. Kelonggaran (Spaciousness) 3. Pengelompokan

4. Relevansi 5. Konsistensi

6. Kesederhanaan

Urutan Penyajian

 Urutan penyajian disesuaikan dengan

model pengguna yang telah disusun.

 Harus ada kesepakatan antara

Kelonggaran

(

Spaciousness

)

 Penggunaan tabulasi dan spasi dapat

memudahkan pengguna untuk mencari suatu teks yang diinginkan, meskipun boros tempat kosong pd layar.

 Teks-teks tertentu ditempatkan di posisi

Pengelompokan

 Pengelompokan data yang saling

berkaitan untuk mempermudah penstrukturan layar tampilan secara keseluruhan.

 Petunjuk adanya pengelompokan data

Relevansi

 Menampilkan pesan-pesan yang

Konsistensi

 Kadang pengguna dihadapkan pada

sejumlah tampilan yang penuh informasi, sehingga perancang harus konsisten dalam menggunakan ruang tampilan yang tersedia.

 Misalnya pada sistem dengan tampilan

Kesederhanaan

 Memberikan kemudahan bagi

PERANCANGAN TAMPILAN

BERBASIS GRAFIS

 Dengan antarmuka berbasis grafis berbagai

kemudahan dalam hal pengontrolan format

tampilan dapat dikerjakan dengan lebih mudah dan feksibilitas tampilan dapat semakin

dirasakan oleh perancang tampilan maupun penggunanya.

 Disisi lain, kita harus memperhatikan beberapa

5 Faktor Penting pada Perancangan

Interface Berbasis Grafs

 Ilusi pada obyek-obyek yang dapat

dimanipulasi, mis: gambar disket, printer, dll

 Urutan visual dan fokus pengguna, mis: tanda kedip untuk posisi kursor, penggunaan warna

yang berbeda

 Struktur internal; berguna untuk menunjukkan bahwa obyek yang sedang dihadapi dapat

dimodifikasi sesuai dengan keinginan user

 Kosakata grafs yang konsisten dan sesuai, mis: gambar disket, printer, dll

 Kesesuaian dengan media/informasi yang

1. Ilusi pada objek-objek yang dapat

dimanipulasi.

Perancangan antarmuka berbasis grafis harus melibatkan tiga komponen : - Kumpulan Objek

- Penampilan objek-objek

2. Urutan visual dan Fokus pengguna

 Antar muka grafis dapat

digunakanuntuk menarik perhatian

pengguna antara lain dengan membuat objek yang berkedip, menggunakan

warna tertentu, serta menyajikan suatu animasi yang akan lebih menarik

3. Struktur Internal

Pada pengolahan kata kita sering menulis

beberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok kata yang ditebalkan, dimiringkan atau diberi garis bawah.

Pada antarmuka berbasis grafis, khusunya pada

objek-objek yang dapat dimanipulasi, perancang juga harus memberikan struktur internal

(reveral structure) dalam bentuk yang berbeda dengan yang digunakan pada dokumen

tekstual, untuk memberi tahu pengguna sejauh mana pengguna dapat mengubah atau

4. Kosa kata grafis yang

konsisten dan sesuai

Pada program aplikasi yang berbeda,

5. Kesesuaian dengan pengguna

Karakteristik dari layar tampilan yang

digunakan akan mempunyai pengaruh yang besar terhadap keindahan “wajah”

antarmuka yang akan ditampilkan.

Dengan semakinnya canggihnya teknologi

layar tampilan pada saat ini, kreatifitas perancang tampilanlah yang saat ini lebih dituntut untuk memenuhi permintaan

Penanganan Kesalahan

 Validasi pemasukan data, mis: jika user harus memasukkan bilangan positif, namun dia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang

pemasukan data tersebut

 Proteksi user; program memberi peringatan ketika user melakukan suatu tindakan secara tidak sengaja, mis: penghapusan berkas

 Pemulihan dari kesalahan: tersedianya mekanisme untuk membatalkan tindakan yang baru saja dilakukan

Kesalahan dibagi 2, yaitu :

Kesalahan pada saat implementasi program yaitu

kesalahan sintaks yang secara langsung akan dideteksi oleh kompiler (compile-time error), terjadi pada saat program sedang dikompilasi.

Kesalahan Logika ketika program sedang

dijalankan, terjadi pada saat program

dijalanka(run-time error atau fatal error).