LAPORAN TUGAS BESAR

INTERAKSI MANUSIA DAN KOMPUTER

( SISTEM RANCANGAN APLIKASI DENGAN TEMA BLOGGER )

DISUSUN OLEH :
MOHAMMAD RIZQY PRATAMA ( 180914040 )
2 IFP

TEKNIK INFORMATIKA
STMIK & POLITEKNIK LPKIA
2020
 KATA PENGANTAR

Puji syukur saya panjatkan kehadirat Allah SWT yang telah melimpahkan
rahmat-Nya sehingga saya dapat menyelesaikan tugas besar ini.Tujuan yang akan di
dapat dari mata kuliah ini adalah untuk memahami manusia sebagai sumber daya
terpenting dalam membangun sistem dan juga manusialah yang harus diperhatikan
karena nantinya ialah yang akan menggunakan sistem yang dibangun itu.
Makalah ini berisi untuk memenuhi tugas yang membahas tentang “Interaksi
Manusia dan Komputer”.
Saya menyadari bahwa makalah ini masih banyak kekurangan dan hal-hal
lain sehinggamakalahini dirasa belum sempurna. Hal ini disebabkan keterbatasan
pengetahuan dan kemampuan menyusun.Untuk itu saya mengharapkan kritik dan
saran yang sifatnya membangun demi kesempurnaan danmeningkatkan kualitas
makalah ini

Bandung, 4 Mei 2020

Penyusun

Mohammad Rizqy P

i
 DAFTAR ISI

KATA PENGANTAR..................................................................................................................i
DAFTAR ISI.............................................................................................................................ii
BAB I......................................................................................................................................1
PENDAHULUAN.....................................................................................................................1
1.1. Latar Belakang.......................................................................................................1
1.2.    Tujuan......................................................................................................................2
BAB II.....................................................................................................................................3
PEMBAHASAN.......................................................................................................................3
2.1 Unsur Usability...........................................................................................................3
2.2 Unsur Analisis Tugas....................................................................................................3
2.3 . Unsur Desain Interface..............................................................................................3
2.4 Ragam Dialog...............................................................................................................3
2.5 Prototype....................................................................................................................3
BAB III................................................................................................................................4
KONTEN.............................................................................................................................4
3.1 Unsur Usability......................................................................................................4
3.2 Analisis Tugas............................................................................................................10
3.3 Rancangan Desain.....................................................................................................13
A. Tampilan Halaman Blogger..................................................................................13
B. Tampilan Login....................................................................................................14
C. Tampilan Register................................................................................................15
D. Tampilan Article..................................................................................................16
3.4 Ragam Dialog.............................................................................................................18
BAB III..................................................................................................................................21
KESIMPULAN DAN SARAN...................................................................................................21
3.1         Kesimpulan.........................................................................................................21
3.2         Saran..................................................................................................................21
DAFTAR PUSTAKA................................................................................................................22

ii
 BAB I
PENDAHULUAN

1.1. Latar Belakang

Interaksi Manusia-Komputer (IMK) pada Perkembangan Teknologi

Komputer Pertumbuhan teknologi komputer tidak boleh memiliki pengaruh negatif
terhadap nilai dasar manusia (Universitas Nottingham). Kemajuan antarmuka dan
teknik lain dari pengontrolan komputer (seperti dengan menggunakan joystick dan
fingertip) mendukung peran keyboard dan mouse tradisional.

IMK harus dipastikan bahwa kita (manusia) yang tetap memegang kunci
dalam membuat keputusan. Maka dari itu, “Being Human” menjadi usulan bagi
IMK di tahun 2020. Hal ini dilaporkan secara detil di konferensi pada Maret 2007,
tentang penemuan Microsoft, yang dihadiri oleh ahli-ahli IMK dari seluruh dunia.
Pada 2020, kita masih dapat membaca koran ataupun majalah, tetapi konten dari
koran atau majalah tersebut akan didistribusikan secara digital dan ditampilkan
melalui layar yang dapat dilipat dan dapat ditaruh di saku Anda; atau bahkan
pakaian kita dapat menunjukkan diagnosa kesehatan kita.
Namun, penting sekali dimana kita harus mengkombinasikan inovasi dengan
pemahaman tentang pengaruhnya terhadap manusia. Tanpa pengawasan dan
penilaian yang benar, maka akan terjadi kemungkinan bahwa manusia-individual
ataupun kolektif-tidak dikontrol oleh diri kita sendiri ataupun orang di sekitar kita.

