3 Level Desain Aplikasi

Sebagai desainer UI-UX, ada banyak pertanyaan yang belum bisa saya jawab sampai saat ini.

Bagaimana membuat desain aplikasi yang bagus?

Itu salah satu yang belum bisa saya jawab.

Bagus tidaknya desain sangat beragam parameternya, ada usability testing tentunya, namun itu belum mampu mengukur bagus-tidaknya desain. Ada parameter lain selain berfungsi dengan baik, seperti visual yang cantik, penggunaan yang lebih praktis. Selera, tingkat pendidikan, pendapatan, gaya hidup pengguna yang dirangkum dalam persona, merupakan hal yang sangat mempengaruhinya. Tak mungkin bisa menyenangkan semuanya, bagimu bagus belum tentu bagus untuk pengguna lainnya. Tapi paling tidak ada beberapa level desain aplikasi.

From unsplash.com

1. Fungsi

Level pertama sebuah desain antar muka, berfungsi dengan baik. Tentu saja. Maksudnya adalah, semua elemen mampu menjalankan fungsinya dengan benar, sesuai aturan yang lazim digunakan. Sehingga pengguna bisa mengoperasikannya karena kebiasaan. Biasanya, desain menggunakan desain bawaan (template) dari platform asalnya. Android menggunakan Material Design, iOS menggunakan Apple UI design sesuai panduannya.

Interaksi dijalani dengan pakem pabrikan, semua fungsi bekerja, lantas rampung. Tak ayal membuat banyak aplikasi mempunyai experience penggunaan yang serupa (kalo tak boleh dibilang sama). Tak ada personalisasi, semua selesai setelah fungsi. Aplikasi menjadi terkesan monoton, hanya berganti warna.

Yang kurang dari level ini adalah personalisasi. Benar bahwa semua telah berfungsi, dengan baik, tapi kesamaan dengan yang-lain-lah membuatnya seperti kehilangan nyawa. Nirkarakter.

From unsplash.com

2. Cantik

Level kedua setelah fungsi, beauty. Kesan pertama harus begitu menggoda, selanjutnya terserah pengguna.

Sama-sama berfungsi tapi ada nilai tambah dari unsur seni. Mulailah personalisasi, pembeda dengan yang lain dari sisi tampilan. Diolah sedemikian rupa agar cantik dan rupawan.

Ada beberapa elemen yang membuat suatu desain UI cantik, pun fungsional:

  • Typography

Huruf yang pas. Pas dalam estetika dan fungsi. Tidak terlalu besar dan tidak terlalu kecil. Terlalu kecil menyebabkan sulit terbaca, terlalu besar menyebabkan penuh menyesakkan mata. Penekanan, mana yang harus lebih besar dan mana yang seharusnya kecil. Lebih besar berarti lebih penting, pun menentukan eye tracking dalam menggambar arah baca. Sama dan serupa akan mengakibatkan ampangnya hirarki.

Perbedaan antara media digital dan cetak begitu besar, maka aturan keduanya tentu berbeda. Beberapa referensi ukuran dan jenis huruf untuk media digital dapat dilihat di bawah:

- Publikasi Luz Rello sesoal ukuran huruf untuk media digital http://pielot.org/pubs/Rello2016-Fontsize.pdf

- Case studies penggunaan jenis dan ukuran huruf https://docs.google.com/spreadsheets/d/1Vcehdh4SZT5RJhzZ0i-rjCRFX_HC2Lo94hbSqiqYblQ/edit#gid=1

- Cara penghitungan besar huruf https://www.smashingmagazine.com/2013/05/typographic-design-patterns-practices-case-study-2013/#ratio-of-headline-to-body-font-size

Sebagai pengantar pesan, huruf krusial peranannya. Pun sebagai objek estetis. Dibutuhkan negoisasi yang cair untuk membentuk koalisi keduanya, fungsi dan estetika.

  • Contrast

Penyusun ritme, penentu irama sekaligus pembuat suasana. Hadir untuk menjaga hirarki. Kontras tinggi untuk menarik perhatian, tentu untuk pemancing tindakan. Sebaliknya, kontras rendah menunjukkan hal yang dianggap kurang begitu penting.

Urutan kontras menunjukkan tingkat nilai setiap elemen bentuk dan fungsi. Lebih mencolok tentu yang diharapkan pengguna melakukan tindakan. Terlalu terang menyilaukan mata, terlalu gelap memberatkannya. Tombol dibuat sedemikian rupa hingga muncul, sengan tujuan pengguna melakukan perbuatan yang diinginkan.

Permainan warna yang nampak sederhana namun sangat besar fungsi dan efeknya. Pengertian mengenai kontras lebih lanjut bisa dilihat di https://en.wikipedia.org/wiki/Display_contrast#Methods_of_measurement

Pengukurannya dapat dilakukan dengan berbagai metode:
- https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll
- https://github.com/getflourish/Sketch-Color-Contrast-Analyser 
- http://webaim.org/resources/contrastchecker/

