1. INTERAKSI MANUSIA KOMPUTER
Menganalisis Website Pendidikan
Tentang
Kelompok 5
1. Yasinta Octalia .T ( NIM : 12130426 )
2. Sevensius Malau ( NIM : 12136962 )
3. Rizki Dana Ratih ( NIM : 12131081 )
4. Arifah Hidayah ( NIM : 12133544 )
5. Muhammad Rouf ( NIM : 12136886 )
Jurusan Manajemen Informatika
Akademi Manajemen Informatika dan Komputer
Bina Sarana Informatika
2014

2. KATA PENGANTAR
Dengan rasa syukur kehadirat Tuhan Yang Maha esa, atas segala rahmat , hidayah dan
bimbingan-nya , sehingga kami penulis dapat menyelesaikan makalah ini.
Penulisan makalah ini digunakan untuk memenuhi salah satu tugas mata kuliah Interaksi Manusia
Komputer. Oleh karena itu, kami mengucapkan rasa terima kasih kepada :
1. Bpk Mohammad Noviansyah selaku dosen pengajar mata kuliah Interaksi Manusia Komputer.
2. Teman-teman kelas 12.3C.06 semua yang telah mendukung dan memberi semangat kepada kami
Semoga bantuan dan dukungan yang telah diberikan kepada kami mendapat balasan serta karunia dari
Allah SWT. Kami menyadari penulisan makalah ini jauh dari sempurna , maka dari itu kami berharap
saran dan kritik untuk kesempurnaan makalah ini. Akhirnya kami berharap semoga makalah ini
memberi manfaat yang sebesar-besarnya bagi kami dan pihak yang memerlukan.
Bekasi, 2 Januari 2015
Penulis
Interaksi Manusia dengan Komputer Page 2

3. DAFTAR ISI
Halaman Judul
Kata Pengantar i
Daftar Isi ii
BAB I PENDAHULUAN
1.1 Latar belakang……………………………………………………………………… 3
1.2 Ruang Lingkup.........………………………………………………………………. 3
1.3 Tujuan Penulisan.………………………………………………………………….. 3
1.4 Metode Penulisan....................................................................................................... 3
BAB II TINJAUAN PUSTAKA
2.1 Interaksi Komputer dan Manusia………………………………………………...... 4
2.2 Usability...................………………………………………………………………. 4-6
2.3 User Experience.... ………………………………………………………………… 6
2.4 User Interface...................................................…………………………………..... 6
BAB III ANALISIS WEB SMA N 6 BOGOR
3.1 Website SMA N 6 Bogor…………………………………………………………... 7-8
3.2 Logo……………………………………………………………………………....... 9
3.3 Animasi Berbasis Flash............................................................................................. 10
3.4 Bahasa Pemilihan dan Ukuran Font.......................................................................... 10-11
3.5 Sistem Menu dan Navigasi........................................................................................ 11-12
3.6 Link............................................................................................................................ 12
3.7 Outdated Content....................................................................................................... 13
3.8 Tampilan Website Konsisten...................................................................................... 14
3.9 Menu Login dan Form Login....................................................................................... 14
3.10 Penempatan Menu Utama............................................................................................ 14
BAB IV PENUTUP
4.1 Kesimpulan………………………………………………………………………......... 15
4.2 Saran………………………………………………………………………………....... 15
Daftar Pustaka……………………………………………………………………………......... 16
Interaksi Manusia dengan Komputer Page 3

4. Interaksi Manusia dengan Komputer Page 4

