WordPress , sebuah CMS (Content Management System) yang sudah familiar saya kenal semenjak 2008 silam. Kala itu WordPress belum sebegitu populer seperti sekarang. Tahun itu WordPress masih pada versi 2.6, meski demikian tahun itu saya sudah merasakan bahwa WordPress merupakan CMS yang beauty, easy dan User Friendly. 10 Tahun berselang saya tidak membayangkan bahwa wordpress dapat sejauh ini bertahan dan melompat dengan rentetan fitur. Anehnya meski rentetan fiturnya banyak namun masih tetap Beauty, Easy dan User Friendly.

Lha kok bisa?

Tahun 2012, WordPress menguasai hampir 48% pangsa blog mengeser Blogger, Joomla dan sejenisnya. Akhir tahun 2011 terdapat sebanyak 25% situs baru diinstall menggunakan Platform WordPress, tak bisa dibayangkan tahun ini berapa yak :D.

Beauty

Ketertarikan saya pada Platform wordpress (non-hosted) pada waktu itu salah satunya karena templete/theme-nya yang dapat dimodifikasi dengan sangat bagus. Secara default sih biasa, namun para pengembang-pengembang Web mulai berinovasi mengkombinasikan HTML, CSS, dan JQuery untuk membuat tampilan menjadi lebih menarik. Sangat berbeda dengan Blogger. Blogger bagus sih cuman untuk mengganti template ruang geraknya cukup terbatas (susahnya minta ampun kalau mengambil dari Source External). Meski banyak pilihan namun wordpress lebih fleksibel dalam hal pasang/copot template. kalau bosen ya ganti, tinggal switch saja, atur tata letak menu dan sidebar jadi deh website kita dengan tampilan baru 😀  . Dahulu tahun 2008 direpository wordpress sudah banyak yang bagus dan tinggal pilih saja. pada tahun itu wordpress masih new comer oleh karenanya para pengembang wordpress lebih banyak “menjiplak”  visual template Blogger yang bagus-bagus untuk menjadi Template WordPress. Salah satu yang dulu saya pakai adalah template WordPress Fun Theme dari Wp-Zoom.

Dulu kalau bisa buat kayak gini sudah wow banget, tinggal ambil file zipnya install, utak-atik sana-sini, jadi deh…. . Seiring dengan perkembangan jaman ternyata mulai banyak yang mengembangnkan lebih bagus dalam hal UI/UX.

A. Beauty in UI

UI Design merupakan kepanjangan dari User Interface Design atau dalam bahasa Indonesianya Desain Antarmuka Pengguna yang digunakan pada mesin dan perangkat lunak, seperti komputer, peralatan rumah tangga, perangkat mobile, dan perangkat elektronik lainnya, dengan fokus pada memaksimalkan pengalaman pengguna. Didalam wordpress kita banyak mendapati hal ini dimaksimalkan dalam sebuah template, bahkan sangat detil. UI biasanya mencakup Layout (tata letak), Visual Design (desain visual) dan Branding. Di Template wordpress yang sekarang banyak dijual atau dibuat, UI dapat dimaksimalkan dengan mengatur tata letak komponen Header, Footer, Sidebar, Kontent dan Menu. Yang kemudian didesain sedemikian rupa menjadi komposisi yang apik menjadi sebuah Website WordPress yang cantik, uniknya di wordpress Konten-nya juga dapat dipercantik tata letaknya dengan menggunakan Builder. Dalam beberapa kasus orang akan lebih betah berlama-lama di website kita jika tampilannya bagus dibaca juga enak. Website yang mempunyai karateristik demikian biasanya kita jumpai pada website atau Blog yang dimiliki oleh para Artis dan Pekerja Seni. Atau juga orang-orang yang memiliki branding tertentu misalnya Branding produk Bayi, maka tampilan websitenya harus lucu dan dengan dominasi warna terang. Uniknya semua perubahan UI dilakukan pada Theme (atau menggunakan Builder) tanpa merubah Core dari WordPress itu sendiri.

