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.