Pertemuan ke-6 Web Design Guidelines Evaluasi

Presentasi berjudul: "Pertemuan ke-6 Web Design Guidelines Evaluasi"— Transcript presentasi:

1 Pertemuan ke-6 Web Design Guidelines Evaluasi
Web Usability Pertemuan ke-6 Web Design Guidelines Evaluasi

2 7C’s Framework to E-commerce
A common way to design ang evaluate a website - is the 7 C's approach. As the name suggests, the 7C's Framework consists of seven different elements, each starting with the letter C - Context, Content, Commerce, Community, Connection, Communication and Customisation.

3 Context Context refers to the sites layout and design. It can be split into two main subcategories - form (or aesthetics) and function. Content Content is concerned with all the websites contents, like text, imagery, video and sound. The websites Offering Mix refers to how much weight is given to products, services and information. The Appeal Mix describes how the website promotes these offerings (through a rational or emotional appeal). Commerce Commerce is simply the websites capacity to sell a product or service, mostly through online means. Community How does the site enable interaction between its users? Connection Connection refers to how the site is linked to other websites. Communication Does the site communicate with its users? Customization Does the website allow for customisation based on user preferences?

4 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

5 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)

6 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

7 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

8 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”

9 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

10 Penulisan Isi / Content (II)
Spasi / titik sebaiknya dihindari bila tidak perlu L.O.B.S.T.E.R.S L O B S T E R S Mengacaukan hasil pencarian search engine bagi user yang menjadi “lobster” Gunakan font size yang relatif, jangan absolute Font size: 11px Font size: small

11 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 berbeda-beda

12 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

13 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

14 Search Engine (II) Penempatan pada kiri atas / kanan atas paling umum
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 masing-masing bila mereka butuh Penempatan pada kiri atas / kanan atas paling umum Gunakan kata “Go” atau “Search” untuk label tombol (button)

15 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

16 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

17 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

18 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

19 URL & Nama Domain Gunakan nama yang singkat, jelas, dan mudah diingat
Pikirkan alternatif nama domain dengan mempertimbangkan abreviasi:

20 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>

21 Lain-lain Jangan pasang guestbook di website perusahaan
Tulis link untuk registrasi dengan sedikit kata-kata promosi: Sign in to get recommendation Berikan contoh newsletter bila kita menginginkan alamat user Supaya user tidak curiga akan dikirimi spam