website

WEBSITE
•Identifikasi Pengguna dan Tujuan
•Mengorganisasikan Isi Website
•Analisis Website
User Behavior
Search
Seeking
S
g to find a pparticular item,, fact or
piece of information.
Promote ease and speed.
Buying products, doing research, downloading
software, ...
Browsing
S
Scanning
i for
f “interesting”
“i
i ” item,
i
fact
f or piece
i
off
information.
Attractiveness also plays a strong role.
Surfing, doing research, ...
IDENTIFIKASI PENGGUNA DAN TUJUAN
1
Developing A Site
Critical to start with a good site plan
Process Model
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
students
Administrators
Staff
equipment
directions
programs
degrees
mission
Undergraduates
Graduates
awards
unique points
table of contents
index
contact information
map
Maybe put each on an index card
MENGORGANISASIKAN ISI WEBSITE
3. Organize content
Developing A Site
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
College
People
Faculty
Students
Undergrads
Academics
Research
Staff
Courses
Degrees
Grads
MENGORGANISASIKAN ISI WEBSITE
2
Developing A Site
5. Transform content
Start transitioning to pages, text, images,
interaction, etc.
Use sketches lists storyboards drawings
Outlines Will help you organize your
thoughts and plan
MENGORGANISASIKAN ISI WEBSITE
5 Usability Atribut
1. Textual content
Content is highly
g y domain-specific
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 Graphic design
2.
All the graphic design principles we discussed earlier
still apply Metaphor, clarity, consistency, alignment,
contrast, proximity.
MENGORGANISASIKAN ISI WEBSITE
3
5 Usability Atribut
3. Navigation
Problems
P
bl
due
d to
• Users don’t have domain knowledge
• Site structures don’t meet expectations
Give the user an understanding of the structure of the
information space
Provide
• Table of Contents (Site Map)
• Index
• Navigation bar
• Search capability
MENGORGANISASIKAN ISI WEBSITE
5 Usability Atribut
4. Structure
Connectivity, compactness, branching factor, page
l
length,number
h
b off links
li k
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
• 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
4
Bad Design
All capitals text
Scrolling sideways
Teeny tiny text size
Teeny,
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 don’t stop
Things that look like buttons but aren’t
“Under construction” notices
Neglecting ALT tags for images
Not denoting image sizes
D
Do-nothing
thi home
h
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 Design
Because many thing like :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Not Knowing
g Your Audience
Poor Platform Compatibility
Nonconformance to UI Standards
Inconsistent Look and Feel
Inaccurate or Outdated Content
Poor Scope of Content
Pages That Load Slowly
Hard to Maintain
Weak Security
Bad Advertising Strategy
ANALISIS SITUS
5
Fitur-fitur Alat Bantu Pembuatan
Situs Web
• Fitur-fitur yang perlu dipertimbangkan
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.
Fitur-fitur Alat Bantu Pembuatan Situs
Web (Lanj.)
– Ketersediaan fasilitas grafik dan video.
– Kemungkinan kolaborasi.
kolaborasi
– Kompresi data.
– Kontrol keamanan.
– Enkripsi.
– Kehandalan.
– Kemungkinan
g
untuk integrasi
g
dengan
g
software dan hardware lain.
– Impor dan ekspor format pertukaran
standar.
6
Membuat Dokumen untuk
Hypertext
• 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,
informasi spesialis isi
isi, dan
teknologis.
– Hargai pemilahan. Atur informasi menjadi
bongkah-bongkah yang membahas satu topik,
tema, atau ide.
Membuat Dokumen untuk
Hypertext (Lanj.)
– Tunjukkan hubungan yang ada.
Terlalu sedikit link membosankan;
terlalu banyak membuat kewalahan.
– Pastikan penjelajahan sederhana.
– Rancang setiap layar dengan hatihati. Fokus perhatian jelas, judul
memandu, link menjadi
j
panduan yyang
g
berguna.
– Gunakan beban kognitif yang rendah.
Minimalkan beban ingatan jangka
pendek.
7
Desain untuk Situs Web
yang Baik
• 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 Kesalahan Utama
Desain Web
• Top Ten Mistakes of Web Design
(Jakob Nielsen, 1996)
– Penggunaan frame.
– Penggunaan teknologi baru dengan
serampangan.
– Gerakan teks dan animasi yang berjalan
terus.
– URL yang kompleks.
– Halaman “yatim”.
8
10 Kesalahan Utama Desain
Web (Lanj.)
– Halaman yang terlalu panjang
gulungannya.
l
IIsii tterpenting
ti dan
d navigasi
i
i
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 Terpenting
Usability Homepage
• Top Ten Guidelines of Homepage
U bilit (J
Usability
(Jakob
k b Ni
Nielsen,
l
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.
9
10 Pedoman Terpenting Usability
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.
• Awali
A li nama lilink
kd
dengan kkata
t kkuncii
terpenting.
• Tawarkan akses yang mudah untuk fitur
homepage terbaru.
10 Pedoman Terpenting Usability
Homepage (Lanj.)
– Gunakan desain visual untuk
meningkatkan
i k tk d
desain
i iinteraksi,
t k i b
bukan
k
mendefinisikan.
• Jangan memformat isi kritis secara
berlebihan, misalnya area navigasi.
• Gunakan gambar yang berarti.
10
Genre dan Tujuan bagi
Perancang
• 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.
Genre dan Tujuan bagi
Perancang (Lanj.)
– Berdasarkan jumlah halaman atau informasi
yang tersedia
tersedia. Mis
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 pengunjung per hari
hari.
Bagi penyedia akses: jumlah waktu pemakaian.
Bagi lainnya: promosi.
11
Model Antarmuka Objek-Aksi untuk
Perancangan Situs Web
• Model OAI mendorong perancang situs
web memfokuskan empat
p komponen
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 Antarmuka Objek-Aksi untuk
Perancangan Situs Web (Lanj.)
• Strategi agregasi informasi
• Hal-hal yang mempengaruhi
kepuasan subjektif awal pemakai
• Pengujian dan pemeliharaan situs
web
12
Strategi Agregasi Informasi
• 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
tanggal, jurufoto
jurufoto, lokasi
lokasi,
topik.
• Jaringan: World Wide Web, kutipan jurnal.
Hal-hal yang Mempengaruhi Kepuasan
Subjektif Awal Pemakai
• Kepuasan subjektif awal pemakai sangat
kuat ditentukan oleh hal-hal berikut
(Horton et al.,
al 1996):
– Kekompakan dan faktor percabangan.
Panjang halaman dan jumlah link.
– Pengurutan, pengelompokan, dan
penegasan.
– Dukungan akses universal
universal.
– Desain grafis yang baik.
– Dukungan navigasi.
13
Pengujian dan
Pemeliharaan Situs Web
•
•
•
•
•
•
•
•
Disarankan uji usability.
Uji pada
d lilingkungan
k
yang realistik.
li tik
Uji in-house dini dengan jumlah pemakai terbatas.
Uji medan yang intensif.
Proses peluncuran bertahap.
Log pemakaian berguna.
Umpan balik pemakai
pemakai.
Ekspektasi pemakai dan kebijakan organisasi
memandu tingkat perubahan.
Tugas 2
• Buat Evaluasi terhadap 3 web sejenis
• Review berdasarkan kriteria yang
telah ditentukan
14
Evaluasi dibagi menjadi 8 bagian, yaitu :
• 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
p
p
link
• Grapic & layout, membahas penggunaan graphic dan
tata letak
• Beri penilaian dengan menggunakan skala likert
• Kesimpulan umum & saran
• Kumpul terakhir: Pertemuan 11 (Catatan:
S t Ini
Saat
I i Pertemuan
P t
9)
• Dalam Bentuk Print Out
15