TUGAS AKHIR MATA KULIAHINTERAKSI 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 KOMPUTERFAKULTAS 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 mengenaisitus 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 kesempatanini penulis ingin mengucapkan terimakasih kepada teman-teman mata kuliah Interaksi Manusia danKomputer, dan Bapak Firman Ardiansyah selaku dosen mata kuliah ini, serta semua pihak yang telahmemberikan saran dan bantuan selama menyelesaikan tugas ini.

Penulis menyadari bahwa masih banyak terdapat kekurangan dalam menyelesaikan tugas inibaik dari segi materi maupun penyajiannya, untuk itu saran serta kritikan yang membangun daridosen dan rekan-rekan sangat diharapkan guna perbaikan penulisan ini.

Akhir kata penulis berharap semoga tulisan ini bermanfaat bagi pembaca pada umumnyadan 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 baik6

Task Analysis 6

III. Hasil dan Pembahasan 7Bagian Kiri

1. Naviasi yang Membingungkan dan Tidak Efisien 8

2. Menu-menu Tidak Tersusun Rapi 8

3. Inkonsistensi Desain Link 9Bagian 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 14Bagian 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 Saran18

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 16Gambar 15: Ketidakjelasan dalam penggunaan fungsi

sebagai pemenuhan kebutuhan pengguna 17Gambar 16: Tampilan tidak tersusun rapi dan fungsi

serta control yang membingungkan 18

Gambar 17: Derajad Kepentingan dalam Desain Tampilan Informasi 18

Halaman | 3

I. PendahuluanLatar Belakang

Dewasa ini Sistem komputer yang kompleks sedang "mencari" jalan atau cara untuk masuk kedalam kehidupan sehari-hari, dan pada waktu yang sama pasar dipenuhi dengan merek-merek yangbersaing. Ini telah mendorong usabilitas menjadi semakin populer dan secara luas dikenal di tahun terakhirini. Dalam pengembangan produknya, sekarang ini perusahaan-perusahaaan mulai beralih dari metodelama yaitu metode berorientasi teknologi (technology-oriented methods) menjadi metode berorientasipengguna (user-oriented methods). sasaran dari metode ini menetapkan kebutuhan suatu sistem. suatukebutuhan adalah suatu sasaran yang harus ditemui. suatu produk yg dikembangkan, didasarkan padamasukan dari para pemakai atau pihak-pihak lain yang berkepentingan.

Metode berorientasi pengguna inilah yang melahirkan istilah usabilitas. Usabilitas adalahsuatu istilah yang digunakan untuk menandakan bahwa orang dapat mempekerjakan alat tertentudengan mudah dalam rangka mencapai tujuan tertentu. usabilitas dapat juga mengacu pada metodeyang digunakan untuk mengukur kemudahan dan studi mengenai kerapian atau efisiensi suatu obyekyang dalam hal ini ialah kemudahan dalam penggunaan sistem dan aplikasi komputer itu sendiri.Usabilitas memegang peranan penting dalam pengembangan sebuah website, pembelajaran mengenaiperilaku pengguna web ini sangat penting, karena sebagaimana kita ketahui bahwa pengguna tidakingin menunggu akibat sistem yang terlalu lambat (slow site), dan pengguna pun tidak ingin belajarmengenai cara menggunakan web tersebut, sebuah web yang interaktif akan membuat penggunanyamampu menyerap dan mempelajari web tersebut dengan seketika setelah membacanya sekilas(scanning).

Pemahaman mengenai kemudahan penggunaan suatu aplikasi (dalam hal ini website) inilahyang akan kita bahas dalam makalah ini, ada beberapa pertanyaan yang mengindikasikan kemudahanpenggunaan tersebut, diantaranya ialah seberapa mudah pengguna menggunakan fungsi-fungsi saatpertama kali mereka menggunakan aplikasi tersebut (berhadapan dengan desain pertama kali)?,sekali ketika para pemakai sudah mempelajari disain, seberapa cepat mereka dapat melaksanakantugas?, seberapa banyak kesalahan yang dibuat pengguna ketiak memakai aplikasi ini? Seberapacepatkah mereka memperbaiki kesalahan tersebut? Dan seberapa menyenangkan desain tersebut bagipengguna? Itulah beberapa hal yang akan kita bahas lebih lanjut dalam makalah ini.

