Halaman | 0
TUGAS AKHIR MATA KULIAH INTERAKSI MANUSIA DAN KOMPUTER
Interaksi Manusia dan Komputer - Pembahasan Mengenai Antar Muka, Desain Layar, dan Usabilitas dari situs www.ilmuwebsite.com
Oleh : IRSYADINNAS
G14053052
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
INSTITUT PERTANIAN BOGOR 2008
Halaman | 1
Kata Pengantar
Segala puji dan syukur penulis panjatkan ke hadirat Allah SWT karena atas segala karunia-
Nya penulis dapat menyelesaikan tugas ini. Topik yang dibahas dalam makalah ini ialah mengenai situs www.ilmuwebsite.com , mulai dari desain antar muka, tampilan layar, navigasi, fungsi-fungsi, sampai dengan ukuran tingkat usabilitas situs ini.
Keberhasilan ini tidak lepas dari bantuan berbagai pihak. Oleh karena itu, dalam kesempatan ini penulis ingin mengucapkan terimakasih kepada teman-teman mata kuliah Interaksi Manusia dan Komputer, dan Bapak Firman Ardiansyah selaku dosen mata kuliah ini, serta semua pihak yang telah memberikan saran dan bantuan selama menyelesaikan tugas ini.
Penulis menyadari bahwa masih banyak terdapat kekurangan dalam menyelesaikan tugas ini baik dari segi materi maupun penyajiannya, untuk itu saran serta kritikan yang membangun dari dosen dan rekan-rekan sangat diharapkan guna perbaikan penulisan ini.
Akhir kata penulis berharap semoga tulisan ini bermanfaat bagi pembaca pada umumnya dan penulis pada khususnya.
Bogor, 12 Juni 2008
Irsyadinnas
Halaman | 2
Daftar Isi
Halaman Kata Pengantar ....................................................................................................................... 1 Daftar Isi ................................................................................................................................ 2 Daftar Gambar ....................................................................................................................... 3
I. Pendahuluan
Latar Belakang ....................................................................................................................... 4 Tujuan .................................................................................................................................... 4
II. Tinjauan Pustaka
Interaksi Manusia dan Komputer (IMK) ................................................................................ 5 Usabilitas ................................................................................................................................. 5 Dimensi usabilitas ................................................................................................................... 5 komponen usabilitas .............................................................................................................. 5 Fleksibilitas ............................................................................................................................. 5 Antar Muka Pemakai (User Interface) ................................................................................... 5 Analisa Kebutuhan dan Definisi Bisnis ................................................................................. 6 Desain Layar yang Baik ......................................................................................................... 6 pengujian untuk disain yang baik ........................................................................................... 6 Task Analysis .......................................................................................................................... 6
III. Hasil dan Pembahasan ........................................................................................................ 7 Bagian Kiri
1. Naviasi yang Membingungkan dan Tidak Efisien .................................................... 8 2. Menu-menu Tidak Tersusun Rapi .............................................................................. 8 3. Inkonsistensi Desain Link .......................................................................................... 9
Bagian Tengah 1. Kontrol yang Kurang Lengkap .................................................................................. 10 2. Inkonsistensi Penggunaan Bahasa .............................................................................. 10 3. Inkonsistensi Desain Link .......................................................................................... 11 4. Inkonsistensi Desain Penulisan .................................................................................. 11 5. Tampilan Tidak Tersusun Rapi .................................................................................. 12 6. Grouping Tanpa Dasar Pengelompokan yang Jelas .................................................. 12 7. Inkonsistensi Desain Link .......................................................................................... 13 8. Tampilan yang tidak tersusun dan kurang rapi ........................................................... 13 9. Ketidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi ....................... 14
Bagian Kanan 1. Page scroling yang tidak efisien ................................................................................. 15 2. Desain yang kurang rapi dan tidak konsisten ............................................................. 15 3. Ketidakjelasan dalam penggunaan fungsi................................................................... 16 4. Tampilan tidak tersusun rapi dan fungsi serta control yang membingungkan .......... 16 5. Derajad Kepentingan dalam Desain Tampilan Informasi .......................................... 17
IV. Kesimpulan dan Saran ......................................................................................................... 18
Kesimpulan ............................................................................................................................ 18 Saran ....................................................................................................................................... 18
V. Daftar Pustaka ........................................................................................................................ 19
Halaman | 3
Daftar Gambar Halaman
Gambar 0 : Pemberian bagian untuk memudahkan pembahasan ........................................ 7 Gambar 1: Navigasi yang Membingungkan dan Tidak Efisien ............................................ 8 Gambar 2: Menu-menu Tidak Tersusun Rapi ........................................................................ 9 Gambar 3: Inkonsistensi Desain Link .................................................................................... 9 Gambar 4: Kontrol yang Kurang Lengkap ............................................................................ 10 Gambar 5: Inkonsistensi Penggunaan Bahasa ...................................................................... 10 Gambar 6: Inkonsistensi Desain Link .................................................................................... 11 Gambar 7: Inkonsistensi Desain Penulisan (dalam penggunaan font)................................. 11 Gambar 8: Tampilan tidak tersusun rapi ............................................................................... 12 Gambar 9: Grouping tanpa dasar pengelompokan yang jelas ............................................. 12 Gambar 10: Inkonsistensi Desain Link .................................................................................. 13 Gambar 11: Tampilan yang tidak tersusun dan kurang rapi ................................................ 13 Gambar 12: Ketidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi ............. 14 Gambar 13: Saran Penyajian Desain .................................................................................... 15 Gambar 14: Desain yang kurang rapi dan tidak konsisten ................................................... 16
Gambar 15: Ketidakjelasan dalam penggunaan fungsi sebagai pemenuhan kebutuhan pengguna........................................................ 17
Gambar 16: Tampilan tidak tersusun rapi dan fungsi serta control yang membingungkan ................................................................. 18
Gambar 17: Derajad Kepentingan dalam Desain Tampilan Informasi ............................... 18
Halaman | 4
I. Pendahuluan Latar Belakang
Dewasa ini Sistem komputer yang kompleks sedang "mencari" jalan atau cara untuk masuk ke dalam kehidupan sehari-hari, dan pada waktu yang sama pasar dipenuhi dengan merek-merek yang bersaing. Ini telah mendorong usabilitas menjadi semakin populer dan secara luas dikenal di tahun terakhir ini. Dalam pengembangan produknya, sekarang ini perusahaan-perusahaaan mulai beralih dari metode lama yaitu metode berorientasi teknologi (technology-oriented methods) menjadi metode berorientasi pengguna (user-oriented methods). sasaran dari metode ini menetapkan kebutuhan suatu sistem. suatu kebutuhan adalah suatu sasaran yang harus ditemui. suatu produk yg dikembangkan, didasarkan pada masukan dari para pemakai atau pihak-pihak lain yang berkepentingan.
Metode berorientasi pengguna inilah yang melahirkan istilah usabilitas. Usabilitas adalah suatu istilah yang digunakan untuk menandakan bahwa orang dapat mempekerjakan alat tertentu dengan mudah dalam rangka mencapai tujuan tertentu. usabilitas dapat juga mengacu pada metode yang digunakan untuk mengukur kemudahan dan studi mengenai kerapian atau efisiensi suatu obyek yang dalam hal ini ialah kemudahan dalam penggunaan sistem dan aplikasi komputer itu sendiri. Usabilitas memegang peranan penting dalam pengembangan sebuah website, pembelajaran mengenai perilaku pengguna web ini sangat penting, karena sebagaimana kita ketahui bahwa pengguna tidak ingin menunggu akibat sistem yang terlalu lambat (slow site), dan pengguna pun tidak ingin belajar mengenai cara menggunakan web tersebut, sebuah web yang interaktif akan membuat penggunanya mampu menyerap dan mempelajari web tersebut dengan seketika setelah membacanya sekilas (scanning).
Pemahaman mengenai kemudahan penggunaan suatu aplikasi (dalam hal ini website) inilah yang akan kita bahas dalam makalah ini, ada beberapa pertanyaan yang mengindikasikan kemudahan penggunaan tersebut, diantaranya ialah seberapa mudah pengguna menggunakan fungsi-fungsi saat pertama kali mereka menggunakan aplikasi tersebut (berhadapan dengan desain pertama kali)?, sekali ketika para pemakai sudah mempelajari disain, seberapa cepat mereka dapat melaksanakan tugas?, seberapa banyak kesalahan yang dibuat pengguna ketiak memakai aplikasi ini? Seberapa cepatkah mereka memperbaiki kesalahan tersebut? Dan seberapa menyenangkan desain tersebut bagi pengguna? Itulah beberapa hal yang akan kita bahas lebih lanjut dalam makalah ini.
Tujuan
Makalah ini memuat tentang pembahasan mengenai desain antarmuka yang baik dan usabilitas dari fungsi-fungsi dari situs www.ilmuwebsite.com. Makalah ini bertujuan untuk melihat sejauh mana tingkat usabilitas dari fungsi-fungsi pada website ini, serta melihat desain antarmukanya, dan juga beberapa saran perbaikan fungsi-fungsi dan antar muka yang baik untuk meningkatkan usabilitas dari website tersebut.
Halaman | 5
II. Tinjauan Pustaka Interaksi Manusia dan Komputer (IMK)
Interaksi Manusia dan Komputer (IMK) adalah disiplin ilmu yang berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer, interaktif untuk digunakan oleh manusia, serta studi mengenai hal-hal yang berhubungan dengannya, misalnya pengguna. Usabilitas
Usabilitas adalah suatu istilah yang digunakan untuk menandakan bahwa orang dapat mempekerjakan alat tertentu dengan mudah dalam rangka mencapai tujuan tertentu. usabilas dapat juga mengacu pada metode yang digunakan untuk mengukur usabilitas dan studi mengenai kerapian atau efisiensi suatu obyek.
Dimensi usabilitas oleh Quesenbery ( 2003). 1. Efektif (Effective). ketelitian dan Kelengkapan para pemakai dalam mencapai gol mereka. 2. Efisien (Efficient). Kecepatan (dengan ketelitian) para pemakai dalam menyelesaikan tugas
mereka. 3. Keterlibatan (Engaging). Derajat atau tingkat gaya interface yang membuat produk nymaan untuk
digunakan. 4. toleransi Kesalahan (Error tolerant). Seberapa baik disain mencegah kesalahan dan emmebantu
memeperbaiki kesalahan ini. 5. Mudah untuk sipelajari (Easy to learn). Seberapa baik produk mendukung orientasi awal dan
memperdalam pemahaman tentang kemampuan prosuk tersebut. Nielsen ( 2003) menyarankan lima komponen usabilitas: 1. Learnabilitas (Learnability): Seberapa mudah bagi user untuk memenuhi tugas dasar aplikasi
ketika pertama kali mereka menghadapi disain? 2. Efisiensi (Efficiency): Sekali ketika para pemakai sudah mempelajari disain, seberapa cepat
mereka dapat menggunakannya? 3. Memorabilas (Memorability): Ketika para pengguna kembali menggunakan aplikasi tsb setelah
sekian lama tidak menggunakannya, seberapa mudah mereka dapat kembali mahir dalam menggunakannya?
4. Kesalahan (Errors): Berapa banyak kesalahan yg dilakukan para pemakai, seberapa burukkah kesalahan ini, dan Seberapa mudah mereka dapat memperbaiki kesalahannya?
5. Kepuasan (Satisfaction): seberapa menyenangkan dalam menggunakan disain itu?
Fleksibilitas Usabilas juga mempunyai suatu hubungan dengan fleksibilitas dalam disain. Secara umum,
ketika fleksibilitas dari suatu disain meningkat, usabilitas nya berkurang.Disain fleksibel dapat melakukan banyak fungsi dibanding disain khusus, tapi kurang efisien, hal Ini memebuat disain lebih kompleks. Fleksibilitas membuat para pemakai tidak bisa dengan jelas mengantisipasi sistem kebutuhan mereka yang akan datang. Kemudian, pada akhirnya Fleksibilitas itu akan mengakibatkan suatu pengurangan usabilitas. sehingga perlu dipertimbangkan. Antar Muka Pemakai (User Interface)
Antarmuka pemakai adalah bagian sistem komputer yang memungkinkan manusia berinteraksi dengan komputer. Desain antar Muka yang baik memiliki karakteristik di berikut ini: Standardisasi: keseragaman sifat-sifat antarmuka pemakai pada aplikasi yang berbeda. Integrasi: keterpaduan antara paket aplikasi dan software tools. Konsistensi: keseragaman dalam suatu program aplikasi. Portabilitas: dimungkinkannya data dikonversi pada berbagai hardware dan software.
Ada beberapa hal yang menyebabkan menurunnya tingkat usabilitas dari suatu desain antar muka system, diantaranya ialah :
Halaman | 6
1. Teks belum jelas dan pemilihan kata yang tidak tepat dalam bertanya menjadi penyebab Keraguan dan akhirnya dibaca kembali, yang memungkinkan para pengguna salah dalam menafsirkannya.
2. Grafis yang tidak tepat sehingga unsur-unsur penting tersembunyi. 3. Judul yang tidak representatif. Ini juga menciptakan kebingungan dan menghalangi kemampuan
dalam melihat hubungan yang ada. 4. Permintaan informasi yang tidak penting atau tidak relevan, permintaan informasi yang
memerlukan pemikirkan ulang dari jawaban sebelumnya sehingga membingungkan pengguna yang pada akhirnya menimbulkan kekeliruan.
5. Layout yang tidak terstruktur dan terarah yang memungkinkan terjadinya kesalahan. 6. Kualitas presentasi yang jelek, sulit dibaca, akan menurunkan kemampuan pemakai dan
menyebabkan kesalahan lagi. Analisa Kebutuhan dan Definisi Bisnis.
Sasaran dari tahap ini menetapkan kebutuhan suatu sistem.Suatu kebutuhan adalah suatu sasaran yang harus ditemui. Suatu produk yg dikembangkan, didasarkan pada masukan dari para pemakai, pemasaran, atau pihak-pihak lain yang berkepentingan. Desain Layar yang Baik 1. Mencerminkan kemampuan, kebutuhan, dan tugas dari para pemakai nya. 2. Dikembangkan dalam batasan fisik yang menggunakan perangkat keras dengan cara ditampilkan
(berupa layout). 3. Menggunakan kapabilitas/kemampuan dari pengendalian perangkat lunaknya secara efektif. 4. Mencapai sasaran dan tujuan bisnis dari sistem yang dirancang tersebut. pengujian untuk disain yang baik: 1. Pengaturan unsur-unsur layar. 2. Navigasi layar dan aliran. 3. Komposisi yang memuaskan secara visual. 4. Tipografi. 5. Penyeteman (pengaturan) prosedur. 6. Keluaran data / data output. 7. Grafik secara statistik 8. Pertimbngan secara teknologi Task Analysis
task analysis adalah Teknik untuk memperoleh suatu pemahaman dari fungsi yang harus dilakukan oleh sistem computer.
menini.
Untuk menjadi tiga bagia
Bagian Kir
emudahkan daan yaitu, bagia
Gambar 0 : P
ri
Hasil d
alam pembahasan kiri, bagaian
Pemberian bag
H
Bag
dan Pembahas
san, pada tampn tengah dan ba
gian untuk mem
Header
gian Tengah
an
pilan halaman uagian kanan, p
mudahkan pemb
utama websiteerhatikan gam
bahasan
Bagian Ka
Halaman | 7
e ini kita bagi mbar di bawah
anan
1. N
menmemtepa Sara
2. M
menmenkatealph Sara
Navigasi yang
Ada dua nu-menu katembingungkan, at sehingga uns
an: membagi pengaturasebaiknyalebih baikdan disus
Menu-menu Ti
Kita lihanu kategori, nanu-menu kategegori yang mhabetic.
an: mengorganprioritas secara bSehingga
Home dan NWebsite yangsekelompok menu-menu
Membingung
Gambar 1: N
Menu utama yegori, hal insehingga menysur-unsur penti
informasi-infoan unsur-unsua dua menu utk jika dua mensun secara hori
idak Tersusun
t pada kolom ampak jelas sekgori tersebut cemang benar-
nisir derajat keinformasi, seherurutan menu
a informasi yan
News g diletakkan dengan kategori
B
kan dan Tida
Navigasi yang
yaitu Home dani menunjukkyebabkan kemuing tersembuny
ormasi tersebutur layar yang tama tersebut knu utama tersebzontal.
n Rapi
sebelah kiri wkali menu-mencukup banyak,-benar diingin
eterhubungan hingga pada kaurut alphabet
ng ingin disamp
Bagian Kiri
k Efisien
Membingungk
an News Webkan ketidakrudahan pembayi
t menjadi unittepat. sehing
kita pisahkan but kita letakk
website ini, panu tersebut tid, hal ini akan
nkannya karen
antar menu-mesus ini sebaikn
awal dari tipaikan bisa den
kan dan Tidak E
bsite yang diletapian rancan
acaan menjadi m
t yang logis, bgga dalam mdari menu-men
kan di bagian a
ada kolom kiridak tersusun den menyulitkan na menu terse
enu tersebut, snya menu-meniap kata pertangan mudah di
Efisien
takkan sekelomngan visual, menurun. Graf
bermakna, dan emyelesaikan nu kategori, m
atas (tepat di ba
tersebut ada engan baik, ba
pengguna daebut tidak ters
serta menyajiknu kategori tersama pada meimengerti.
Halaman | 8
mpok dengan navigasinya
fis yang tidak
masuk akal, masalah ini
mungkin akan awah header)
beberapa list ayangkan jika alam mencari susun secara
kannya sesuai sebut disusun enu-menunya.
3. In
di snamband
Sara
nkonsistensi D
Apabila k
ana, awalnya mun setelah dicdingkan denga
an: sebaiknya
dicetak tekalau subterlebih d
Menu
Gam
Desain Link
kita lihat lagi psaya pikir ini
coba (diarahkanan gambar yang
submenu-submebal, agar ini sebmenu-submen
dahulu.
Kategori
mbar 2: Menu-
Gambar 3: Ink
pada kolom kirhanya sekedar
n pointer ke sug
menu tersebut esuai dengan funu tersebut m
Band
-menu Tidak Te
konsistensi Des
ri website ini, ar informasi meub-menu terseb
dibuat bewarnfungsinya sebag
memang berfun
Menu-menyang tidakrapi (berur
Menkesupem
bedakan link d“bukan link” Link: -dicetak biru a-digarisbawah
dingka
ersusun Rapi.
sain Link.
ada sub-menu dengenai isi atabut) ternyata itu
na biru atau digai link sehingngsi sebagai l
nu kategori k tersusun rutan)
nyebabkan ulitan
mbacaan
dengan
atau hi
Link
dari tiap-tiap kau content dariu merupakan l
garisbawahi, agga pengguna link, tanpa har
Halaman | 9
kategori menu i website ini, link. Jika kita
atau mungkin angsung tahu rus mencoba
1. K
akan
Sara
2. In
menbahadilakpadaIndotidakdipeharfdipedengsekaSara
3. In
sehi
Kontrol yang KPada logo
n merasa kebin
an : Sebaiknyauser kemtidak tahu
nkonsistensi P
Tidak konggunakan duaasa saja, misalkukan, akan teanan kata yanonesia ini akank tepat, barulaerbolehkan, mifiah ke dalamerbolehkan. Dagan Bahasa Inaligus an : Jika kita
waktu inisebaiknyapenggunadan kata
nkonsistensi DPenekana
ingga menyeba
BaIn
Kurang Lengko website ini tingungan apabil
Ga
a pada logo wmbali ke halamu sekarang ada
Penggunaan B
Gam
onsisten dalama bahasa sekaliglnya menggunaetapi pada kondng cocok dalamn menimbulkanah pencampuranisalkan untuk
m Bahasa Indoalam kasus ini ndonesia, yait
pandang masai mungkin dipa informasi wa yang berada “Negara” kita
Desain Link an Typeface daabkan kemudah
ahasa ndonesia
Bag
kap idak terdapat lila suatu saat te
ambar 4: Kont
website ditambman utama pada di mana.
Bahasa
mbar 5: Inkons
m penulisan, jikgus, Bahasa Inakan Bahasa Indisi tertentu, mm Bahasa Indn kerancuan yan bahasa (pengkata joystick,
onesia, sehinggWednesday m
tu Rabu. Sehi
alah ini dari siperuntukkan bawaktu tersebutdi luar Indoneubah menjadi k
an grafik yang han pembacaan
Bahasa Inggris
gian Tengah
ink ke home atrsesat di saat b
trol yang Kuran
ahkan link ke da saat user m
istensi Penggu
ka kita lihat pandonesia dan Bndonesia saja.
misalnya pada sdonesianya, ataang akhirnya inggunaan bahas
ini merupakaga penggunaan
merupakan kataingga kurang
isi tujuannya, agi user yang bt kita tulis dsia, sehingga kkata “Country”
tidak tepat, tern menjadi rend
tau ke halamanbrowsing.
ng Lengkap
halaman utammerasa kebingu
unaan Bahasa
ada informasi ahasa Inggris. Penggabunganaat tidak ada m
au mungkin jiknformasi yang a inggris dan b
an kata yang tn istilah terseba yang memilikbagus jika ki
kita ketahui bberada di luar alam Bahasa kata “Tanggal””.
rlalu banyak indah.
Pilisatu
H
n utama, sehing
ma, ini untuk mungan ketika b
waktu di atasSeharusnya pi
n seperti ini mumakna kata yanka diartikan dingin disampa
bahasa Indonestidak bisa diarbut dalam Ba
ki padanan kataita gunakan k
bahwa pemberiIndonesia, oleInggris, ini m
” kita ubah men
nformasi yang
tidak terdke halam
h salah u saja
Halaman | 10
gga pengguna
memudahkan browsing dan
s, website ini ilih salah satu ungkin boleh
ng sesuai atau dalam bahasa aikan menjadi sia sekaligus) rtikan secara
ahasa Inggris a yang sesuai
kedua bahasa
ian informasi eh karena itu memudahkan njadi “Date”,
tidak dipilah
dapat link man utama
tersejika dicopenjuntuternbukkareSara
4. In
cetatanp
Sara
B
Pada kolo
ebut dicantumkita perhatika
oba (diarahkanjelasan singkatuk menuliskan nyata merupakaan link, ini mena pengguna aan: sebagaima
bersih daketerhubuyang sedejangan sakita memjuga peny
nkonsistensi D
G
Tidak koak tebal (bukanpa cetak tebal, h
an: sebaiknya
membuathorizonta
Bukan Link
Link
Kedua font sama
om bagian tengmkan nama ora
an lebih lanjutn pointer ke natnya, ada tulisnama admin y
an link, sehingmenunjukkan kakan merasa “tana yang kita kan rapi, apa yaungan yang jeerhana, oleh kaampai membua
mberikan batasayederhanaan ta
Desain Penulis
Gambar 7: Inko
nsisten dalam n juga sebagai hal ini melangg
a menggunakat regularity (kal dan vertikal
Gambar 6: Ink
gah website iniang (dalam halt, kita bisa meama tersebut) tsan yang mengyang mem-posga tidak ada k
ketidakkonsisteterbodohi”. ketahui bahwa ang telihat mu
elas (option, juarena itu sebagat pengguna man yang jelas aampilan agar m
san (dalam pe
onsistensi Desa
penulisan ataulink, hanya inf
ggar Konsep Re
an elemen yanketeraturan) yl yang konsis
konsistensi Des
i, kita bisa mell ini administrlihat nama admternyata itu buggunakan font sting tadi (uku
ketentuan yang enan desain. H
pengguna pasudah dimengerudul, data, dangai depelover kmengalami kesuantara penggun
mudah dibaca.
nggunaan fon
ain Penulisan (
u penggunaan jformasi biasa),egularity dalam
ng serupa dalyang jelas, densten baik dari
sain Link
lihat beberapa rator) yang memin tersebut dukan link, dan
yang sama deuran, warna, da
jelas dalam mHal ini akan b
sti menginginkrti, informasi bn yang lainnyakita harus memulitan. Jadi pa
naan font sebag
nt)
(dalam penggu
jenis font nya, sedangkan nom mendesain la
lam ukuran, bngan menerapsegi penempa
Indiy
H
artikel tutorialem-posting artidicetak biru, na
kita lihat lagiengan font yanan typeface-nya
membedakan anberdampak bag
kan tampilan yberada tepat da), dan penggu
mperhatikan halada kasus di atgai link dan bu
unaan font)
, no 1 dan 2 do 3, 4 dan seterayar pada sebu
bentuk, warnapkan ruang daatannya maup
nformasi yang itulis dengan cang berbeda
Halaman | 11
l, pada artikel ikel tersebut, amun setelah pada bagian
ng digunakan a sama) yang ntara link dan gi pengguna,
yang tersusun di tempatnya, unaan bahasa l-hal tersebut, tas sebaiknya ukan link, dan
ditulis dengan rusnya ditulis
uah website.
a, jarak, dan an pelurusan
pun dari segi
sama cara
5. T
berdsebamen
Sara
6. G
webseba
Sara
penulisanbentuk, w
Tampilan tidakDalam pe
dasarkan alphaagai user) apangetahui apaka
an : Jika memjudul yanoptimal iuntuk me
Grouping tanp
Tidak adbsite ini. Ini juagai masyaraka
an : Secara um
yang sapengelommenjadi s
nnya, atau muwarna untuk inf
k tersusun rapenulisan nama abet awal dari nabila kita sud
ah kita memang
G
mang ingin meng berarti untukinformasi terseenghindari penu
a dasar penge
Gambar 9: G
da pola dan kuga akan membat (anggota) we
mum grouping aling berhubumpokan tersebusulit dibaca (di
ungkin denganformasi yang b
pi tidak ada urut
nama-nama terdah terdaftar, g sudah benar2
Gambar 8: Tam
elakukan pengk tiap pengelomebut, dan berikurunan tingkat
elompokan yan
Grouping tanp
ketentuan yangbingunkan penebsite ini. Peng
digunakan unungan. Namunut dilakukan taimengerti).
n membuat uberkaitan.
tan penulisannrsebut sehinggaatau mungkin
2 terdaftar seba
mpilan tidak ter
gelompokan, mmpokannya, in
kan urutan yant kemudahan m
ng jelas
pa dasar penge
g jelas mengengguna, jika pegguna akan keb
ntuk meyajikann dalam atuanpa aturan, m
unity menggun
nya, atau dengaa sulit mencarin kita akan magai anggota ke
rsusun rapi
maka lakukanlani memudahkang jelas dalam
membaca web te
elompokan yang
enai pembagiaengguna tersebbingungan di k
n pengelompokuran dan bat
maka akan mey
H
nakan keserup
an kata lain tidi posisi nama k
mengalami keselompok websi
ah pengelompn pengguna mepengelompokaersebut.
g jelas.
an kelompok but memang tekelompok mana
kan fungsionaltas yang jel
yebabkan inform
Penyusunanama tidak
Dikelompoberdasarka
Halaman | 12
paan ukuran,
dak diurutkan kita (tentunya sulitan untuk ite ini.
okan dengan eyerap secara an itu, hal ini
dari anggota elah terdaftar a ia terdaftar.
l dari elemen las. Apabila masi tersebut
an k urut
okkan an apa?
7. In
berwsebepadahal i
Sara
8. T
tebabiastersePadterlipadaakansatu Sara
nkonsistensi D
Ada dua warna biru danelah kanan kitaa tulisan di gaini jelas kontra
an: Seharusnya
jika hanydan berwdiperbesaberwarna
Tampilan yang
Pada bag
al, tidak berwarsa yang disusuebut, barulah da gambar di atihat bahwa poia judulnya. Bin mengalami k
u bentuk desain
an : harus konatau garispoin-poindalam me
Desain Link
G
hal yang konn di-bold, ternya juga bisa me
ambar sebelah kadiksi, ini juga
a untuk fungsiya ingin menamwarna hitam, ar), sedangkana biru, atau den
g tidak tersusu
Gambar 11
gian Category Trna biru, dan t
un dalam bentudiketahui ternytas kita juga bint-point tersebisa kita bayankesulitan dalamn yang kurang b
nsisten dalam ds bawah padan dari suatu inembacanya.
Bukan
Gambar 10: In
ntras di sini. Pyata bukan linkelihat ada tulisakiri, yaitu berwmerupakan sa
i yang berbedampilkan inform
atau mungkinn untuk menulngan digarisbaw
un dan kurang
1: Tampilan ya
Tutorial Coreldidak digarisba
uk daftar atau lata point-pointisa melihat tid
but tidak diurutngkan jika poinm melakukan pbaik karena ak
desain, gunakaa tulisan yang nformasi, agar
konsistensi De
Pada gambar sk, hanya sebagan dengan fontwarna biru dan
alah satu bentuk
a, digunakan bmasi sebagai jun dengan meliskan kata atawahi, agar terli
g rapi
ang tidak tersus
draw, terdapat awahi), pada mlist, namun sett tersebut meru
dak adanya urutkan menurut ant-point tersebpencarian artik
kan menurunka
anlah aturan yaberfungsi sevar tidak memb
Link
Berfungssebagai lTidak adketeratur
esain Link.
sebelah kiri kigai judul dari ht yang sama den di-bold, akank ketidakkonsi
bentuk font yadul sebaiknya
erubah ukuranau prase sebagihat jelas perbe
sun dan kurang
6 point yang fmulanya saya mtelah mouse diupakan link. utan yang jelasalphabet awal dbut cukup banykel yang diingian tingkat kemu
ang umum, sepagai link, buatlbingungkan pen
si ink a urutan atau
ran yang jelas
H
ita lihat bahwahalaman, lalu engan font yann tetapi itu merstenan.
ang berbeda jucukup di cetak
n typeface-nyagai link, digunedaaanya.
g rapi.
fontnya regularmengira ini haniarahkan kesal
dalam list terdari kata yang yak jumlahnyainkan. Ini merudahan dalam m
perti pemberialah urutan yanngguna, dan m
Halaman | 13
a ada tulisan pada gambar
ng digunakan rupakan link,
uga, misalnya k tebal (bold) a (ukurannya nakan tulisan
r (tanpa cetak nya informasi ah-satu point
rsebut, hal ini paling depan a, maka user rupakan salah membaca.
an warna biru g jelas untuk memudahkan
9. K
ketemenkegukareEmadipedarijika tidak
dengdituditu Sara
Ketidakkonsist
Gamba
Di pojok erangan yang nggunakan Baunaanpun ini kena jika kita teail, atau Emaierlukan, serta mi kotak form “
kita perhatikak terurut (respo
Penggunagan huruf besa
ulis dengan huulis dengan huru
an:Menampilktepat, agayang tidahal yang menandaform tersserta gunBerikut p
Nama E-mail Ho.Hp Isi e-mail
W
tenan Desain P
ar 12: Ketidakk
kiri atas kita ltidak jelas, b
ahasa Inggris, kurang bermanerjemahkan keil terkirim), temaksud penuliE-MAIL andaan lebih lanjuton 2, baru respan tulisan yanar pada awal kuruf besar semruf besar, ini m
kan informasi har tidak terjadak perlu, karenmungkin bisa i di sebelah ksebut tuliskan nakanlah penuliperbaikan desai
Wajib diisi
Penulisan dan
konsistenan De
ihat ada tulisanahkan ini muini menunjuk
faat, karena kaedalam bahasa erdapat juga kisannyapun sul
a” dan “No.Hpt dari segi pelepon 1), dan darng tidak konsikatanya, akan temua, dan pada merupakan suatu
harus sesuai ddi kesalahpaham
a hal tersebut hdiperbaiki aga
kanan kotak foarti tanda tersisan kata yangin yang mungk
Gambar 13: S
n Ketidakjelas
esain Penulisan
n “Email send…ungkin tidak lakkan ketidakkata-kata tersebuIndonesia arti
keterangan yanlit dipahami, in”, disana terdaetakannya ini ri segi kegunaanisten, Point “Netapi pada poinpoint “ISI E-Mu bentuk ketida
dengan fungsi man bagi penghanya akan mear desain terseborm tersebut desebut. Untuk leg lebih konsistekin bisa dilakuk
Saran Penyajia
san Informasi
n dan Ketidakje
… ”, ini merupayak disebut onsistenan Baut sama sekali nya “Email meng kurang jelni bisa kita lihapat peringatantidak memenunyapun ini jug
Nama” ditulis nt “E-MAIL AMAIL” lebih akkonsistenan
dan tempatnygguna, dan janembuat bingunbut bisa lebih iengan tanda *ebih jelasnya pen, agar desainkan.
an Desain
Infortidak
H
elasan Informa
pakan bentuk ininformasi, tul
ahasa, kemuditidak berarti (mengirim”, (buklas dan mungkhat pada sisi sen “respon 2 dauhi aturan penuga kurang jelas,
menggunakanAnda”, kata “E
fatal lagi, semdalam penulisa
ya, gunakan kangan menambang pengguna. Ainteraktif, dian , lalu pada bperhatikan gam
n tersebut terlih
rmasi yang k jelas
Tidak terurut
Tidak kon
Halaman | 14
asi
nformasi atau isan tersebut ian dari segi meaningless), kan mengirim kin ini tidak ebelah kanan an respon 1”, ulisan karena , n huruf kecil -MAIL” nya,
mua hurufnya an.
ata-kata yang ahkan hal-hal Ada beberapa ntaranya ialah bagian bawah mbar berikut, hat lebih rapi.
t
nsisten
1. P
vertdengmensecamenhoribagisebadan
Sara
2. D
namPagJikaada ini abahadan infosimbsedaterdkura
Sara
Page scroling y
Pada webtikalnya cukupgan rata-rata nampilkan banara teratur, ininjadi rendah. Hizontal, bagi bian sisi (kananagaimana yangrapi, apa yang
an : Sebaiknya
pemakainmerasa kuPenggunasebaiknyamaksudnybatasan ysemua inhalaman,semua in
Desain yang ku
Pada pojo
ma “Statistik Siges, dan masina kita perhatika
pencampuran akan sulit dimasa itu bisa digjika dipaksak
ormasi yang inbol, simbol oangkan simbo
dapat pada situang tepat untuk
an : Gunakan
penggunakonsistenkarakterissuatu fun
yang tidak efis
bsite ini kita p banyak, lebiscrolling vertinyak tutorial pi menyebabkaHal lain yangeberapa penggn dan kiri) layg kita ketahui g telihat mudah
a scrolling horinnyapun cukupurang nyaman aan scrolling ba kita mengoya informasi-iyang jelas, apanformasi yang untuk meminformasi yang s
urang rapi dan
Gambar 1
ok kanan bagiitus”, isinya be
ng-masing menan lebih lanjut,bahasa ini aka
mengerti oleh bgunakan jika s
kan untuk diartngin disampaikrang berwarnal orang berw
us ini. Ini adalak menjelaskan
bahasa yang ja website ini n dalam bahasastik penggunanngsi tertentu, p
Ba
sien
juga bisa meih kurang 10-ikal maksimumpada satu halaman ketidakrapiag juga tidak diguna, ini sunggyar pengguna bahwa penggu
h dimengerti, da
izontal itu dihip mudah, akanpada saat brow
berlebihan seboptimalkan juminformasi yangabila dalam sag saling berkanimumkan risiksaling berkaitan
n tidak konsis
14: Desain yang
an atas (di bawerupa informasnggunakan sim ini merupakanan membuat debeberapa penggsudah tidak adatikan ke salah
kan tidak optima biru digunak
warna kuning ah bentuk desainformasi terte
jelas dan mudadalah orang
a Indonesia, sunya. Kemudian
penggunaan sim
gian Kanan
elihat ada scro-12 kali, ini sm sekitar 6-8 man, yang notaan rancangan isukai oleh peguh “menyebalharus melakuk
una pasti menan informasi b
indari, mungkin tetapi dari sewsing. aiknya jangan mlah elemen g ditampilkan atu halaman diaitan, maka kiko terjadinya n diletakkan se
sten
g kurang rapi
wah header) kisi mengenai si
mbol dengan gan bentuk ketidaesain layarnyaguna. Kembalia lagi kata yanh satu bahasa, mal. Pada bagiakan untuk medigunakan unain yang kuranentu.
dah dimengertiIndonesia, ad
uatu desain din, gunakanlahmbol ini cukup
t
oll horizontal sungguh tidak
kali. Hal ini abene tutorial visual dan ke
engguna pada lkan”, untuk mkan scrolling ginginkan tamerada tepat di t
in ini tidak meegi estetika in
sampai terjadpada layar,
pada layar sebrasakan tidak ita bisa membscrolling vertik
emuanya dalam
dan tidak kons
ita lihat ada koitus tersebut, aambar orang yakkonsintenan
a menjadi burui lagi kita teka
ng cocok atau sini akan mem
an ini kita jugengartikan jum
ntuk mengartikng baik, karen
i, sebagaimanada baiknya jikibuat haruslah h elemen yang p bagus, akan
Bahasa tidakkonsisten
Simbol tidak tepat
H
dan scroll veefisien jika dterjadi karenatersebut pun tiemudahan peumumnya, ya
memperoleh inhorizontal terl
mpilan yang tertempatnya.
enyulitkan pengni akan membu
di, agar hal ini dalam batasa
baiknya ditampcukup untuk mbaginya menjakal yang berle
m satu halaman
sisten
olom informasantara lain ialahyang diberi wa
dalam pengguuk, dan mungkiankan bahwa psepadan dianta
mbingungkan, dga bisa melihatmlah pengunjukan jumlah haa penggunaan
a yang kita keka bahasa yansesuai dengansesuai dalam tetapi harus s
k
Halaman | 15
ertikal, scroll dibandingkan a website ini idak tersusun embacaanpun aitu scrolling formasi pada lebih dahulu. rsusun bersih
gguna karena uat pengguna
tidak terjadi an kejelasan, pilkan dalam menampilkan adi beberapa ebihan akibat n.
si yang diberi h Visitor dan arna berbeda. unaan bahasa, in di lain sisi pencampuran ara keduanya, dan akhirnya t penggunaan ung situs ini, alaman yang simbol yang
etahui bahwa ng digunakan n kriteria dan
menjelaskan esuai dengan
3. K
dariada tersemakmemdiarberkadmadmonliwakSara
4. T
Padterdsini,
informasisimbol dhalaman,terkandundiidentifi
Ketidakjelasan
Pada bagi para admin yapertanyaan ataebut. Akan teksudnya dua mbingungkan rahkan pointerkomunikasi den
min dalam keadmin karena tidaine itu kita harktu pengguna.an : Berikan i
baik, infokebaikan Ketidaktesulit ditedalam art
Tampilan tidak
a bagian sebeldapat dalam sit, kategori terse
i yang dijelaskdengan gamba misalkan gamng pada websikasi tanpa haru
n dalam pengg
Gambarse
gian kolom palang mengelolaau saran, pengetapi kenyataanama yang ppengguna, apa
r ke nama tersngan adminnydaan online, nak ada link ke rus membuka a
nformasi yangormasi yang lo
desain layar. eraturan, ketiderima pengguntian menjadi bi
k tersusun rap
Gambar
ah kanan kita jtus ini, tutorialebut tidak terur
Link atau bukan ?
Link atau bukan ?
kannya, misalkar orang, danmbar halaman ite tersebut bius membaca te
gunaan fungsi
r 15: Ketidakjeebagai pemenu
ing kanan weba website ini. Dguna bisa langannya tidak spaling bawah,akah dua namsebut ternyta t
ya via email, banamun kurangnnama tersebutaplikasi chatin
g jelas, agar peogis, serta penyHal ini pentin
dakefisienan, ana, ini membuaingung dan tida
pi dan fungsi s
r 16: Tampilanserta Kontrol
juga bisa melihl tersebut terbarut, dan penuli
kan untuk mejen bedakan den
web. Ini dimisa dengan mueks yang menje
i sebagai peme
lasan dalam peuhan kebutuhan
bsite ini terdapDari segi fungsgsung berkomuseperti ini, pa karena tidak
ma terakhir tertidak ada linkarulah mengertnya di sini, kit, untuk bisa be
ng terlebih dah
engguna tidak myajian menurut
ng sekali untukakan menyebabat pengguna mak mengerti.
serta control y
n tidak tersusunl yang membing
hat menu shortagi menjadi beisannya pun tid
Tidak online
Online kah?
elaskan jumlahngan simbol
maksudkan agarudah terbaca, elaskan tentang
enuhan kebutu
enggunaan funn pengguna
pat informasi bsionalitasnya inunikasi denganada mulanya k ada statusnyrsebut sedang
k sama sekali, ti ternyata itu ta tidak bisa laerkomunikasi d
hulu, sungguh
merasa kebigut prioritas info
k diperhatikan bkan informas
merasa “takut”
yang membing
n rapi dan funggungkan
tcut, menu ini eberapa kategodak rapi, ini m
e
?Ku
H
Terlink
Buklink
h pengunjung yang menjelar informasi-infelemen pada
g fungsinya.
uhan penggun
ngsi
berupa status chni jelas sangat n admin yang s
saya tidak mya sama seka online atau kemudian s
menunjukkan angsung terhudengan admin tidak efektif d
ungan, desain normasi merupak
sebagai pengesi yang ingin ”, atau bahkan
gungkan
gsi
berisi tutorial-ori, namun jika
menyulitkan pen
urang jelas
Halaman | 16
rnyata k
kan k
kita gunakan askan jumlah formasi yang layar mudah
na.
hating online berguna, jika
sedang online mengerti apa ali, ini jelas tidak, ketika etelah sering bahwa status
ubung dengan yang sedang
dan memakan
navigasi yang kan indikator elola website.
disampaikan n “terancam”,
-tutorial yang a kita lihat di ngguna untuk
memrapiwebterse Sara
5. D
situsini. bermterkSara
mbacanya. Tiapi, pada awalnybsite ini,namunebut, barulah d
an : Hindari kesalahanPerbaiki yang padlagi.
Derajad Kepen
G
Di bawahs lain yang telDitinjau dari
manfaat, kalaukesan sulit dibaan : Perbaiki k
yang padlagi.
p-tiap kategoriya saya mengin setelah diteldiketahui itu be
Layout yang n, buatlah katkualitas presen
da akhirnya ak
ntingan dalam
Gambar 17: Der
h menu kategolah terhubung
segi kepentinupun ini memaaca. kualitas presenda akhirnya ak
i terdapat list aira ini hanya liti lebih lanjuerfungsi sebaga
tidak terstrukttegori tersebuntasi, jangan sakan menurunk
m Desain Tamp
rajad Kepentin
ori kita bisa meatau menggunngannya, rasanang perlu dilak
ntasi, jangan sakan menurunka
Infopertambaik
atau daftar tutolist biasa yan
ut, mengarhkanai link.
tur dan tidak ut menjadi poampai penggun
kan kemampua
pilan Informa
ngan dalam De
elihat ada infonakan informasnya hal ini tidkukan, jangan
ampai penggunan kemampuan
formasi yang tidrlu dan desain mpilan yang kurk
orial, daftar ini ng berisikan inn pointer ke s
terarah yang oin-point yangna mengalami
an pemakai da
asi
esain Tampilan
rmasi mengensi yang terdapadak perlu dilasampai memb
na mengalami n pengguna da
dak
rang
H
juga tidak tersnformasi mengalah satu poin
memungkinkag terstruktur d
kesulitan dalaan menyebabka
n Informasi
nai blog-blog mat di situs ilmuakukan, karenbuat tampilan
kesulitan dalaan menyebabk
Halaman | 17
susun dengan genai isi dari nt dari daftar
an terjadinya dengan jelas. am membaca, an kesalahan
maupun situs-uwebsite.com a ini kuarng informasi ini
am membaca, kan kesalahan
Halaman | 18
IV. Kesimpulan dan Saran
Kesimpulan Desain layar yang baik, antar muka yang interaktif, dan tingkat usabilitas yang tinggi
memegang peranan penting terhadap kemajuan sebuat website, pengembangan sistem yang berorientasi pengguna ini merupakan hal yang mutlak dilakukan oleh pengelola situs tersebut untuk memperoleh hasil yang optimal.
Dari beberapa hasil dan pembahasan di atas, cukup banyak hal yang masih perlu diperbaiki dan dikembangkan oleh pengelola website tersebut (www.ilmuwebsite.com) untuk meningkatkan kualitas websitenya, terutma mengenai desain antar mukanya dan cara menampilkan fungsi serta informasinya.
Suatu desain layar yang baik harus mencerminkan kemampuan, kebutuhan, dan tugas dari para pemakai nya, dikembangkan dalam batasan fisik yang jelas, menggunakan kapabilitas/kemampuan dari pengendalian perangkat lunaknya secara efektif. dan mampu mencapai sasaran dan tujuan bisnis dari sistem yang dirancang tersebut.
Saran 1. Perjelas teks dan pilih kata yang tidak tepat dalam menyampikan informasi, karena ketidakjelasan
dan ketidaktepatan inilah yang menyebabkan keraguan dan akhirnya memungkinkan para pengguna salah dalam menafsirkannya.
2. Gunakan grafis secara tepat sehingga unsur-unsur penting terbaca dan mudah dimengerti dengan bailk.
3. Pilihlah judul yang representatif. Karena jika tidak, ini akan menciptakan kebingungan dan menghalangi kemampuan dalam melihat hubungan yang ada.
4. Hindari permintaan informasi yang tidak penting atau tidak relevan, karena akan membingungkan pengguna yang pada akhirnya menimbulkan kekeliruan.
5. Buatlah layout yang terstruktur dan terarah untuk meminimalisir terjadinya kesalahan. 6. Tingkatkan kualitas presentasi agar mudah dibaca, ini akan sangat membantu pengguna dalam
menyerap informasi yang akan disampaikan dengan cepat ketika pertama kali pengguna menggunakan aplikasi ini.
Halaman | 19
V. Daftar Pustaka
Ambler, Scott W. 2001. User Interface Design Tips, Techniques, and Principles. Second Edition. McGraw-Hill Book Co., Singapore.
Ambler, Scott W. 2004. Maturing Usability, Quality in Software, Interaction and Volume. Third Edition. Springer Inc.
Galitz, Wilbert O. 2007.The Essential Guide to User Interface Design. Third Edition. WileyPublishing. Inc.
Quesenbery. 2003. Nielsen. 2003.
Top Related