how to build web design

1. Interaksi Manusia dan Komputer
User Interface Design
Website

2. Interaksi Manusia dan Komputer
Apakah Browsing = Searching ?
Searching : mencari item tertentu, fakta atau sepotong informasi.
Browsing : meninjau item menarik, fakta, atau potongan
informasi

3. Interaksi Manusia dan Komputer
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.

4. Interaksi Manusia dan Komputer
Pendahuluan 4/26
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.

5. Interaksi Manusia dan Komputer
http://w3schools.com/
http://w3schools.com/html/default.asp

6. Interaksi Manusia dan Komputer
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

7. Interaksi Manusia dan Komputer
Pengembangan Site
Hal penting untuk memulai site yang baik
Model Proses
1. Identifikasi objek
2. Buat daftar topik
3. Mengatur konten
4. Menyediakan struktur
5. Pengubahan bentuk konten

8. Interaksi Manusia dan Komputer
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.

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

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

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

12. Interaksi Manusia dan Komputer
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

13. Interaksi Manusia dan Komputer
Contoh Storyboard

14. Interaksi Manusia dan Komputer
Permasalahan Usability Web Site ?

15. Interaksi Manusia dan Komputer
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)

16. Interaksi Manusia dan Komputer
Web Design
Structure Design
Scientist
Organization
Library
Artist
Aesthetics
Gallery

17. Interaksi Manusia dan Komputer
5 Usability Attributes
1. Konten Tekstual
2. Desain Grafis
3. Navigasi
4. Struktur
5. Link

18. Interaksi Manusia dan Komputer
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

19. Interaksi Manusia dan Komputer
Pendahuluan 19/26
2. Desain Grafis
• Pembuatan web menerapkan prinsip-prinsip desain grafis
seperti : metaphor, kejelasan, konsistensi, alignment,
pendekatan, kontras, warna, dan tipografi.

20. Interaksi Manusia dan Komputer
* 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.

21. Interaksi Manusia dan Komputer
* 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.

22. Interaksi Manusia dan Komputer
* 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

23. Interaksi Manusia dan Komputer
* 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.

24. Interaksi Manusia dan Komputer
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).

25. Interaksi Manusia dan Komputer
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.

26. Interaksi Manusia dan Komputer
CS/PSY 6750
web or
network
hierarchy
sequence
* Contoh Pengorganisasian *

27. Interaksi Manusia dan Komputer
CS/PSY 6750
Entry
Page
Exit
Page
Home
Page
Table of
Contents
FAQ
Credits
Content
Pages
Biasanya jauh lebih kompleks
Contoh
* Situs Real *

28. Interaksi Manusia dan Komputer
endahuluan
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.

29. Interaksi Manusia dan Komputer
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
1. Pengujian oleh pembuat atau tim developper
2. Pengujian oleh beberapa user yang diundang untuk
menelusuri seluruh isi website.

30. Interaksi Manusia dan Komputer
Desain yang Buruk
1. Semua teks menggunakan huruf kapital.
2. Ukuran teks yang amat kecil, terutama huruf miring.
3. Link yang tidak terhubung.
4. Animasi yang tanpa berhenti
5. Hal yang kelihatan seperti tombol padahal bukan tombol
6. Ada pesan “under construction”
7. Melalaikan tag ALT untuk gambar
8. Tidak menandakan ukuran gambar
9. Tidak terdapat halaman home
10. Tidak ada tombol untuk menuju lokasi sebelumnya atau
sesudahnya.
11. Scroll ke samping.
12. Warna link yang tidak standar

31. Interaksi Manusia dan Komputer
Desain yang Buruk
13. Waktu download yang terlalu lama. Pemakai kehilangan
minat dalam 10-15 detik.

32. Interaksi Manusia dan Komputer
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.

33. Interaksi Manusia dan Komputer
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.

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

35. Interaksi Manusia dan Komputer

36. Interaksi Manusia dan Komputer
Good/Bad Sites
Good
Creating Killer Web Sites
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

37. Interaksi Manusia dan Komputer