MAKALAH

“TUGAS RANCANG IMK”

Disusun untuk memenuhi tugas maka kuliah Interkasi Manusia dan Komputer

Dosen Pengampu : Merryana Lestari

Disusun Oleh:

Feybiola Agustine Andrea Ompo

(672019267)

FAKULTAS TEKNOLOGI INFORMASI

UNIVERSITAS KRISTEN SATYA WACANA

2020
 KATA PENGANTAR

Puji syukur kehadirat Tuhan Yang Maha Kuasa atas segala berkat dan karunia-Nyalah
sehingga saya dapat menyelesaikan tugas makalah yang berjudul “Analysis Website dan
Desain Antarmuka” dalam bentuk maupun isinya yang sangat sederhana ini tepat pada
waktunya.

Adapun tujuan dari penulisan makalah ini adalah untuk memenuhi tugas yang
diberikan oleh dosen Merryana Lestari pada mata kuliah Interaksi Manusia dan Komputer
dan juga dapat dipergunakan sebagai salah satu acuan, petunjuk maupun pedoman bagi
pembaca dalam memahami mengenai Analisis Website dan Desain Antarmuka dari suatu
website bagi user.

Tak lupa juga saya mengucapkan terima kasih kepada Ibu Merryana Lestari selaku
dosen mata kuliah Interaksi Manusia dan Komputer yang telah memberikan tugas ini
sehingga dapat menambah wawasan dan pengetahuan sesuai dengan bidang studi yang saya
pelajari. Saya juga mengucapkan terimakasih kepada semua pihak yang telah membagi
pengetahuannya sehingga saya dapat menyelesaikan makalah ini.

Harapan saya semoga makalah ini membantu menambah pengetahuan dan

pengalaman bagi para pembaca untuk memahami ini terkhusus untuk saya pribadi tentunya.

Makalah ini saya akui masih memiliki banyak kekurangan karena pengalaman yang
saya miliki sangatlah terbatas. Oleh kerena itu saya mengharapkan kepada para pembaca
untuk memberikan masukan-masukan yang bersifat membangun untuk kesempurnaan
makalah ini.

Salatiga, 3 Desember 2020

1
 DAFTAR ISI

KATA PENGANTAR....................................................................................1
DAFTAR ISI...................................................................................................2
BAB I PENDAHULUAN...........................................................................3
A. Latar Belakang............................................................................3
B. Rumusan Masalah........................................................................3
C. Tujuan Pembahasan.....................................................................3
BAB II LANDASAN TEORI .....................................................................5
A. Pengertian Website......................................................................5
B. Pengertian User Interface............................................................5
BAB III PEMBAHASAN.............................................................................6
A. Design Interface..........................................................................6
B. Dekstop App dan Mobile App………………………………….6
C. Task Analysis dan Evaluation………………………………….6
D. Tutorial Penggunaan Aplikasi (help & documentation) ……….20
BAB IV PENUTUP.......................................................................................33
A. Kesimpulan..................................................................................33
B. Saran ...........................................................................................33
Daftar Pustaka................................................................................................34

2
 BAB I

PENDAHULUAN

A. Latar Belakang
User Interface (UI) merupakan serangkai tampilan grafis yang dapat
dimengerti oleh pengguna komputer dan diprogram sedemikian rupa sehingga dapat
terbaca oleh sistem operasi komputer dan beroperasi sebagaimana mestinya.
Berhubungan dengan website, setiap website memiliki user interface yang tentunya
diharapkan dapat dengan mudah dimengerti oleh user dari berbagai kalangan. Dengan
adanya pengetahuan akan bagaimana membuat desain antamuka yang baik akan
membantu berbagai developer khususnya dalam hal pembuatan website untuk
menghasilkan website yang mudah dipahami dan menarik bagi user. Tentunya dengan
desain antarmuka yang tepat dari suatu website akan sangat membantu manusia dalam
mempermudah berbagai urusannya. Apalagi Pada masa sekarang ini web begitu
populer diberbagai kalangan di masyarakat Dunia, Sebab mereka menggunakan web
sebagai media untuk mencari informasi dalam kehidupan sehari-hari. Website
dibangun dengan berbagai fungsi dan kebutuhan sesuai dengan kepentingan atau
keinginan si pembuat. Karena peranan website sangat penting, maka dalam
membangun sebuah website harus memperhatikan beberapa faktor yaitu : Usability,
User Experience, dan User Interface. Tujuan utama dalam pembuatan website adalah
menyebarkan informasi, oleh karena itu sebuah website harus dapat diakses oleh
pengguna.

