1

USER INTERFACE
A. TUJUAN
Setelah mempelajari Modul ini, siswa dapat:
1. Menjelaskan tujuan dan manfaat antar muka pengguna dengan benar
2. Menjelaskan prinsip desain antar muka dengan benar
3. Memahami interaksi pengguna dalam user interface.
4. Menyajikan rancangan user interface dengan benar

B. PETUNJUK PENGGUNAAN MODUL

1. Awali setiap aktivitas dengan do’a, semoga berkah dan mendapatkan kemudahan.
2. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur.
4. Tanyakan kepada guru apabila ada hal-hal yang kurang jelas.

C. Materi
1. Tujuan antarmuka (interface) pengguna
- Menyesuaikan antar muka pengguna dengan tugas.
- Membuat antar muka pengguna menjadi efisien.
- Memberikan arus balik yang tepat kepada pengguna.
- Memunculkan pertanyaan-pertanyaan yang dapat dimanfaatkan.
- Memperbaiki produktivitas dari pengetahuan pegawai

2. Manfaat Antar Muka (Interface) pengguna

Manfaat User Interface untuk menghubungkan atau penterjemah informasi
antara pengguna dengan system operasi, sehingga computer dapat digunakan.
Dengan demikian, user interface bisa juga diartikan sebagai mekanisme inter-
relasi atau integrasi total dari perangkat keras dan lunak yang membentuk
pengalaman bekomputer.

3. Prinsip Desain Antar Muka

UI merupakan singkatan dari User Interface (antarmuka pengguna). User
Interface ini berhubungan dengan bagaimana pengguna mengontrol dan
mengoperasikan komputer. Ada banyak User Interface yang berhubungan
dengan fisik seperti tombol, layar, bidang, seleksi, dll. Kontrol sentuh seperti
 2

touchscreen dan kontrol suara seperti Voice Command. Bahkan, ponsel yang
memiliki kamera untuk melacak gerakan mata merupaka jenis User Interface
juga. Secara keseluruhan UI lebih terfokus kepada tampilan. Tujuan utama dari
UI adalah menampilkan interface yang memiliki keseragaman yang baik dari segi
warna, font, gambar dll.’
UI Design adalah bagaimana suatu website atau aplikasi yang dibuat terlihat
dan berbentuk seperti apa. Hal tersebut mencakup layout (tata letak), Visual
Design (desain visual) dan Branding. ranah utama dari user interface yang terdiri
dari interface design, grafis, icon, dan visual design.
User interface desain adalah desain komputer, peralatan, mesin, perangkat
komunikasi mobile, aplikasi perangkat lunak, dan situs web dengan fokus pada
pengalaman pengguna dan interaksi. Tujuan dari user interface design adalah
membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal
mencapai tujuan pengguna-apa yang sering disebut pengguna desain yang
berpusat. User interface design yang bagus memfasilitasi dan menyelesaikan
tugas di tangan tanpa menarik perhatian yang tidak perlu pada dirinya sendiri.
Desain grafis dapat dimanfaatkan untuk mendukung kegunaan. Proses desain
harus menyeimbangkan fungsi teknis dan elemen visual (misalnya, model mental)
untuk menciptakan sebuah sistem yang tidak hanya operasional saja tetapi juga
bermanfaat serta dapat disesuaikan dengan kebutuhan pengguna berubah.

4. Interaksi Pengguna
Pemilihan tipe interaksi yang tepat dapat memberikan efek yang baik terhadap
dialog antara user dengan komputer. Terdapat beberapa tipe interaksi yang
umum digunakan, yaitu :
1. Command Line Interface (CLI)
Merupakan bentuk dialog interaktif yang pertama digunakan dan masih
dipakai hingga saat ini. Dengan CLI, user memberikan instruksi secara
langsung kepada komputer menggunakan tombol fungsi, karakter tunggal,
command dalam bentuk singkat maupun panjang. CLI memungkinkan user
mengakses dengan cepat fungsi sistem dan beberapa tools.
2. Menu
Pada menu-driven interface , sekumpulan opsi / pilihan yang tersedia bagi
user ditampilkan pada layar dan dapat dipilh dengan menggunakan mouse
atau tombol numerik maupun alfabetik. Pilihan pada menu harus
merepresentasikan arti dan dikelompokkan berdasarkan suatu kategori
agar mudah dikenali dan memudahkan user memilih sesuai dengan tugas
yang akan dilaksanakan.
3. Natural language
Mungkin merupakan mekanisme komunikasi yang atraktif. Umumnya,
komputer tidak dapat mengerti instruksi yang dituliskan dalam bahasa sehari-
hari. Natural language dapat mengerti input tertulis (written input) dan suara
 3

(speech input). Namun masih ada kekurangan dalam hal ambiguity

(kerancuan) pada aspek sintaks dan semantik.
4. Q/A & query dialogue
Merupakan mekanisme sederhana untuk input pada beberapa aplikasi. User
diberikan serangkaian pertanyaan umumnya dalam bentuk jawaban ya/tidak
(Y/N), pilihan ganda atau dalam bentuk kode, dan dibimbing tahap demi
tahap selama proses interaksi. Interface ini mudah dipelajari namun terbatas
fungsinya.
5. Form-fills and spreadsheet
Form-fill utamanya digunakan untuk aplikasi pemasukan (data entry) dan
pencarian (data retrieval) data. Bentuk form-fill adalah berupa display yang
menyerupai selembar kertas dengan beberapa slot / field untuk diisi.
Spreadsheet adalah variasi dari form-fill. Spreadsheet terdiri dari sel yang
dapat berisi nilai atau formula.
6. WIMP interface (Windows, Icons, Menu, Pointers)
WIMP merupakan default interface untuk sebagian besar sistem komputer
interaktif yang digunakan saat ini terutama pada PC dan desktop workstation.