Penerapan yang tepat dapat menyingkat waktu dan tenaga pengguna. Ujungnya, membantu pengguna menyelesaikan masalahnya.

  • Balance

Keseimbangan dalam ruang. Ruang nafas, zona istirahat untuk mata sekaligus penentu arah baca. Semakin luas makin lega pula penglihatan, semakin jelas pula tindakan apa yang diharapkan. Fokus kepada tujuan. Minusnya, semakin panjang konten, semakin lebar ruang, semakin panjang pula layar yang memuat. Terutama pada aplikasi telpon genggam. Butuh kejelian ekstra untuk menempatkan komponen utama pada porsinya dan menyimpan komponen penunjang untuk menciptakan ruang. Memfokuskan tindakan.

Pun setiap peletakan harus punya alasan. Karena tindakan pengguna selalu hasil dari penglihatan, peletakan semua elemen harus berkesinambungan membentuk pola. Pola baca (scanning pattern) dari setiap elemen visual yang ada, ujungnya pengguna melakukan tindakan.

Ada beberapa teori yang sering digunakan, berikut referensinya:

https://www.nngroup.com/articles/eyetracking-tasks-efficient-scanning/
- Contoh dalam Usability testing https://www.trymyui.com/site/example
- Contoh Eye Tracking studies http://www.marketingprofs.com/charts/2014/25226/eye-tracking-study-how-consumers-use-mobile-apps
- Struktur penyusunan dengan Golden Ratio https://alistapart.com/article/content-out-layout
- http://gazecapture.csail.mit.edu/cvpr2016_gazecapture.pdf

From unsplash.com

3. Personalisasi

Level terbaik. Dalam level ini desain mampu menyederhanakan, tetap cantik, dan mampu memberi nilai lebih dalam setiap fungsi. Rancang antar muka (UI) tak mungkin bisa lepas dari rancang pengalaman (UX). Keduanya saling mengisi, saling bergantung. Kalau UI itu wajah yang bisa dilihat, UX itu perangainya, watak, sifat, atau karakternya. Keduanya saling terkoneksi, UI “Nyata”-nya, UX secara “Ghaib”nya.

Beberapa kasus di bawah sebagai contoh.

1. Aplikasi transportasi

Pengguna membuka aplikasi tentu untuk memesan tumpangan.

Biasa: memasukkan alamat untuk memberitahu posisi.

Bagus: auto detect lokasi.

Terbaik: sistem sudah tahu posisi, menawarkan tujuan dari kebiasaan pengguna berdasar pola waktu dan tempat

Dengan kemajuan teknologi, aplikasi mampu memanjakan pengguna, menyingkat kerja. Selalu selangkah lebih maju untuk tujuan yang pengguna tuju.

2. Aplikasi Penjualan Tiket

Biasa: satu arah, input lokasi manual

Bagus: mendeteksi lokasi bandara terdekat

Terbaik: mendeteksi lokasi, menawarkan tiket pulang.

Personalisasi menambah kedekatan dengan pengguna. Meringkas waktu pakai dengan menangkap pola. Tak hanya sesoal visual, desain seharusnya mampu membawa pengalaman yang memudahkan pengguna, pun harus mampu membawa kemajuan bisnis bagi perusahaan.

Tak hanya urusan fungsi, personalisasi dapat menjumpai pengguna dalam urusan tampilan. Setiap detil fungsi selalu dicari tambahan nilai, 
“Apalagi yang bisa membantu pengguna?”

Beberapa referensi personalisasi:
http://littlebigdetails.com/, http://smallnudg.es/, http://sixux.com/, http://petithacks.com/, http://useyourinterface.com/, http://www.calltoidea.com/form/, https://capptivate.co/,

Selalu ada cara untuk menambah nilai yang menguntungkan bagi pengguna. Bahkan sekecil efek animasi tombol pun memberi pengalaman beda bagi pengguna. Apalagi yang memperingkas kerja, menyederhanakan langkah. Makin ringan kerja, makin singkat tahapan, makin disukai pula oleh pengguna.


Namun membangun desain aplikasi sebuah produk yang bagus bukan perkara mudah. Butuh waktu dan tenaga. Seperti membuat rumah, diawali dari pondasi hingga ke genteng. Berawal dari MVP hingga tak berhenti berinovasi.

Dari sekedar berfungsi, cantik, hingga mampu memberikan personalisasi. Bukan semata kerja desainer, tapi melibatkan seluruh tim untuk berkontribusi. Periset, project manager, developer, juga product owner, bekerja bersama membangun aplikasi untuk memudahkan pengguna.


Sebuah kerja yang tak ada habisnya, selalu ada kemungkinan untuk berubah lebih baik. Tak harus rampung satu waktu, ketiganya seperti anak tangga. Satu persatu dinaiki untuk tujuan yang pasti, kepuasan pengguna.

Hingga pada waktunya, ketika pengguna membutuhkan sesuatu, yang pertama diingat, dibuka, digunakan, adalah aplikasimu.

You nailed!


“Don’t make customers happy. Make happy customers.” Dharmesh Shah