Ketergunaan Web Pertemuan ke-6 Web Design Guidelines Web Design Guidelines Evaluasi Evaluasi.

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

1 Ketergunaan Web Pertemuan ke-6 Web Design Guidelines Web Design Guidelines Evaluasi 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. 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 Kesempatan pertama dan mungkin terakhir untuk menarik perhatian pengunjung website Halaman utama surat kabar: Halaman utama surat kabar: Prioritas pada berita-berita utama Prioritas pada berita-berita utama Style / design yang konsisten Style / design yang konsisten

5 Penyampaian Visi, Misi, dan Tujuan Website (I) Branding & design (look) yang unik dan mudah diingat Branding & design (look) yang unik dan mudah diingat Logo perusahaan ditaruh di tempat yang secara cepat bisa diketahui pengunjung Logo perusahaan ditaruh di tempat yang secara cepat bisa diketahui pengunjung Tidak perlu logo yang besar Tidak perlu logo yang besar Tempat terbaik: kiri atas (untuk metode membaca dari kiri ke kanan) 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 Pasang tag line yang menyimpulkan apa visi dan misi perusahaan Singkat, jelas, tepat Singkat, jelas, tepat Ford: Striving to make the world a better place Ford: Striving to make the world a better place Global Sources: Product and Trade Information for Volume Buyers Global Sources: Product and Trade Information for Volume Buyers Mungkin tidak begitu penting untuk perusahaan raksasa seperti Microsoft, karena semua orang sudah tahu Mungkin tidak begitu penting untuk perusahaan raksasa seperti Microsoft, karena semua orang sudah tahu Tekankan nilai jual dari sudut pandang user Tekankan nilai jual dari sudut pandang user Walmart: lowest price Walmart: lowest price Pasang di title bar, atau tag line Pasang di title bar, atau tag line

7 Penyampaian Visi, Misi, dan Tujuan Website (III) Prioritaskan tugas / tujuan yang penting Prioritaskan tugas / tujuan yang penting Fokus pada 1-4 hal terpenting, misalnya pada CNN Financial News Website: Fokus pada 1-4 hal terpenting, misalnya pada CNN Financial News Website: Cek harga saham Cek harga saham Ringkasan berita finansial di USA Ringkasan berita finansial di USA Gunakan nama perusahaan Gunakan nama perusahaan Ford Inc. bukan Ford’s Website Ford Inc. bukan Ford’s Website Berikan link untuk menemukan informasi tentang perusahaan tsb Berikan link untuk menemukan informasi tentang perusahaan tsb About Us: About Ford About Us: About Ford Investor Relations Investor Relations

8 Penyampaian Visi, Misi, dan Tujuan Website (IV) Press Room / News Room: Press Room / News Room: gunakan tag-tag headline untuk berita utama dg sedikit deskripsi / ringkasan gunakan tag-tag headline untuk berita utama dg sedikit deskripsi / ringkasan tidak perlu mencantumkan tanggal dan jam tidak perlu mencantumkan tanggal dan jam Employment: lowongan kerja di perusahaan tsb Employment: lowongan kerja di perusahaan tsb Jangan memasukkan informasi internal suatu perusahaan, misalnya peraturan intern antar pegawai Jangan memasukkan informasi internal suatu perusahaan, misalnya peraturan intern antar pegawai Jika website tsb mengumpulkan informasi pelanggan, tambahkan link “Privacy Policy” Jika website tsb mengumpulkan informasi pelanggan, tambahkan link “Privacy Policy”

9 Penulisan Isi / Content (I) Spesifik Spesifik Informasi Pelanggan vs Tips Menghemat Energi Informasi Pelanggan vs Tips Menghemat Energi Jangan gunakan bahasa marketing Jangan gunakan bahasa marketing Dream, Plan, and Go (Travelocity) vs Vacation Planning Dream, Plan, and Go (Travelocity) vs Vacation Planning Hindari penggunaan tanda seru, kesannya seperti berteriak pada user Hindari penggunaan tanda seru, kesannya seperti berteriak pada user Penggunaan huruf besar (uppercase) membuat kata jadi susah dibaca Penggunaan huruf besar (uppercase) membuat kata jadi susah dibaca Psychology of Words Psychology of Words PSYCHOLOGY OF WORDS PSYCHOLOGY OF WORDS

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

11 Links Jangan gunakan instruksi “klik di sini” sebagai nama link Jangan gunakan instruksi “klik di sini” sebagai nama link Click Here for Shopping Basket Click Here for Shopping Basket Shopping Basket Shopping Basket Gunakan warna link berbeda untuk link yang pernah dan belum pernah dikunjungi Gunakan warna link berbeda untuk link yang pernah dan belum pernah dikunjungi Gunakan warna yang kontras dengan text Gunakan warna yang kontras dengan text Gunakan icon-icon yang menggambarkan isi link bila diperlukan saja Gunakan icon-icon yang menggambarkan isi link bila diperlukan saja Penafsiran orang terhadap suatu gambar icon bisa berbeda-beda Penafsiran orang terhadap suatu gambar icon bisa berbeda-beda

