Dampak Negatif Desain Web Mobile-First terhadap Desktop
(nngroup.com)- Jika layout yang dibuat untuk mobile diperluas begitu saja ke desktop, gambar, teks, dan ruang kosong menjadi terlalu besar, sementara informasi tersebar di halaman yang panjang; dispersi konten ini menurunkan kegunaan
- Karena lebih dari 55% trafik web global berasal dari mobile, pendekatan mobile-first banyak digunakan, tetapi ketika minimalisme dipadukan dengan desain yang berfokus pada gambar besar, kepadatan informasi di desktop turun drastis
- Perbandingan layout tersebar dan layout padat dalam 13 pengujian kegunaan kualitatif menunjukkan bahwa halaman tersebar membuat pencarian dan pemahaman informasi menjadi lebih sulit
- Konten yang tersebar meningkatkan biaya interaksi karena menambah scrolling dan klik, serta memaksa pengguna mengingat informasi terkait di beberapa layar, yang dapat berujung pada beban kognitif, frustrasi, dan turunnya kepercayaan
- Di desktop, informasi penting yang saling terkait sebaiknya dikelompokkan dalam viewport yang sama, dan pola khusus mobile seperti accordion perlu digunakan secara terbatas
Apa itu dispersi konten
- Dispersi konten adalah fenomena ketika konten pada halaman web responsif terlihat terlalu besar dan melebar secara berlebihan di layar laptop besar atau desktop
- Ketika halaman mobile-first dirender di desktop, gambar yang memenuhi layar, teks besar yang membengkak, dan negative space yang berlebihan menciptakan halaman panjang dan menuntut lebih banyak scrolling
- Jika dispersi hanya muncul di sebagian section, ini mungkin bukan masalah kegunaan yang besar, tetapi jika sebagian besar halaman tersebar, dampak kumulatifnya umumnya negatif
- Pada perangkat layar besar, dispersi konten meningkatkan beban kognitif, biaya interaksi, kesulitan memahami konten, dan frustrasi pengguna
Tren desain yang menyebabkan dispersi konten
- Pendekatan mobile-first berarti merancang untuk mobile terlebih dahulu, lalu menyesuaikannya untuk tablet dan desktop
- Dengan lebih dari 55% trafik web global berasal dari perangkat mobile, pendekatan ini banyak digunakan
- Minimalisme menghapus elemen desain yang tidak diperlukan untuk fungsi inti atau pesan utama sebuah situs web
- Pendekatan ini banyak menggunakan negative space untuk menghindari kesan rumit
- Jumlah konten yang ditampilkan dalam satu viewport layar berkurang, sehingga dapat menghasilkan halaman panjang dengan kepadatan informasi rendah
- Desain yang berfokus pada gambar besar berkaitan dengan tren penggunaan gambar beresolusi tinggi secara besar-besaran di web modern
- Gambar besar dapat menarik perhatian, tetapi juga dapat membuat konten teks tersebar secara berlebihan
- Beberapa gambar besar pada halaman desktop bisa bekerja dengan baik
- Jika gambar besar terlalu banyak, konten berbasis teks di antara gambar-gambar tersebut terpecah-pecah di seluruh halaman
Metode 13 pengujian kegunaan
- Pengujian dilakukan dengan menggabungkan 13 pengujian kegunaan kualitatif dan wawancara semi-terstruktur
- Objek perbandingannya adalah kombinasi dua jenis layout dan dua jenis halaman
- Layout: padat, tersebar
- Jenis halaman: homepage, halaman produk
- Total digunakan 4 prototipe
- Prototipe tersebar dibuat ulang dengan mengambil contoh halaman web desktop nyata yang memiliki kepadatan konten rendah, negative space luas, dan teks besar
- Versi padat dibuat secara terpisah dengan menggunakan konten yang sama seperti halaman aslinya
- Pengguna melakukan aktivitas terbuka pada 4 prototipe dan ikut dalam diskusi lanjutan yang membandingkan dua versi dari tiap jenis halaman
- Metodologi penelitian lengkap tersedia di halaman metodologi terpisah
Masalah kegunaan yang ditimbulkan konten tersebar
- Jika dispersi muncul di area yang luas pada halaman, dampaknya terhadap keseluruhan pengalaman pengguna bisa besar
- Masalah utamanya adalah sebagai berikut
- Bertambahnya panjang halaman dan biaya interaksi
- Meningkatnya beban kognitif
- Sulit membentuk model konseptual halaman
- Meningkatnya rasa frustrasi
- Menurunnya kepercayaan
-
Scrolling dan klik meningkat
- Dispersi konten menciptakan halaman panjang yang membutuhkan lebih banyak scrolling, dan elemen desain khusus mobile seperti accordion menuntut lebih banyak klik untuk mengakses konten
- Ketika situs web mobile-first dirender pada layar besar, kontennya menyebar menjadi halaman panjang; efek ini makin kuat ketika minimalisme digabungkan dengan desain berfokus pada gambar
- Jika konten tersebar di beberapa viewport, informasi tertentu menjadi lebih sulit ditemukan di dalam halaman
- Peserta pengujian mengalami lebih banyak kesulitan menemukan informasi pada halaman produk tersebar dibandingkan versi padat
-
Masalah pola khusus mobile di desktop
- Di mobile, accordion melipat banyak informasi ke dalam ruang sempit, membuat halaman lebih pendek, dan dapat membantu pengguna langsung menuju area yang diminati
- Pada layar besar, masalah halaman panjang relatif lebih kecil, sehingga accordion dapat memecah-mecah konten dan meningkatkan biaya interaksi secara signifikan untuk menemukan informasi penting
- Seorang peserta merespons bahwa pada accordion informasi produk di prototipe tersebar, ia harus membuka dan menutup setiap item untuk membaca informasi
- Peserta lain menilai halaman padat lebih baik karena jumlah klik lebih sedikit dan informasinya langsung terlihat di depan mata
-
Beban kognitif meningkat
- Semakin besar gambar dan semakin luas negative space, semakin terpecah konten berbasis teks ke dalam banyak viewport
- Ketika konten terkait terpotong berdasarkan layar, pengguna sulit melihatnya sebagai satu kesatuan
- Untuk menilai atau mengambil keputusan, pengguna harus mengingat informasi dari viewport yang berbeda atau scrolling bolak-balik, dan kapasitas memori jangka pendek bisa dengan mudah kewalahan
- Layout padat mengurangi beban kognitif dan memberikan pengalaman eksplorasi yang lebih mudah dengan menampilkan lebih banyak informasi dalam viewport yang sama
- Karakter gambar juga memengaruhi tingkat fragmentasi yang dirasakan
- Gambar informatif dapat memberi beban tambahan yang lebih kecil meskipun ditampilkan besar di layar besar, karena pengguna meluangkan waktu untuk melihatnya demi memperoleh informasi berguna
- Gambar dekoratif tidak memiliki nilai informasi sehingga pengguna melewatinya tanpa melihat, dan pengalaman fragmentasi terasa lebih buruk karena mereka harus scrolling melewati ilustrasi besar untuk mencapai konten yang berguna
Dampak terhadap model konseptual dan kepercayaan
- Halaman tersebar membuat pengguna lebih sulit mengevaluasi konsep yang disampaikan situs web dan membentuk model konseptual, karena halaman yang lebih panjang dan beban pada memori kerja
- Pada prototipe homepage, peserta merespons bahwa alih-alih melihat 4–5 penawaran sekaligus dan memahami cakupannya, mereka harus mengingatnya sambil memahami, sehingga terasa lebih sulit
- Pada halaman produk, ketika faktor untuk keputusan pembelian seperti harga, detail produk, dan ulasan tersebar di beberapa viewport, pengguna harus mengonsumsi dan mengingat informasi secara terpisah
- Jika informasi penting ditempatkan bersama atau di lebih sedikit viewport, lebih mudah membangun pemahaman konseptual tentang produk atau nilai yang ditawarkan
- Ilusi kelengkapan dapat lebih menonjol pada situs web tersebar
- Blok warna dapat membuat garis horizontal yang kuat pada viewport, atau negative space yang luas dapat membuat halaman terlihat seolah sudah berakhir
- Jika tidak ada petunjuk scrolling yang memberi tahu bahwa masih ada konten lain, pengguna berisiko melewatkan konten
- Jika masalah kegunaan menumpuk, situs web tersebar dapat terlihat memiliki sedikit konten dan sulit diakses
- Sebagian pengguna mungkin merasa perusahaan menyembunyikan informasi, dan dalam kasus ini kepercayaan dapat menurun
- Pengguna lebih menyukai layout padat terutama ketika mereka bertujuan menjelajahi situs web dan memahami secara umum apa yang ditawarkan
Kapan dispersi konten membantu
- Jika seluruh halaman tersebar, dampak kumulatif terhadap kegunaan umumnya negatif, tetapi dalam situasi tertentu hal ini dapat berdampak positif pada pengalaman
- Ketika jumlah konten yang ditampilkan dalam satu viewport berkurang, pengguna dapat berfokus pada satu konten yang ditonjolkan pada satu waktu, dan persepsi kelebihan informasi juga dapat berkurang
- Menurunkan kepadatan konten dalam viewport untuk menonjolkan informasi dapat membantu dalam kondisi berikut
- Ketika konten kompleks harus dipahami potongan demi potongan
- Ketika pengguna perlu membiasakan diri dengan konten yang ditampilkan, dan terlalu banyak informasi dapat terasa membebani
- Ketika menampilkan gambar bernilai tinggi
- Foto produk besar dapat menambah nilai dengan memudahkan pengguna melihat detail produk
- Gambar dengan nilai informasi tinggi dapat membenarkan dispersi, tetapi gambar pengisi atau gambar yang hanya untuk daya tarik visual menyebabkan dispersi tanpa manfaat tambahan
- Pada prototipe homepage, nilai gambarnya lebih rendah sehingga efek positif dari dispersi konten kurang terlihat
Rekomendasi desain untuk desktop
- Rendering desktop perlu dievaluasi secara terpisah
- Jika sebagian besar halaman melebar secara berlebihan di desktop, perlu dipertimbangkan apakah konten penting harus didesain ulang agar lebih mudah dipindai
- Nilai manfaat yang diberikan gambar perlu dipertimbangkan
- Prioritaskan gambar besar yang membantu memahami konteks produk atau layanan
- Tentukan apakah nilai gambar tersebut cukup besar untuk menerima dispersi yang ditimbulkannya di desktop
- Konten penting yang saling terkait harus dikelompokkan dalam viewport yang sama
- Pertimbangkan informasi yang paling relevan untuk memahami penawaran, dan pilih desain yang mengurangi scrolling bolak-balik
- Interaksi dan elemen desain khusus mobile perlu dibatasi
- Kurangi penggunaan accordion di desktop
- Pertimbangkan desain adaptif yang menampilkan konten yang sama dengan cara yang ramah desktop
- Dispersi sebaiknya digunakan secara terbatas sebagai strategi untuk memusatkan perhatian pada poin utama atau konten kompleks
Kesimpulan
- Konten tersebar pada halaman desktop minimalis dapat mengurangi distraksi dan memusatkan perhatian pada poin utama atau informasi kompleks
- Namun, ketika seluruh halaman disusun berdasarkan mobile-first, minimalisme, dan desain berfokus pada gambar, masalah kegunaan di desktop meningkat
- Ketika konten melebar dan terpecah di banyak viewport, pengguna menjadi lebih sulit mengonsumsi dan memahami informasi
1 komentar
Pendapat di Hacker News
Danny O'Brien pernah menjalankan blog lama bernama Oblomovka, dan sekitar 2007 menciptakan istilah hinternet
Saat itu internet adalah tempat yang tadinya dikelola oleh elite teknologi untuk diri mereka sendiri, lalu orang biasa mulai masuk; hinternet adalah gagasan bahwa ada internet dengan teknologi dan nilai yang rapi, terpisah dari internet berisi spam Viagra dan banner pop-up
Dulu, elite teknologi hampir bisa menghindari hinternet seperti menghindari lingkungan berbahaya, tetapi orang biasa tidak punya alat pembeda seperti itu sehingga mengalami internet yang jauh lebih buruk
Sekarang sebagian besar internet telah menjadi hinternet, dan sistem esensial seperti bank, KPR, pembayaran mobil, dan tagihan utilitas juga dirancang dengan pendekatan mobile-first, memakai teknik gelap yang rusak di platform terbuka dengan alasan “verifikasi pengguna sungguhan”
Jika hinternet dulu adalah gang suram yang menjual jam tangan tiruan, kini lebih mirip distopia integrasi informasi vertikal yang dioperasikan lembaga semipemerintah dari balik layar; untuk login ke IRS pun harus memakai platform manajemen identitas id.me yang bahkan menjual barang
Ada upaya untuk merawat taman kecil yang elegan, tetapi keberhasilannya tidak merata, dan bagi individu hampir tidak ada insentif untuk berpartisipasi di hinternet selain untuk urusan yang benar-benar perlu
Dilihat dari sudut pandang ini, “desain web mobile-first” hanyalah gejala yang dipisahkan dari konteks yang lebih besar
Di satu sisi ada elite terpelajar dari akademia, militer, dan pemerintah sebagai pendiri yang sah; di sisi lain ada massa yang masuk setelah Eternal September
Pada akhirnya, narasinya seolah para pendatang seperti pedagang, spekulan, dan penipu dinaturalisasi menjadi perusahaan dan bank di dunia baru; jika era dot-com dilihat sebagai kisah kolonisasi, para elite menjadi penduduk asli yang terusir dari tanah mereka sendiri, dan ini juga cocok dengan narasi masa kini
Namun yang hilang dari dongeng ini adalah orang-orang biasa yang sebenarnya
Dot-com, Web 2.0, dan pembangunan imperium dari 1997 hingga sekitar 2010 masih merupakan peristiwa pinggiran: uang dan kekuasaan lama berpindah ke internet, disertai segelintir “wirausahawan” kasar, sementara 99% tetap menjadi penonton sampai akhirnya kini digiring masuk ke peternakan
Kemungkinan adanya internet milik orang-orang masih ada, tetapi masalah klasik seperti free rider dan tragedi kepemilikan bersama hampir belum terpecahkan, dan pada titik ini “Web 3.0 dan web blockchain” tampaknya sudah mati
Untuk kembali ke internet yang publik, berkualitas tinggi, dan besar, kita perlu melihat sejarah dan narasi internet, serta siapa pemangku kepentingan sebenarnya, dengan lebih cermat
Tidak jelas apakah yang dimaksud internet 90-an yang sulit dipakai dan berpusat pada IRC serta Usenet, atau internet bawah tanah tahun 90-an dengan hosting gratis dan konten ilegal
Sulit melihat bagaimana internet 90-an yang berisi forum, IRC, spam Viagra, dan goatse mirip dengan internet steril masa kini yang dikuasai dark pattern dan segelintir megakorporasi
Karena penggunaan mobile, buta komputer tidak berkurang, malah meningkat; mereka mengeklik tautan yang salah, memasang toolbar browser, lalu pelan-pelan terinfeksi dark pattern
Saya cukup sering melihat kondisi seperti ini saat kerabat menghubungi saya karena masalah komputer
Setiap kali memakai ungkapan seperti “phonish” atau “phonishness” selalu kena downvote, tetapi smartphone terasa membuat hidup lebih buruk, bukan lebih baik, dan membuat manusia melayani komputer
Saya menantikan platform berikutnya
Selain di folder junk mail, hampir tidak ada paparan; sisanya semua telah dikurasi menjadi wilayah yang “layak” atau disesuaikan agar terasa seperti hunian internet yang istimewa
Saya mungkin tidak kaya uang, tetapi kaya dalam hal pengetahuan; strukturnya tampak seperti tragedi kepemilikan bersama, ketika kaum buta teknologi menjadi tameng daging bagi iklan dan layanan berbayar seperti YouTube
Seiring waktu, makin jelas bahwa frontend kemungkinan besar adalah bagian tersulit dalam stack
Orang-orang mengira membuat aplikasi Bootstrap React secara asal-asalan sudah sempurna, tetapi menulis UI kompleks yang bekerja di semua browser, perangkat, teknologi bantu, dan bahasa itu sangat sulit
Dibutuhkan pengetahuan mendalam tentang HTML, CSS, dan API web terkait, dan engineer frontend yang bagus sangat langka bahkan di big tech
Desainer UX yang memikirkan hal-hal seperti ini bahkan lebih langka, dan orang seperti itu bernilai sejuta dolar
Pada akhirnya saya beralih menjadi desainer; kalau memang tidak akan dihargai, setidaknya saya tidak perlu terus berlari di treadmill teknologi baru
Saya juga pernah mengerjakan backend dan itu sulit dengan caranya sendiri, tetapi jika bicara soal uang, saya akan memilih backend daripada frontend
Setelah mencoba desain, backend, dan frontend, di kepala saya terbentuk dua sumbu: pengakuan dan campur tangan
Desain mendapat banyak pengakuan karena hasilnya visual, tetapi siapa pun bisa menyampaikan pendapat tentang “cara melakukannya lebih baik” dan mudah ikut campur
Backend tidak banyak dicampuri kecuali oleh engineer lain, tetapi meski dikerjakan dengan baik, ia berjalan seolah memang sudah semestinya begitu sehingga sulit mendapat pengakuan atas jasanya
Frontend berada di tengah-tengah: jika terlihat bagus dan berjalan baik, ada pengakuan tertentu, tetapi meski aplikasi cepat dan responsif, sekitar separuh kredit kadang jatuh ke desainer
Pada saat yang sama, orang-orang berkata “seharusnya bekerja seperti ini” dengan mengacu pada aplikasi lain, dan developer frontend harus membuatnya tetap berjalan entah bagaimana di antara apa yang disetujui desainer dan apa yang didukung backend
Mereka lelah bertengkar seharian dengan rekan kerja yang bisa coding tetapi tidak punya kepekaan desain, dan karakteristik yang membuat seseorang menjadi engineer frontend yang baik juga menguntungkan untuk pindah ke peran dengan biaya psikologis yang lebih rendah
Developer frontend berhadapan dengan manusia yang subjektif, bukan mesin yang objektif; mereka juga harus berhadapan dengan desainer dan manajer produk, serta dibatasi oleh engineer backend dan infrastruktur
Mereka harus membuatnya berjalan di berbagai perangkat dan browser, memakai framework yang dipilih orang lain, dan tidak boleh merusak apa pun
Hormat saya untuk semua developer frontend
Semuanya punya padding: teks punya padding, kotak yang membungkus teks juga punya padding, dan baris tabel yang memuat kotak itu punya padding yang lebih besar lagi
Akibatnya, di layar 1080p biasa hanya muat sekitar 4 baris tabel, dan hampir tidak ada informasi nyata di tiap baris
Selain itu, entah kenapa ukuran huruf didefinisikan berdasarkan lebar viewport, sehingga di display 4:3 lama hampir tidak bisa dipakai
Bayangkan sistem yang harus menangani puluhan miliar kejadian per hari, minggu, atau bulan; caching data dan data warehouse; notifikasi real-time; beban kerja queue; berbagai permintaan API; sinkronisasi antar sistem backend; banyak data store; ekspansi multi-region; redundansi; hingga penanganan kegagalan backend
Dalam software web yang kompleks, persoalan backend seperti ini umum terjadi
Frontend yang terhubung ke backend itu biasanya lebih jarang mengalami masalah di tengah malam akibat proses otomatis backend, atau harus mencemaskan jumlah pengguna dan skala data
Sesulit apa pun pengembangan awal frontend atau pemeliharaan akibat perubahan browser, setelah pengembangan selesai ia berupa kode statis yang berinteraksi dengan subsistem yang jauh lebih kompleks, dan subsistem di bawahnya itu terus menuntut perhatian setiap kali data dan kebutuhan bisnis berubah
Masalahnya bukan mobile-first versus desktop, melainkan para desainer yang masih belum memahami bahwa web adalah konten dinamis yang harus mengalir menyesuaikan ukuran dan bentuk layar pengguna
Web bukan media statis seperti kertas, dan tidak terikat pada ukuran serta bentuk tertentu, jadi tidak boleh diperlakukan seperti itu
“Desainer” web tidak seharusnya memaksa konten masuk ke ukuran atau resolusi piksel tertentu; karena resolusi layar dan rasio aspek sangat beragam, konten harus bisa mengalir menyesuaikan diri
Bagi pengguna tunanetra atau low vision yang perlu memperbesar font, jika konten sangat rusak saat font diperbesar, aksesibilitasnya akan sangat memburuk
Halaman seperti ini juga harus berjalan di browser mobile dan desktop serta terlihat bagus di semuanya, tetapi itu tidak terlalu sulit
Hanya butuh sedikit lebih banyak waktu, dan media query serta sedikit JavaScript memungkinkan hal itu
Pada saat yang sama, ini juga area yang kacau bahkan bagi orang yang sudah lama mengerjakan ini
Belakangan saya memanfaatkan latar belakang desain untuk sebisa mungkin terlibat pada tahap perancangan, lalu setelah implementasi dan deployment, saya meminta mereka “beri tahu semua yang rusak di viewport ambigu yang hanya dipakai 1% pengguna”, kemudian memperbaikinya di tahap review atau saat sudah beroperasi dengan patch CSS dan media query per viewport
Ada alasan mengapa panjang baris teks di semua buku cetak umumnya mirip, dan lebar baca harus selalu dibatasi
Lebarnya bisa 300px atau 1920px, pengguna bisa memakai mouse, hanya sentuhan, keduanya, atau bahkan tidak keduanya
Menu hamburger dan ikon piktogram
Saya paham kenapa dipakai di mobile
Kalau ruang yang tersedia hanya cukup untuk konten, masuk akal menaruh sedikit fungsi sebagai ikon kecil dan menyembunyikan aksi lainnya di menu hamburger
Tapi kalau ada ruang, menggunakannya seperti itu mengerikan
Paling baik pun langkahnya bertambah, paling buruk pengguna harus bereksperimen untuk mencari tahu ikon itu melakukan apa lalu bisa berujung masalah
Kalau undo berfungsi dengan benar, itu masih lumayan, tapi sepertinya mereka bahkan memutuskan hal itu boleh saja rusak
Seperti Apple HIG dulu, di desktop aksi yang sering dipakai harus dikeluarkan dari menu dan diletakkan pada tombol berlabel agar pengguna bisa menjawab “apa yang bisa saya lakukan?” tanpa bermain petak umpet
Undo sulit ditambahkan belakangan, jadi harus disiapkan sejak awal untuk mengurangi harga dari eksperimen
Sayangnya desain mobile sudah menguasai terlalu total, sampai-sampai meski aplikasinya hampir seluruhnya akan dipakai di desktop dan ada orang di dalam tim yang membela desain desktop, desainer UI tetap memilih hamburger, piktogram, dan undo yang rusak
Selain itu modal juga kembali dengan ganas, tapi demi tekanan darah saya harus berhenti di sini
Ponsel murah berusia 5 tahun seperti moto e4 pun punya layar 1280x720, dan ada cukup piksel untuk memberi label pada ikon
Ikon piktogram hampir seperti rancangan yang mengatakan “kami membenci pengguna dan ingin mereka mengetahuinya”
Menu hamburger juga sering bisa dihilangkan kalau melihat jumlah opsinya
Aplikasi Gmail pun bisa menaruh ikon di bilah horizontal tetapi tetap memakai hamburger, dan sulit mengatakan ruang itu penting ketika mereka juga memasang bilah bawah untuk chat, video, dan Spaces
Saya sedikit khawatir pengguna tidak sadar ada opsi lain yang bisa digulir, tapi saya lebih menyukainya daripada menu hamburger yang terbuka dan menutupi konten
Karena semua opsi dan katanya bisa terlihat
Di desktop perlakuan seperti ini tidak diperlukan
Namun menurut saya alasan desainer menyukainya adalah karena lebih mudah menjaga desain yang konsisten di banyak bahasa
Misalnya lokalisasi bahasa Jerman bisa sulit dipaskan
Saya juga ingin menambahkan opsi yang bergantung konteks yang tersembunyi
Opsi yang dinonaktifkan saat tidak bisa dipakai, yaitu dibuat abu-abu, setidaknya bagus karena menunjukkan kemungkinan bahwa ada sesuatu yang bisa dilakukan jika kondisinya tepat
Tapi desain modern menyembunyikan opsi seperti itu, dan kalau tidak tahu kondisi ajaib yang membuatnya muncul, Anda tidak akan pernah melihatnya
Ubiquiti Unifi adalah contohnya
Di halaman untuk mengelola port switch tidak ada opsi “Select All”, dan opsi itu baru muncul secara ajaib setelah memilih setidaknya satu port terlebih dahulu
Bukan hanya tersembunyi, konteksnya juga salah
Kalau opsi itu ada sebagai checkbox nonaktif, semua orang akan langsung sadar bahwa checkbox “Select All” yang nonaktif saat belum ada port yang dipilih itu jelas bodoh
Mereka mudah takut kalau ada terlalu banyak hal di layar, dan orang-orang seperti inilah yang mendominasi focus group
Jadi sepertinya para desainer jadi terikat pada satu aturan mengerikan ini
Studi ini secara praktis tidak masuk akal
Halaman-halaman itu dirancang bukan untuk menyampaikan informasi maksimum dalam ruang minimum, melainkan untuk menjual produk
Kalau ingin mengklaim ada dampak negatif akibat penyebaran konten, harus diukur berdasarkan tujuan perancangan halaman tersebut
Di sini mereka secara eksplisit meneliti halaman e-commerce/produk, jadi metrik yang relevan adalah halaman mana yang membuat nilai produk terasa lebih tinggi, memiliki conversion rate lebih tinggi, NPS lebih tinggi, atau membuat afinitas merek lebih baik
Speaker portabel dijual bukan dengan spesifikasi, melainkan dengan citra aspiratif menggunakannya di pantai
Kalau detail produk dibuka dalam accordion lalu bertanya “seberapa baik Anda merasa memahami proposisi yang disampaikan halaman ini?”, tentu skor surveinya akan lebih tinggi
Justru akan mengejutkan kalau halaman yang lebih padat menghasilkan konversi lebih baik
Ini seperti merancang studi bahwa kursi keras mobil balap F1 itu buruk, lalu menempelkan banyak busa dan menguji mana yang lebih nyaman, kemudian menyatakan itu lebih baik karena skor kenyamanannya lebih tinggi padahal metrik aslinya hanya lap time
Pilihan desain yang dikritik tulisan itu bukan hasil dari desain mobile-first
Bahkan situs web pada akhir 2000-an, sebelum desain responsif umum, juga terlihat seperti itu
Contohnya Apple: https://www.versionmuseum.com/history-of/apple-website
Pada dasarnya mereka membandingkan kepadatan informasi brosur pemasaran atau papan iklan lalu mengatakan semuanya tidak tersampaikan, padahal memang itulah tujuannya
Iklan bukan tabel spesifikasi, melainkan untuk membangkitkan keinginan terhadap produk pada orang yang melihatnya
Tapi bagi saya, itu justru bisa menjadi sinyal kuat omong kosong berkualitas rendah
Banyak situs web mengubah UI sepenuhnya ketika ukuran jendela diubah
Kadang saya ingin membiarkan browser hanya memakai separuh monitor dan menaruh hal lain di sebelahnya, tetapi di situs web modern, ketika ukuran jendela diperkecil, UI menjadi tidak bisa dipakai sehingga sering gagal
Kalau dilakukan dengan baik hasilnya hebat, tetapi benar juga bahwa banyak situs web bertindak terlalu agresif seolah-olah mereka hanya benar-benar menguji dua kategori ukuran
Penasaran apakah maksudnya ketika tampilan diperkecil, fungsi dan konten jadi tidak lagi bisa diakses
Saya benci situs web yang menaruh konten berguna di kolom tipis di tengah
Yang lebih buruk adalah situs web yang dulu normal pun makin lama makin rusak
Biasanya itu terjadi ketika ada manajer baru masuk dan ingin “membayangkan ulang” produk dengan visi “mobile-first”
Patreon belakangan ini adalah contoh yang bagus
Dan dalam beberapa kasus, situs web yang normal malah hilang sama sekali dan digantikan oleh crapp seperti Venmo, Amazon Alexa, dan Chamberlain
Yang benar-benar canggung adalah tidak adanya alternatif sentuh yang bagus untuk hover
Ini elemen UX yang terlalu berguna untuk dibuang saat beralih ke mobile-first
Selain itu, rasanya lebih dekat ke “tidak sesulit itu”
Di antara masalah yang harus dipecahkan, membuatnya terlihat masuk akal di berbagai ukuran layar berada cukup rendah dari sisi waktu dan kompleksitas
Setidaknya begitu saya memakainya saat melihat teks alternatif gambar di Firefox mobile
Deteksi hover sebenarnya mungkin saja bisa dilakukan, tetapi UX-nya sepertinya buruk kecuali memakai stylus
Sebagai web designer, saya agak tidak setuju
Contoh yang diberikan di tulisan itu bekerja lebih baik dengan konten sederhana per layar
Lebih mudah dipahami secara visual, dan versi yang dipadatkan banyak memakai layout multi-kolom yang secara pribadi tidak saya suka
Kepadatan konten tinggi cocok untuk aplikasi desktop, tetapi tidak cocok untuk situs yang pada dasarnya adalah situs web brosur
Bagus bahwa ini bukan sekadar kesan seseorang
Sulit dipercaya bahwa halaman marketing, setelah puluhan tahun evolusi dan pengujian, belum sampai pada apa yang benar-benar diinginkan pengguna, bukan apa yang mereka katakan mereka inginkan
Bagi orang yang tumbuh dengan internet, scrolling adalah tindakan yang sangat alami
Memanfaatkan layar besar untuk membandingkan secara visual juga berguna, tetapi contoh di tulisan itu kurang bagus
Disebutkan bahwa “informasi yang sama disusun dalam grid 2x2 agar beberapa layanan bisa dibandingkan sekaligus”, tetapi saya tidak tahu apa yang perlu dibandingkan
Itu layanan-layanan yang berbeda
Saya suka contoh spesifikasi produk, tetapi itu lebih dekat ke masalah usability objektif yang mengharuskan lebih banyak klik untuk melihat lebih banyak informasi
Perlu diperhatikan bahwa screenshot-nya “diperkecil”, sehingga komposisi multi-kolom tampak lebih kaya dan lebih menarik secara visual
Saya sepenuhnya setuju untuk memanfaatkan ruang horizontal, tetapi apa yang telah kita pelajari tentang tombol ajakan bertindak mengarah pada desain dengan elemen tunggal
Dibanding situs brosur atau situs e-commerce, desain mobile-first pada situs produktivitas dan antarmuka tool jauh lebih menjengkelkan
Siapa biasanya yang mengakses tool semacam ini lewat ponsel
Mengetik nama dan alamat perusahaan lama serta tempat tinggal lewat keyboard mobile saja sudah menyiksa, tetapi input tanggal lebih parah
Karena date picker dimulai dari bulan dan tahun saat ini lalu hanya bisa digulir satu bulan demi satu bulan, untuk memasukkan tanggal lahir harus mengetuk sekitar 550 kali
Saya sempat ingin melaporkannya ke EEOC karena berdampak tidak proporsional pada pekerja yang lebih tua, yang merupakan kelas yang dilindungi, tetapi itu bukan cara yang baik untuk memperkenalkan diri kepada HR di perusahaan baru
Dalam praktiknya ini menjadi seperti tampilan layar kecil, dan itu adalah persyaratan WCAG