Setelah sekian purnama tidak membahas seputar web development, mari kita lanjutkan tulisan "Hal kecil yang jangan dilupakan oleh Frontend Developer" yang mana pernah saya publish di Medium pada 09 Februari 2018 yang mana tidak ada backup nya because why not.

Hal kecil yang jangan dilupakan oleh Frontend Developer

Baik, ketika membuat website, seseorang yang berdiri di barisan yang paling depan antara lain Frontend Developer, UI & UX Designer. Jika ada sesuatu yang salah terkait website secara visual & pengalaman, kita tau siapa yang harus disalahkan.

Disini saya mencoba untuk tidak memfokuskan ke frontend development, tapi karena dia adalah salah satu yang bertanggung jawab akan hal-hal yang akan kita bahas disini, jadi, here we go.

User Onboarding

Ada buku klasik seputar HCI UX yang berjudul Don't Make Me Think yang ditulis oleh Steve Krug. Di buku tersebut dijelaskan tentang hal-hal terkait membuat tampilan yang menjelaskan akan judul dari buku tersebut.

Ketika memperkenalkan sesuatu yang baru—baik itu karyawan baru, rumah baru, dsb—umumnya kita melakukan "tur singkat" kepada orang tersebut, agar setidaknya dia tidak kebingungan akan apa yang harus, boleh & jangan dia lakukan.

Begitupula ketika membuat tampilan, khususnya bila tampilan tersebut terkesan baru & beda. Terlebih bila menyadari bahwa tampilan tersebut tidak cukup intuitif apalagi memiliki terlalu banyak elemen.

Contoh tour yang ditawarkan oleh Slack

Tour merupakan salah satu cara yang lumayan efektif untuk melakukan onboarding terhadap pengguna, baik itu pengguna baru ataupun memperkenalkan tampilan baru.

Membuat tour dapat mengurangi kemungkinan terhadap pengguna untuk berpikir apa yang harus dilakukan, karena di tour biasanya hanya menjelaskan aktivitas inti yang bisa pengguna lakukan terhadap tampilan yang ada.

Sisa nya, kembalikan ke pengguna. Manusia pada dasarnya suka mencoba-coba, dengan membuat tour, setidaknya kita sudah memberikan kunci pertama akan pintu mana yang harus mereka coba.

Empty State

Seringkali perancang fokus ke bagaimana sebuah data ditampilkan, dan sayangnya tidak jarang melupakan bagian yang paling pertama: Bagaimana bila data tersebut tidak ada?

Aktivitas yang harus dilakukan oleh pengguna agar tidak membuat data tersebut tidak kosong adalah... Dengan membuat nya tidak kosong?

Oke, fine. Berdasarkan pengalaman gue untuk empty state ini, ada yang membiarkannya tetap kosong aja (alias sebagai penghias) dan ada yang mengambil kesempatan untuk memberikan pilihan kepada pengguna untuk melakukan sesuatu agar tampilan tersebut menghilang mereka menambahkan satu atau dua data alias membuat Call to action.

Empty state (dengan CTA) yang boring nya Keybase

Empty state + CTA bisa menjadi gerbang utama untuk membuat pengguna mulai (dan terus) menggunakan fungsionalitas yang kamu tawarkan.

Kompatibilitas

Beda dengan platform lain seperti desktop dan native mobile, di platform web, pengguna tidak dibatasi oleh sistem operasi yang digunakan.

Melainkan, di "sesuaikan" berdasarkan peramban yang digunakan.

Peramban yang paling populer per-hari ini antara lain keluarga Blink-Chromium (Google Chrome, Microsoft Edge, Brave), keluarga WebKit (Safari, Maxthon), dan keluarga Gecko (Mozilla Firefox, Tor).

Setiap peramban memiliki karakteristik berbeda-beda, dari bagaimana peramban menampilkan tampilan, menyusun DOM, menerjemahkan kode, melakukan sandboxing, dsb.

Karena memiliki karakteristik yang berbeda-beda ini, terjadilah keberagaman yang tidak jarang menjadi masalah & dipermasalahkan.

Misal, Skype. Yang aplikasi nya hanya bisa diakses oleh peramban Google Chrome & Microsoft Edge alias dari keluarga Chromium karena kemungkinan alasan teknis.

https://www.skype.com/en/free-conference-call/

Atau hal teknis lain seperti API yang baru didukung hanya oleh beberapa peramban (namun sudah digunakan di production!), sebuah "standar" yang belum menjadi standar seperti "installable website" yang dilakukan oleh peramban Google Chrome, dan masih banyak lagi yang sepertinya bukan kapasitas saya untuk membahasnya.

