Selamat Datang

7 Tips Desain Web Untuk Kenyamanan Pengunjung (UX)

Ketika anda pertama kali mengunjungi sebuah situs, apa yang pertama kali anda lihat dan nilai?.
Desain!. Yaa, desain memberikan kesan pertama pada pengunjung. Baik buruknya desain sebuah blog di mata pengunjung menjadi aspek penting yang harus anda perhatikan. Jika tidak, bisa jadi ketika pengunjung anda baru mengakses blog anda, sepersekian detik kemudian langsung mengklik icon x di pojok tab browser karena desain yang tidak menarik. Baik buruknya desain blog adalah cermin dari konten yang berkualitas.

Desain Ramah Pengguna (User-friendly)

Desain Ramah Pengguna (User-friendly)

Oleh karena itu, Desain yang catchy harus anda terapkan di blog anda. Desain anda harus memikat dan memberi kenyamanan kepada pengunjung sehingga mereka ingin balik lagi nantinya. Namun, yang jadi masalah adalah bagaimana membuat desain blog yang membuat pengunjung nyaman. Ingat loh : Kenyamanan pengunjung. Karena desain blog yang keren juga belum tentu membuat pengunjung anda nyaman. Nah, untuk hal ini saya mempunyai beberapa tips yang semoga bermanfaat bagi anda.

Berikut ini adalah beberapa hal yang harus anda ingat dan jadikan acuan dalam mendesain blog anda :

1. Keserasian

Hal pertama sebelum mendesain blog adalah mengkaji desain yang bagaimana yang paling cocok untuk diterapkan di blog anda. Jangan sampai salah. Sebaiknya anda mencari referensi dulu desain yang seperti apa yang cocok dengan topik blog anda. Jika blog anda tentang travel, sebaiknya anda kunjungi dulu web/blog terkenal yang membahas travel. sekedar untuk referensi.

Poin ini sebaiknya diingat selama anda melakukan langkah-langkah desain blog. Setiap yang tampil di blog anda harus sesuai dengan topik blog anda, atau setidaknya tidak mengacau (OOT).

2. Kebergunaan

Dalam mendesain blog, anda harus memperhatikan widget-widget, Call to action, link dan apapun yang tertampil di blog anda. Kemudian, bayangkanlah anda menjadi seorang pengunjung blog yang sangat awam. Lalu, pikirkan apa yang akan pengunjung rasakan ketika melihat blog anda. Apakah mereka akan merasa risih atau merasa terbantu?

Pikirkanlah apakah widget ini diperlukan pengunjung anda? apakah link ini diperlukan oleh pengunjung blog anda? Jika anda ragu atas pertimbangan anda sendiri, tak ada salahnya melakukan survey & voting. Intinya, segala sesuatu yang tampil di blog anda harus memiliki nilai manfaat bagi pengunjung anda. Jadi, hilangkan hal-hal yang tidak penting.

3. Efektifitas & kesederhanaan

Setelah anda mengerti prinsip kebergunaan, maka anda tahu widget, link, dan apa saja yang harus ditampilkan di blog anda. Itu belum selesai. Sekarang, yang harus anda pikirkan adalah apa yang pengunjung rasakan ketika menggunakan/mengakses semua itu. Umumnya, orang suka blog yang tidak bertele-tele dan sederhana. Jadi, tampilkan fasilitas di blog anda dengan seefektif dan sesederhana mungkin. Misalkan mengoreksi anchor link atau kalimat call to action menjadi 3-5 kata saja, tapi tidak menghilangkan arti pokoknya. Semakin padat dan jelas, semakin enak dibaca. Selain itu, kefektifan dan kesederhanaan juga menghemat tenaga anda.

4. Navigasi

Navigasi adalah arahan, petunjuk atau jalan di sebuah blog. Begitulah mungkin singkatnya. Buatlah navigasi yang mudah di blog anda. Desain anda mungkin sudah disenangi karena 3 poin diatas. Tapi ketika pengunjung mengunjungi sebuah halaman di blog anda, belum tentu mereka tetap suka jika navigasi blog anda susah.

