USER INTERFACE

PERTEMUAN 5
AGENDA
• Pengertian User Interface
• Ragam dialog/Jenis Gaya Interaksi
• Perkembangan User Interface
• Antarmuka sistem berkelompok
• Antarmuka berorientasi baris perintah
• Antarmuka full screen
• Antarmuka pengguna grafik
• Antarmuka pengguna masa depan
• Prinsip-prinsip perancangan user interface
PENGERTIAN
USER
INTERFACE
 Antarmuka pengguna (user interface) merupakan bagian sistem
komputer yang memungkinkan manusia berinteraksi (berkomunikasi,
Pengertian memberikan dan menerima informasi) dengan computer

Antarmuka
Pengguna
Perancangan antarmuka merupakan proses penggambaran bagaimana
sebuah bagian sistem dibentuk

Antarmuka user membahas respons/tanggapan dan melibatkan

pertukaran data, baik berupa teks, pixcel dan lain sebagainya.
Antarmuka user digambarkan sebagai suatu permukaan dimana
data diumpan balik diantara user dan komputer
Pengertian Antarmuka Pengguna

user interface mencakup

aspek interaktif sistem Pertimbangan desain yang
User interface yang ada
operasi komputer, berlaku saat membuat user
untuk berbagai sistem dan
perkakas tangan, operator interface berkaitan dengan
menyediakan cara:
kontrol mesin berat dan ergonomik dan psikologi
proses kontrol

output: memungkinkan
input: memungkinkan
sistem untuk
pengguna untuk
menunjukkan efek
memanipulasi sistem
manipulasi pengguna
 Menyesuaikan antarmuka pengguna dengan
tugas
membuat antarmuka pengguna menjadi efisien

Tujuan
memberikan arus balik yang tepat kepada
interface pengguna
memunculkan pertanyaan-pertanyaan yang
dapat dimanfaatkan
memperbaiki produktivitas dari pengetahuan
pegawai
 1. Graphical User Interface (GUI):
menggunakan unsur-unsur multimedia
(seperti: gambar, suara, video) untuk
berinteraksi dengan pengguna
Macam-
macam user
interface 2. Text-Based: menggunakan
syntax/rumus yang sudah ditentukan
untuk memberikan perintah
 CONTENT COLORING DESIGN
Komponen
perbandingan
interface

DENSITAS ICON/ FORMAT

TEXT SYMBOL INFORMASI
RAGAM
DIALOG
RAGAM DIALOG

• Ragam Dialog (Dialogue Style) merupakan cara

pengorganisasian berbagai teknik dialog interaktif yang
memungkinkan terjadinya komunikasi antara manusia dengan
komputer.
• Tujuan perancangan antarmuka dengan berbagai dialog pada
dasarnya adalah untuk mendapatkan satu kriteria yang sangat
penting dalam pengoperasian sebuah program aplikasi, yakni
aspek ramah dengan pengguna (user friendly).
JENIS GAYA
INTERAKSI
 1. Dialog berbasis perintah tunggal (Command line dialogue).

2. Dialog berbasis bahasa pemrograman (Programming language dialogue).

3. Antarmuka berbasis bahasa alami (Natural language interface).

4. Sistem Menu

Jenis Gaya 5. Dialog berbasis pengisian formulir (Form filling dialogue).

Interaksi
6. Antarmuka berbasis ikon (icon)

7. Sistem Penjendelaan (windowing system)

8. Manipulasi Langsung

9. Antarmuka Berbasis Interaksi Grafis

 User interface bahasa alamiah

• Ideal bagi user yang tidak berpengalaman, karena

interface menggunakan bahasa sehari-hari
• Adanya perbedaan bahasa antara komputer dan
manusia sehingga diperlukan penerjemah yang
mampu menerjemahkan 2 arah
Jenis Gaya
Interaksi
User interface menu-menu

• Menyediakan daftar pilihan dalam jumlah yang

terbatas yang biasanya berupa suatu kalimat atau
kumpulan beberapa kata sehingga pengguna dapat
menentukan pilihannya
Tipe Interface
• User Interface Formulir Isian
• Tampilan pada layar yang mencerminkan struktur data masukan yang diperlukan oleh sistem
• Kejelasan perancangan dan penyajiannya secara visual pada layar
• Derajat kebenaran dan kehandalan penerimaan data masukan oleh program lewat berbagai
fasilitas pemasukan data yang ada pada borang
 User Interface Bahasa Perintah

• Memberi kemudahan kepada user untuk

mengontrol suatu aplikasi dengan serangkaian
tekanan tombol, perintah-perintah, frasa atau
beberapa kombinasi
Tipe Interface
User Interface GUI