TujuanMakalah ini memuat tentang pembahasan mengenai desain antarmuka yang baik dan

usabilitas dari fungsi-fungsi dari situs www.ilmuwebsite.com. Makalah ini bertujuan untuk melihatsejauh mana tingkat usabilitas dari fungsi-fungsi pada website ini, serta melihat desainantarmukanya, dan juga beberapa saran perbaikan fungsi-fungsi dan antar muka yang baik untukmeningkatkan 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.

UsabilitasUsabilitas adalah suatu istilah yang digunakan untuk menandakan bahwa orang dapat

mempekerjakan alat tertentu dengan mudah dalam rangka mencapai tujuan tertentu. usabilas dapatjuga mengacu pada metode yang digunakan untuk mengukur usabilitas dan studi mengenai kerapianatau 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 tugasmereka.

3. Keterlibatan (Engaging). Derajat atau tingkat gaya interface yang membuat produk nymaanuntuk digunakan.

4. toleransi Kesalahan (Error tolerant). Seberapa baik disain mencegah kesalahan dan emmebantumemeperbaiki 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 aplikasiketika pertama kali mereka menghadapi disain?

2. Efisiensi (Efficiency): Sekali ketika para pemakai sudah mempelajari disain, seberapa cepatmereka dapat menggunakannya?

3. Memorabilas (Memorability): Ketika para pengguna kembali menggunakan aplikasi tsb setelahsekian lama tidak menggunakannya, seberapa mudah mereka dapat kembali mahir dalammenggunakannya?

4. Kesalahan (Errors): Berapa banyak kesalahan yg dilakukan para pemakai, seberapa burukkahkesalahan ini, dan Seberapa mudah mereka dapat memperbaiki kesalahannya?

5. Kepuasan (Satisfaction): seberapa menyenangkan dalam menggunakan disain itu?

FleksibilitasUsabilas juga mempunyai suatu hubungan dengan fleksibilitas dalam disain. Secara umum,

ketika fleksibilitas dari suatu disain meningkat, usabilitas nya berkurang.Disain fleksibel dapatmelakukan banyak fungsi dibanding disain khusus, tapi kurang efisien, hal Ini memebuat disain lebihkompleks. Fleksibilitas membuat para pemakai tidak bisa dengan jelas mengantisipasi sistemkebutuhan mereka yang akan datang. Kemudian, pada akhirnya Fleksibilitas itu akan mengakibatkansuatu 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:1y Standardisasi: keseragaman sifat-sifat antarmuka pemakai pada aplikasi yang berbeda.

2y Integrasi: keterpaduan antara paket aplikasi dan software tools.

3y Konsistensi: keseragaman dalam suatu program aplikasi.

4y 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 penyebabKeraguan dan akhirnya dibaca kembali, yang memungkinkan para pengguna salah dalammenafsirkannya.

2. Grafis yang tidak tepat sehingga unsur-unsur penting tersembunyi.

3. Judul yang tidak representatif. Ini juga menciptakan kebingungan dan menghalangi kemampuandalam melihat hubungan yang ada.

4. Permintaan informasi yang tidak penting atau tidak relevan, permintaan informasi yangmemerlukan pemikirkan ulang dari jawaban sebelumnya sehingga membingungkan penggunayang 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 parapemakai, 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 Analysistask analysis adalah Teknik untuk memperoleh suatu pemahaman dari fungsi yang harus

dilakukan oleh sistem computer.

Halaman | 6

Hasil dan Pembahasan

Untuk memudahkan da lam pembaha san, pada tamp ilan halaman utama website ini kitabagi men jadi tiga bagi an yaitu, bagian kiri, bagaian tengah dan b agian kanan, perhatikan gambar dibawah ini.

H eader

Bagian Kir i Ba gian Tengah Bagian K anan

Gambar 0 : P emberian bagian untuk mem udahkan pembahasan

Halaman | 7

Bagian Kiri

1. N avigasi yang Membingungkan dan Tidak Efisien

Home dan News Websiteyang diletakkan sekelompok dengan menu-menu kategori

Gambar 1: Navigasi yang Membingungk an dan Tidak Efisien

Ada dua Menu utama yaitu Home dan News Website yang dile takkan sekelo mpok denganmen u-menu kat egori, hal i ni menunjukkan ketidakrapian rancan gan visual, navigasinya membingungkan, sehingga men yebabkan kemudahan pembacaan menjadi menurun. Graf is yang tidaktepa t sehingga uns ur-unsur penting tersembun yi

