Web Usability

Web Usability
• Web Design Guidelines
• Evaluasi
Framework E-Commerce
7 C’s Framework
• Mohammed A. Rafi [2002] suggest the
customer interface design features are
described by the 7C’s framework model. This
model offers :
1.
2.
3.
4.
Context (site layout and design)
Content (text, image, audio,video and graphics)
Connection (site and inter-site hyperlinks)
Communication (customer –web site and customer –
customer via web site)
5. Community (services between customer(s) – web site),
6. Commerce (sales via the web site), and
7. Customization (web site’s ability to be personalized by the
customer) as the seven elements of the web site’s customer
interface.
Homepage Design
• Kesempatan pertama dan mungkin terakhir untuk
menarik perhatian pengunjung website
• Halaman utama surat kabar:
– Prioritas pada berita-berita utama
– Style / design yang konsisten
Penyampaian Visi, Misi, dan
Tujuan Website (I)
• Branding & design (look) yang unik dan mudah
diingat
• Logo perusahaan ditaruh di tempat yang secara
cepat bisa diketahui pengunjung
– Tidak perlu logo yang besar
– Tempat terbaik: kiri atas (untuk metode membaca
dari kiri ke kanan)
Penyampaian Visi, Misi, dan
Tujuan Website (II)
• Pasang tag line yang menyimpulkan apa visi dan misi
perusahaan
– Singkat, jelas, tepat
• Ford: Striving to make the world a better place
• Global Sources: Product and Trade Information for Volume Buyers
– Mungkin tidak begitu penting untuk perusahaan
raksasa seperti Microsoft, karena semua orang sudah
tahu
• Tekankan nilai jual dari sudut pandang user
– Walmart: lowest price
– Pasang di title bar, atau tag line
Penyampaian Visi, Misi, dan
Tujuan Website (III)
• Prioritaskan tugas / tujuan yang penting
– Fokus pada 1-4 hal terpenting, misalnya pada CNN Financial
News Website:
• Cek harga saham
• Ringkasan berita finansial di USA
• Gunakan nama perusahaan
– Ford Inc. bukan Ford’s Website
• Berikan link untuk menemukan informasi tentang
perusahaan tsb
– About Us: About Ford
– Investor Relations
Penyampaian Visi, Misi, dan
Tujuan Website (IV)
– Press Room / News Room:
• gunakan tag-tag headline untuk berita utama dg sedikit
deskripsi / ringkasan
• tidak perlu mencantumkan tanggal dan jam
– Employment: lowongan kerja di perusahaan tsb
• Jangan memasukkan informasi internal suatu
perusahaan, misalnya peraturan intern antar
pegawai
• Jika website tsb mengumpulkan informasi
pelanggan, tambahkan link “Privacy Policy”
Penulisan Isi / Content (I)
• Spesifik
– Informasi Pelanggan vs Tips Menghemat Energi
• Jangan gunakan bahasa marketing
– Dream, Plan, and Go (Travelocity) vs Vacation Planning
• Hindari penggunaan tanda seru, kesannya seperti
berteriak pada user
• Penggunaan huruf besar (uppercase) membuat kata jadi
susah dibaca
– Psychology of Words
– PSYCHOLOGY OF WORDS
Penulisan Isi / Content (II)
• Spasi / titik sebaiknya dihindari bila tidak
perlu
– L.O.B.S.T.E.R.S
LOBSTERS
– Mengacaukan hasil pencarian search engine bagi
user yang menjadi “lobster”
• Gunakan font size yang relatif, jangan absolute
– Font size: 11px
– Font size: small
Links
• Jangan gunakan instruksi “klik di sini” sebagai nama
link
– Click Here for Shopping Basket
– Shopping Basket
• Gunakan warna link berbeda untuk link yang pernah
dan belum pernah dikunjungi
– Gunakan warna yang kontras dengan text
• Gunakan icon-icon yang menggambarkan isi link bila
diperlukan saja
– Penafsiran orang terhadap suatu gambar icon bisa berbedabeda
Navigasi
• Taruh link-link navigasi utama di tempat yang
mudah diketahui oleh user
• Hindari drop down menu untuk navigasi bila
tidak perlu
• Kumpulkan hal-hal (item) yang berhubungan
menjadi satu grup link navigasi
• Jangan masukkan link aktif pada page yang
sedang dilihat
Search Engine (I)
• Salah satu elemen terpenting, sebagai alat bantu bagi
user untuk menemukan suatu produk/ informasi
tertentu dengan cepat
• Berikan input textbox
– Jangan mengharuskan user mengklik link “Search” untuk
menampilkan formulir pencarian
– Input box harus cukup lebar supaya user dapat melihat kata
kunci yang telah mereka masukkan (+ 25 – 30 karakter)
– Penempatan di bagian atas halaman, terpisah dari area
untuk banner
– Gunakan warna putih yang standar
Search Engine (II)
– Bila “Advanced Search” tersedia, tawarkan
pilihan ini setelah hasil pencarian ditunjukkan
– Default: Search Entire Site (Cari seluruh site)
– Tidak perlu mengikutsertakan “search the web”
• User akan menggunakan search engine favorit masingmasing bila mereka butuh
• Penempatan pada kiri atas / kanan atas paling
umum
• Gunakan kata “Go” atau “Search” untuk
label tombol (button)
Grafik dan Animasi (I)
• Secara visual terlihat cantik tapi menyebabkan waktu
loading menjadi lebih lambat
• Gunakan grafik bila benar-benar perlu, bukan hanya
sebagai dekorasi
– Sebagai alat bantu untuk menyampaikan pesan /
informasi
• Hindari “watermark” (gambar background dengan
text yang mengapung)
• Hindari penggunaan animasi bila tidak perlu, kecuali
untuk demo
Grafik dan Animasi (II)
• Tagline, logo, headline (topik / berita utama)
jangan dibuat animasinya
– Kelihatan seperti iklan, susah dibaca
• Hindari popup window bila tidak perlu
• Untuk logo perusahaan, buat link menuju
halaman index bila diklik
Desain Grafis
• Gunakan warna kontras untuk text dan background
sehingga lebih mudah dibaca
• Pada tampilan screen 800 x 600, hindari horizontal
scrolling
• Buat layout yang bisa menyesuaikan lebar screensize
dengan berbagai ukuran (auto-strech)
– <table width=100%>
– <table width=800>
• Optimalkan desain minimal sekitar 770 pixel
• Hindari penggunaan frame
Judul Window (Window Title)
• Penulisan judul dimulai dengan nama
perusahaan
– New York Times (bukan The New York Times)
– Bila digunakan dalam proses bookmark, pencarian
menjadi lebih mudah (alphabetical)
– Tidak perlu mengikutsertakan .com
• Cukup Amazon, tidak perlu ditulis Amazon.com
• Sertakan deskripsi singkat
• Limit penulisan judul title sampai dengan 7-8
kata atau < 64 karakter
URL & Nama Domain
• Gunakan nama yang singkat, jelas, dan
mudah diingat
• Pikirkan alternatif nama domain dengan
mempertimbangkan abreviasi:
– www.wall-mart.com
– www.wallmart.com
Penulisan Tanggal / Waktu
• Biasa digunakan pada live chat, update harga
valuta asing, dsb
• Gunakan zona waktu
– GMT
– EDT (GMT – 4)
– A.M / P.M
• Pencantuman tanggal “last modified” dengan
format <tanggal, jam>
Lain-lain
• Jangan pasang guestbook di website
perusahaan
• Tulis link untuk registrasi dengan sedikit katakata promosi:
– Sign in to get recommendation
• Berikan contoh newsletter bila kita
menginginkan alamat email user
– Supaya user tidak curiga akan dikirimi spam