Hal ini dapat menyebabkan komputer bertabrakan dengan nilai dasar manusia
dan konsep manusia seperti wilayah pribadi, identitas, kebebasan, persepsi,
kecerdasan, dan privasi. Abigail Sellen, peneliti senior di Microsoft Corp
mengatakan bahwa komputer telah membentuk banyak aspek di dunia modern
dimana kita ingin menelusuri kemunculan teknologi saat ini yang mungkin
membentuk kehidupan kita di 2020.

Selain itu, dia mengatakan bahwa komputasi memiliki potensi untuk

meningkatkan kehidupan jutaan manusia di dunia. Dia percaya jika teknologi benar-
benar membawa keuntungan untuk umat manusia, maka nilai manusia dan
pengaruh teknologi harus dipertimbangkan segera pada proses desain teknologi.
Maka, rekomendasi untuk Microsoft Corp adalah dengan IMK 2020 dapat
mendesain dan mendukung nilai manusia, tidak tergantung pada cara yang bernilai
ekonomi untuk mendapatkan nilai tersebut.

1
 Microsoft telah memperhatikan masa depan IMK dan interface grafis
berulang-ulang pada Windows OS, sampai 2020. Dijadwalkan tersedia pada 2010,
Windows 7 (versi setelah Windows Vista) menuju ke peningkatan peran, dalam
pandangan

2
 2

perusahaan Redmond, yaitu natural user interface pada level desktop, notebook,
tabletop surface computer, tablet PC, dll. Tanpa ragu-ragu, GUI yang ditawarkan
komputer dan OS sekarang tidak akan terpakai lagi di tahun 2020.

1.2.    Tujuan

 Tujuan yang ingin dicapai dalam mata kuliah ini adalah :

 Mahasiswa mampu memahami pengertian computer
 Mahasiswa mampu memahami penjelasan semua tentang interaksi
manusia dan  komputer
 Mahasiswa mampu memahami manusia sebagai sumber daya
terpenting dalam membangun system.
3
 BAB II
PEMBAHASAN
2.1 Unsur Usability

Usability atau “ketergunaan” adalah tingkat kualitas dari sistem yang mudah
dipelajari, mudah digunakan dan mendorong pengguna untuk menggunakan sistem
sebagai alat bantu positif dalam menyelesaikan tugas.

2.2 Unsur Analisis Tugas

Analisis Tugas merupakan suatu cara untuk menganalisis pekerjaan manusia, apa
yang dikerjakan, bagaimana cara mengerjakannya. Hal apa yang perlu mereka siapkan
dalam mengerjakannya.

2.3 . Unsur Desain Interface

Desain Interface adalah desain untuk komputer, peralatan, mesin, perangkat

komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada
pengalaman pengguna (bahasa Inggris: User Experience) dan interaksi.

2.4 Ragam Dialog

Ragam Dialog adalah pertukaran instruksi dan informasi yang mengambil tempat
antara user dan system komputer,cara yang digunakan untuk mengorganisasikan berbagai
teknik dialog

2.5 Prototype

Prototype adalah sistem atau rancangan yang merupakan contoh atau standar
objek yang akan dikerjakan

3
 BAB III
KONTEN

3.1 Unsur Usability

A. Tema

Tema yang saya pilih adalah Blogger

B. Latar Belakang
Semakin berkembangnya Teknologi Informasi Dan Komunikasi, dan
diiringi juga dengan perkembangan zaman yang cepat, sehingga tidak
menutup kemungkinan berpengaruh pada pola kehidupan manusia semakin
maju terutama pada aspek kehidupan keseharian, dalam ilmu teknologi.
Dengan Blogger terdapat informasi – informasi terkait dengan apa
apa yang terjadi di sekitar manusia dan memungkinkan para pembaca atau
pembuat menampilkan berbagai jenis informasi dengan mudah seperti karya
tulis, kumpulan link internet, dokumen-dokumen, gambar ataupun
multimedia.
C. Manfaat Dan Kegunaan
1. Sarana untuk menuangkan kreatifitas secara online
2. Alat untuk mempromosikan sebuah produk
3. Alat untuk menambah pertemenan karena di dalamnya tedapat diskusi
atau forum
D. Pengembangan Kedepan
Untuk perkembangan kedepannya blog dapat diakses ke oleh siapa
aja, kapan saja, dan di mana saja, selain itu juga siapa saja bias membuat
blog dengan kondisi di mana hanya informasi yang valid dan tidak
mengandung unsur pornografi. Dedicated User dan Casual User, karena
blogger harus ada pembuatan dan pembaca nah untuk pembuatan blog saya
yakin katogeri dedicated user yang bias membuat blog dan untuk pembaca
biasanya kategori Casual User karena hanya mengakses saja

