Materi Pertemuan Ke-7 Web Design Guidelines Evaluasi

Slides:



Advertisements
Presentasi serupa
Mengelola isi halaman web
Advertisements

Dasar-dasar Web Design
Web Statis vs Web Dinamis
1 Start with Question • Pernahkah Anda menutup sebuah website karena waktu loading yang lama? • Seberapa sering Anda menemukan website yang –tidak (atau.
Pertemuan ke-6 Web Design Guidelines Evaluasi
Desain Web Nanik Triana, M.Kom
Pertemuan 2.  Dreamweaver adl salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk.
Analisa 5 Web dengan Bagus dan Jelek
HTML PEMROGRAMAN INTERNET. Form & Input HTML Form adalah area yang bisa ditempati oleh elemen form. Elemen form adalah elemen yg mengijinkan user memasukkan.
PalComTech. WORLD WIDE WEB (WWW), Adalah sarana internet yang menampilkan tampilan berupa gabungan teks, grafis, suara bahkan video yang bersifat interaktif.
Web Content Analysis. Isi yang akan disajikan oleh WebApp dalam ditentukan formatnya baik itu berupa text, grafik dan image, video, dan audio.
Web Usability.
Pertemuan ke-6 Web Design Guidelines Evaluasi
Desain Antar Muka (Interface) Disusun Oleh : Dr. Lily Wulandari Program Pasca Sarjana Magister Sistem Informasi Universitas Gunadarma.
KONSEP WEB.
Membuat Blog Menggunakan Word Press. Contents Mengganti Template Mengisi Content Langkah-langkah Membuat Blog Persyaratan Membuat Blog Pendahuluan.
Membuat Blog Pembelajaran Menggunakan
Desain permodelan grafis
KEMENTERIAN PENDIDIKAN NASIONAL
Ketergunaan Web Pertemuan ke-6 Web Design Guidelines Web Design Guidelines Evaluasi Evaluasi.
Bekerja dengan file dan desain web
Searching, Browsing, INTERNET Searching, Browsing, .
Bekerja dengan file dan desain web PERTEMUAN 6. Beberapa type file -CSS, (Cascading Style Sheet) ekstensi.css. Untuk format isi HTML dan mengendalikan.
Ega puspitriani Pendidikan B. Jepang 2 A
Pertemuan 10 Understanding Marketing Strategies on Internet 1.
FORM dan FRAME.
Usability: Disain Web yang Brilian
Meta Tag & Search Engine Gembong Edhi Setyawan. Apa Itu Meta Tag? Informasi yang dimasukkan kedalam area "head" dalam suatu halaman website, dimana informasi.
MENU dan navigasi situs
Mengelola isi halaman web
Interaksi Manusia & Komputer Website
Pembuatan Media Presentasi
Search Engine Optimization
Desain Antar Muka (Interface)
MANAJEMEN BLOG.
Interaksi Manusia dan Komputer
Pertemuan ke-6 Web Design Guidelines Evaluasi
Framework, Jenis, dan Tipe E-Commerce
Membangun Menu Sistem dan Skema Navigasi
KONSEP DASAR DESAIN WEB
INFORMATICH TRAINING CENTER
Pramita Firnanda 2 D3 Teknik Informatika A
Web-Based User Interface
Pertemuan ke-6 Web Design Guidelines Evaluasi
Microsoft Power Point.
Web-Based User Interface
Web-Based User Interface
konsep TEXT Anwari.,S.Sos.,M.Si diharapkan mahasiswa akan mampu :
E-Marketing.
pendaftaran PEMBUATAN SOAL PENGELOLAAN CLASS FOLDER ATAU KELAS
Pertemuan ke-6 Web Design Guidelines Evaluasi
By : Avissa Qonita sidqi – IX I
MENGOPERASIKAN WEB DESIGN
Web Design Guidelines Evaluasi
MENGOPERASIKAN WEB DESIGN
Menu Drop Down.
Area Kerja Dreamweaver
PAKET PROGRAM APLIKASI
Membangun Web yang baik (lanjutan)
PRESENTASI FRONT PAGE 2003 (XI.IMERCY)
Kelas XII Semester Genap Tahun Pelajaran 2013 / 2014
Hyperlink & Form Pertemuan 11
Hyperlink and Form Session 10 & 11
Persiapan presentasi sebelum UAS
Mengelola isi halaman web
Link pada HTML Dyah Ayu Irawati, ST., M.Cs.
Pertemuan 10 Understanding Marketing Strategies on Internet
Darmawan satyananda Mathematics department State university of malang
MEMBUAT MEDIA PEMBELAJARAN INTERAKTIF DENGAN SLIDE MASTER & HYPERLINK
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
Transcript presentasi:

Materi Pertemuan Ke-7 Web Design Guidelines Evaluasi Web Usability Materi Pertemuan Ke-7 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 : 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) Community (services between customer(s) – web site), Commerce (sales via the web site), and 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 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

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

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

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 kata-kata promosi: Sign in to get recommendation Berikan contoh newsletter bila kita menginginkan alamat email user Supaya user tidak curiga akan dikirimi spam