• Memungkinkan adanya manipulasi langsung

pada tampilan grafis di layar, yang dapat
diselesaikan dengan inputan dari keyboard,
joystick atau mouse
PERKEMBANGAN
USER INTERFACE
 Antarmuka sistem berkelompok

Antarmuka berorientasi baris perintah

Perkembangan Antarmuka full screen

User Interface
Antarmuka pengguna grafik

Antarmuka pengguna masa depan

1. Antarmuka sistem berkelompok

• Antarmuka sistem berkelompok merupakan generasi antarmuka pengguna

yang pertama diperkenalkan
• Sistem ini bukanlah sistem interaktif seperti yang terdapat pada sistem-sistem
masa sekarang
• Pengguna berinteraksi dengan sistem melalui perantara kerja secara
berkelompok
• Semua arahan perlu perantara terlebih dahulu sebelum hasil keputusan dicetak
dan antarmuka ini memiliki tampilan yang kurang sempurna
2. Antarmuka berorientasi baris perintah

• Antarmuka berorientasi baris perintah diperkenalkan semasa kemunculan sistem pada tahun
1960
• Sistem pertama menggunakan antarmuka baris perintah yaitu mesin taip yang dikenal dengan
Tele Type (TTY)
• Pada antarmuka ini pengguna berinteraksi dengan sistem dengan cara menyusun perintah-
perintah secara baris demi baris
• Interaksi pengguna tergantung kepada penggunaan perintah-perintah yang berbentuk dialog
soal jawab
• Contoh aplikasi yang menggunakan antarmuka baris perintah adalah sistem DOS dan UNIX
4. Antarmuka Pengguna Grafik

• Antarmuka ini merupakan interface pengguna yang menggunakan

visual seperti grafik, icon dan animasi yang mewakili komponen-
komponen antarmuka tersebut
• Antarmuka ini pertama kali diperkenalkan pada tahun 1980
• Antamuka pengguna grafik yang pertama digunakan secara komersial
adalah sebuah sistem yang dikenal dengan nama 8010 star information
pada tahun 1981 yang diperkenalkan oleh Xerox corporation
4. Antarmuka Pengguna Grafik

• Antarmuka ini menggunakan metafora dunia sebenarnya dan menyediakan

interaksi berdasarkan kepada setiap tingkat, icon, menu dan pointer
(window, icon, menu dan pointer)
• Interaksi di dalam antarmuka ini merupakan interaksi secara manipulasi
langsung dimana pengguna berinteraksi dengan visual objek-objek melalui
mouse atau piranti-piranti pointer yang lain
• Point dan click, drag dan drop dan menggerakkan objek merupakan ciri-ciri
utama dalam antarmuka pengguna grafik
5. Antarmuka Penguna Masa Depan

• Generasi anarmuka pengguna pada masa akan datang menuju kepada penambahan unsur-
unsur animasi objek dan audio (suara dan bunyi)
• Unsur tiga dimensi juga telah ditambah pada antarmuka pengguna modern dalam
pembentukan sekitar dunia maya
• Antarmuka ini berorientasi kepada objek daripada segi pengolahan data dan fungsi
• Interaksi yang digunakan lebih berbentuk bahasa dan membenarkan penggunaan input yang
tidak berformat
• Antarmuka ini memperbolehkan komputer membuat analisis aktifitas pengguna
• Contohnya embodied interaction, 3D VR, sensing affect, sensor network, cyborg dan AR
PRINSIP USER
INTERFACE
Prinsip User Interface

• 1. User compatibility • 7. Simplicity

