Mengoptimalkan Potensi Ekshibisi Visual Melalui Konsep Desain UI/UX

oleh Joshua Atmaja

Pengertian UI/UX
UI atau User Interface adalah proses designer membuat sebuah antarmuka pada software atau device yang terkomputerisasi (contoh : apple watch, ipod, ipod touch, walkman, dll), berfokus terhadap tampilan dan bentukan gayanya. UX atau User Experience adalah proses dimana sebuah tim membuat produk yang menyediakan meaningful and relevant experiences kepada penggunanya.

UI bisa dibilang sebuah botolnya atau bentuk tampilannya, sementara UX adalah pengalaman/hal yang dirasakan oleh penggunanya


Dapat disimpulkan, kalau UI dan UX merupakan satu hal yang berbeda, namun UI/UX adalah satu kesatuan dan tidak bisa dipisahkan.
UX design scopenya sangat besar

Warna kuning : Interaction design,
Warna coklat : Experience design

Desain interaksi adalah adanya komunikasi dua arah antar pengguna dan aplikasinya; harus dipikirkan secara benar2 kepada usernya. Contoh design interaksi: masukin pin nih ke ATM, kalau apliaksi/ATM tsb menjawab input yang diberikan maka itulah interaksi.


User Experience tidak hanya tampilan aja. Ada banyak hal, seperti digunakan untuk membuat sebuah pengalaman pengguna, bisa dengan membuat penggunanya mengeluarkan emosinya.


“T-Shaped Person” digunakan oleh UX designer!


UX designer dapat menguasai berbagai jenis hal (variety of skills), tetapi harus punya hal yang didalaminya (skill depth).

Misal : Ada seseorang yang handal dalam mempresentasikan makanan agar keliatan cantik. Di sisi lain, ada orang yang handal dalam membuat makanan enak. Percuma dong kalo kita bagus dalam mempresentasikannya tapi tidak enak.


Design Thinking


Design Thinking dibutuhkan dalam merancang UI/UX.
Kenapa harus design thinking? Karena dalam menjalankan perancangan sampai menjadi sebuah produk ini ga selamanya lurus, pasti bolak balik kembali lagi alias non-linear process

Design Thinking dimulai dari :

Kita harus menemukan titik tengah antara :

  1. Empathize
    • Dimulai dengan riset kepada user/pengunjung (apakah mahasiswa, dekan, dll). Kita juga dapat memposisikan diri menjadi user
    • Bisa dimulai dengan kata “kenapa”, kenapa mau dateng ke pameran kita?, kenapa gini, kenapa gitu
    • Setelah riset, kita akan menemukan masalah utamanya lalu bisa dilanjut ke define
  2. Define
    menemukan/meran- cang konsep yang dihasilkan dari empathize
  3. Ideate
    menambahkan ide-ide pada konsep yang telah dibuat sebelumnya
  4. Prototype
    Mendesign hasil jadi, tetapi bukan barang jadi. Kenapa? Karena harus testing terlebih dahulu
  5. Test
    Perlu dilakukan test kepada user, menemukan hal yang bisa di improve dan kenyamanan bagi penggunany

Dengan Design Thinking, bisa aja mundur ke step sebelumnya karena ga sesuai dengan penggunanya. Jadi, perlu riset lagi atau kembali step lain (define, ideate, dll) sampai ketemu hasil terbaik. Design thinking adalah framework yang bisa menciptakan sebuah produk untuk lebih baik lagi kepada usernya. Capeknya jadi UX designer adalah harus bener-bener “user based/user sentrik”


Tidak hanya terhadap user,

  1. desirability (pengguna, pengunjungnya),
  2. feasibility (teknologinya, pameran ini mau ditampilin dimana? app sendiri atau domain web aja? karena pasti beda),
  3. viabilitinya (inget organisasi kita gimana, mau dibawa kemana?)

Dengan ini, kita menemukan solusi yang tepat biar user menemukan branding kita sebagai LFM (eksis), tapi ngga mengganggu ke pemakaian usernya.


