Analisa Websitehttp://smpn1sukorejo.sch.id

Program Studi: Teknik Informatika Digunakan Untuk Memenuhi Tugas Mata Kuliah Interaksi Manusia dan Komputer

DosenPengampuh: Khasan Basori, S.Kom, MM Nama: Ali Hamza NIM: 2009.69.04.0014 Semester: VI ( Enam )

UNIVERSITAS YUDHARTA PASURUANJl. Yudharta No. 07 Sengonagung Purwosari Pasuruan Kode Pos. 67162 Telp. 0343-611186

KATA PENGANTAR Puji syukur kami panjatkan kepada Allah SWT yang telah memberikan kami hidayahNya. Dan tidak lupa pula kami ucapkan terima kasih kepada dosen pembimbing yang telah membimbing kami sehingga dapat menyelesaikan tugas ini dengan lancar. Dalam pembuatan makalah ini masih banyak kekurangan dan kesalahan. Untuk itu kritik dan saran sangat kami harapkan untuk kemajuan ke depan.

Sengonagung, 19 Mei 2012

Penyusun

DAFTAR ISIKATA PENGANTAR. i DAFTAR ISI.... ii BAB I PENDAHULUAN 1.1 Tujuan.......................................................................................................................... 1 1.2 Usability...................................................................................................................... 1 BAB II PEMBAHASAN 2.1 Design Grapich........................................................................................................... 4 2.2 Textual Content.......................................................................................................... 8 2.3 Navigation................................................................................................................. 10 2.4 Structure.................................................................................................................... 11 2.5 Link........................................................................................................................... 12 BAB III PENUTUP 3.1 Kesimpulan....... 14 3.2 Referensi........... 14

BAB I PENDAHULUAN

1.1 Tujuan Tugas analisa user interface (UI) pada website ini adalah agar dapat memenuhi tugas mata kuliah Interaksi Manusia dan Komputer (IMK). Selain itu dapat mengetahui cirri-ciri website yang baik dan kurang baik dan dapat membandingkan analisa yang dilakukan dengan teori yang telah diterima. Seperti yang kita ketahui bahwa web informasi yang beralamat http://smpn1sukorejo.sch.id adalah salah satu website yang dibuat untuk informasi berupa online. Disini kami akan menganalisa website ini dan akan menguraikan analisis yang sudah kami lakukan di web smpn1sukorejo.sch.id sebagai bagian tugas dari kuliah kami. 1.2 Usability Usability adalah berperan penting dalam pengembangan sebuah situs. Pengembang harus memahami prinsip-prinsip usability sebelum mengimplementasikannya pada sebuah situs. Menurut Jacob Nielsen, usability adalah sebuah atribut kualitas yang menilai tingkat kemudahan user interface untuk digunakan. Usability juga mengacu kepada metode untuk meningkatkan kemudahan penggunaan selama proses perancangan. Pembahasan tentang usability akan lebih terarah pada jawaban atas pertanyaan-pertanyaan seputar keempat aspek yang termasuk didalamnya. Aspek-aspek tersebut meliputi learnability, throughput, flexibility, dan attitude.1.

Learnability Learnability menjelaskan tingkat kemudahan pengguna untuk memenuhi tasktask dasar ketika pertama kali mereka melihat atau menggunakan situs. Apakah pengguna merasa mudah terhadap situs yang ia hadapi? Apakah penggguna harus mempelajari dahulu halaman situs? Berapa lama pengguna mempelajari situs tersebut.

2.

