INTERFACE &

DESIGN
Oleh : Muhammad Syahid, S.Kom., B. TECH., MMSI
Ruang Lingkup

Interaksi Manusia & Komputer

INTERAKSI MANUSIA DAN KOMPUTER

01 INTERFACE

02 PRINSIP INTERFACE

03 PRINSIP DESIGN
 Interaksi Manusia & Komputer
INTERFACE
ANTAR MUKA
INTERAKSI MANUSIA DAN KOMPUTER
INTERFACE /

Interaksi Manusia & Komputer

ANTAR MUKA
INTERAKSI MANUSIA DAN KOMPUTER

User Interface adalah visualisasi dari website, aplikasi

software atau device hardware dimana seorang user
berinteraksi dengan aplikasi atau website tersebut
serta bagaimana informasi ditampilkan di layarnya.

UI Merupakan gabungan dari :

- Desain Visual
- Desain Interaksi
- Infrastrktur Informasi
INTERFACE /
ANTAR MUKA (Lanj)

Interaksi Manusia & Komputer

INTERAKSI MANUSIA DAN KOMPUTER

Tujuan User Interface :

- Meningkatkan usability dan user experience dengan
mengkomunikasikan fitur fitur pada sistem.

Kenapa User Interface penting ...?

- Faktor penarik pengunjung pada website. Sehingga
meningkatkan traffic/pengunjung website.
INTERFACE

Interaksi Manusia & Komputer

COMPONENT
INTERAKSI MANUSIA DAN KOMPUTER

Komponen antar muka :

1. Pengguna / User = Sesuai Keinginan
2. Bahasa Perintah / Command Language
3. Umpan Balik / feedback
- Meyakinkan sistem sudah menerima perintah user
4. Tampilan Informasi = Menunjukan informasi
 Interaksi Manusia & Komputer
PRINSIP
INTERFACE
INTERAKSI MANUSIA DAN KOMPUTER
PRINSIP

Interaksi Manusia & Komputer

INTERFACE
INTERAKSI MANUSIA DAN KOMPUTER

Ada 17 Prinsip User Interface yang harus di pahami oleh

perancang sistem menurut (Deborah J. Mayhew, Dalam
General Principles Of UI Design). Untuk mendapatkan hasil
maksimal dari tampilan yang dibuat.
PRINSIP

Interaksi Manusia & Komputer

INTERFACE (Lanj)
INTERAKSI MANUSIA DAN KOMPUTER

1. User Compatibility ->User Interface harus sesuai

dengan user yang menggunakannya.
(Ex: Penggunaan warna cerah untuk anak, etc.)

1. Consistency -> Fungsi suatu perintah di dalam

user interface harus konsisten. Jangan membuat
command – command yang membuat user
ambigu. (Ex: Esc untuk Keluar, F1 untuk Help)

2. Familiarity -> Gunakan gambaran atau konsep

yang sudah familiar. (Ex: Penggunaan Icon &
Fungsi Perintah)
PRINSIP

Interaksi Manusia & Komputer

INTERFACE (Lanj)
INTERAKSI MANUSIA DAN KOMPUTER

4. Simplicity, Rancanglah user interface dengan tidak

menampilkan semua fungsionalitasnya & sembunyikan fungsi
yang tidak terlalu sering digunakan.

5. WYS-IWYG, (What you see is what you get) Tampilan harus

sesuai seperti yang diinginkan user. (Ex: fasilitas print preview
dan yang keluar di kertas harus sama dengan tampilan print
previewnya)
PRINSIP

Interaksi Manusia & Komputer

INTERFACE (Lanj)
INTERAKSI MANUSIA DAN KOMPUTER

Produk Compatibility
Task Compatibility
Workflow Compatibility
Direct Manipulation
Control
Flexibility
Robustness
Protection
Ease of Learning
Ease of Use,
 Interaksi Manusia & Komputer
PRINSIP
DESIGN
INTERAKSI MANUSIA DAN KOMPUTER
PRINSIP DESIGN

Interaksi Manusia & Komputer

INTERAKSI MANUSIA DAN KOMPUTER

Prinsip desain yang baik disebut User Centered Design (UCD).