4
 5

E. Komponen Input, Proses Dan Output

Input, komponen yang diperlukan adalah sebagai berikut:

1. Keyboard

Semua tipe keyboard, karena tidak memerlukan keyboard khusu untuk

mengakses blog dan membuat blog.

2. Mouse

Semua tipe Mouse, karena tidak memerlukan mouse khusus untuk

memilih sebuah blog
 6

F. Proses, komponen yang diperlukan adalah sebagai berikut

1. Processor, Central Processing Unit (CPU)

Salah satu jenis perangkat keras dari komputer yang dipakai guna
menangani instruksi yang diberikan dan sering disebut sebagai otak dari
sebuah komputer.
2. Motherboard atau Mainboard atau Baseboard

Papan Sirkuit Cetak (Printed Circuit Board – PCB) yang menampung semua
komponen yang mempunyai peran penting dalam sistem, contohnya CPU,
slot RAM, VGA Port, USB Port dan yang lain.
 7

3. Power Supply

Sebuah perangkat keras yang mempunyai fungsi untuk mensuplai daya atau
tegangan ke dalam komponen komputer.

4. Memori Random Access Memory (RAM)

Jenis perangkat keras komputer berbentuk chip yang digunakan sebagai

media penyimpanan. Dan sesuai namanya, ram ini melakukan penyimpanan
secara acak, singkatnya hanya dapat diakses saat komputer dinyalakan dan
acak.

5. Harddisk (HDD)

Perangkat keras komputer berbentuk piringan yang digunakan sebagai

media penyimpanan.

G. Output, Komponen yang diperlukan sebagai berikut,

1. Monitor
 8

Semua tipe monitor, karena tidak memerlukan monitor khusus untuk

melihat sebuah blog
 9

H. Komponen Software
a. Operating System yang di gunakan Windows 10, karena mudah di gunakan
dan banyak aplikasi yang sudah compatible dengan windows 10
b. Visual Studio Code, karena code editor yang mendukung banyak komponen
atau ekstensi
c. Adobe Xd, Aplikasi untuk mendesain
d. Google Chrome, Browser untuk mengecek hasil
I. . Komponen Brainware
a. Project Manager
 Berusia minimal 23 tahun.
 Berkepribadian anlitis.
 Detail oriented.
 Terampil dengan angka dan deadline.
 Mampu berkomunikasi dengan baik.
 Mempunyai skill problem solving.
 Memiliki jiwa kepemimpinan dan
 kemampuan mengorganisir.
 Wajib bisa bahasa Inggris (lisan dan tulisan).
b. Programmer
 Pengalaman membangun Web Application
 React Js Framework
 MySqlDatabase
 Pengalaman menggunakan GIT di dalam project

c. Desainer

 Minimun 1 – 2 Tahun pengalaman kerja menjadi desainer

 Cakap dalam Photosop,Illustrator dan Corel Draw
 Berusia minimal 20 tahun.
 10

3.2 Analisis Tugas