Hey, sebelumnya gue pernah nulis juga tentang "Mengapa lo harus peduli dengan browser" di blog pribadi, so here we go.

Kompatibilitas ini penting dalam konteks keberagaman. Tentu tidak bijak bila misalnya pengguna dipaksa untuk menggunakan Safari agar bisa menggunakan aplikasi web tersebut.

Mungkin sama seperti yang boleh tinggal di Bandung hanyalah suku Sunda, sebagai contoh. Ya, apakah itu yang disebut dengan ekslusivitas?

Performa

Menurut gue, performa adalah fundamental dari pengalaman pengguna.

Ya, fondasi.

Bayangkan bila kita membuat tampilan yang sangat intuitif, mudah digunakan, nyaman dipandang, memiliki struktur informasi serapih mungkin, copywriting yang sangat jelas, namun bila lambat dimuat?

Sekokoh apapun sebuah bangunan, bila fondasi nya hancur, ya hancur, bukan?

Mungkin topik masalah performa ini bukan kapasitas gue, tapi ini ada tulisan bagus dari WWWID terkait performa dari Berbagai best practice dalam memuat halaman website, Mengoptimasi Gambar Pada Halaman Situs, sampai Memastikan webmu selalu tersedia yang tentunya masih banyak lagi.

Dan, ya, Web Developer memiliki sumber daya bernama Web Vitals yang ditawarkan oleh developer dari Chrome & kontributor lain, worth to check!

Bonus: Incremental update!

Bagian ini terinspirasi dari beranda Twitter kemarin malam yang banyak mengeluhkan tampilan (baru) sebuah aplikasi.

Memperbaharui tampilan yang sudah ada bukanlah tugas yang lumayan sulit, namun menjadi PR yang sangat sulit untuk pengguna: seseorang yang menggunakan akan apa yang kamu buat, rancang & kembangkan.

Ada beberapa teknik untuk melakukan pembaruan tampilan, yang paling klasik biasanya dengan melakukan A/B testing. Penyedia melakukan "rolling" akan tampilan baru tersebut berdasarkan segmen yang sudah di definisikan (entah berdasarkan frekuensi aktivitas, wilayah geografis, tipe perangkat, dsb).

Hal yang di uji bisa antara tampilan baru dengan tampilan lama, tampilan baru A, tampilan baru B dan tampilan lama, apapun. Tergantung si pemilik kepentingan.

Sayangnya, tidak jarang proses pembaruan tersebut dilakukan secara menyeluruh, dari A-Z. Hanya segmen pengguna saja yang tidak menyeluruh.

Jika mengambil contoh, seperti Reddit, Reddit memberikan pilihan untuk "opt-in" terhadap tampilan baru yang ditawarkan oleh mereka (dan they're lookng for feedback).

Atau GitHub, hampir sama seperti Reddit, namun tidak langsung secara keseluruhan (misal dari tampilan baru notifikasi).

Atau yang bila memang tidak menggunakan proses konfirmasi, seperti Google. Sering banget gue mendapatkan tampilan baru di Google, yang hanya berdampak ke sedikit elemen, tidak keseluruhan.

Biaya dari melakukan pembaruan tampilan adalah pengguna harus mempelajari ulang akan tampilan terbaru tersebut. Dan disini tantangan nya, umpan balik baik & kurang baik pasti ada, dan pengguna bagaimanapun akan "memaksa" diri nya untuk mempelajari lagi.

Yang jadi masalah, bila pengguna benar-benar merasa frustasi, dan meninggalkan layanan yang sudah digunakan tersebut hanya karena proses pembaruan tampilan tersebut.

Apakah kemungkinan diatas akan terjadi?

Silahkan lihat kondisi lapangan juga, jangan hanya selalu bergantung dengan data yang ada di analitik :))

Penutup

Hal yang perlu diperhatikan ketika membuat website (di tulisan ini) ternyata bukanlah tentang framework apa yang harus dipilih, styling library apa yang harus digunakan, jawaban apalah harus pakai state management atau tidak?, dan sebagainya.

Hal-hal yang disebutkan disini adalah sebagian kecil dari apa yang harus diperhatikan oleh pengembang web dari perspektif seorang pengguna. Mungkin ditulisan selanjutnya kita akan bahas tapi dari perspektif seorang backend developer, let's see!

Mungkin sampai sini dulu pembahasan kita, sekarang, sepertinya waktu yang tepat untuk membaca tulisan yang ada di box di bawah ini? 👇