TUGAS AKHIR MATA KULIAH INTERAKSI MANUSIA DAN KOMPUTER

Interaksi Manusia dan Komputer - Pembahasan Mengenai Antar Muka, Desain Layar, dan Usabilitas dari situs www.ilmuwebsite.com

Oleh : IRSYADINNAS G14053052

DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR 2008

Halaman | 0

Kata Pengantar Segala puji dan syukur penulis panjatkan ke hadirat Allah SWT karena atas segala karuniaNya penulis dapat menyelesaikan tugas ini. Topik yang dibahas dalam makalah ini ialah mengenai situs www.ilmuwebsite.com , mulai dari desain antar muka, tampilan layar, navigasi, fungsi-fungsi, sampai dengan ukuran tingkat usabilitas situs ini. Keberhasilan ini tidak lepas dari bantuan berbagai pihak. Oleh karena itu, dalam kesempatan ini penulis ingin mengucapkan terimakasih kepada teman-teman mata kuliah Interaksi Manusia dan Komputer, dan Bapak Firman Ardiansyah selaku dosen mata kuliah ini, serta semua pihak yang telah memberikan saran dan bantuan selama menyelesaikan tugas ini. Penulis menyadari bahwa masih banyak terdapat kekurangan dalam menyelesaikan tugas ini baik dari segi materi maupun penyajiannya, untuk itu saran serta kritikan yang membangun dari dosen dan rekan-rekan sangat diharapkan guna perbaikan penulisan ini. Akhir kata penulis berharap semoga tulisan ini bermanfaat bagi pembaca pada umumnya dan penulis pada khususnya.

Bogor, 12 Juni 2008

Irsyadinnas

Halaman | 1

Daftar Isi Halaman Kata Pengantar ....................................................................................................................... 1 Daftar Isi ................................................................................................................................ 2 Daftar Gambar ....................................................................................................................... 3 I. Pendahuluan Latar Belakang ....................................................................................................................... 4 Tujuan .................................................................................................................................... 4 II. Tinjauan Pustaka Interaksi Manusia dan Komputer (IMK)................................................................................ Usabilitas................................................................................................................................. Dimensi usabilitas ................................................................................................................... komponen usabilitas .............................................................................................................. Fleksibilitas ............................................................................................................................. Antar Muka Pemakai (User Interface) ................................................................................... Analisa Kebutuhan dan Definisi Bisnis ................................................................................. Desain Layar yang Baik ......................................................................................................... pengujian untuk disain yang baik ........................................................................................... Task Analysis .......................................................................................................................... III. Hasil dan Pembahasan ........................................................................................................ Bagian Kiri 1. Naviasi yang Membingungkan dan Tidak Efisien .................................................... 2. Menu-menu Tidak Tersusun Rapi .............................................................................. 3. Inkonsistensi Desain Link .......................................................................................... Bagian Tengah 1. Kontrol yang Kurang Lengkap .................................................................................. 2. Inkonsistensi Penggunaan Bahasa .............................................................................. 3. Inkonsistensi Desain Link .......................................................................................... 4. Inkonsistensi Desain Penulisan .................................................................................. 5. Tampilan Tidak Tersusun Rapi .................................................................................. 6. Grouping Tanpa Dasar Pengelompokan yang Jelas .................................................. 7. Inkonsistensi Desain Link .......................................................................................... 8. Tampilan yang tidak tersusun dan kurang rapi ........................................................... 9. Ketidakkonsistenan Desain Penulisan dan Ketidakjelasan Informasi ....................... Bagian Kanan 1. Page scroling yang tidak efisien ................................................................................. 2. Desain yang kurang rapi dan tidak konsisten ............................................................. 3. Ketidakjelasan dalam penggunaan fungsi................................................................... 4. Tampilan tidak tersusun rapi dan fungsi serta control yang membingungkan .......... 5. Derajad Kepentingan dalam Desain Tampilan Informasi ..........................................

5 5 5 5 5 5 6 6 6 6 7 8 8 9 10 10 11 11 12 12 13 13 14 15 15 16 16 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.

2. 3. 4.

5. 6.

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. Grafis yang tidak tepat sehingga unsur-unsur penting tersembunyi. Judul yang tidak representatif. Ini juga menciptakan kebingungan dan menghalangi kemampuan dalam melihat hubungan yang ada. 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. Layout yang tidak terstruktur dan terarah yang memungkinkan terjadinya kesalahan. Kualitas presentasi yang jelek, sulit dibaca, akan menurunkan kemampuan pemakai dan menyebabkan kesalahan lagi.