a. Tugas dari masing – masing anggota team
- Programmer
a. Menghasilkan program yang berfungsi penuh dengan menulis kode
yang bersih dan dapat diuji
b. Berkolaborasi dengan tim internal untuk mengidentifikasi
persyaratan sistem
c. Integrasikan data back-end
d. Desain antarmuka pengguna dan tata letak web menggunakan
praktik HTML / CSS
e. Tingkatkan dan perbaiki program yang ada
f. Lakukan tes berkala dan debugging untuk memaksimalkan efisiensi
program
g. Buat dokumentasi teknis untuk dukungan pengguna
h. Sarankan fitur baru untuk meningkatkan navigasi dan pengoperasian
program
i. Tetap up to date dengan perkembangan industri
j. Mengedit, menulis, atau mendesain konten situs web, dan
mengarahkan anggota tim yang menghasilkan konten
k. Menerjemahkan dokumen hasil perancangan dan desain ke dalam
kode program sesuai dengan platform yang telah ditentukan.
l. Membuat dokumentasi modul-modul program aplikasi dibantu oleh
tim dokumentasi teknis/tenaga pendukung
m.
- Desiner UI/UX
a. Buat identitas merek
b. Kembangkan mockup dan wireframe dengan ketelitian rendah untuk
studi produk UX
c. Produksi tata letak kesetiaan tinggi dan spesifikasi grafis
d. Buat konten visual yang menarik, termasuk pemilihan tipografi,
skema warna dan ikonografi
e. Desain UI / front-end yang sederhana, bersih, dan menarik untuk
aplikasi web
- Team Project / Project Manager
a. Mengkoordinasi pelaksanaan pekerjaan, mulai dari perencanaan
sampai pekerjaan selesai dan diterima baik oleh Pemberi Kerja.
b. Mengkoordinasikan pelaksanaan tugas setiap tenaga ahli
sehingga tercipta suasana kerja yang efektif.
c. Bersama tenaga ahli lain menyusun rencana kerja dan kerangka
laporan serta mendistribusikan pekerjaan kepada tenaga ahli dan
pendukung sesuai dengan kualifikasi yang dimiliki.
 11

d. Menetapkan kerangka pelaksanaan kerja yang menjadi acuan

kerja tenaga ahli lainnya.
e. Memastikan bahwa pekerjaan terlaksana sesuai dengan rencana
serta memenuhi persyaratan, ketentuan, dan kualitas yang telah
ditetapkan
b. Jadwal pekerjaan dari masing masing team
- Programmer
Jadwal Pekerjaan
Hari : Senin – Rabu
Tempat : Kantor
Pukul : 09:00 – 16:00
Hari : Kamis – Jum’at
Tempat : Bebas
Pukul : Menyesuaikan
- Desainer UI/UX
Jadwal Pekerjaan
Hari : Senin – Rabu
Tempat : Kantor
Pukul : 09:00 – 16:00
Hari : Kamis – Jum’at
Tempat : Bebas
Pukul : Menyesuaikan
- Team Project
Jadwal Pekerjaan
Hari : Senin – Rabu
Tempat : Kantor
Pukul : 09:00 – 16:00
Hari : Kamis – Jum’at
Tempat : Bebas
 12

Pukul : Menyesuaikan
c. Gambarkan timeline dari jadwal pekerjaan

Perencanaan & Perancangan Durasi(Hari)  Hari

Analisa Sistem 2
Pengumpulan Data 3 Senin
Struktur Situs 1
Review dan Revisi (Meeting) 1
Desain  
Web Desain Mockup 5
Membuat Struktur HTML 7
Desain tampilan dengan CSS 18 Selasa - Kamis
Koreksi dan Revisi 1
Penyelesaian desain 1
Programming  
Coding 25
Penggabungan Desain dan 14 Selasa - Kamis
Coding
Koreksi dan revisi 1
Penyelesaian pemrograman 1
Uji Coba  
Uji coba sistem lokal dan server 3 Jum’at /
Koreksi dan Revisi 1 Menyesuaikan
Tes keseluruhan 1
Peluncuran  
Online (Desain & Programming) 1 Menyesuaikan
Total 87
Maintenance dan Setiap Hari / Setiap
Pengembangan Bulan
 13

3.3 Rancangan Desain

A. Tampilan Halaman Blogger

Maka berdasarkan tampilan diatas maka terdapat Navbar ( Navigasi Menu )

dan button untuk login ( bagi yang sudah punya user) dan untuk register
( bagi yang belom punya akun)
Detail Desain Halaman Awal:
1. Navigation Menu
2. Button Login dan Register
3. Backgroung Gambar
 14

B. Tampilan Login

