perancangan ui

5/24/2018 Perancangan UI

1/45

DESIGN

INTERFACE


2/45

Pendahuluan Antarmuka pengguna

(User Interface) : bagian

sistem komputer yangmemungkinkan manusiaberinteraksi dengankomputer.

Perancangan

antarmuka : prosespenggambaranbagaimana sebuahbagian sistem dibentuk.

Interaksi Manusia danKomputer


3/45

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. Kebiasaan6. Kesederhanaan

7. Manipulasi Langsung


4/45

Prinsip User Interface (2)

8. Kontrol

9. Efektivitas (tepat dalam penggunaan)

10. Efisien dalam penggunaan

11. Keamanan dalam penggunaan

12. Kesesuaian Fungsi

13. Mudah dipelajari14. Mudah diingat


5/45

1. Kompatibilitas Pengguna


6/45

2. Kompatibilitas Produk

Memungkinkan adanya perubahan

antarmuka agar sistem menjadi

lebih kompatibel terhadap

produk.


7/45

3. Kompatibilitas Transisi AntarTugas

Sistem harus dapat digunakan

untuk memudahkan pengguna

dalam melakukan tugasnya

fungsi-fungsi dalam antarmuka

disesuaikan dengan kebutuhan

pengguna.


8/45

4. Konsistensi

Membantu pengguna untuk dapatmenganalogikan dan memprediksi

sesuatu yang sebelumnya belum pernahdilakukan.


9/45

5. Kebiasaan

Konsep, terminologi, dan pengaturanantarmuka harus yang dapat dipahami

oleh pengguna dengan baik agarpengguna tidak bingung saatberinteraksi.


10/45

6. Kesederhanaan

Merancang antarmuka dengan bentukyang sederhana, tanpa mengurangi

fungsionalitas dari sistem/produk yangdibangun.


11/45

7. Manipulasi Langsung (1) Merupakan gaya/ragam dialog dimana aksi

yang dilakukan pengguna dapat langsungterlihat pada tampilan objek yang tampakpada layar monitor.

Manipulasi langsung biasanya menyertakanalat penunjuk, seperti : mouse, trackball, layarsentuh, dan menggunakan grafik dalammenampilkan objek dan aksinya.

Contoh penerapan manipulasi langsung :- Pada gamescth : Solitaire

- Pada programspreadsheetcth : Ms.Excel


12/45

7. Manipulasi Langsung (2) Karakteristik yang harus diperhatikan dalam

manipulasi langsung adalah : Bahwa meskipunpada layar tampilan banyak sekali objek ygdapat dioperasikan, tapi pada satu saatpengguna hanya berkuasa penuh padasebuah objek yang ada disana.

Manipulasi langsung jg dpt diterapkan padabidang yg lebih luas dan serius :

- Kontrol proses industri pembangkitandan penyaluran listrik dan industri makanan

berskala besar.- Editor Teks konsep WYSIWYG (what you seeis what you get)

- Simulatorsimulator penerbangan


13/45

8. Kontrol Sistem selalu dibawah kontrol pengguna

Antarmuka harus mempunyai sarana yangmemungkinkan pengguna untuk dapatmenentukan :

- dimana sebelumnya pengguna berada

- dimana pengguna berada sekarang

- kemana pengguna dapat pergi

- apakah pekerjaan yg sudah dilakukan dapatdibatalkan.


14/45

9. Efektivitas (Tepat dalam

Penggunaan)

Apakah sistem yang dibangun dapatmembuat pengguna:

- mudah untuk mempelajarinya

- efisien dalam melakukan pekerjaan

- dapat mengakses informasi yangdiperlukan, dsb.


15/45

10. Efisien Dalam Penggunaan

Apakah sistem menyediakan fasilitasyang memudahkan pengguna dalam

mengerjakan tugasnya.


16/45

11. Keamanan DalamPenggunaan

Untuk melindungi pengguna dalammenghadapi kondisi yang tidak

diinginkan.

Salahsatu cara pengamanan, denganmembuat pesan dari aktivitas yangdilakukan pengguna.


17/45

12. Kesesuaian Fungsi

Fungsi-fungsi yang disediakan sistem harussesuai dengan definisi sistem tersebut.

Contoh :- Aplikasi pengolah kata, brarti aplikasitersebut harus menyediakan seluruhfasilitas yang dibutuhkan dalampengolahan kata, seperti pembuatandokumen baru, sampai ke penyimpanandokumen, dll.


18/45

13. Mudah Dalam Mempelajari

Sistem yang mudah digunakan adalahsistem yang mudah dipelajari dan mudah

diingat.

Perancang harus mengetahui karakteristikpengguna, termasuk kemampuan dankeahlian pengguna sistem yang akan

dibangun.


19/45

14. Mudah Diingat

Mudah diingat bagaimana caramenggunakannya, sehingga perancang

