KERANGKA KERJA &

PARADIGMA INTERAKSI
By : Feri Alpiyasin
 Kerangka Kerja untuk Memahami Interaksi
Kerangka kerja  sebuah struktur yang digunakan untuk
mengonseptualisasikan suatu sistem, kerangka kerja dapat digunakan
untuk memahami cara manusia berinteraksi dengan komputer.

Siklus Tindakan Evaluasi/Eksekusi

Suatu konsep penyusunan tindakan - tindakan yaitu:

1. Goal : Kejadian yang diinginkan oleh pengguna
2. Eksekusi : Melakukan eksekusi atas suatu tindakan dalam dunia
nyata
3. Dunia Nyata : Tempat dimana pengguna dapat mengeksekusi
suatu tindakan dengan memanipulasi obyek
4. Evaluasi : Validasi pengguna atas suatu tindakan dan
membandingkan dengan gol yang telah ditetapkan sebelumnya
Siklus Tindakan Eksekusi / Evaluasi
 Siklus Tindakan Eksekusi / Evaluasi

• Tujuh Langkah Tindakan

 Jarak Pemisah Eksekusi (Gulf Of Execution)
Jarak Pemisah Eksekusi  Perbedaan antara keinginan pengguna dengan
apa yang dapat dilakukan oleh sebuah sistem atau seberapa jauh sistem
tersebut dapat mendukung tindakan yang akan dilakukan oleh pengguna.

• Contoh :
Pengguna yang sudah memformulasikan keinginan menggunakan menu
File dan memilih save.
Apakah antarmuka yang tersedia memungkinkan untuk melakukan
Tindakan (keinginan yang sudah di formulasikan) ?
Apakah di dalam menu File terdapat pilihan Save ?
Jika di dalam menu File tidak terdapat pilihan Save maka terdapat jarak
pemisah eksekusi antara keinginan pengguna dengan yang dapat
dilakukan oleh sistem.
 Jarak Pemisah Evaluasi (Gulf Of Evaluation)
Jarak Pemisah Evaluasi  Tingkat kesulitan yang dihadapi pengguna
untuk mengartikan status sistem dan seberapa jauh desain objek yang
dimiliki antar muka mendukung pengguna untuk menemukan dan
menginterpretasikan status sistem

• Contoh :
Pengguna sendang instalasi program (sistem informasi), tetapi pengguna
tidak diberitahu status proses instalasi, maka disini akan terjadi jarak
pemisah evaluasi.
Tujuh Langkah Tindakan dapat di gunakan untuk memformulasikan
pertanyaan – pertanyaan selama proses perancangan interaksi yang
bertujuan untuk memperkecil kedua jarak.
• Jarak Pemisah Eksekusi (Gulf Of Execution)
• Jarak Pemisah Evaluasi (Gulf Of Evaluation).

Menentukan fungsi suatu peranti ?

Menentukan Tindakan yang mungkin dilakukan ?
Menentukan pemetaan antara keinginan dan pergerakan fisik ?
Menentukan apakah sistem berada dalam status yang diinginkan ?
Menentukan pemetaan dari status sistem ke interpretasi ?
Menentukan status sistem saat itu ?
 Kerangka Kerja Interaksi
• Siklus tindakan eksekusi/evaluasi berfokus pada cara pandang
pengguna tentang interaksi.
• Komponen Utama:
 Sistem (S) : Menggunakan bahasa mesin (atribut komputasi yang
menunjukan status sistem).
 Pengguna (P) : Menggunakan bahasa tugas (aspek psikologis yang
menunjukan status pengguna).
 Masukan (M) : Menggunakan bahasa masukan
 Keluaran (K) : Menggunakan bahasa keluaran
 Fase Eksekusi Pada Siklus Interaksi

• Artikulasi: pengguna
memformulasikan sebuah gol yang
kemudian dinyatakan dalam
bahasa masukan.
• Pengerjaan: bahasa masukan
diterjemahkan ke dalam bahasa
mesin (dikerjakan oleh sistem)
• Penyajian: sistem menyajikan hasil
operasi, yang menggunakan
bahasa mesin, menggunakan
bahasa keluaran.
 Fase Evaluasi Pada Siklus Interaksi

