REKAYASA PERANGKAT LUNAK

PERANCANGAN ANTAR MUKA

Di Susun Oleh :

1. Firman Hidayat (1755201030)

2. Andre Armada (1755201049)
3. Saparudin (17552010)
4. Ade Panji (17552010)

Jurusan Teknik Informatika

Fakultas Ilmu Komputer
UNIVERSITAS LACANG KUNING
T.a 2019/2020
PERANCANGAN ANTAR MUKA

 Antarmuka pengguna (User Interface) : bagian sistem komputer

yang memungkinkan manusia berinteraksi dengan komputer.

 Perancangan antarmuka : proses penggambaran bagaimana

sebuah bagian sistem dibentuk.

Interaksi Manusia dan Komputer

Prinsip User Interface

 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

7. Manipulasi Langsung

8. Kontrol

9. Efektivitas (tepat dalam penggunaan)

10. Efisien dalam penggunaan

11. Keamanan dalam penggunaan

12. Kesesuaian Fungsi

13. Mudah dipelajari

14. Mudah diingat

2. Kompatibilitas Produk

 Memungkinkan adanya perubahan antarmuka agar sistem

menjadi lebih “kompatibel” bagi pengguna.

3. Kompatibilitas Transisi Antar Tugas

 Sistem harus dapat digunakan untuk memudahkan pengguna

dalam melakukan tugasnya  fungsi-fungsi dalam antarmuka
disesuaikan dengan kebutuhan pengguna.

4. Konsistensi

 Membantu pengguna untuk dapat menganalogikan dan

memprediksi sesuatu yang sebelumnya belum pernah dilakukan.

5. Kebiasaan

 Konsep, terminologi, dan pengaturan antarmuka harus yang dapat

dipahami oleh pengguna dengan baik agar pengguna tidak
bingung saat berinteraksi.

6. kesederhanaan

 Merancang antarmuka dengan bentuk yang sederhana, tanpa

mengurangi fungsionalitas dari sistem/produk yang dibangun.

7. Manipulasi langsung

 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

- Pada program spreadsheet  cth : Ms.Excel

 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)

- Simulator  simulator penerbangan

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

- apakah pekerjaan yg sudah dilakukan dapat dibatalkan.

9. Efektivitas (Tepat dalam Penggunaan)

 Apakah sistem yang dibangun dapat membuat pengguna:

- mudah untuk mempelajarinya

- efisien dalam melakukan pekerjaan

- dapat mengakses informasi yang diperlukan, dsb.

10. Efisien Dalam Penggunaan

 Apakah sistem menyediakan fasilitas yang memudahkan

pengguna dalam mengerjakan tugasnya.

11. Keamanan Dalam Penggunaan

 Untuk melindungi pengguna dalam menghadapi kondisi yang

tidak diinginkan.

 Salahsatu cara pengamanan, dengan membuat pesan dari

aktivitas yang dilakukan pengguna.

12. Kesesuaian Fungsi

 Fungsi-fungsi yang disediakan sistem harus sesuai dengan definisi

sistem tersebut.

 Contoh : - Aplikasi pengolah kata, brarti aplikasi tersebut harus

menyediakan seluruh fasilitas yang dibutuhkan dalam pengolahan
kata, seperti pembuatan dokumen baru, sampai ke penyimpanan
dokumen, dll.
13. Mudah Dalam Mempelajari

 Sistem yang mudah digunakan adalah sistem yang mudah

dipelajari dan mudah diingat.

 Perancang harus mengetahui karakteristik pengguna, termasuk

kemampuan dan keahlian pengguna sistem yang akan dibangun.

14. Mudah Diingat

 Mudah diingat bagaimana cara menggunakannya, sehingga

perancang juga perlu memperhatikan bagaimana
desain/rancangan sistem yang akan dibangun agar mudah
dipelajari oleh pengguna, sehingga menjadi 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 teknik dari hardware dan software

komputernya?
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 disebut CASE (Computer-Aided

Software Engineering).

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.

