“A focused man working on a sticker-covered laptop in a coffee shop” by Tim Gouw on Unsplash

Hal kecil yang jangan dilupakan oleh Frontend Developer

Ada beberapa hal kecil yang biasa terlewatkan oleh seorang Frontend Developer. Meski terkadang hal tersebut tidak terlalu penting, tapi sangat berdampak ke pengalaman pengguna secara langsung. Apa sajakah hal kecil tersebut

Atribut alt di image

Yaya ini banyak yang bilang kurang penting, tapi sebenernya ini sangat berguna ketika agar user tidak bingung dengan gambar yang kamu tawarkan. Maksudnya?

Mari kita lihat contoh dari Medium.

Contoh gambar yang tidak diberikan atribut alt. How can you describe this without `alt` and image caption?

Ini gambar di medium yang sengaja saya ganti resource image. Gambar tidak berhasil terload bisa karena gambar tersebut sudah terhapus, ter-block (oleh blocker), atau sudah dipindahkan.

Untung nya di Medium, meskipun tidak memberikan atribut alt, tapi bisa menampilkan caption dari gambar yang ada (seperti yang saya lakukan diatas). Tapi bagaimana bila ‘kebetulan’ si user tidak memberikan caption, dan gambar gagal di load?

Gambar yang diberikan tag alt

Bagaimana bila seperti diatas?

word-break

Never trust user input! Ini yang sering saya ingat ketika membuat sesuatu yang melibatkan user nya. Apa yang terjadi bila kita tidak men-set word-break?

text tanpa word-break

Apa solusinya? Bisa text di overflow, atau jika saya biasanya menset word-break bernilai break-all untuk element yang berpotensi “dikerjain” oleh user.

perbedaan tidak menggunakan word-break dan menggunakan word-break
Silahkan bereksperimen! https://codepen.io/anon/pen/GQrMqo

Human Friendly error message

Terkadang ada sesuatu yang terjadi diluar dugaan. Misal salah satu nya gagal merequest ke endpoint. Penting untuk memberitahu user bila ada sesuatu yang tidak beres. Dan tentu nya dengan pesan yang mudah dimengerti oleh manusia.

Misalnya seperti ini:

Anggep aja saya buat error si Google. Ini bukan kejadian yang sebenearnya dan hanya rekayasa

TypeError: Failed to fetch merupakan pesan error default dari promise (via catch) bila request yang dikirimkan gagal. Apakah user tau maksud dari pesan tersebut?

Misalnya ketika si user mengetik kata kunci di input field, lalu ketika menekan Enter, muncul pesan error tersebut. Apakah mereka tau maksud dari error tersebut? Dan apa yang harus mereka lakukan?

Pesan ketika client gagal merequest ke backend

Notifikasi error diatas menandakan bahwa ada sesuatu yang error. Jadi user tidak heran bila “konten gagal dimuat”. Contoh diatas lumayan mudah dimengerti, tapi tidak memberikan action yang cocok untuk user. Apa yang harus saya lakukan ketika konten gagal dimuat?

Ketika error terjadi di Tokopedia

Tokopedia pun memberikan pesan error yang lumayan mudah dimengerti. Ditambah mereka menampilkan tombol close dan ok. Tapi apa yang harus saya klik? Close kah? Ok kah?

Ketika saya klik close, tidak terjadi apa-apa. Ketika saya klik ok juga tidak terjadi apa-apa. Apa yang harus saya lakukan? Dicoba kembali nya itu seperti apa?

The winner is…..

Pesan error di Facebook

Yaaa. Dia menampilkan pesan error dan “hal yang harus dilakukan”, dan “sesuatu yang harus dilakukan ketika kita mengklik tombol “tutup”. Hanya tombol “tutup”. Karena ya emang itu tombol yang harus diklik

Lalu ketika kita sudah mengklik tombol Tutup, lalu membuka kembali (atau bahasa enggak kaku nya “Refresh”) tab browser saya, apa yang terjadi? Masih error kah? Atau sudah tidak menampilkan pesan error tadi?

Dan pesan error yang paling mengerikan adalah MEDIUM! Iya medium, platform tempat saya menulis tulisan ini. Tapi saya sudah terlanjur sayang dengan Medium, hahaha. Mari kita lihat pesan error nya.

Pesan error di Medium — why so evil?

Kalian tau apa yang terjadi ketika saya mengklik tombol OK atau Close dipojok kanan atas? REDIRECT TO HOME! Ini bikin kaget, meskipun Medium sudah menyimpan draft yang saya tulis.