Sar an: membagi informasi-informasi tersebu t menjadi unit yang logis, b ermakna, dan masuk akal,pengatur an unsur-unsu r layar yang tepat. sehin gga dalam memyelesaikan masalah inisebaiknya dua menu u tama tersebut kita pisahkan dari menu-menu kategori, m ungkin akanlebih bai k jika dua men u utama tersebut kita letakkan di bagian atas (tepat di b awahheader) dan disus un secara horizontal.

2. M enu-menu Tidak Tersusu n Rapi

Kita lihat pada kolom sebelah kiri website ini, pada kolom kiri tersebut ada beberapa list men ukategori, na mpak jelas sekali menu-me nu tersebut tidak tersusun d engan baik, bayangkan jikamen u-menu kateg ori tersebut cukup banyak, hal ini akan menyulitkan pengguna dalam mencarikate gori yang memang benar-benar diinginkannya karena menu tersebut tidak tersusun secaraalp habetic.

Sar an: mengorga nisir derajat k eterhubungan antar menu-menu tersebut, serta menyajikannyasesuai prioritas informasi, sehingga pada kasus ini sebaik nya menu-menu kategori ter sebutdisusun secara berurutan menurut alphabet awal dari tiap kata perta ma pada menu-menunya. Sehingga informasi yan g ingin disam paikan bisa de ngan mudah di mengerti.

Halaman | 8

Menu-me nu kategoriyang tida k tersusunrapi (berur utan)

Me nyebabkankes ulitanpem bacaan

Ga mbar 2: Menu-menu Tidak T ersusun Rapi.

3. I nkonsistensiD esain Link

Menu Kategori

Bandingka

L

bedakan Link:-

Gambar 3: Ink onsistensi De sain Link.

Apabilakita lihatlagi padakolomkiriwebsiteini, a dasub-menudari tiap-

tiapkategorimenudisana,awalnyasayapikirinihanyasekedarinformasi mengenai isiataucontent dariwebsite ini,namunsetela

Sar an

i linksehinggapenggunalangsungtahu kalausubmenu-subme nutersebut memangberfun gsisebagailink, tanpaharusmencobaterlebih dahulu.

Halaman | 9

Ba gian Tengah

1. K ontrol yang Kurang Lengk apPada log o website ini tidak terdapat li nk ke home atau ke halaman utama, sehingga

pengguna aka n merasa kebin gungan apabil a suatu saat tersesat di saat browsing.

tidak terdapat link

ke halaman utama

G ambar 4: Kontrol yang Kurang Lengkap

Sar an : Sebaiknya pada logo w ebsite ditambahkan link ke halaman utama, ini untuk memudahkanuser kem bali ke halam an utama pad a saat user m erasa kebingungan ketika browsing dantidak tah u sekarang ada di mana.

2. I nkonsistensi P enggunaan B ahasa

B ahasa Pilih salahIndonesia Inggris satu saja

Gam bar 5: Inkonsistensi Penggu naan Bahasa

Tidak ko nsisten dalam penulisan, jik a kita lihat pada informasi waktu di atas, website inimen ggunakan dua bahasa sekaligus, Bahasa Indonesia dan Bahasa Inggris. Seharusnya pilih salahsatu bahasa saja, misalnya menggun akan Bahasa I ndonesia saja. Penggabungan seperti ini mungkinboleh dilakukan, akan tetapi pada kon disi tertentu, misalnya pada saat tidak ada makna kata yangsesuai atau padanan kata yan g cocok dala m Bahasa Indonesianya, atau mungkin jika diartikandalam bahasa Ind onesia ini akan menimbulkan kerancuan ya ng akhirnya i nformasi yang ingindisampaikan menjadi tidak tepat, barulah pencampuran bahasa (pen ggunaan bahasa inggris danbahasa Indonesia sekaligus) dipe rbolehkan, misalkan untuk kata joystick, ini merupakan kata yangtidak bisa diartikan secara harf iah ke dalam Bahasa Indonesia, sehing ga penggunaan istilah tersebutdalam Bahasa Inggris dipe rbolehkan. Da lam kasus ini Wednesday m erupakan kata yang memilikipadanan kata yang sesuai dengan Bahasa Indonesia, yaitu Rabu. Sehi ngga kurang bagus jika kitagunakan kedua bahasa sek aligusSar an : Jika kita pandang masa lah ini dari s isi tujuannya, kita ketahui bahwa pemberian informasi