juga perlu memperhatikan bagaimanadesain/rancangan sistem yang akandibangun agar mudah dipelajari olehpengguna, sehingga menjadi mudah

diingat.


20/45

Hal-hal Yang Harus DiperhatikanDalam Merancang Antarmuka

Apa keinginan dan harapan orang?

Apa batasan dan kemampuan fisiknya?

Bagaimana sistem penerimaan danpemrosesan informasi mereka bekerja?

Apa yang dianggap menarik danmenyenangkan?

Bagimana karakteristik dan batasanteknik dari hardware dan softwarekomputernya?


21/45

Dokumentasi Rancangan

a) Membuat sketsa pada kertas

b) Menggunakan peranti prototipe GUI

c) Menulis tekstual yang menjelaskantentang kaitan antara satu jendeladengan jendela yang lain

d) Menggunakan peranti bantu ygdisebut CASE (Computer-AidedSoftware Engineering).


22/45

Kategori Program Aplikasi Program aplikasi untuk keperluan khusus (special

purpose software)- pengguna yang akan memanfaatkan aplikasi

tersebut dapat diperkirakan, sehinggamemudahkan dalam merancang antarmuka.

Program aplikasi yang akan digunakan untukbanyak pengguna (general purpose software)atau public software.- penggunanya mempunyai tingkat kepandaian

dan karakteristik beragam, sehingga perluadanya customization agar pengguna dapatmenggunakan aplikasi sesuai dengan seleramasing-masing.


23/45

Cara Pendekatan (1)

1. User-Centered Design Approach

- digunakan pada program aplikasi untuk

keperluan khusus.- perancangan antarmuka melibatkanpengguna pengguna aktif berpendapatketika perancang sedang membuatantarmuka pengguna seolah-olah sudah

mempunyai gambaran nyata tentangantarmuka sistem yang akan merekagunakan.


24/45

Cara Pendekatan (2)

2. User Design Approach

- pengguna sendiri yang merancangantarmuka yang diinginkan.


25/45

Komponen Antarmuka Pengguna

1. Model pengguna; memungkinkan useruntuk mengembangkan pemahamanyang mendasar tentang apa yangdikerjakan oleh program, bahkan oleh useryang sama sekali tidak mengetahuiteknologi komputer

2. Bahasa perintah; sedapat mungkinmenggunakan bahasa alami

3. Umpanbalik; kemampuan sebuahprogram yang membantu user untuk

mengoperasikan program itu sendiri4. Tampilan informasi; digunakan untukmenunjukkan status informasi atauprogram ketika user melakukan suatutindakan


26/45

Urutan Perancangan Dialog (1)

1. Pemilihan ragam dialog, dipengaruhioleh karakteristik populasi pengguna,tipe dialog yang diperlukan, dankendala teknologi yang ada untuk

mengimplementasikan ragam dialogtersebut.

2. Perancangan struktur dialog; melakukananalisis tugas dan menentukan modelpengguna dari tugas tersebut

3. Perancangan format pesan; tata letaktampilan, keterangan tektual secaraterinci, dan efisiensi inputing data harusmendapat perhatian lebih


27/45

Urutan Perancangan Dialog(2)

4. Perancangan penanganan kesalahan;untuk menghindari adanya kesalahan yangtimbul, maka adanya kondisi yang disebutabnormal termination, yaitu eksekusiprogram berhenti karena terjadi kesalahan.Bentuk penanganan kesalahan :

Validasi pemasukan data Proteksi pengguna Pemulihan dari kesalahan Penampilan pesan salah yang tepat dan

sesuai dengan kesalahan yangterjadipada waktu itu.


28/45

Urutan Perancangan Dialog(3)

5. Perancangan struktur dataSetelah semua aspek antarmuadipertimbangkan, anda harus menentukanstruktur data yang dapat digunakan untukmenyajikan dan mendukung fungsional

komponen-komponen antarmuka yangdiperlukan. Struktur data ini harus dipetakanlangsung ke dalam model pengguna yang telahdibuat.Hal ini perlu ditekankan agar keinginanpengguna dan model sistem yang telahdirancang saling mempunyai kecocokan satu

sama lain.


29/45

6 Faktor Agar Tata Letak Tampilan Baik

1. Urutan Penyajian

2. Kelonggaran (Spaciousness)

3. Pengelompokan

4. Relevansi

5. Konsistensi6. Kesederhanaan

PERANCANGAN TAMPILAN

BERBASIS TEKS


30/45

Urutan Penyajian

Urutan penyajian disesuaikan dengan model

pengguna yang telah disusun.

Harus ada kesepakatan antara perancang

dengan calon pengguna tentang urutan

tampilan yang akan digunakan.


31/45

Kelonggaran (Spaciousness)

Penggunaan tabulasi dan spasi dapat

memudahkan pengguna untuk mencari suatu

teks yang diinginkan, meskipun boros tempatkosong pd layar.

Teks-teks tertentu ditempatkan di posisi