Coba bayangin, ketika sudah menulis panjang lebar, tiba-tiba muncul error tersebut, dan ketika klik OK atau Close, ngeredirect ke HOME?

Kesimpulan nya: Buat pesan error yang mudah dimengerti oleh user, actionable, dan ramah.

Ada pesan error, bagus. User enggak bingung dengan sesuatu yang bermasalah

Ada pesan error dan mudah dimengerti pesan nya, lebih bagus. User tau “masalah nya apa”, dan (mungkin) bisa meng-tweet atau mengirim pesan ke contact yang ada

Ada pesan error dan mudah dimengerti pesan nya, memberikan instruksi tentang “Apa yang harus dilakukan”, sangat bagus. Ini enggak usah dijelasin lah ya

Ada pesan error dan mudah dimengerti pesan nya, memberikan instruksi tentang “Apa yang harus dilakukan”, dan ramah (SETIDAKNYA KASIH TAU LAAAH KALAU MAU REDIRECT!!!! Atau ketika “actionable” tersebut sudah kita lakukan tapi masih error, munculkan lah form feedback/report. Biarkan user curhat apa yang mereka keluhkan). Ini the best. Meskipun ada “effort lebih”, tapi pasti worth it.

Enggak bikin pesan error, karena yakin kode yang ditulis enggak bakal error? Ini mantap jiwa. Hahaha. Selevel Facebook aja udah wanti-wanti membuat pesan error 😝

Empty State

Sebenarnya empty state enggak terlalu penting, tapi menjadi penting untuk growth. Maksudnya?

Halaman “Pesanan Saya” di Traveloka. Not maximize empty state, but everthing (insya Allah) will be okay while we click link described by user onboarding

Oke memang saya tidak memiliki pesanan. Tapi mengapa saya mengunjungi halaman ini? Mungkin karena saya ‘merasa’ pernah memesan, dan mungkin karena sudah lama lupa tidak dibayar jadi expired, dan tidak muncul lagi disini.

Terus? Yaudah. Mau ngapain lagi? Close halaman? Untung disitu ada “User Onboarding” — Yeaaah I like it! — Yang menjawab pertanyaan saya mengapa saya mengunjungi halaman tersebut, jadi yaa mungkin mengklik link “Daftar Pembelian” adalah pilihan yang tepat.

Halaman Pesanan Saya di Gramedia Online. Saya tidak punya pesanan, oh yaudah.

Ya baik ketika saya klik ikon (yang menurut saya keranjang) ataupun mengakses langsung halaman “Pesanan Saya”, karena saya tidak memiliki pesanan, jadi ada pesan Anda belum mempunyai Pesanan.

It’s not bad. Karena memang saya tidak memiliki pesanan.

Bagaimana bila seperti ini?

Halaman Keranjang Belanja di Bukalapak. Jadi saya harus klik tombol tersebut yak?

Oke memang saya tidak memiliki pesanan, tapi disitu ada “action” yang bisa dilakukan — ingat ini tentang “Growth”? — Jadi agar halaman yang saya kunjungi tersebut tidak kosong, yaa yang harus saya lakukan adalah mulai belanja.

Masalah tentang Empty State/kondisi ketika data kosong ini memang tidak terlalu fatal, tapi sangat berguna untuk strategi growth (meningkatkan kontribusi yang dibuat oleh user).

Jadikan nilai tambah aja kali ya

Dan terakhir yang paling fatal adalah…. Mengulangi kesalahan yang sama.

Kita sudah tau, dan kita setuju apa yang kita tau tersebut adalah benar, namun masih tidak membenarkan apa yang (sudah kita setujui) itu salah.

Postscript

Untuk halaman-halaman yang error, itu merupakan suatu keisengan yang saya lakukan (menambahkan origin: http://evilyakwkwkwk.com/ di header ketika request — untuk bypass CORS), jadi untuk kalian yang memvalidasi header request yang dikirim, kalian hebat! (Greets to DailySocial, Tokopedia, Facebook, dan actually… Medium)

Untuk yang Google, cuma test case aja (mengetik javascript:window.alert(message) di address bar — fail jadi heker), yakali selevel gugel masih ada bug XSS.

Dan untuk situs-situs lain disini yang saya screenshot, saya tidak berafiliasi dengan mereka (kebetulan situs tersebut sering saya gunakan untuk keperluan menghabiskan uang).


Dan itulah hal-hal kecil (anggap aja kecil) yang jangan sampai terlewatkan oleh Frontend Developer, dan ingat: Never trust user input.

Sekian. Mau belajar apa hari ini?