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 : Irvan Adam Maulana

12000212

AKADEMIK MANAJEMEN INFORMATIKA DAN KOMPUTER

BINA SARANA INFORMATIKA

JAKARTA 20114

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 dosen mata kuliah IMK, 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.

Jakarta, 12 Juni 2014

Penulis

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: 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 | 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

Header

Bagian Kiri Bagian Tengah Bagian Kanan

Gambar 0 : P emberian bagian untuk mem udahkan pembahasan

Halaman | 7

Bagian Kiri

1. N avigasi yang Membingungkan dan Tidak Efisien

Home dan News Website

yang 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 dengan

men u-menu kat egori, hal i ni menunjukkan ketidakrapian rancan gan visual, navigasinya me

mbingungkan, sehingga men yebabkan kemudahan pembacaan menjadi menurun. Graf is yang tidak

tepa 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 ini

sebaiknya dua menu u tama tersebut kita pisahkan dari menu-menu kategori, m ungkin akan

lebih bai k jika dua men u utama tersebut kita letakkan di bagian atas (tepat di b awah

header) dan disus un secara horizontal. 2. Menu-menu Tidak Tersusun Rapi

Kita lihat pada kolom sebelah kiri website ini, pada kolom kiri tersebut ada beberapa list menu

kategori, na mpak jelas sekali menu-me nu tersebut tidak tersusun dengan baik, bayangkan jika menu-menu kategori tersebut cukup banyak, hal ini akan menyulitkan pengguna dalam mencari kate gori yang memang benar-benar diinginkannya karena menu tersebut tidak tersusun secara alp habetic. Saran: mengorganisir derajat k eterhubungan antar menu-menu tersebut, serta menyajikannya sesuai

prioritas informasi, sehingga pada kasus ini sebaik nya menu-menu kategori ter sebut disusun

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 kategori

yang tidak tersusun

rapi (berurutan)

Me nyebabkan

kesulitan pembacaan

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

3. I nkonsistensi D esain Link

Menu Kategori

Bandingka

Link

bedakan link dengan

“bukan link” Link: -dicetak biru atau

-digarisbawahi

Gambar 3: Ink onsistensi De sain Link.

Apabila kita lihat lagi pada kolom kiri website ini, ada sub-menu dari tiap-tiap kategori

menu di sana, awalnya saya pikir ini hanya sekedar informasi m engenai isi atau content dari website

ini, nam un setelah dicoba (diarahkan pointer ke sub-menu tersebut) ternyata itu merupakan link. Jika

kita bandingkan dengan gambar yan g Saran: sebaiknya sub menu-sub menu tersebut dibuat bewarna biru atau digaris bawahi, atau

mungkin dicetak tebal, agar ini sesuai dengan fungsinya sebagai link sehingga pengguna

langsung tahu kalau submenu -subme nu tersebut m emang berfun gsi sebagai link, tanpa

harus mencoba terlebih dahulu.

Halaman | 9

Ba gian Tengah

1. Kontrol yang Kurang Lengkap

Pada logo website ini tidak terdapat link 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

Saran : Sebaiknya pada logo w ebsite ditambahkan link ke halaman utama, ini untuk memudahkan

user kembali ke halam an utama pad a saat user m erasa kebingungan ketika browsing dan

tidak tahu sekarang ada di mana. 2. I nkonsistensi P enggunaan Bahasa

B ahasa Pilih salah Indonesia Inggris satu saja

Gam bar 5: Inkonsistensi Penggu naan Bahasa

Tidak konsisten dalam penulisan, jika kita lihat pada informasi waktu di atas, website ini

men ggunakan dua bahasa sekaligus, Bahasa Indonesia dan Bahasa Inggris. Seharusnya pilih salah

satu bahasa saja, misalnya menggun akan Bahasa Indonesia saja. Penggabungan seperti ini mungkin

boleh dilakukan, akan tetapi pada kon disi tertentu, misalnya pada saat tidak ada makna kata yang

sesuai atau padanan kata yang cocok dalam Bahasa Indonesianya, atau mungkin jika diartikan dalam

bahasa Indonesia ini akan menimbulkan kerancuan ya ng akhirnya informasi yang ingin disampaikan

menjadi tidak tepat, barulah pencampuran bahasa (penggunaan bahasa inggris dan bahasa Indonesia

sekaligus) diperbolehkan, misalkan untuk kata joystick, ini merupakan kata yang tidak bisa diartikan

