Membangun Web yang baik (lanjutan)

Slides:



Advertisements
Presentasi serupa
HTML.
Advertisements

Internet Materi Pertemuan Ke-12.
APA ITU INTERNET? Internet (Interconnected-Network) adalah sebutan untuk sekumpulan jaringan komputer yang menghubungkan situs akademik, pemerintahan,
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.
Kriteria Sebuah Web Site yang Baik
Apa itu Web Browser ? Web Browser adalah suatu software yang digunakan untuk mencari alamat suatu web site yang terdapat pada jaringan Internet Web Browser.
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.
Teknologi Informasi Komputer SMPN 10 Yogyakarta
Desain Web R0312 – Grafik Komputer.
L. Erawan. Each Area Need Different Expertise Pakar Bisnis Pakar Komunikasi Pakar Pengalaman Pengguna.
PalComTech. WORLD WIDE WEB (WWW), Adalah sarana internet yang menampilkan tampilan berupa gabungan teks, grafis, suara bahkan video yang bersifat interaktif.
WEEBLY.COM.
WEB Pengembangan Evangs Mailoa Prinsip Dasar Internet, Web,
Web Usability.
Chapter 8 Desain Web.
HTML By kartika puji pangesti
PEMROGRAMAN WEB DENGAN HTML & php frame work (code igniter)
KONSEP WEB.
HTML-LINK-LIST.
HTML Basic.
Teknologi Informasi dan Komunikasi Andy Wisnu Wardana S.Kom MCP.
HTML Achmad Yasid,SKom. HTML Singkatan dari HyperText Markup Language adalah bahasa yang menjelaskan bagaimana suatu teks, video, grafik, animasi dan.
Usability: Disain Web yang Brilian
Team Teknik Elektro UHAMKA HTML.
MENU dan navigasi situs
Desain Web dengan Tag HTML
Interaksi Manusia & Komputer Website
Information Architecture web dasar Metode merancang situs web
KOMPUTER APLIKASI IT XHTML & CSS MODUL 01
Teknologi Informasi Komputer SMPN 10 Yogyakarta
USABILITAS WEB (WEB USABILITY)
NAVIGASI.
USABILITAS WEB (WEB USABILITY)
Interaksi Manusia dan Komputer
Modul Design & Pemrograman Web
Internet Materi Pertemuan Ke-12.
KONSEP DASAR DESAIN WEB
Strategi Periklanan Ecommerce
Pramita Firnanda 2 D3 Teknik Informatika A
NAVIGASI.
KOMPUTER APLIKASI IT I HTML – INTERNET Angky Febriansyah SE
Tahapan Proyek Pembuatan Situs Web
Step 3: Memahami Prinsip Desain Antarmuka
KOMPUTER APLIKASI IT HTML - INTERNET MODUL 01
Pertemuan ke-6 Web Design Guidelines Evaluasi
Web-Based User Interface
Web-Based User Interface
Internet Materi Pertemuan Ke-11.
Tak Kenal Maka Tak Sayang (HTML)
Pertemuan 5 Electronic Commerce
Pertemuan ke-6 Web Design Guidelines Evaluasi
Sistem informasi manajemen PROYEK 3 WEB/HTML MENGGUNAKAN NOTEPAD
DESAIN INFORMASI DAN NAVIGASI
KOMPUTER APLIKASI IT HTML - INTERNET MODUL 01
Web Design Guidelines Evaluasi
KEMENTERIAN PEKERJAAN UMUM
Sistem informasi manajemen PROYEK 3 WEB/HTML MENGGUNAKAN NOTEPAD
Mengawali membuat desain publikasi
Desain web Good vs bad Dimas wahyu utomo
Darmawan satyananda Mathematics department State university of malang
Cara Merancang Halaman Web
Search Engine & SEO (Search Engine Optimization)
Pertemuan 3 INTERNET SEBAGAI MEDIA KOMUNIKASI DALAM KOMUNIKASI bisnis Internasional Disarikan Dari : Budi Raharjo, Yudi Adha, Indah Pritikasayu, Sumber.
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
Dasar-dasar HTML. 2 World Wide Web (WWW) Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia. TCP/IP.
Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia
Transcript presentasi:

Membangun Web yang baik (lanjutan)