Analisa Kebutuhan dan Definisi Bisnis. Sasaran dari tahap ini menetapkan kebutuhan suatu sistem.Suatu kebutuhan adalah suatu sasaran yang harus ditemui. Suatu produk yg dikembangkan, didasarkan pada masukan dari para pemakai, pemasaran, atau pihak-pihak lain yang berkepentingan. Desain Layar yang Baik 1. Mencerminkan kemampuan, kebutuhan, dan tugas dari para pemakai nya. 2. Dikembangkan dalam batasan fisik yang menggunakan perangkat keras dengan cara ditampilkan (berupa layout). 3. Menggunakan kapabilitas/kemampuan dari pengendalian perangkat lunaknya secara efektif. 4. Mencapai sasaran dan tujuan bisnis dari sistem yang dirancang tersebut. pengujian untuk disain yang baik: 1. Pengaturan unsur-unsur layar. 2. Navigasi layar dan aliran. 3. Komposisi yang memuaskan secara visual. 4. Tipografi. 5. Penyeteman (pengaturan) prosedur. 6. Keluaran data / data output. 7. Grafik secara statistik 8. Pertimbngan secara teknologi Task Analysis task analysis adalah Teknik untuk memperoleh suatu pemahaman dari fungsi yang harus dilakukan oleh sistem computer.

Halaman | 6

Hasil d Pembahasan dan Untuk me emudahkan da alam pembahas san, pada tamp pilan halaman u utama website ini kita bagi e men njadi tiga bagia yaitu, bagia kiri, bagaian tengah dan ba an an n agian kanan, perhatikan gam mbar di bawah ini.
Header H

Bagian Kir ri

Bag Tengah gian

Bagian Ka anan

Gambar 0 : P Pemberian bag gian untuk mem mudahkan pemb bahasan

Halaman | 7

B Bagian Kiri

1. N Navigasi yang Membingungkan dan Tidak Efisien

Home dan N News Website yang diletakkan g sekelompok dengan menu-menu kategori

Gambar 1: N Navigasi yang Membingungk dan Tidak E kan Efisien Ada dua Menu utama y yaitu Home da News Web an bsite yang dilet takkan sekelom mpok dengan nu-menu kate egori, hal in menunjukk ni kan ketidakrapian rancan ngan visual, navigasinya men mem mbingungkan, sehingga meny yebabkan kemu udahan pemba acaan menjadi m menurun. Graf yang tidak fis tepa sehingga uns at sur-unsur penti tersembuny ing yi Sara membagi informasi-info an: ormasi tersebut menjadi unit yang logis, b t t bermakna, dan masuk akal, pengatura unsur-unsu layar yang tepat. sehing an ur gga dalam memyelesaikan masalah ini sebaiknya dua menu ut a tama tersebut k pisahkan dari menu-men kategori, m kita nu mungkin akan lebih baik jika dua men utama terseb kita letakk di bagian a (tepat di ba k nu but kan atas awah header) dan disus secara horizontal. sun 2. M Menu-menu Ti idak Tersusun Rapi n Kita lihat pada kolom sebelah kiri w website ini, pa kolom kiri tersebut ada beberapa list ada men kategori, na nu ampak jelas sek menu-men tersebut tid tersusun de kali nu dak engan baik, ba ayangkan jika men nu-menu kateg gori tersebut c cukup banyak, hal ini akan menyulitkan pengguna da , n alam mencari kate egori yang memang benar-benar diingin nkannya karen menu terse na ebut tidak ters susun secara alph habetic. Sara mengorgan an: nisir derajat ke eterhubungan antar menu-me tersebut, s enu serta menyajik kannya sesuai prioritas informasi, seh hingga pada kasus ini sebaikn menu-men kategori ters nya nu sebut disusun secara berurutan menu urut alphabet awal dari ti iap kata perta ama pada me enu-menunya. Sehingga informasi yan ingin disamp a ng paikan bisa den ngan mudah di imengerti.

Halaman | 8

Menu-men kategori nu yang tidak tersusun k rapi (berur rutan)

Men nyebabkan kesu ulitan pem mbacaan

Gam mbar 2: Menu-menu Tidak Te ersusun Rapi. 3. In nkonsistensi Desain Link D Menu Kategori

Band dingka

Link

bedakan link dengan d bukan link Link: -dicetak biru atau a -digarisbawah hi

