Categories
Weblog Review

Evaluasi Weblog Mandiri

Daftar periksa ini memuat elemen-elemen situs Web dan blog yang umumnya mendapat perhatian khusus. Sesuaikan dengan target pengguna. Dapat dimanfaatkan untuk memeriksa kualitas situs Web secara mandiri. Terutama dari sisi kebergunaan/usability dan aksesibilitas Web. Atau sekadar untuk menguji templat pilihan terbaru.

Rekomendasi disusun berdasarkan pengalaman pribadi sebagai pengguna biasa. Bukan desainer, pengembang, atau profesional Web. Dikombinasikan dengan rekomendasi dari Web Content Accessibility Guidelines 2.0 atau WCAG 2.0. Usable mengandung makna mudah digunakan dan dimengerti oleh kebanyakan pengguna. Aksesibilitas Web bermakna lebih luas. Bukan hanya kemudahan akses bagi difabel, logisnya alur dokumen, tapi juga pelbagai perangkat dan ‘user agents’, modalitas koneksi, pengguna lanjut usia, termasuk mesin telusur Internet/’search engine’.

Saat menilai kebergunaan dan aksesibilitas Web, coba dengan kombinasi kondisi:

  • tampilan CSS non aktif,
  • tampilan gambar non aktif,
  • fungsi ‘javascript’ non aktif.
  • tes tampilan dan fungsi situs di pelbagai peramban Web terpopuler. Misalnya Mozilla Firefox (bermesin Gecko), Internet Explorer (Trident), Google Chrome (WebKit), Opera (Presto), dan Opera Mini.

Pemeriksaan bisa dilakukan manual dan/atau dibantu peranti lunak semi-otomatis semacam validator dan ‘checker’ daring maupun luring.

Tentu tidak semuanya berlaku mutlak. Ada pengecualian di beberapa kondisi. Jika ada yang kurang jelas, silakan konsultasikan dengan desainer dan pengembang Weblog anda.

Tabel 1. Evaluasi kebergunaan dan aksesibilitas Weblog
No. Item Rekomendasi Keterangan
1 Nama domain Unik, mudah diingat dan dipakai.
2 Punya ‘favicon’ Unik, mudah ditemukan di multitab, deskriptif, bukan animasi yang mengganggu mata.
3 ‘Post/page permalink’ Mudah, ringkas, deskriptif.
4 Waktu muat/’loading time’ Cepat.
5 DOCTYPE Sesuai standar W3C. Tidak memakai ‘inline’ CSS jika memilih doctype ‘Strict’.
6 Logo Unik, aksesibel, ‘clickable’ ke laman/’homepage’.
7 Menu navigasi Mudah+aksesibel, konsisten.
8 Menu ‘Skip to main content’ Mudah+aksesibel. Berpeluang bermanfaat bagi semua pengguna jika disetel ‘visible’.
9 Informasi tentang/’about’ dan kontak Mudah+aksesibel.
10 Judul+’tag line’ Weblog Mudah+aksesibel, deskriptif.
11 Kotak pencarian Mudah+aksesibel.
12 ‘Breadcrumb’ (jika diperlukan) Mudah+aksesibel. Terutama jika navigasi kompleks, banyak submenu.
13 Langganan ‘Feed’ Mudah+aksesibel. Sebaiknya berikan pasokan/umpan/’feed’ penuh, bukan ringkasan/’summary’/’excerpt’.
14 Langganan via surel Mudah+aksesibel.
15 Struktur judul halaman–nama situs Mudah dikenali di multitab.
16 Struktur ‘headings’ (h1-h6) Mudah+aksesibel, logis pemunculannya, deskriptif.
17 Kontras warna teks dan latar Mudah+aksesibel sesuai WCAG 2.0. Teks variasi gelap di atas latar pastel lebih dianjurkan.
18 Waktu ‘posting’/pemutakhiran Mudah diketahui. Lebih mudah dikenali jika ada di atas konten.
19 Perataan teks Tepi kiri. Pengecualian pada beberapa kondisi. Misal: huruf Arab, puisi, pantun.
20 Tipe huruf konten Sans-serif (Verdana, Arial). Pengecualian pada beberapa kondisi. Tergantung banyak baris, jarak antar huruf, antar kata, dan ukuran huruf.
21 Jumlah kata per baris Maksimal sekitar 8-12 kata.
22 Jarak antar baris Ada ‘whitespace’ secukupnya.
23 Susunan kalimat Blok paragraf, kalimat aktif, pendek, mudah dipahami.
24 Teks tidak monoton Teks dan grafis saling mendukung.
25 Elemen penekanan (strong dan em) Semantik+mudah (‘scanning’, ‘skimming’, ‘fast reading’)+aksesibel.
26 Kuotasi (q, blockquote) Mudah dikenali, semantik. Bukan sekadar untuk menampilkan blok teks yang berbeda.
27 ‘Listings’ (ul, ol, li) Mudah dikenali (walau tanpa gambar), semantik.
28 Teks ‘anchor’ Mudah dikenali, ‘clickable’, deskriptif. Teks bergaris/berbatas bawah seharusnya ‘clickable’ kan?
29 Pranala eksternal Mudah+aksesibel. Sesuai konteks. Lebih baik jika jelas dibedakan mana yang eksternal/internal.
30 ‘Broken links’ Tidak ada. Semua pranala berfungsi baik.
31 Pranala/URL terbuka di jendela baru. Mudah+aksesibel. Sebaiknya ada peringatan bagi pengguna. RAM/memori internal peranti ‘mobile’ sudah cukup andal mengatasi multitab?
32 Atribut alt (jika diperlukan) Informatif/deskriptif, logis sesuai konteks, tidak duplikasi.
33 Atribut title (jika diperlukan) Informatif, tidak duplikasi.
34 Kontras berkas multimedia (jika ada) Mudah+aksesibel sesuai WCAG 2.0. Misal: kontras suara latar dengan narasi, warna latar gambar dengan teks.
35 Berkas multimedia Ada tombol kendali, pranala ke pengaya/add-ons yang dibutuhkan, dan teks alternatif.
36 Tabel data Punya <table summary="..."> dan <caption>.
37 Formulir komentar (jika ada) Mudah (ada tombol ‘reply’)+aksesibel, urutannya logis walau tanpa CSS.
38 Langganan komentar via surel Mudah, posisinya logis–sebelum tombol ‘submit’.
39 Antispam (jika ada) Mudah+aksesibel. Beberapa sistem ‘captcha’ dan antispam tergantung pada gambar dan/atau ‘javascript’.
40 Navigasi dengan papan ketik/’keyboard tabbing’ Aksesibel, logis, tabindex tidak lagi wajib digunakan. Tabindex kadang tidak logis.
41 Menu ‘Go to top’ Mudah+aksesibel.
42 Elemen berkedip/’blinking’, animasi Aksesibel, bisa dikontrol pengguna.
43 Elemen sejenis ‘marquee’ Aksesibel, bisa dikontrol pengguna.
44 Versi ‘mobile’ Mudah+aksesibel. Menghilangkan fitur yang ada di versi desktop?
45 Versi cetak/’print’ Mudah+aksesibel. Pranala/URL tercetak ‘inline’.
46 Halaman 404 Mudah, tetap informatif.
47 Pesan kesalahan Mudah, informatif. Misal: saat pengisian formulir.
48 Tag meta (‘description’, ‘keywords’) Semantik, aksesibel, logis.
49 Pemakaian elemen <div> Semantik. Div bukan pengganti <table> kan?
50 ‘Pop-ups’ (jika ada) Mudah+aksesibel. Ada peringatan pada pengguna jika akan memunculkan ‘pop-ups’. Di ‘small screen’ ada ‘pop-ups’?
51 Robots.txt Aksesibel bagi mesin telusur Internet.
52 Sitemap Mudah+aksesibel.
53 Versi mesin weblog Terkini/terstabil.
54 Log masuk Tidak mudah ditebak. Nama pengguna bukan ‘admin’. Perlukah menampilkan pranala/tautan log masuk?
55 Proteksi direktori Beberapa direktori penting sebaiknya tidak terbaca publik.