B. Rumusan Masalah
1. Apa itu Desain Interface?

2. Apa itu Aplikasi berbasis Desktop ( Desktop App) dan Aplikasi

berbasis Mobile (Mobile App)
3. Detail keterangan (Task Analysis & Evaluation) perancangan desain
Desktop Apps dan Mobile App
4. Bagaimana Tutorial penggunaan aplikasi atau user support (help &
documentation) Desktop App dan Mobile App?
3
C. Tujuan Pembahasan
1. Untuk mengetahui apa itu design Interface

2. Untuk mengetahui apa itu Desktop App dan Mobile App

3. Untuk Menjelaskan detail perancangan desain Desktop App dan Mobile

App

4. Untuk menjelasan cara penggunaan Desktop App dan Mobile App yang
telah dirancang

4
 BAB II
LANDASAN TEORI

A. Website
Website pertama kali ada pada tanggal 6 Agustus 1991 oleh Tim Berners-Lee yang
merupakan seorang ahli komputer Inggris. Awal dibuatnya adalah untuk
mempermudah para peneliti dalam hal bertukar infromasi.
Menurut Hidayat (2010) Website adalah kumpulan halaman yang digunakan untuk
menampikan informasi teks, gambar, animasi, suara atau gabungan dari semuanya,
baik yang bersifat statis ataupun yang membentuk satu rangkaian bangunan yang
saling terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman.

B. User Interface
Pada masa awal munculnya komputer, hanya ada sedikit User interface. Kemudian
Antarmuka pengguna berkembang dengan diperkenalkannya antarmuka baris
perintah, yang pertama kali muncul sebagai tampilan layar hampir kosong dengan
garis untuk input pengguna. Pengguna mengandalkan keyboard dan serangkaian
perintah untuk menavigasi pertukaran informasi dengan komputer.
Menurut Lastiansah (2012), user interface adalah cara program dan pengguna untuk
berinteraksi. Istilah user interface terkadang digunakan sebagai pengganti istilah
Human Computer Interaction (HCI) dimana semua aspek dari interaksi pengguna dan
komputer.

5
 BAB III
PEMBAHASAN
A. Design Interface

Desain Interface merupakan desain yang digunakan untuk komputer,

peralatan, mesin, atau situs web yang lebih focus pada pengalaman dan interaksi
user. Fokus dari penggunaan design interface ini ialah untuk membuat interaksi
pengguna sesederhana dan seefisien mungkin. Tentang bagaimana user
berinteraksi dengan komputer menggunakan tampilan antarmuka (interface) yang
ada pada layar komputer dengan baik.

B. Desktop App dan Mobile App

• Desktop Application adalah suatu aplikasi yang dapat berjalan sendiri atau
independen tanpa menggunakan browser atau koneksi internet disuatu
komputer otonom, dengan operating system atau platform tertentu.
• Mobile App adalah aplikasi dari sebuah perangkat lunak yang dalam
pengoperasiannya dapat berjalan diperangkat mobile (Smartphone, Tablet,
iPod, dll), dan memiliki system operasi yang mendukung perangkat lunak
secara standalone. Pengguna juga dapat mengakses sejumlah informasi
informasi penting menggunakan smartphone yang terkoneksi denganlayanan
internet
C. Task Analysis dan Evaluation
Fokus dari Task Analysis adalah pada task dan tujuan dari user itu sendiri, metode
untuk mencapai tujuan tersebut, yang hasilnya adalah desain dari sistem yang
lebih baik dan dapat berguna dengan baik.

1. Task Analysis and Evaluation Desktop App (Les Musik)

Desktop App dari Les Musik dibuat sebagai system informasi dari Les Musik dengan
tujuan untuk memberikan kemudahan bagi para orang tua maupun anak untuk
memperoleh informasi seputar les music dengan jelas dan terpercaya. Dengan adanya
aplikasi desktop ini maka orang tua dan anak tidak akan kesulitan lagi mencari
tempat les music yang menyediakan berbagai course dimana setiap pengajar sudah
sangat terpercaya.

6
 Tampilan Awal
Pada tampilan awal diberikan sedikit gambaran awal tentang aplikasi, dimana untuk
melanjutkan user bisa mengklik tombol getting started

 Tampilan Sign-in dan Sign-Up

Pada tampilan ini user bisa sign-in jika sebelumnya sudah terdaftar atau melakukan
sign-up jika belum pernah mendaftar, dan bisa juga menggunakan akun google atau
facebook dari user. Untuk tampilannya diberikan warna putih yang bermakna clean,
simplicity, serta freedom dan juga warna hitam yang berarti luxury dan elegance.
sambutan

