Eschewed Complexity

User Experience Design (UX) dan Search Engine Optimization (SEO) adalah sisi yang berbeda dari mata uang yang sama. Dua-duanya adalah ilmu desain dan ilmu antar-muka. Bedanya adalah, dalam UX, kita berantar-muka dengan manusia yang menggunakan situs kita, mencoba sebaik mungkin memenuhi kebutuhan mereka dan memberikan pengalaman yang positif. Sedangkan dalam SEO, kita berantar-muka dengan robot yang mengunjungi situs kita, (juga) mencoba sebaik mungkin memenuhi kebutuhan mereka, sesuai dengan tugas yang terdapat dalam logika program robot-robot tersebut.

Sebelum ada Google dan algoritma patennya, UX dan SEO merupakan dua bidang yang benar-benar terpisah. Mengapa ? Sebab kebutuhan robot dan manusia waktu itu sangatlah berbeda. SEO yang baik berarti memberi robot ‘makanan’ (keyword) dalam jumlah berlimpah, yang terkadang merugikan sisi UX dari sebuah situs. Sedangkan situs yang benar-benar memiliki UX yang baik, sulit terkenal dan pasti kalah ranking-nya ketimbang situs yang benar-benar memiliki SEO yang baik. Dari sanalah sebuah siklus destruktif dimulai :

(a) Banyak perusahaan berlomba-lomba mengakali search engine dengan teknik-teknik SEO yang berlebihan

(b) Level UX menjadi sangat rendah. Halaman menjadi nyaris tidak terbaca di mata manusia.

(c) Manusia lambat laun berhenti mengunjungi situs itu.

(d) Situs itu mati – dan Web menjadi sebuah kuburan masal bagi situs-situs serupa.

Namun, akhir-akhir ini terdapat trend yang baik. Hampir semua robot pada search engine besar (Google, Yahoo, Bing) kini telah diprogram agar mengikuti perilaku manusia. Artinya, robot-robot itu kini melihat sebuah halaman Web, hampir seperti manusia melihatnya. Secara konkrit, kini robot-robot itu dapat melihat konteks dari halaman Web itu, judul, isi, gambar, struktur informasi dan elemen-elemen pendukungnya untuk menentukan apakah halaman ini memang memiliki relevansi tinggi terhadap kebutuhan para pencari dan pengunjungnya.

Hal ini merupakan sebuah cahaya terang di tengah-tengah perang antara SEO dan UX. Dengan membuat sebuah situs yang memanjakan penggunanya, maka kita juga akan memanjakan robot-robot pengunjung situs kita. Semakin tinggi level UX situs kita, level SEO juga akan turut terdongkrak. Dan era baru di dunia World Wide Web akan segera tiba dimana situs nomor 1 di ranking search engine adalah situs yang tidak hanya populer melalui penulusuran kata kunci (keyword), tetapi juga yang paling usable dan informatif – yang memiliki konten paling berkualitas dan paling mengerti kebutuhan penggunanya. Amin.

Mouse (ya, benda mungil di sebelah komputer anda) , trackpad (di laptop anda) , dan touchscreen (di handphone anda) adalah periferal input paling penting. Karena kita berinteraksi sebagian besar menggunakan periferal-periferal di atas – kecuali anda memiliki hobi menghapal keyboard shortcut.

Konvensi inputnya pun sangat standard dan intuitif. Ambil contoh : scroll sebuah halaman web. Untuk scroll ke bawah, kita menggerakkan mouse ke bawah. Scroll ke atas, kita juga menggerakkan mouse ke atas. Anak SD pun juga bisa.

Begitu juga pun dengan scroll wheel. Apabila anda menggunakan mouse standard logitech (ups sebut merek) dengan mouse wheel di antara dua tombol mouse, metodenya juga sama. Putar wheel ke bawah untuk scroll ke bawah dan sebaliknya. Trackpad pada laptop anda juga memiliki perilaku yang sama. Pada beberapa trackpad, bahkan anda cukup menggesekan dua jari ke bawah untuk scroll ke bawah dan sebaliknya.

Nah, bagaimana dengan touchpad atau touchscreen? Apakah mereka menganut konvensi yang sama? Jawabannya : TIDAK. Minimal untuk touchscreen pada iPhone. Untuk scroll ke bawah, jari harus digesekkan ke atas, sedangkan untuk scroll ke atas jari harus digesekkan ke bawah. Nah lo? Berarti Apple melakukan kesalahan fatal dong kalau begitu namanya. Ketika yang lain ke bawah, dia ke atas sendiri.

Bagaimana menurut Anda?

PS : Update terakhir :

