Web Design: Above the Fold

Web Design: Above the Fold

atf

Salah satu misi blogging adalah menyampaikan informasi kepada pengguna, baik yang sudah pelanggan atau yang masih baru. Dalam prosesnya, banyak faktor yang menghambat proses ini, baik dari sisi konten itu sendiri atau elemen lain di sekitarnya.

Dengan begitu banyaknya blog, persaingan antar blogger jadi semakin ketat untuk merebut hati pembaca. Kadang kala banyaknya limpahan pengunjung dari mesin pencari terbuang percuma dengan ratio konversi yang rendah. Entah karena penggunaan judul yang salah atau gangguan iklan, pengunjung cenderung meninggalkan halaman dalam waktu yang relatif singkat.

Salah satu strateginya adalah memperhatikan informasi yang disajikan sedini mungkin. Inilah salah satu arti dari konsep Above-the-Fold, atau yang saya sebut ‘Lipatan Atas‘, yang diambil dari cara surat kabar menyajikan berita utama di halaman depan untuk menarik pembeli. Dengan menggunakan elemen kunci seperti judul yang menarik atau foto yang menawan di lipatan atas halaman depan, pelalu-lalang tentunya akan lebih tertarik untuk berhenti sejenak dan membaca keseluruhan berita tersebut. Lebih untung lagi bila terbeli dan halaman lain juga dinikmati.

Faktor-Faktor Pembatas

Kenapa perlu pembatas? Karena pengunjung itu beragam macamnya, dan kita tidak bisa selalu memuaskan semua pihak. Bila disesuaikan dengan topik situs, kita setidaknya bisa menerka tingkah laku pengunjung anda. Berikut beberapa faktor batasan yang perlu diperhatikan:

Resolusi Layar – Setelah halaman ditampilkan, umumnya hanya ada beberapa detik saja untuk meyakinkan pengunjung untuk tinggal lebih lama. Oleh karena itu apa yang diharapkan harus bisa disampaikan sedini mungkin, termasuk sebelum pengunjung scroll ke bawah. Untuk situs-situs terkini, umumnya menggunakan resolusi 1024×768 pixel sebagai acuan.

Pembaca – Negeri barat dengan taraf hidup yang lebih tinggi tentunya lebih mampu untuk membeli monitor dengan resolusi tinggi. Atau, bila topik bahasan anda seputar desain web, tentunya pengunjung anda cenderung adalah desainer dengan layar beresolusi lebih tinggi dari rata-rata.

Tujuan – Apa tujuan situs anda? Berbagi informasi, berjualan layaknya e-commerce, atau memamerkan hasil karya anda sebagai seniman? Tentunya semua ini akan mempengaruhi tatanan dan tampilan dari masing-masing situs.

Yang Wajib Ada Di Lipatan Atas

Dari beberapa batasan yang ada, berikut ini beberapa elemen yang tidak boleh dilewatkan dalam penerapan konsep ini.

Identitas – Logo, nama, atau slogan sudah sepantasnya berada di atas halaman. Karena anda dikenal berdasarkan identitas ini. Andai saja ada pembaca setia anda mencari informasi lewat mesin pencari, tanpa sadar sang pembaca telah dioper ke salah satu halaman situs anda. Karena dia telah biasa dengan logo & nama situs anda (tentu saja dengan citra baiknya), tentunya pembaca pasti akan punya kesan positif dari awal. Lain halnya dengan situs-situs yang belum dikenal.

Navigasi Utama – Selain identitas, perlu juga disodorkan navigasi utama. Selain secara wajar memang umumnya berada di atas atau di samping, navigasi juga sedikitnya memberi gambaran tentang situs secara keseluruhan.

Kotak Pencarian – Belum tentu hasil yang didapat cocok dipercobaan pertama, atau pembaca bersedia mencari informasi lain dari situs yang baru dikenalnya. Salah satu metode paling gampang adalah dengan fitur pencarian lewat kata-kata kunci. Oleh karena itu letak kotak pencarian selalu dominan di lipatan atas.

Sajian Utama – Entah sajian utama situs, atau sajian utama halaman tersebut, sudah sepantasnya apa yang paling penting sudah mulai disajikan di atas. Kalau tidak, pengguna yang belum terbiasa sudah merasa kecewa, tersesat, atau merasa tertipu.

Studi Kasus

Berikut beberapa studi kasus dari beberapa macam situs.

Blog

ala