Contoh cara membuat navigasi yang mudah misalnya dengan membuat menu utama, memasang breadcrumb, nomor halaman, peta situs (site map), artikel terkait, dan lain-lain.

Manjakanlah pengunjung anda dengan navigasi yang mudah.

5. Ketertarikan dan Penyegar Mata

Image by mkhmarketing

Image by mkhmarketing

Poin ini adalah inti dalam seni mendesain. Tujuan mendesain adalah membuat orang tertarik. Dan, dalam mendesain blog, pikatlah hati pengunjung dengan desain anda yang WOW. Nah, berikut ini adalah 4 elemen desain web yang paling berpengaruh :

a. Gambar & Ikon

Walaupun sudah ada kode CSS untuk manipulasi desain, jangan pernah remehkan gambar!.
Desain tanpa gambar itu bagaikan sayur tanpa garam. Gambar yang keren akan membuat pengunjung anda betah. Masalahnya mungkin ada pada pembuatan gambar itu. Saya tahu, tidak semua orang bisa menggambar apalagi pakai komputer. Tapi, selalu ada jalan keluar di setiap masalah. Sekarang sudah sudah banyak blog-blog yang membahas desain grafis misal : http://ilmugrafis.com.

Bagaimana dengan ikon ? Tulis saja keyword “Download Iconset for web” di google. Anda akan menemukan ratusan website penyedia icon yang mengratiskan ikonnya.

b. Warna

Kekuatan warna tidak diragukan lagi dalam desain. Penyeleksian dan penggabungan warna dapat menghasilkan desain yang bagus. Saran saya, pakailah warna-warna yang cerah untuk desain blog anda. Juga, Bedakan teks tertentu dalam sebuah artikel dengan warna. Mata pengunjung akan terhibur dengan ini. Tapi ingat, jangan pakai warna-warna yang terlihat “alay”.

Lakukan Riset pada kode heksadesimal atau perpaduan warna red green blue (RGB) untuk menemukan warna-warna yang keren.

c. Font

Font memiliki posisi penting dalam membuat pengunjung nyaman saat membaca sesuatu di blog anda. Gunakan font-font catchy terutama pada bagian teks Call to action, kepala konten, dan paragraf isi konten anda. Kunjungi layanan Google Font untuk menemukan font-font yang keren.

Hal-hal yang perlu diperhatikan dalam mendesain font dengan kode CSS adalah pada properties Line Height (tinggi baris), font-family, dan font-size. untuk line height, gunakan minimal ukuran 1,3 untuk konten (line-height:1.3;). Font family adalah jenis font yang anda gunakan. Dan untuk font-size, gunakan minimal ukuran 15px untuk konten (font-size:15px;).

Perhatikan juga warna font. Rekomendasi saya, gunakan kode warna #333 – #777 (Hitam keabu-abuan) untuk font konten. Font dengan warna hitam yang terlalu kuat menurut saya kurang catchy.

d. Margin dan Padding

Naah, ini yang kadang dilupakan oleh para blogger dalam mendesain blognya. Margin dan padding berfungsi untuk memberi jarak elemen satu dengan yang lainnya. Margin dan padding akan membuat web terlihat rapi dan tidak terlalu membingungkan, bejibun dan acak-acakan.

Gunakan minimal ukuran 3px untuk margin maupun padding di tiap elemen web.

6. Bahasa

Dalam setiap teks Call to Action atau teks apapun di blog anda, tulislah dengan gaya sendiri yang santai, luwes dan mudah dimengerti. Hindari pemakaian kata-kata yang tidak awam di mata pengunjung. Apalagi ketika sedang ada suatu event di blog anda yang mengharuskan pengunjung berpartisipasi dan mengikuti langkah-langkahnya.

Image credit by Rodney Martin

Image credit by Rodney Martin

Ingatlah, bahwa tidak semua pengunjung sangat mengerti dengan web atau komputer. Kadang-kadang bahkan ada yang hampir tidak tahu bagaimana untuk kembali ke halaman sebelumnya.