konsistensi Des sain Link. Gambar 3: Ink kita p ri ada dari kategori menu Apabila k lihat lagi pada kolom kir website ini, a sub-menu d tiap-tiap k r engenai isi ata content dari website ini, au i di sana, awalnya saya pikir ini hanya sekedar informasi me nam setelah dic mun coba (diarahkan pointer ke su n ub-menu terseb ternyata itu merupakan l but) u link. Jika kita band dingkan denga gambar yang an g Sara sebaiknya submenu-subm an: menu tersebut dibuat bewarn biru atau digarisbawahi, a na atau mungkin ebal, agar ini se esuai dengan fu fungsinya sebag link sehing pengguna langsung tahu gai gga dicetak te kalau sub bmenu-submen tersebut m nu memang berfun ngsi sebagai link, tanpa har mencoba rus terlebih d dahulu.

Halaman | 9

Bag gian Tengah 1. K Kontrol yang Kurang Lengk K kap Pada logo website ini ti o idak terdapat li ke home at ke halaman utama, sehing pengguna ink tau n gga akan merasa kebin n ngungan apabil suatu saat tersesat di saat browsing. la b

tidak terd dapat link ke halam utama man

Ga ambar 4: Kont yang Kuran Lengkap trol ng Sara : Sebaiknya pada logo w an a website ditambahkan link ke halaman utam ini untuk m ma, memudahkan user kem mbali ke halam utama pad saat user m man da merasa kebingu ungan ketika b browsing dan tidak tahu sekarang ada di mana. u a 2. In nkonsistensi Penggunaan Bahasa P B

Ba ahasa In ndonesia

Bahasa Inggris

Pilih salah u satu saja

Gam mbar 5: Inkonsistensi Penggu unaan Bahasa Tidak ko onsisten dalam penulisan, jik kita lihat pa informasi waktu di atas website ini m ka ada s, nggunakan dua bahasa sekalig Bahasa In a gus, ndonesia dan Bahasa Inggris. Seharusnya pi salah satu ilih men baha saja, misal asa lnya mengguna akan Bahasa In ndonesia saja. Penggabungan seperti ini mu n ungkin boleh dilak kukan, akan te etapi pada kond tertentu, m disi misalnya pada saat tidak ada m makna kata yan sesuai atau ng pada anan kata yan cocok dalam Bahasa Ind ng m donesianya, ata mungkin jik diartikan dalam bahasa au ka d Indo onesia ini akan menimbulkan kerancuan ya akhirnya in n n ang nformasi yang ingin disampa aikan menjadi tidak tepat, barula pencampuran bahasa (peng k ah n ggunaan bahasa inggris dan b bahasa Indones sekaligus) sia dipe erbolehkan, mi isalkan untuk kata joystick, ini merupaka kata yang t an tidak bisa diar rtikan secara harf fiah ke dalam Bahasa Indo m onesia, sehingg penggunaan istilah terseb dalam Ba ga n but ahasa Inggris dipe erbolehkan. Da alam kasus ini Wednesday m merupakan kata yang memilik padanan kata yang sesuai a ki a deng Bahasa In gan ndonesia, yait Rabu. Sehi tu ingga kurang bagus jika ki gunakan k ita kedua bahasa seka aligus Sara : Jika kita pandang masa an alah ini dari si tujuannya, kita ketahui b isi bahwa pemberi informasi ian waktu ini mungkin dip i peruntukkan ba user yang berada di luar Indonesia, ole karena itu agi b eh sebaiknya informasi w a waktu tersebut kita tulis dalam Bahasa Inggris, ini m t memudahkan pengguna yang berada di luar Indonesia, sehingga kata Tanggal kita ubah men a k njadi Date, dan kata Negara kita ubah menjadi k Country kata .

3. In nkonsistensi Desain Link D Penekana Typeface da grafik yang tidak tepat, ter an an rlalu banyak in nformasi yang tidak dipilah sehi ingga menyeba abkan kemudah pembacaan menjadi rend han n dah.

Halaman | 10 H

Bukan Link B Link

Kedua font sama

