Professional Documents
Culture Documents
Makalah Analisis Dan Perancangan Sistem
Makalah Analisis Dan Perancangan Sistem
KELAS 5D
Dosen Pengampuh : Nirsal, S.Kom., M.Pd.
2104411098 AL HUSNA
2104411103 MUTIA ANTO
2104411336 ANDI MUHAMMAD ALIF GUNAWAN
2104411494 MUH REZA JAHRIR
Assalamualaikum warahmatullahiwabarakatuh,
Segala puji hanyalah kepunyaan Allah SWT, yang senantiasa melimpahkan
rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan makalah ini.
Serta tak lupa salawat serta salam kepada junjungan Nabiullah Muhammad SAW
atas semua teladannya.
Makalah ini membahas tentang “Perancangan Antarmuka” yang disusun
untuk memenuhi tugas mata kuliah Analisis Dan Perancangan Sistem. Tak lupa
pula kami ucapkan terima kasih kepada Dosen Analisis Dan Perancangan Sistem,
yaitu Bapak Nirsal, S.Kom., M.Pd. yang telah membimbing kami dalam mata
kuliah tersebut.
Dengan menyadari bahwa keterbatasan kemampuan yang ada pada
penulis sehingga bentuk dan isi dari penulisan masih jauh dari kesempurnaan
dan banyak kekurangan. Oleh karena itu, dengan segala kerendahan hati peneliti
dan saran yang bersifat membangun dari semua pihak yang bertujuan
menyempurnakan makalah ini.
Akhir kata, semoga makalah ini dapat memberikan manfaat, khususnya
bagi penulis, dan umumnya bagi semua pihak yang membutuhkan. Terima kasih.
Wassalam.
Penulis
ii
DAFTAR ISI
HALAMAN SAMPUL.................................................................................................i
KATA PENGANTAR...................................................................................................ii
DAFTAR ISI..............................................................................................................iii
DAFTAR GAMBAR...................................................................................................iv
KESIMPULAN........................................................................................................ 25
DAFTAR PUSTAKA................................................................................................. 26
iii
DAFTAR GAMBAR
iv
KELOMPOK VIII PERANCANGAN ANTARMUKA
5
Gambar 1. Tampilan Menu Aplikasi Google Play Store
Jika Anda membuat desain web, user interface harus disesuaikan untuk
perangkat mobile. Ini adalah contoh halaman utama mobile Niagahoster.
6
Gambar 3. Tampilan Halaman Utama Mobile Niagahoster
7
Sebaliknya, jika antarmuka penggunanya buruk, pengguna akan ragu untuk
menggunakan atau mengunjunginya. Mereka akan memilih untuk beralih ke situs
web lain yang memiliki tampilan yang lebih baik.
8
1. Memudahkan Interaksi Pengguna dengan Produk
Pada dasarnya, UI adalah semua elemen visual yang ada di sebuah produk. Ini
termasuk desain layar, tombol, ikon, gambar, teks, dan elemen visual lainnya yang
berfungsi sebagai penghubung antara produk dan pengguna.
Sebuah antarmuka pengguna (UI) penting untuk produk, baik aplikasi
maupun website, karena pengguna dapat berinteraksi dengan produk. UI yang
baik pastinya akan memudahkan interaksi pengguna dengan produk, sehingga
kebutuhan dan tujuan pengguna untuk menggunakan produk dapat dipenuhi.
Tidak hanya itu, jika pelanggan merasa puas, mereka akan lebih setia. Oleh
karena itu, produk yang memiliki UI yang baik akan unggul dari yang lain.
Akibatnya, banyak perusahaan digital mulai membuat produk fitur yang menarik
dan mudah digunakan.
9
persaingan dagang yang semakin ketat, setiap perusahaan harus berusaha
membuat tampilan mereka menarik dan menyenangkan.
2. Desain Responsive
Website Anda dapat diakses dengan mudah di berbagai perangkat, seperti
komputer desktop dan ponsel pintar, berkat desain yang responsif.
Sederhananya, desain yang tidak responsif dari website Anda akan
menyusahkan pengunjung untuk melihat kontennya jika mereka membuka
halaman di ponsel mereka. Selain itu, situs web Anda berfungsi sebagai toko
online. Mungkin saja pengguna situs web Anda akan langsung meninggalkannya.
3. Informasi Terstruktur
Dengan memilih jenis dan warna font yang senada, Anda dapat membuat
tampilan UI dengan informasi yang terstruktur. Untuk menonjolkan beberapa
informasi, Anda dapat meningkatkan ukuran font. Namun, untuk menghindari
10
tumpang tindih, Anda harus menghindari memasukkan elemen yang tidak terlalu
penting sehingga membuat tampilan berantakan.
4. Konsisten
Jika desain interface Anda konsisten, pengguna akan lebih mudah memahami
tampilan website Anda dan memahami fungsi tombol, icon, dan tab yang ada di
sana.
Jika desain tampilan website Anda tidak konsisten, pengguna harus mulai
mempelajari fungsi-fungsinya dari awal. Beberapa halaman website mungkin
memiliki desain yang sedikit berbeda.
Sebagai contoh, tampilan program Microsoft Office tidak banyak berubah
meskipun telah diperbarui berkali-kali. Fungsi dan tombolnya juga tidak banyak
berubah. Pengguna masih dapat melihat icon tombol print dan save.
6. Intuitif
Tampilan desain UI dikatakan baik jika desain tersebut intuitif. Maksudnya,
ketika mereka menggunakan produk digital Anda, mereka tidak perlu berpikir
tentang apa yang mereka lakukan.
Seorang desainer harus mempertimbangkan bagaimana konsumen
berinteraksi dengan produk mereka dan meminimalkan waktu yang dibutuhkan
untuk menggunakannya. Dengan cara ini, konsumen dapat menggunakan produk
Anda tanpa bertanya bagaimana menggunakannya.
11
8.1.4 Jenis-Jenis User Interface
UI dibagi menjadi beberapa jenis, yaitu :
1. Command Line Interface
Command Line Interface (CLI) adalah jenis user interface di mana pengguna
harus mengetikkan perintah untuk berinteraksi dengan perangkat atau aplikasi.
Kebanyakan perangkat dan aplikasi menggunakan GUI karena lebih mudah
digunakan. Akibatnya, jenis UI ini jarang ditemukan pada produk yang menyasar
pengguna awam.
Oleh karena itu, Command Line Interface masih digunakan di beberapa
perangkat lunak dan program tertentu, seperti Terminal Linux dan Command
Prompt Windows, yang keduanya biasanya digunakan untuk mengelola jaringan
dan web hosting dan lebih berfokus pada fungsi daripada tampilan.
Karena CLI berupa baris tulisan saja, keunggulannya adalah kinerjanya yang
sangat ringan. Namun, pengguna CLI harus hafal perintah yang dapat digunakan
12
dalam program karena kesalahan penulisan dapat membuat perintah tidak dapat
dijalankan.
13
Namun, GUI bisa membingungkan penggunanya apabila tidak ditata dengan
baik. Misalnya, sebuah situs web yang memiliki banyak menu sekaligus dan
memaksa pengguna untuk mencari yang mereka butuhkan. Untuk alasan ini,
Anda harus membuat GUI yang terstruktur sehingga mudah digunakan.
3. Menu-Driven Interface
Menu-Driven Interface adalah GUI yang bergantung hanya pada rangkaian
menu dalam pengoperasiannya. Setiap menu membawa pengguna ke halaman
baru di mana mereka dapat menemukan menu lanjutan atau tujuan yang ingin
mereka capai.
Menu pengaturan smartphone adalah contoh biasa dari antarmuka menu-
driven. Ketika Anda mengklik menu tersebut, Anda akan menemukan submenu
yang mengatur berbagai fitur smartphone, seperti suara, tampilan, dan jaringan.
14
Gambar 7. Menu-Driven Interface
4. Form-Based Interface
Form-Based Interface terdiri dari formulir yang dapat diisi pengguna, seperti
namanya. Jenis UI ini biasanya termasuk dalam tipe UI lainnya, seperti GUI di
halaman log in dan registrasi website atau aplikasi.
15
Gambar 8. Form-Based Interface
Namun, ada juga aplikasi dan website yang hanya menggunakan antarmuka
berbasis formulir. Google Forms adalah salah satu contohnya, yang ditujukan
untuk membuat dan menampilkan formulir.
16
5. Touch User Interface
Touch User Interface adalah GUI yang menggunakan sentuhan layar.
Ini lebih praktis daripada GUI yang menggunakan mouse dan keyboard.
Sebagai contoh, alih-alih mengarahkan kursor terlebih dahulu, pengguna
hanya dapat menyentuh menu.
Selain itu, antarmuka sentuhan UI mendukung berbagai jenis gestur
sentuhan. Misalnya, Anda dapat menyentuh ikon aplikasi selama
beberapa waktu untuk menampilkan opsi yang terkait dengan aplikasi
tersebut. Anda juga dapat menggunakan dua jari untuk memperbesar dan
mengecilkan halaman web browser.
17
elemennya disesuaikan untuk layar perangkat mobile yang lebih kecil
daripada desktop.
Pengoperasian UI mobile berfokus pada sentuhan layar, seperti UI
touch, tetapi juga mendukung input tambahan, seperti keyboard.
18
Gambar 10. Struktur Menu Admin
19
2) Halaman Login User
20
Gambar 13. Halaman Login User
b. Input Form Buku
21
c. Form Persewaan Buku
22
5. Desain Output
a. Bukti Persewaan
23
SOAL
1. Apa yang dimaksud dengan UI (User Interface) dan UX (User Experience)
dalam perancangan antarmuka?
Jawaban :
UI (User Interface) merujuk pada elemen-elemen visual yang digunakan
dalam antarmuka pengguna, seperti tombol, ikon, dan tata letak. UX (User
Experience) adalah pengalaman keseluruhan pengguna saat berinteraksi
dengan antarmuka, termasuk seberapa mudahnya mereka menggunakan
sistem dan seberapa memuaskan pengalaman tersebut.
24
5. Apa yang dimaksud dengan responsif dalam perancangan antarmuka?
Jawaban :
Desain responsif adalah pendekatan yang memastikan bahwa antarmuka
dapat menyesuaikan ukuran dan tata letaknya dengan baik pada berbagai
perangkat, seperti komputer desktop, tablet, dan ponsel, sehingga
memberikan pengalaman pengguna yang konsisten.
7. Apa yang dimaksud dengan uji pengguna (user testing) dalam perancangan
antarmuka?
Jawaban :
Uji pengguna adalah proses di mana pengguna sebenarnya menguji prototipe
atau produk yang ada untuk mengidentifikasi masalah, kesalahan, dan
hambatan dalam penggunaan. Hasil uji pengguna digunakan untuk perbaikan
antarmuka.
8. Jelaskan konsep "hukum Fitts" dan bagaimana itu relevan dalam perancangan
antarmuka!
Jawaban :
Hukum Fitts adalah konsep dalam HCI (Human-Computer Interaction) yang
menggambarkan hubungan antara ukuran target dan jaraknya. Ini relevan
dalam perancangan antarmuka karena membantu memastikan bahwa
elemen antarmuka mudah dijangkau oleh pengguna.
25
Jawaban :
Persona pengguna adalah representasi fiktif pengguna yang membantu
perancang memahami karakteristik, tujuan, dan kebutuhan pengguna
potensial. Membuat persona melibatkan pengumpulan data pengguna dan
penggambaran karakteristik utama mereka.
26
KESIMPULAN
27
DAFTAR PUSTAKA
Nisa, rain, D., Devi Haryanti, & Laryngitis. (2021, February 17). Rancangan Antar
Muka (interface). Dreaming in the rain.
https://bluewordiary.wordpress.com/2017/10/17/rancangan-antar-muka-
interface/
Aprilia, P. (2022, October 19). Mengenal user interface: Pengertian, Kegunaan,
Dan Contohnya. Niagahoster Blog.
https://www.niagahoster.co.id/blog/user-interface/
28