Start with Question Pernahkah Anda menutup sebuah website karena waktu loading yang lama? Seberapa sering Anda menemukan website yang tidak (atau sulit) terbaca isinya? sulit mempelajari struktur web? tidak berisi informasi yang Anda butuhkan? Pernahkah anda membaca detail isi sebuah website pada awal membukanya?

Website adalah Informasi Tujuan kita membuat website adalah menyediakan informasi Bagaimana membuat informasi tersebut dapat diakses (dengan baik dan mudah) oleh user (pengguna)? Bagaimana membuat informasi yang bermanfaat bagi user? User yang menentukan apakah website tersebut mau dibaca atau di-close

Kesan Pertama itu Penting! Kesan Pertama Begitu Menggoda, selanjutnya: Baca [scroll] atau Close [x] Kesan Pertama didapatkan dari: Waktu Loading Website Konten yang bermanfaat Aksesibilitas Tampilan

Loading Time Ditentukan oleh kapasitas akses user (bandwidth, komputer)‏ Ukuran file halaman web + file-file lainnya (image, audio, style, animasi, dll)‏ Penggunaan komponen web (banner, icon, image navigasi) yang tidak konsisten dapat memperlambat Loading Time

Konten Orisinal Dibutuhkan / bermanfaat bagi orang lain Global atau justru Lokal Valuable Struktur yang baik Contoh: Detik.com,DLL.

Detik.com

jawapos.com

Website yang Baik Keseimbangan antara aspek Disain dan Usefulness

Design & Usefulness Design: Estetika: Warna, Layout, Elemen, Tipografi Informasi: Isi (Konten), Penyampaian Pesan, Pembentukan Citra Usefulness: Utility: Fungsionalitas, Aksesibilitas, teknologi yang tepat Usability: Kemudahan penggunaan, waktu belajar, kecepatan kinerja, tingkat kesalahan, daya ingat dan kepuasan subyektif

Design Tidak Pernah Salah! Desain adalah kreatifitas, tidak ada yang salah selama tidak merugikan orang lain Desain adalah ‘rasa’  estetika Nilai estetika ditentukan dari apresiasi dan persepsi setiap orang (user)‏ Buatlah website yang memenuhi nilai estetika kebanyakan orang! (disain grafis)‏

Mana Disain yang Lebih Bagus?

Aksesibillitas Aksesibilitas: kemampuan sistem agar dapat diakses oleh pengguna yang memiliki keterbatasan. 13

Aksesibilitas “Tujuan utama Web adalah informasi, dan harus dapat diakses oleh seluas-luasnya pengguna”. Siapa saja pengguna itu? Setiap orang bebas dan berhak untuk memperoleh informasi baik itu dalam televisi, surat kabar, radio, dan tentu saja Web. Tapi tidak seluruhnya dapat dimanfaatkan oleh setiap orang, Mis: orang yang cacat pendengaran tidak dapat menikmati radio dan orang yang buta tidak dapat menikmati televisi.

Aksesibilitas Setiap orang dapat menikmati informasi yang Ada dalam sebuah situs tak terkecuali bagi orang-orang dengan keterbatasan (fisik, teknologi, dll). Dalam pembangunan sebuah situs Web kita tidak dapat gegabah agar hasil yang diperoleh lebih maksimal dan dapat “dinikmati” dalam berbagai keadaan audiens (user).

Top 10 Mistakes in Web Design* 1. Bad Search 2. File PDF untuk Online Reading 3. Tidak merubah warna Visited Link 4. Non-scannable text 5. Ukuran Font yang Fixed 6. Title yang tidak bermakna 7. Elemen yang terlihat seperti Advertisement (iklan) 8. Pelanggaran konvensi disain 9. Link yang Membuka Window Browser Baru 1o.Tidak Menjawab Pertanyaan Users

Kesalahan Kode HTML Hampir 99% halaman Web berisikan kode-kode yang tidak standar digunakan. Dari 2,4 juta halaman Web hanya 0.007% halaman yang valid. (Riset Dagfinn Parnas)‏ Kesalahan utama dalam sebuah halaman Web adalah: Tidak ada pendeklarasian dokumen (DTD)‏ Tidak mencantumkan atribut yang diharuskan. Atribut tag tidak standar Menghilangkan tag akhir Tidak ada tag awal