5. BAB 1
PENDAHULUAN
1.1 Latar Belakang
Dengan perkembangan teknologi yang semakin pesat, informasi merupakan salah satu bagian
terpenting dalam kehidupan. Salah satu cara penyampaian informasi yakni dengan media Internet
melalui website. Ada banyak tujuan dalam pembuatan website disesuaikan dengan tujuan
organisasi maupun pribadi. Dalam pembuatan website yang baik, ada beberapa hal yang harus
diperhatikan agar maksud dan tujuan (informasi) dari website tersebut bisa tercapai dan tidak
membuat pengunjung bingung atau malas untuk mengunjungi web tersebut. Hal – hal yang perlu
diperhatikan yakni : usability, user experience, dan user interface sehingga membuat suatu situs
menjadi nyaman untuk dikunjungi. Dengan memperhatikan ketiga hal tersebut, akan dilakukan
analisis terhadap situs http://www.smansixbo.sch.id/
1.2 Ruang Lingkup
Pada penulisan makalah ini, Penulis membahas masalah mengenai Tampilan pada web SMA
Negeri 6 Bogor
1.3 Tujuan Penulisan
> Dalam penulisan makalah ini, penulis mempunyai tujuan dari pembuatan makalah ini yaitu
untuk memenuhi laporan tugas Interasi manusia dengan computer .
> Dapat mengetahui ciri-ciri website yang baik dan kurang baik;
> Dapat membandingkan analisa yang dilakukan dengan teori yang telah diterima;
1.4 Metode Penulisan
Untuk menyusun penulisan makalah ini penulis mengumpulkan bahan yang diperlukan dengan
mencari informasi dari internet untuk selanjutnya diolah.
Interaksi Manusia dengan Komputer Page 5

6. BAB 2
TINJAUAN PUSTAKA
2.1 Interaksi Komputer dan Manusia
Interaksi Komputer dan Manusia adalah ilmu yang mempelajari interaksi antara komputer dan
manusia yang biasa terjadi pada user interface dimana termasuk interaksi dengan software dan
hardware(Association for Computing Machinery).
Tujuan utama dari Interaksi komputer dan Manusia adalah untuk memperbaiki interaksi antara
komputer dan manusia dengan membuat komputer lebih bermanfaat sesuai dengan keinginan
pengguna. Lebih spesifik lagi, Interaksi Komputer dan Manusia terkait dengan :
• Metode dan proses untuk mendesain interface.
• Metode untuk mengimplementasikan interface (software toolkits and libraries; penggunaan
algoritma yang lebih efisien)
• Teknik untuk mengevaluasi dan membandingkan interface.
• Mengembangkan interface yang baru dan teknik interaksi.
• Mengembangkan gambaran dan prediksi dari model serta teori interaksi
2.2 Usability
Usability adalah sebuah atribut yang merujuk kepada seberapa mudah sesuatu digunakan.
Lebih spesifik lagi, merujuk kepada seberapa cepat seseorang belajar untuk menggunakan sesuatu,
seberapa efisien penggunaannya, seberapa lama dapat diingat, berapa kesalahan yang dilakukan dan
berapa lama seseorang suka untuk menggunakannya (Jakob Nielsen, Prioritizing Web Usability).
Tujuannya yaitu :
a. Efektif digunakan
b. Efisien digunakan
c. Aman digunakan
d. Punya utility yang baik
e. Mudah dipelajari
f. Mudah diingat bagaimana menggunakannya
Interaksi Manusia dengan Komputer Page 6

7. Usability didefinisikan melalui lima komponen yakni :
a. Learnability
Learnability menjelaskan tingkat kemudahan pengguna untuk memenuhi task-task dasar ketika
pertama kali mereka melihat/menggunakan hasil perancangan.
b. Efficiency
Efficiency menjelaskan tingkat kecepatan pengguna dalam menyelesaikan task-task setelah mereka
mempelajari hasil perancangan.
c. Memorability
Memorability menjelaskan tingkat kemudahan pengguna dalam menggunakan rancangan dengan
baik, setelah beberapa lama tidak menggunakannya.
d. Errors
Errors menjelaskan jumlah error yang dilakukan oleh pengguna, tingkat kejengkelan terhadap error
dan cara memperbaiki error.
e. Satisfaction
Satisfaction menjelaskan tingkat kepuasan pengguna dalam menggunakan rancangan. Menurut Jakob
Nielsen dalam bukunyaPrioritizing Web Usability terdapat dua belas hal yang harus diperhatikan
dalam membangun sebuah website, yakni :
a) Nothing to Hide
b) The Web User Experience
c) Revisiting Early Web Usability Findings
d) Prioritizing Your Usability Problems
e) Search
f) Navigation and Information Architecture Readability & Legibility
g) Writing for the Web
h) Providing Good Product Information
i) Presenting Page Elements
Interaksi Manusia dengan Komputer Page 7