waktu ini mungkin diperuntukkan ba gi user yang berada di luar Indonesia, oleh karena itusebaiknya informasi waktu tersebu t kita tulis dalam Bahasa Inggris, ini memudahkanpenggun a yang berada di luar Indonesia, sehingga kata “Tanggal” kita ubah menjadi“Date”, dan kata “Negara” kita ubah menjadi kata “Country”.

3. I nkonsistensi D esain LinkPenekana n Typeface da n grafik yang tidak tepat, terlalu banyak informasi yang tidak

dipilah sehi ngga menyeba bkan kemuda han pembacaa n menjadi rendah.

Halaman | 10

B Link

Link

Keduafont sama

Gambar 6: Inkonsistensi Desain Link

Pada kolom bagian tengah website ini, kita bisa melihat beberapa artikel tutorial, padaartikel tersebut dicantumkan nama orang (dalam hal ini administrator) yang mem-posting artikeltersebut, jika kita perhatik an lebih lanjut, kita bisa melihat nama admin tersebut dicetak biru, namunsetelah dico ba (diarahkan pointer ke nama tersebut) ternyata itu bukan link, dan kita lihat lagi padabagian penjelasan singkatnya, ada tulisan yang menggunakan font yang sama dengan font yangdigunakan unt uk menuliskan nama admin yang mem-posting tadi (ukuran, warna, dan typeface-nyasama) yang ternyata merupak an link, sehingga tidak ada ketentuan yang jelas dalam membedakanantara link dan bukan link, ini m enunjukkan ketidakkonsistenan desain. Hal ini akan berdampak bagipengguna, kare na pengguna akan merasa “terbodohi”.Sar an: sebagaimana yang kita ketahui bahwa pengguna pasti menginginkan tampilan yang tersusun

bersih dan rapi, apa yang telihat mudah dimengerti, informasi berada tepat di tempatnya,keterhubungan yang jelas (option, judul, data, dan yang lainnya), dan penggunaan bahasayang sederhana, oleh karena itu sebagai depelover kita harus memperhatikan hal-haltersebut, jangan s ampai membuat pengguna m engalami kesulitan. Jadi pada kasus di atassebaiknya kita mem berikan batasan yang jelas antara penggunaan font sebagai link danbukan link, dan juga pen yederhanaan tampilan agar mudah dibaca.

4. I nkonsistensi Desain Penulisan (dalam penggunaan font)

I nformasi yang sama ditulis dengan cara yang berbeda

G ambar 7: Inkonsistensi Desain Penulisan (dalam penggunaan font)

Tidak konsisten dalam penulisan atau penggunaan jenis font nya, no 1 dan 2 ditulis dengan ceta ktebal (bukan juga sebagai link, hanya informasi biasa), sedangkan no 3, 4 dan seterusnya ditulis tanp acetak tebal, hal ini melanggar Konsep Regularity dala m mendesain layar pada sebuah website.

Sar an: sebaiknya menggunakan elemen yang serupa dalam ukuran, bentuk, warna, jarak, danmembuat regularity (keteraturan) yang jelas, dengan menerapkan ruang dan pelurusan

horizontal dan vertikal yang konsisten baik dari segi penempatannya maupun dari segiHalaman | 11

penulisan nya, atau m ungkin dengan membuat u nity menggunakan keserupaan ukuran, bentuk, w arna untuk in formasi yang b erkaitan.

5. T ampilan tida k tersusun ra piDalam p enulisan nama tidak ada urutan penulisannya, atau deng an kata lain tidak diurutkan ber

dasarkan alphabet awal dari nama-nama ter sebut sehingg a sulit mencari posisi nama kita (tentunya sebagai user) ap abila kita sud ah terdaftar, atau mungkin kita akan mengalami kesulitan untuk men getahuiapakah kita memang sudah benar2 terdaftar sebagai anggota ke lompok website ini.

Penyusunan

nama tidak urut

G ambar 8: Tam pilan tidak ter susun rapi

Sar an : Jika mem ang ingin m elakukan peng elompokan, m aka lakukanlah pengelompokan denganjudul yan g berarti untu k tiap pengelo mpokannya, in i memudahka n pengguna meyerapsecara optimal informasi terse but, dan berik an urutan yang jelas dalam pengelompokan itu,hal ini untuk me nghindari penurunan tingkat kemudahan m embaca web tersebut.