Browser paling populer (>60%), Internet Explorer, memaklumi kesalahan-kesalahan tadi, sehingga bila sebuah halaman Web berisi banyak kesalahan dalam kode maka ia akan tetap tampil baik pada IE. Tetapi dapat menjadi problem pada browser selain IE (Mozilla, Opera, Safari, dll)‏ Jangan sampai Anda kehilangan potensial user hanya karena mereka tidak menggunakan IE! Akibat lain: Kesulitan “indexing” yang dilakukan oleh robot Search Engine.

Dari Mana Kesalahan Berasal? Kesalahan yang paling utama adalah penggunaan WYSIWYG Editor untuk membuat Web secara instan. Tag yang tidak standar atau empty tag (tag kosong).

User tidak akan membaca teks kata-per-kata secara runtut Dua Paragraf awal harus berisi informasi yang paling penting Awali subheads, paragraphs, dan bullet points dengan kata-kata yang informatif dan bermakna.

Back to Basics in Web Design Meskipun fitur baru dalam disain web selalu bermunculan dan menjadi topik yang ramai dibahas di forum diskusi, mailing list maupun seminar, user tidak terlalu perduli dengan teknologi dan fitur tersebut Meskipun halaman web bisa memuat berbagai jenis konten multimedia: gambar, audio, video dan animasi; tidak berarti semua harus digunakan! Gunakan secara efisien dan efektif!

User hanya menginginkan perbaikan kualitas pada hal dasar: Teks yang bisa terbaca dengan jelas Konten yang menjawab kebutuhan user Navigasi dan search yang membantu menemukan apa yang dibutuhkan user Form yang sederhana dan singkat

XHTML & CSS Web dapat diakses dengan baik pada berbagai perangkat dan browser

Usabilitas Usabilitas: kemampuan sistem agar mudah digunakan dan sederhana dalam pengoperasiannya Learnability: Kemudahan penggunaan dan waktu belajar Efficiency: kecepatan kinerja Memorability: daya ingat Errors: tingkat kesalahan Satisfaction: kepuasan subyektif

Kenapa Usabilitas Penting Jika sebuah website sulit untuk digunakan Jika sebuah website tidak berisi informasi yang dicari user JIka sebuah website tidak membantu menuntun user apa yang harus dilakukan Jika user tersesat pada sebuah website Maka tombol close [x] pasti di-klik!

Tips untuk Usabilitas Letakkan Nama & Logo pada setiap halaman dan dapat diklik (Home)‏ Sediakan Search jika halaman > 100 atau minimal sediakan Site Map Gunakan foto asli: produk atau kegiatan Sediakan gambar dalam resolusi kecil jangan merubah size gambar asli (thumbnail)‏

Tips untuk Usabilitas Letakkan Navigasi pada lokasi yang konsisten pada halaman web. Tempatkan pada lokasi yang familiar (Diatas, Kiri, atau Bawah)‏ Hindari scrolling secara horisontal. Jika teks ditampilkan centered, gunakan hanya satu titik simetri

Arsitektur Informasi Arsitektur Informasi (Information Architecture) menjelaskan bagaimana sebuah situs web dan setiap halamannya dapat diorganisasikan, diberi nama/label, dan dinavigasi untuk mendukung browsing dan pencarian. Pada umumnya, sebuah situs web minimal harus mempunyai: Halaman utama Halaman bantuan Halaman perusahaan Halaman transaksi (jika berupa e-Commerce) Halaman konten Beberapa bagian yang harus ada dalam situs web bisnis: Propaganda promosi. Penjelasan cara berbelanja. Katalog produk yang ditawarkan. Jaminan keamanan dan kenyamanan dalam berbelanja.

HOMEPAGE Homepage merupakan beranda situs secara keseluruhan berisi : Miliki daftar opt-in. Isi/konten yang relevan. Headline yang menjual. Tata bahasa dan ejaan. Sistem navigasi. Singkat dan fokus. Kreativitas. Tempat untuk promosi. Penjelasan cara berbelanja. Katalog Produk/Jasa.

Struktur hirarki web

Kesimpulan Gunakan XHTML & CSS sebagai standar dokumen web saat ini Buatlah website yang dapat diakses semua user dengan baik dan mudah Buatlah konten website yang memiliki value dan bermanfaat bagi orang lain