LAPORAN PEMBUATAN WEBSITE

RESTO BALI
Diajukan untuk Memenuhi Tugas Ujian Akhir Semester
Mata Kuliah Pemograman Visual

Oleh :

MOHAMMAD ASKAR DIPA PERWIRA

17.1.03.02.0067

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS NUSANTARA PGRI KEDIRI
TAHUN 2023
 BAB 1

1.1 Gambaran umum

Website Resto Bali adalah website yang berada pada bidang makanan dan minuman
dengan beberapa pelayanan yang tersedia.

1.2 Tujuan
a. Menjelaskan proses pembuatan desain dan front-end website Moderna
b. Mereview website Moderna menggunakan evaluasi 10 usability heuristics for UI
Desain
 BAB II
2.1 Perancangan
2.2 Wireframe
Wireframe adalah sebuah kerangka untuk menata suatu item di laman website atau
aplikasi. Pembuatan wireframe biasanya dilakukan sebelum pembuatan produk tersebut
dilakukan. Item yang berkaitan seperti teks, gambar, layoiting, dan sebagainya.

2.3 Front-End
a. Susunan Folder

b. Folder “assets” berisi tentang file-file gambar yang digunakan website

 c. Berikut adalah contoh koding dari index.html

2.4. Review dan Evaluasi dengan 10 Usability Heuristics for UI Design

Merupakan prosedur analitis untuk memberikan perkiraan yang tepat dan
pengecekan ulang sebelum memberikan kepastian. Dapat disimpulkan bahwa
Heuristic usability atau yang sering dikenal dengan heuristic evaluation adalah
metode untuk menganalisa suatu alat atau objek agar memberikan kemudahan
dalam penggunaan untuk dapat mencapai sutau tujuan. Dalam Studi Nielsen
terdapat 10 prinsip heuristic usability yang dapat diterapkan pada desain user
interface sebagai berikut.

1. Visibility of system status (Status sistem yang mudah dibaca)

Suatu kondisi dimana desain harus selalu memberikan informasi kepada
pengguna tentang apa yang sedang terjadi, melalui feedback yang sesuai dan tepat
waktu. Contohnya pada saat penulisan password.

2. Match between system and the real world (Kecocokan antara sistem dan dunia
nyata)
Desain haruslah memberikan informasi yang mudah dipahami oleh pengguna
seperti menggunakan bahasa sehari-hari dan konsep yang mudah dimengerti. Hal
tersebut dilakukan untuk memberikan kesan keakraban dan kepercayaan bagi
pengguna.
3. User control and freedom (Kebebasan dan kontrol pengguna)
Mampu memberikan kemudahan dan kebebasan kepada pengguna dalam
menggunakan interface untuk menghindari kesalahan yang dapat terjadi. Contohnya
seperti pengguna yang dapat melakukan undo, redo, dan lainnya. Ketika pengguna
tidak sengaja menghapus email, maka pengguna dapat melakukan undo pada pesan
tersebut.

4. Consistency and standards (Standar dan Konsistensi)

Desain yang konsistens dan baik akan memudahkan pengguna dalam
menggunakan fitur-fitur yang tersedia. Konsistensi dapat diterapkan juga dalam
bahasa, penulisan kata-kata, navigasi, dan sebagainya. Sedangkan Standar yang
dimaksud ialah mengenai platform dari sistemnya. Contohnya ketika ingin
mengembangkan aplikasi mobile maka harus mengikuti standar atau petunjuk yang
ada.

5. Error prevention (Pencegahan error)

Kasus error atau bug seringkali ditemukan saat penggunaan sistem dan
kondisi ini tidak dapat dihindari. Namun, dengan desain yang baik hal tersebut dapat
mencegah pengguna melakukan kesalahan. Contohnya ketika ingin melakukan tweet
di Twitter, maka tombol “tweet” tidak akan bisa diklik sebelum pengguna menulis
teksnya.
6. Recognition rather than recall
Meminimalkan pengguna dalam mengingat dengan membuat elemen,
tindakan/ aksi dan opsi terlihat oleh pengguna. Membuat sebuah desain aplikasi
yang membuat pengguna dapat mengenali pola desain yang dibuat sehingga mereka
bisa tetap menggunakan aplikasi tanpa harus mengingat langkah yang harus
dilakukan setelahnya.

7. Flexibility and efficiency of use (Fleksibel dan efisien untuk digunakan)

Poin ini menekankan bahwa sistem sebaiknya memberikan fleksibilitas dan
keefisienan dalam penggunaan. Contoh penggunaan shortcut

8. Aesthetic and minimalist design

Tampilan desain seharusnya tidak berisi informasi yang tidak relevan dan
jarang dibutuhkan. Keberadaan informasi yang tidak relevan akan bersaing dan
mengganggu informasi yang penting dan visibilitas informasi yang perlu bagi
pengguna. Oleh karena, beberapa hal simple seperti pemilihan warna dan
penempatan posisi yang tepat harus diperhatikan baik-baik.

9. Help users recognize, diagnose, and recover from errors

Pesan error seharusnya ditulis dalam bahasa sederhana (tanpa kode),
menunjukkan masalahnya, kemudain memberi saran untuk solusinya. Contohnya
ketika melakukan registrasi pada suatu website ataupun aplikasi maka harus mengisi
 form dengan benar. Ketika terjadi kesalahan saat pengisian (sebelum mengirimkan),
sistem dapat menunjukkan kesalahannya dan memberi saran sebagai solusinya.

10. Help and documentation

Sistem harus memiliki dokumentasi yang relevan dan fitur “help” yang baik,
sehingga pengguna dapat mempelajari segala sesuatu yang terkait dengan sistem.