12 Navigasi Taruh link-link navigasi utama di tempat yang mudah diketahui oleh user Taruh link-link navigasi utama di tempat yang mudah diketahui oleh user Hindari drop down menu untuk navigasi bila tidak perlu Hindari drop down menu untuk navigasi bila tidak perlu Kumpulkan hal-hal (item) yang berhubungan menjadi satu grup link navigasi Kumpulkan hal-hal (item) yang berhubungan menjadi satu grup link navigasi Jangan masukkan link aktif pada page yang sedang dilihat 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 Salah satu elemen terpenting, sebagai alat bantu bagi user untuk menemukan suatu produk/ informasi tertentu dengan cepat Berikan input textbox Berikan input textbox Jangan mengharuskan user mengklik link “Search” untuk menampilkan formulir pencarian 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) 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 Penempatan di bagian atas halaman, terpisah dari area untuk banner Gunakan warna putih yang standar Gunakan warna putih yang standar

14 Search Engine (II) Bila “Advanced Search” tersedia, tawarkan pilihan ini setelah hasil pencarian ditunjukkan Bila “Advanced Search” tersedia, tawarkan pilihan ini setelah hasil pencarian ditunjukkan Default: Search Entire Site (Cari seluruh site) Default: Search Entire Site (Cari seluruh site) Tidak perlu mengikutsertakan “search the web” Tidak perlu mengikutsertakan “search the web” User akan menggunakan search engine favorit masing-masing bila mereka butuh User akan menggunakan search engine favorit masing-masing bila mereka butuh Penempatan pada kiri atas / kanan atas paling umum Penempatan pada kiri atas / kanan atas paling umum Gunakan kata “Go” atau “Search” untuk label tombol (button) 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 Secara visual terlihat cantik tapi menyebabkan waktu loading menjadi lebih lambat Gunakan grafik bila benar-benar perlu, bukan hanya sebagai dekorasi Gunakan grafik bila benar-benar perlu, bukan hanya sebagai dekorasi Sebagai alat bantu untuk menyampaikan pesan / informasi Sebagai alat bantu untuk menyampaikan pesan / informasi Hindari “watermark” (gambar background dengan text yang mengapung) Hindari “watermark” (gambar background dengan text yang mengapung) Hindari penggunaan animasi bila tidak perlu, kecuali untuk demo Hindari penggunaan animasi bila tidak perlu, kecuali untuk demo

16 Grafik dan Animasi (II) Tagline, logo, headline (topik / berita utama) jangan dibuat animasinya Tagline, logo, headline (topik / berita utama) jangan dibuat animasinya Kelihatan seperti iklan, susah dibaca Kelihatan seperti iklan, susah dibaca Hindari popup window bila tidak perlu Hindari popup window bila tidak perlu Untuk logo perusahaan, buat link menuju halaman index bila diklik Untuk logo perusahaan, buat link menuju halaman index bila diklik

17 Desain Grafis Gunakan warna kontras untuk text dan background sehingga lebih mudah dibaca Gunakan warna kontras untuk text dan background sehingga lebih mudah dibaca Pada tampilan screen 800 x 600, hindari horizontal scrolling Pada tampilan screen 800 x 600, hindari horizontal scrolling Buat layout yang bisa menyesuaikan lebar screensize dengan berbagai ukuran (auto-strech) Buat layout yang bisa menyesuaikan lebar screensize dengan berbagai ukuran (auto-strech) Optimalkan desain minimal sekitar 770 pixel Optimalkan desain minimal sekitar 770 pixel Hindari penggunaan frame Hindari penggunaan frame

18 Judul Window (Window Title) Penulisan judul dimulai dengan nama perusahaan Penulisan judul dimulai dengan nama perusahaan New York Times (bukan The New York Times) New York Times (bukan The New York Times) Bila digunakan dalam proses bookmark, pencarian menjadi lebih mudah (alphabetical) Bila digunakan dalam proses bookmark, pencarian menjadi lebih mudah (alphabetical) Tidak perlu mengikutsertakan.com Tidak perlu mengikutsertakan.com Cukup Amazon, tidak perlu ditulis Amazon.com Cukup Amazon, tidak perlu ditulis Amazon.com Sertakan deskripsi singkat Sertakan deskripsi singkat Limit penulisan judul title sampai dengan 7-8 kata atau < 64 karakter Limit penulisan judul title sampai dengan 7-8 kata atau < 64 karakter

19 URL & Nama Domain Gunakan nama yang singkat, jelas, dan mudah diingat Gunakan nama yang singkat, jelas, dan mudah diingat Pikirkan alternatif nama domain dengan mempertimbangkan abreviasi: Pikirkan alternatif nama domain dengan mempertimbangkan abreviasi: www.wall-mart.com www.wall-mart.com www.wallmart.com www.wallmart.com

20 Penulisan Tanggal / Waktu Biasa digunakan pada live chat, update harga valuta asing, dsb Biasa digunakan pada live chat, update harga valuta asing, dsb Gunakan zona waktu Gunakan zona waktu GMT GMT EDT (GMT – 4) EDT (GMT – 4) A.M / P.M A.M / P.M Pencantuman tanggal “last modified” dengan format Pencantuman tanggal “last modified” dengan format

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