TUGAS AKHIR MATA KULIAH INTERAKSI MANUSIA DAN KOMPUTER
Interaksi Manusia dan Komputer - Pembahasan Mengenai Antar Muka, Desain Layar, dan Usabilitas dari situs www.ilmuwebsite.com
Oleh : IRSYADINNAS G14053052
DEPARTEMEN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM INSTITUT PERTANIAN BOGOR 2008
Halaman | 0
Kata Pengantar
Segala puji dan syukur penulis panjatkan ke hadirat Allah SWT karena atas segala karunia Nya penulis dapat menyelesaikan tugas t ugas 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 ..........................................................................................................................
5 5 5 5 5 5 6 6 6 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
3. 4. 5.
mereka. Keterlibatan ( Engaging). Derajat atau tingkat gaya interface yang membuat produk nymaan untuk digunakan. toleransi Kesalahan ( Error tolerant ). Seberapa baik disain mencegah kesalahan dan emmebantu memeperbaiki kesalahan ini. 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 diperti mbangkan. 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. 2. 3. 4.
Mencerminkan kemampuan, kebutuhan, dan tugas dari para pemakai nya. Dikembangkan dalam batasan fisik yang menggunakan perangkat keras dengan cara ditampilkan (berupa layout). Menggunakan kapabilitas/kemampuan dari pengendalian perangkat lunaknya secara efektif. 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 dan Pembahasan
Untuk m mudahkan dalam pembaha an, pada tampilan halaman utama website ini kita bagi me jadi tiga bagi n yaitu, bagian kiri, bagaia tengah dan b gian kanan, perhatikan gam bar di bawah ini. eader
Bagian Kir i
Ba ian Tengah
Bagian K nan
Gambar 0 : emberian ba ian untuk me udahkan pem ahasan
Halaman 7
Bagian Kiri
1.
avigasi yang Membingungkan dan Tidak Efisien
Home dan News Website yan diletakkan sekelompok dengan menu-menu kategori
Gambar 1: avigasi yang Membingung an dan Tidak Efisien
Ada dua Menu utama yaitu Home d n News Website yang dile akkan sekelo pok dengan me u-menu kat gori, hal i i menunjuk kan ketidakr apian rancangan visual, navigasinya me bingungkan, sehingga men ebabkan kemudahan pembacaan menjadi enurun. Gra is yang tidak tep t sehingga un ur-unsur penting tersembun i Sar n: membagi informasi-informasi tersebu menjadi unit yang logis, bermakna, dan masuk akal,
pengatur n unsur-uns r layar yang tepat. sehin ga dalam memyelesaikan masalah ini sebaikny dua menu u ama tersebut kita pisahkan dari menu-menu kategori, ungkin akan lebih bai jika dua me u utama terse but kita letakk an di bagian atas (tepat di b wah header) dan disusun secara horizontal. 2.
enu-menu Tidak Tersusu Rapi
Kita lihat pada kolom sebelah kiri ebsite ini, pada kolom kiri tersebut ada beberapa list me u kategori, nampak jelas sekali menu-me u tersebut tid ak tersusun d ngan baik, bayangkan jika me u-menu kate ori tersebut ukup banyak , hal ini aka menyulitkan pengguna dalam mencari kat gori yang memang benar- benar diinginkannya karena menu terse but tidak ter usun secara alp abetic. Sar n: mengorga isir derajat k terhubungan antar menu-m nu tersebut, erta menyajik annya sesuai
prioritas informasi, sehingga pada kasus ini sebaik ya menu-menu kategori ter ebut disusun secara berurutan men rut alphabet awal dari tiap kata pertama pada menu-menunya. Sehingga informasi ya g ingin disam aikan bisa de gan mudah dimengerti.
Halaman 8
Menu-me u kategori yang tida tersusun rapi (beru utan)
Me yebabkan kes litan pe bacaan
Ga bar 2: Menu-menu Tidak T rsusun Rapi. 3. I konsistensi
esain Link
Menu Kate ori
Ban ingka
Link
bedakan link engan “bukan link ” Link: -dicetak biru tau -digarisbawahi
Gambar 3: In onsistensi De ain Link.
Apabila ita lihat lagi pada kolom kir i website ini, ada sub-menu ari tiap-tiap k ategori menu di sana, awalnya saya pikir ini hanya sekeda informasi m ngenai isi atau content dar website ini, na un setelah dicoba (diarahka pointer ke s b-menu terse ut) ternyata itu merupakan link. Jika kita ban ingkan dengan gambar yan Sar n: sebaiknya submenu-sub enu tersebut dibuat bewar a biru atau digarisbawahi, atau mungkin dicetak t bal , agar ini s suai dengan f ungsinya seba ai link sehingga pengguna langsung tahu
kalau su bmenu-subme u tersebut terlebih d ahulu.
emang berfu gsi sebagai link, tanpa ha us mencoba
Halaman 9
Ba ian Tengah 1.
ontrol yang
urang Leng ap
Pada log website ini tidak terdapat link ke home atau ke halaman utama, sehin ga pengguna aka merasa kebi gungan apabila suatu saat tersesat di saat rowsing.
tidak ter apat link ke hala an utama
G mbar 4: Kont rol yang Kura g Lengkap Sar n : Sebaikny pada logo
ebsite ditambahkan link ke halaman uta a, ini untuk emudahkan user ke bali ke hala an utama pa a saat user erasa kebing ngan ketika rowsing dan tidak tah sekarang ada di mana.
2. I konsistensi enggunaan Bahasa
B hasa Indonesia
Bahasa Inggris
Pilih salah sat saja
Ga bar 5: Inkonsistensi Pengg naan Bahasa
Tidak konsisten dalam penulisan, ji a kita lihat p da informasi waktu di atas, website ini me ggunakan dua bahasa sekali us, Bahasa Indonesia dan Bahasa Inggris. Seharusnya pilih salah satu bahasa saja, misalnya menggun kan Bahasa I donesia saja. Penggabunga seperti ini mungkin boleh dilakukan, akan tetapi pada kon isi tertentu, isalnya pada saat tidak ada akna kata ya g sesuai atau pad anan kata yang cocok dala Bahasa Ind onesianya, atau mungkin jika diartikan alam bahasa Ind nesia ini aka menimbulka kerancuan yang akhirnya i formasi yang ingin disampaikan menjadi tidak tepat, barulah pencampura bahasa (pen gunaan bahasa inggris dan ahasa Indone ia sekaligus) dip rbolehkan, m salkan untuk kata joystick , ini merupakan kata yang idak bisa diartikan secara har iah ke dalam Bahasa Indonesia, sehing a penggunaa istilah terse but dalam Bahasa Inggris dip rbolehkan. Dalam kasus ini Wednesday erupakan kata yang memili i padanan kat yang sesuai den an Bahasa I donesia, yaitu Rabu. Sehingga kurang bagus jika kita gunakan edua bahasa sek ligus Sar n : Jika kita pandang mas lah ini dari s si tujuannya, kita ketahui bahwa pemberian informasi waktu in mungkin diperuntukkan b gi user yang berada di luar Indonesia, ol h karena itu sebaikny informasi aktu tersebu kita tulis d alam Bahasa Inggris, ini emudahkan penggun yang berada di luar Indonesia, sehingga ata “Tanggal kita ubah menjadi “Date”, dan kata “Negara” kita ubah menjadi kata “Country . 3. I konsistensi
esain Link Penekanan Typeface dan grafik yang tidak tepat, te lalu banyak i formasi yang tidak dipilah
sehingga menyeba bkan kemuda an pembacaa menjadi rend ah.
Halaman 10
ukan Link Link
Kedua font sama
Gambar 6: In onsistensi De ain Link
Pada kol m bagian ten ah website in , kita bisa melihat beberapa artikel tutorial, pada artikel ters but dicantumkan nama orang (dalam hal ini administr ator) yang mem- posting artikel tersebut, jika kita perhatik n lebih lanjut, kita bisa melihat nama ad in tersebut d icetak biru, n mun setelah dic ba (diarahkan pointer ke n ma tersebut) ernyata itu b kan link, dan kita lihat lagi pada bagian pen elasan singka nya, ada tulisan yang men gunakan font yang sama d ngan font ya g digunakan unt k menuliskan nama admin ang mem- po ting tadi (ukuran, warna, dan typeface-ny sama) yang ternyata merupak n link, sehingga tidak ada k etentuan yang jelas dalam embedakan a tara link dan buk an link, ini enunjukkan etidakkonsist nan desain. al ini akan erdampak ba i pengguna, kar na pengguna kan merasa “t erbodohi”. Sar n: sebagaimana yang kita etahui bahwa pengguna pa ti mengingin an tampilan ang tersusun bersih dan rapi, apa y ng telihat m dah dimenge ti, informasi berada tepat i tempatnya, keterhub ngan yang jelas (option , j dul, data, da yang lainnya), dan pengg naan bahasa yang sed rhana, oleh k rena itu seba ai depelover k ita harus mem perhatikan hal-hal tersebut, jangan s mpai membu t pengguna engalami kes litan. Jadi pada kasus di atas sebaiknya kita me berikan batas n yang jelas antara penggu aan font seba ai link dan bukan link , dan juga pen ederhanaan tampilan agar udah dibaca. 4. I konsistensi
esain Penuli an (dalam penggunaan fon t)
I formasi yang sama d itulis dengan cara yang berbeda
ambar 7: Ink nsistensi Des in Penulisan (dalam pengg naan font)
Tidak konsisten dalam penulisan ata penggunaan jenis font nya, no 1 dan 2 d itulis dengan cetak tebal (buka juga sebagai link, hanya in ormasi biasa), sedangkan no 3, 4 dan sete usnya ditulis tan a cetak tebal, al ini melanggar Konsep R gularity dala mendesain l yar pada sebuah website. Sar n: sebaiknya menggunakan elemen ya g serupa dalam ukuran, entuk, warna, jarak, dan membuat regularity ( eteraturan) ang jelas, de gan menera kan ruang d n pelurusan
horizontal dan vertika yang konsisten baik dari segi penemp tannya maupun dari segi
Halaman 11
penulisa nya, atau m ngkin denga membuat nity menggu akan keseru aan ukuran, bentuk, arna untuk in ormasi yang erkaitan. 5.
ampilan tida tersusun ra i
Dalam p nulisan nama tidak ada uru an penulisannya, atau deng n kata lain ti ak diurutkan ber asarkan alpha bet awal dari ama-nama te sebut sehingg sulit mencari posisi nama ita (tentunya seb gai user ) ap bila kita sud ah terdaftar, atau mungki kita akan engalami ke ulitan untuk me getahui apakah kita meman sudah benar2 terdaftar sebagai anggota kelompok website ini.
Penyusunan nama tida urut
ambar 8: Ta pilan tidak te susun rapi Sar n : Jika me ang ingin m lakukan pen elompokan,
aka lakukanl h pengelompokan dengan judul ya g berarti untu tiap pengelo pokannya, ini memudahka pengguna m yerap secara optimal informasi terse but, dan berik an urutan yan jelas dalam pengelompok n itu, hal ini untuk menghindari pen runan tingkat kemudahan embaca web t rsebut.
6. rouping tanpa dasar peng lompokan yang jelas
Dikelomp kkan berdasarkan apa?
Gambar 9:
rouping tanpa dasar pengelompokan yan jelas.
Tidak ad a pola dan etentuan yan jelas meng nai pembagian kelompok dari anggota we site ini. Ini juga akan mem bingunkan pe gguna, jika p ngguna terse ut memang t lah terdaftar seb gai masyarak t (anggota) w bsite ini. Pen guna akan ke ingungan di elompok man ia terdaftar. Sar n : Secara u um grouping digunakan u tuk meyajika pengelompo an fungsional dari elemen
yang saling berhubungan. Namu dalam at ran dan ba as yang jelas. Apabila pengelo pokan terseb t dilakukan tanpa aturan, maka akan meyebabkan infor asi tersebut menjadi ulit dibaca (dimengerti).
Halaman 12
7. I konsistensi
esain Link
Bukan
Link ambar 10: Inkonsistensi Desain Link.
Ada dua hal yang ko tras di sini. ada gambar sebelah kiri kita lihat bahw ada tulisan ber arna biru da di-bold , tern ata bukan link, hanya seba ai judul dari alaman, lalu pada gambar seb lah kanan kit juga bisa melihat ada tulis n dengan font yang sama d ngan font ya g digunakan pad a tulisan di gambar sebelah kiri, yaitu ber arna biru da di- bold , aka tetapi itu me upakan link, hal ini jelas kontradiksi, ini juga merupakan salah satu bentu ketidakkonsistenan. Sar n: Seharusny untuk fungsi yang berbed , digunakan entuk font yang berbeda j ga, misalnya jika hanya ingin mena pilkan infor asi sebagai judul sebaiknya cukup di ceta tebal (bold ) dan ber arna hitam, atau mungki dengan merubah ukuran typeface -nya (ukurannya diperbesar), sedangkan untuk menuliskan kata atau prase seba ai link, digu akan tulisan berwarna biru, atau dengan digarisba ahi, agar terlihat jelas perbedaaanya. 8.
ampilan yan tidak tersus n dan kuran rapi
Berfungsi sebagai link Tidak ad a urutan atau keteratur an yang jelas
Gambar 11: Tampilan yang tidak tersu un dan kuran rapi.
Pada bagian Category utorial Corel raw, terdapat 6 point yang f ontnya regula (tanpa cetak teb l, tidak berwa na biru, dan tidak digarisb wahi), pada ulanya saya engira ini ha ya informasi biasa yang disusun dalam bent k daftar atau ist, namun se elah mouse diarahkan kesalah-satu point ters but, barulah d iketahui ternyata point-poin tersebut meru pakan link. Pad a gambar di a as kita juga bisa melihat tid ak adanya urutan yang jelas dalam list ter sebut, hal ini terlihat bahwa point-point tersebut tidak diuru kan menurut alphabet awal ari kata yang paling depan pad a judulnya. B sa kita bayangkan jika poi t-point tersebut cukup banyak jumlahny , maka user aka mengalami esulitan dala melakukan encarian arti el yang diinginkan. Ini mer upakan salah sat bentuk desai yang kurang baik karena ak an menurunkan tingkat kem dahan dalam embaca. Sar n : harus ko sisten dalam esain, gunakanlah aturan y ng umum, se erti pemberian warna biru atau gari bawah pada tulisan yang berfungsi seva gai link , buatlah urutan yang jelas untuk
poin-poi dari suatu informasi, agar tidak membingungkan pengguna, dan dalam m mbacanya.
emudahkan
Halaman 13
9.
etidakkonsis enan Desain Penulisan da Ketidakjela an Informasi
Info masi yang tida jelas
Tidak teruru Tidak ko sisten
Gambar 12: Ketidakk onsistenan Desain Penulisa dan Ketidakj lasan Inform si
Di pojok kiri atas kita lihat ada tulisa “ Email send ”, ini merupakan bentuk i formasi atau ket rangan yang tidak jelas, bahkan ini mungkin tidak l yak disebut informasi, tulisan tersebut me ggunakan Bahasa Inggris, ini menunju kan ketidakk onsistenan Bahasa, kemudian dari segi keg naanpun ini urang bermanfaat, karena kata-kata terseb t sama sekali tidak berarti ( eaningless), kar na jika kita t rjemahkan kedalam bahasa Indonesia artinya “Email m ngirim”, (bu an mengirim Em il, atau Email terkirim), t rdapat juga eterangan ya g kurang jelas dan mung in ini tidak dip rlukan, serta aksud penulisannyapun su it dipahami, i i bisa kita li at pada sisi s belah kanan dari kotak form “E-MAIL anda” dan “No.Hp”, disana terd pat peringata “respon 2 d n respon 1”, jika kita perhatik n lebih lanjut dari segi pel takannya ini tidak memenuhi aturan pen lisan karena tidak terurut (resp n 2, baru respon 1), dan dar i segi kegunaa yapun ini juga kurang jelas, Penggun n tulisan ya g tidak konsisten, Point “ ama” ditulis menggunaka huruf kecil den an huruf besar pada awal k atanya, akan t tapi pada poi t “E-MAIL nda”, kata “E-MAIL” nya, ditulis dengan huruf besar semua, dan pada point “ISI E- AIL” lebih fatal lagi, se ua hurufnya ditulis dengan hur f besar, ini merupakan suat bentuk ketid kkonsistenan dalam penulis n. Sar n:Menampilk an informasi harus sesuai engan fungsi dan tempatnya, gunakan k ta-kata yang
tepat, ag r tidak terjad i kesalahpaha an bagi pen guna, dan ja gan menamb hkan hal-hal yang tidak perlu, karena hal tersebut hanya akan m mbuat bingu g pengguna. da beberapa hal yang mungkin bisa diperbaiki ag r desain terse ut bisa lebih interaktif, dia taranya ialah menandai di sebelah k anan kotak form tersebut d ngan tanda * , lalu pada bagian bawah form tersebut tuliskan arti tanda tersebut. Untuk l bih jelasnya erhatikan ga bar berikut, serta gunakanlah penul san kata yang lebih konsisten, agar desain tersebut terli at lebih rapi. Berikut perbaikan desain yang mung in bisa dilaku an.
Nama E-mail Ho.Hp Isi e-mail
Gambar 13: S aran Penyajian Desain
a ib diisi
Halaman 14
Bagian Kanan 1. P age scroling yang tidak efi ien
Pada we bsite ini kita juga bisa melihat ada scr ll horizontal dan scroll v rtikal, scroll vertikalnya cuku banyak, lebih kurang 10-12 kali, ini sungguh tidak efisien jika ibandingkan den an rata-rata scrolling vertikal maksimu sekitar 6-8 kali. Hal ini terjadi karen website ini me ampilkan ba yak tutorial pada satu hala an, yang not bene tutorial tersebut pun t dak tersusun sec ra teratur, in menyebabkan ketidakrapi n rancangan visual dan k mudahan p mbacaanpun me jadi rendah. al lain yang juga tidak d isukai oleh p ngguna pada umumnya, y itu scrolling horizontal, bagi beberapa peng una, ini sung uh “menyeba kan”, untuk emperoleh informasi pada bag an sisi (kana dan kiri) la ar pengguna harus melaku an scrolling horizontal ter ebih dahulu. seb gaimana yan kita ketahui bahwa pengg na pasti men inginkan ta pilan yang te susun bersih dan rapi, apa yang telihat muda dimengerti, d an informasi berada tepat di empatnya. Sar n : Sebaiknya scrolling hor zontal itu dihindari, mungkin ini tidak menyulitkan pen guna karena
pemakai nyapun cuku mudah, aka tetapi dari s gi estetika ini akan memb at pengguna merasa k rang nyaman pada saat bro sing. Penggun an scrolling erlebihan sebaiknya jangan sampai terjad i, agar hal ini tidak terjadi sebaikny kita meng ptimalkan jumlah elemen pada layar, dalam batasan kejelasan, maksudn a informasi-informasi yan ditampilkan pada layar se aiknya ditam ilkan dalam batasan ang jelas, ap bila dalam satu halaman dirasakan tidak cukup untuk enampilkan semua i formasi yang saling berkaitan, maka kita bisa mem aginya menj di beberapa halaman, untuk memi imumkan risi o terjadinya scrolling vertikal yang berl bihan akibat semua in ormasi yang saling berkaita diletakkan semuanya dala satu halaman. 2.
esain yang k rang rapi da tidak konsi ten
Simbol tidak epat Bahasa tidak konsisten
Gambar 14: Desain yang kurang rapi dan tidak konsisten
Pada poj k kanan bagian atas (di ba ah header) kita lihat ada k lom informasi yang diberi na a “Statistik Situs”, isinya b rupa informa i mengenai situs tersebut, antara lain iala Visitor dan Pa es, dan masing-masing me ggunakan si bol dengan g mbar orang ang diberi w rna berbeda. Jika kita perhatikan lebih lanjut, ini merupaka bentuk ketid kkonsintenan dalam pengg naan bahasa, ada pencampuran bahasa ini ak n membuat d sain layarnya menjadi buruk, dan mungk n di lain sisi ini kan sulit di engerti oleh eberapa peng una. Kembal lagi kita tek nkan bahwa encampuran bahasa itu bisa di unakan jika sudah tidak ad lagi kata yang cocok atau epadan diantara keduanya, dan jika dipaksak an untuk diar tikan ke sala satu bahasa, ini akan me bingungkan, an akhirnya informasi yang ingin disampaik an tidak opti al. Pada bagi n ini kita juga bisa meliha penggunaan sim bol, simbol orang berwarn biru digunakan untuk mengartikan ju lah pengunj ng situs ini, sed ngkan simbol orang berwarna kuning digunakan untuk mengarti an jumlah h laman yang terd apat pada situs ini. Ini adal h bentuk des in yang kura g baik, karena penggunaan simbol yang kur ng tepat untu menjelaskan informasi tert ntu. Sar n : Gunakan bahasa yang jelas dan mu ah dimengert , sebagaiman yang kita k tahui bahwa
penggun website ini adalah orang Indonesia, a a baiknya ji a bahasa ya g digunakan konsiste dalam bahas Indonesia, s atu desain di buat haruslah sesuai denga kriteria dan karakteri tik pengguna ya. Kemudian, gunakanlah elemen yang sesuai dalam menjelaskan suatu fu gsi tertentu, penggunaan si bol ini cuku bagus, akan tetapi harus sesuai dengan
Halaman 15
informas yang dijelas annya, misal an untuk mej laskan jumla pengunjung kita gunakan simbol engan gambar orang, dan bedakan de gan simbol yang menjelaskan jumlah halaman, misalkan ga bar halaman web. Ini dimaksudkan aga informasi-in ormasi yang terkandu g pada website tersebut bisa dengan m dah terbaca, elemen pada layar mudah diidentifikasi tanpa har s membaca teks yang menjelaskan tentan fungsinya. 3.
etidakjelasa dalam peng unaan fungsi sebagai pem nuhan kebutuhan penggu a.
Tidak onlin
K rang jelas
Online kah?
Gambar 15: Ketidakjelasan dalam p nggunaan fungsi s bagai pemenuhan kebutuha pengguna
Pada bagian kolom paling kanan we site ini terdapat informasi berupa status c ating online dari para admin y ng mengelola website ini. ari segi fungsionalitasnya i i jelas sangat berguna, jika ada pertanyaan at u saran, pengguna bisa lan sung berkom nikasi dengan admin yang sedang online ters but. Akan t tapi kenyata nnya tidak eperti ini, p da mulanya saya tidak engerti apa ma sudnya dua nama yang aling bawah, karena tida ada statusn a sama sek li, ini jelas me bingungkan pengguna, ap kah dua na a terakhir te sebut sedang online atau tidak, ketika dia ahkan pointer ke nama ter ebut ternyta tidak ada link sama sekali, kemudian setelah sering ber omunikasi de gan adminnya via email, b rulah menger i ternyata itu menunjukkan bahwa status ad in dalam kea aan online, namun kurang ya di sini, ki a tidak bisa l ngsung terhu bung dengan ad in karena tidak ada link ke nama tersebut, untuk bisa b rkomunikasi engan admin yang sedang online itu kita ha us membuka plikasi chati g terlebih dahulu, sungguh tidak efektif d an memakan wa tu pengguna. Sar n : Berikan informasi yan jelas, agar pengguna tidak erasa kebigungan, desain avigasi yang baik, inf rmasi yang logis, serta pen ajian menuru prioritas informasi merupa an indikator kebaikan desain layar. Hal ini penting sekali untu diperhatikan sebagai pengelola website. Ketidakt raturan, ketid akefisienan, akan menyeba bkan informa i yang ingin disampaikan sulit diterima pengguna, ini membu t pengguna erasa “takut”, atau bahkan “terancam”, dalam artian menjadi bingung dan tid k mengerti. 4.
ampilan tida tersusun ra i dan fungsi erta control ang membin ungkan
Link atau bukan ?
Link atau bukan ?
Bu an lin Te nyata lin
Gambar 16: Tampila tidak tersusu rapi dan fun si serta Kontrol yang membin ungkan
Pad a bagian sebelah kanan kita juga bisa melihat menu shor cut, menu ini berisi tutorial tutorial yang terd apat dalam situs ini, tutorial tersebut terb gi menjadi be berapa kategori, namun jik kita lihat di sini, kategori terse but tidak teru ut, dan penulisannya pun ti ak rapi, ini menyulitkan pe gguna untuk
Halaman 16
me bacanya. Tia -tiap kategori terdapat list atau daftar tutorial, daftar ini juga tidak ter usun dengan rapi, pada awaln a saya meng ra ini hanya list biasa yang berisikan i formasi men enai isi dari we site ini,namu setelah diteliti lebih lanjut, mengarhka pointer ke salah satu poi t dari daftar ters but, barulah d iketahui itu berfungsi sebag i link. Sar n : Hindari Layout yang tidak terstruk ur dan tidak terarah yang memungkink n terjadinya
kesalaha , buatlah ka egori tersebut menjadi poin-point yang terstruktur engan jelas. Perbaiki kualitas prese tasi, jangan sampai penggu a mengalami kesulitan dalam membaca, yang pa a akhirnya a an menurunk an kemampuan pemakai dan menyebabk n kesalahan lagi. 5.
erajad Kepe tingan dala Desain Tam ilan Inform si
Inf rmasi yang ti ak per lu dan desain ta pilan yang ku ang baik
Gambar 17: Derajad Kepenti gan dalam D sain Tampila Informasi
Di bawa menu kategori kita bisa m lihat ada informasi mengenai blog-blog aupun situssitus lain yang telah terhubung atau menggunakan informasi yang terdap t di situs ilm website.com ini. Ditinjau dari segi kepenti gannya, rasa ya hal ini ti ak perlu dil kukan, karena ini kuarng ber anfaat, kalau pun ini memang perlu dila ukan, jangan sampai mem uat tampilan informasi ini terk esan sulit dibaca. Sar n : Perbaiki ualitas prese tasi, jangan s mpai penggu a mengalami kesulitan dalam membaca, yang pad a akhirnya a an menurunk n kemampua pengguna d n menyebabk an 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 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.
2. 3. 4. 5. 6.
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. Gunakan grafis secara tepat sehingga unsur-unsur penting terbaca dan mudah dimengerti dengan bailk. Pilihlah judul yang representatif. Karena jika tidak, ini akan menciptakan kebingungan dan menghalangi kemampuan dalam melihat hubungan yang ada. Hindari permintaan informasi yang tidak penting atau tidak relevan, karena akan membingungkan pengguna yang pada akhirnya menimbulkan kekeliruan. Buatlah layout yang terstruktur dan terarah untuk meminimalisir t erjadinya kesalahan. 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