1. Sony Ericsson M600i : Menggunakan sideroller dan touch screen yang memiliki behaviour sama : putar / gesek ke bawah untuk scroll ke bawah dan sebaliknya.

2. Blackberry Javelin : Rollerball, tanpa touchscreen – dan ternyata untuk rollerball pada Blackberry Javelin juga menganut konvensi yang aneh. Putar bola ke atas untuk scroll ke bawah dan sebaliknya.

3. Samsung Corby : Touchscreen yang menganut navigasi ala Apple iPhone. Gesek ke atas untuk scroll ke bawah dan sebaliknya.

SEO (Search Engine Optimization) adalah teknik-teknik yang digunakan oleh Web Developer untuk meningkatkan popularitas sebuah situs di mata search engine, khususnya Google. Dengan SEO yang baik, sebuah situs akan lebih mudah ditemukan oleh pengunjung – yang artinya lalu lintas ke situs Anda juga relatif lebih lancar. Lalu lintas yang baik = keuntungan yang lebih besar , baik finansial maupun non-finansial.

Google senang text. Sebuah website dengan artikel panjang lebar dan keyword yang disebar di setiap penjuru situs relatif akan lebih sukses di indeks Google ketimbang website yang hanya berisi gambar. Hal ini terjadi karena mesin belum dapat membaca gambar seperti layaknya manusia. Mesin harus bergantung pada deskripsi yang diberikan oleh manusia untuk membaca sebuah gambar. Dimana kerap, deskripsi tersebut tidaklah akurat dan memadai. Sehingga pelajaran yang dapat kita ambil : Buatlah Website dengan teks sebanyak mungkin dan gambar sesedikit mungkin? Salah besar!

Selama ini kerap terjadi perdebatan bahwa situs dengan SEO yang bagus akan selalu berbentuk sebuah portal dengan teks dan keyword yang melimpah. Tapi, mengingat kultur orang Indonesia yang malas membaca, banyak situs yang kemudian menyuguhkan tampilan yang ‘wah’, penuh gambar dan warna. Namun, mereka melupakan hal-hal yang mungkin tidak tampak langsung di mata pengunjung, tetapi memiliki dampak yang cukup signifikan. Sebagus apapun situs Anda, apabila pengunjung tidak dapat menemukan Anda, tidak ada artinya bukan?

Dengan teknik layout terbaru, kini kita dapat membuat desain yang indah, dengan banyak elemen gambar, tanpa mengorbankan tingkat SEO pada situs Web kita. Mari kita coba lihat salah satu desain yang pernah kami tangani, sebuah toko online dengan halaman depan yang hampir tanpa teks, konten yang hampir seluruhnya berisi gambar.

Kecuali navigasi pada bagian atas dan bawah pada situs tersebut, semua teks yang ada harus ditampilkan menggunakan gambar. Hal ini disebabkan karena keterbatasan font yang dimiliki browser tidak memungkinkan menampilkan font-font indah yang dipakai pada desain tersebut. Celakanya, apabila kita menggunakan teknik layout standard, search engine tidak mungkin menemukan tulisan “Special Promo” atau “Discount 20%” karena semuanya berbentuk gambar.

Untuk mengatasi hal ini, mari kita bedah halaman ini berdasarkan logika ketika kita menulis sebuah prosa – karangan yang baik dan benar :

1. Judul (header) utama / level 1 adalah nama dari toko ini. Gila Bass.com. Apa itu Gila Bass.com ? sudah selayaknya deskripsi yang baik disertakan dibawahnya.

2. Turun ke bawah, header level 2 adalah promo super special Gitar Bass Fender yang menjadi fokus dari halaman ini.

3. Turun 1 hierarki lagi, kita dapat menganggap 4 banner yang berjejer di bawah banner utama sebagai header level 3.

Dengan melihat sebuah halaman web sebagai sebuah dokumen dengan logika prosa, kita dapat memberikan nilai semantik, struktur, serta SEO yang lebih baik. Plus, kita juga dapat melihat sebuah halaman Web sebagai sebuah cerita dengan pesan yang akan disampaikan. Tidak hanya pada level desain grafis juga, tetapi pada level kode yang nantinya akan membangun situs tersebut.

Mari kita telusuri satu per satu implementasinya :

1. Header level 1 : Logo Gila Bass

Normalnya, kode yang diperlukan untuk menampilkan gambar tersebut adalah seperti ini :

Apabila dibaca oleh mesin, kode tersebut tidak terbaca apa-apa. Hanya sebagai syntax programming tanpa konten apapun. Namun, apabila kita ingin lebih cermat, kita dapat memberi konten yang baik, tanpa mengorbankan estetika :