Throughput Bahasan ini menyangkut bagaimana tingkat kecepatan pengguna dalam menyelesaikan task-task yang ada. Seberapa cepat suatu tugas dikerjakan? Tugas (task) utama yang diperhatian adalah fungsi login dan searching. Tetapi, dalam situs ini tidak diberikan keterangan mengenai kategori pengguna yang diperbolehkan melakukan login. Tugas lainnya adalah membaca informasi yang diberikan. situs nasional Republik Indonesia tidak begitu memanjakan pengguna untuk melihat informasi yang diberikan karena tampilan yang cuku berantakan membuat tidak enak dilihat. Tentu saja hal ini akan menghambat penyerapan informasi bagi pengguna. Kesalahan-kesalahan pengguna juga patut diperhitungkan Kesalahan yang dibuat pengguna mencakup ketidaksesuaian apa yang pengguna pikirkan dengan apa yang sebenarnya disajikan oleh situs. Semakin banyak kesalahan yang dibuat pengguna maka pengguna akan merasa jenuh dan lama-kelamaan justru mengalami stress yagng mengakibatkan tidak memeanfaatkan kembali situs tersebut. Situs nasional Republik Indonesia tidak menetapkan kategori tersendiri untuk tulisan biasa, Link, heading, dan sub-heading, sehingga banyak terdapat kesalahan dalam identifikasi derajat kepentingan dan fungsionalitas suatu tulisan. Salah satunya adalah salah mengidentifikasi tulisan yang biasa dengan yang berupa Link karena terdapat tulisan biasa yang bergaris bawah sedangkan hampir semua Link tidak ada yang terlihat bergaris bawah kecuali pointer mendekat.

3.

Flexibility Sebuah situs harus mempunyai tingkat fleksibilitas tinggi. Apalagi situs yang dibahas ini merupakan situs nasional. Warga negara Indonesia memiliki banyak keragaman sehingga kefleksibilitasan sangat penting agar semua warga negara dapat mengambil informasi dari situs ini dengan mudah dan menjadikannya bermanfaat. Situs ini harus dapat dipahami berbagai profesi karena dalam situs ini berisi berbagai macam informasi yang tersedia dalam banyak menu. Hal ini dikarenakan aspek kehidupan manusia yang cukup kompleks. Suku, pekerjaan, , agama, ras,

dan lain-lain yang berbeda harus tetap mempunyai hak untuk kemudahan dalam mengakses situs ini.4.

Attitude Kepuasan pengguna terhadap situs sangat penting diperhatikan. Hal ini menyangkut kelanjutan dari situs ini sendiri. Jika sangat banyak yang tidak puas terhadap situs ini maka semakin sedikit yang mengunjungi situs ini dan berakibat kerugian. Tingkat kepuasan dapat diukur dari banyaknya kunjungan terhadap situs ini, sehingga diperlukan sebuah pengitung dari pengunjung yang mengunjungi situs tersebut. Pertama kali masuk ke halaman utama dengan alamat www.indonesia.go.id, kecepatan mengakses cukup baik. Dari namanya maka kita sudah dapat mengetahui bahwa situs ini merupakan situs pemerintah dalam negeri Republik Indonesia sehingga sudah tepat dengan menggunakan bahasa Indonesia sebagai bahasa utama dengan penyediaan fitur versi bahasa Inggris. Karena situs ini berisi berbagai informasi yang terjadi di Indonesia beserta isu-isu nasionlanya maka pengelolaan basis data harus sangat baik. Harus adanya update setiap hari sehingga pengguna merasa puas emndapatkan informasi terbaru.

BAB II PEMBAHASANDalam menganalisa kali ini ada 5 point yang digunakan untuk menganalisa website, yaitu: 2.1 Design Graphic Prinsip desain grafis yang perlu dibahas antara lain metafora, kejelasan, konsistensi. a) Metafora Adalah aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan secara harafiah. Menghubungkan presentasi dan elemen-elemen visual dengan item-item yang berkaitan.

b) Kejelasan Adalah alasan yang kuat / masuk akal digunakannya setiap elemen yang berada dalam suatu interface yang dibuat. Penggunaan yang sedikit akan lebih baik. Pada tampilan web smpn1sukorejo.sch.id dari segi kejelasan cukup baik karena tidak terlalu banyak memasukan elemen yang tidak terlalu penting.

Permasalahan: 1. Susunan halaman web smpn1sukorejo.sch.id belum teratur dan disertai link-link yang tidak jelas. 2. Semua data dan informasi tidak terkemas dengan baik. Solusi: 1. Penyusunan web ini harus teratur dan link-link harus jelas.

2. Data sebaiknya dikemas dengan baik agar memudahkan pengunjung untuk mendapatkan informasi yang diinginkan.

