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 | 0
 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 | 1
 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 | 2
 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 | 3
 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 | 4
 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:
y Standardisasi: keseragaman sifat-sifat antarmuka pemakai pada aplikasi yang berbeda.
y Integrasi: keterpaduan antara paket aplikasi dan software tools.
y Konsistensi: keseragaman dalam suatu program aplikasi.
y 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 | 5
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.

Halaman | 6
 Hasil d
dan Pembahasan

Untuk meemudahkan daalam pembahassan, pada tamppilan halaman uutama websitee ini kita bagi
mennjadi tiga bagiaan yaitu, bagiaan kiri, bagaiann tengah dan baagian kanan, perhatikan gam
mbar di bawah
ini.
H
Header

Bagian Kirri Baggian Tengah Bagian Kaanan

Gambar 0 : Pemberian
P baggian untuk mem
mudahkan pembbahasan

Halaman | 7
 B
Bagian Kiri

1. Navigasi
N yang Membingungkan dan Tidak Efisien

Home dan News

N
Website yang
g diletakkan
sekelompok dengan
menu-menu kategori

Gambar 1: Navigasi
N yang Membingungkkan dan Tidak E
Efisien

Ada dua Menu utama yaitu y Home daan News Web

bsite yang dilettakkan sekelom
mpok dengan
mennu-menu kateegori, hal inni menunjukkkan ketidakrapian rancanngan visual, navigasinya
memmbingungkan, sehingga meny yebabkan kemuudahan pembaacaan menjadi mmenurun. Graffis yang tidak
tepaat sehingga unssur-unsur pentiing tersembunyyi

Saraan: membagi informasi-infoormasi tersebutt menjadi unitt yang logis, bbermakna, dan masuk akal,
pengaturaan unsur-unsuur layar yang tepat. sehinggga dalam memyelesaikan masalah ini
sebaiknyaa dua menu uttama tersebut kkita pisahkan dari menu-mennu kategori, mungkin
m akan
lebih baikk jika dua men
nu utama tersebbut kita letakk
kan di bagian aatas (tepat di baawah header)
dan disussun secara horizontal.

2. Menu-menu
M Tiidak Tersusun
n Rapi

Kita lihat pada kolom sebelah kiri w

website ini, paada kolom kiri tersebut ada beberapa list
mennu kategori, naampak jelas sekkali menu-mennu tersebut tid
dak tersusun deengan baik, baayangkan jika
mennu-menu kateg gori tersebut cukup
c banyak,, hal ini akann menyulitkan pengguna daalam mencari
kateegori yang memang benar--benar diinginnkannya karenna menu terseebut tidak terssusun secara
alphhabetic.

Saraan: mengorgannisir derajat keeterhubungan antar menu-meenu tersebut, sserta menyajikkannya sesuai
prioritas informasi, sehhingga pada kasus ini sebaikn
nya menu-mennu kategori terssebut disusun
secara berurutan menu urut alphabet awal dari tiiap kata pertaama pada meenu-menunya.
Sehinggaa informasi yanng ingin disamppaikan bisa denngan mudah diimengerti.

Halaman | 8
 Menu-mennu kategori
yang tidakk tersusun
rapi (berurrutan)

Mennyebabkan
kesuulitan
pem
mbacaan

Gam
mbar 2: Menu--menu Tidak Teersusun Rapi.

3. In
nkonsistensi Desain
D Link

Menu Kategori

Link
Banddingka

bedakan link dengan

d
“bukan link”
Link:
-dicetak biru atau
a
-digarisbawahhi

Gambar 3: Inkkonsistensi Dessain Link.

Apabila kita
k lihat lagi pada
p kolom kirri website ini, ada
a sub-menu ddari tiap-tiap kategori
k menu
di sana, awalnya saya pikir ini hanya sekedarr informasi meengenai isi ataau content darii website ini,
nam
mun setelah diccoba (diarahkann pointer ke suub-menu terseb but) ternyata ituu merupakan link.
l Jika kita
banddingkan dengaan gambar yangg

Saraan: sebaiknya submenu-subm menu tersebut dibuat bewarnna biru atau digarisbawahi, atau
a mungkin
dicetak teebal, agar ini seesuai dengan fungsinya
fu sebaggai link sehinggga pengguna langsung tahu
kalau sub bmenu-submennu tersebut m memang berfunngsi sebagai link, tanpa harrus mencoba
terlebih dahulu.
d