secara harfiah ke dalam Bahasa Indonesia, sehingga penggunaan istilah tersebut dalam Bahasa

Inggris diperbolehkan. Dalam kasus ini Wednesday m erupakan kata yang memiliki padanan kata

yang sesuai dengan Bahasa Indonesia, yaitu Rabu. Sehingga kurang bagus jika kita gunakan kedua

bahasa sekaligus Saran : Jika kita pandang masa lah ini dari sisi tujuannya, kita ketahui bahwa pemberian informasi

waktu ini mungkin diperuntukkan bagi user yang berada di luar Indonesia, oleh karena itu

sebaiknya informasi waktu tersebu t kita tulis dalam Bahasa Inggris, ini memudahkan

pengguna yang berada di luar Indonesia, sehingga kata “Tanggal” kita ubah menjadi “Date”,

dan kata “Negara” kita ubah menjadi kata “Country”. 3. Inkonsistensi Desain Link

Penekanan Typeface da n grafik yang tidak tepat, terlalu banyak informasi yang tidak dipilah

sehingga menyebabkan kemuda han pembacaan menjadi rendah. Halaman | 10

BLink

Link

Kedua

font

sama

Gambar 6: Inkonsistensi Desain Link

Pada kolom bagian tengah website ini, kita bisa melihat beberapa artikel tutorial, pada

artikel tersebut dicantumkan nama orang (dalam hal ini administrator) yang mem-posting artikel

tersebut, jika kita perhatik an lebih lanjut, kita bisa melihat nama admin tersebut dicetak biru, namun

setelah dico ba (diarahkan pointer ke nama tersebut) ternyata itu bukan link, dan kita lihat lagi pada

bagian penjelasan singkatnya, ada tulisan yang menggunakan font yang sama dengan font yang

digunakan unt uk menuliskan nama admin yang mem-posting tadi (ukuran, warna, dan typeface-nya

sama) yang ternyata merupak an link, sehingga tidak ada ketentuan yang jelas dalam membedakan

antara link dan bukan link, ini m enunjukkan ketidakkonsistenan desain. Hal ini akan berdampak bagi

pengguna, 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 bahasa

yang sederhana, oleh karena itu sebagai depelover kita harus memperhatikan hal-hal

tersebut, jangan s ampai membuat pengguna m engalami kesulitan. Jadi pada kasus di atas

sebaiknya kita mem berikan batasan yang jelas antara penggunaan font sebagai link dan

bukan link, dan juga pen yederhanaan tampilan agar mudah dibaca. 4. I nkonsistensi Desain Penulisan (dalam penggunaan font)

Informasi 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 k

tebal (bukan juga sebagai link, hanya informasi biasa), sedangkan no 3, 4 dan seterusnya ditulis tanpa

cetak 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, dan

membuat regularity (keteraturan) yang jelas, dengan menerapkan ruang dan pelurusan horizontal dan vertikal yang konsisten baik dari segi penempatannya maupun dari segi

Halaman | 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 pi

Dalam penulisan nama tidak ada urutan penulisannya, atau deng an kata lain tidak diurutkan ber

dasarkan alphabet awal dari nama-nama tersebut sehingga sulit mencari posisi nama kita (tentunya seb agai

user) apabila kita sud ah terdaftar, atau mungkin kita akan mengalami kesulitan untuk men getahui apakah

kita memang sudah benar2 terdaftar sebagai anggota kelompok website ini.

Penyusunan

nama tidak urut

G ambar 8: Tam pilan tidak ter susun rapi

Saran : Jika memang ingin melakukan peng elompokan, m aka lakukanlah pengelompokan dengan

judul yan g berarti untuk tiap pengelompokannya, ini memudahkan pengguna meyerap

secara optimal informasi terse but, dan berik an urutan yang jelas dalam pengelompokan itu,

hal ini untuk me nghindari penurunan tingkat kemudahan membaca web tersebut. 6. G rouping tanpa dasar penge lompokan yang jelas

Dikelompokkan

berdasarkan apa?

Gambar 9: Grouping tanpa dasar pengelompokan yang jelas.

Tidak ada pola dan ketentuan yang jelas mengenai pembagian kelompok dari anggota web site

ini. Ini juga akan membingunkan pengguna, jika pengguna tersebut memang telah terdaftar sebagai