User Centered Design (UCD) adalah Filosofi Perancangan dimana

user menjadi pusat proses pengembangan sistem yg interaktif
tidak hanya sebagai pengguna saja tapi dapat memberi
komentar perancangan, uji awal, evaluasi hingga tahap
implementasi sistem.
PRINSIP
USER CENTER

Interaksi Manusia & Komputer

DESIGN (UCD)
INTERAKSI MANUSIA DAN KOMPUTER

Prinsip UCD (J. Gould, 1995)

+ Fokus pada user (Interview, Survey, Workshop
Perancangan )
+ Perancangan Terintegrasi (Sistem bantuan,
Training, Dokumentasi User, Prosedur Instalasi, )
+ Pengujian Pengguna (Observasi, Evaluasi &
Feedback User)
ATURAN

Interaksi Manusia & Komputer

USER CENTER
DESIGN (UCD)
INTERAKSI MANUSIA DAN KOMPUTER

+ Perspective, Pengguna selalu benar, jika salah maka

masalahnya terdapat pada sistem
+ Instalasi, Dapat instalasi & Uninstall dengan mudah tanpa
konsekuensi negatif
+ Pemenuhan, Bekerja sesuai dengan yang diinginkan user
+ Instruksi, (Secara mudah : manual book, Help Online)
+ Usability, Menjadi penguasa soft & hardware dr sistem,
bukan sebaliknya
KONSEP

Interaksi Manusia & Komputer

USER CENTER
DESIGN (UCD)
INTERAKSI MANUSIA DAN KOMPUTER

Konsep UCD
+ Berpusat pada user
+ Berdasarkan Pengalaman User (User Experience)
+ Implementasi model pekerjaan user sesuai dengan sistem
PENGGUNA

Interaksi Manusia & Komputer

USER CENTER
DESIGN (UCD)
INTERAKSI MANUSIA DAN KOMPUTER

+ User = Orang yg akan menggunakan

+ End-User = Orang yg menggunakan sistem &
menyelesaikan tugasnya
+ Non-User = Orang yg menggunakan sistem untuk org
lain (Ex: administrator, installer,
demonstrator)
PENGGUNA
USER CENTER

Interaksi Manusia & Komputer

DSGN (Lanj..)
INTERAKSI MANUSIA DAN KOMPUTER

+ Stakeholder = Orang yang terpengaruh oleh sistem

(Ex: staf pemasaran, pembeli)
+ Usability Engineer = Orang yang akan menggunakan
(Ex:User Experience)
+ Tech. Staff dan Software Developer
Orang yang merinci spesifikasi, develope & buat prototype
sistem
PENGEMBANGAN

Interaksi Manusia & Komputer

SISTEM
INTERAKSI MANUSIA DAN KOMPUTER

4 Langkah pengembangan sistem Eason (1992),

+ Perencanaan
+ Perancangan
+ Implementasi
+ Pengelolaan Sistem
PENGEMBANGAN

Interaksi Manusia & Komputer

SISTEM
INTERAKSI MANUSIA DAN KOMPUTER
F.A.Q
ADA PERTANYAAN ? SILAKAN BERTANYA !
 Discussion
Time

Interaksi Manusia & Komputer

Jelaskan prinsip user interface di bawah ini :
(Presentasikan !)

DISKUSI 1. Produk Compatibility

TIME 2. Task Compatibility

3. Workflow Compatibility
INTERAKSI MANUSIA DAN KOMPUTER 4. Direct Manipulation
5. Control
6. Flexibility
7. Robustness
8. Protection
9. Ease of Learning
10. Ease of Use,
Reference

Pendahuluan IMK
+ Santoso, Insap; Interaksi Manusia Dan Komputer; Teori dan praktek,
Andi Offset, Yogyakarta, 2004.
+ Surbakti, Irfan; Interaksi Manusia Dan Komputer, Edisi Jurusan Teknik
Informatika-ITS,2006
+ Sudarmawan;Ariyus, Dony;Interaksi Manusia Dan Komputer, Andi
Offset Yogyakarta, 2007.
+ https://dinus.ac.id/repository/docs/ajar/IMK10-
Desain_User_Interface_oke.pdf