Nomor urut dapat berubah sewaktu-waktu saat pemutakhiran.

19 replies on “Evaluasi Weblog Mandiri”

Saya setuju dengan argumen di atas. Sebuah desain yang baik tidak hanya berdasarkan kreativitas saja. Nice! Informasinya komplit, bisa dijadikan referensi.
:)

ardianzzz,
biasanya ini saya pake sendiri kok, Mas. Kalo ada yang minta review, silakan dicoba dulu daftar ini sendiri. Kalo belum puas, saya bisa bantuin meninjau. :)

Bli, kayaknya bisa menjadi referansi lanjutan untuk review di blog saya.
Nah masalahnya bli dani minta direview, sementara sebagian ref-nya saya ambil disini. Apa nggak kebalik ? ;)

Bli Dani,
[OOT] apa karena menggunakan Web Browser 2.28.1 yang menggunakan engine webkit, sehingga browsernya terdeteksi sebagai safari ?

Pak Aldy,
ngga apa-apa pak, kan sudut pandangnya bisa berbeda tiap pengguna dan peninjau/pe-review. Esensi tinjauan kan sebenarnya memang dari sisi pengguna. Jadi silakan ditambahkan atau dikurangi sesuai kebutuhan dan preferensi peninjau.

Ini saya juga nyoba make Epiphany 2.30 di GNOME Linux + WebKit.

Penggunaan div (di zaman sekarang) tapi semantik? Wah kayaknya susah tuh dok… Permintaan pasar bukan semantiknya, tapi bagus/tidaknya tampilan :)

Mengenai jumlah kata per baris, sepertinya 80-100 kata itu kebanyakan Bli. Bisa bikin klenger kalo sebanyak itu dalam satu baris. Bukannya maksimal sekitar 8-12 kata dalam setiap baris jika diukur dari tingkat kenyamanan baca?

Atau mungkin saya salah paham nih dalam menafsirkan jumlah kata per baris yang masih memenuhi standar kenyamanan baca :)

iskandaria,
maaf, saya yang salah. Terima kasih koreksinya, Mas Is. :) Maksud saya memang jumlah 80-120 kata dalam satu baris yang umum direkomendasikan.

Bicara mengenai penggunaan jumlah kata, mungkin juga perlu diperhatikan lebar paragraf. Paragraf yang terlalu lebar mungkin bisa berdampak buruk pada user experience. Kalau saya pribadi, biasanya menggunakan lebar paragraf sebesar 400px-500px untuk font 16px. Dan yang jelas, artikelnya tidak terlalu panjang.

Ardianzzz,
yak setuju, ergonomi sudut lapang pandang mata untuk membaca sepertinya memang enak segitu itu. Jumlah kata per baris itu pun maksudnya serupa. Kecuali nanti ada perubahan penerimaan pengguna seiring zaman.

Untuk peramban mobile, silakan menyesuaikan. Apakah memberi ‘user experience’ yang berbeda dengan versi desktop (perlakuan khusus untuk tiap peramban ‘mobile’), atau biarkan server ‘mobile’ melakukan tugas kompresi otomatisnya. :)

Untuk panjang pendeknya konten, biasanya disiasati dengan paging atau berseri.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.