masyarakat (anggota) website ini. Pen gguna akan ke bingungan di kelompok mana ia terdaftar. Saran : Secara u mum grouping digunakan un tuk meyajikan pengelompo kan fungsional dari elemen

yang saling berhubungan. Namun dalam atu ran dan batas yang jelas. Apabila pengelom

pokan terseb ut dilakukan tanpa aturan, maka akan meyebabkan informasi tersebut menjadi

sulit dibaca (dimengerti).

Halaman | 12

7. Inkonsistensi D esain Link

Bukan Link

Gambar 10: Inkonsistensi Desain Link.

Ada dua hal yang kon tras di sini. Pada gambar s ebelah kiri kita lihat bahwa ada tulisan ber

warna biru dan di-bold, tern yata bukan link, hanya seba gai judul dari halaman, lalu pada gambar seb

elah kanan kit a juga bisa melihat ada tulis an dengan font yang sama dengan font ya ng digunakan

pada 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: Seharusnya untuk fungsi yang berbeda, digunakan bentuk font ya ng berbeda ju ga, misalnya

jika hanya ingin mena mpilkan inform asi sebagai judul sebaiknya cukup di cetak tebal

(bold) dan ber warna hitam, atau mungkin dengan merubah ukuran typeface-nya (ukurannya

diperbesar), sedangkan untuk menuliskan kata ata u prase sebagai link, digu nakan 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 (tanpa

cetak teba l, tidak berwarna biru, dan tidak digarisb awahi), pada m ulanya saya m engira ini han ya

informasi bias a yang disusun dalam bentu k daftar atau list, namun se telah mouse d iarahkan

kesalah-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 terli

hat bahwa point-point terseb ut tidak diuru tkan menurut a lphabet awal dari kata yang paling depan pada

judulnya. Bisa kita bayangkan jika point-point terseb ut cukup banyak jumlahnya, maka user aka n

mengalami kesulitan dala m melakukan pencarian artik el yang diing inkan. Ini merupakan salah satu

bentuk 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 warna

biru atau garis bawah pada tulisan yang berfungsi seva gai link, buatl ah urutan yang jelas

untuk poin-poi n dari suatu informasi, agar tidak membingungkan pengguna, dan

memudahkan dalam m embacanya. Halaman | 13

9. K etidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi

Informasi yang

tidak 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 kete

rangan yang tidak jelas, bahkan ini mungkin tidak layak disebut informasi, tulisan tersebut men ggunakan

Bahasa Inggris, ini menunjukkan ketidakkonsistenan Bahasa, kemudian dari segi kegunaanpun ini kurang

bermanfaat, karena kata-kata tersebut sama sekali tidak berarti ( meaningless), kare na jika kita

terjemahkan kedalam bahasa Indonesia artinya “Email mengirim”, (bukan mengirim Em ail, atau Email

terkirim), terdapat juga keterangan yang kurang jelas dan mungkin ini tidak dipe rlukan, serta maksud

penulisannyapun 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 dari

segi peletakannya ini tidak memenuhi aturan penulisan karena tidak terurut (respon 2, baru respon 1), dan

dari segi kegunaanyapun ini juga kurang jelas, Penggunan tulisan yang tidak konsisten, Point “ Nama” ditulis menggunakan huruf kecil

dengan 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 hurufnya

ditulis dengan huruf besar, ini merupakan suatu bentuk ketidakkonsistenan dalam penulisan. Sar an:Menampilk an informasi harus sesuai dengan fungsi dan tempatnya, gunakan kata-kata yang

tepat, agar tidak terjadi kesalahpahaman bagi pengguna, dan jangan menambahkan hal-hal

yang tida k perlu, karena hal tersebut hanya akan membuat bingung pengguna. Ada

beberapa hal yang mungkin bisa diperbaiki agar desain tersebut bisa lebih interaktif,

diantaranya ialah menandai di sebelah kanan kotak form tersebut dengan tanda * , lalu pada

bagian bawah form tersebut tuliskan arti tanda tersebut. Untuk lebih jelasnya perhatikan ga

mbar berikut, serta gunakanlah penulisan kata yang lebih konsisten, agar desain tersebut

terlihat lebih rapi. Berikut p erbaikan desain yang mungkin bisa dilakukan.

Gambar 13: Saran Penyajian Desain