Bagus enggak nya UI,dipengaruhi beberapa faktor yakni :

  1. Clean dan Clear, artinya desain yang dibuat menunjang konten didalamnya, blended dengan isi konten dan tidak kontras. Contoh sangat tidak pas kita membuat website dengan background hitam tapi tulisan didalamnya memakai tulisan warna hitam 😀 .
  2. Webiste bersifat Familiar, artinya sesuai dengan apa yang disajikan pada website, misalnya Websitenya tentang Produk bayi, maka tampilannyapun harus mengesankan itu adalah dunia bayi, maka bentuk font, button, color dan layout-pun harus menyesuaikan.
  3. Bersifat Intuitive, diakui atau tidak kita tidak bisa menyenangkan semua orang karena semua orang mempunyai selera yang berbeda beda, namun dengan melakukan pendekatan desain sesuai dengan konten, maka pengunjung akan bilang “wah ini bagus”, “wah lumayan bagus” dan sebisa mungkin menghindari orang akan berkata “situsnya nggak bagus…” .
  4. Website harus dapat dibuat se-efisien mungkin, tidak terlalu boros dan overlaping pada pemakaian kode (detailnya mungkin lebih pada pembahasan kode).
  5. Harus bersifat Konsisten, beberapa bagian website harus bersifat konsisten antara satu bagian dan bagian yang lain, contoh yang biasanya konsisten adalah bentuk button dan letak menu pada semua page.
  6. Website harus menggunakan “Forgiving Format”, konsep utamanya adalah membuat pengguna website tidak melakukan kesalahan sekecil mungkin yang sebenarnya tidak perlu terjadi, misalnya. Di website kita terdapat sebuah FORM input, nah didalam input tersebut tidak terdapat “warning error” jika mereka salah input atupun Contoh lain penggunaan yang sering kita lihat tentang kasus ini adalah inputan confirm “email” dan “password” untuk menekan kesalahan disisi user.
Contoh Forgiving Format

Contoh Forgiving Format memakai error notice dan confirm password

Nah faktor-faktor diatas biasanya harus dipenuhi oleh Template Desainer WordPress, karena hal spesifik itulah yang dicari oleh seorang Konsumen wordpress Template ketika mereka ingin membangun sebuah website sesuai tuntutan bisnis mereka.

“….Suatu hari Client saya menelpon, dan bertanya Mas bisa nggak dibuatkan website untuk jasa Maid (Penyedia jasa rumah tangga) ?” Saya jawab bisa dengan menggunakan WordPress + Template penyedia Jasa Rumah Tangga…..

B. Beauty in UX

Wordpress Admin Dashboard UX

WordPress Admin Dashboard UX

UX Design berbeda dengan UI Design . UX adalah kepanjangan dari User Experince . UX merupakan bagian dari sebuah Design yang lebih menekankan pada proses pemakaian website menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh pengguna. Contoh yang sederhana yang mungkin sering anda temui adalah ketika anda melakukan belanja Online

 

According to ISO 9241-210, the international standard on ergonomics of human system interaction, the user experience is defined as “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service.” This includes all the user’s emotions, responses (both physical and psychological), beliefs, preferences, perceptions, behaviors and accomplishments that occur before, during and after use.

Template Dashboard UX

Template Dashboard UX

Jadi UX lebih menekankan pada persepsi dan respon dari pengguna, baik sebelum, selama atau setelah menggunakan. UX masih ada hubungan dengan UI sebenarnya, karena UX juga kadang membutuhkan UI untuk berjalan dengan baik. Secara default, wordpress UX lebih banyak ditekankan pada bagian WordPress Dashboard Admin hal yang sama juga dilakukan template WordPress yang melakukan banyak penambahan UX dibagian Admin Dashboard.

Untuk WordPress sendiri UX mengalami perubahan yang cukup significant , misalnya saja dahulu untuk mengubah-ubah setting CSS, tata letak menu, Edit Footer, Edit, Sidebar, mengganti Logo, mengganti header membutuhkan Step yang cukup banyak, nah sekarang WordPress sudah melakukan Inovasi UX dengan menambahkan “Customize” untuk Preview Look dimana seorang Admin User dapat melakukan perubahan pada websitenya secara “RealTime” tanpa harus bolak balik Save dan Refresh.

 

Pada WordPress, Tidak semua UX selalu ada dibelakang kadang juga ada dibagian depan dari wordpress dengan bantuan sebuah plugin yang menunjang wordpress, misalnya Woocommerce, dia menampilkan Shop yang memudahkan pengguna untuk melakukan transaksi dengan UI dan UX yang lumayan mudah untuk dipahami.

C. Beauty in Code

Secara Visual, indahnya Code dari WordPress itu tidak kelihatan :D. Mungkin hanya Web Developer (atau PHP Developer ) saja yang dapat memahami ini. Keindahan kodenya hanya bisa dilihat ketika mengedit file yang ada didalam WordPress (entah di Plugin, Template atau di WordPressnya sendiri), begitu terstruktur rapih. Didalam WordPress kita tidak perlu memikirkan Konsep MVC (Model, View, Controller), karena semua itu sudah dibuatkan oleh WordPress, kita tinggal menggunakannya saja. WordPress dapat di Hook dibagian manapun (Bagian Head, Content, Footer atau dibagian adminnya) dan ketika kita melakukan Hook dapat dilakukan melalui Template ataupun Pluginnya. Dan yang menarik dari WordPress adalah, wordpress mempunyai Ajax-Admin sebagai pengganti Ajax yang penggunaannya cukup Praktis dan juga menyediakan API.

Nah dalam Dunia WordPress ada idiom yang berbunyi “Code is Poetry” karena saking gampangnya programming di WordPress, Blogging itu seperti layaknya pemrograman di WordPress 😛

Untuk Full Codexnya bisa dibaca disini : https://codex.wordpress.org/

Selanjutnya klik Disini