6. G rouping tanpa dasar penge lompokan yang jelas

Dikelompokkan

berdasarkan apa?

Gambar 9: Grouping tanpa dasar pengelompokan yang jelas.

Tidak ad a pola dan k etentuan yan g jelas meng enai pembagian kelompok dari anggota web siteini. Ini ju ga akan membingunkan pe ngguna, jika pengguna tersebut memang telah terdaftar seb agaimasyarak at (anggota) website ini. Pen gguna akan ke bingungan di k elompok mana ia terdaftar.

Sar an : Secara u mum grouping digunakan un tuk meyajikan pengelompo kan fungsional darielemen yang saling berhubungan. Namun dalam atu ran dan batas yang jelas. Apabilapengelom pokan terseb ut dilakukan ta npa aturan, maka akan meyebabkan informasitersebut menjadi sulit dibaca (dimengerti).

Halaman | 12

7. I nkonsistensi D esain Link

Bukan Link

Gambar 10: Inkonsistensi Desain Link.

Ada dua hal yang kon tras di sini. P ada gambar s ebelah kiri kita lihat bahwa ada tulisan berwarna biru dan di-bold, tern yata bukan link, hanya seba gai judul dari halaman, lalu pada gambar sebelah kanan kit a juga bisa melihat ada tulis an dengan font yang sama dengan font ya ng digunakanpada tulisan di gambar sebelah kiri, yaitu ber warna biru dan di-bold, akan tetapi itu merupakan link,hal ini jelas kontra diksi, ini juga merupakan salah satu bentu k ketidakkonsistenan.

Sar an: Seharusny a untuk fungs i yang berbed a, digunakan bentuk font ya ng berbeda ju ga,misalnya jika hany a ingin mena mpilkan inform asi sebagai judul sebaiknya cukup di ceta ktebal (bold) dan ber warna hitam, atau mungkin dengan merubah ukuran typeface-nya(ukurannya diperbesa r), sedangkan untuk menuliskan kata ata u prase seba gai link, digunakan tulisan berwarna biru, atau dengan digarisba wahi, agar terlihat jelas perbe daaanya.

8. T ampilan yang tidak tersus un dan kurang rapi

Berfungs i

Tidak ada urutan atau

keteraturan yang jelas

Gambar 11 : Tampilan yang tidak tersu sun dan kuran g rapi.

Pada bagian Category Tutorial Corel draw, terdapat 6 point yang fontnya regular (tanpacetak teba l, tidak berwarna biru, dan tidak digarisb awahi), pada m ulanya saya m engira ini han yainformasi bias a yang disusun dalam bentu k daftar atau list, namun se telah mouse d iarahkankesalah-satu point tersebut, barulah d iketahui ternyata point-point tersebut meru pakan link.Pada gambar di atas kita juga bisa melihat tidak adanya uru tan yang jelas dalam list tersebut, hal ini terlihat bahwa point-point terseb ut tidak diuru tkan menurut a lphabet awal dari kata yang paling depan padajudulnya. Bisa kita bayangkan jika point-point terseb ut cukup banyak jumlahnya, maka user aka nmengalami kesulitan dala m melakukan pencarian artik el yang diing inkan. Ini merupakan salah satubentuk desain yang kurang baik karena akan menurunkan tingkat kem udahan dalam membaca.

Sar an : harus kon sisten dalam desain, gunaka nlah aturan y ang umum, se perti pemberian warnabiru atau garis bawah pada tulisan yang berfungsi seva gai link, buatl ah urutan yang jelasuntuk poin-poi n dari suatu informasi, agar tidak membingungkan pengguna, danmemudahkan dalam m embacanya.

Halaman | 13

9. K etidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi

Informasi yangtida k jelas

Tidak terurut

Tidak konsisten

Gambar 12: Ketidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi

Di pojok kiri atas kita lihat ada tulisan “Email send… ”, ini merupakan bentuk informasi atau keterangan yang tidak jelas, bahkan ini mungkin tidak layak disebut informasi, tulisan tersebut men ggunakanBahasa Inggris, ini menunjukkan ketidakkonsistenan Bahasa, kemudian dari segi kegunaanpun ini kurangbermanfaat, karena kata-kata tersebut sama sekali tidak berarti ( meaningless), kare na jika kitaterjemahkan kedalam bahasa Indonesia artinya “Email mengirim”, (bukan mengirim Em ail, atau Emailterkirim), terdapat juga keterangan yang kurang jelas dan mungkin ini tidak dipe rlukan, serta maksudpenulisannyapun sulit dipahami, ini bisa kita lihat pada sisi sebelah kanan dari kotak form “E-MAIL anda”dan “No.Hp”, disana terdapat peringatan “respon 2 dan respon 1”, jika kita perhatik an lebih lanjut darisegi peletakannya ini tidak memenuhi aturan penulisan karena tidak terurut (respon 2, baru respon 1), dandari segi kegunaanyapun ini juga kurang jelas,

Penggunan tulisan yang tidak konsisten, Point “ Nama” ditulis menggunakan huruf kecildengan huruf besar pada awal katanya, akan tetapi pada point “E-MAIL A nda”, kata “E-MAIL” nya,ditulis dengan huruf besar semua, dan pada point “ISI E-MAIL” lebih fatal lagi, semua hurufnyaditulis dengan huruf besar, ini merupakan suatu bentuk ketidakkonsistenan dalam penulisan.

Sar an:Menampilk an informasi harus sesuai dengan fungsi dan tempatnya, gunakan kata-kata yangtepat, agar tidak terjadi kesalahpahaman bagi pengguna, dan jangan menambahkan hal-halyang tida k perlu, karena hal tersebut hanya akan membuat bingung pengguna. Adabeberapa hal yang mungkin bisa diperbaiki agar desain tersebut bisa lebih interaktif,diantaranya ialah menandai di sebelah kanan kotak form tersebut dengan tanda * , lalu padabagian bawah form tersebut tuliskan arti tanda tersebut. Untuk lebih jelasnya perhatikan gambar berikut, serta gunakanlah penulisan kata yang lebih konsisten, agar desain tersebutterlihat lebih rapi. Berikut p erbaikan desain yang mungkin bisa dilakukan.

NamaE-mailHo.HpIsi e-mail

Wajib diisi

Halaman | 14

Bagian Kanan

1. P age scroling y ang tidak efisien

Pada website ini kita juga bisa melihat ada scroll horizontal dan scroll vertikal, scrollvertikalnya cukup banyak, lebih kurang 10-12 kali, ini sungguh tidak efisien jika dibandingkandengan rata-rata scrolling vertikal maksimu m sekitar 6-8 kali. Hal ini terjadi karena website inimen ampilkan ba nyak tutorial p ada satu hala man, yang notabene tutorial tersebut pun tidak tersusunseca ra teratur, ini menyebabkan ketidakrapian rancangan visual dan kemudahan pembacaanpunmen jadi rendah. Hal lain yang juga tidak disukai oleh pengguna pada umumnya, yaitu scrolling horizontal, bagi beberapa pengg una, ini sungguh “menyebalkan ”, untuk memperoleh informasi padabagian sisi (kana n dan kiri) la yar pengguna harus melakukan scrolling horizontal terlebih dahulu.seb agaimana yan g kita ketahui bahwa pengguna pasti menginginkan tampilan yang tersusun bersihdan rapi, apa yang telihat mudah dimengerti, dan informasi berada tepat di tempatnya.

Sar an : Sebaiknya scrolling horizontal itu dihindari, mungkin ini tidak menyulitkan penggunakarena pemakai nnyapun cukup mudah, akan tetapi dari segi estetika ini akan membuatpengguna merasa kurang nyaman pada saat bro wsing.Penggun aan scrolling berlebihan sebaiknya jangan sampai terjadi, agar hal ini tidak terjadisebaiknya kita mengoptimalkan jumlah elemen pada layar, dalam batasan kejelasan,maksudnya informasi-informasi yang ditampilkan pada layar se baiknya ditampilkan dalambatasan ang jelas, apabila dalam satu halaman dirasakan tidak cukup untuk menampilkansemua i nformasi yang saling berkaitan, maka kita bisa membaginya menjadi beberapahalaman, untuk memin imumkan risiko terjadinya scrolling vertikal yang berlebihan akibatsemua informasi yang saling berkaitan diletakkan semuanya dalam satu halaman.

2. D esain yang k urang rapi dan tidak konsisten

Simbol tidaktepat

Bahasa tidak

konsisten