7. Desain Responsive

Secara singkat Desain Responsive adalah sifat desain sebuah situs dimana ketika diakses di perangkat apapun (PC/NoteBook/IPad/SmartPhone/HP), akan menyesuaikan dengan ukuran layar pada perangkat. Di era tablet dan SmartPhone ini, desain sebuah web yang responsive sangat diperlukan agar blog anda tetap menarik pada perangkat apapun yang pengunjung pakai.

Untuk Blog jenis blogspot, Desain responsive itu sudah ada fiturnya. Walaupun dengan tampilan yang sangat sederhana. Sedangkan, untuk wordpress ataupun web yang tidak memakai CMS, harus mengatur sendiri. Silahkan baca Panduan Web Design Responsif untuk lebih lanjutnya.

Nah itu saja dari saya. Tips terakhir, kunjungilah web-web yang membahas tentang web desain untuk meningkatkan skill anda. Berikut ini web-web yang saya rekomendasikan :

  • http://tympanus.net/codrops
  • http://www.webdesignledger.com
  • http://www.1stwebdesigner.com

Bagi anda yang awam dengan web desain, saya yakin akan sulit bagi anda untuk menerapkannya. Tapi setidaknya artikel ini mungkin akan anda jadikan referensi saat anda sudah cukup ahli dalam desain.

Saat membaca beberapa poin diatas, saya menjelaskan sedikit kode CSS. Nah, jika anda masih belum mengerti kode CSS untuk mendesain web, anda bisa baca artikel “Pengenalan CSS dasar di blog pribadi penulis. Jika anda ingin langsung menerapkannya di blog anda, tidak ada salahnya meminta bantuan atau menyewa jasa yang ahli.

Sekian, semoga bermanfaat :).





Penulis :

Seorang Blogger, Web Developer dan Web Designer pemilik webTemplateScream, Tempat download template website gratis. Kunjungi juga blognya untuk mendapatkan Tips gratis seputar Ngeblog dan Teknologi Web. View all posts by Muhammad Syakirurohman

Comments

15 thoughts on “7 Tips Desain Web Untuk Kenyamanan Pengunjung (UX)

  1. terimakasih tipsnya, moga bermanfaat ^_^

  2. sama-sama. semoga terbantu.

  3. moch fadhil says:

    Kalau blog saya bagaimana ya ?

  4. Armin says:

    Wah saya kadang suka lupa tuh sama poin ke 5, artikel ini mengingatkan kembali penting nya poin-poin kecil dari web-design. Trims

    • sama, dulunya juga saya tidak pernah memperhatikan itu. tapi, semakin sering saya ‘melototi’ desain-desain yang bagus di website-website, saya jadi tahu apa yang membuatnya menarik..

      oke, sama-sama

  5. Gunawan Gee says:

    Keren-keren, faktor utama agar blog lebih simple apa ya dalam desain ?

  6. yang jadi masalah adalah bagaimana membuat desain blog

  7. […] Sumber : http://www.tutorial-webdesign.com/7-tips-desain-web-untuk-kenyamanan-pengunjung-ux/ […]

  8. sangat setuju sekali dengan artikel ini mas.
    Orang indonesia masih banyak berfikir desain yang bagus itu banyak tampilannya, padahal mereka lupa efisiensi dan efektifias itu hal penting juga.

  9. […] ingin tips yang lebih praktis lagi tentang desain web, mungkin anda bisa baca artikel ini : 7 Tips Desain Web Untuk Kenyamanan Pengunjung (UX).Itu saja dari saya, semoga bermanfaat!~Muhammad Syakirurohman~google_ad_client = […]

  10. […] 10 Tips Web Design Untuk Kebergunaan(Usability) Website 7 Tips Desain Web Untuk Kenyamanan Pengunjung (UX) […]

  11. […] Baca Juga : 7 Tips Desain Web Untuk Kenyamanan Pengunjung (UX) […]

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development