Design Thinking ngga akan berhenti karena kita akan menemukan hal-hal yang baru dan kembali lagi ke stepnya tadi (testing, empathize, dll lagi). Goals-nya adalah mencari titik tengah dari feasibility, desirability, & viability. Saat Design Thinking selesai, berarti kita udah stop membuat produknya.

  1. Mulai dari kenapa
    “Kenapa harus virtual exhibition? Kenapa nggak yang lain?”
    Kalo bisa yaudah.
    Kalau gabisa harus apa?
    Semua pertanyaan empathize harus dimulai dari kata ‘kenapa’, baru bisa dilanjut pertanyaan lain. Dengan kenapa, kita akan mendapatkan alasan yang tepat dari suatu permasalahan dan akhirnya bisa menjadi inovasi dan solusi untuk produk kita
    Mulai dari ‘kenapa’ merupakan salah satu implementasi dari framework UX, yaitu five whys. Contoh :Kenapa gasuka? Karena ribet –> Ribet kenapa? Gabagus –> Gabagus kenapa? –> dan seterusnya.
  2. Lakukan riset!
    • Jangan sotoy alias sok tau
    • Benchmarking penting, tapi jangan lupa riset karena gabisa juga diterapin secara keseluruhannya
  3. Ga jago gambar, ga masalah
    Nggak jago gambar bisa jadi peluang juga loh untuk jadi UX designer
  4. Ingat! Kita mendesign untuk user, bukan untuk kita
    Kita bukan usernya, kita designernya
  5. Computer tools cuma kepake 5% di dalam proses
    • Apapun softwarenya ga begitu penting, itu masalah belakangan
    • Apa yang penting? Yang paling penting adalah skill communication, problem solving, design thinking-nya.
  6. Mulai dari user, selalu berakhir untuk user
    Kalau usernya masih kurang suka, cari design lain
  7. Desain UX itu ada lo-fi, med-fi, dan hi-fi. Boleh lansung hi-fi, tapi kalau ada perubahan, effortnya jauh lebih besar
    • Lo-fi : tombol2 disebelah mana
    • Hi-fi : udah ngasih warna dan lebih detail. Kalau ada revisi effortnya besar, tapi boleh aja. Inget effortnya lebih besar!

Tips and Trick Membuat Virtual Exhibition
Mau bikin pameran online?
Nih ada beberapa saran dari Kak Joshua, simak yuk!

  1. Ngga usah paksa user untuk log-in atau masukin data diri di awal pameran
    Kesel ga sih kalau mau ngecek harga di Tokopedia, tapi harus log-in dulu?
    Nah, sama halnya mau ke pameran tapi harus registrasi dulu di awal-awal. Kecuali : menuliskan nama panggilan, seperti ”halo kak, …” untuk menambah kesan “interaksinya” dan kalau ada hadiah tertentu yang butuh data diri dari pengunjungnya
  2. Autoplay video itu haram hukumnya
    Jangan play video secara otomatis karena bisa mengganggu user. Coba beri kebebasan sama penggunanya, mau liat atau ngga videonya
  3. Ngga perlu pakai background music yang keras. Kalau masih mau pakai, kasih user kontrol supaya bisa ngecilin/gedein volumenya

Ini menjawab 1 dari 10 (apa? Uristic??? wkwkwk) bisa diterapkan untuk virtual exhibition.
Ini menjawab nomor 3, untuk kasih user control dan kebebasan

  1. Selalu sedain “peta”, supaya user nggak nyasar
    Ga mungkin kan dalam pameran offline untuk balik lagi ke pintu masuk buat liat petanya?
    Maka dari itu,
    Selalu sediain peta di banyak tempat, supaya saat pindah ke mana-mana ngga perlu masuk ketempat yang sama dulu, langsung ke tempat yang ingin dituju
    Dari home mau kemana? -> karya 1 -> ada video 1,2,3, dll -> pas ke video 6 mau ke karya foto -> dan seterusnya
  1. Mobile first!
    Sebenarnya nggak memaksa untuk membuat versi mobile. Namun kalau membuat versi mobile-nya dulu akan lebih enak untuk bikin desktopnya karena pindah dari design yang kecil (mobile) ke besar (desktop). Selain itu, lebih banyak pengguna hp dari laptop

Mobile-First design : kalau buat dari mobile dulu lalu ke desktop. Kelebihannya adalah lebih enak karena pindah dari design lebih kecil ke besar

Responsif design : kalau buat dari desktopnya dulu lalu ke mobile
Mobile-First design : kalau buat dari mobile dulu lalu ke desktop. Kelebihannya adalah lebih enak karena pindah dari design lebih kecil ke besar
Responsif design : kalau buat dari desktopnya dulu lalu ke mobile

  1. Kalau pameran kurang afdol untuk dibuka di HP, kasih peringatan ke user untuk buka di desktop.
    Kasih tau user kalau buka pamerannya di desktop akan dapat full experiencenya.
    Bisa dengan kata-kata kaya gini nih :
    “Yuk pindah ke laptop untuk dapetin full experience nya!”
    Perlu diperhatikan juga :
    Pemilihan katanya antara “yuk pindah ke laptop untuk dapetin full experiencenya!”, daripada dengan kalimat yang bikin user harus mikir, misal “jangan buka di hp!”

Leave a Comment

Your email address will not be published. Required fields are marked *