Halaman | 9
 Baggian Tengah

1. Kontrol
K yang Kurang
K Lengk kap
Pada logoo website ini tiidak terdapat liink ke home attau ke halamann utama, sehinggga pengguna
akann merasa kebinngungan apabilla suatu saat tersesat di saat browsing.
b

tidak terddapat link

ke halamman utama

Ga
ambar 4: Konttrol yang Kuran
ng Lengkap

Saraan : Sebaiknyaa pada logo website

w ditambahkan link ke halaman utam
ma, ini untuk memudahkan
m
user kemmbali ke halamman utama padda saat user merasa
m kebinguungan ketika browsing
b dan
tidak tahu
u sekarang adaa di mana.

2. In
nkonsistensi Penggunaan
P Bahasa
B

Baahasa Bahasa Pilih salah

Inndonesia Inggris satuu saja

Gam
mbar 5: Inkonsistensi Penggu
unaan Bahasa

Tidak koonsisten dalamm penulisan, jikka kita lihat paada informasi waktu di atass, website ini
mennggunakan duaa bahasa sekaliggus, Bahasa Inndonesia dan Bahasa Inggris. Seharusnya piilih salah satu
bahaasa saja, misallnya menggunaakan Bahasa Inndonesia saja. Penggabungann seperti ini mu ungkin boleh
dilakkukan, akan teetapi pada konddisi tertentu, m
misalnya pada saat tidak ada m makna kata yanng sesuai atau
padaanan kata yanng cocok dalam m Bahasa Inddonesianya, ataau mungkin jikka diartikan dalam d bahasa
Indoonesia ini akann menimbulkan n kerancuan yaang akhirnya in nformasi yang ingin disampaaikan menjadi
tidakk tepat, barulaah pencampurann bahasa (pengggunaan bahasa inggris dan bbahasa Indonessia sekaligus)
dipeerbolehkan, miisalkan untuk kata joystick, ini merupakaan kata yang tidak t bisa diarrtikan secara
harffiah ke dalam m Bahasa Indoonesia, sehinggga penggunaan n istilah tersebbut dalam Baahasa Inggris
dipeerbolehkan. Daalam kasus ini Wednesday merupakan
m kataa yang memilikki padanan kataa yang sesuai
denggan Bahasa Inndonesia, yaittu Rabu. Sehiingga kurang bagus jika kiita gunakan kedua k bahasa
sekaaligus
Saraan : Jika kita pandang masaalah ini dari siisi tujuannya, kita ketahui bbahwa pemberiian informasi
waktu inii mungkin dipperuntukkan baagi user yang berada b di luar Indonesia, oleeh karena itu
sebaiknyaa informasi waktu
w tersebutt kita tulis dalam Bahasa Inggris, ini memudahkan
m
penggunaa yang berada di luar Indonesia, sehingga kata k “Tanggal”” kita ubah men njadi “Date”,
dan kata “Negara” kita ubah menjadi kkata “Country””.

3. In
nkonsistensi Desain
D Link
Penekanaan Typeface daan grafik yang tidak tepat, terrlalu banyak innformasi yang tidak dipilah
sehiingga menyebaabkan kemudahhan pembacaann menjadi renddah.

Halaman
H | 10
 B
Bukan Link

Link

Kedua
font
sama

Gambar 6: Inkkonsistensi Dessain Link