Gambar 6: Ink konsistensi Des sain Link om gah i, lihat beberapa artikel tutorial pada artikel l, Pada kolo bagian teng website ini kita bisa mel ebut dicantum mkan nama ora (dalam hal ini administr ang l rator) yang me em-posting arti ikel tersebut, terse jika kita perhatika lebih lanjut kita bisa melihat nama adm tersebut d an t, min dicetak biru, na amun setelah dico (diarahkan pointer ke na oba n ama tersebut) t ternyata itu bu ukan link, dan kita lihat lagi pada bagian penj jelasan singkat tnya, ada tulis yang meng san ggunakan font yang sama de engan font yan digunakan ng untu menuliskan nama admin y uk yang mem-pos sting tadi (uku uran, warna, da typeface-nya sama) yang an a tern nyata merupaka link, sehingga tidak ada k an ketentuan yang jelas dalam m membedakan an ntara link dan bukan link, ini m menunjukkan k ketidakkonsiste enan desain. Hal ini akan b H berdampak bag pengguna, gi ena akan merasa t terbodohi. kare pengguna a Sara sebagaima yang kita k an: ana ketahui bahwa pengguna pas mengingink tampilan y sti kan yang tersusun bersih da rapi, apa ya telihat mu an ang udah dimenger informasi b rti, berada tepat di tempatnya, d keterhubu ungan yang je elas (option, ju udul, data, dan yang lainnya dan penggu n a), unaan bahasa yang sede erhana, oleh ka arena itu sebag depelover k harus mem gai kita mperhatikan hal l-hal tersebut, jangan sa ampai membua pengguna m at mengalami kesu ulitan. Jadi pa kasus di at sebaiknya ada tas kita mem mberikan batasa yang jelas a an antara penggun naan font sebag link dan bu gai ukan link, dan juga peny yederhanaan ta ampilan agar m mudah dibaca. 4. In nkonsistensi Desain Penulis (dalam penggunaan fon D san nt) In nformasi yang sama itulis dengan c di cara yang berbeda

