User Interface Design Website.

Slides:



Advertisements
Presentasi serupa
MENGGUNAKAN INTERNET UNTUK KEPERLUAN INFORMASI DAN KOMUNIKASI
Advertisements

APA ITU INTERNET? Internet (Interconnected-Network) adalah sebutan untuk sekumpulan jaringan komputer yang menghubungkan situs akademik, pemerintahan,
Dasar-dasar Web Design
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
MESIN PENCARI (SEARCH ENGINE)
Teknologi Informasi Komputer SMPN 10 Yogyakarta
Desain Web R0312 – Grafik Komputer.
Pembuatan dan Pemanfaatan Blog dalam membuat E-learning (Bloger dan Wordpress) Havid Ardi, S.Pd., M.Hum.
Prinsip Perancangan Multimedia
L. Erawan. Each Area Need Different Expertise Pakar Bisnis Pakar Komunikasi Pakar Pengalaman Pengguna.
Perancangan Sistem Ana Kurniawati.
Rekayasa Web 04. Kebutuhan Aplikasi Web
PROTOTYPING Analisa Desain Sistem Informasi. Pendahuluan Prototipe merupakan simulasi atau animasi dari bakal sistem. Prototipe merupakan suatu metode.
PalComTech. WORLD WIDE WEB (WWW), Adalah sarana internet yang menampilkan tampilan berupa gabungan teks, grafis, suara bahkan video yang bersifat interaktif.
BROWSER DAN SEARCH ENGINE
Protyping IMK-M5.
POWER POINT.
Modul Design & Pemrograman Web
MINGGU Ke Enam Web Teknologi 2
Minggu 1…… Page 1 MINGGU Ke Satu Pemrograman Visual 2 Pokok Bahasan: Mengenal Web dengan ASP Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan.
PEMROGRAMAN BERBASIS WEB
Mengelola isi halaman web
KONSEP WEB.
B L O G Joshua Joviando 1. Bagian 2 Membuat Blog di 2.
Membuat Blog Pembelajaran Menggunakan
Pertemuan 8 : Pemasaran E-commerce (2)
HTML-LINK-LIST.
Pertemuan 10 Understanding Marketing Strategies on Internet 1.
Usability: Disain Web yang Brilian
Alat Bantu Eksplorasi Informasi
MENU dan navigasi situs
Storyboard.
Interaksi Manusia & Komputer Website
Information Architecture web dasar Metode merancang situs web
Perancangan Sistem L. Erawan.
Analisa Desain Sistem Informasi
Teknologi Informasi Komputer SMPN 10 Yogyakarta
NAVIGASI.
Alat Bantu Eksplorasi Informasi
BAB X INTRANET.
Interaksi Manusia dan Komputer
ISAK 14 Biaya Situs Web SIC 32 Website Cost
KONSEP DASAR DESAIN WEB
Pramita Firnanda 2 D3 Teknik Informatika A
NAVIGASI.
Web-Based User Interface
Teknologi Informasi & Komunikasi Kelas XI
Web-Based User Interface
Web-Based User Interface
By : Avissa Qonita sidqi – IX I
MENGOPERASIKAN WEB DESIGN
MENGOPERASIKAN WEB DESIGN
Membangun Web yang baik (lanjutan)
BAB X INTRANET.
REKAYASA WEB Development Process
Pertemuan 10 Understanding Marketing Strategies on Internet
Analisa Desain Sistem Informasi
Desain web Good vs bad Dimas wahyu utomo
ANALISA DAN PERANCANGAN
ANALISA DAN PERANCANGAN
Cara Merancang Halaman Web
Search Engine & SEO (Search Engine Optimization)
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
MUHAMAD HENRICK CAHYANTO, ST SMAN 11 BANDUNG
INTERAKSI MANUSIA & KOMPUTER
Apa itu Web Browser ? Web Browser adalah suatu software yang digunakan untuk mencari alamat suatu web site yang terdapat pada jaringan Internet Web Browser.
Apa itu Web Browser ? Web Browser adalah suatu software yang digunakan untuk mencari alamat suatu web site yang terdapat pada jaringan Internet Web Browser.
World Wide Web atau WWW atau juga dikenal dengan WEB adalah salah satu layanan yang didapat oleh pemakai computer yang terhubung ke internet.
Modul 5 Kegiatan Belajar 4: DESAIN MULTIMEDIA INTERAKTIF Kelompok 4: Nur Awaludin Warjito Totok Hermawan.
Transcript presentasi:

User Interface Design Website

Apakah Browsing = Searching ? Searching : mencari item tertentu, fakta atau sepotong informasi. Browsing : meninjau item menarik, fakta, atau potongan informasi