Maka berdasarkan tampilan diatas maka terdapat form Login, maka kita
desain tampilan login sebagai berikut :
Detail Desain Halaman Login:
1. Gambar Background
2. Parameter Form : - Label - Button
- Text Area
3. Label dengan ketentuan : - Tipe font roboto
- Size 16
- Warna dengan kode #fff
4. Button : - Font dalam command Button
Type Roboto, size 16, warna (kode hexa #fff)
- Background
Linear-gradient
Dengan kode hexa warna #32be8f, #38d39f, #32be8f
 15

C. Tampilan Register

Maka berdasarkan tampilan diatas maka terdapat form Register, maka kita
desain tampilan register sebagai berikut :
1. Gambar Background
2. Parameter Form :
- Label
- Button
- Text Area
3. Label dengan ketentuan :
- Tipe font roboto
- Size 16
- Warna dengan kode #fff
4. Button : - Font dalam command Button
Type Roboto, size 16, warna (kode hexa #fff)
- Background Linear-gradient
 16

Dengan kode hexa warna #32be8f, #38d39f, #32be8

D. Tampilan Article

Maka berdasarkan tampilan di atas maka terdapat list artikel yang sudah ada,
button search dan list artikel yang popular maka kita desain tampilan artikel
sebagai berikut :
1. Parameter Tampilan :
- Label
- Button
- Search
- Image
Label dengan ketentuan :
- Tipe font roboto
- Size 16
- Warna dengan kode #00000 ( warna hitam )

Button dengan ketentuan :

 17

- Font dalam command Button

- Type Roboto, size 16, warna (kode hexa #fff)
- Background Linear-gradient dengan kode hexa warna #32be8f, #38d39f,
#32be8f

Search dengan ketentuan :

- Icon dari font awesome
- Input Text dengan ukuran 100 * 20 dengan placeholder search
Image dengan ketentuan :
- Image dengan ukuran HD atau large ( 1024 * 748 )
 18

3.4 Ragam Dialog

A. Tampilan Halaman Index

Button Login -> ditujukan untuk memindahkan halaman ke halaman login

Login -> untuk Menuju tampilan login
Register -> untuk menuju tampilan register
Article -> untuk menuju tampilan artikel yang bisa dilihat oleh user yang
tidak login
 19

B. Tampilan Login

No 1. Navigasi untuk form login

No 2. Navigasi untuk forgot password ( untuk lupa password )
No 3. Navigasi untuk LOGIN
C. Tampilan Register

No 1 Form Login yang terdiri dari nickname, username ,email, password

dan confirm password
 20

No 2 Button SignUp

D. Tampilan Article

No 1 -> Button read more untuk menampilkan isi seluruh artikel atau
Blog
No 2 -> Form untuk mencari artikel
21
 BAB III
KESIMPULAN DAN SARAN

3.1         Kesimpulan

Untuk menghasilkan sistem yang bermanfaat (usable) dan aman (safe),

artinya sistem tersebut dapat berfungsi dengan baik. Sistem tersebut bisa untuk
mengembangkan dan meningkatkan keamanan (safety), utilitas (utility),
ketergunaan (usability), efektifitas (efectiveness) dan efisiensinya (eficiency).
Sistem yang dimaksud konteksnya tidak hanya pada perangkat keras dan perangkat
lunak, tetapi juga mencakup lingkungan secara keseluruhan, baik itu lingkungan
organisasi masyarakat kerja atau lingkungan keluarga. Sedangkan Ketergunaan
(usability) disini dimaksudkan bahwa sistem yang dibuat tersebut mudah digunakan
dan mudah dipelajari baik secara individu ataupun kelompok. Utilitas mengacu
kepada fungsionalitas sistem atau sistem tersebut dapat meningkatkan efektifitas
dan efesiensi kerjanya.

3.2         Saran

Untuk kemajuan teknologi computer maka diharapkan agar perkembangan

computer kedepan mampu mengubah pola fikir dan menjadikan masyarakat
Indonesia menjadi manusia yang kreatif dan inovatif. Serta tumbuhnya kratifitas
hingga menghasilkan suatu karya yang berguna bagi manusi. Diharapkan dengan
adanya Interaksi manusia dan komputer dapat dimanfaatkan sesuai dengan
kegunaan.

Kemajuan computer dimasa mendatang diharapkan dapat membantu semua

jenis pekerjaan manusia sehingga mereka mampu menyelesaikan pekerjaan mereka
dengan cepat karena dimasa depan teknologi akan semakin canggih dan semua
pekerjaan dikerjakan dengan system komputerisas

21
 DAFTAR PUSTAKA

https://www.academia.edu/7480675/Laporan-tugas-akhir-imk

https://aplikasiergonomi.wordpress.com/2012/04/12/faktor-user-interface-usability-dan-
user-experience-pada-perancangan-website-dalam-konteks-interaksi-manusia-komputer-
imk/

http://djnugrohoakadmisi.blogspot.com/2018/10/makalah-interaksi-manusia-dan-
komputer.html

https://undraw.co/illustrations

22