c) Konsistensi Adalah konsistensi dalam tampilan, pewarnaan, gambar, ikon, tipography, teks, dll. Terdapat konsistensi yang baik dalam layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga. Setiap platform mungkin memiliki panduannya. Icon Icon adalah grafik dalam sebuah antarmuka yang digunakan untuk mengkomunikasikan informasi kepada pengguna dengan

mengekspresikan. Hanya sedikit penggunaan icon pada situs ini. Namun, penggunaan icon yang digunakan kuran tepat: Icon Statistik Gambar untuk icon visitor hampir tidak ada gunanya. Icon ini hanya dibedakan menurut warna tanpa melambangkan suatu apa pun. Sehingga bila tidak terlalu berfungsi sebaiknya tidak perlu menggunakan icon.

Icon File Penggunaan icon file sebuah dokumen tidak jelas, apakah file tersebut dalam bentuk dokumen, file teks atau PDF.

Tampilan website konsisten Website ini termasuk konsisten, terlihat dari segi pewarnaannya. Penggunaan warna latar belakang sama untuk setiap page, yaitu putih. Warna teks yang mendominasi pada setiap halaman, yaitu hitam untuk indikasi link biru dan putih untuk selainnya (header, navigasi, dan footer pengecualian). Website ini mengguanakan jenis huruf Calibri dengan ukuran tulisan yang sama untuk setiap halamannya. Terlampir contoh yang dimaksud :

Judul Halaman (Title) Situs ini dengan dalam menampilkan judul tiap halaman pada browser pengguna sudah baik. Pada judul akan ditampilkan dimana pengguna sedang mengakses situs. Hal ini sangat berguna ketika sedang browsing dalam situs. Informasi yang terdapat pada browser pengguna sudah jelas dan dapat dimanfaatkan oleh pengguna.

a.

Warna Warna merupakan salah satu elemen yang penting dalam tampilan sebuah situs. Situs dengan pemilihan warna yang baik akan membuat pengakses nyamann dah mempunyai kesenangan tersendiri pada saat mengakses situs dan menbaca isi dalamnya. Halaman-halaman yang ada di situs ini memiliki kekonsistensian dapat di lihat yakni dalam hal. Pemberian warna background untik tiap halaman yang selalu sama. Peletakan navigation bar yang sama untuk setiap halaman yaitu di tepi paling atas dan paling bawah tiap-tiap halaman.

Latar belakang Putih, Krem

Garis Tipis dan Teks Biru, Hitam

Garis Tebal dan Teks Krem, Hijau

b. Screen Resolution Website ini menggunakan screen resolution 1012 x 4600 pixel dan web bersifat rata tengah, sehingga pengguna yang mengguanakan screen resolution 800 x 600 pixel harus scrolling beberapa kali supaya bisa melihat semua halaman website. Lebih baik pengembang menggunakann ukuran web yang dinamis. Lebar halaman didefinisikan dengan

menggunakan ukuran presentase. Cara ini lebih baik karena tidak bergantung kepada resolusi computer. c. Grafik Teknologi terkini internet mengizinkan bukan saja teks malah grafik dipamerkan didalam halaman web. Hal ini akan memperlihatkan keceriaan di dalam halaman web dan membuatnya sekaligus tampak menarik. Pilihlah gambar yang dapat menyampaikan maksud dan tidak membebani. Buatkan gambar yang kecil dan fast-loading karena pengunjung tidak suka menunggu terlalu lama agar suatu tampilan muncul

