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: y Standardisasi: keseragaman sifat-sifat antarmuka pemakai pada aplikasi yang berbeda. y Integrasi: keterpaduan antara paket aplikasi dan software tools. y Konsistensi: keseragaman dalam suatu program aplikasi. y 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 dan Pembahasan Untuk meemudahkan daalam pembahassan, pada tamppilan halaman uutama websitee ini kita bagi mennjadi tiga bagiaan yaitu, bagiaan kiri, bagaiann tengah dan baagian kanan, perhatikan gam mbar di bawah ini. H Header
Bagian Kirri
Baggian Tengah
Bagian Kaanan
Gambar 0 : Pemberian P baggian untuk mem mudahkan pembbahasan
Halaman | 7
B Bagian Kiri
1. Navigasi N yang Membingungkan dan Tidak Efisien
Home dan News N Website yang g diletakkan sekelompok dengan menu-menu kategori
Gambar 1: Navigasi N yang Membingungkkan dan Tidak E Efisien Ada dua Menu utama yaitu y Home daan News Web bsite yang dilettakkan sekelom mpok dengan mennu-menu kateegori, hal inni menunjukkkan ketidakrapian rancanngan visual, navigasinya mem mbingungkan, sehingga meny yebabkan kemuudahan pembaacaan menjadi m menurun. Graffis yang tidak tepaat sehingga unssur-unsur pentiing tersembunyyi Saraan: membagi informasi-infoormasi tersebutt menjadi unitt yang logis, bbermakna, dan masuk akal, pengaturaan unsur-unsuur layar yang tepat. sehinggga dalam memyelesaikan masalah ini sebaiknyaa dua menu uttama tersebut kkita pisahkan dari menu-mennu kategori, mungkin m akan lebih baikk jika dua men nu utama tersebbut kita letakk kan di bagian aatas (tepat di baawah header) dan disussun secara horizontal. 2. Menu-menu M Tiidak Tersusun n Rapi Kita lihat pada kolom sebelah kiri w website ini, paada kolom kiri tersebut ada beberapa list mennu kategori, naampak jelas sekkali menu-mennu tersebut tid dak tersusun deengan baik, baayangkan jika mennu-menu kateg gori tersebut cukup c banyak,, hal ini akan n menyulitkan pengguna daalam mencari kateegori yang memang benar--benar diinginnkannya karenna menu terseebut tidak terssusun secara alphhabetic. Saraan: mengorgannisir derajat keeterhubungan antar menu-meenu tersebut, sserta menyajikkannya sesuai prioritas informasi, sehhingga pada kasus ini sebaikn nya menu-mennu kategori terssebut disusun secara berurutan menu urut alphabet awal dari tiiap kata pertaama pada meenu-menunya. Sehinggaa informasi yanng ingin disamppaikan bisa denngan mudah diimengerti.
Halaman | 8
Menu-mennu kategori yang tidak k tersusun rapi (berurrutan)
Mennyebabkan kesuulitan pem mbacaan
Gam mbar 2: Menu--menu Tidak Teersusun Rapi. 3. In nkonsistensi Desain D Link Menu Kategori
Banddingka
Link
bedakan link dengan d “bukan link” Link: -dicetak biru atau a -digarisbawahhi
Gambar 3: Inkkonsistensi Dessain Link. k lihat lagi pada p kolom kirri website ini, ada a sub-menu ddari tiap-tiap kategori k menu Apabila kita di sana, awalnya saya pikir ini hanya sekedarr informasi meengenai isi ataau content darii website ini, nam mun setelah diccoba (diarahkann pointer ke suub-menu terseb but) ternyata ituu merupakan link. l Jika kita band dingkan dengaan gambar yangg Saraan: sebaiknya submenu-subm menu tersebut dibuat bewarnna biru atau digarisbawahi, atau a mungkin fu sebaggai link sehinggga pengguna langsung tahu dicetak teebal, agar ini seesuai dengan fungsinya kalau sub bmenu-submennu tersebut m memang berfunngsi sebagai link, tanpa harrus mencoba terlebih dahulu. d
Halaman | 9
Baggian Tengah 1. Kontrol K yang Kurang K Lengk kap Pada logo o website ini tiidak terdapat liink ke home attau ke halamann utama, sehinggga pengguna akann merasa kebinngungan apabilla suatu saat tersesat di saat browsing. b
tidak terddapat link ke halam man utama
Ga ambar 4: Konttrol yang Kuran ng Lengkap Saraan : Sebaiknyaa pada logo website w ditambahkan link ke halaman utam ma, ini untuk memudahkan m user kem mbali ke halam man utama padda saat user merasa m kebinguungan ketika browsing b dan tidak tahu u sekarang adaa di mana. 2. In nkonsistensi Penggunaan P Bahasa B
Baahasa Inndonesia
Bahasa Inggris
Pilih salah satuu saja
Gam mbar 5: Inkonsistensi Penggu unaan Bahasa Tidak koonsisten dalam m penulisan, jikka kita lihat paada informasi waktu di atass, website ini mennggunakan duaa bahasa sekaliggus, Bahasa Inndonesia dan Bahasa Inggris. Seharusnya piilih salah satu bahaasa saja, misallnya menggunaakan Bahasa Inndonesia saja. Penggabungann seperti ini mu ungkin boleh dilakkukan, akan teetapi pada konddisi tertentu, m misalnya pada saat tidak ada m makna kata yan ng sesuai atau padaanan kata yanng cocok dalam m Bahasa Inddonesianya, ataau mungkin jikka diartikan dalam d bahasa Indo onesia ini akann menimbulkan n kerancuan yaang akhirnya in nformasi yang ingin disampaaikan menjadi tidakk tepat, barulaah pencampuran n bahasa (pengggunaan bahasa inggris dan bbahasa Indonessia sekaligus) dipeerbolehkan, miisalkan untuk kata joystick, ini merupakaan kata yang tidak t bisa diarrtikan secara harffiah ke dalam m Bahasa Indoonesia, sehinggga penggunaan n istilah tersebbut dalam Baahasa Inggris dipeerbolehkan. Daalam kasus ini Wednesday merupakan m kataa yang memilikki padanan kataa yang sesuai deng gan Bahasa Inndonesia, yaittu Rabu. Sehiingga kurang bagus jika kiita gunakan kedua k bahasa sekaaligus Saraan : Jika kita pandang masaalah ini dari siisi tujuannya, kita ketahui bbahwa pemberiian informasi waktu inii mungkin dipperuntukkan baagi user yang berada b di luar Indonesia, oleeh karena itu sebaiknyaa informasi waktu w tersebutt kita tulis dalam Bahasa Inggris, ini memudahkan m penggunaa yang berada di luar Indonesia, sehingga kata k “Tanggal”” kita ubah men njadi “Date”, dan kata “Negara” kita ubah menjadi kkata “Country””.
3. In nkonsistensi Desain D Link Penekanaan Typeface daan grafik yang tidak tepat, terrlalu banyak innformasi yang tidak dipilah sehiingga menyebaabkan kemudahhan pembacaann menjadi renddah.
Halaman H | 10
B Bukan Link Link
Kedua font sama
Gambar 6: Inkkonsistensi Dessain Link gah website inii, kita bisa mellihat beberapa artikel tutoriall, pada artikel Pada koloom bagian teng mkan nama oraang (dalam hall ini administrrator) yang meem-posting artiikel tersebut, terseebut dicantum jika kita perhatikaan lebih lanjutt, kita bisa melihat nama adm min tersebut dicetak d biru, naamun setelah dicooba (diarahkann pointer ke naama tersebut) tternyata itu buukan link, dan kita lihat lagi pada bagian penjjelasan singkattnya, ada tulissan yang mengggunakan font yang sama deengan font yanng digunakan untuuk menuliskan nama admin yang y mem-possting tadi (ukuuran, warna, daan typeface-nyaa sama) yang tern nyata merupakaan link, sehingga tidak ada kketentuan yang jelas dalam membedakan m anntara link dan bukan link, ini menunjukkan m k ketidakkonsiste enan desain. Hal H ini akan berdampak b baggi pengguna, a merasa “tterbodohi”. kareena pengguna akan Saraan: sebagaimaana yang kita ketahui k bahwa pengguna passti menginginkkan tampilan yang y tersusun bersih daan rapi, apa yaang telihat muudah dimengerrti, informasi bberada tepat di d tempatnya, keterhubuungan yang jeelas (option, juudul, data, dann yang lainnyaa), dan penggu unaan bahasa yang sedeerhana, oleh kaarena itu sebaggai depelover kita k harus mem mperhatikan hall-hal tersebut, jangan saampai membuaat pengguna m mengalami kesu ulitan. Jadi paada kasus di attas sebaiknya kita mem mberikan batasaan yang jelas aantara penggun naan font sebaggai link dan bu ukan link, dan juga penyyederhanaan taampilan agar m mudah dibaca. 4. In nkonsistensi Desain D Penulissan (dalam penggunaan fon nt) Innformasi yang sama diitulis dengan cara c yang berbeda
G Gambar 7: Inko onsistensi Desaain Penulisan (dalam ( pengguunaan font) Tidak konsisten dalam penulisan atauu penggunaan jenis j font nya, no 1 dan 2 ditulis d dengan cetaak tebal (bukann juga sebagai link, hanya infformasi biasa),, sedangkan noo 3, 4 dan seterrusnya ditulis tanppa cetak tebal, hal h ini melangg ggar Konsep Reegularity dalam m mendesain laayar pada sebu uah website. Saraan: sebaiknyaa menggunakaan elemen yanng serupa dallam ukuran, bentuk, b warnaa, jarak, dan membuatt regularity (kketeraturan) yyang jelas, denngan menerappkan ruang daan pelurusan horizontaal dan vertikall yang konsissten baik dari segi penempaatannya maup pun dari segi
Halaman H | 11
penulisannnya, atau mu ungkin dengann membuat unity u menggunnakan keserup paan ukuran, bentuk, warna w untuk infformasi yang berkaitan. b 5. Tampilan T tidak k tersusun rap pi Dalam peenulisan nama tidak ada uruttan penulisann nya, atau dengaan kata lain tiddak diurutkan berddasarkan alphaabet awal dari nama-nama n terrsebut sehinggaa sulit mencarii posisi nama kita k (tentunya sebaagai user) apaabila kita sud dah terdaftar, atau mungkinn kita akan mengalami m kessulitan untuk menngetahui apakaah kita memang g sudah benar22 terdaftar sebaagai anggota keelompok websiite ini.
Penyusunaan nama tidakk urut
G Gambar 8: Tam mpilan tidak terrsusun rapi mang ingin meelakukan penggelompokan, maka m lakukanlaah pengelompokan dengan Saraan : Jika mem judul yan ng berarti untukk tiap pengelom mpokannya, inni memudahkann pengguna meeyerap secara optimal informasi i terseebut, dan berikkan urutan yang jelas dalam pengelompokaan itu, hal ini untuk meenghindari penu urunan tingkatt kemudahan membaca m web teersebut. 6. Grouping G tanpa dasar pengeelompokan yan ng jelas
Dikelompo okkan berdasarkaan apa?
Gambar 9: Grouping G tanppa dasar pengeelompokan yangg jelas. Tidak adda pola dan ketentuan k yangg jelas mengeenai pembagiaan kelompok dari anggota bingunkan penngguna, jika peengguna tersebbut memang teelah terdaftar webbsite ini. Ini juuga akan memb sebaagai masyarakaat (anggota) weebsite ini. Penggguna akan kebbingungan di kelompok k manaa ia terdaftar. Saraan : Secara um mum grouping digunakan unntuk meyajikann pengelompokkan fungsionall dari elemen yang saaling berhubuungan. Namunn dalam atuuran dan battas yang jellas. Apabila pengelom mpokan tersebuut dilakukan taanpa aturan, maka m akan meyyebabkan inform masi tersebut menjadi sulit s dibaca (diimengerti).
Halaman H | 12
7. In nkonsistensi Desain D Link
Bukan
Link Gambar G 10: Inkonsistensi Deesain Link.
Ada dua hal yang konntras di sini. P Pada gambar sebelah s kiri kiita lihat bahwaa ada tulisan berw warna biru dann di-bold, ternyyata bukan linkk, hanya sebag gai judul dari halaman, h lalu pada gambar sebeelah kanan kitaa juga bisa meelihat ada tulisaan dengan fontt yang sama deengan font yanng digunakan padaa tulisan di gaambar sebelah kiri, k yaitu berw warna biru dan n di-bold, akann tetapi itu merrupakan link, hal ini i jelas kontraadiksi, ini juga merupakan saalah satu bentuk k ketidakkonsistenan. Saraan: Seharusnyaa untuk fungsii yang berbedaa, digunakan bentuk b font yaang berbeda juuga, misalnya jika hanyya ingin menam mpilkan inform masi sebagai judul sebaiknya cukup di cetakk tebal (bold) dan berw warna hitam, atau mungkinn dengan meerubah ukurann typeface-nyaa (ukurannya diperbesaar), sedangkann untuk menulliskan kata ataau prase sebaggai link, digun nakan tulisan berwarnaa biru, atau denngan digarisbaw wahi, agar terliihat jelas perbeedaaanya. 8. Tampilan T yang g tidak tersusu un dan kurangg rapi Berfungssi sebagai link Tidak ada urutan atau keteraturran yang jelas
Gambar 11 1: Tampilan yaang tidak tersussun dan kurangg rapi. gian Category Tutorial T Corelddraw, terdapat 6 point yang ffontnya regularr (tanpa cetak Pada bag m saya m mengira ini hannya informasi tebaal, tidak berwarrna biru, dan tidak digarisbaawahi), pada mulanya biassa yang disusuun dalam bentuuk daftar atau llist, namun settelah mouse diiarahkan kesalah-satu point terseebut, barulah diketahui d ternyata point-pointt tersebut meruupakan link. Pada gambar di attas kita juga bisa melihat tiddak adanya uruutan yang jelas dalam list terrsebut, hal ini terliihat bahwa poiint-point terseb but tidak diuruttkan menurut alphabet a awal dari d kata yang paling depan padaa judulnya. Biisa kita bayanngkan jika poinnt-point tersebbut cukup banyyak jumlahnyaa, maka user akann mengalami kesulitan k dalam m melakukan pencarian p artikkel yang diingiinkan. Ini merrupakan salah satuu bentuk desainn yang kurang baik b karena akkan menurunkaan tingkat kemuudahan dalam membaca. m nsisten dalam desain, d gunakaanlah aturan yaang umum, sepperti pemberiaan warna biru Saraan : harus kon atau gariss bawah padaa tulisan yang berfungsi sevaagai link, buatllah urutan yang jelas untuk poin-poinn dari suatu innformasi, agarr tidak memb bingungkan penngguna, dan memudahkan m dalam meembacanya.
Halaman H | 13
9. Ketidakkonsist K tenan Desain Penulisan P dan n Ketidakjelassan Informasi
Inforrmasi yang tidakk jelas
Tidak terurutt Tidak konnsisten
Gamba ar 12: Ketidakkkonsistenan Deesain Penulisan n dan Ketidakjeelasan Informaasi Di pojok kiri atas kita lihat ada tulisann “Email send… … ”, ini meruppakan bentuk innformasi atau keteerangan yang tidak jelas, bahkan ini muungkin tidak laayak disebut informasi, tulisan tersebut mennggunakan Baahasa Inggris, ini menunjukkkan ketidakkonsistenan Baahasa, kemudiian dari segi kegu unaanpun ini kurang k bermanfaat, karena kaata-kata tersebuut sama sekali tidak berarti (m meaningless), kareena jika kita teerjemahkan keedalam bahasa Indonesia artinya “Email meengirim”, (bukkan mengirim Ema ail, atau Emaiil terkirim), teerdapat juga keterangan k yan ng kurang jellas dan mungkkin ini tidak dipeerlukan, serta maksud m penuliisannyapun sullit dipahami, inni bisa kita lihhat pada sisi seebelah kanan darii kotak form “E-MAIL andaa” dan “No.Hp”, disana terdaapat peringatann “respon 2 daan respon 1”, jika kita perhatikaan lebih lanjutt dari segi peleetakannya ini tidak memenuuhi aturan penu ulisan karena tidakk terurut (respo on 2, baru resppon 1), dan darri segi kegunaannyapun ini jugga kurang jelas,, Penggunaan tulisan yanng tidak konsiisten, Point “N Nama” ditulis menggunakann huruf kecil deng gan huruf besaar pada awal katanya, k akan teetapi pada poinnt “E-MAIL A Anda”, kata “E-MAIL” nya, ditu ulis dengan huuruf besar sem mua, dan pada point “ISI E-M MAIL” lebih fatal lagi, sem mua hurufnya ditu ulis dengan huru ruf besar, ini merupakan m suatuu bentuk ketidaakkonsistenan dalam penulisaan. Saraan:Menampilkkan informasi harus h sesuai ddengan fungsi dan tempatnyya, gunakan kaata-kata yang tepat, agaar tidak terjaddi kesalahpaham man bagi penggguna, dan janngan menambaahkan hal-hal yang tidaak perlu, karena hal tersebut hhanya akan meembuat bingunng pengguna. Ada A beberapa hal yang mungkin bisa diperbaiki agaar desain terseb but bisa lebih iinteraktif, dianntaranya ialah menandai di sebelah kanan k kotak foorm tersebut deengan tanda * , lalu pada bagian b bawah form terssebut tuliskan arti tanda terssebut. Untuk leebih jelasnya pperhatikan gam mbar berikut, serta gun nakanlah penuliisan kata yangg lebih konsisteen, agar desainn tersebut terlihhat lebih rapi. Berikut perbaikan p desaiin yang mungkkin bisa dilakukkan.
Nama E-mail Ho.Hp Isi e-mail
Gambar 13: SSaran Penyajia an Desain
W Wajib diisi
Halaman H | 14
Bagian Kanan 1. Page P scroling yang y tidak efissien Pada webbsite ini kita juga bisa meelihat ada scrooll horizontal dan scroll veertikal, scroll verttikalnya cukup p banyak, lebiih kurang 10--12 kali, ini sungguh s tidak efisien jika dibandingkan d deng gan rata-rata scrolling vertiikal maksimum m sekitar 6-8 kali. Hal ini terjadi karenaa website ini mennampilkan ban nyak tutorial pada p satu halam man, yang notaabene tutorial tersebut pun tiidak tersusun secaara teratur, inii menyebabkaan ketidakrapiaan rancangan visual dan keemudahan peembacaanpun mennjadi rendah. Hal H lain yang g juga tidak diisukai oleh peengguna pada umumnya, yaaitu scrolling horiizontal, bagi beberapa penggguna, ini sunggguh “menyeballkan”, untuk m memperoleh informasi pada bagiian sisi (kanann dan kiri) lay yar pengguna harus melakuk kan scrolling horizontal terllebih dahulu. sebaagaimana yangg kita ketahui bahwa pengguuna pasti menginginkan tam mpilan yang terrsusun bersih dan rapi, apa yangg telihat mudahh dimengerti, daan informasi berada tepat di ttempatnya. Saraan : Sebaiknyaa scrolling horiizontal itu dihiindari, mungkiin ini tidak meenyulitkan peng gguna karena pemakainnnyapun cukupp mudah, akann tetapi dari seegi estetika inni akan membu uat pengguna merasa ku urang nyaman pada saat brow wsing. Penggunaaan scrolling berlebihan b sebaiknya jangan sampai terjaddi, agar hal ini tidak terjadi sebaiknyaa kita mengooptimalkan jum mlah elemen pada layar, dalam batasaan kejelasan, maksudnyya informasi-iinformasi yangg ditampilkan pada layar sebbaiknya ditamppilkan dalam batasan yang y jelas, apaabila dalam saatu halaman dirasakan tidak cukup untuk menampilkan m semua innformasi yangg saling berkaaitan, maka kiita bisa membbaginya menjaadi beberapa halaman, untuk memin nimumkan risikko terjadinya scrolling vertikkal yang berleebihan akibat s berkaitann diletakkan seemuanya dalam m satu halaman n. semua informasi yang saling 2. Desain D yang ku urang rapi dan n tidak konsissten Simbol tidak tepat t Bahasa tidakk konsisten
Gambar 14: 1 Desain yangg kurang rapi dan tidak konssisten ok kanan bagian atas (di baw wah header) kiita lihat ada koolom informassi yang diberi Pada pojo ma “Statistik Siitus”, isinya beerupa informassi mengenai siitus tersebut, aantara lain ialahh Visitor dan nam Pagges, dan masinng-masing mennggunakan sim mbol dengan gaambar orang yyang diberi waarna berbeda. Jikaa kita perhatikaan lebih lanjut, ini merupakann bentuk ketidaakkonsintenan dalam penggu unaan bahasa, ada pencampuran bahasa ini akaan membuat deesain layarnyaa menjadi buruuk, dan mungkiin di lain sisi ini akan a sulit dim mengerti oleh beberapa b penggguna. Kembalii lagi kita tekaankan bahwa pencampuran p bahaasa itu bisa diggunakan jika sudah s tidak adaa lagi kata yanng cocok atau sepadan s diantaara keduanya, dan jika dipaksakkan untuk diarttikan ke salahh satu bahasa, ini akan mem mbingungkan, dan d akhirnya infoormasi yang in ngin disampaikkan tidak optim mal. Pada bagiaan ini kita jugga bisa melihatt penggunaan simb bol, simbol orang berwarnaa biru digunakkan untuk meengartikan jum mlah pengunjuung situs ini, sedaangkan simbol orang berw warna kuning digunakan unntuk mengartikkan jumlah haalaman yang terd dapat pada situ us ini. Ini adalaah bentuk desaain yang kuranng baik, karena penggunaan simbol yang kuraang tepat untukk menjelaskan informasi terteentu. Saraan : Gunakan bahasa yang jelas j dan muddah dimengertii, sebagaimanaa yang kita keetahui bahwa penggunaa website ini adalah orang Indonesia, adda baiknya jikka bahasa yanng digunakan konsisten n dalam bahasaa Indonesia, suuatu desain diibuat haruslah sesuai dengann kriteria dan karakterisstik penggunan nya. Kemudiann, gunakanlahh elemen yang sesuai dalam menjelaskan suatu funngsi tertentu, penggunaan p sim mbol ini cukup p bagus, akan tetapi harus sesuai dengan
Halaman H | 15
informasii yang dijelaskkannya, misalkkan untuk mejeelaskan jumlahh pengunjung kita gunakan simbol dengan d gambaar orang, dann bedakan denngan simbol yang menjelaaskan jumlah halaman, misalkan gam mbar halaman web. Ini dim maksudkan agarr informasi-infformasi yang udah terbaca, elemen pada layar mudah terkandunng pada website tersebut biisa dengan mu diidentifiikasi tanpa haruus membaca teeks yang menjeelaskan tentangg fungsinya. 3. Ketidakjelasan K n dalam pengggunaan fungsii sebagai pemeenuhan kebutu uhan penggun na.
Tidak onlinee
Kuurang jelas
Online kah??
Gambarr 15: Ketidakjelasan dalam peenggunaan funngsi seebagai pemenuuhan kebutuhan n pengguna Pada baggian kolom paling kanan webbsite ini terdappat informasi berupa b status chhating online Dari segi fungssionalitasnya inni jelas sangat berguna, jika darii para admin yaang mengelolaa website ini. D ada pertanyaan ataau saran, pengguna bisa langgsung berkomuunikasi dengann admin yang sedang s online terseebut. Akan teetapi kenyataaannya tidak sseperti ini, paada mulanya saya tidak mengerti m apa makksudnya dua nama yang paling p bawah, karena tidak k ada statusnyya sama sekaali, ini jelas mem mbingungkan pengguna, apaakah dua nam ma terakhir terrsebut sedang online atau tidak, ketika diarrahkan pointerr ke nama terssebut ternyta tidak t ada linkk sama sekali, kemudian setelah sering berkkomunikasi denngan adminnyya via email, baarulah mengertti ternyata itu menunjukkan bahwa status adm min dalam keaddaan online, namun n kurangnnya di sini, kitta tidak bisa laangsung terhuubung dengan adm min karena tidaak ada link ke nama tersebut, untuk bisa beerkomunikasi ddengan admin yang sedang onliine itu kita harrus membuka aplikasi a chatinng terlebih dahhulu, sungguh tidak efektif dan d memakan wakktu pengguna. Saraan : Berikan informasi yangg jelas, agar peengguna tidak merasa m kebiguungan, desain navigasi n yang baik, infoormasi yang lo ogis, serta penyyajian menurutt prioritas infoormasi merupakkan indikator kebaikan desain layar. Hal ini pentinng sekali untuk k diperhatikan sebagai pengeelola website. Ketidakteeraturan, ketiddakefisienan, aakan menyebab bkan informassi yang ingin disampaikan sulit diteerima penggunna, ini membuaat pengguna merasa m “takut””, atau bahkan n “terancam”, dalam arttian menjadi biingung dan tidaak mengerti.
4. Tampilan T tidak k tersusun rap pi dan fungsi sserta control yang y membinggungkan Link atau bukan ?
Link atau bukan ?
Buk kan linkk
Terrnyata linkk
Gambarr 16: Tampilann tidak tersusunn rapi dan funggsi serta Kontroll yang membinggungkan Pada bagian sebelah kanan kita juga j bisa melihhat menu shorttcut, menu ini berisi tutorial--tutorial yang terd dapat dalam sittus ini, tutoriall tersebut terbaagi menjadi beeberapa kategoori, namun jikaa kita lihat di sini,, kategori terseebut tidak terurrut, dan penuliisannya pun tiddak rapi, ini menyulitkan m pen ngguna untuk
Halaman H | 16
mem mbacanya. Tiapp-tiap kategorii terdapat list aatau daftar tutoorial, daftar ini juga tidak terssusun dengan rapii, pada awalnyya saya mengiira ini hanya list biasa yanng berisikan innformasi menggenai isi dari webbsite ini,namunn setelah ditelliti lebih lanjuut, mengarhkann pointer ke salah satu poinnt dari daftar terseebut, barulah diketahui d itu beerfungsi sebagaai link. Saraan : Hindari Layout yang tidak terstrukttur dan tidak terarah yang memungkinkaan terjadinya kesalahann, buatlah kattegori tersebuut menjadi po oin-point yangg terstruktur dengan d jelas. Perbaiki kualitas presen ntasi, jangan saampai penggun na mengalami kesulitan dalaam membaca, yang padda akhirnya akkan menurunkkan kemampuaan pemakai daan menyebabkaan kesalahan lagi. 5. Derajad D Kepen ntingan dalam m Desain Tamp pilan Informa asi Info formasi yang tiddak perrlu dan desain tam mpilan yang kurrang baikk
G Gambar 17: Derrajad Kepentinngan dalam Deesain Tampilann Informasi Di bawahh menu katego ori kita bisa meelihat ada informasi mengennai blog-blog maupun m situssituss lain yang tellah terhubung atau menggunnakan informassi yang terdapaat di situs ilmu uwebsite.com ini. Ditinjau dari segi kepentinngannya, rasannya hal ini tid dak perlu dilaakukan, karena ini kuarng berm manfaat, kalauupun ini memaang perlu dilakkukan, jangan sampai membbuat tampilan informasi ini terk kesan sulit dibaaca. Saraan : Perbaiki kualitas k presen ntasi, jangan saampai penggunna mengalami kesulitan dalaam membaca, yang padda akhirnya akkan menurunkaan kemampuann pengguna daan menyebabkkan kesalahan lagi.
Halaman H | 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. 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
