1

WEBSITE
Identifikasi Pengguna dan Tujuan
Mengorganisasikan Isi Website
Analisis Website
User Behavi or
Search
Seeking to find a particular item, fact or S g p ,
piece of information.
Promote ease and speed.
Buying products, doing research, downloading
software, ...
Browsing
S i f i i i f i f Scanning for interesting item, fact or piece of
information.
Attractiveness also plays a strong role.
Surfing, doing research, ...
IDENTIFIKASI PENGGUNA DAN TUJUAN
2
Devel opi ng A Si t e
Critical to start with a good site plan
Process Model
1. Identifyobjectives 1. Identify objectives
Unfortunately, too often a web site is used to describe an
administrative organization, not to give the user what
they want
2. Generate a topics list
Raw brainstorming of just anything
College of Computing, e.g.:
classes
people
faculty
equipment
directions
programs
awards
unique points
tableof contents
Maybe put each on an index card
MENGORGANISASIKAN ISI WEBSITE
faculty
students
Administrators
Staff
programs
degrees
mission
Undergraduates
Graduates
table of contents
index
contact information
map
Devel opi ng A Si t e
3. Organize content
Group items into categories
People
Faculty
Students
Undergraduates
G d t Graduates
Staff
4. Provide structure
Sketch out the high - level organization of the categories
People
Faculty
Research
College
Staff
Academics
Courses Students Degrees
MENGORGANISASIKAN ISI WEBSITE
Undergrads Grads
3
Devel opi ng A Si t e
5. Transform content
Start transitioning to pages, text, images,
interaction, etc.
Use sketches lists storyboards drawings
Outlines Will help you organize your
thoughtsandplan thoughts and plan
MENGORGANISASIKAN ISI WEBSITE
5 Usabi l i t y At r i but
1. Textual content
Content is highly domain-specific g y p
Critical that appropriate information is on your
pages.
Reading is slower and more awkward from monitor
than from paper So People tend to skim web
pages.
Read headers, highlights, selected paragraphs
2 Graphicdesign 2. Graphic design
All the graphic design principles we discussed earlier
still apply Metaphor, clarity, consistency, alignment,
contrast, proximity.
MENGORGANISASIKAN ISI WEBSITE
4
5 Usabi l i t y At r i but
3. Navigation
P bl d Problems due to
Users dont have domain knowledge
Site structures dont meet expectations
Give the user an understanding of the structure of the
information space
Provide
Tableof Contents(SiteMap) Table of Contents (Site Map)
Index
Navigation bar
Search capability
MENGORGANISASIKAN ISI WEBSITE
5 Usabi l i t y At r i but
4. Structure
Connectivity, compactness, branching factor, page
l h b f li k length,number of links
Structur : Linear, Hirearchi, Non Linear, Composite
Home page is important, but basic structure for all your
other pages is important too---It might appear thousands of
times
5. Links
Success of a link depends on
Howwell user canpredict wherelink will lead How well user can predict where link will lead
How well user can differentiate one link from other nearby
ones
Worthy content at other end of link
MENGORGANISASIKAN ISI WEBSITE
5
Bad Desi gn
All capitals text
Scrolling sideways
Teeny tinytext size especiallyinitalics Teeny, tiny text size, especially in italics
Dead links
Telling the user how to set the browser
Poor contrast in text-to-background color
Large typeface (one without impact and contrast)
Animations that dont stop
Things that look like buttons but arent
Under construction notices
Neglecting ALT tags for images
Not denoting image sizes
D thi h Do-nothing home page
Changing color for the heck of it
Lack of mail to/feedback throughout site
Sites requiring advanced browser or plug in
Blink tags
ANALISIS SITUS
Bad Desi gn
Because many thing like :
1. Not Knowing Your Audience g
2. Poor Platform Compatibility
3. Nonconformance to UI Standards
4. Inconsistent Look and Feel
5. Inaccurate or Outdated Content
6. Poor Scope of Content
7. Pages That Load Slowly
8. HardtoMaintain 8. Hard to Maintain
9. Weak Security
10. Bad Advertising Strategy
ANALISIS SITUS
6
Fi t ur -f i t ur Al at Bant u Pembuat an
Si t us Web
Fitur-fitur yang perlu dipertimbangkan
dalamalat bantu pembuatan situs Web: dalam alat bantu pembuatan situs Web:
Macam fungsi edit yang tersedia.
Ketersediaan daftar link.
Verifikasi link.
Macam perintah pemformatan tampilan.
Ketersediaan fungsi search and replace.
Kendali atas warna.
Kemampuan untuk berpindah dengan mudah
dari mode author ke browser.
Fi t ur -f i t ur Al at Bant u Pembuat an Si t us
Web (Lanj .)
Ketersediaan fasilitas grafik dan video.
Kemungkinan kolaborasi Kemungkinan kolaborasi.
Kompresi data.
Kontrol keamanan.
Enkripsi.
Kehandalan.
Kemungkinan untuk integrasi dengan g g g
software dan hardware lain.
Impor dan ekspor format pertukaran
standar.
7
Membuat Dok umen unt uk
Hyper t ex t
Dalam membuat dokumen untuk hypertext
perlu diperhatikan: p p
Kenali pemakai dan tugasnya.
Pastikan struktur yang berarti terpenting.
Dasari pada presentasi informasi dan bukan
teknologi.
Terapkan keterampilan yang beraneka
ragam: spesialis informasi spesialis isi dan ragam: spesialis informasi, spesialis isi, dan
teknologis.
Hargai pemilahan. Atur informasi menjadi
bongkah-bongkah yang membahas satu topik,
tema, atau ide.
Membuat Dok umen unt uk
Hyper t ex t (Lanj .)
Tunjukkan hubungan yang ada.
Terlalu sedikit link membosankan; Terlalu sedikit link membosankan;
terlalu banyak membuat kewalahan.
Pastikan penjelajahan sederhana.
Rancang setiap layar dengan hati-
hati. Fokus perhatian jelas, judul
memandu, link menjadi panduan yang j y g
berguna.
Gunakan beban kognitif yang rendah.
Minimalkan beban ingatan jangka
pendek.
8
Desai n unt uk Si t us Web
yang Bai k
Menurut Patrick Lynch, 1995
Menyeimbangkan struktur dan
hubungan dari menu atau home page
dengan halaman isi atau grafik dan
dokumen yang di-link.
Tujuannya membangun hierarki menu
dan halaman yang berasa alami dan
terstuktur dengan baik bagi pemakai,
dan tidak mengganggu pemakaian situs
Web atau menyesatkan mereka.
10 Kesal ahan Ut ama
Desai n Web
Top Ten Mistakes of Web Design
(J akob Nielsen, 1996)
Penggunaan frame.
Penggunaan teknologi baru dengan
serampangan.
Gerakan teks dan animasi yang berjalan Gerakan teks dan animasi yang berjalan
terus.
URL yang kompleks.
Halaman yatim.
9
10 Kesal ahan Ut ama Desai n
Web (Lanj .)
Halaman yang terlalu panjang
l I i t ti d i i gulungannya. Isi terpenting dan navigasi
harus tampak di bagian atas.
Kurangnya dukungan navigasi..
Warna link yang tidak standar.
Informasi yang basi.
Waktu download yang terlalu lama.
Pemakai kehilangan minat dalam 10-15
detik.
10 Pedoman Ter pent i ng
Usabi l i t y Homepage
Top Ten Guidelines of Homepage
U bilit (J k b Ni l 2002) Usability (J akob 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 yang baik pada search engine dan
bookmark.
Kelompokkan informasi perusahaan dalam
tempat yang dapat dibedakan.
10
10 Pedoman Ter pent i ng Usabi l i t y
Homepage (Lanj .)
Bantu pemakai menemukan yang
dib t hk dibutuhkan.
Tegaskan tugas prioritas tertinggi situs.
Sertakan kotak input pencarian.
Singkapkan isi situs.
Tampilkan contoh isi situs.
A li li k d k t k i Awali nama link dengan kata kunci
terpenting.
Tawarkan akses yang mudah untuk fitur
homepage terbaru.
10 Pedoman Ter pent i ng Usabi l i t y
Homepage (Lanj .)
Gunakan desain visual untuk
i k tk d i i t k i b k meningkatkan desain interaksi, bukan
mendefinisikan.
J angan memformat isi kritis secara
berlebihan, misalnya area navigasi.
Gunakan gambar yang berarti.
11
Genr e dan Tuj uan bagi
Per anc ang
Cara mengategorikan situs Web:
Berdasarkan pendiri: individu,
kelompok, universitas, perusahaan,
organisasi nirlaba, badan pemerintah.
Berdasarkan tujuan pendiri: menjual
produk, mengiklankan produk, memberi
informasi dan pengumuman,
menyediakan akses, menawarkan jasa,
membuat diskusi, mendidik masyarakat.
Genr e dan Tuj uan bagi
Per anc ang (Lanj .)
Berdasarkan jumlah halaman atau informasi
yang tersedia Mis : yang tersedia. Mis.:
1-10: biografi, ringkasan proyek.
5-50: makalah ilmiah, konferensi.
50-500: buku, laporan tahunan.
Berdasarkan ukuran keberhasilan.
Bagi individu: mencari pekerjaan, mencari teman.
Bagi perusahaan: jumlah pengunjungper hari Bagi perusahaan: jumlah pengunjung per hari.
Bagi penyedia akses: jumlah waktu pemakaian.
Bagi lainnya: promosi.
12
Model Ant ar muk a Obj ek -Ak si unt uk
Per anc angan Si t us Web
Model OAI mendorong perancang situs
web memfokuskan empat komponen p p
dalam dua bidang:
Tugas
Objek informasi terstruktur (hierarki,
jaringan).
Aksi informasi (pencarian, linking).
Antarmuka
Metafora untuk objek informasi (rak buku,
ensiklopedia).
Penanganan aksi (query, zoom).
Model Ant ar muk a Obj ek -Ak si unt uk
Per anc angan Si t us Web (Lanj .)
Strategi agregasi informasi
Hal-hal yang mempengaruhi
kepuasan subjektif awal pemakai
Pengujian dan pemeliharaan situs
web
13
St r at egi Agr egasi I nf or masi
Daftar pendek tak terstruktur: fitur
pedoman kota, divisi organisasi, proyek
terbaru.
Struktur linear: kalender peristiwa.
Larik atau tabel: jadual penerbangan.
Hierarki, tree: benua-negara-kota.
Multitree, faceted retrieval: foto diurutkan
berdasarkan tanggal jurufoto lokasi berdasarkan tanggal, jurufoto, lokasi,
topik.
J aringan: World Wide Web, kutipan jurnal.
Hal -hal yang Mempengar uhi Kepuasan
Subj ek t i f Aw al Pemak ai
Kepuasan subjektif awal pemakai sangat
kuat ditentukan oleh hal-hal berikut
(Horton et al 1996): (Horton et al., 1996):
Kekompakan dan faktor percabangan.
Panjang halaman dan jumlah link.
Pengurutan, pengelompokan, dan
penegasan.
Dukunganakses universal Dukungan akses universal.
Desain grafis yang baik.
Dukungan navigasi.
14
Penguj i an dan
Pemel i har aan Si t us Web
Disarankan uji usability.
Uji d li k li tik Uji pada lingkungan yang realistik.
Uji in-house dini dengan jumlah pemakai terbatas.
Uji medan yang intensif.
Proses peluncuran bertahap.
Log pemakaian berguna.
Umpan balik pemakai Umpan balik pemakai.
Ekspektasi pemakai dan kebijakan organisasi
memandu tingkat perubahan.
Tugas 2
Buat Evaluasi terhadap 3 web sejenis
Review berdasarkan kriteria yang
telah ditentukan
15
Eval uasi di bagi menj adi 8 bagi an, yai t u :
Content, membahas informasi yang disediakan oleh
website
Task support, membahas hal yang berhubungan
dengan task yang dapat dilakukan
Navigation, membahas hal yang berhubungan dengan
navigasi di website
Form, membahas hal yang berhubungan dengan form
Search, membahas task search
Text & writing, membahas hal yang berhubungan
dengan text
Link, membahas semua hal yang berhubungan dengan
penampilan link p p
Grapic & layout, membahas penggunaan graphic dan
tata letak
Beri penilaian dengan menggunakan skala likert
Kesimpulan umum & saran
Kumpul terakhir: Pertemuan 11 (Catatan:
S t I i P t 9) Saat Ini Pertemuan 9)
Dalam Bentuk Print Out