Hypertext dan Hypermedia Dokumen non-sekuensial dan non-linear. Jaringan simpul (artikel, dokumen, file, kartu, halaman, frame, layar) yang dihubungkan dengan link (acuan silang atau citation) Hypertext digunakan untuk menyebut aplikasi yang hanya berisi teks. Hypermedia digunakan untuk menyampaikan keterlibatan media lain : photographs, suara dan video.

Apakah Site dan Page ? Site (Situs Web) adalah kumpulan dari halaman-halaman yang memiliki topik saling terkait, terkadang disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya. Page (Halaman Web) adalah penyusun dari website. Pendahuluan

http://w3schools.com/ http://w3schools.com/html/default.asp

Tujuan Page/Site • Menayampaikan/mengakses informasi karyawan, pemegang saham, pelanggan, kolega, masyarakat • Menjual produk /iklan • Perekrutan • Pengumuman/survey • Pendidikan masyarakat Penyampaian gambar/kesan • Menghubungkan orang • mengumpulkan uang/sumbangan • Hiburan • Promosi diri • Mengajarkan orang tentang suatu topik • Menceritakan sebuah kisah N

Pengembangan Site Hal penting untuk memulai site yang baik Model Proses Identifikasi objek Buat daftar topik Mengatur konten Menyediakan struktur Pengubahan bentuk konten

Identifikasi Objek Mengembangkan pernyataan singkat untuk pertanyaan-pertanyaan berikut : Apa maksud dan sasaran dari situs ? Siapa sasaran ? Teknologi apa yang akan mendukung ? Sayangnya, kebanyakan situs web digunakan untuk menggambarkan administrasi sebuah organisasi, bukan memberiakn apa yang diinginkan pengguna.

Daftar Topik Contoh : Komputasi Perguruan Tinggi : Fasilitas Petunjuk Program Tingkat Misi Program Pasca Sarjana Program Sarjana Alumni Penghargaan / piala Keistimewaan Daftar isi Indeks Contact Informasi Map penelitian Kelas Orang Fakultas Mahasiswa Administrator Staf

Mengatur Konten Kelompokan item atau materi ke dalam kategori Orang Fakultas Mahasiswa Undergraduates Graduates Staff Akademis Perkuliahan Undergraduate Graduate Degrees ...

Menyediakan Struktur Materi atau item diuraikan dengan ringkas dengan menempatkannya pada tingkatan-tingkatan mengikuti kategori dalam sebuah organisasi. Perguruan Tinggi Orang Penelitian Akademis Fakultas Mahasiswa Staff Perkuliahan Degrees Undergraduate Graduates

Pengubahan Bentuk Konten Dimulai dengan melakukan transisi /perpindahan ke halaman, teks, gambar, interaksi, dll. Gunakan sketsa / rancangan untuk mendaftar dalam melakukan pekerjaan menggambar dan prosesi storyboard atau rancangan kasar. Hal ini akan membantu mengorganisir pemikiran / ide dan rencana

Contoh Storyboard

Permasalahan Usability Web Site ?

Tantangan Khusus WWW, tidak mengetahui platform / SO yang digunakan pengguna dan kemampuannya. Navigasi user control berlawanan dengan sistem control-nya. Secara keseluruhan harus cocok dalam web (mendukung perubahan konteks yang cepat dan memenuhi harapan)

Web Design Structure Design Scientist Organization Library Artist Aesthetics Gallery

5 Usability Attributes 1. Konten Tekstual 2. Desain Grafis 3. Navigasi 4. Sruktur 5. Link

1. Konten Tekstual Desain bukan hal utama untuk konten. Yang utama adalah memuat suatu informasi yang sesuai dengan tema. Membaca tulisan di web biasanya lebih lambat daripada tulisan di media catatan/kertas. Orang cenderung menepis halaman web. hanya membaca header (judul), highlight, dan memilih paragraph. Jadi , tambahkan fasilitas agar user bisa membaca bagian header, highlight, dan memilih paragraph. J. Nielsen column on web writing styles www.useit.com/alertbox/9703b.html

2. Desain Grafis Pembuatan web menerapkan prinsip-prinsip desain grafis seperti : metaphor, kejelasan, konsistensi, alignment, pendekatan, kontras, warna, dan tipografi. Pendahuluan

* Dimensi * Saran : Ukuran home page 640 x 460 pixel Taruh hal-hal yang penting saja Halaman berikutnya dapat lebih besar. Scrolinng atas / bawah OK, tetapi ke samping tidak begitu baik.