• 2. Produk compatibility • 8. Direct Manipulation
• 3. Task compatibility • 9. Control
• 4. Work flow compatibility • 10. WYSIWYG (what you see
• 5. Concistency is what you get)
• 6. Familiarity • 11. Flexibility
1.
Kompatibilitas
pengguna
1. Kompatibilitas pengguna
• Antarmuka merupakan penghubung antara pengguna dengan sistem, untuk itu perancang harus
mengenal karakteristik penggunanya terlebih dahulu, mulai dari sifat
sampai kebiasaan manusia secara umum.
• Perancangan antarmuka haruslah berdasarkan pengguna, bukan perancang.
• Untuk itu teknik yang paling baik dilakukan dalam mengidentifikasi kebutuhan pengguna adalah
dengan melakukan survey
2. Kompatibilitas produk
• Sistem atau aplikasi yang dikembangkan harus sesuai
dengan proses bisnis atau sistem sebelumnya.
• Seringkali sebuah aplikasi menghasilkan hasil yang berbeda dengan sistem manual atau sistem
yang ada.
• Contoh : aplikasi sistem melalui antarmuka diharapkan menghasilkan report/laporan
serta informasi yang detail dan akurat dibandingkan dengan sistem manual
3. Task Compatibility
• Sebuah antarmuka aplikasi harus mampu membantu pengguna dalam menyelesaikan tugasnya.
• Semua pekerjaan serta tugas-tugas pengguna harus diadopsi di dalam aplikasi tersebut melalui antarmuka.
• Aplikasi yang dikembangkan dirancang sehingga pengguna disajikan dengan pilihan yang mudah dan proses
berpikir dari tugas-tugas pengguna dipindahkan dalam aplikasi melalui antarmuka.
• Contoh: pengguna hanya klik setup, tekan tombol next, next, next, finish, ok untuk menginstal sebuah perangkat
lunak
4. Work Flow Compatibility
• Sebuah sistem atau aplikasi sistem dikembangkan dengan mengapdopsi cara kerja sistem manualnya dan di
dalamnya terdapat urutan kerja dalam menyelesaikan pekerjaan.
• Untuk itu perancang harus memikirkan urutan-urutan pekerjaan yang akan diimplementasikan dalam sistem.
• Hal ini diperlukan agar pengguna tidak mengalami kesulitan dalam menyelesaikan pekerjaannya karena
kebingungan ketika urutan pekerjaan yang ada pada sistem manual tidak ditemukan di dalam aplikasi.
• Disamping itu pengguna jangan dibingungkan dengan pilihan-pilihan menu yang terlalu banyak dan semestinya
menu-menu merupakan urutan dari runutan pekerjaan. Sehingga dengan workflow compatibility dapat
membantu seorang pengguna dalam mempercepat pekerjaannya.
5. Concistency
• Sebuah sistem harus sesuai dengan sistem nyata serta sesuai dengan produk yang dihasilkan.
• Konsistensi membantu pengguna untuk dapat menganalogikan dan memprediksi sesuatu yang sebelumnya belum pernah dilakukan
• Banyak perusahaan dalam menjalankan sistemnya menggunakan aplikasi sistem yang berbeda di setiap divisi dalam perusahaan tersebut.
Ada pula yang menggunakan aplikasi yang sama di divisi yang berbeda, sehingga seringkali keseragaman dalam menjalankan sistem tidak
diperhatikan.
• Oleh karena itu perancang harus memperhatikan hal-hal yang bersifat konsisten pada saat merancang aplikasi khususnya antarmuka. Seperti
penerapan warna, struktur menu, font, format desain yang seragam pada antarmuka di berbagai bagian, sehingga pengguna tidak mengalami
kesulitan pada saat berpindah posisi pekerjaan atau berpindah lokasi dalam menyelesaikan pekerjaan.
• Contoh: keseragaman tampilan toolbar pada word, excell, power point, access hampir sama
6. Familiarity
• Antarmuka sebisa mungkin didesain sesuai dengan antarmuka pada umumnya, dari segi tata letak,
model, dsb.
• Karena pada dasarnya manusia cenderung lebih mudah mengingat terhadap hal-hal yang sering
dilihatnya. Dengan begitu dapat membantu pengguna cepat berinteraksi
dengan sisem melalui antarmuka yang familiar bagi pengguna
• Konsep, terminologi dan pengaturan antarmuka harus yang dapat dipahami oleh pengguna dengan baik
agar pengguna tidak bingung saat berinteraksi
7. Simplicity
• Kesederhanaan perlu diperhatikan pada saat membangun antarmuka. Tidak selamanya antarmuka yang memiliki
menu banyak adalah antarmuka yang baik.
• Kesederhanaan disini lebih berarti sebagai hal yang ringkas dan tidak terlalu berbelit.
• Pengguna akan merasa lelah dan bosan jika pernyataan, pertanyaan dan menu bahkan informasi yang dihasilkan terlalu panjang dan berbelit.
• Pengguna lebih menyukai hal-hal yang bersifat sederhana tetapi mempunyai kekuatan/ bobot.