8. j) Balancing Technology with People's Needs
k) Design That Works
2.3 User Experience
Pengalaman tentang menjelajahi web seseorang terbentuk oleh banyak faktor, di antaranya :
a) Bagaimana sebuah web didesain sesuai keinginan
b) Kemampuan dan keterbatasan,
c) Isi dan tampilan web
d) Fungsionalitas website.
Beberapa faktor diatas penting dalam pengembangan agar pengguna mendapatkan
pengalaman yang efisien, efektif dan menyenangkan. Sebuah situs yang baik, harus memperhatikan
para pengunjungnya dalam memakai situsnya, artinya website disesuaikan dengan target
pengunjungnya dan kemudahan dalam pemakaian sehingga pengunjung tidak mengalamai kesulitan.
Dalam pembagiannya User experience dibedakan menjadi 3 tingkatan yaitu beginners, intermediate
dan expert. Desain dari sebuah web sebaiknya fokus pada pengguna dengan tingkat kemampuan
intermediate.
2.4 User Interface
Secara umum user interface merupakan bagian dari komputer dan softwarennya dimana
seseorang dapat melihat, mendengar, menyentuh, berbicara. User interface memilki dua komponen
dasar yakni : input dan output. Input adalah bagaimana seseorang berkomunikasi dengan komputer
tentang keinginannya. Beberapa alat input yang umum yakni : keyboard, mouse, trackball, one’s
finger(untuk layar sentuh), dan one’s voice(untuk instruksi berdasarkan suara). Output adalah
bagaimana komputer memberikan hasil dari hasil perhitungan dan kebutuhan yang diperlukan
pengguna.
BAB 3
ANALISIS WEB SMA Negeri 6 Bogor
Interaksi Manusia dengan Komputer Page 8

9. 3.1 Website SMA Negeri 6 Bogor
Web http://www.smansixbo.sch.id// merupakan website Sekolah Menengan Atas di kota Bogor
adalah website yang mengupas tentang informasi pendidikan di kota Bogor. SMA Negeri 6 Kota Bogor
Berdiri pada tahun 1989, sebagai alih fungsi dari SPG atau Sekolah Pendidikan Guru, dengan SK
MENDIKBUD NO. 0426/0/1991, Tanggal 15 Juli
Di bawah ini adalah gambar halaman utama dari Website SMA Negri 6 Bogor Halaman
ditampilkan secara keseluruhan dengan menghilangkan scroll yang ada.
• Logo
• Header dalam bentuk animasi flash
• Button menu
• Login
• Pulldown menu
• Content
• Searching
• Paging
• Link
Interaksi Manusia dengan Komputer Page 9

10. Halaman Utama www.smansixbo.sch.id
Analisa terhadap web smansixbo.sch.id dilakukan dengan web usability. Contoh – contoh
kesalahan dalam website yang sering terjadi dan memberikan solusi mengenai kasus tersebut
Interaksi Manusia dengan Komputer Page 10

11. 3.2 Logo
Logo merupakan salah satu unsur penting dalam website karena memberi tahukan kepada
pengunjung tentang web yang sedang dikunjungi. Pada website ini logo telah diberikan dengan jelas.
Permasalahan yang dijumpai pada logo di website ini :
• Logo berada pada bagian kanan atas website tulisan nya terlalu kecil kurang besar
Solusi untuk permasalahan diatas adalah :
• Logo sebaiknya pada ukuran Label dan Nama sekolah harus di perbesar agar pengunjung web
dapat melihat dengan jelas.
• Logo sebaiknya dibuat menjadi bergabung dengan animasi berjalan tapi dengan tampilan
dan tulisan logo yang lebih jelas
Interaksi Manusia dengan Komputer Page 11