Pada koloom bagian teng gah website inii, kita bisa mellihat beberapa artikel tutoriall, pada artikel
terseebut dicantum
mkan nama oraang (dalam hall ini administrrator) yang meem-posting artiikel tersebut,
jika kita perhatikaan lebih lanjutt, kita bisa melihat nama adm min tersebut dicetak
d biru, naamun setelah
dicooba (diarahkann pointer ke naama tersebut) tternyata itu buukan link, dan kita lihat lagi pada bagian
penjjelasan singkattnya, ada tulissan yang mengggunakan font yang sama deengan font yanng digunakan
untuuk menuliskan nama admin yang y mem-possting tadi (ukuuran, warna, daan typeface-nyaa sama) yang
tern
nyata merupakaan link, sehingga tidak ada kketentuan yang jelas dalam membedakan
m anntara link dan
bukan link, ini menunjukkan
m k
ketidakkonsiste enan desain. Hal
H ini akan berdampak
b baggi pengguna,
kareena pengguna akan
a merasa “tterbodohi”.
Saraan: sebagaimaana yang kita ketahui
k bahwa pengguna passti menginginkkan tampilan yang y tersusun
bersih daan rapi, apa yaang telihat muudah dimengerrti, informasi bberada tepat di d tempatnya,
keterhubuungan yang jeelas (option, juudul, data, dann yang lainnyaa), dan penggu unaan bahasa
yang sedeerhana, oleh kaarena itu sebaggai depelover kita
k harus mem mperhatikan hall-hal tersebut,
jangan saampai membuaat pengguna m mengalami kesu ulitan. Jadi paada kasus di attas sebaiknya
kita mem
mberikan batasaan yang jelas aantara penggun naan font sebaggai link dan bu ukan link, dan
juga penyyederhanaan taampilan agar m mudah dibaca.

4. In
nkonsistensi Desain
D Penulissan (dalam penggunaan fon
nt)

Innformasi yang sama

diitulis dengan cara
c
yang berbeda

