Analisa Website

http://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 PASURUAN

Jl. 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 hidayah-
Nya. 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 ISI

KATA 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 task-

task 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
PEMBAHASAN

Dalam 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 Garis Tipis dan Teks Garis Tebal dan Teks
Putih, Krem Biru, Hitam 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 ragu–ragu 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
PENUTUP

3.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 Referensi
1. www.useit.com/alertbox/designmistakes.html
2. Jakob Nielsen‟s Alert Box: The Ten Most Violated