Pada umumnya blog menampilkan artikel dengan urutan waktu yang terbalik, sehingga yang terbaru selalu tampil di depan. Ini sudah menjadi perjanjian tidak tertulis, sehingga pembaca blog selalu mengharapkan artikel terbaru untuk tampil di depan. NavinoT pernah juga mengalami masalah ini dengan theme lama, yang membuat artikel terbaru bersaing dengan artikel terpilih. Akibatnya pelanggan non-RSS tidak selalu sadar akan adanya artikel terbaru (meskipun terbit tiap hari). 🙁

Portfolio

buga

Format ini cenderung sebagai wahana pamer keahlian atau bakat, sehingga tidak jarang banyak yang bermain dengan warna-warna tidak umum, atau bereksperimen lewat navigasi. Tapi tidak bisa disalahkan juga, karena sang pengunjung tentunya mengharapkan suatu yang wah untuk meyakinkannya. Umumnya halaman pertama tetap saja diwakili dengan identitas yang kuat, serta beberapa contoh hasil karya yang memikat.

Layanan Web atau Aplikasi

sifter

Tujuan utama layanan web atau aplikasi adalah menggaet pengguna baru. Umumnya mereka mempunyai idea atau konsep yang susah dimengerti, tanpa mencobanya. Oleh karena itu informasi yang disajikan di lipatan atas bisa berupa: penjelasan singkat, fitur-fitur kunci, ajakan untuk bergabung, dan beberapa contoh tampilan.

Situs E-Commerce

threadless

Namanya saja e-commerce, tentu saja tujuan pertama adalah berjualan. Tidak heran bila halaman depan selalu penuh dengan berbagai macam barang, penawaran, promosi, dan testimonial yang meyakinkan. Tidak lupa informasi untuk menghubungi penjual demi kredibilitas ekstra.

Bagaimana Dengan NavinoT?

navinot

Berdasarkan pengalaman, tatanan NavinoT yang terkini berusaha menampilkan kepribadian unik dari NavinoT sendiri. Logo/nama, navigasi, dan kotak pencari sudah tertera jelas di lipatan atas. Yang dirasa kurang adalah satu kalimat slogan untuk menjelaskan apa itu NavinoT ke pendatang baru.

Giliranmu!

Dari ulasan di atas, apakah ada tambahan lain yang kiranya penting untuk ditampilkan dilipatan atas?

Beberapa Bacaan Tambahan:

13 thoughts on “Web Design: Above the Fold

  1. kalo novinot??????

    saya pake rss agregrator, jadi jarang pake navigasi yang ada di sidebar dan menu yang diatas.

    tapi navigasi yang disediakan menurut saya dah lebih dari friendly

  2. Hmm… menarik nih

    Aku tambah yah untuk pembatasnya,
    Aku kira kebiasaan pengguna blog juga turut berpengaruh.
    Bagaimana mengetahuinya?
    Saya pikir Google Analytics sangat banyak membantu untuk itu.

    Kalau lipatan atas itu menurutku ada drop down menu lebih baik jika contenya sangat beragam, dengan batasan tentunya.
    Ga lucu kali niatnya biar lebih simple di kasi drop down menu tp belapis2. Menurutku 2 lapis itu udah lebih dari cukup.

    1. Pembatasnya ini dalam arti elemen. Masih ga yakin apa hubungannya dengan GA.

      Drop Down Menu sih bagiku last option. Kalo memang tidak ada space dan hirarkinya jelas, baru pake drop down.

      Drop down membuat pilihan jadi tidak terlihat. Dan setuju, kalau 2 level saja cukup.

  3. yg dari about kan:

    “NavinoT adalah sebuah blog tentang IT di Indonesia yang mengandalkan opini & ulasan penulis, lengkap dengan panduan siap praktek.”

    “IT Knowledge to The Power of Two!”

    maenan slogan iklan ah:
    IT power, short, daily, long acting 😀
    2 IT power, fresh, daily

    1. Haha, saya suka. Kreatif slogannya. IT Power, Fresh, Daily. Hmm, kalau Fresh, Daily, Energizing gimana ya?

  4. Salam,

    kalau aku nilai dari theme baru NavinoT..terlihat kalau situs ini punya dua deretan tombol navigasi(walaupun salah satunya itu cuma deretan kategori).

    mungkin navinot perlu menambahkan deskripsi bahwa deretan tombol dengan kotak hitam itu kategori. Atau mungkin dengan meambahkan border disemua tombol kategori itu..supaya terlihat berbeda dengan navigasi utama.

    Tapi kalau dipikir-pikir lagi..aku sendiri cederung untuk bernavigasi lewat tombol-tombol kategori itu daripada navigasi utama dipaling atas.

    Ya..tak usah dipikirkan..
    wong ini cuma cuap-cuap asal dariku yang tidak tahu apa-apa.

    Trims.

Comments are closed.

Comments are closed.