kesemuanya. Untuk mengoptimakan gambar, gunakan gambar di dalam format 16 color. Menggunakan icon dan gambar yang kecil dan relevan adalah pilihan terbaik terutama pada navigation bar. Grafik bagi navigation bar akan muncul di setiap tampilan halaman web untuk membolehkan proses load setiap tampilan lebih cepat dengan adanya chace. Kita juga boleh merancang memberi pilihan kepada pengunjung yang ingin memlihat halaman web di dalam versi teks saja untuk menghindari kelambatan. d. Font Dari segi penggunaan font tulisan tercermin web smpn1sukorejo.sch.id bertujuan untuk member informasi karena menggunakan jenis tulisan Calibri yang biasa digunakan untuk hal yang formal. Tetapi design web klikbca.com mencerminkan tujuan pengembang untuk berbagi informasi berita melalui web ini dan ditambahkannya banner yang menggambarkan ketertariakan sebuah isi dari informasi. Meskipun web ini tidak bersifat komersial tapi bukan berarti di web ini tidak ada sesuatu yang menjadi menarik perhatian pemgunjung. e. Bahasa Bahasa yang digunakan pada web smpn1sukorejo.sch.id ini terdapat satu bahasa. Pada pertama kali membuka website ini sudah dalam bentuk bahasa Indonesia.

2.2

Textual Content > Header Pada halaman index, pengguna dihadapkan pada header yang berisi keterangan tentang portal ini.

Peramasalahan pada header: 1. Teks pada header tidak terlalu mencolok dan jelas atau warna teks tidak kontras dengan gambar background. Hal ini mengakibatkan teks tidak terlihat sebagai judul dari situs ini.

2. Ukuran font terlalu kecil dan jenis font yang digunakan terlalu jelek untuk header.

Solusi untuk permasalahan pada header: 1. Warna teks harus yang kontras dengan backgorundnya. Sehingga akan terlihat lebih jelas. 2. Ukuran font harus lebih besar dan pemilihan jenis font harus terlihat bagus.

>Menu utama Menu utama pada situs ini ada di bawah header. Terdiri dari Home, Pofil, dll

Kekurangan pada menu utama di situs ini adalah: 1. Warna background pada menu kurang kontras terhadap teks. Sehingga terlihat kurang tegas dan tidak mencolok. Padahal semestinya sebagai menu utama harus cukp mencolok.

2. Sub dari menu tidak teratur/kontent menu tidak urut.

Solusi: 1. Pemberian warna background dan teks yang lebih kontras. Sehingga menu utama tampak lebih jelas. 2. Sub dari menu harus teratur/urut dalam peletakannya.

>Breadcrumb Breadcrumb digunakan untuk menginformasikan kepada pengguna mengenai posisi mereka saat ini. Dengan menggunakan breadcrumb, pengguna juga dapat menelusuri path yang telah dilaluinya sampai berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Pada situs ini terdapat breadcrumb. Namun, breadcrumb yang ditampilkan kurang baik. Karena yang bercetak tebal justru teks yang merujuk ke halaman sebelumnya. Padahal sebaiknya menu yang sedang diakses yang bercetak tebal sedangkan untuk teks yang merujuk ke halam sebelumnya dapat ditampilkan seperti Link misalnya dengan memberi garis bawah.

>Search Search merupakan salah satu fitur yang harus ada pada sebuah situs. Fitur search akan memudahkan pengguna untuk menemukan informasi tertentu yang ada di situs dengan mudah dan cepat. Pengguna hanya memasukkan beberapa kata sebagai kata kunci dan sistem situs akan menampilkan halaman hasil yang sesuai dengan kata kunci. Penggunaan fitur ini tentu lebih menghemat waktu pengguna daripada harus browsing ke semua halaman situs untuk mendapatkan informasi tertentu. Kesalahan pada fitur ini yaitu: 1. Tidak adanya advance search.

2. Kata kunci yang kita gunakan untuk pencarian dengan hasil pencariannya tidak sesuai. Solusi: 1. Terdapat advance search. Dengan tambahan fitur ini akan membuat pengguna lebih mudah mencari kata kunci yang lebih spesifik

Gambar 9. Pencarian Hasil pencarian dengan kata kunci tertentu tidak dapat menemukan hasil yang sesuai kata kunci. 2.3 Navigation Permasalahan pada navigasi ini adalah: 1. Pada menu materi ajar tidak ada pengelompokan tentang materi apa saja yang

sudah ada.

Solusi: 1. Pengelompokan materi sesuai mata pelajaran yang ada agar tidak

membingungkan dalam pencarian materi.

2.4