Sign in

7
Sign up

Sign in with facebook

Sign in with google

8
 Tampilan Menu Home
Pada bagian home menampilkan secara garis bersar tentang aplikasi.
Pada bagian ini perpaduan warna dan font nya selaras sehingga tidak
membuat user kewalahan. Tampilannya juga User Friendly sehingga user
lebih mudah mengakses nya dan cukup responsive.

 Tampilan Menu Pendaftaran

Pada bagian ini perpaduan warnanya masih sama dan selaras sehingga
membuat user nyaman. Di bagian in juga ditampilkan Program kelas
vocal,piano dan gitar dan beserta metode yang akan dipelajari yang
disertai dengan biaya les per paket dan juga jadwal les sehingga
memudahkan user untuk menentukan paket dan jadwal les yang akan
diambil.

9
10
11
 Tampilan Menu Tutors
Pada bagian ini ditampilkan tim pengajar setiap kelas sehingga
memudahkan user untuk mengenal pengajar yang akan mengajari
mereka pada setiap bidang les yang diajarkan. Selain itu tersedia CV atau
keterangan tentang pengajar beserta kontaknya agar lebih terpercaya.

 Tampilan Menu Alumni

Pada bagian ini ditampilkan informasi dan komentar seputar alumni dari
les music ini yang tentunya memberikan motivasi dan semangat untuk
melatih diri menjadi lebih baik.

12
 Tampilan Menu Pengumuman
Pada tampilan ini memuat segla informasi seputar pengumuman baik
berupa perlombaan, festival, maupun jadwal kelas sehingga orang tua
bisa mendapatkan informasi seputar les music pada bagian ini.

 Tampilan Menu About

Pada bagian ini tertera gambar-gambar yang memperkenalkan tentang
Les Musik ini beserta info kontak lebih lanjut.

13
2. Task Analysis and Evaluation Mobile App (e-learning untuk anak dibawah 5 tahun)
Mobile App dari e-learning untuk anak di bawah 5 tahun ini dibuat sebagai media
belajar untuk anak-anak dimana tersedia fitu-fitur yang menarik beserta isi kontennya
yang sangat membuat setiap anak penasaran untuk menjalankannya. Tujuannya tidak
lain untuk memberikan kemudahan bagi para orang tua maupun anak untuk memiliki
media belajar yang baik, mendidik, jelas dan terpercaya. Dengan adanya aplikasi
desktop ini maka orang tua dan anak tidak akan kesulitan lagi mencari media bermain
sekaligus belajaryang menyediakan berbagai konten mulai dari belajar music, angka,
maupun huruf.
 Tampilan Awal
Pada tampilan awal diberikan sedikit gambaran awal tentang aplikasi, dimana untuk
melanjutkan user bisa mengklik tombol start.

14
 Tampilan Sign-in dan Sign-Up
Pada tampilan ini user bisa sign-in jika sebelumnya sudah terdaftar atau melakukan
sign-up jika belum pernah mendaftar, dan bisa juga menggunakan akun google atau
facebook dari user. Untuk tampilannya diberikan warna putih yang bermakna clean,
simplicity, serta freedom dan juga warna hijau yang berarti nature, stability.
Sign-up

Sign in with google

15
Sign in with facebook

Berhasil membuat akun

16
 Sign in

 Tampilan Menu Home

Pada bagian home menampilkan secara garis bersar tentang aplikasi.
Pada bagian ini perpaduan warna dan font nya selaras sehingga tidak
membuat user kewalahan. Tampilannya juga User Friendly sehingga user
lebih mudah mengakses nya dan cukup responsive. Pada menu ini tersedia
berbagai permainan yang tidak sekedar sebuah permainan, tetapi
membantu dalam proses belajar anak.

 Tampilan Menu Profil

Pada bagian ini perpaduan warnanya masih sama dan selaras sehingga membuat user
nyaman. Di bagian ini ditampilkan foto profil dan nama user disertai dengan tombol
untuk mengganti foto maupun nama

17
 Tampilan Exit
Pada bagian ini diberikan pilihan kepada user apakah benar-benar ingin menutup
aplikasi atau tidak.

 Tampilan Tambahan
Pada tampilan ini memuat segla tampilan pelengkap seperti bantuan, term
of use, dan berbagai tamabahan seperti gambar dibawah ini:
bantuan

18
Isi bantuan

Chat astrome

Term of use

19
 Lupa kata sandi

D. Tutorial Penggunaan Aplikasi atau User Support (help & documentation)