5. Perancangan Antar Muka

Merancang antarmuka merupakan bagian yang paling penting dari
merancang sistem. Biasanya hal tersebut juga merupakan bagian yang paling
sulit, karena dalam merancang antarmuka harus memenuhi tiga persyaratan:
sebuah antarmuka harus sederhana, sebuah antarmuka harus lengkap, dan
sebuah antarmuka harus memilki kinerja yang cepat.
Alasan utama mengapa antarmuka sulit untuk dirancang adalah karena
setiap antarmuka adalah sebuah bahasa pemrograman yang kecil: antarmuka
menjelaskan sekumpulan objek-objek dan operasi-operasi yang bisa digunakan
untuk memanipulasi objek.
Dalam proses pengembangan antarmuka, kita bisa atau mungkin saja tidak
bisa memisahkannya dari seluruh proses pengembangan sebuah produk.
Walaupun begitu, fokus dari dua proses tersebut sangatlah berbeda. Dalam
proses pengembangan antarmuka, fokus haruslah terletak pada elemen-elemen
antarmuka dan objek-objek yang pengguna lihat dan gunakan, dibandingkan
dengan kemampuan sebuah program. Elemen-Elemen dalam perancangan
antarmuka adalah
1. Mendefinisikan konsep
Mengumpulkan kebutuhan-kebutuhan pengguna dan mendefinisikan
desain secara konseptual.
2. Memvalidasi konsep
Mengevaluasi konseptual desain tersebut.
3. Merancang
Mengevaluasi prototype. Menandai dan memperbaiki masalah-masalah
yang ditemukan.
5. Pengembangan
 4

Melakukan pengujian secara berkala terhadap desain yang lebih dahulu

dibuat dan desain yang paling terakhir dibuat. Menandai dan memperbaiki
masalah-masalah yang ditemukan.
Proses-proses tersebut independen dari hardware dan software, sistem
operasi dan peralatan yang digunakan untuk merancang dan mengembangakan
produk. IBM Common User Access (CUA) interface design guide adalah yang
pertama kali mendeskripsikan proses perancangan antarmuka secara iteratif.
1. Mengumpulkan atau Menganalisa Informasi Pengguna
Proses perancangan antarmuka dimulai dari memahami
pengguna. Sebelum merancang antarmuka, kita harus mengetahui
masalah apa yang ingin pengguna selesaikan dan bagaimana mereka
melakukan pekerjaan mereka. Pengumpulan dan penganalisaan
aktivitas-aktivitas pada tahap pertama ini dapat dijabarkan dalam lima
langkah.
- Menentukan profil pengguna.
- Melakukan analisa terhadap task-task pengguna.
- Mengumpulkan kebutuhan-kebutuhan pengguna.
- Menganalisa user environments.
- Mencocokan kebutuhan tersebut dengan task.

2. Merancang Antarmuka
Dalam merancang antarmuka ada beberapa tahapan yang harus
dilalui, yaitu:
- Menjelaskan kegunaan dan tujuan.
- Menetapkan icon objek, views, dan representasi visual.
- Merancang objek dan jendela menu
- Memperbaiki rancangan visual.

3. Mengembangkan Antarmuka
Hal pertama yang bisa dilakukan dalam membangun antarmuka
adalah membangun prototype. Membangun prototype adalah cara
yang berharga dalam membuat rancangan awal dan membuat
demonstrasi produk dan penting untuk pengujian kegunaan
antarmuka. Dari prototype tersebut, perancang antarmuka dapat mulai
membangun antarmuka secara utuh. Ketika membuat prototype,
sangat penting untuk diingat bahwa prototype harus dapat di buang
setelah digunakan (disposable). Jangan takut untuk membuang sebuah
prototype. Tujuan dalam membuat prototype adalah untuk
mempercepat dan mempermudah dalam memvisualisasikan desain
alternatif dan konsep, bukan untuk membangun kode yang akan
digunakan sebagai bagian dari produk.
 5

4. Melakukan Validasi Terhadap Antarmuka

Evaluasi kegunaan adalah bagian penting dari proses
pengembangan, untuk mengetahui bagaimana tanggapan pengguna
terhadap antarmuka yang telah dibuat. Evaluasi ini akan digunakan
untuk memperbaiki kekurangan pada antarmuka yang telah dibangun.
Aturan emas dalam perancangan antarmuka:
- Buat Pengguna menguasai antarmuka.
- Kurangi user's memory load
- Buat antarmuka konsisten

D. RANGKUMAN
User interface desain adalah desain komputer, peralatan, mesin, perangkat
komunikasi mobile, aplikasi perangkat lunak, dan situs web dengan fokus pada
pengalaman pengguna dan interaksi. Tujuan dari user interface design adalah
membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal
mencapai tujuan pengguna-apa yang sering disebut pengguna desain yang berpusat.
Tujuan Antar Muka Pengguna (User Interface):
- Menyesuaikan antar muka pengguna dengan tugas.
- Membuat antar muka pengguna menjadi efisien.
- Memberikan arus balik yang tepat kepada pengguna.
- Memunculkan pertanyaan-pertanyaan yang dapat dimanfaatkan.
- Memperbaiki produktivitas dari pengetahuan pegawai

Terdapat beberapa tipe interaksi yang umum digunakan, yaitu :

1. Command Line Interface (CLI)
2. Menu
3. Natural Language
4. Q/A & Query Dialogue
5. Form-Fills and spreadsheet
6. WIMP interface

Elemen-elemen dalam perancangan antarmuka:

1. Mendefinisikan konsep
2. Menvalidasi konsep
3. Merancang
4. Pengembangan

E. Tugas Praktikum
1. Desain Tampilan user interface berdasarkan DFD yang telah dibuat