BAB III
METODOLOGI PENELITIAN
3.1 Analisis Permasalahan
Sebuah website pada umumnya memiliki komponen layout yang beragam. Hal ini disebabkan oleh beragam konsep yang dihasilkan oleh pengembang website tersebut. Semakin kreatif seorang pengembang dalam berfikir, serta didukung dengan pengetahuan tentang layout website yang baik, maka layout yang dihasilkan akan semakin baik pula.
Pada penelitian ini, akan dibangun sebuah website layout builder untuk mempermudah pengembang website dalam memahami elemen dalam pembuatan sebuah layout website. Layout builder yang dirancang akan berfokus kepada komponen website e-commerce. Dalam pembuatan komponen tersebut akan mengambil referensi dari website e-commerce terkenal di Indonesia, yaitu Tokopedia.
Kemudian, website layout builder memiliki fitur editor yang dapat digunakan oleh pengguna untuk membuat sebuah layout website. Pada fitur ini, pengembang melakukan pengodean layout yang ingin dibuat. Setelah itu, layout tersebut dapat diunggah ke media sosial yang ada pada aplikasi. Konsep media sosial yang ada pada website layout builder ini digunakan untuk menciptakan lingkungan virtual antar pengembang website sehingga referensi dalam pembuatan layout website akan semakin beragam.
3.2 Rancangan Penelitian
Penelitian ini dilakukan sesuai dengan tahapan perancangan yang digambarkan dalam diagram alir pada Gambar 3.1. Diagram alir ini meliputi kesuluruhan dari metode penelitian yang digunakan hingga tahap pengujian.
Gambar 3.1. Diagram Alir Penelitian
Penjelasan dari tiap-tiap proses dalam diagram alir penelitian tersebut adalah sebagai berikut:
1. Metode Pengumpulan Data
Pengumpulan data pada penelitian ini akan menggunakan dua metode yaitu studi literatur dan penyebaran kuesioner. Penjelasan dari metode tersebut adalah sebagai berikut:
a. Studi Literatur
Tahap studi literatur merupakan tahap dimana peneliti mengumpulkan informasi mengenai literatur yang berkaitan dengan penelitian dari buku, jurnal, dan sumber lainnya. Hal ini dilakukan untuk meningkatkan pengetahuan dan memperbanyak referensi bagi laporan penelitian.
b. Kuesioner
Kuesioner digunakan untuk memperoleh data dari responden yang nantinya data tersebut akan diolah dan dijadikan landasan dalam pembuatan website layout builder. Metode kuesioner dipilih karena praktis dan efisien dalam mengumpulkan data dari banyak responden.
2. Analisis kebutuhan
Setelah memahami literatur penunjang penelitian dan mendapatkan data dari pengguna, maka perlu dilakukan analisis terhadap data tersebut.
Analisis dilakukan untuk memilah data yang akan digunakan dalam perancangan model sistem. Setelah melakukan analisis, maka data tersebut akan direpresentasikan menjadi desain solusi sistem.
3. Perancangan
Pada tahap ini dilakukan perancangan yang akan digunakan pada implementasi. Rancangan sistem meliputi, gambaran umum sistem, diagram use case, diagram activity, dan model data.
4. Implementasi
Hasil dari proses perancangan akan dijadikan landasan utama untuk implementasi website layout builder. Rancangan model yang telah didapat dapat membantu dalam pengodean program menjadi suatu perangkat lunak yang utuh. Proses dalam implementasi dilakukan secara pair programming dengan rincian proses adalah sebagai berikut:
a. Pengodean Layout Aplikasi
Proses ini akan dilakukan pengodean layout aplikasi sebagai kerangka dasar website. Pengodean ini dilakukan sesuai dengan desain aplikasi telah dibuat.
b. Pengodean Login dan Register
Proses ini akan dilakukan pengodean fitur login dan register.
Pengodean ini akan menghasilkan fitur login sebagai pra-syarat pengguna untuk memasuki aplikasi dan fitur register untuk media pendaftaran pengguna.
c. Pengodean Layout Builder
Proses ini akan dilakukan pengodean layout builder. Pengodean ini akan menghasilkan sebuah layout builder yang siap digunakan sebagai pembangkit layout website sebagai referensi awal bagi pengguna.
Desain layout website pada fitur ini merupakan desain statis.
d. Pengodean Layout Editor
Proses ini akan dilakukan pengodean layout editor. Pengodean ini akan menghasilkan sebuah layout editor yang bisa digunakan untuk membuat sebuah layout oleh pengguna.
e. Pengodean Media Sosial
Proses ini akan dilakukan pengodean media sosial. Pengodean ini akan menghasilkan sebuah media sosial yang akan digunakan pengguna untuk mem-posting layout yang telah dibuat sebelumnya. Bentuk posting pada media sosial ini merupakan sebuah layout yang telah dibuat pada layout editor.
5. Uji Unit Testing
Proses pengujian aplikasi dilakukan dengan unit testing. Proses pengujian ini dilaksanakan bersamaan dengan proses pengodean aplikasi.
Pengujian ini dilakukan sesuai dengan metode pair programming yang ada pada proses agile model extreme programming. Pair programming akan menempatkan pengembang dengan klien pada satu waktu yang sama. Klien akan mengoreksi kode yang dilakukan oleh pengembang. Hal ini dilakukan untuk menimimalisir kesalahan pada kode program agar proses refactoring kode dapat dilaksanakan dengan segera.
6. Uji Usability
Pada tahap akhir akan dilakukan pengujian secara usability. Pengujian ini dilakukan untuk melihat tingkat kemudahan aplikasi saat digunakan oleh pengguna sesungguhnya. Pada uji usability ini akan diberlakukan penyebaran kuesioner pada 32 responden yang telah melakukan pengisian kuesioner pada awal penelitian yang dapat dilihat pada Lampiran 1. Hal ini dilakukan untuk melihat apakah aplikasi website layout builder memiliki tingkat usability yang dapat diterima atau tidak oleh pengguna.
3.3 Alat dan Bahan
Untuk melakukan penelitian ini diperlukan alat dan bahan. Adapun alat yang digunakan meliputi perangkat keras dan perangkat lunak. Perangkat keras yang digunakan berupa laptop dengan spesifikasi seperti pada Tabel 3.1. Kemudian, perangkat lunak yang digunakan merupakan bahasa pemrograman javascript dengan HTML dan CSS. Adapun spesifikasi perangkat lunak lainnya dapat dilihat pada Tabel 3.2.
Tabel 3.1. Spesifikasi Perangkat Keras
No Perangkat Keras Spesifikasi
1 Laptop ASUS A456UQ
2 Processor Intel Core i7 Generasi ke-7
3 RAM 8 GB
4 Storage HDD 1 TB
Tabel 3.2. Spesifikasi Perangkat Lunak
No Perangkat Lunak Spesifikasi
1 Sistem Operasi Windows 10
2 Bahasa Pemograman Javascript + HTML & CSS
3 Framework Quasar v1.1.0
4 Node Js v14.7.0
5 Code Editor Visual Code Studio
6 Basis Data Firebase
7 Grafik Editor Microsoft Visio 2016
Bahan yang digunakan merupakan spesifikasi kebutuhan perangkat lunak yang telah didapatkan pada kuesioner. Kuesioner tersebut telah disebarkan pada awal penelitian dengan mendapatkan jumlah responden sebanyak 32 orang. Responden tersebut merupakan 32 mahasiswa tingkat akhir jurusan teknik informatika yang mendalami bidang front-end dan mengalami kesulitan dalam membuat sebuah layout website. Mahasiswa tersebut tersebar ke dalam beberapa universitas/institut dengan rincian 27 mahasiswa Institut Teknologi Sumatera, 2 mahasiswa STMIK Royal
Kisaran, 1 mahasiswa ITPLN, 1 mahasiswa Universitas Widyatama, dan 1 mahasiswa Universitas Teknokrat Indonesia.
3.4 Arsitektur Aplikasi
Secara garis besar, apikasi website layout builder terdiri dari 3 komponen yaitu layout builder, layout editor, dan media sosial. Ketiga komponen ini akan berinteraksi antara satu dengan yang lainnya. Arsitektur dari website layout builder dapat dilihat pada Gambar 3.2.
Gambar 3.2. Arsitektur Website Layout Builder
Pengguna akan berinteraksi dengan sistem melalui client. Aplikasi kemudian akan merespon segala perintah yang diinstruksikan oleh pengguna melalui client.
Kemudian, dalam mengambil atau menulis data yang diperintahkan oleh pengguna, aplikasi akan melalukan interaksi dengan firebase melalui fungsi-fungsi yang ada pada firebase dan telah terprogram di dalam aplikasi.
3.5 Analisis Kebutuhan Perangkat Lunak
Pada awal penelitian, telah dilakukan penyebaran kuesioner yang berisi pertanyaan-pertanyaan seputar kebutuhan perangkat lunak website layout builder.
Hasil dari kuesioner tersebut diharapkan dapat menjadi landasan dari kebutuhan fungsional dan non-fungsional dari website layout builder. Hasil analisis dari kuesioner tersebut adalah sebagai berikut:
A. Kebutuhan Fungsional
Kebutuhan fungsional merupakan kebutuhan yang berisi proses atau layanan yang tersedia dalam sistem. Proses ini mencakup bagaimana sistem harus bereaksi pada input tertentu dan bagaimana perilaku sistem pada situasi tertentu. Kebutuhan fungsional yang telah didapatkan berdasarkan hasil kuesioner dapat dilihat pada Tabel 3.3.
Tabel 3.3. Kebutuhan Fungsional
ReqID Deskrispi Prioritas
KF.1 Sistem menyediakan fitur pembangun layout website dasar yang memiliki default kode sebagai rujukan dasar pengguna dalam membuat sebuah layout website.
Harus
KF.2 Sistem menyediakan fitur editor sebagai alat bagi pengguna melakukan pengodean layout website.
Harus
KF.3 Sistem menyediakan fitur media sosial untuk memudahkan pengguna dalam mencari referensi mengenai desain layout website.
Harus
KF.4 Sistem menyediakan fitur unggah posting untuk membagikan layout website pengguna ke media sosial.
Harus
KF.5 Sistem menyediakan fitur sukai posting di media sosial.
Harus
KF.6 Sistem menyediakan fitur komentari posting di media sosial.
Harus
KF.7 Sistem menyediakan fitur kirim pesan antar pengguna.
Harus
KF.9 Sistem menyediakan fitur lihat profil pengguna.
Harus
B. Kebutuhan Non-Fungsional
Kebutuhan non-fungsional merupakan kebutuhan yang berfokus pada properti prilaku yang dimiliki oleh sistem. Kebutuhan non-fungsional juga sering disebut sebagai batasan layanan atau fungsi yang ditawarkan sistem seperti batasan waktu, batasan pengembangan proses, standarisasi, dan lain lain. Kebutuhan non-fungsional yang telah ditentukan dapat dilihat pada Tabel 3.4.
Tabel 3.4. Kebutuhan Non-Fungsional
ReqID Deskripsi Prioritas
KNF.1 Sistem dapat dijalankan oleh beberapa aplikasi browser diantaranya Microsoft Edge, Google Chrome, dan Mozilla Firefox.
Harus
KNF.2 Bahasa yang digunakan aplikasi adalah bahasa Inggris.
Optional
3.6 Rancangan Model Aplikasi
Berikut ini diagram yang menggambarkan proses – proses yang terjadi dalam website layout builder.
1. Use Case Diagram
Gambar 3.3. Diagram Use Case dari Website Layout Builder Gambar 3.3 menunjukkan diagram use case dari website layout builder.
Diagram ini merupakan representasi dari interaksi dengan sistem website layout builder yang akan dibangun pada penelitian ini. Penejalasan dari kasus-kasus pada diagram diatas adalah sebagai berikut:
1. Fitur Tambah Teman
Fungsi dari fitur ini adalah untuk menambah teman dari seorang pengguna pada media sosial. Hal ini digunakan untuk membatasi
unggahan yang akan tampil pada menu beranda dari seorang pengguna.
2. Fitur Membuat Layout
Fitur ini merupakan fitur utama dari website layout builder. Website layout builder menyediakan sebuah menu layout editor yang dapat digunakan pengguna untuk membuat layout sesuai dengan kreatifitas pengguna tersebut. Selain itu, terdapat juga sebuah layout builder pada aplikasi ini yang memiliki desain default yang dapat digunakan oleh pengguna sebagai referensi awal dalam membuat sebuah layout website.
3. Fitur Unggah Layout
Fitur unggah layout merupakan sebuah fitur dimana pengguna dapat mengunggah layout website yang sebelumnya telah dibuat ke dalam media sosial. Fitur unggah ini berperan penting dalam konsep media sosial yang digunakan dalam penelitian ini.
4. Fitur Ambil Layout
Fitur ambil layout merupakan sebuah fitur dimana pengguna dapat mengambil layout dari pengguna lain yang sebelumnya telah dibuat ke dalam media sosial. Fitur ini berperan penting dalam konsep media sosial yang mana dengan fitur ini diharapkan seorang pengguna dapat terinspirasi dari desain pengguna lain yang lebih bagus.
5. Fitur Lihat Posting
Postingan yang telah diunggah sebelumnya tentu harus dapat dilihat oleh pengguna lain yang menggunakan aplikasi ini. Postingan yang ada di dalam media sosial diharapkan dapat menjadi referensi bagi pengguna lainnya untuk membuat sebuah layout website.
6. Fitur Sukai Posting
Fitur sukai posting merupakan sebuah bentuk apresiasi antar pengguna. Pada fitur ini, pengguna dapat menyukai unggahan dari pengguna lainnya.
7. Fitur Kirim Pesan
Fitur ini merupakan fitur yang digunakan oleh pengguna untuk mengirim pesan kepada pengguna lain. Pengguna dapat mengirim pesan guna melakukan komunikasi antar pengguna dalam hal desain layout ataupun yang lainnya.
8. Fitur Lihat Profil
Fitur ini merupakan fitur yang dapat memperlihatkan profil dari seorang pengguna. Fitur lihat profil akan menampilkan beberapa infomasi mengenai seorang pengguna seperti nama pengguna, deskripsi pengguna, dan koleksi layout yang dimiliki.
2. Activity Diagram
Gambar 3.4. Activity Diagram Login Pengguna
Gambar 3.4 menjelaskan mengenai activity diagram proses menu login.
Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna mengunjungi halaman login.
2. Kemudian pengguna menekan tombol login pada halaman web
3. Firebase akan menerima request login tersebut. Apabila proses sukses, maka sistem akan menampilkan halaman utama. Namun, jika gagal maka sistem akan mendaftarkan secara otomatis gmail yang digunakan pada proses login.
Gambar 3.5. Activity Diagram Layout Builder
Gambar 3.5 menjelaskan mengenai activity diagram proses akses menu layout builder. Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Kemudian pengguna mengunjungi menu layout builder dan sistem akan menampilkan halaman layout builder.
3. Pengguna menekan tombol menu dialog dan menu dialog untuk pengoperasian fitur layout builder akan muncul.
4. Setelah mengoperasikan menu dialog pada layout builder, jika pengguna menekan tombol show, maka akan menampilkan hasil kode dari hasil operasi fitur yang telah dilakukan pengguna. Jika pengguna menekan tombol edit, maka halaman web akan berpindah ke halaman layout editor untuk melakukan peng-edit-an.
Gambar 3.6. Activity Diagram Layout Editor
Gambar 3.6 menjelaskan mengenai activity diagram proses akses menu layout editor. Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Kemudian pengguna mengunjungi menu layout editor dan sistem akan menampilkan menu layout editor.
3. Lalu pengguna mengetikkan kode layout website sesuai keinginan pengguna tersebut.
4. Sistem akan menerima masukan kode layout website yang berupa dan menampilkannya pada kolom layout editor.
5. Kemudian, pengguna menekan tombol simpan.
6. Firebase akan menerima request untuk menyimpan kode layout website tersebut ke dalam database. Jika proses sukses, maka layout website tersebut akan masuk ke dalam koleksi layout pengguna.
Namun jika gagal, sistem akan menampilkan pesan halaman error atau koneksi buruk.
Gambar 3.7. Activity Diagram Tambah Teman
Gambar 3.7 menjelaskan mengenai activity diagram proses fitur tambah teman. Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Kemudian pengguna mengunjungi profil pengguna lain dan sistem akan menampilkan halaman profil pengguna tersebut.
3. Lalu, pengguna menekan tombol tambah teman.
4. Firebase akan menerima request untuk menambahkan id pengguna lain tersebut ke dalam daftar teman.
5. Jika proses berhasil, maka sistem akan mengubah tombol tambah teman menjadi berteman. Namun, jika proses gagal, maka sistem akan memunculkan pop up halaman error atau koneksi buruk.
Gambar 3.8. Activity Diagram Melihat Posting Pengguna
Gambar 3.8 menjelaskan mengenai activity diagram proses fitur melihat posting pengguna. Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Kemudian pengguna memilih menu beranda.
3. Firebase menerima request untuk me-retrieve posting-an pengguna.
4. Jika proses berhasil maka sistem akan menampilkan semua posting teman pengguna tersebut pada menu beranda. Namun, jika gagal maka sistem akan memunculkan pop up halaman error atau koneksi buruk.
Gambar 3.9. Activity Diagram Menyukai Posting Pengguna
Gambar 3.9 menjelaskan mengenai activity diagram proses fitur sukai posting pengguna. Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Pengguna lakukan langkah seperti pada Gambar 3.8.
3. Kemudian pengguna menekan tombol like pada posting tersebut.
4. Firebase akan menerima request untuk menambahkan nilai like pada posting tersebut.
5. Jika proses ini berhasil, maka sistem akan merubah warna tombol like pada posting tersebut menjadi merah. Namun jika gagal, maka sistem akan menampilkan pop up koneksi buruk atau halaman error.
Gambar 3.10. Activity Diagram Komentar Posting Pengguna Gambar 3.10 menjelaskan mengenai activity diagram proses fitur komentar posting pengguna. Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Pengguna melakukan langkah seperti Gambar 3.8.
3. Kemudian pengguna menekan tombol komentar pada posting tersebut dan sistem akan menampilkan kolom komentar dan komentar pengguna lain pada posting tersebut.
4. Pengguna mengetikkan komentar pada kolom komentar dan menekan tombol kirim.
5. Firebase akan menerima request untuk menambahkan komentar yang telah dikirim ke dalam kolom komentar posting tersebut.
6. Jika proses ini berhasil, maka sistem akan menampilkan komentar yang telah ditambahkan pada posting tersbeut. Namun jika gagal, maka sistem akan menampilkan pop up halaman error atau koneksi buruk.
Gambar 3.11. Activity Diagram Kirim Pesan
Gambar 3.11 menjelaskan mengenai activity diagram proses fitur kirim pesan. Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Kemudian pengguna memilih tujuan pengiriman pesan (pengguna lain) dan mengklik tombol kirim pesan.
3. Sistem akan menampilkan kolom kirim pesan.
4. Pengguna mengetikkan pesan yang ingin dikirim dan mengklik tombol kirim.
5. Firebase akan menerima request untuk menyimpan pesan tersebut.
Jika proses sukses, maka sistem akan menampilkan pesan tersebut
dalam kolom percakapan. Namun jika gagal, maka sistem akan menampilkan pop up halaman error atau koneksi buruk.
Gambar 3.12. Activity Diagram Lihat Profil
Gambar 3.12 menjelaskan mengenai activity diagram fitur lihat profil.
Aktivitas-aktivitas yang ada pada diagram tersebut adalah sebagai berikut:
1. Pengguna melakukan login pada aplikasi.
2. Pengguna mengklik foto atau nama pengguna.
3. Kemudian, firebase akan menerima request untuk mengambil data profil pengguna dan koleksi posting seorang pengguna. Jika proses sukses, maka sistem akan menampilkan profil dari pengguna tersebut.
Namun jika gagal, maka sistem akan menampilkan pop up halaman error atau koneksi buruk.
3. Model Data Firebase
Model data pada firebase merupakan struktur data JSON. Sebuah objek JSON adalah format data key-value yang biasanya di render di dalam kurung kurawal. Model data firebase pada penelitian ini dapat dilihat pada Tabel 3.5 s.d Tabel 3.7.
Tabel 3.5. Model Data Pengguna
Kunci Data JSON
key userId
collection: { myLayout: { layoutId: { comments: { commentId: { text
timeStamp userId }, date,
description, field: { css,
dependencies, html,
javascript, },
imageUrl, likes: { userId, },
name } } } }
friends: { following: { userId },
follower:{
userId }
}
messages: {
Kunci Data JSON userId: {
avatar message: { messageId: { from,
text, timeStamp }
} } }
profile: { avatar, description, gmail,
name, userId, username }
Pada model data pengguna, terdapat 4 root yaiut collection, friends, message, dan profile yang dapat dilihat pada Tabel 3.5. Kemudian terdapat 1 key yaitu variabel userId.
1. Root Collection
Root ini memuat data-data dari layout seorang pengguna. Layout yang disimpan merupakan sebuah layout posting. Data yang dimuat antara lain yaitu data komentar, waktu pembuatan layout, kode layout, daftar penyuka, deskripsi layout, dan gambar layout.
2. Root Friends
Root ini memuat data-data dari teman pengguna. Data yang disimpan berupa userId dari pengguna lainnya.
3. Root Message
Root ini memuat data-data dari pesan antar pengguna. Data yang disimpan berupa tanggal pengiriman pesan, teks pesan, dan userId pengirim.
4. Root Profile
Root ini menyimpan data-data profil dari pengguna. Data yang disimpan berupa email, foto profil, biografi, userId, dan username.
Tabel 3.6. Model Data Layout Builder Data JSON
body: { closeTag, openTag, value: { content: { contentName: { css,
html, javascript }
},
footer: { css, html, javascript },
header:{
css, html, javascript }
} }
head: { closeTag, openTag, value }
Pada model data layout builder, terdapat 2 root yaitu body dan head yang dapat dilihat pada Tabel 3.6. Root body akan memuat konten statis yang telah dibuat sebelumnya dan dimasukkan ke dalam firebase. Sementara itu, root head akan memuat dependencies tertentu.
Tabel 3.7. Model Data allUsers Data JSON
allUsers: { userId: { avatar, username }
}
Pada model data allUsers, terdapat 1 root yang dapat dilihat pada Tabel 3.7. Pada root ini, terdapat data pengguna berupa userId sebagai root.
Kemudian, data avatar dan username. Data ini digunakan untuk memudahkan dalam mengambil data pengguna dan didistribusikan pada berbagai page.
4. Desain Aplikasi
Pada penelitian kali ini, desain aplikasi digambarkan secara sederhana menggunakan desain secara low fidelity. Desain aplikasi dapat dilihat pada Gambar 3.13 s.d. Gambar 3.17.
Gambar 3.13. Desain Beranda
Pada desain beranda, halaman website hanya diisi oleh kolom pencarian dan daftar posting. Kolom pencarian berupa search bar yang digunakan untuk mencari username dari seorang pengguna. Kemudian, daftar posting berisi deretan card posting dari teman pengguna.
Gambar 3.14. Desain Layout Builder
Pada desain layout builder, halaman website akan berisi elemen- elemen website dari elemen layout builder yang ada pada menu perintah.
Menu perintah akan direpresentasikan menggunakan komponen menu.
Tombol untuk men-trigger munculnya menu perintah pada layout builder berupa sebuah floating action button.
Gambar 3.15. Desain Layout Editor
Pada desain layout editor, halaman website akan berisi empat tab dan satu kolom textarea sebagai tempat pengguna melakukan pengodean.
Empat tab tersebut berupa tab HTML, CSS, Javascript, dan dependencies.
Kemudian, terdapat sebuah frame dimana tempat hasil pengodean tersebut muncul.
Gambar 3.16. Desain Profil Pengguna
Pada profil pengguna, halaman website akan berisi foto profil pengguna dan deskripsi pengguna sebagai identitas seorang pengguna.
Selain itu, terdapat deret posting yang membentuk 3 kolom sebagai daftar posting pengguna tersebut.
Gambar 3.17. Desain Halaman Pesan
Pada halaman pesan, halaman website akan berisi dua komponen card.
Card pertama yaitu berisi daftar pesan pengguna. Kemudian card kedua akan berisi seluruh pesan dari pengguna yang dipilih.
3.7 Rancangan Pengujian Aplikasi
Pengujian aplikasi website layout builder akan menggunakan metode pengujian usability metode system usability scale. Metode ini dilakukan untuk menguji kelayakan aplikasi website layout builder untuk digunakan.
Pengujian ini dilakukan dengan meminta 32 responden yang telah mengisi kuesioner pertama yang dapat dilihat pada Lampiran 1 untuk menggunakan aplikasi website layout builder dan mengeksplorasi aplikasi tersebut. Kemudian, responden tersebut diminta mengisi kuesioner yang dapat dilihat pada Tabel 2.1.
Setelah pengumpulan data dilakukan, akan diberlakukan perhitungan skor dnegan menggunakan aturan pada system usability scale yang dapat dilihat pada Gambar 2.7, dan mengukur tingkat kebergunaan aplikasi menggunakan system usability score yang dapat dilihat pada Gambar 2.8.