• Berisi langkah untuk observasi dan artikulasi (pengguna mengartikan

hasil yang muncul di layar dan mencocokannya dengan gol semula dan
mencocokan dengan bahasa tugas pada atribut psikologis dengan
bahasa masukan.

• Contoh : Jika Pengguna ingin menggambar sebuah kotak, maka

pengguna harus menerjemahkan tugas tersebut ke dalam Bahasa
masukan yang di persentasikan oleh antarmuka sesuai dengan ragam
interaksi yang di miliki oleh sistem tersebut.
 Mengatasi kompleksitas

• Jika perancang ingin membangun sistem yang mudah digunakan:

1. Perancang harus memahami bagaimana pengguna melihat sesuatu

2. Perancang melihat dunia dengan kecamata pengguna

3. Perancang memahami apa yang dirasakan pengguna ketika

menggunakan program rancangannya.
• Untuk itu, perancang harus MEMAHAMI bagaimana manusia mengatasi
KOMPLEKSITAS suatu lingkungan kerja secara teknis.
 Model Mental

• Model mental adalah proses untuk menciptakan kerangka kerja

tentang suatu proses atau cara kerja suatu benda. Penyajian kognitif
suatu proses atau obyek yang menyatakan suatu perkiraan logis dan
dapat diterima tentang bagaimana suatu benda dibentuk atau
bagaimana benda berfungsi.

• Semakin dekat model mental yang diciptakan oleh pengguna dengan

model konseptual yang diciptakan oleh perancang, maka pengguna
akan merasakan kemudahan ketika berinteraksi dengan sistem.
 Model Mental
• Karakteristik Model Mental :
1. Tidak ilmiah : Berdasarkan perkiraan dan asal tebak.
2. Tidak lengkap : Menjelaskan aspek yang relevan.
3. Tidak stabil : Dapat dikembangkan dan beradaptai dengan konteksnya.
4. Tidak konsisten : Model yang sama sering tidak kompatibel satu
dengan yang lain.
5. Personal : Bersifat unik untuk setiap individu sehingga tidak bisa
diterapkan secara umum.
• Model mental sangat penting untuk perancangan interaksi sebagai
kerangka kerja dasar untuk menyelesaikan persoalan yang dihadapi.
 Model Mental
• Berdasarkan teori model mental normat
(1986) terdapat 3 bagian
1. Model Koseptual (model perancang) : suatu
model yang di ciptakan oleh perancang
Ketika merancang sistem/userinterface
2. Gambaran Sistem : sistem yang di ciptakan
oleh perancang dan sesungguhnya di lihat
oleh pengguna.
3. Model Mental (Pengguna) : model yang
dicipatakan oleh pengguna ketika berinteraksi
dengan suatu sistem/userinterface.
Contoh : Laman Situs Website

• Gambaran menyajikan sebuah

halaman situs web di ciptakan
oleh oleh seorang pengguna.
• Halaman web muncul pada layar
dan dilihat oleh pengguna
(gambaran sistem)
• Bagaimana dengan model
konseptual dan model mental ?
 Pemetaan

• Konsep yang menjelaskan tentang

bagaimana pengguna menghubungkan
satu benda dengan benda lain.
• Pemetaan bagian dari integral dari cara
orang berinteraksi dengan
lingkungannya.
• Contoh : pengguna dapat
menghubungkan pembakar pada
kompor dengan pemantiknya sehingga
pengguna dapat menyalakan salah satu
pembakarnya dengan benar.
 Jarak Semantik dan Artikulator

1. Jarak semantik
• Jarak antara fungsionalitas suatu peranti dengan yang sesungguhnya ingin
pengguna lakukan.
• Pengguna dapat memahami hubungan (pengguna berinteraksi dengan
peranti/system)
2. Jarak artikulator
• Adanya jarak antara kemampuan fisik suatu piranti dengan fungsi yang
sesungguhnya
• Jarak artikulator kecil pengguna lebih mudah mengartikan kenampakan suatu
sistem.
• Dapat digunakan untuk memahami tingkat kesukaran yang dihadapi pengguna
Ketika menggunakan rancanganya.
 Affordance

• Sebagai salah satu aspek perancangan

suatu objek yang menunjukan tentang
cara suatu objek yang digunakan.
• Contoh : permukaan layar tampilan
tidak hanya penting untuk
menginterpretasikan Tindakan
pengguna, tetapi juga penting bagi
pengguna untuk memahami prilaku
antarmuka
 Paradigma Interaksi

• Terdapat tiga paradigma dominan dalam perancangan konseptual dan

visual suatu antarmuka (userinterface)

1. Antarmuka Berpusat Pada Implementasi (BPI) : Didasarkan pada

Pemahaman tentang cara bekerjanya suatu benda

2. Antarmuka Metaforik : Didasarkan pada Intuisi tentang cara bekerjanya

suatu benda

3. Antarmuka Idomatik : Didasarkan pada Pembelajaran tentang cara

bekerjanya suatu benda
 Paradigma Interaksi

1. Antarmuka BPI : untuk menunjukan bagaimana pengkat lunak dibangun, yaitu satu
tombol untuk satu fungsi, satu dialog untuk satu modul dan perintah proses yang
berlangsung secara tepat menunjukan struktur data dan algoritma yang digunakan
Contoh : roda gigi, tuas, dan katub di dalam sebuah mesin
2. Antarmuka Metaforik : Bergantung pada hubungan intuitif yang dibuat pengguna
pada saat mereka melihat simbol visual dari satu komponen antarmuka dengan
fungsinya.
Contoh : tombol toolbar, ikon berkas, simbol gunting
3. Antarmuka Idomatik : perancangannya didasarkan pada cara pengguna belajar
sesuatu dan menggunakan berbagai idiom.
Contoh : Polisi tidur, jago merah atau ringan tangan.
Perancangan Antarmuka dapat melihat kebanyakan elemen antarmuka grafis yang
intuitif sesungguhnya merupakan idiom visual.
Contoh : hyperlink, dropdown, penutup kotak, pemisah layar
TERIMA KASIH