Halaman | 14

Bagian Kanan 1. Page scroling y ang tidak efisien

Pada website ini kita juga bisa melihat ada scroll horizontal dan scroll vertikal, scroll

vertikalnya cukup banyak, lebih kurang 10-12 kali, ini sungguh tidak efisien jika dibandingkan

dengan rata-rata scrolling vertikal maksimu m sekitar 6-8 kali. Hal ini terjadi karena website ini men ampilkan ba nyak tutorial p ada satu hala man, yang notabene tutorial tersebut pun tidak tersusun secara teratur, ini menyebabkan ketidakrapian rancangan visual dan kemudahan pembacaanpun men jadi rendah. Hal lain yang juga tidak disukai oleh pengguna pada umumnya, yaitu scrolling hori

zontal, bagi beberapa pengguna, ini sungguh “menyebalkan ”, untuk memperoleh informasi pada

bagian sisi (kanan dan kiri) la yar pengguna harus melakukan scrolling horizontal terlebih dahulu.

seb agaimana yang kita ketahui bahwa pengguna pasti menginginkan tampilan yang tersusun bersih

dan rapi, apa yang telihat mudah dimengerti, dan informasi berada tepat di tempatnya. Sar an : Sebaiknya scrolling horizontal itu dihindari, mungkin ini tidak menyulitkan pengguna karena

pemakai nnyapun cukup mudah, akan tetapi dari segi estetika ini akan membuat pengguna

merasa kurang nyaman pada saat bro wsing. Penggun aan scrolling berlebihan sebaiknya jangan sampai terjadi, agar hal ini tidak terjadi

sebaiknya kita mengoptimalkan jumlah elemen pada layar, dalam batasan kejelasan,

maksudnya informasi-informasi yang ditampilkan pada layar se baiknya ditampilkan dalam

batasan ang jelas, apabila dalam satu halaman dirasakan tidak cukup untuk menampilkan

semua i nformasi yang saling berkaitan, maka kita bisa membaginya menjadi beberapa

halaman, untuk memin imumkan risiko terjadinya scrolling vertikal yang berlebihan akibat

semua informasi yang saling berkaitan diletakkan semuanya dalam satu halaman. 2. D esain yang k urang rapi dan tidak konsisten

Simbol tidak

tepat 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 diberi

nam a “Statistik S itus”, isinya berupa informasi mengenai situs tersebut, antara lain ialah Visitor dan

Pag 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 penggunaan

bahasa, ada pencampuran bahasa ini akan membuat desain layarnya menjadi buruk, dan mungkin di

lain sisi ini akan sulit dim engerti oleh beberapa pengguna. Kembali lagi kita tekankan bahwa

pencampuran bahasa itu bisa di gunakan jika sudah tidak ada lagi kata yang cocok atau sepadan

diantara keduanya, dan jika dipaksak an untuk diartikan ke salah satu bahasa, ini akan mem

bingungkan, dan akhirnya info rmasi yang ingin disampaikan tidak optimal. Pada bagian ini kita juga

bisa melihat penggunaan simbol, simbol orang berwarna biru digunakan untuk mengartikan jumlah

pengunjung situs ini, sed angkan simbol orang berwarna kuning digunakan untuk mengartikan

jumlah halaman yang terdapat pada situs ini. Ini adalah bentuk desain yang kurang baik, karena

penggunaan simbol yang kur ang tepat untu k menjelaskan informasi tertentu. Sar an : Gunakan bahasa yang jelas dan mudah dimengerti, sebagaimana yang kita ketahui bahwa

penggun a website ini adalah orang Indonesia, ada baiknya jika bahasa yang digunakan

konsisten dalam bahasa Indonesia, suatu desain dibuat haruslah sesuai dengan kriteria dan

karakteristik penggunanya. Kemudian, gunakanlah elemen yang sesuai dalam menjelaskan

suatu 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 gunakan

simbol dengan gambar orang, dan bedakan dengan simbol yang menjelaskan jumlah

halaman, misalkan ga mbar halaman web. Ini dimaksudkan agar informasi-informasi yang

terkandung pada website tersebut bisa dengan mudah terbaca, elemen pada layar mudah

diidentifikasi tanpa harus membaca teks yang menjelaskan tentang fungsinya. 3. Ketidak jelasan dalam penggunaan fungsi sebagai pemenuhan kebutuhan pengguna.

