user interface design website
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/1.jpg)
Interaksi Manusia dan Komputer
User Interface DesignWebsite
![Page 2: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/2.jpg)
Interaksi Manusia dan Komputer
Apakah Browsing = Searching ?
Searching : mencari item tertentu, fakta atau sepotong informasi.
Browsing : meninjau item menarik, fakta, atau potongan informasi
![Page 3: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/3.jpg)
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.
![Page 4: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/4.jpg)
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.
![Page 5: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/5.jpg)
Interaksi Manusia dan Komputer
http://w3schools.com/
http://w3schools.com/html/default.asp
![Page 6: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/6.jpg)
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
![Page 7: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/7.jpg)
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
![Page 8: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/8.jpg)
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.
![Page 9: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/9.jpg)
Interaksi Manusia dan Komputer
Daftar Topik
Contoh : Komputasi Perguruan Tinggi :
KelasOrangFakultasMahasiswaAdministratorStaf
Penghargaan / pialaKeistimewaan Daftar isiIndeksContactInformasiMappenelitian
FasilitasPetunjukProgramTingkatMisiProgram Pasca SarjanaProgram SarjanaAlumni
![Page 10: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/10.jpg)
Interaksi Manusia dan Komputer
Mengatur Konten
Kelompokan item atau materi ke dalam kategori
Orang Fakultas Mahasiswa Undergraduates Graduates Staff
Akademis Perkuliahan Undergraduate Graduate Degrees...
![Page 11: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/11.jpg)
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
![Page 12: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/12.jpg)
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
![Page 13: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/13.jpg)
Interaksi Manusia dan Komputer
Contoh Storyboard
![Page 14: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/14.jpg)
Interaksi Manusia dan Komputer
Permasalahan Usability Web Site ?
![Page 15: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/15.jpg)
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)
![Page 16: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/16.jpg)
Interaksi Manusia dan Komputer
Web Design
Structure Design
Scientist
Organization
Library
Artist
Aesthetics
Gallery
![Page 17: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/17.jpg)
Interaksi Manusia dan Komputer
5 Usability Attributes
1. Konten Tekstual
2. Desain Grafis
3. Navigasi 4. Sruktur
5. Link
![Page 18: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/18.jpg)
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
![Page 19: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/19.jpg)
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.
![Page 20: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/20.jpg)
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.
![Page 21: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/21.jpg)
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.
![Page 22: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/22.jpg)
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
![Page 23: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/23.jpg)
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.
![Page 24: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/24.jpg)
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).
![Page 25: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/25.jpg)
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.
![Page 26: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/26.jpg)
Interaksi Manusia dan Komputer
CS/PSY 6750
web ornetwork
hierarchy
sequence
* Contoh Pengorganisasian *
![Page 27: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/27.jpg)
Interaksi Manusia dan Komputer
CS/PSY 6750
EntryPage
ExitPage
HomePage
Table ofContents
FAQ
Credits
ContentPages
Biasanya jauh lebih kompleks
Contoh
* Situs Real *
![Page 28: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/28.jpg)
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.
![Page 29: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/29.jpg)
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.
![Page 30: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/30.jpg)
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
![Page 31: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/31.jpg)
Interaksi Manusia dan Komputer
Desain yang Buruk13. Waktu download yang terlalu lama. Pemakai kehilangan
minat dalam 10-15 detik.
![Page 32: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/32.jpg)
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.
![Page 33: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/33.jpg)
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.
![Page 34: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/34.jpg)
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.)
![Page 35: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/35.jpg)
Interaksi Manusia dan Komputer
![Page 36: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/36.jpg)
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
![Page 37: User Interface Design Website](https://reader035.vdocuments.us/reader035/viewer/2022081507/56815ed4550346895dcd6a24/html5/thumbnails/37.jpg)
Interaksi Manusia dan Komputer