5 Dimensi dalam Perancangan Interaksi

Alvi Syahrina
Kelas Perancangan Interaksi
4 min readJun 13, 2020

“Bu, apakah untuk bisa melakukan perancangan interaksi, kita harus bisa perancangan visual?”

“Bu, saya nggak pinter desain grafis atau menggambar, apakah saya bisa melakukan perancangan interaksi?”

Pertanyaan seperti di atas beberapa kali saya dengar di kelas, terutama di awal perkuliahan.

Dari bayi skill gambar saya gak nambah bu.. (img from Pexels)

Saya mengajar di program studi Sistem Informasi di sebuah PTS. Dari nama program studinya saja bukan sebuah program yang fokus pada seni rupa atau desain. Sistem Informasi bisa dikatakan masuk dalam rumpun ilmu teknik atau computing. Sehingga wajar saja mahasiswa memiliki pertanyaan seperti di atas.

Barangkali ada teman-teman desainer yang membaca pertanyaan di atas, kalian mau jawab bagaimana? Tulis di komentar ya! :)

Perancangan interaksi sendiri dapat didefinisikan sebagai

“Penciptaan dialog antara seseorang dan produk, sistem, atau layanan. Dialog ini bersifat fisik dan emosional dan terbentuk dari kombinasi antara bentuk, fungsi, dan teknologi yang dialami seiring waktu.

(translated from John Kolko, 2011)

Atau dapat dibahasakan seperti ini:

Jadi ada produk nih (atau bisa juga dalam bentuk sistem atau layanan), kemudian ada pengguna yang berdialog dengan produk secara fisik maupun emosional. Dialog secara fisik maupun emosional ini terbentuk dari kombinasi antara bentuk, fungsi, dan teknologi milik si produk; dan dialami seiring dengan waktu.

Nah perancangan interaksi itu kita merancang dialog dengan cara memanipulasi rancangan pada produk. Pengguna pasti berpengaruh besar terhadap bagaimana dialog ini nanti akan tercipta, thus, berpengaruh pada rancangan produknya.

Nah, si perancangan interaksi sendiri punya lima dimensi. Bentar, dimensi gimana maksudnya? 2-D? 3-D?

Iya, bisa digambarkan seperti kita punya sesuatu, yang punya lima dimensi.

Kalau kotak adalah dua dimensi, artinya dia punya sesuatu di sumbu x dan y; sementara kubus adalah tiga dimensi, artinya dia punya sesuatu di sumbu x, y, z; maka perancangan interaksi harus punya sesuatu di sumbu x, y, z, a, b.

Author/Copyright holder: Samir Dash.

Apa saja dimensi dalam perancangan interaksi?

Menurut GC Smith, dimensi perancangan interaksi terdiri dari:

  1. Words
  2. Visual Representations
  3. Behaviour
  4. Physical Objects or Space
  5. Time

Ambil sebuah contoh nih, halaman webnya Sorabel buat kita bedah dimensinya.

Sorabel.com website

1. Words

Dimensi ini berkaitan dengan semantik atau arti/makna kata sebuah rancangan. Dalam rancangan interaksi kita bisa menambahkan kata (words) di dalamnya; atau tidak. Namun prinsipnya adalah bagaimana kita memberikan makna yang kita inginkan ke pembaca.

Kata atau words dapat mempengaruhi persepsi dan aksi pengguna. Jadi penting banget buat desainer untuk memilih kata yang sesuai, tidak ambigu, mudah dipahami, dan juga membawa branding yang tepat untuk suatu produk. Ini juga kenapa kita mengenal adanya UX Writer di profesi desain.

Di web Sorabel kita bisa lihat dimensi ini pada kata-kata dalam banner di bagian atas, kata yang dipilih cukup singkat dan terdapat Call-to-action.

2. Visual Representation

Tipografi, elemen grafis, icon, gambar dan semua elemen visual yang tidak termasuk kata di dalamnya adalah termasuk pada dimensi visual representation.

Pada web Sorabel kita ambil contoh pada banner “Tetap Nyaman dengan baju pilihan Sorabel”. Di sana kita lihat pemilihan tipografinya bersifat non-formal, ceria, dan mengambil warna-warna khas nya Sorabel. Ada juga icon-icon pada menu di sebelah kanan maupun di atas yang khas nya Sorabel. Kemudian, dengan representasi visual kita juga bisa membedakan mana yang bisa kita klik, mana yang tidak.

3. Physical objects or space

Sebuah rancangan interaksi tidak bisa terlepas dari teknologi apa dan di mana digunakannya. Kita harus tau apa kelebihan dan kekurangan teknologi tersebut, bagaimana bentuk fisiknya, di mana dia di gunakan.

Sebagai contoh, pada tampilan website Sorabel akan dilihat konten hanya mengambil satu kolom saja, sementara kanan dan kirinya kosong. Hal ini dikarenakan Sorabel ingin mengoptimasi webnya untuk tampilan mobile web. Pada tampilan mobile web, interaksi user yang paling mudah adalah scrolling, sehingga website juga menggunakan infinite scroll.

4. Time

Dimensi time atau waktu adalah hal-hal yang terkait dengan: konten yang berubah seiring dengan waktu, seperti video, animasi, suara; tentang berapa lama waktu yang dibutuhkan user untuk memproses ketiga dimensi yang disebutkan di atas; atau tentang seberapa lama user menyelesaikan sebuah tugas.

Pada website Sorabel, ketika kita menekan button “Beli” akan muncul respon “Barang sudah masuk dalam keranjang”.

5. Behaviour

Setiap elemen pada rancangan akan memiliki behaviour atau perilaku masing-masing ketika ada input user.

Sebagai contoh, search bar akan menampilkan placeholder untuk input teks apabila di-klik; icon kategori akan membawa ke halaman kategori produk; dan sama seperti di atas, button beli akan memunculkan respon “Barang sudah masuk dalam keranjang”.

Nah, setelah kita memahami ternyata pada perancangan interaksi terdapat empat dimensi lain selain representasi visual, bagaimana menurut teman-teman tentang kegalauan mahasiswa tadi? Apakah seseorang tidak bisa membuat perancangan interaksi apabila tidak bisa desain grafis atau visual?

Kalau saya sendiri akan menjawab bahwa punya skill dalam desain visual itu sangat menguntungkan dalam merancang interaksi, tetapi perancangan interaksi bukan hanya tentang desain visual saja: kita harus bisa merancang kata-kata, memahami teknologi yang akan kita gunakan, merancang alur, dan merancang behaviour sebuah sistem.

--

--