Interaksi Manusia dan Komputer

User Interface DesignWebsite

Interaksi Manusia dan Komputer

Apakah Browsing = Searching ?

Searching : mencari item tertentu, fakta atau sepotong informasi.

Browsing : meninjau item menarik, fakta, atau potongan informasi

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.

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.

Interaksi Manusia dan Komputer

http://w3schools.com/

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

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

Interaksi Manusia dan Komputer

Pengembangan Site

Hal penting untuk memulai site yang baik

Model Proses1. Identifikasi objek2. Buat daftar topik3. Mengatur konten4. Menyediakan struktur5. Pengubahan bentuk konten

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.

Interaksi Manusia dan Komputer

Daftar Topik

Contoh : Komputasi Perguruan Tinggi :

KelasOrangFakultasMahasiswaAdministratorStaf

Penghargaan / pialaKeistimewaan Daftar isiIndeksContactInformasiMappenelitian

FasilitasPetunjukProgramTingkatMisiProgram Pasca SarjanaProgram SarjanaAlumni

Interaksi Manusia dan Komputer

Mengatur Konten

Kelompokan item atau materi ke dalam kategori

Orang Fakultas Mahasiswa Undergraduates Graduates Staff

Akademis Perkuliahan Undergraduate Graduate Degrees...

Interaksi Manusia dan Komputer

Menyediakan StrukturMateri atau item diuraikan dengan ringkas dengan menempatkannya pada tingkatan-tingkatan mengikuti kategori dalam sebuah organisasi.

Orang

Fakultas

Penelitian

Perguruan Tinggi

Staff

Undergraduate Graduates

Akademis

PerkuliahanMahasiswa Degrees

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

Interaksi Manusia dan Komputer

Contoh Storyboard

Interaksi Manusia dan Komputer

Permasalahan Usability Web Site ?

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)

Interaksi Manusia dan Komputer

Web Design

Structure Design

Scientist

Organization

Library

Artist

Aesthetics

Gallery

Interaksi Manusia dan Komputer

5 Usability Attributes

1. Konten Tekstual

2. Desain Grafis

3. Navigasi 4. Sruktur

5. Link

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

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.

Interaksi Manusia dan Komputer

* Dimensi *Saran :Ukuran home page 640 x 460 pixelTaruh hal-hal yang penting sajaHalaman berikutnya dapat lebih besar.

Scrolinng atas / bawah OK, tetapi ke samping tidak begitu baik.

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.

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 Weinmanwww.lynda.com

Help:www.sirius.com/~industry/consider.htmlwww.connect.hawaii.com/hc/webmasters/Netscape.colors.html

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.

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

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.

Interaksi Manusia dan Komputer

CS/PSY 6750

web ornetwork

hierarchy

sequence

* Contoh Pengorganisasian *

Interaksi Manusia dan Komputer

CS/PSY 6750

EntryPage

ExitPage

HomePage

Table ofContents

FAQ

Credits

ContentPages

Biasanya jauh lebih kompleks

Contoh

* Situs Real *

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.

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 Pengujian1. Pengujian oleh pembuat atau tim developper2. Pengujian oleh beberapa user yang diundang untuk

menelusuri seluruh isi website.

Interaksi Manusia dan Komputer

Desain yang Buruk1. Semua teks menggunakan huruf kapital.2. Ukuran teks yang amat kecil, terutama huruf miring.3. Link yang tidak terhubung.4. Animasi yang tanpa berhenti5. Hal yang kelihatan seperti tombol padahal bukan tombol6. Ada pesan “under construction” 7. Melalaikan tag ALT untuk gambar8. Tidak menandakan ukuran gambar9. Tidak terdapat halaman home10. Tidak ada tombol untuk menuju lokasi sebelumnya atau

sesudahnya.11. Scroll ke samping.12. Warna link yang tidak standar

Interaksi Manusia dan Komputer

Desain yang Buruk13. Waktu download yang terlalu lama. Pemakai kehilangan

minat dalam 10-15 detik.

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.

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.

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

Interaksi Manusia dan Komputer

Interaksi Manusia dan Komputer

Good/Bad SitesGoodCreating 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

BadWeb pages that suck www.webpagesthatsuck.com/home.html

Interaksi Manusia dan Komputer