Dengan kode di atas, search engine akan tahu bahwa ini adalah situs Gila Bass – ditandai dengan pemberian judul halaman melalui penggunaan tag header level 1. Selain itu kita juga bebas memberi deskripsi (dan tentu saja keyword yang relevan).

Manipulasi tingkat lanjutnya kita lakukan pada level CSS. Jangan pernah mencampuradukan isi karangan prosa (HTML) dengan warna tinta yang digunakan (CSS). Ingat bahwa sebagus apapun tinta yang digunakan, apabila isi karangan tersebut jelek, tidak akan ada yang membacanya

2. Header Level 2 : Promo Super Special

Normalnya, kode yang diperlukan untuk menampilkan gambar tersebut adalah :

Namun, kita modifikasi menjadi :

Dengan begitu, ketika ada orang yang mencari ‘Bass Fender Murah’ , search engine dapat membantu orang tersebut karena deskripsi yang lengkap, yang dapat terbaca oleh search engine tersebut. Elemen strong dipakai sebagai pengganti span untuk memperkuat penekanan terhadap promosi tersebut.

3. Header Level 3 : Misc Promo

Perlu kita ingat bahwa promo-promo di bawah ini adalah list dari promo-promo sekunder. Sehingga sudah selayaknya, selain menggunakan teknik-teknik di atas, secara semantik kita taruh dalam sebuah list HTML :

Demo di atas hanya sedikit dari banyak sekali variasi teknik yang dapat kita terapkan untuk mencapai sinergi antara desain yang indah dan SEO yang baik. Intinya adalah melihat sebuah dokumen, seaneh apapun tampilannya, sebagai sebuah karangan prosa yang memiliki struktur yang logis dan semantik.

Sudahkah halaman situs anda logis dan semantik ?

Setelah cukup sekian lama berkelana di dunia persilatan, jurusan Web development, saya sampai di suatu persimpangan yang cukup sulit. Selama ini, saya terbiasa mengerjakan semuanya sendirian: mulai dari mendekati klien, menyusun requirement, menawarkan solusi, mendesain tampilan, membuat program, testing, dan validasinya. Namun, ketika saya mencoba menimba ilmu dengan berenang di kolam yang lebih besar, muncul pertanyaan dari salah satu kolega sekaligus employer saya: apa spesialisasi mu?

‘Spesialisasi’ disini biasanya hanya memiliki 2 implikasi jawaban, yakni Desain atau Coding. Desain atau yang lebih dikenal dengan istilah keren ‘Front-End-Designer’ adalah seorang profesional yang memproduksi tampilan situs Web yang indah. Sedangkan Coding atau ‘Back-End-Programmer’ adalah seseorang yang merekayasa fungsionalitas dari situs Web tersebut.

Nah, disitulah saya pusing. Karena ilmu saya yang pas-pasan, saya bingung dimasukkan ke mana. Begini reka perkaranya :

1. Kalau masuk ke Front-End, walaupun saya senang sekali mengutak-atik hal-hal yang berhubungan dengan web standards, accessibility, dan usability, tapi desain saya minimalis sekali. Mengingat background saya, saya rasa juga sulit bagi saya untuk bersaing dengan teman-teman yang berasal dari diskomvis, seni, atau bahkan arsitektur.
2. Kalau masuk ke Back-End, walaupun background dari informatika, tetapi saya juga sebenarnya mumet kalau disuruh belajar macam-macam bahasa pemrograman. Bahasa kebangsaan saya adalah PHP, begitu menurut sumpah pemuda tahun 2004. Di luar itu, saya nol besar.

Dari kebimbangan tersebut, saya menemukan secercah jawaban. Apapun profesinya, minumnya teh botol sosro. Biarkan anjing menggonggong, minumnya juga teh botol sosro. Saya tetap ingin ngotot mengejar passion saya, yakni user experience design. Kenapa user experience design? Jawabannya simpel : saya senang melihat orang tersenyum

Saya senang sekali melihat raut muka seorang user atau klien yang puas karena sebuah situs Web berhasil memenuhi kebutuhan mereka dengan baik. Seperti halnya seorang pelanggan setia sebuah restoran atau supermarket, it’s more than what meets the eye. Tidak hanya sebatas tampilan, tetapi ada banyak sekali faktor yang dapat mengubah seorang pengunjung menjadi seorang pelanggan yang puas dan setia.

Akhir renungan saya membawa saya kembali pada frase ‘remember the love‘. Seperti apapun dunia menghadang, asal ada kekuatan cinta, kita pasti mampu maju menghadapinya. Amin.

Dimanakah letak cinta Anda?

PS : Post ini juga adalah adalah awal dari riwayat blog ini, dimana saya akan banyak membagi cinta dan hasrat saya terhadap bidang user experience design.