tugas akhir imk final

Upload: k03m

Post on 08-Aug-2018

245 views

Category:

Documents


5 download

TRANSCRIPT

  • 8/22/2019 Tugas Akhir Imk Final

    1/19

    TUGAS AKHIR

    M.K INTERAKSI MANUSIA DAN KOMPUTERSEMESTER GENAP 2007/2008

    Kajian Situs

    http://www.kickandy.com

    ELGHAR WISNUDISASTRA

    G64052049

    (http://ghalerblanks.wordpress.com)

    DEPARTEMEN ILMU KOMPUTER

    FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

    INSTITUT PERTANIAN BOGOR

    2008

  • 8/22/2019 Tugas Akhir Imk Final

    2/19

    1

    DAFTAR ISI

    Halaman

    BAB 1 PENDAHULUAN............................................................................................................... 2

    1.1 Latar Belakang ................................................................................................................ 2

    1.2 Web Kick Andy...............................................................................................................2

    BAB II TINJAUAN PUSTAKA .....................................................................................................4

    2.1 Interaksi Manusia dan Komputer .................................................................................... 4

    2.2 Web Usability.................................................................................................................. 4

    2.3 User Experience .............................................................................................................. 5

    2.4 User Interface..................................................................................................................5

    BAB III ANALISIS WEB KICK ANDY........................................................................................ 63.1 Halaman Utama...............................................................................................................6

    3.2 Halaman Topik Lalu........................................................................................................ 8

    3.3 Halaman Komentar ......................................................................................................... 9

    3.4 Halaman ArsipPemenang Kuis Rolling Stone ............ ........... ......... ............ ......... ...... 11

    3.5 Halaman Arsip pemenang Buku................................................................................ 12

    3.6 Halaman Off Air............................................................................................................13

    3.7 Form.............................................................................................................................. 13

    3.8 BreadCrumb .................................................................................................................. 13

    3.9 Link ............................................................................................................................... 143.10 Pemformatan Text......................................................................................................... 15

    3.11 Out off date ...................................................................................................................16

    3.12 Inkonsistensi Tampilan.................................................................................................. 16

    BAB IV PENUTUP....................................................................................................................... 17

    4.1 Kesimpulan ...................................................................................................................17

    3.1 Saran.............................................................................................................................. 17

    DAFTAR PUSTAKA..................................................................................................................... 18

  • 8/22/2019 Tugas Akhir Imk Final

    3/19

    2

    BAB 1 PENDAHULUAN

    1.1 Latar BelakangWeb telah menjadi sesuatu yang common dikalangan masyarakat pada saat ini. Hampir setiap

    kalangan menggunakan web sebagai media informasi di kehidupan sehari-hari mereka. Banyak pula

    yang menggunakan web sebagai jalan dalam mengembangkan bisnis mereka. Web dibangun dengan

    berbagai fungsi dan tujuan sesuai dengan kepentingan organisasi/ pribadi yang membuatnya. Web

    menjanjikan prospek yang bagus kepada setiap penggunanya.

    Karena peranan web yang sangat penting ini maka web yang dibangun haruslah memperhatikan

    beberapa faktor yaitu : usability, user experience, dan user interface. Ketiga faktor inilah yang

    menentukan apakah tujuan pembuatan suatu website tercapai atau tidak. Saat ini banyak web yang

    dikatakan gagal dalam pencapaian tujuannya dikarenakan sang pengembang web tidak

    memperhatikan ketiga faktor crucialtersebut.

    Pada kesempatan kali ini, dengan memperhatikan ketiga faktor tersebut, akan dilakukan analisis

    terhadap situs www.kikcandy.com.

    1.2 Web Kick AndyKick Andy merupakan salah satu acara televisi talkshow di salah satu stasiun televisi swasta

    yang telah banyak digemari oleh masyarakat Indonesia pada umumnya, khususnya dikalangan

    mahasiswa dan orang tua. Acara ini membahas tentang segala aspek kehidupan, mulai dari musik,

    kreatifitas, perjuangan hidup, politik, kebudayaan dan sebagainya. Acara ini juga mampu

    menimbulkan motivasi dan pemikiran-pemikiran yang lebih kepada seseorang, bukan hanya

    mengenai keberhasilan saja, tapi bagaimana keerhasilan itu dapat tercapai.

    Web Kick Andy yang beralamat di www.kickandy.com secara garis besar dibangun sebagai

    suatu sistem informasi dan komunikasi. Web ini berisikan tentang segala informasi acara Kick Andy

    mulai dari topik yang akan di bahas ataupun yang telah dibahas, kegiatan-kegiatan yang dilakukan

    oleh Kick Andy, undian buku gratis, Andys corner, berbagai komentar dari para pengunjung dan

    penonton, sampai dengan profil tim KickAndy sendiri.Agar memudahkan dalam pembahasan, dalam analisis kali ini ada 4 halaman dari navigasi menu

    utama yang akan kita bahas secara khusus, yaitu:

    1. Halaman Utama2. Halaman Topik Lalu3. Halaman Arsip Pemenang kuisRolligStone4. Halaman Arsip Pemeng Buku5. Halaman Off Air

    Sedangkan untuk keseluruhan website ini akan dibahas perbagian saja.

    Berikut merupakan screenshoot keseluruhan halaman utama website Kick Andy besertaketerangan setiap bagiannya :

  • 8/22/2019 Tugas Akhir Imk Final

    4/19

    3

    Gambar Halaman Utama www.kickandy.com

    Image link

    Header

    Image link

    NavigasiMenu

    Utama

    Halaman Isi

    Fungsi

    Search

    Image

    sponsor,

    Bukan

    merupakanlink

  • 8/22/2019 Tugas Akhir Imk Final

    5/19

    4

    BAB II TINJAUAN PUSTAKA

    2.1 Interaksi Manusia dan KomputerInteraksi Manusia dan Komputer adalah suatu ilmu yang mempelajari tentang perencanaan dan

    design(pemodelan) bagaimana orang dan komputer dapat bekerjasama dengan baik sehingga kebutuhan

    orang tersebut dapat terpuaskan dengan cara yang paling efektif. Desainer IMK harus mempertimbangkan

    bermacam-macam faktor seperti :

    1. Apa yang orang inginkan dan harapkan.2. Keterbatasan kemampuan dan phisycal apa yang orang miliki.3. Bagaimana kerja sistem informasinya.4. Kenyamanan serta ketertarikan apa yang dapat ditemukan orang.5. Desainer juga harus mempertimbangkan karakteristik teknik dan batasan dari hardware dan

    software komputer.

    (Wilbert O. Galitz, the essential guide to user interface design)

    2.2 Web UsabilityWeb usabilitymerupakan salah satu faktor yang sangat penting dalam mengembangkan sebuah

    web. Sebagian besar proses pengembangan web hanya akan terfokus di konsep usability. Usability

    merupakan atribut kualitas yang menunjukkan seberapa mudahnya user interface di gunakan.

    Usability juga mengacu pada metode untuk mengimprove kemudahan penggunaan selama proses

    perancangan. Sebuah web denganusabilityyang buruk akan ditinggalkan oleh penggunanya.

    Web Usability digunakan agar:

    a. Web menjadi lebih efektif dan efisien digunakan.b. Web juga menjadi lebih aman.c. Mempunyai utility yang baik.d. Pengguna tidak perlu mempelajari web terlebih dahulu.e. Dan pengguna dapat mudah mengingat bagaimana cara penggunaannya.f. Menghindari kebingungan yang akan dialami pengguna.

    Usabilitydidefenisikan melalui lima komponen, yaitu :

    a. LearnabilityLearnabilitymenjelaskan tingkat kemudahan pengguna untuk memenuhi task-taskdasar ketika

    pertama kali mereka melihat/menggunakan hasil perancangan.

    b. EfficiencyEfficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah

    mereka mempelajari hasil perancangan.

    c. MemorabilityMemorabilitymenjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan

    baik, setelah beberapa lama tidak menggunakannya.

    d. ErrorsErrorsmenjelaskan jumlah erroryang dilakukan oleh pengguna, tingkat kejengkelan terhadaperrordan cara memperbaiki error.

    e. SatisfactionSatisfactionmenjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan.

    Menurut Jakob Nielsen dalam bukunya Prioritizing Web Usability terdapat dua belas halyang harus diperhatikan dalam membangun sebuah website, yakni :

    1. Nothing to Hide2. The Web User Experience3. Revisiting Early Web Usability Findings4. Prioritizing Your Usability Problems

  • 8/22/2019 Tugas Akhir Imk Final

    6/19

    5

    5. Search6. Navigation and Information Architecture7. Readability & Legibility8. Writing for the Web9. Providing Good Product Information10. Presenting Page Elements11. Balancing Technology with People's Needs12. Design That Works

    2.3 User ExperienceUser Experience merupakan salah satu faktor yang harus di pertimbangkan oleh sang

    pengembang web. Bagaimana cara agar user mendapatkan pengalaman yang menyenangkan dan

    efektif sehingga mereka tidak merasakan frustasi, bosan,dan terganggu ketika mereka sedang masuk

    dan memakai suatu website. Seberapa cepat mereka mempelajari website yng dikunjunginya. Hal

    tersebut ditentukan dari beberpapa faktor seperti :

    a. Bagaimana sebuah webdidesain sesuai dengan keinginan/tujuan awal.b. Kemampuan dan keterbatasan web.c. Isi dan tampilan web.d. Fungsionalitas website.

    Sebuah website yang baik haruslah mempertimbangkan dan memperhatikan para pemakainya.

    Maksudnya dalam hal desain dan perancangan web tersebut haruslah disesuaikan dengan target para

    pengunjungnya. Mereka harus menentukan tingkat kemudahan dalam pemakaian website mereka

    sesuai dengan target pengunjung. Dalam pembagiannya User experienceterbagi menjadi 3 tingkatan

    yaitu beginners, intermediate dan expert. Desain dari sebuah web sebaiknya fokus pada pengguna

    dengan tingkat kemampuan intermediate.

    2.4 User InterfaceUser Interface adalah bagian dari computer dan softwarenya dimana orang dapat melihat,

    mendengar, menyentuh, berbicara, atau mengerti. User interace memiliki dua komponen penting,yaitu input dan output. Input adalah bagaimana orang mengkomunikasikan kebutuhannya atau

    keinginannya ke computer. Contoh input adalah keyboard, mouse, trackball, ones finger (untuk

    touch-sensitive screens atau pads), dan ones voice (untuk spoken instructions). Output adalah

    bagaimana komputer menyampaikan hasil dari komputasi dan persyaratan kepada user. Contoh dari

    mekanisme output adalah display screen.

    User Inteface adalah bagian yang paling penting dari sistem komputer. Tujuan dari user inteface

    adalah untuk membuat orang bekerja dengan komputer dengan mudah, produktif, dan menyenangkan.

    Desain interface yang layak akan menyediakan gabungan desain yang bagus dalam mekanisme input

    dan output sehingga dapat memuaskan kebutuhan user, kemampuan, dan batasan dalam jalan/cara

    yang paling efektif yang dimungkinkan. Interface yang paling baik adalah interface yang tidak

    disadari, interface yang mengijinkan/ membimbing user untuk fokus kepada informasi dan task yang

    dilakukan, bukan kepada mekanisme yang digunakan untuk menampilkan informasi dan melakukan

    task Oleh karena itu, perancang website dituntut untuk bisa merancang interface website sebaik

    mungkin agar tujuan dari pembuatan website bisa tercapai.

  • 8/22/2019 Tugas Akhir Imk Final

    7/19

    6

    BAB III ANALISIS WEB KICK ANDY

    3.1 Halaman UtamaHalaman utama merupakan halaman yang akan pertama kali dilihat oleh pengunjung ketika

    mereka masuk kedalam suatu website. Biasanya halaman utama berisikan tentang hal apa yang paling

    ingin diberitahukan oleh pengembang web kepada pengunjung mengenai web mereka. Serta menjadi

    panduan kepada pengunjung dalam pencarian informasi yang mereka butuhkan.

    Ada beberapa hal yang dirasa kurang beserta perbaikkan yang dirasa perlu didalam halaman utama

    ini, diantaranya :

    a. Di halaman utama web Kick Andy menampilkan tentang topik yang akan di bicarakan padaepisode selanjutnya. Namun dalam format penulisannya, penjelasan tentang topik yang

    dibicarakan terlalu panjang sehingga menimbulkan scrol kebawah yang teralu banyak. Hal

    ini menyebabkan user terpaksa harus men-scroll keatas lagi ketika ia telah membaca isi

    keseluruhan topik. Selain itu warna font pada setiap paragraf pembuka terlihat nyaru atau

    mirip dengan background. Hal ini menyebabkan beberapa pengunjung termasuk saya

    kesulitan membacanya. Padahal paragraf pembuka itu merupakan paragraf yang akan dibacapertama kali oleh pengunjung sebelum mereka melanjutkan membaca ke paragraf lanjutan.

    Alangkah lebih baikknya jika format penulisan topik dibagi menjadi dua halaman atau yang

    di tampilkan hanyalah paragraf pembuka saja dan di berikan link baca selengkapnya jika

    ingin membaca isi keseluruhan dari topik, jadi pengunjung tidak harus menscroll terlalu

    banyak. Dan juga sebaiknya diberikan link yang mengarah keatas halaman pada setiap akhir

    halaman agar pengunjung tidak harus men-scroll keatas lagi setelah membaca isi topik.

    Warna font pada setiap paragraf pembuka juga sebaiknya diganti kewarna yang lebih

    menonjol seperti hitam (bold)agar pembaca jelas.

    b. Di bagian bawah logo KickAndy terdapat tulisan SETIAP KAMIS, 22.05 yangmemberitahukan jadwal tayang Kick Andy. Namun ada sedikit kekurangan disini yaitu

    tidak diberitahukkannya waktu daerah mana yang dipakai apakah WIB,WIT, atau WITA.

    Sedangkan disetiap bagian atas judul topik yang dibahas juga diberikan pemberitahuantentang jadwal tayang KickAndy.

    Untuk mengoptimisasi ada baiknya jika pemberitahuan jadwal dibawah logo KickAndy

    diganti dengan Pemberitahuan yang ada di atas setiap judul topik. Jadi diatas judul topik

    tidak perlu lagi ada pemberitahuan jadwal tayang karena sudah ada di bawah logo Kick

    Andy yang akan muncul disetiap halaman. Diatas judul Topik hanya ada tanggal tayangnya

    saja.

    c. Dihalaman utama terdapat header GERAKAN SERIBU KAKI PALSU. Berikut adalahscreenshootnya,

    Bisa dilihat bahwa terdapat penempatan link yang kurang

    bagus(pendaftaran, press release ,donatur, penerima), ada space

    kosong antar link. Selain itu pada saat saya pertama kali melihat

    bagian ini, saya berfikir bahwa bagian header juga merupakan link

    Dihilangkan

    Diganti dengan tulisanTayang setiap Kamis pukul 22.05WIB

    dan Minggu pukul 15.05WIB

    header

  • 8/22/2019 Tugas Akhir Imk Final

    8/19

    7

    karena tidak ada pembeda, ternyata

    bukan. Sebaiknya link-link tersebut

    disusun menjadi satu baris(hilangkanspace kosongnya) dan diberikan pembeda

    dengan headernya .

    d. Penggunaan icon yang salah pada menu

    utama Pengunjung pasti akan merasa

    kalau link tersebut bisa di expand jika

    menggunakan tanda tersebut, padahal

    tidak bisa. Sebaiknya dihilangkan saja.

    e. Link menu Topik Terkini. Saat melihat linkTopik Terkini saya mengira bahwa isi dari

    link tersebut adalah topik yang benar-benar baru ditayangkan. Tetapi ketika dibuka ternyata

    yang ditampilkan adalah topik lain yang sudah ditayangkan beberapa minggu sebelumnya.

    Jadi sebenarnya isi dari Topik Terkini adalah topik yang mendapatkan rating paling bagusdiantara topik-topik yang baru ditayangan. Sehingga sebaiknya penamaan Topik Terkini

    diganti saja dengan penamaan yang lebih cocok dengan content link tesebut.

    f. Isi dari halaman utama(home) adalah tentang topik yang akan di bicarakan pada episode

    selanjutnya yang juga merupakan content dari link menu Topik Berikutnya. Karena

    kesamaan ini ada baiknya jika penempatan link menu Topik Berikutnya ditempatkan di

    urutan pertama dari menu utama, sebelum link Topik Terkini.

    g. Link halaman yang sedang dikunjungi tidak berubah sama sekali sehingga membuatpengunjung bingung mereka sedang berada di halaman yang mana. Hal ini sangatlah penting

    bagi pengunjung agar mereka tidak tersesat di dalam situs sehingga waktu mereka tidak

    terbuang. Mestinya link yang telah diklik diberi tanda untuk memberitahu kita berada di

    halaman mana atau diberikan bread crumb pada setiap halaman.

    h. Dalam website ini, link ke halaman home tidak terindentifikasi dengan baik. Di website ini

    logo Kick Andy merupakan link menuju kehalaman home. Para pengunjung yang baru

    menunjungi website ini tidak dapat mengetahui dimana letak link menuju home. Link ke

    halaman home sangatlah penting bagi para pengguna karena jika para pengguna telah terlalu

    jauh masuk kedalam website ini dan jika diwebsite ini tidak ada breadcrumbnya maka link

    home dapat mempermudah para pengunjung jika mereka ingin kembali kehalaman utama,

    dibandingka jika mereka harus menekan tombol back berkali-kali hanya untuk kembali

    kehalaman home ataupun halaman sebelumnya.

    Sebaiknya dibuat tombol Home di menu utama agar mempermudah pengunjung dalam

    proses penelusuran di website ini.

    i. Pada halaman utama ini terdapa button yang sebenarnya tidak perlu dipakai karena memliki

    fungsi yang sama dengan image link yang ada diatasnya. Berikut screenshootnya:

    Dapat dilihat bahwa fungsi button klik di sini memliki fungsi yang

    sama dengan image link nonton kick andy yaitu sama-sama menuju ke

    halaman dimana kita dapat menonton langsung episode Kick Andy langsung

    dari website ini.

    j. Terdapat beberapa link flash di dalam halaman ini.. Jika hanya untuk link kita harus meloadflash sangatlah membuang waktu dibandingkan jika kita hanya menggunkan text ataupun

    image. Apa lagi jika browser yang kita gunakan tidak memilki flash plug in, maka link

    Memilki fungsi yang sama

    Navigasi menu utama

    Icon an kuran te at

  • 8/22/2019 Tugas Akhir Imk Final

    9/19

    8

    tersebut tidak akan muncul. Penggunaan flash hanya untuk sebuah link tidak lah diperlukan,

    jika hanya untuk memperindah tampilan kita bisa membuatnya dengan CSS. Jadi disarankan

    agar penggunaan flash untuk link diganti menjadi image atau text saja.

    k. Terdapat kerancuan antara mana image yang merupakan link dengan image biasa. Sebaiknyadiberikan pembeda antara image yang merupakan link sponsor dengan image yang

    merupakan link utama pada website ini. Mungkin dari segi penempatan ataupun

    pengelompokkannya.

    l. Terdapat nya image Sponsor yang bukan merupakan link. Sebaiknya images sponsor di buatlink saja.

    m. Didalam website ini tidak memilki footer. Tulisan Copyright 2007 Website Team KickAndy. All rights reserved ditemukan di setiap akhir halaman. Namun peletakannya tidak

    sesuai. Terkadang posisinya terletak di bagian paling bawah agak menjorok kekanan, namun

    di salah satu halaman posisinya berada sedikit keatas. Hal ini menunjukkan ketidak

    konsistenan tentang peletakan tulisan tersebut. Jadi sebaiknya di buatkan footer yang isinyatulisan Copyright 2007 Website Team Kick Andy. All rights reserved dengan format

    penulisan rata tengah. Sehingga posisi tulisan tersebut akan sama disetiap halaman.

    3.2 Halaman Topik LaluHalaman Topik Lalu merupakan halaman yang berisi arsip topik yang telah ditayang kan Kick

    Andy dalam episode-episode sebelumnya. Arsip-arsip itu disajikan dalam bentukpaging. Yang

    ditampilkan dari setiap topik dalam halaman ini hanyalah paragraf pembukanya saja atau deskripsi

    singkat mengenai topik. Pengunjung dapat mengklik pada tiap judul topik jika ingin membacasecara kesuluruhan isi topik tersebut. Berikut merupakan screenshoot dari halaman Topik lalu:

    Berikut adalah beberapa hal yang

    dirasa kurang beserta perbaikkan

    yang drasa perlu yang yang berada

    dalam halaman ini :

    a. Halaman ini berisi beberapa topik disertai dekripsi singkat topik tersebut dimana adabeberapa topik yang disertai gambar dari cuplikan acara tersebut. Halaman ini juga disertai

    dengan paging. Masalah yang ditemui disini adalah terlalu banyaknya topik yang di publish

    per halamanya. Kira-kira ada 15 topik perhalaman. Hal ini menyebabkan halaman web ini

    menjadi sangat panjang dan memaksa user untuk melakukan banya scrolling ke atas maupun

    kebawah.

    Perbaikkan yang mungkin di lakukan adalah dengan mengurangi pengelompokkan topik

    perhalamannya. Mungkin kita bisa mengurangi menjadi 10 topik saja atau 8 topik saja yang

    di publish per halaman agar halamannya nanti tidak terlalu panjang.

    Deskripsi topik

    Judul topik

    a in

  • 8/22/2019 Tugas Akhir Imk Final

    10/19

    9

    Selain itu juga sebaiknya link pagingdibuat dua, tidak hanya diatas saja tapi juga dibawah.

    Hal ini dapat memudahkan user dalam berpindah halaman. Saat user sedang melakukan

    pencarian topik, ketika dia sudah berada di bagian bawah halaman dia tidak perlu lagimenscroll keatas hanya untuk berpindah halaman. Dia bisa langsung mencari ataupun

    membaca topik di halaman berikutnya.

    b. Disetiap deskripsi singkat topik yang disediakan adalah lebih baik jika diberikan penekananbahwa isi dari topik tersebut bukan hanya deskripsi singkat itu saja. Misalnya dengan

    memberikan keterangan link baca selengkapnya disetiap akhir deskripsi topik tesebut.

    c. Ketika pengunjung mengklik judul dari setiap topik, maka mereka akan dibawa kehalamanbaru berisikan tentang cerita lengkap dari topik tersebut. Namun dihalaman baru tersebut

    tidak disediakan link untuk kembali ke halaman arsip topik lalu. Pengguna harus

    menggunakan tombol back yang disediakan browser untuk kembali ke halaman sebelumnya.

    Mungkin akan lebih baik jika pengembang web ini memberikan link yang menuju halaman

    awal arsip topik lalu. Atau dengan menggunakan breadcrumb.

    d. Arsip topik-topik yang di publish tidak di beri pengindex-an dengan baik. Hal ini dapatmembuat pengunjung kebingungan ketika mereka sedang mencari topik. Misalnya kita ambil

    contoh jika seorang pengunjung ingin mencari topik 2 minggu yang lalu karena ia tidak

    sempat menontonnya. Ia juga tidak tahu apa judul topik tersebut. Maka pengunjung tersebut

    akan merasa bingung harus mencari kemana karena tidak ada petunjuk sama sekali. Yang dia

    tahu hanya topik dua minggu lalu.

    Untuk mengatasi masalah diatas hal yang sebaiknya dilakukan pengembang adalah

    mengindex arsip topik-topik tersebut berdasarkan waktu topik tersebut ditayangkan. Sertamemberikan keterangan tanggal penayangan untuk setiap topik di bagian deskripsi singkat

    topik tersebut.

    3.3 Halaman Komentar

    Halaman Komentar adalah halaman yang berisi tentang segala komentar dan form untukmengirim kan komentar para pengunjung mengenai Kick Andi baik websitenya maupun acaranya.

    Berikut beberapa hal yang dianggap kurang berikut perbaikkan yang dianjurkan yang berada

    dihalaman ini :

    a. Pada halaman komentar terdapat penempatan informasi yang tidak sesuai. Bisa dilihat

    digambar. Informasi tersebut memberitahukan tentang alamat, proses dan tata cara

    pengiriman buku kepada para pemenang undian buku gratis .

    Informasi ini seharusnya ditempatkan di halaman arsip

    pemenang buku bukan di bagian komentar. Karena isi

    dari infomasi tersebut sama sekali tidak mempunyai

    hubungan dengan content dari halaman komentar.

    Gambar penempatan informasi yang salah

    b. Bisa dilihat pada screenshoot bagian komentar dibawah ini. Terlihat bahwa sang pengembangweb ini sebenarnya ingin memberikan pembeda antara pesan yang satu dengan pesan yang

    lainnya. Hal ini terlihat jelas dari perbedaan warna background antar pesan yang dibuat oleh sang

    pengembang web ini.

  • 8/22/2019 Tugas Akhir Imk Final

    11/19

    10

    Namun permasalahannya timbul ketika pengembang memberikan garis separator untuk

    memisahkan isi pesan dengan pengirimnya. Hal ini malah membuat blok pesan terlihat

    terpisah. Seperti memuat blok baru antar garis separator. Fungsi warna background sebagai

    pemisah antar pesan pun menjadi tidak terlihat karena garis separator tersebut.

    Untuk mengatasi permasalahan ini sebaiknya garis separator tersebut dihilangkan saja. Atau

    dipindahkan posisinya menjadi dibawah keterangan pengirim pesan. Atau bisa juga dengan

    memberikan jarak yang jelas antara pesan yang satu dengan pesan yang lainnya.

    c. Tidak seperti pada halaman Topik Lalu, paging pada halaman ini sudah bagus. Komentar

    yang ada disetiap halaman dibatasi menjadi 4 sampai 5 komentar saja. Namun

    permasalahannya timbul ketika ada isi komentar yang sangat panjang. Hal ini menyebabkan

    pembaca komentar ini harus menscrooll ke atas lagi setelah ia membaca isi komentar tersebutdan hendak pergi kehalaman komentar yang lain.

    Solusi yang ditawarkan adalah pengembang sebaiknya membuat link to top dibagian

    akhir/bawah halaman yang menuju ke bagian atas halaman komentar. Jadi ketika user selesai

    membaca komentar yang panjang ia tidak perlu lagi untuk menscroll keatas halaman, hanya

    tinggal mengklik ke link yang dibuat.

    d. Form komentar adalah form yang berfungsi untuk

    memberikan komentar mngenai isi dari suatu

    website.Ada beberapa kekurangan yang ditemui dan

    perbaikkan yang mungkin dilakukan dalam form ini,

    diantaranya:

    1. Text field pada label Telepon dan Hp terlalu panjangtudak sesuai dengan jumlah karakter dari nomornya

    sendiri.

    Sebaiknya panjang text field disesuaikan dengan jumlah

    karakter yang akan diisikan, jangan terlalu panjang atau

    pendek.

    2. Sebaiknya pada textfield email diberikan format

    penulisan ang benar. Bisa dengan menggunakan tooltip.

    3. Terdapat kesalahan penempatan pada field Jenis

    Kelamin dan Tanggal Lahir. Semestinya fiel tersebut

    garis separator yang awalnya berfungsi

    sebagai pemisah antar pesan dengan si

    pengirim

    Terlihat seperti satu blok pesan yang

    sama. Padahal keterangan pengirim dan

    isi pesan tidak saling berhubungan

  • 8/22/2019 Tugas Akhir Imk Final

    12/19

    11

    berada di bagian DATA DIRI bukan di bagian KOMENTAR.

    4. Pada radio button di label Jenis Kelamin mestinya diberikan default. Biasanya nilaidefaultnya laki-laki.

    5. Dapat dilihat dari form bahwa field yang harus di isi adalah field Nama, Email,

    Alamat, dan Komentar. Namun ketika pengisian form, jika field Jenis Kelamin dan

    Tanggal Lahir dikosongkan maka akan keluar peringatan yang berisi bahwa field

    Jenis Kelamin dan Tanggal Lahir harus lah di isi, tidak boleh dikosongkan. Oleh

    karena itu sebaiknya pada fielad Jenis Kelamin dan Tanggal Lahir sebaiknya juga

    diberi tanda(*) yang menandakan bahwa field tesebut haruslah diisi. Halini dapat

    mengurangi kesalahan-kesalahan yang mungkin akan dilakukan oleh user.

    6. Pesan peringatan yang dikeluarkan semestinya mestinya menyatakan peringatan yang

    berisi tentang semua kesalahan yang dilakukan oleh user dan sesuai dengan kesalahan

    yamg dibuat. Contoh pada saat kita tidak mengisikan field email. Pesan yangdikeluarkan malah tentang format penulisan email. Bukan peringatan bahwa field

    email harus di isi. Demikian pula ketika kita tidak mengisikan field email, tanggal

    lahir , dan Jenis Kelamin. Pesan peringatan yang keluar hanyalah peringatan tentang

    email saja. Sedangkan peringatan tanggal lahir dan jenis kelamin tidak di munculkan.

    Setelah email diisi dengan benar barulah muncul perringatan tentang field tanggal

    lahir. Dan begitu seterusnya sampai semua kesalahan selesai. Hal ini menyebabkan

    user tidak langsung menyadari kesalahan yang ia buat. User hanya mengira bahwa

    kesalahan yang dibuat hanya pada field email saja sedangkan yang lainnya tidak.

    3.4 Halaman ArsipPemenang Kuis Rolling StoneHalaman ini berisi daftar pemenang kuis majalah RollingStone. Halaman ini disusun

    berdasarkan edisi terbit majalah tersebut. Pada halaman awal ArsipPemenang RolingStone terlihat

    image dari setiap majalah yang diundikan. Ketika salah satu image tersebut diklik maka akan

    ditampilkan daftar pemenang dari majalah tersebut. Namun dalam halaman ini terdapat beberapa halyang dianggap kurang. Berikut hal-hal yan kurang tersebut beserta perbaikan yang mungkin

    dilakukan:

    a. Dari setiap image terlihat diberikan deskripsi edisi majalah tersebut yang juga merupakan link

    agar pengunjung tidak bingung dalam mencari arsip pemenang undian ini. Tapi ada beberapa

    image yang tidak diberikan keterangan tahun pada

    linknya. Hal ini dapat dilihat pada image dibawah

    ini.

    Semestinya di setiap link diberikan keterangan tahun edisi majalah tersebut agar tidak

    menimbulkan kebingungan pada user.

    Selain itu di halaman utama juga terdapat link berupa gambar yang mengacu pada daftar

    pemenang undian majalah ini edisi juni 2008. Sedangkan dihalaman awal ArsipPemenang

    RolingStone , arsip yang paling baru adalah edisi januari 2008. Tidak ada daftatr pemenang

    antara edisi Januari 2008 dengan Juni 2008.

    Ada keteran an tahun

    Tidak ada keterangan tahun

  • 8/22/2019 Tugas Akhir Imk Final

    13/19

    12

    b. Tidak ada informasi mengenai bagaimana cara untuk mengikuti undian majalah RollingStone

    ini. Padahal hal ini sangatlah penting untuk user yang ingin mengikuti undian ini. Sebaiknya

    pengembang memberikan informasi kepada user tentang bagaimana cara untuk mengikutiundian tersebut di setiap halaman ArsipPemenang RolingStone.

    c. Seperti pada halaman Topik Lalu paging pada halaman ini tidaklah bagus. Sehingga

    menimbulkan terlalu banyak scroll. Sebaiknya diberikan link yang menuju ke atas halaman

    di bagian akhir/bawah halaman ini.

    d. Sama seperti pada halaman Topik Lalu, ketika kita mngklik salah satu edisi majalah maka

    kita akan dibawa pada halaman baru daftar pemenang kuis. . Namun dihalaman baru tersebut

    tidak disediakan link untuk kembali ke halaman arsip pemenang kuis. Pengguna harus

    menggunakan tombol back yang disediakan browser untuk kembali ke halaman sebelumnya.

    Mungkin akan lebih baik jika pengembang web ini memberikan link yang menuju halaman

    awal arsip topik lalu. Atau dengan menggunakan breadcrumb.

    3.5 Halaman Arsip pemenang BukuHalaman Arsip pemenang Buku adalah halaman yang bertujuanuntuk memperlihatkan daftar

    pemenang undian buku yang diundi setiap minggunya oleh KickAndy. Halaman ini disusun

    berdasarkan episode tersebut. Pada halaman awal Arsip pemenang Buku terlihat image dari setiap

    buku yang diundikan. Ketika salah satu image tersebut diklik maka akan ditampilkan daftar

    pemenang dari bukutersebut. Namun dalam halaman ini terdapat beberapa hal yang dianggap kurang.

    Berikut hal-hal yan kurang tersebut beserta perbaikan yang mungkin dilakukan :

    a. Pada halaman ini ada beberapa link yang setelah di klik tidak mengacu pada daftarpemenang buku tersebut, melainkan kehalaman pembahasan topik yang berkaitan dengan

    buku tersebut. Hal ini jelas membingungkan pengunjung website ini yang ingin melihat

    daftar pemenang undian buku. Mungkin ini disebabkan oleh keteledoran pengembang dalam

    mengupdate content web ini. Namun apapun alasannya, sebaiknya link-link tersebut

    diperbaiki agar kembali kefungsi awalnya yaitu menampilkan daftar pemenang undian buku.

    b.Untuk image link dari tiap-tiap buku karena ditampilkansecara menurun membuat isi halaman ini menjadi

    terlalu panjang yang menyebabkan user harus

    melakukan scrolling yang berlebihan. Selain itu hal inijuga menimbulkan banyak whitespace dihalaman

    tersebut. Sebaiknya image-image link tersebut

    ditampilkan secara mendatar saja agar tidak terlalu

    memakan banyak space.

    c. Sebaiknya pegindexan dalam halaman ini dilakukan berdasarkan episode terbaru yang yang

    ditayangkan atau berdasarkan buku terbaru yang di undi. Hal ini akan lebih memudahkan user

    dalam pencariannya tentang daftar pemenang buku yang lalu.

    Posisi menurun memakan banyak space

    Banyak whitespace yang timbul

    Tombol yang mubazir

  • 8/22/2019 Tugas Akhir Imk Final

    14/19

    13

    d. Sama seperti pada halaman Topik Lalu dan Arsip Pemenang RolingStone , ketika kita

    mengklik salah satu edisi buku maka kita akan dibawa pada halaman baru daftar pemenang

    kuis. Namun dihalaman baru tersebut tidak disediakan link untuk kembali ke halaman Arsippemenang Buku. Pengguna harus menggunakan tombol back yang disediakan browser untuk

    kembali ke halaman sebelumnya. Mungkin akan lebih baik jika pengembang web ini

    memberikan link yang menuju halaman awal Arsip pemenang Buku. Atau dengan

    menggunakan breadcrumb.

    3.6 Halaman Off AirHalaman Off Air KickAndy adalah halaman yang berisikan tentang arsip topik kegiatan Off

    Air KickAndy. Secara garis besear isi dari halaman ini memilki kekurangan yang sama dengan

    halaman Topik Lalu,dan halaman- halaman sebelumnya yang telah dibahas yaitu dimasalah paging,

    link untuk kembali kahalaman awal, scrolling, pengindexan. Sehngga kurang lebih perbaikkan yang

    harus dilakukannya pun sama.

    3.7 FormBerikut beberapa kekurangan yang ditemukan dan perbaikan yang dirasa perlu dalam

    pengimplementasianform diwebsite ini, yaitu:

    a. Cursor tidak otomatis berada pada field pertama form.

    Cursor sebaiknya secara otomatis berada pada fieldpertama yang ada pada form. Hal ini akan membuat

    pengguna mendapatkan sedikit kemudahan dibandingkan

    harus mengklik terlebih dahulu menggunakan mouse.

    b. Tidak ada deffault pada radio button. Sebaiknya pada

    setiap radio button diberikan nilai deffaultnya.

    c. Terdapat penomoran di samping setiap menu checkbox.

    Sebaiknya penomoran tersebut dihilangkan karena

    dianggap tidak begitu berguna.

    d. Penulisan label yang terlihat rancu. Sebaiknya diberikan

    format penulisan atau keterangan satuan tahun. Pengunjung

    akan bingung ketika akan mengisi field ini. Apakah harus

    diisi dengan waktu kehilangan kaki atau lamanya waktu

    kehilangan kaki.

    3.8 BreadCrumbBreadcrumbdigunakan untuk menginformasikan kepada pengguna mengenai posisi mereka saat ini.

    Dengan menggunakan breadcrumb, pengguna juga dapat menelusuri pathyang telah dilaluinya sampai

    berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Pada

    web ini tidak terdapat breadcrumb. Padahal kehadiran breadcrumb sangat dibutuhkan pada web ini karena

    setiap halaman dari web ini memilki jarak path yang cukup dalam dari halaman utama. Terlebih lagi link

  • 8/22/2019 Tugas Akhir Imk Final

    15/19

    14

    untuk menuju halaman utama (home) dalam web ini tidak teridentifikasi dengan baik. Akibatnya para

    pengunjung web ini mengalami kesulitan dalam penelusuruannya mencari informasi. Mereka terpaksa

    menggunakan tombol back yang disediakan browser berkali-kali hanya untuk kembali pada halamanutama maupn halaman-halaman sebelumnya. Hal ini tentu saja akan membuang- buang waktu para

    pengunjung dan dapat membuat para pengguna menjadi jengkel dan malas dalam melakukan penelusuran

    sehingga tujuan dari website ini dalam memberikan informasi dikatakan kurang berhasil.

    3.9 LinkBerikut adalah beberapa kekurangan dalam penggunaan link dalam web ini,

    a. Tidak semua link berubah warna ketika telah dikunjungi. Contoh pada link discreenshoot ini,warnanya tidak berubah setelah dikunjungi. Sedankan link lainnya berubah warna.

    Sebaiknya semua link harus berubah warna setelah di kunjungi. Hal ini akan membantu

    pengguna dalam mengingat link-link mana saja yang telah dikunjungi.

    b. Web ini banyak mengunakan image sebagai link tetapi tidak memberikan penanda bahwa imagetersebut adalah sebuah link atau bukan. Jadi pengunjung yang baru memasuki web ini tidak akan

    menyadari bahwa image tersebut merupakan link atau bukan sebelum mereka menghover mouse

    ke image tersebut. Karena ada juga image yang berukuran sama tapi dia bukan link .

    Sebaiknya setiap image yang merupakan link diberikan penanda yang jelas bahwa image tersebut

    merupakan suatu link. Selain itu sebaiknya penggunaan image sebagai link sebaiknya dikurangi,jika cukup dengan mengunakan text gunakan text saja. Karena penggunaan image yang

    berlebihan ini akan banyak memakan tempat dan inilah yang menyebabkan setiap halaman

    menjadi terlalu panjang singga harus di scroll.

    c. Tidak ada penanda link pada navigasi menu utama, jika di hover tidak ada yang berubah di linktersebut.

    Mestinya stiap linksebaiknya dibuat berubah warna atau digarisbawahi sewaktu cursor

    mouse mengarah ke arah link (hover) karena telah menjadi konvensi umum bagi

    pengunjung bahwa teks yang berwarna biru atau digarisbawahi merupakan sebuak link

    yang dapat diklik

    d. Sebaiknya image sponsor dijadikan link menuju alamat sponsor tersebut.

    e. Banyak pengembang website yang sudah profesional menilai bahwa penggunaan link klik here

    sangatlah amatir , terlalu informal, dan uninformatif. Link yang baik seharusnya hanya terdiri

    dari phrase atau kata-kata yang paling penting saja, contohnya Details. Dalam web ini

    ditemukan link penggunaan link klik disini. Sebaiknya kata-kata link tersebut diganti dengan

    kata-kata atau phrase yang pailng pentig dari tujuan link tersebut.

    Pada link yang ditunjukkan gambar disamping dapat

    dirubah menjadi daftar, ganti password, lupa pasword.

    Setelah di klik tidak

    berubah warna

    Image sponsor yang bukan

    merupakan link

  • 8/22/2019 Tugas Akhir Imk Final

    16/19

    15

    e. Pada logo KickAndy Foundation dibawah ini terlihat seperti link. Sebaiknya hindari penggunaanatau penempatan image yang seperti link ini. Hal ini

    membingungkan user. Jika ingin tetap memakai logo

    seperti ini sebaiknya logo tersebut dijadikan sebagai link

    saja.

    3.10 Pemformatan TextPada web ini, terdapat beberapa kekurangan dalam segi pemfortan textnya. Baik dalam

    pewarnaan font, format paragraf, dan format tulisan. Berikut beberapa kekurangan tesebut beserta

    perbaikkan yang mungkin dilakukkan.

    a. Terdapat pewarnaan font yang tidak sesuai dan inkonsistensi dalam pewarnaannya. Sebaiknya

    pewarnaan font disamakan berdasarkan bagiannya. Misalnya untuk bagian content

    disamakan warna fontnya. Begitu juga untuk bagian judul. Untuk isi tulisan yang berupainformasi sebaiknya jangan menggunakan warna merah karena terkesan seperti peringatan

    atau pesan kesalahan kepada pembacanya.

    b. Tedapat inkonsistensi penulisan paragraf maupun

    judul.Dalam gambar terlihat pemformatan paragraf

    yang tidak sama. Ada yang justify dan rata kiri.

    Sebaiknya dalam pemformatan paragraf disamakan.

    Memakaijustifysaja atau rata kirisaja.

    c. Format penulisan didalam tabel lebih baik dibuat

    menjadi rata kiri saja. Jika di buat center akan

    membuat tulisan terlihat tidak rapi dan agak sulit

    dibaca.

    Pewarnaan font yang tidak sesuai

    Pewarnaan font yang tidak sama

    Rata kiri

  • 8/22/2019 Tugas Akhir Imk Final

    17/19

    16

    Gambar format penulisan dalam tabel

    3.11Out off datePada beberapa halaman seperti di halaman topik terkini dibagian paling bawah terdapat image

    yang merupakan link kesuatu alamat kidzania.com. Dalam image itu berisi informasi tentang

    kegiatan yang off air yang akan dilakukan oleh Kick Andy. Namun setelah dilihat ternyata tanggal

    acara off air tersebut telah dilakukan beberapa bulan yang lalu. Walaupun begitu informasi ini masih

    saja tetap dipublish dalam web ini sampai sekarang.

    Karena sebenarnya informasi tersebut sudah tidak

    dipakai lagi terlebih image itu terlalu memakan banyaktempat, jadi sebaiknya iklan tersebut dihilangkan saja

    dari setiap halaman web.

    3.12 Inkonsistensi TampilanInkonsistensi tampilan dari web ini terlihat dalam fungsi search. Dapat dilihat dari gambar bahwa

    posisi tombol search yang berada di halaman utama berbeda posisi dengan yang ada salah satu

    halaman lainnya.

    Pada Halaman utama

    Pada halaman daftar pemenang kuis Rolling Stone

    Sebaiknya pengembang menyamakan posisi tombol caridisetiap halaman yaitu tepat disamping

    field pencarian. Agar tidak terjadi inkonsistensi tampilan lagi dalam web ini.

    Tanggal yang sudah

    lewat, masih dipasang

    Tombol berada di bawah

    field pencarian

    Tombol berada di

    samping field pencarian

    JustifyCenter

  • 8/22/2019 Tugas Akhir Imk Final

    18/19

    17

    BAB IV PENUTUP

    4.1KesimpulanTolak ukur Web dikatakan berhasil adalah sebagaimana besar tujuan dari pembuatan website

    tersebut terpenuhi. Dalam hat ini peranan web usability sangatlah besar. Jika usability web tersebut

    bagus maka pengunjung pun akan merasa nyaman dan menyukai web tersebut. Jika website tersebut

    telah disukai banyak orang maka tujuan dari pembuatan website tersebut akan tercapai. Seorang

    pengembang suatu web harus mempelajari web usability dan mengimplementasikannya pada web

    yang dikembangkan jika dia ingin dikatakan sebagai pngembang yang berhasil..

    Pada pengembangan web Kick Andy, pengembang bisa dikatakan masih kurang menerapkan web

    usability yang baik pada webnya. Ini dapat dilihat dari kesalahan-kesalahan yang dilakukan

    pengembang karena tidak memperhatikan : paging, scrolling, link, outdated content, inkonsistensi

    tampilan, pemformatan text, breadcrumb, form, dll. Jika hal-hal ini tidak segera diperbaiki maka

    tujuan dari pembuatan website ini sebagai sistem informasi dan komunikasi tidak akan tercapai.

    3.1 SaranMakalah ini diharapkan menjadi bahan masukan bagi pengembang untuk mengembangkan web

    Kick Andy dengan lebih memperhatikan faktor-faktor usability. Kekurangan-kekurangan yang masih

    ditemui, sebaiknya segera diperbaiki agar web dapat terlihat profesional. Dengan demikian, para

    pengguna dan pengunjung website ini akan menyukai web ini dan tujuan dari pembuatan ini pun akan

    tercapai.

  • 8/22/2019 Tugas Akhir Imk Final

    19/19

    18

    DAFTAR PUSTAKA

    Johnson, Jeff. 2003. Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them. San

    Fransisco: Morgan Kaufmann Publishers.

    Galitz, Wilbert O. 2007. TheEssential Guide to User Interface Design: An Introduction to GUI Design

    Principles and Techniques, Third Edition. Indianapolis : Wiley Publishing, Inc.

    Cooper, Alan, Robert Reimann, dan Dave Cronin. 2007. About Face 3: The Essentials of Interaction

    Design.Indianapolis : Wiley Publishing, Inc.

    Nielsen J & Loranger H. 2006. Prioritizing Web Usability. Berkeley : New Riders.