1. Dekstop App
 Pertama-tama user membuka aplikasi, lalu akan muncul tampilan awal seperti ini dan
diberi tombol ‘getting started’ untuk melanjutkan

20
 Lalu user akan di arahkan ke bagian sign in. namun jika belum membuat akun, maka
pengguna bisa menekan sign-up untuk mendaftar terlebih dahulu atau bisa login
menggunakan akun google atau facebook.
sambutan

Sign in

21
Sign up

Sign in with facebook

Sign in with google

22
 Setelah berhasil masuk maka user akan diarahkan ke menu home sebagai tampilan
awalnya yang memuat berbagai perkenalan seputar isi inti dari konten aplikasi

 Selanjutnya user bisa memilih ingin membuka menu apa yang sudah tersedia di
sebelah kiri. Namun untuk melakukan pendaftaran, user bisa masuk ke halaman
pendaftaran lalu melihat-lihat produk apa saja beserta harganya dari kelas yang
diambil beserta dan juga pemilihan jadwal kelas.

23
24
 Setelah memilih paket kelas, maka user bisa melakukan pembayaran

25
 Selanjutnya user bisa melihat informasi tambahan seputar pengajar beserta CVnya,
lalu ada juga menu khusus yang menampilkan seputar informasi mengenai alumni
yang beisi saran dan tanggapan mengenai course menggunakan aplikasi ini

26
 Orang tua dan anak juga bisa melihat pengumuman apa saja pada menu
pengumuman baik berupa lomba-lomba, konser music, festival dan
berbagai kegiatan lainnya.

 Lalu ada menu about yang menampilkan pengenalanlebih lanjut mengenai aplikasi
disertai dengan dokumentasi-dokumentasi seputar proses coursenya dan juga info
kontak

27
2. Mobile App
 Pertama-tama user membuka aplikasi, lalu akan muncul tampilan awal seperti ini dan
diberi tombol ‘start’ untuk melanjutkan


28


 Lalu user akan di arahkan ke bagian sign in. namun jika belum membuat akun, maka
pengguna bisa menekan sign-up untuk mendaftar terlebih dahulu atau bisa login
menggunakan akun google atau facebook.

Sign-up

Sign in with google

29
Sign in with facebook

Berhasil membuat akun

30
 Sign in

 Namun sebelum membuat akun ada baiknya user melihat terms of use nya terlebih
dahulu atau memilih forgot password jika melupakan kata sandi
Term of use

Lupa kata sandi

31
 Setelah itu user akan diarahkan ke menu profil untuk mengganti foto dan nama jika
ingin

 Lalu user bisa langsung ke menu home untuk melihat permainan apa saja yang ingin
dimainkan. Ada berbagai macam permainan yang tentunya sangat mendidik sebagai
media pembelajaran, seperti bermain sambal belajar huruf, belajar angka, belaajr
music, dan masih banyak lagi.

32
 Jika ingin keluar dari aplikasi user bisa memilih exit untuk keluar.

33
 BAB IV
PENUTUP

A. Kesimpulan
Desain antarmuka yang baik dan menarik adalah pengguna mudah
menggunakannya bahkan pengguna awam sekalipun. User interface dari suatu website
harus dibuat sesimpe mungkin supaya pengguna dapat langsung memperoleh
informasi yang dicarinya tanpa harus menghabiskan waktu dalam mempelajari cara
menggunakan website tersebut.

B. Saran
Dalam pembuatan desain antarmuka dari suatu website yang baik adalah
perlunya pemahaman terlebih dahulu tentang point-point penting mengenai ciri dari
website yang baik seperti apa. Namun perlu diketahui bawha Fokus dari Interaksi
Manusia dan Komputer pada dasarnya adalah Perancangan dan evaluasi desain
antarmuka pengguna dalam suatu system. Sehingga kritikan pada suatu website
memanglah diperlukan untuk mengevaluasi dan merenovasi website dengan baik.

34
 DAFTAR PUSTAKA

Hendrianto, Dani Eko. "Pembuatan Sistem Informasi Perpustakaan Berbasis Website Pada Sekolah
Menegah Pertama Negeri 1 Donorojo Kabupaten Pacitan." IJNS-Indonesian Journal on Networking
and Security 4.3 (2013).

Mulyono, Gede Nyoto. LKP: Pembuatan Desain Interface Website Program Studi DIV Komputer
Multimedia Stikom Surabaya. Diss. Sekolah Tinggi Manajemen Informatika dan Teknik Komputer
Surabaya, 2013.

35