12. 3.3 Animasi Berbasis Flash
Setiap halaman menu pada website ini terdapat animasi flash pada bagian atas yang ukurannya
sedang ,dan tidak harus menggunakan scrolling secara vertikal.
3.4 Bahasa Pemilihan dan Ukuran Font
Bahasa yang digunakan dalam suatu situs web sebaiknya menggunakan bahasa baku ataupun
bahasa yang sudah digunakan pengguna computer atau bahasa yang sudah familiar di dunia website.
Prinsip utama dalam menentukan font dan warna dalam satu halaman web adalah berupaya untuk
membatasi font-style Dari sisi text dan penggunaannya, masih ada yang harus di evaluasi,
diantaranya:
• Pemakainan bahasa yang bercampur antara bahasa Indonesia dan bahasa asing. Ada menu
yang berbahasa Indonesia dan ada juga yang berbahasa inggris.
• Jenis font yang digunakan pada pull down menu sudah terbilang bagus hanya saja ukuran
agak di perbesar sedikit
Solusi untuk permasalahan diatas adalah :
Interaksi Manusia dengan Komputer Page 12

13. • Akan lebih baik jika menggunakan bahasa Indonesia saja ataupun bahasa inggris saja.
Membuat website dalam dua versi yang yakni : dengan menggunakan Bahasa Indonesia dan
Bahasa Inggris.
3.5 Sistem Menu dan Navigasi
Sistem menu dan navigasi merupakan hal terpenting dalam suatu situs website, karena merupakan
arah untuk pengunjung mengeksplorasi segala isi yang terdapat dalam website tersebut.
Kemudahan bernavigasi dalam situs web merupakan sebuah tantangan tersendiri dalam merancang
user interface agar membuat pengunjung senyaman mugkin dalam memakainya. Navigasi membantu
pengunjung untuk menemukan jalan yang mudah ketika menjelajahi situs web, memberitahu mereka
dimana berada dan kemana mereka dapat pergi.
• Pulldown Menu
Pada website ini, menu dibuat dengan berbagai jenis:
a) Menu berbentuk button pada bagian atas dengan menggunakan icon pada setiap button
b) Menu yang pulldown yang terletak pada bagian kiri halaman website , bagian tengah
website dan bagian atas website.
Ada beberapa hal yang mungkin dirasa kurang dari menu yang dimiliki website ini, diantaranya :
a. Pada bagian pulldown menu diletakkan ditempat yang berbeda dengan fungsi yang hampir
sama.hal ini tentunya akan membingungkan pengunjung dalam memilih menu.dan membuat
tampilan website tidak efesien.
b. Navigasi berbentuk link terlalu banyak,hingga membuat pengunjung bingung .
Navigasi button dengan icon yang tidak terlalu dimengerti.
Rekomendasi perbaikan dari hal tersebut adalah :
b. Menu pulldown memang memiliki beberapa keuntungan yaitu hemat tempat ketika tidak
dikunjungi dan lebih efektif ketika dilakukan pengelompokan, tetapi sebaiknya menu pulldown
diletakkan hanya di satu tempat.
c. Menu Navigasi dalam bentuk link seharusnya tidak digunakan terlalu banyak, apalagi menu-menu
tersebut kurang dimengerti oleh pengunjung web.
Interaksi Manusia dengan Komputer Page 13

14. 3.6 Link
Pada website ini terdapat beberapa kekurangan dalam pemakaian link, yakni :
• Pewarnaan pada link tidak mengikuti warna standar sebuah link, sehingga link yang
sudah dikunjungi (diklik) tidak mengalami perubahan.
3.7 Outdated Content
Interaksi Manusia dengan Komputer Page 14