Tidak online Online kah?

K urang jelas

Gambar 15: Ketidakjelasan dalam penggunaan fungsi

sebagai pemenuhan kebutuhan pengguna

Pada bagian kolom paling kanan website ini terdapat informasi berupa status chating online

dari para admin yang mengelola website ini. Dari segi fungsionalitasnya ini jelas sangat berguna, jika

ada pertanyaan atau saran, pengguna bisa langsung berkomunikasi dengan admin yang sedang online

tersebut. Akan tetapi kenyataannya tidak seperti ini, pada mulanya saya tidak mengerti apa

maksudnya dua nama yang paling bawah, karena tidak ada statusnya sama sekali, ini jelas me

mbingungkan pengguna, apakah dua nama terakhir tersebut sedang online atau tidak, ketika

diarahkan pointer ke nama tersebut ternyta tidak ada link sama sekali, kemudian setelah sering ber

komunikasi dengan adminnya via email, barulah mengerti ternyata itu menunjukkan bahwa status

adm in dalam keadaan online, namun kurangnya di sini, kita tidak bisa langsung terhubung dengan

adm in karena tidak ada link ke nama tersebut, untuk bisa berkomunikasi dengan admin yang sedang

online itu kita harus membuka aplikasi chating terlebih dahulu, sungguh tidak efektif dan memakan

wak tu pengguna. Sar an : Berikan informasi yang jelas, agar pengguna tidak merasa kebigungan, desain navigasi yang

baik, informasi yang logis, serta pen yajian menurut prioritas informasi merupakan indikator

kebaikan desain layar. Hal ini penting sekali untuk diperhatikan sebagai pengelola website.

Ketidakteraturan, ketidakefisienan, akan menyebabkan informasi yang ingin disampaikan

sulit diterima pengguna, ini membuat pengguna merasa “takut”, atau bahkan “terancam”,

dalam artian menjadi bingung dan tidak mengerti. 4. T ampilan tidak tersusun rapi dan fungsi serta control yang membingungkan

Link atau Bukan bukan ? link

Ternyata Link atau link bukan ?

Gambar 16: Tampilan tidak tersusun rapi dan

fungsi serta Kontrol yang membingungkan Pada bagian sebelah kanan kita juga bisa melihat menu shortcut, menu ini berisi tutorial-tutorial yang

terdapat dalam situs ini, tutorial tersebut terbagi menjadi beberapa kategori, namun jika kita lihat di

sini, kategori tersebut tidak terurut, dan penulisannya pun tidak rapi, ini menyulitkan pengguna untuk

Halaman | 16

membacanya. Tiap-tiap kategori terdapat list a tau daftar tutorial, daftar ini juga tidak ter susun

dengan rapi, pada awaln ya saya mengira ini hanya list biasa yang berisikan in formasi meng enai isi

dari web site ini,namu n setelah diteliti lebih lanjut, mengarhkan pointer ke salah satu poin t dari

daftar tersebut, barulah d iketahui itu be rfungsi sebag ai link. Saran : Hindari Layout yang tidak terstruktur dan tidak terarah yang memungkink an terjadinya

kesalaha n, buatlah kategori tersebut menjadi poin-point yang terstruktur d engan jelas.

Perbaiki kualitas prese ntasi, jangan sampai pengguna mengalami kesulitan dala m

membaca, yang pad a akhirnya akan menurunkan kemampuan pemakai da n menyebabkan

kesalahan lagi. 5. Derajad Kepentingan dalam Desain Tampilan Informasi

Informasi yang tidak

perlu dan desain tam pilan yang

kurang baik

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

Di bawa h menu kategori kita bisa melihat ada informasi mengenai blog-blog m aupun situs-

situs lain yang telah terhubung atau menggunakan informasi yang terdapat di situs ilmu website.com

ini. Ditinjau dari segi kepentingannya, rasanya hal ini tidak perlu dilakukan, karena ini kuarng ber

manfaat, kalaupun ini memang perlu dilakukan, jangan sampai membuat tampilan informasi ini

terkesan sulit dibaca. Saran : Perbaiki kualitas presen tasi, jangan sampai penggu na mengalami kesulitan dalam membaca,

yang pada akhirnya akan menurunk an kemampuan pengguna dan menyebabkan kesalahan

lagi.

Halaman | 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 pemakainya, 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