Gambar 7: Inko G onsistensi Desa Penulisan ( ain (dalam penggu unaan font) Tidak konsisten dalam penulisan atau penggunaan jenis font nya, no 1 dan 2 ditulis dengan u j d ak n formasi biasa), sedangkan no 3, 4 dan seter , o rusnya ditulis ceta tebal (bukan juga sebagai link, hanya inf tanp cetak tebal, h ini melangg Konsep Re pa hal ggar egularity dalam mendesain la m ayar pada sebu website. uah Sara sebaiknya menggunaka elemen yan serupa dal an: a an ng lam ukuran, b bentuk, warna jarak, dan a, membuat regularity (k t keteraturan) y yang jelas, den ngan menerap pkan ruang da pelurusan an horizonta dan vertikal yang konsis al l sten baik dari segi penempa atannya maup pun dari segi

Halaman | 11 H

penulisan nnya, atau mu ungkin dengan membuat unity menggun n u nakan keserup paan ukuran, bentuk, w warna untuk inf formasi yang b berkaitan. 5. T Tampilan tidak tersusun rap k pi Dalam pe enulisan nama tidak ada urut penulisann tan nya, atau denga kata lain tid diurutkan an dak berd dasarkan alpha awal dari n abet nama-nama ter rsebut sehingga sulit mencari posisi nama k (tentunya a i kita seba agai user) apa abila kita sud terdaftar, atau mungkin kita akan m dah n mengalami kes sulitan untuk men ngetahui apaka kita memang sudah benar2 terdaftar seba anggota ke ah g 2 agai elompok websi ini. ite

Penyusuna an nama tidak urut k

Gambar 8: Tam G mpilan tidak ter rsusun rapi an mang ingin me elakukan peng gelompokan, maka lakukanla pengelompokan dengan m ah Sara : Jika mem judul yan berarti untuk tiap pengelom ng k mpokannya, in memudahkan pengguna me ni n eyerap secara optimal i informasi terse ebut, dan berik urutan yang jelas dalam pengelompoka itu, hal ini kan an untuk me enghindari penu urunan tingkat kemudahan m t membaca web te ersebut. 6. G Grouping tanpa dasar penge elompokan yan jelas ng

Dikelompo okkan berdasarka apa? an

Gambar 9: G Grouping tanp dasar penge pa elompokan yang jelas. g Tidak ad pola dan k da ketentuan yang jelas menge g enai pembagia kelompok dari anggota an bsite ini. Ini ju akan memb uga bingunkan pen ngguna, jika pe engguna terseb memang te but elah terdaftar web seba masyaraka (anggota) we agai at ebsite ini. Peng gguna akan keb bingungan di k kelompok mana ia terdaftar. a Sara : Secara um an mum grouping digunakan un ntuk meyajikan pengelompok fungsional dari elemen n kan l yang sa aling berhubu ungan. Namun dalam atu n uran dan bat tas yang jel las. Apabila pengelom mpokan tersebu dilakukan ta ut anpa aturan, m maka akan mey yebabkan inform tersebut masi menjadi sulit dibaca (di s imengerti).

Halaman | 12 H

7. In nkonsistensi Desain Link D

Bukan

Link
Gambar 10: Inkonsistensi De G esain Link.

Ada dua hal yang kon ntras di sini. P Pada gambar sebelah kiri ki lihat bahwa ada tulisan s ita a berw warna biru dan di-bold, terny n yata bukan link hanya sebag judul dari h k, gai halaman, lalu pada gambar sebe elah kanan kita juga bisa me a elihat ada tulisa dengan font yang sama de an t engan font yan digunakan ng pada tulisan di ga a ambar sebelah k yaitu berw kiri, warna biru dan di-bold, akan tetapi itu mer n n rupakan link, hal i jelas kontra ini adiksi, ini juga merupakan sa satu bentuk ketidakkonsistenan. alah k Sara Seharusnya untuk fungsi yang berbeda digunakan b an: a i a, bentuk font ya berbeda ju ang uga, misalnya jika hany ingin menam ya mpilkan inform sebagai judul sebaiknya cukup di cetak tebal (bold) masi k dan berw warna hitam, atau mungkin dengan me n erubah ukuran typeface-nya (ukurannya n a diperbesa sedangkan untuk menul ar), n liskan kata ata prase sebag link, digun au gai nakan tulisan berwarna biru, atau den a ngan digarisbaw wahi, agar terli jelas perbe ihat edaaanya. 8. T Tampilan yang tidak tersusu dan kurang rapi g un g Berfungs si sebagai link Tidak ada urutan atau ran keteratur yang jelas

Gambar 11 Tampilan ya tidak tersus dan kurang rapi. 1: ang sun g gian Tutorial Coreld draw, terdapat 6 point yang f fontnya regular (tanpa cetak r Pada bag Category T al, rna awahi), pada m mulanya saya m mengira ini han informasi nya teba tidak berwar biru, dan tidak digarisba bias yang disusu dalam bentu daftar atau l sa un uk list, namun set telah mouse di iarahkan kesalah-satu point terse ebut, barulah d diketahui ternyata point-point tersebut meru t upakan link. Pada gambar di at kita juga bisa melihat tid adanya uru tas dak utan yang jelas dalam list ter rsebut, hal ini terli bahwa poi ihat int-point terseb tidak diurut but tkan menurut alphabet awal d kata yang paling depan a dari pada judulnya. Bi kita bayan a isa ngkan jika poin nt-point terseb cukup bany jumlahnya maka user but yak a, akan mengalami k n kesulitan dalam melakukan p m pencarian artik yang diingi kel inkan. Ini mer rupakan salah satu bentuk desain yang kurang b karena ak menurunka tingkat kemu u n baik kan an udahan dalam m membaca. an nsisten dalam d desain, gunaka anlah aturan ya umum, sep ang perti pemberia warna biru an Sara : harus kon atau garis bawah pada tulisan yang berfungsi seva s a agai link, buatl urutan yang jelas untuk lah poin-poin dari suatu in n nformasi, agar tidak memb r bingungkan pen ngguna, dan m memudahkan dalam me embacanya.

Halaman | 13 H

9. K Ketidakkonsist tenan Desain Penulisan dan Ketidakjelas Informasi P n san

Infor rmasi yang tidak jelas k

Tidak terurut t Tidak kon nsisten

Gamba 12: Ketidakk ar konsistenan De esain Penulisan dan Ketidakje n elasan Informa asi Di pojok kiri atas kita lihat ada tulisan Email send , ini merup n pakan bentuk in nformasi atau erangan yang tidak jelas, bahkan ini mu ungkin tidak la ayak disebut informasi, tulisan tersebut kete men nggunakan Ba ahasa Inggris, ini menunjuk kkan ketidakkonsistenan Ba ahasa, kemudi ian dari segi kegu unaanpun ini k kurang bermanfaat, karena ka ata-kata tersebu sama sekali tidak berarti (m ut meaningless), kare ena jika kita te erjemahkan ke edalam bahasa Indonesia artinya Email me engirim, (buk mengirim kan Ema atau Emai terkirim), te ail, il erdapat juga k keterangan yan kurang jel dan mungk ini tidak ng las kin dipe erlukan, serta m maksud penuli isannyapun sul dipahami, in bisa kita lih pada sisi se lit ni hat ebelah kanan dari kotak form E-MAIL anda dan No.Hp, disana terda i a apat peringatan respon 2 da respon 1, n an jika kita perhatika lebih lanjut dari segi pele an t etakannya ini tidak memenu aturan penu uhi ulisan karena tidak terurut (respo 2, baru resp 1), dan dar segi kegunaan k on pon ri nyapun ini jug kurang jelas, ga , Pengguna tulisan yan tidak konsi an ng isten, Point N Nama ditulis menggunakan huruf kecil n deng huruf besa pada awal k gan ar katanya, akan te etapi pada poin E-MAIL A nt Anda, kata E-MAIL nya, ditu dengan hu ulis uruf besar sem mua, dan pada point ISI E-M MAIL lebih fatal lagi, sem hurufnya mua ditu dengan huru besar, ini m ulis ruf merupakan suatu bentuk ketida u akkonsistenan dalam penulisa an. Sara an:Menampilk informasi h kan harus sesuai d dengan fungsi dan tempatny gunakan ka ya, ata-kata yang tepat, aga tidak terjad kesalahpaham bagi peng ar di man gguna, dan jan ngan menamba ahkan hal-hal yang tida perlu, karena hal tersebut h ak hanya akan me embuat bingun pengguna. A beberapa ng Ada hal yang mungkin bisa diperbaiki aga desain terseb bisa lebih i ar but interaktif, dian ntaranya ialah menandai di sebelah kanan kotak fo k orm tersebut de engan tanda * , lalu pada b bagian bawah form ters sebut tuliskan arti tanda ters sebut. Untuk le ebih jelasnya p perhatikan gam mbar berikut, serta gun nakanlah penuli isan kata yang lebih konsiste agar desain tersebut terlih lebih rapi. g en, n hat Berikut perbaikan desai yang mungk bisa dilakuk p in kin kan.

Nama E-mail Ho.Hp Isi e-mail

Gambar 13: S Saran Penyajia Desain an

Wajib diisi W

Halaman | 14 H

Bagian Kanan 1. P Page scroling y yang tidak efis sien Pada web bsite ini kita juga bisa me elihat ada scro horizontal dan scroll ve oll ertikal, scroll vert tikalnya cukup banyak, lebi kurang 10p ih -12 kali, ini s sungguh tidak efisien jika d dibandingkan deng rata-rata scrolling verti gan ikal maksimum sekitar 6-8 kali. Hal ini terjadi karena website ini m a men nampilkan ban nyak tutorial p pada satu halam man, yang nota abene tutorial tersebut pun ti idak tersusun seca teratur, ini menyebabka ketidakrapia rancangan visual dan ke ara i an an emudahan pe embacaanpun men njadi rendah. H lain yang juga tidak di Hal g isukai oleh pe engguna pada umumnya, ya aitu scrolling hori izontal, bagi beberapa pengg guna, ini sungg menyebal guh lkan, untuk m memperoleh informasi pada bagi sisi (kanan dan kiri) lay pengguna harus melakuk scrolling horizontal terl ian n yar kan lebih dahulu. seba agaimana yang kita ketahui bahwa penggu pasti menginginkan tam g una mpilan yang ter rsusun bersih dan rapi, apa yang telihat mudah dimengerti, da informasi berada tepat di t g h an tempatnya. Sara : Sebaiknya scrolling hori an a izontal itu dihi indari, mungki ini tidak me in enyulitkan peng gguna karena pemakain nnyapun cukup mudah, akan tetapi dari se estetika in akan membu pengguna p n egi ni uat merasa ku urang nyaman pada saat brow wsing. Pengguna scrolling b aan berlebihan sebaiknya jangan sampai terjad agar hal ini tidak terjadi di, sebaiknya kita mengo a optimalkan jum mlah elemen pada layar, dalam batasa kejelasan, an maksudny informasi-i ya informasi yang ditampilkan pada layar seb g baiknya ditamp pilkan dalam batasan yang jelas, apa y abila dalam sa halaman dirasakan tidak cukup untuk m atu menampilkan semua in nformasi yang saling berka g aitan, maka ki bisa memb ita baginya menja beberapa adi halaman, untuk memin nimumkan risik terjadinya scrolling vertik yang berle ko kal ebihan akibat s n emuanya dalam satu halaman m n. semua informasi yang saling berkaitan diletakkan se 2. D Desain yang ku urang rapi dan tidak konsis n sten Simbol tidak tepat t Bahasa tidak k konsisten

Gambar 1 Desain yang kurang rapi dan tidak kons 14: g sisten ok wah ita olom informas yang diberi si Pada pojo kanan bagian atas (di baw header) ki lihat ada ko ma itus, isinya be erupa informas mengenai si si itus tersebut, a antara lain ialah Visitor dan h nam Statistik Si Pag dan masin ges, ng-masing men nggunakan sim mbol dengan ga ambar orang y yang diberi wa arna berbeda. Jika kita perhatika lebih lanjut, ini merupakan bentuk ketida a an n akkonsintenan dalam penggu unaan bahasa, ada pencampuran bahasa ini aka membuat de an esain layarnya menjadi buru dan mungki di lain sisi a uk, in ini akan sulit dim a mengerti oleh b beberapa pengg guna. Kembali lagi kita teka i ankan bahwa p pencampuran baha itu bisa dig asa gunakan jika sudah tidak ada lagi kata yan cocok atau s s a ng sepadan dianta keduanya, ara dan jika dipaksak untuk diart kan tikan ke salah satu bahasa, ini akan mem h mbingungkan, d akhirnya dan info ormasi yang in ngin disampaik tidak optim Pada bagia ini kita jug bisa melihat penggunaan kan mal. an ga t simb bol, simbol orang berwarna biru digunak untuk me a kan engartikan jum mlah pengunju ung situs ini, seda angkan simbol orang berw warna kuning digunakan un ntuk mengartik kan jumlah ha alaman yang terd dapat pada situ ini. Ini adala bentuk desa yang kuran baik, karena penggunaan simbol yang us ah ain ng kura tepat untuk menjelaskan informasi terte ang k entu. Sara : Gunakan bahasa yang j an jelas dan mud dimengerti sebagaimana yang kita ke dah i, a etahui bahwa pengguna website ini adalah orang Indonesia, ad baiknya jik bahasa yan digunakan a da ka ng konsisten dalam bahasa Indonesia, su n a uatu desain di ibuat haruslah sesuai dengan kriteria dan n karakteris penggunan stik nya. Kemudian gunakanlah elemen yang sesuai dalam menjelaskan n, h suatu fun ngsi tertentu, p penggunaan sim mbol ini cukup bagus, akan tetapi harus sesuai dengan p

Halaman | 15 H

informasi yang dijelask i kannya, misalk untuk meje kan elaskan jumlah pengunjung kita gunakan h simbol dengan gamba orang, dan bedakan den d ar n ngan simbol yang menjela askan jumlah halaman, misalkan gam mbar halaman web. Ini dim maksudkan agar informasi-inf r formasi yang ng isa udah terbaca, elemen pada layar mudah terkandun pada website tersebut bi dengan mu diidentifi ikasi tanpa haru membaca te yang menje us eks elaskan tentang fungsinya. g 3. K Ketidakjelasan dalam pengg n gunaan fungsi sebagai peme i enuhan kebutu uhan penggun na.

Tidak online e Online kah? ?

Ku urang jelas

Gambar 15: Ketidakjelasan dalam pe r enggunaan fun ngsi se ebagai pemenu uhan kebutuhan pengguna n Pada bag gian kolom paling kanan web bsite ini terdap informasi b pat berupa status ch hating online i ang a Dari sionalitasnya in jelas sangat berguna, jika ni dari para admin ya mengelola website ini. D segi fungs ada pertanyaan ata saran, pengguna bisa lang au gsung berkomu unikasi dengan admin yang s n sedang online terse ebut. Akan te etapi kenyataa annya tidak s seperti ini, pa ada mulanya saya tidak m mengerti apa mak ksudnya dua nama yang paling bawah, karena tidak ada statusny sama seka ini jelas p k ya ali, mem mbingungkan pengguna, apa akah dua nam terakhir ter ma rsebut sedang online atau tidak, ketika diar rahkan pointer ke nama ters r sebut ternyta t tidak ada link sama sekali, kemudian setelah sering k berk komunikasi den ngan adminny via email, ba ya arulah mengert ternyata itu menunjukkan bahwa status ti adm dalam kead min daan online, n namun kurangn di sini, kit tidak bisa la nya ta angsung terhu ubung dengan adm karena tida ada link ke nama tersebut, untuk bisa be min ak erkomunikasi d dengan admin yang sedang onli itu kita har membuka aplikasi chatin terlebih dah ine rus a ng hulu, sungguh tidak efektif d memakan dan wak pengguna. ktu Sara : Berikan informasi yang jelas, agar pe an g engguna tidak m merasa kebigu ungan, desain n navigasi yang baik, info ormasi yang lo ogis, serta peny yajian menurut prioritas info t ormasi merupak indikator kan kebaikan desain layar. Hal ini pentin sekali untuk diperhatikan sebagai penge ng k elola website. Ketidakte eraturan, ketid dakefisienan, a akan menyebab bkan informas yang ingin disampaikan si sulit dite erima penggun ini membua pengguna m na, at merasa takut atau bahkan terancam, , n dalam art menjadi bi tian ingung dan tida mengerti. ak

4. T Tampilan tidak tersusun rap dan fungsi s k pi serta control yang membing y gungkan Link atau bukan ? Buk kan link k

Link atau bukan ?

Ter rnyata link k

Gambar 16: Tampilan tidak tersusun rapi dan fung r n n gsi serta Kontrol yang membing l gungkan Pada bagian sebelah kanan kita j juga bisa melih menu short hat tcut, menu ini berisi tutorial-tutorial yang terd dapat dalam sit ini, tutorial tersebut terba menjadi be tus l agi eberapa katego namun jika kita lihat di ori, a sini, kategori terse , ebut tidak terur dan penuli rut, isannya pun tid rapi, ini m dak menyulitkan pen ngguna untuk

Halaman | 16 H

mem mbacanya. Tiap p-tiap kategori terdapat list a i atau daftar tuto orial, daftar ini juga tidak ters susun dengan rapi pada awalny saya mengi ini hanya list biasa yan berisikan in i, ya ira ng nformasi meng genai isi dari web bsite ini,namun setelah ditel lebih lanju mengarhkan pointer ke salah satu poin dari daftar n liti ut, n nt terse ebut, barulah d diketahui itu be erfungsi sebaga link. ai Sara : Hindari Layout yang tidak terstrukt dan tidak terarah yang memungkinka terjadinya an tur an kesalahan buatlah kat n, tegori tersebu menjadi po ut oin-point yang terstruktur d g dengan jelas. Perbaiki kualitas presen ntasi, jangan sa ampai penggun mengalami kesulitan dala membaca, na am yang pad akhirnya ak menurunk kemampua pemakai da menyebabka kesalahan da kan kan an an an lagi. 5. D Derajad Kepen ntingan dalam Desain Tamp m pilan Informa asi Info formasi yang tid dak per dan desain rlu tam mpilan yang kur rang baik k

Gambar 17: Der G rajad Kepentin ngan dalam De esain Tampilan Informasi n Di bawah menu katego kita bisa me h ori elihat ada informasi mengen blog-blog maupun situsnai m situs lain yang tel terhubung atau menggun s lah nakan informas yang terdapa di situs ilmu si at uwebsite.com ini. Ditinjau dari segi kepentin ngannya, rasan hal ini tid perlu dila nya dak akukan, karena ini kuarng berm manfaat, kalau upun ini mema perlu dilak ang kukan, jangan sampai memb buat tampilan informasi ini terk kesan sulit diba aca. Sara : Perbaiki k an kualitas presen ntasi, jangan sa ampai penggun mengalami kesulitan dala membaca, na am yang pad akhirnya ak menurunka kemampuan pengguna da menyebabk kesalahan da kan an n an kan lagi.

Halaman | 17 H

IV. Kesimpulan dan Saran Kesimpulan Desain layar yang baik, antar muka yang interaktif, dan tingkat usabilitas yang tinggi memegang peranan penting terhadap kemajuan sebuat website, pengembangan sistem yang berorientasi pengguna ini merupakan hal yang mutlak dilakukan oleh pengelola situs tersebut untuk memperoleh hasil yang optimal. Dari beberapa hasil dan pembahasan di atas, cukup banyak hal yang masih perlu diperbaiki dan dikembangkan oleh pengelola website tersebut (www.ilmuwebsite.com) untuk meningkatkan kualitas websitenya, terutma mengenai desain antar mukanya dan cara menampilkan fungsi serta informasinya. Suatu desain layar yang baik harus mencerminkan kemampuan, kebutuhan, dan tugas dari para pemakai nya, dikembangkan dalam batasan fisik yang jelas, menggunakan kapabilitas/kemampuan dari pengendalian perangkat lunaknya secara efektif. dan mampu mencapai sasaran dan tujuan bisnis dari sistem yang dirancang tersebut. Saran 1. Perjelas teks dan pilih kata yang tidak tepat dalam menyampikan informasi, karena ketidakjelasan dan ketidaktepatan inilah yang menyebabkan keraguan dan akhirnya memungkinkan para pengguna salah dalam menafsirkannya. 2. Gunakan grafis secara tepat sehingga unsur-unsur penting terbaca dan mudah dimengerti dengan bailk. 3. Pilihlah judul yang representatif. Karena jika tidak, ini akan menciptakan kebingungan dan menghalangi kemampuan dalam melihat hubungan yang ada. 4. Hindari permintaan informasi yang tidak penting atau tidak relevan, karena akan membingungkan pengguna yang pada akhirnya menimbulkan kekeliruan. 5. Buatlah layout yang terstruktur dan terarah untuk meminimalisir terjadinya kesalahan. 6. Tingkatkan kualitas presentasi agar mudah dibaca, ini akan sangat membantu pengguna dalam menyerap informasi yang akan disampaikan dengan cepat ketika pertama kali pengguna menggunakan aplikasi ini.

Halaman | 18

V. Daftar Pustaka Ambler, Scott W. 2001. User Interface Design Tips, Techniques, and Principles. Second Edition. McGraw-Hill Book Co., Singapore. Ambler, Scott W. 2004. Maturing Usability, Quality in Software, Interaction and Volume. Third Edition. Springer Inc. Galitz, Wilbert O. 2007.The Essential Guide to User Interface Design. Third Edition. WileyPublishing. Inc. Quesenbery. 2003. Nielsen. 2003.

Halaman | 19