Structure >Penggunaan white space White space adalah bagian halaman situs yang tidak memiliki teks atau ilustrasi apapun. White space sangat penting dalam perancangan halaman situs karena memudahkan pengguna untuk memproses informasi dengan baik. Sebuah situs yang memiliki sedikit white space akan menyulitkan pengguna untuk

mengidentifikasi informasi yang penting. Sebaliknya, penggunaan white space yang terlalu banyak juga kurang bagus karena halaman situs akan terkesan kosong. Pengembang situs harus menyeimbangkan proporsi white space dengan konten yang ada, artinya white space jangan terlalu sedikit tetapi juga tidak terlalu banyak sehingga pengelompokan informasi dapat dilakukan dengan baik.

>Scrolling Pengguna kebanyakan malas untuk melakukan scrolling dan kalaupun mereka melakukan scrolling, maka mereka hanya melakukannya sedikit saja (satu atau dua kali scrolling). Situs ini sangat buruk dalam hal scrolling karena pengguna harus scrolling berkali-kali untuk mencapai halaman paling bawah karena konten berita yang ditampilkan sangat banyak. Hal ini tentu saja menggangu pengguna yang harus bolak-balik scrolling. Untuk menghindari hal seperti ini sebaiknya konten yang diberikan terlalu banyak dalam satu halaman. Cukup dengan 3-5 konten berita sudah cukup, untuk berita lainnya dapat disediakan Link yang menuju berita lebih banyak.

Scrooling tidak terlalu banyak

2.5

Link Link biasanya digunakan oleh pengguna untuk pergi ke halaman lain sebuah website. Link pada website ini dibuat berwarna biru di bagian body dan huruf berwarna putih dan link-link tersebut ada yang diberi garis bawah dan ada yang tidak, dan link tersebut diberikan popup yaitu ketika kita menggeser kursor kita maka secara otomatis akan memeperbesar judul dari link tersebut. Dibawah ini tampilan link di website smpn1sukorejo.sch.id :

Permasalahan pada Link di situs ini: 1. Tidak ada satu pun Link pada situs ini yang menggunakan tampilan standar yaitu berwarna biru. Hal ini akan sangat membingungkan karena tidak ada bagian dari situs yang terlihat seperti Link. 2. Tidak ada Link menuju berita yang lebih lengkap. Hanya judul saja yang menuju halaman link yang masih kosong tanpa ada isi sesuai dengan link yang dimaksud. 3. Daftar link tidak urut sesuai abjad jadi membingungkan untuk mencarinya. Solusi: 1. Menampilkan Link dengan warna biru dengan digaris bawah merupakan solusi utama dalam permasalahan ini. Dengan menggunakan Link berwarna biru dan digaris bawah maka Link akan terlihat sebagai Link. Sehingga pengguna tidak perlu raguragu untuk mengklik Link yang ingin dituju.

2. Seharusnya Link yang dituju, halamannya harus ada isinya yang sesuai dengan judul link tersebut. 3. Pengurutan link diurutkan sesuai abjad biar pembaca/orang yang melihat situs ini tidak susah mencari link.

BAB III PENUTUP3.1 KESIMPULAN Kesimpulan yang dapat diambil dari analisis yang dilakukan adalah sebagai berikut : Kekurangan yang terdapat dalam website smpn1sukorejo.sch.id yaitu : 1. Tidak terdapatnya search engine yang menyediakan untuk pencarian yang lebih luas. 2. Tidak memiliki ruang komen, sehingga tidak dapat melakukan feedback atau tidak memiliki timbale balik yang informative. Website yang bagus umunya memiliki komponen : 1. Informasi yang disajikan menarik dan berbobot serta update. 2. Menarik dan fast loading. 3. Konsisten. 4. Navigator bar yang konsisten dan tidak menyesatkan. 5. Memiliki tampilan profil, sehingga situs dapat berkembang. 6. Peta site (site map) yang jelas. Kriteria penilaian bagus tidaknya website yang paling utama adalah ada tidaknya kenyamanan yang dirasakan oleh pengunjung website ini. Serta info yang diberikan website ini sudah membantu oleh pengunjung atau belum.

3.2

Referensi1. www.useit.com/alertbox/designmistakes.html 2. Jakob Nielsens Alert Box: The Ten Most Violated