Gambar 1 4: Desain yang kurang rapi dan tidak konsisten

Pada pojok kanan bagian atas (di ba wah header) kita lihat ada kolom informasi yang diberinam a “Statistik S itus”, isinya berupa informasi mengenai situs tersebut, antara lain ialah Visitor danPag es, dan masing-masing men ggunakan simbol dengan gambar orang yang diberi warna berbeda.Jika kita perhatika n lebih lanjut, ini merupakan bentuk ketidakkonsintenan dalam penggunaanbahasa, ada pencampuran bahasa ini akan membuat desain layarnya menjadi buruk, dan mungkin dilain sisi ini akan sulit dim engerti oleh beberapa pengguna. Kembali lagi kita tekankan bahwapencampuran bahasa itu bisa di gunakan jika sudah tidak ada lagi kata yang cocok atau sepadandiantara keduanya, dan jika dipaksak an untuk diartikan ke salah satu bahasa, ini akan membingungkan, dan akhirnya info rmasi yang ingin disampaikan tidak optimal. Pada bagian ini kita jugabisa melihat penggunaan simbol, simbol orang berwarna biru digunakan untuk mengartikan jumlahpengunjung situs ini, sed angkan simbol orang berwarna kuning digunakan untuk mengartikanjumlah halaman yang terdapat pada situs ini. Ini adalah bentuk desain yang kurang baik, karenapenggunaan simbol yang kur ang tepat untu k menjelaskan informasi tertentu.

Sar an : Gunakan bahasa yang jelas dan mudah dimengerti, sebagaimana yang kita ketahui bahwapenggun a website ini adalah orang Indonesia, ada baiknya jika bahasa yang digunakankonsisten dalam bahasa Indonesia, suatu desain dibuat haruslah sesuai dengan kriteria dankarakteristik penggunanya. Kemudian, gunakanlah elemen yang sesuai dalam menjelaskansuatu fun gsi tertentu, p enggunaan si mbol ini cukup bagus, akan tetapi harus sesuai dengan

Halaman | 15

informasi yang dijelaskannya, misalkan untuk mejelaskan jumlah pengunjung kita gunakansimbol dengan gambar orang, dan bedakan dengan simbol yang menjelaskan jumlahhalaman, misalkan ga mbar halaman web. Ini dimaksudkan agar informasi-informasi yangterkandung pada website tersebut bisa dengan mudah terbaca, elemen pada layar mudahdiidentifikasi tanpa harus membaca teks yang menjelaskan tentang fungsinya.

3. K etidakjelasan dalam penggunaan fungsi sebagai pemenuhan kebutuhan pengguna.

Tidak online

Online kah? K urang

jelas

Gamb

a

r

1

5

:

K

e

t

i

d

a

k

j

e

l

a

s

a

n

d

a

l

a

m

p

e

n

g

g

u

n

a

a

n

Padabagiankolompalingkananwebsiteiniterdapatinformasiberupast

atuschatingonlinedariparaadminyangmengelolawebsiteini.Darisegifungsionalit

asnya ini jelas sangat berguna, jika adapertanyaan atau saran, pengguna bisalangsung berkomunikasi dengan adminyang sedang online tersebut. Akan tetapikenyataannya tidak seperti ini, padamulanya saya tidak mengerti apamaksudnya dua nama yang paling bawah,karena tidak ada statusnya sama sekali, inijelas me mbingungkan pengguna, apakahdua nama terakhir tersebut sedang onlineatau tidak, ketika diarahkan pointer kenama tersebut ternyta tidak ada link samasekali, kemudian setelah sering berkomunikasi dengan adminnya via email,barulah mengerti ternyata itu menunjukkanbahwa status adm in dalam keadaanonline, namun kurangnya di sini, kita tidakbisa langsung terhubung dengan adm inkarena tidak ada link ke nama tersebut,untuk bisa berkomunikasi dengan adminyang sedang online itu kita harusmembuka aplikasi chating terlebih dahulu,sungguh tidak efektif dan memakan wak tupengguna.Sar an : Berikan informasi yang jelas, agar

pengguna tidak merasakebigungan, desain navigasi yangbaik, informasi yang logis, sertapen yajian menurut prioritasinformasi merupakan indikatorkebaikan desain layar. Hal inipenting sekali untuk diperhatikansebagai pengelola website.Ketidakteraturan,ketidakefisienan, akanmenyebabkan informasi yangingin disampaikan sulit diterimapengguna, ini membuat penggunamerasa “takut”, atau bahkan“terancam”, dalam artian menjadibingung dan tidak mengerti.