tertentu dengan harapan dapat langsung

memusatkan perhatian pengguna.


32/45

Pengelompokan

Pengelompokan data yang saling berkaitan

untuk mempermudah penstrukturan layar

tampilan secara keseluruhan.

Petunjuk adanya pengelompokan data bisa

menggunakan beberapa karakter khusus.


33/45

Relevansi

Menampilkan pesan-pesan yang relevan/sesuai

dengan topik yang sedang ditampilkan di layar.


34/45

Konsistensi

Kadang pengguna dihadapkan pada sejumlah

tampilan yang penuh informasi, sehingga

perancang harus konsisten dalammenggunakan ruang tampilan yang tersedia.

Misalnya pada sistem dengan tampilan dialog

berbasis pengisian borang (frame).


35/45

Kesederhanaan

Memberikan kemudahan bagi pengguna dalam

memahami informasi yang ditampilkan.


36/45


37/45

PERANCANGAN TAMPILAN

BERBASIS GRAFIS Dengan antarmuka berbasis grafis berbagai

kemudahan dalam hal pengontrolan formattampilan dapat dikerjakan dengan lebih mudah

dan fleksibilitas tampilan dapat semakin dirasakanoleh perancang tampilan maupunpenggunanya.

Disisi lain, kita harus memperhatikan beberapa

kendala dalam penerapan antarmuka berbasisgrafis, antara lain : waktu tanggap, kecepatantampilan, lebar tampilan, dan tipe tampilan


38/45

5 Faktor Penting pada

Perancangan Interface Berbasis

Grafis Ilusi pada obyek-obyek yang dapat

dimanipulasi, mis: gambar disket, printer, dll Urutan visual dan fokus pengguna, mis: tanda

kedip untuk posisi kursor, penggunaan warnayang berbeda Struktur internal; berguna untuk menunjukkan

bahwa obyek yang sedang dihadapi dapatdimodifikasi sesuai dengan keinginan user

Kosakata grafis yang konsisten dan sesuai,

mis: gambar disket, printer, dll Kesesuaian dengan media/informasi yang

akan disampaikan


39/45

1. Ilusi pada objek-objek yang dapat

dimanipulasi.

Perancangan antarmuka berbasis grafisharus melibatkan tiga komponen :

- Kumpulan Objek- Penampilan objek-objek

- Mekanisme yang konsisten


40/45

2. Urutan visual dan Fokus pengguna

Antar muka grafis dapat digunakanuntukmenarik perhatian pengguna antara laindengan membuat objek yang berkedip,

menggunakan warna tertentu, sertamenyajikan suatu animasi yang akanlebih menarik perhatian pengguna


41/45

3. Struktur Internal

Pada pengolahan kata kita sering menulisbeberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok katayang ditebalkan, dimiringkan atau diberi garisbawah.

Pada antarmuka berbasis grafis, khusunyapada objek-objek yang dapat dimanipulasi,perancang juga harus memberikan strukturinternal (reveral structure)dalam bentuk yang

berbeda dengan yang digunakan padadokumen tekstual, untuk memberi tahupengguna sejauh mana pengguna dapatmengubah atau memanipulasi objek tersebut.


42/45

4. Kosa kata grafis yang konsisten

dan sesuaiPada program aplikasi yang berbeda,penggunaan simbol biasanya disesuaikandengan kreatifitas perancangnya.


43/45

5. Kesesuaian dengan pengguna

Karakteristik dari layar tampilan yangdigunakan akan mempunyai pengaruhyang besar terhadap keindahan wajahantarmuka yang akan ditampilkan.

Dengan semakinnya canggihnya

teknologi layar tampilan pada saat ini,kreatifitas perancang tampilanlah yangsaat ini lebih dituntut untuk memenuhipermintaan pengguna akan aspekkenyamanan dan keramahanantarmuka.


44/45

Penanganan Kesalahan

Validasi pemasukan data, mis: jika user harusmemasukkan bilangan positif, namun diamemasukkan data negatif atau nol, maka harusada mekanisme untuk mengulang pemasukandata tersebut

Proteksi user; program memberi peringatanketika user melakukan suatu tindakan secaratidak sengaja, mis: penghapusan berkas

Pemulihan dari kesalahan: tersedianyamekanisme untuk membatalkan tindakan yang

baru saja dilakukan Penampilan pesan salah yang tepat dan sesuai

dengan kesalahan yang terjadi pada waktu itu


45/45

Kesalahan dibagi 2, yaitu :

Kesalahan pada saat implementasiprogram yaitu kesalahan sintaks yangsecara langsung akan dideteksi olehkompiler (compile-time error), terjadi pada

saat program sedang dikompilasi.Kesalahan Logika ketika program sedang

dijalankan, terjadi pada saat programdijalanka(run-time error atau fatal error).Kesalahan ini akan mengakibatkan

terhentinya program secara abnormal.

perancangan ui

Documents