G
Gambar 7: Inko
onsistensi Desaain Penulisan (dalam
( pengguunaan font)

Tidak konsisten dalam penulisan atauu penggunaan jenis j font nya, no 1 dan 2 ditulis
d dengan
cetaak tebal (bukann juga sebagai link, hanya infformasi biasa),, sedangkan noo 3, 4 dan seterrusnya ditulis
tanppa cetak tebal, hal
h ini melangg
ggar Konsep Reegularity dalam m mendesain laayar pada sebu uah website.

Saraan: sebaiknyaa menggunakaan elemen yanng serupa dallam ukuran, bentuk,

b warnaa, jarak, dan
membuatt regularity (kketeraturan) yyang jelas, denngan menerappkan ruang daan pelurusan
horizontaal dan vertikall yang konsissten baik dari segi penempaatannya mauppun dari segi

Halaman
H | 11
 penulisannnya, atau mu ungkin dengann membuat unity
u menggunnakan keserup
paan ukuran,
bentuk, warna
w untuk infformasi yang berkaitan.
b

5. Tampilan
T tidakk tersusun rappi
Dalam peenulisan nama tidak ada uruttan penulisann nya, atau dengaan kata lain tiddak diurutkan
berddasarkan alphaabet awal dari nama-nama
n terrsebut sehinggaa sulit mencarii posisi nama kita
k (tentunya
sebaagai user) apaabila kita suddah terdaftar, atau mungkinn kita akan mengalami
m kessulitan untuk
menngetahui apakaah kita memang g sudah benar22 terdaftar sebaagai anggota keelompok websiite ini.

Penyusunaan
nama tidakk urut

G
Gambar 8: Tam
mpilan tidak terrsusun rapi

Saraan : Jika memmang ingin meelakukan penggelompokan, maka m lakukanlaah pengelompokan dengan
judul yan
ng berarti untukk tiap pengelom mpokannya, inni memudahkann pengguna meeyerap secara
optimal informasi
i terseebut, dan berikkan urutan yang jelas dalam pengelompokaan itu, hal ini
untuk meenghindari penu urunan tingkatt kemudahan membaca
m web teersebut.

6. Grouping
G tanpa dasar pengeelompokan yan
ng jelas

Dikelompo okkan
berdasarkaan apa?

Gambar 9: Grouping
G tanppa dasar pengeelompokan yangg jelas.

Tidak adda pola dan ketentuan

k yangg jelas mengeenai pembagiaan kelompok dari anggota
webbsite ini. Ini juuga akan membbingunkan penngguna, jika peengguna tersebbut memang teelah terdaftar
sebaagai masyarakaat (anggota) weebsite ini. Penggguna akan kebbingungan di kelompok
k manaa ia terdaftar.

Saraan : Secara um
mum grouping digunakan unntuk meyajikann pengelompokkan fungsionall dari elemen
yang saaling berhubuungan. Namunn dalam atuuran dan battas yang jellas. Apabila
pengelommpokan tersebuut dilakukan taanpa aturan, maka
m akan meyyebabkan inform
masi tersebut
menjadi sulit
s dibaca (diimengerti).

Halaman
H | 12
7. In
nkonsistensi Desain
D Link

Bukan Link

Gambar
G 10: Inkonsistensi Deesain Link.

Ada dua hal yang konntras di sini. P Pada gambar sebelah

s kiri kiita lihat bahwaa ada tulisan
berw
warna biru dann di-bold, ternyyata bukan linkk, hanya sebag gai judul dari halaman,
h lalu pada gambar
sebeelah kanan kitaa juga bisa meelihat ada tulisaan dengan fontt yang sama deengan font yanng digunakan
padaa tulisan di gaambar sebelah kiri,
k yaitu berw warna biru dann di-bold, akann tetapi itu merrupakan link,
hal ini
i jelas kontraadiksi, ini juga merupakan saalah satu bentukk ketidakkonsistenan.

Saraan: Seharusnyaa untuk fungsii yang berbedaa, digunakan bentuk

b font yaang berbeda juuga, misalnya
jika hanyya ingin menam mpilkan inform
masi sebagai judul sebaiknya cukup di cetakk tebal (bold)
dan berw warna hitam, atau mungkinn dengan meerubah ukurann typeface-nyaa (ukurannya
diperbesaar), sedangkann untuk menulliskan kata ataau prase sebaggai link, digun nakan tulisan
berwarnaa biru, atau denngan digarisbaw
wahi, agar terliihat jelas perbeedaaanya.

8. Tampilan
T yang
g tidak tersusu
un dan kurangg rapi

Berfungssi
sebagai link
Tidak ada urutan atau
keteraturran yang jelas

Gambar 11
1: Tampilan yaang tidak tersussun dan kurangg rapi.

gian Category Tutorial

Pada bag T Corelddraw, terdapat 6 point yang ffontnya regularr (tanpa cetak
tebaal, tidak berwarrna biru, dan tidak digarisbaawahi), pada mulanya
m saya m
mengira ini hannya informasi
biassa yang disusuun dalam bentuuk daftar atau llist, namun settelah mouse diiarahkan kesalah-satu point
terseebut, barulah diketahui
d ternyata point-pointt tersebut meruupakan link.
Pada gambar di attas kita juga bisa melihat tiddak adanya uruutan yang jelas dalam list terrsebut, hal ini
terliihat bahwa poiint-point terseb
but tidak diuruttkan menurut alphabet
a d kata yang paling depan
awal dari
padaa judulnya. Biisa kita bayanngkan jika poinnt-point tersebbut cukup banyyak jumlahnyaa, maka user
akann mengalami kesulitan
k dalam
m melakukan pencarian
p artikkel yang diingiinkan. Ini merrupakan salah
satuu bentuk desainn yang kurang baik
b karena akkan menurunkaan tingkat kemuudahan dalam membaca. m

Saraan : harus kon

nsisten dalam desain,
d gunakaanlah aturan yaang umum, sepperti pemberiaan warna biru
atau gariss bawah padaa tulisan yang berfungsi sevaagai link, buatllah urutan yang jelas untuk
poin-poinn dari suatu innformasi, agarr tidak membbingungkan penngguna, dan memudahkan
m
dalam meembacanya.

Halaman
H | 13
9. Ketidakkonsist
K tenan Desain Penulisan
P dan
n Ketidakjelassan Informasi

Inforrmasi yang
tidakk jelas

Tidak terurutt

Tidak konnsisten

Gamba
ar 12: Ketidakkkonsistenan Deesain Penulisan
n dan Ketidakjeelasan Informaasi

Di pojok kiri atas kita lihat ada tulisann “Email send…… ”, ini meruppakan bentuk innformasi atau
keteerangan yang tidak jelas, bahkan ini muungkin tidak laayak disebut informasi, tulisan tersebut
mennggunakan Baahasa Inggris, ini menunjukkkan ketidakkonsistenan Baahasa, kemudiian dari segi
kegu unaanpun ini kurang
k bermanfaat, karena kaata-kata tersebuut sama sekali tidak berarti (m meaningless),
kareena jika kita teerjemahkan keedalam bahasa Indonesia artinya “Email meengirim”, (bukkan mengirim
Ema ail, atau Emaiil terkirim), teerdapat juga keterangan
k yanng kurang jellas dan mungkkin ini tidak
dipeerlukan, serta maksud
m penuliisannyapun sullit dipahami, inni bisa kita lihhat pada sisi seebelah kanan
darii kotak form “E-MAIL andaa” dan “No.Hp”, disana terdaapat peringatann “respon 2 daan respon 1”,
jika kita perhatikaan lebih lanjutt dari segi peleetakannya ini tidak memenuuhi aturan penu ulisan karena
tidakk terurut (respo
on 2, baru resppon 1), dan darri segi kegunaannyapun ini jugga kurang jelas,,
Penggunaan tulisan yanng tidak konsiisten, Point “N Nama” ditulis menggunakann huruf kecil
deng gan huruf besaar pada awal katanya,
k akan teetapi pada poinnt “E-MAIL A Anda”, kata “E-MAIL” nya,
ditu
ulis dengan huuruf besar sem mua, dan pada point “ISI E-M MAIL” lebih fatal lagi, sem mua hurufnya
ditu
ulis dengan hururuf besar, ini merupakan
m suatuu bentuk ketidaakkonsistenan dalam penulisaan.

Saraan:Menampilkkan informasi harus

h sesuai ddengan fungsi dan tempatnyya, gunakan kaata-kata yang
tepat, agaar tidak terjaddi kesalahpaham man bagi penggguna, dan janngan menambaahkan hal-hal
yang tidaak perlu, karena hal tersebut hhanya akan meembuat bingunng pengguna. Ada A beberapa
hal yang mungkin bisa diperbaiki agaar desain terseb but bisa lebih iinteraktif, dianntaranya ialah
menandai di sebelah kanank kotak foorm tersebut deengan tanda * , lalu pada bagian
b bawah
form terssebut tuliskan arti tanda terssebut. Untuk leebih jelasnya pperhatikan gam mbar berikut,
serta gun
nakanlah penuliisan kata yangg lebih konsisteen, agar desainn tersebut terlihhat lebih rapi.
Berikut perbaikan
p desaiin yang mungkkin bisa dilakukkan.

Nama
E-mail
Ho.Hp
Isi e-mail

Gambar 13: SSaran Penyajia

an Desain

W
Wajib diisi

Halaman
H | 14
 Bagian Kanan

1. Page
P scroling yang
y tidak efissien

Pada webbsite ini kita juga bisa meelihat ada scrooll horizontal dan scroll veertikal, scroll
verttikalnya cukup p banyak, lebiih kurang 10--12 kali, ini sungguh
s tidak efisien jika dibandingkan
d
deng gan rata-rata scrolling vertiikal maksimum m sekitar 6-8 kali. Hal ini terjadi karenaa website ini
mennampilkan ban nyak tutorial pada
p satu halam
man, yang notaabene tutorial tersebut pun tiidak tersusun
secaara teratur, inii menyebabkaan ketidakrapiaan rancangan visual dan keemudahan peembacaanpun
mennjadi rendah. Hal
H lain yang g juga tidak diisukai oleh peengguna pada umumnya, yaaitu scrolling
horiizontal, bagi beberapa penggguna, ini sunggguh “menyeballkan”, untuk m memperoleh informasi pada
bagiian sisi (kanann dan kiri) layyar pengguna harus melakuk kan scrolling horizontal terllebih dahulu.
sebaagaimana yangg kita ketahui bahwa pengguuna pasti menginginkan tam mpilan yang terrsusun bersih
dan rapi, apa yangg telihat mudahh dimengerti, daan informasi berada tepat di ttempatnya.

Saraan : Sebaiknyaa scrolling horiizontal itu dihiindari, mungkiin ini tidak meenyulitkan peng
gguna karena
pemakainnnyapun cukupp mudah, akann tetapi dari seegi estetika inni akan membu uat pengguna
merasa kuurang nyaman pada saat brow wsing.
Penggunaaan scrolling berlebihan
b sebaiknya jangan sampai terjaddi, agar hal ini tidak terjadi
sebaiknyaa kita mengooptimalkan jum mlah elemen pada layar, dalam batasaan kejelasan,
maksudnyya informasi-iinformasi yangg ditampilkan pada layar sebbaiknya ditamppilkan dalam
batasan yang
y jelas, apaabila dalam saatu halaman dirasakan tidak cukup untuk menampilkan
m
semua innformasi yangg saling berkaaitan, maka kiita bisa membbaginya menjaadi beberapa
halaman, untuk memin nimumkan risikko terjadinya scrolling vertikkal yang berleebihan akibat
semua informasi yang saling
s berkaitann diletakkan seemuanya dalamm satu halamann.

2. Desain
D yang ku
urang rapi dan
n tidak konsissten

Simbol tidak
tepat
t
Bahasa tidakk
konsisten

Gambar 14:
1 Desain yangg kurang rapi dan tidak konssisten

Pada pojook kanan bagian atas (di baw wah header) kiita lihat ada koolom informassi yang diberi
namma “Statistik Siitus”, isinya beerupa informassi mengenai siitus tersebut, aantara lain ialahh Visitor dan
Pagges, dan masinng-masing mennggunakan sim mbol dengan gaambar orang yyang diberi waarna berbeda.
Jikaa kita perhatikaan lebih lanjut, ini merupakann bentuk ketidaakkonsintenan dalam penggu unaan bahasa,
ada pencampuran bahasa ini akaan membuat deesain layarnyaa menjadi buruuk, dan mungkiin di lain sisi
ini akan
a sulit dim
mengerti oleh beberapa
b penggguna. Kembalii lagi kita tekaankan bahwa pencampuran
p
bahaasa itu bisa diggunakan jika sudah
s tidak adaa lagi kata yanng cocok atau sepadan
s diantaara keduanya,
dan jika dipaksakkan untuk diarttikan ke salahh satu bahasa, ini akan mem mbingungkan, dan d akhirnya
infoormasi yang in ngin disampaikkan tidak optim mal. Pada bagiaan ini kita jugga bisa melihatt penggunaan
simb bol, simbol orang berwarnaa biru digunakkan untuk meengartikan jum mlah pengunjuung situs ini,
sedaangkan simbol orang berw warna kuning digunakan unntuk mengartikkan jumlah haalaman yang
terd
dapat pada situ us ini. Ini adalaah bentuk desaain yang kuranng baik, karena penggunaan simbol yang
kuraang tepat untukk menjelaskan informasi terteentu.

Saraan : Gunakan bahasa yang jelasj dan muddah dimengertii, sebagaimanaa yang kita keetahui bahwa
penggunaa website ini adalah orang Indonesia, adda baiknya jikka bahasa yanng digunakan
konsisten
n dalam bahasaa Indonesia, suuatu desain diibuat haruslah sesuai dengann kriteria dan
karakterisstik penggunan nya. Kemudiann, gunakanlahh elemen yang sesuai dalam menjelaskan
suatu funngsi tertentu, penggunaan
p sim
mbol ini cukup p bagus, akan tetapi harus sesuai dengan

Halaman
H | 15
 informasii yang dijelaskkannya, misalkkan untuk mejeelaskan jumlahh pengunjung kita gunakan
simbol dengan
d gambaar orang, dann bedakan denngan simbol yang menjelaaskan jumlah
halaman, misalkan gam mbar halaman web. Ini dim maksudkan agarr informasi-infformasi yang
terkandunng pada website tersebut biisa dengan mu udah terbaca, elemen pada layar mudah
diidentifiikasi tanpa haruus membaca teeks yang menjeelaskan tentangg fungsinya.

3. Ketidakjelasan
K n dalam pengggunaan fungsii sebagai pemeenuhan kebutu
uhan penggun
na.

Tidak onlinee
Kuurang jelas
Online kah??

Gambarr 15: Ketidakjelasan dalam peenggunaan funngsi

seebagai pemenuuhan kebutuhan n pengguna

Pada baggian kolom paling kanan webbsite ini terdappat informasi berupa
b status chhating online
darii para admin yaang mengelolaa website ini. D Dari segi fungssionalitasnya inni jelas sangat berguna, jika
ada pertanyaan ataau saran, pengguna bisa langgsung berkomuunikasi dengann admin yang sedang s online
terseebut. Akan teetapi kenyataaannya tidak sseperti ini, paada mulanya saya tidak mengerti m apa
makksudnya dua nama yang paling p bawah, karena tidak k ada statusnyya sama sekaali, ini jelas
memmbingungkan pengguna, apaakah dua nam ma terakhir terrsebut sedang online atau tidak, ketika
diarrahkan pointerr ke nama terssebut ternyta tidakt ada linkk sama sekali, kemudian setelah sering
berkkomunikasi denngan adminnyya via email, baarulah mengertti ternyata itu menunjukkan bahwa status
admmin dalam keaddaan online, namun
n kurangnnya di sini, kitta tidak bisa laangsung terhuubung dengan
admmin karena tidaak ada link ke nama tersebut, untuk bisa beerkomunikasi ddengan admin yang sedang
onliine itu kita harrus membuka aplikasi
a chatinng terlebih dahhulu, sungguh tidak efektif dan
d memakan
wakktu pengguna.
Saraan : Berikan informasi yangg jelas, agar peengguna tidak merasa
m kebiguungan, desain navigasi
n yang
baik, infoormasi yang loogis, serta penyyajian menurutt prioritas infoormasi merupakkan indikator
kebaikan desain layar. Hal ini pentinng sekali untuk k diperhatikan sebagai pengeelola website.
Ketidakteeraturan, ketiddakefisienan, aakan menyebab bkan informassi yang ingin disampaikan
sulit diteerima penggunna, ini membuaat pengguna merasam “takut””, atau bahkan n “terancam”,
dalam arttian menjadi biingung dan tidaak mengerti.

4. Tampilan
T tidak
k tersusun rap
pi dan fungsi sserta control yang
y membinggungkan

Link atau Buk kan

bukan ? linkk

Terrnyata
Link atau linkk
bukan ?

Gambarr 16: Tampilann tidak tersusunn rapi dan funggsi

serta Kontroll yang membinggungkan

Pada bagian sebelah kanan kita juga j bisa melihhat menu shorttcut, menu ini berisi tutorial--tutorial yang
terd
dapat dalam sittus ini, tutoriall tersebut terbaagi menjadi beeberapa kategoori, namun jikaa kita lihat di
sini,, kategori terseebut tidak terurrut, dan penuliisannya pun tiddak rapi, ini menyulitkan
m penngguna untuk

Halaman
H | 16
memmbacanya. Tiapp-tiap kategorii terdapat list aatau daftar tutoorial, daftar ini juga tidak terssusun dengan
rapii, pada awalnyya saya mengiira ini hanya list biasa yanng berisikan innformasi menggenai isi dari
webbsite ini,namunn setelah ditelliti lebih lanjuut, mengarhkann pointer ke salah satu poinnt dari daftar
terseebut, barulah diketahui
d itu beerfungsi sebagaai link.

Saraan : Hindari Layout yang tidak terstrukttur dan tidak terarah yang memungkinkaan terjadinya
kesalahann, buatlah kattegori tersebuut menjadi pooin-point yangg terstruktur dengan
d jelas.
Perbaiki kualitas presen
ntasi, jangan saampai penggun
na mengalami kesulitan dalaam membaca,
yang padda akhirnya akkan menurunkkan kemampuaan pemakai daan menyebabkaan kesalahan
lagi.

5. Derajad
D Kepen
ntingan dalam
m Desain Tamp
pilan Informa
asi

Info
formasi yang tiddak
perrlu dan desain
tam
mpilan yang kurrang
baikk

G
Gambar 17: Derrajad Kepentinngan dalam Deesain Tampilann Informasi

Di bawahh menu katego ori kita bisa meelihat ada informasi mengennai blog-blog maupun
m situs-
situss lain yang tellah terhubung atau menggunnakan informassi yang terdapaat di situs ilmu uwebsite.com
ini. Ditinjau dari segi kepentinngannya, rasannya hal ini tid dak perlu dilaakukan, karena ini kuarng
bermmanfaat, kalauupun ini memaang perlu dilakkukan, jangan sampai membbuat tampilan informasi ini
terk
kesan sulit dibaaca.
Saraan : Perbaiki kualitas
k ntasi, jangan saampai penggunna mengalami kesulitan dalaam membaca,
presen
yang padda akhirnya akkan menurunkaan kemampuann pengguna daan menyebabkkan kesalahan
lagi.

Halaman
H | 17
 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 | 18
 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.

Halaman | 19