- penggunanya mempunyai tingkat kepandaian dan karakteristik

beragam, sehingga perlu adanya “customization” agar pengguna
dapat menggunakan aplikasi sesuai dengan selera masing-masing.

Cara Pendekatan
1. User-Centered Design Approach
 - digunakan pada program aplikasi untuk keperluan khusus.

- perancangan antarmuka melibatkan pengguna  pengguna aktif

berpendapat ketika perancang sedang membuat antarmuka 
pengguna seolah-olah sudah mempunyai gambaran nyata tentang
antarmuka sistem yang akan mereka gunakan.

2. User Design Approach

- pengguna sendiri yang merancang antarmuka yang
diinginkan.
Komponen Antar Muka
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 menunjukkan status

informasi atau program ketika user melakukan suatu tindakan

Urutan Perancangan Dialog

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

Perancangan format pesan; tata letak tampilan, keterangan

tektual secara terinci, dan efisiensi inputing data harus mendapat
perhatian lebih

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

 Penampilan pesan salah yang tepat dan sesuai dengan kesalahan

yangterjadi pada waktu itu.

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 mempunyai kecocokan satu
sama lain.
 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

Perancangan format pesan; tata letak tampilan, keterangan

tektual secara terinci, dan efisiensi inputing data harus mendapat
perhatian lebih

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

 Penampilan pesan salah yang tepat dan sesuai dengan kesalahan

yangterjadi pada waktu itu.

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 mempunyai kecocokan satu
sama lain.

PERANCANGAN TAMPILAN BERBASIS TEKS

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 perancang dengan calon pengguna

tentang urutan tampilan yang akan digunakan.

Kelonggaran

 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 tertentu dengan harapan
dapat langsung memusatkan perhatian pengguna.

Pengelompokan

 Pengelompokan data yang saling berkaitan untuk mempermudah

penstrukturan layar tampilan secara keseluruhan.

 Petunjuk adanya pengelompokan data bisa menggunakan

beberapa karakter khusus.

Relevansi

 Menampilkan pesan-pesan yang relevan/sesuai dengan topik yang

sedang ditampilkan di layar.

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 dialog berbasis pengisian

borang (frame).

Kesederhanaan

 Memberikan kemudahan bagi pengguna dalam memahami

informasi yang ditampilkan.
 PERANCANGAN TAMPILAN BERBASIS GRAFIS
 Dengan antarmuka berbasis grafis berbagai kemudahan dalam hal
pengontrolan format tampilan dapat dikerjakan dengan lebih
mudah dan fleksibilitas tampilan dapat semakin dirasakan oleh
perancang tampilan maupun penggunanya.

Disisi lain, kita harus memperhatikan beberapa kendala dalam

penerapan antarmuka berbasis grafis, antara lain : waktu tanggap,
kecepatan tampilan, lebar tampilan, dan tipe tampilan
 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 warna yang berbeda

 Struktur internal; berguna untuk menunjukkan bahwa obyek yang

sedang dihadapi dapat dimodifikasi sesuai dengan keinginan user

 Kosakata grafis yang konsisten dan sesuai, mis: gambar disket,

printer, dll

 Kesesuaian dengan media/informasi yang akan disampaikan

Ilusi pada objek-objek yang dapat dimanipulasi.

Perancangan antarmuka berbasis grafis harus melibatkan tiga

komponen :

- Kumpulan Objek

- Penampilan objek-objek

- Mekanisme yang konsisten

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 perhatian pengguna

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
memanipulasi objek tersebut.

Kosa kata grafis yang konsisten dan sesuai

Pada program aplikasi yang berbeda, penggunaan simbol biasanya

disesuaikan dengan kreatifitas perancangnya.

Kesesuain 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 pengguna akan aspek
kenyamanan dan keramahan antarmuka.

Penangan 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

Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang
terjadi pada waktu itu

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). Kesalahan
ini akan mengakibatkan terhentinya program secara abnormal.