• Merancang antarmuka dengan bentuk yang sederhana, tanpa mengurangi fungsionalitas dari sistem/produk yang
dibangun
8. Direct Manipulation
• Direct manipulation adalah gaya/ragam dialog dimana aksi yang dilakukan pengguna dapat langsung terlihat pada tampilan objek pada layar monitor
• Pengguna berharap aplikasi yang dihadapinya mempunyai media atau tools yang dapat digunakan untuk melakukan perubahan pada antarmuka
tersebut. User ingin sekali aplikasi yang dihadapannya bisa disesuaikan dengan kebutuhan, sifat dan karakteristik pengguna tersebut. Selain itu, sifat
dari pengguna yang suka merubah atau mempunyai rasa bosan.
• Direct manipulation biasanya menyertakan alat penunjuk, seperti mouse, trackball, layaar sentuh dan menggunakan grafik dalam menampilkan objek
dan aksinya
• Contoh: pada program spreadsheet (ms excel) atau mengganti tampilan warna sesuai keinginan (missal pink) pada window bisa dirubah melalui
desktop properties, tampilan skin winamp bisa diubah, dll
9. Control
• Prinsip control ini berkenaan dengan sifat pengguna yang mempunyai tingkat konsentrasi yang berubah-ubah. Hal itu akan sangat mengganggu
proses berjalannya sistem. Kejadian salah ketik atau salah entry merupakan hal yang biasa bagi seorang 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 yang sudah dilakukan dapat dibatalkan

• Akan tetapi hal itu akan dapat mengganggu sistem dan akan berakibat sangat fatal karena salah memasukkan data 1 digit/1 karakter saja informasi
yang dihasilkan sangat dimungkinkan salah. Oleh karena itu perancang harus merancang suatu kondisi yang mampu mengatasi dan menanggulangi
hal-hal seperti itu.
• Contoh: “illegal command”, “can’t recognize input” sebagai portal jika terjadi kesalahan
10. WYSIWYG (what you see is
what you get)
• Sebagai contoh: pada saat pengguna mencetak dokumen menggunakan printer, hasil yang tercetak
dikertas merupakan informasi yang terkumpul dari data-data yang terlihat di layar monitor pada saat
mencari data.
• Hal ini juga perlu menjadi perhatian perancang pada saat membangun antarmuka. Informasi yang
dicari/diinginkan harus sesuai dengan usaha dari pengguna pada saat mencari data dan juga harus sesuai
dengan data yang ada pada aplikasi sistem.
• Jika sistem mempunyai informasi yang lebih dari yang diinginkan pengguna, hendaknya dibuat pilihan
(optional) sesuai dengan keinginannya.
11. Flexibility
• Fleksibel merupakan bentuk dari solusi pada saat menyelesaikan masalah.
• Apakah sistem yang dibangun dapat membuat pengguna:
• Mudah untuk mempelajarinya
• Efisien dalam melakukan pekerjaan
• Data mengakses informasi yang diperlukan, dsb
• Perancang dapat membuat berbagai solusi penyelesaian untuk satu masalah.
• Sebagai contoh adanya menu, hotkey, atau model dialog yang lainnya.
Hal-hal yang harus diperhatikan dalam
merancang antarmuka

• Apakah keinginan dan harapan pengguna

• Apa batasan dan emampuan fisiknya
• Bagaimana sistem penerimaan dan pemprosesan informasinya bekerja
• Apa yang dianggap menarik dan menyenangkan
• Bagaimana karakteristik dan batasan teknik dari hardware dan
software komputernya
Dokumentasi rancangan

• Membuat sketsa pada kertas

• Menggunakan piranti prototipe GUI
• Menulis tekstual yang menjelaskan tentang kaitan antara satu
jendela dengan jendela yang lain
• Menggunakan piranti bantu, seperti CASE (Computer-Aided
Software Engineering)
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
• 3. Perancangan format pesan:
• tata letak tampilan, keterangan tekstual secara terinci dan efisien inputing data
harus mendapatkan perhatian lebih
Urutan perancangan dialog

• 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 penangananya:
• Validasi pemasukan data
• Proteksi dari kesalahan
• Pemulihan dari kesalahan
• Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yanng terjadi pada waktu itu

• 5. Perancangan struktur data:

• tahapan selanjutnya adalah dengan menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung
fungsional komponen-komponen antarmuka yang diperlukan.
• Struktur data ini harus dipetakan langsng ke dalam model pengguna yang telah dibuat, sehingga keinginan pengguna dan
model sistem yang telah dirancang saling memiliki kecocokan satu sama lain
Referensi

• Dix, Alan, dkk. (2004). Human Computer Interaction, 3th. Inggris:Prentice Hall.
• Sudarmawan, dan Ariyus, Dony. (2007). Interaksi Manusia dan Komputer.
Yogyakarta: Penerbit Andi
• Santoso, Insap. (2010). Interaksi Manusia dan Komputer. Yogyakarta: Penerbit
Andi
• Shneiderman, Ben dan Plaisant, Catherine. (2010). Design the User Interface:
Strategies for Effective Human Computer Interaction. Amerika: Pearson