15. Analisis pertama yang kami dapat terhadap smansixbo.sch.id up date data dilakukan 2 minggu
yang lalu untuk menganalisis apakah web tersebut tergolong kepada web suck atau tidak. Sampai
terakhir penulis menganalisis kembali website(7 Desember 2014) isi konten-konten tersebut tidak
pernah diupdate. Pengunjung biasanya menginginkan informasi yang uptodate. Sebaiknya, konten-
konten diupdate secara periodik, sebab setiap hari selalu ada informasi baru yang menarik untuk
ditampilkan.
3.8 Tampilan Website Konsisten
Penting sekali sebuah website untuk tetap mempertahankan layout atau tampilan. Hal ini tentu
saja untuk memudahkan pengunjung website agar tidak bingung ketika memasuki halaman yang
masih dalam satu website. Terkadang pengunjung akan kebingungan jika halaman website berubah-
ubah tampilannya di setiap halaman, pengunjung bisa saja merasa salah memasuki halaman tersebut.
Secara umum layout web ini dapat dikatakan konsisten untuk setiap halaman, seperti terlihat pada
Gambar Pada setiap halaman, bagian atas terdapat header berupa animasi berbasis flash berupa dan
pilihan menu-menu utama. Begitu pula dengan menu-menu yang terletak pada bagian sebelah kiri dan
footer. Tiga bagian ini selalu tetap. Warna latar belakang untuk setiap halaman begitu juga dengan
animasi berbasis flash yang samasesuai dengan menu yang dipilih.
3.9 Menu login dan Form Login
Terdapat sebuah fungsi login yang terletak pada kanan atas.
Interaksi Manusia dengan Komputer Page 15

16. Form login menggunakan nama pengguna & password yang telah didaftarkan. Atau bisa
menggunakan google plus jika punya , kalau tidak harus registrasi ulang
Form login diletakan di bagian tengah sebelah kanan pada website ini yang seharusnya terletak di
kanan atas web.
3.10 Penempatan Menu Utama
Urutan fokus mata pengguna dalam mengamati sesuatu dimulai dari bagian atas, kiri, kanan,
dan terakhir adalah bagian bawah. Peletakan menu utama pada web dapat dikatakan cukup baik jika
diletakkan pada bagian kiri. Dengan demikian, ketika pengguna menggunakan web maka pengguna
bisa langsung mengetahui konten apa saja yang ditawarkan oleh web.
BAB 4
PENUTUP
Interaksi Manusia dengan Komputer Page 16

17. 4.1 Kesimpulan
Web Usability,User experience dan User Interface merupakan hal - hal penting dalam
membangun sebuah website, ketiga hal inilah yang akan menentukan apakah web yang dibuat telah
efektif dan efisien dalam penyampaian tujuan yang diharapkan. Web merupakan salah satu media
penyalur yang dapat mempromosika segala sesuatu tanpa tatap muka tetapi sudah di mengerti
menggunannya contoh nya website Pendidikan untuk mempromosikan Sekolahnya Secara sekilas,
website ini kurang memperjelas apa yang id dapat dari sekolah tersebut. Pada pengembangan website
http://www.smansixbo.sch.id, masih terdapat banyak kekurangan diantaranya : Tidak konsisten dalam
tampilan, terlalu banyak menggunakan text image, tidak ada breadcrumb, link yang tidak dibedakan,
hingga content yang tidak pernah di update, tidak menampilkan tanggal saat memasukan data dan
segala hal yang telah dibahas pada bab pembahasan. Kekurangan-kekurangan ini membuat web
terlihat kurang profesional. Kondisi ini dapat membuat kepercayaan pengguna/pelanggan terhadap
perusahaan berkurang.
4.2 Saran
Diharapkan dengan hasil analisis web ini dapat menjadikan masukan bagi pengembang
website agar bisa membuat website ini lebih baik. Kekurangan-kekurangan yang masih ditemui,
sebaiknya segera diperbaiki agar web dapat terlihat profesional. Dengan demikian, kepercayaan
pengguna/pelanggan terhadap sekolah akan meningkat serta bisa mereferensikan sekolah SMA 6
Bogor ke semua orang.
Interaksi Manusia dengan Komputer Page 17

18. DAFTAR PUSTAKA
Dari website http://www.smansixbo.sch.id/home
Interaksi Manusia dengan Komputer Page 18