4. T ampilan tidak tersusun ra pi dan fungsi serta control yang membingungkan

Link ataubukan ?

Link atau

bukan ?

Gambar1

Padabagi

an sebelah kanan kita juga bisa melihatmenu shortcut, menu ini berisi tutorial-tutorial yang terdapat dalam situs ini,tutorial tersebut terbagi menjadi beberapakategori, namun jika kita lihat di sini,kategori tersebut tidak terurut, danpenulisannya pun tidak rapi, inimenyulitkan pengguna untuk

Halaman | 16

me mbacanya. Tiap-tiap kategori terdapat list a tau daftar tutorial, daftar ini juga tidak ter susundengan rapi, pada awaln ya saya mengira ini hanya list biasa yang berisikan in formasi meng enai isidari web site ini,namu n setelah diteliti lebih lanjut, mengarhkan pointer ke salah satu poin t daridaftar tersebut, barulah d iketahui itu be rfungsi sebag ai link.

Sar an : Hindari Layout yang tidak terstruktur dan tidak terarah yang memungkink an terjadinyakesalaha n, buatlah kategori tersebut menjadi poin-point yang terstruktur d engan jelas.Perbaiki kualitas prese ntasi, jangan sampai pengguna mengalami kesulitan dala mmembaca, yang pad a akhirnya a kan menurunkan kemampuan pemakai da n menyebabkankesalahan lagi.

5. D erajad Kepe ntingan dalam Desain Tam pilan Informa si

Informasi yang tidak perlu dan desaintam pilan yang kurang baik

Gambar 17: Derajad Kepenti ngan dalam D esain Tampila n Informasi

Di bawa h menu katego ri kita bisa m elihat ada informasi mengenai blog-blog m aupunsitus-situs lain yang telah terhubung atau menggunakan informas i yang terdap at di situs ilmuwebsite.com ini. Ditinjau dari segi kepenti ngannya, rasa nya hal ini tidak perlu dil akukan, karenaini kuarng ber manfaat, kalaupun ini mema ng perlu dila kukan, jangan sampai memb uat tampilaninformasi ini terkesan sulit dibaca.Sar an : Perbaiki kualitas presen tasi, jangan s ampai penggu na mengalami kesulitan dalam

membaca, yang pad a akhirnya ak an menurunk an kemampua n pengguna da nmenyebabkan kesalahan lagi.

Halaman | 17

IV. Kesimpulan dan Saran

KesimpulanDesain layar yang baik, antar muka yang interaktif, dan tingkat usabilitas yang tinggi

memegang peranan penting terhadap kemajuan sebuat website, pengembangan sistem yangberorientasi pengguna ini merupakan hal yang mutlak dilakukan oleh pengelola situs tersebut untukmemperoleh hasil yang optimal.

Dari beberapa hasil dan pembahasan di atas, cukup banyak hal yang masih perlu diperbaikidan dikembangkan oleh pengelola website tersebut (www.ilmuwebsite.com) untuk meningkatkankualitas websitenya, terutma mengenai desain antar mukanya dan cara menampilkan fungsi sertainformasinya.

Suatu desain layar yang baik harus mencerminkan kemampuan, kebutuhan, dan tugas daripara pemakai nya, dikembangkan dalam batasan fisik yang jelas, menggunakankapabilitas/kemampuan dari pengendalian perangkat lunaknya secara efektif. dan mampu mencapaisasaran dan tujuan bisnis dari sistem yang dirancang tersebut.

Saran

1. Perjelas teks dan pilih kata yang tidak tepat dalam menyampikan informasi, karenaketidakjelasan dan ketidaktepatan inilah yang menyebabkan keraguan dan akhirnyamemungkinkan para pengguna salah dalam menafsirkannya.

2. Gunakan grafis secara tepat sehingga unsur-unsur penting terbaca dan mudah dimengerti denganbailk.

3. Pilihlah judul yang representatif. Karena jika tidak, ini akan menciptakan kebingungan danmenghalangi kemampuan dalam melihat hubungan yang ada.

4. Hindari permintaan informasi yang tidak penting atau tidak relevan, karena akanmembingungkan 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 penggunamenggunakan 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