* Scroling * Pendapat tentang Scroll : Gunakan dengan tepat. Usahakan dapat menyimpan informasi dalam satu layar. Hindari scroll di halaman navigasi, tidak masalah pada halaman konten (buat fasilitas agar dapat mencetak) Taruh link ke atas pada bagian bawah halaman yang panjang.

* Warna untuk Browser * Kebanyakan monitor dapat manampilkan 28 =256 warna, umumnya hanya 216 warna untuk browser. Browser mengubah 40 lainnya. Jika beberapa warna lain muncul, browser “dithers” (mencampur warna pixel) Good book: Coloring Web Graphics by Lynda Weinman www.lynda.com Help: www.sirius.com/~industry/consider.html www.connect.hawaii.com/hc/webmasters/Netscape.colors.html

* Gambar dan Unduh* Grafis dapat menambah nilai dan dapat membuat lambat. Pengguna tampaknya mentolelir 10-15 detik ketika mereka sadar akan lambat. Namun, tetap cepat: 1-2 detik adalah yang terbaik.

3. Navigasi Permasalahan yang berkaitan dengan : User tidak mempunyai pengetahuan tentang situs. Struktur lokasi tidak ditemukan. User seharusnya diberi pemahman tentang struktur untuk ruang informasi, seperti : tabel isi web (site map), indeks, navigasi bar, dan fasilitas pencarian (search).

4. Struktur Apa bentuk situs Anda ? Konektivitas, kekompakan, faktor bercabang, halaman panjang, jumlah link. Home page itu penting, tetapi struktur dasar untuk semua halaman lain juga penting.

* Contoh Pengorganisasian * web or network sequence hierarchy CS/PSY 6750

* Situs Real * Contoh Biasanya jauh lebih kompleks CS/PSY 6750 Entry Page Table of Contents FAQ Home Page Credits Contoh Exit Page Content Pages Biasanya jauh lebih kompleks CS/PSY 6750

5. Link Tingkat keberhasilan suatu link berkaitan dengan : Seberapa baik user dapat memprediksi arah dari link. Seberapa baik user dapat membedakan antara link yang satu dengan lainnya. Isi yang yang bermanfaat pada akhir link. endahuluan

Evaluasi Setelah web di buat, langkah selanjutnya adalah melakukan evaluasi yang bertujuan : Untuk mengumpulkan berbagai masalah yang mungkin ada di tiap halaman website. masalah yang berhubungan dengan komponen desain dalam setiap template maupun masalah pada pemrogramannya. Tahap Pengujian Pengujian oleh pembuat atau tim developper Pengujian oleh beberapa user yang diundang untuk menelusuri seluruh isi website.

Desain yang Buruk Semua teks menggunakan huruf kapital. Ukuran teks yang amat kecil, terutama huruf miring. Link yang tidak terhubung. Animasi yang tanpa berhenti Hal yang kelihatan seperti tombol padahal bukan tombol Ada pesan “under construction” Melalaikan tag ALT untuk gambar Tidak menandakan ukuran gambar Tidak terdapat halaman home Tidak ada tombol untuk menuju lokasi sebelumnya atau sesudahnya. Scroll ke samping. Warna link yang tidak standar

Desain yang Buruk 13. Waktu download yang terlalu lama. Pemakai kehilangan minat dalam 10-15 detik.

10 Pedoman Terpenting Usability Homepage Top Ten Guidelines of Homepage Usability (Jakob Nielsen, 2002) Buat maksud homepage jelas: Siapa Anda dan apa yang Anda lakukan. Sertakan tagline satu kalimat. Tulis judul window dengan ketertampakan yang baik pada search engine dan bookmark. Kelompokkan informasi perusahaan dalam tempat yang dapat dibedakan.

10 Pedoman Terpenting Usability Homepage (Lanj.) Bantu pemakai menemukan yang dibutuhkan. Tegaskan tugas prioritas tertinggi situs. Sertakan kotak input pencarian. Singkapkan isi situs. Tampilkan contoh isi situs. Awali nama link dengan kata kunci terpenting. Tawarkan akses yang mudah untuk fitur homepage terbaru.

10 Pedoman Terpenting Usability Homepage (Lanj.) Gunakan desain visual untuk meningkatkan desain interaksi, bukan mendefinisikan. Jangan memformat isi kritis secara berlebihan, misalnya area navigasi. Gunakan gambar yang berarti.

Good/Bad Sites Good Bad Creating Killer Web Sites Cool site of the day www.killersites.com Cool site of the day cool.infi.net Project Cool site of the day www.projectcool.com High Five www.highfive.com Bad Web pages that suck www.webpagesthatsuck.com/home.html

TERIMAKASIH