Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X
e-ISSN: 2621-9840
PENGARUH USER INTERFACE RESPONSIVE MOBILE WEBSITE
TERHADAP JUMLAH VISITOR WEBSITE PANDANHOUSE.
COM
The Effect Of User Interface Responsive Mobile Website On The Number Of Visitors Of Pandanhouse.
Com Website Frans Sinata, l1834@lecturer.
Program Studi Informatika/Fakultas Teknologi dan Desain.
Universitas Bunda Mulia
Diterima 1 Juni 2023 / Disetujui 29 September 2023
ABSTRACT
The Human Centered Design (HCD) method is one of the methods in design and development that focuses on users according to their needs, habits and capabilities.
The problem that is often faced is to access information on the pandanhouse website in terms of appearance that does not yet support the appearance of responsive web design on smartphone devices.
The initial stages in this method start from the observation stage which aims to find out the problems faced by users in accessing the com website to the testing stage to find out if the solutions provided can be understood and easily used by users.
At the testing stage, the user is given tasks to interact directly with access to information on the Pandanhouse website through a smartphone device, as the final result of the test, it is expected that the user is sufficiently familiar and user friendly on the website on the responsive mobile website feature.
Keywords: Human Centered Design.
Responsive Web Design.
Website.
Responsive Mobile Website ABSTRAK Metode Human Centered Design (HCD) merupakan salah satu metode dalam perancangan dan pengembangan yang menfokuskan pada pengguna sesuai kebutuhan,kebiasaan dan kapabilitas.
Permasalahan yang sering dihadapi untuk mengakses informasi pada website pandanhouse dari segi tampilan yang belum mendukung tampilan secara responsive web design pada perangkat smartphone.
Tahapan awal pada metode ini dimulai dari tahapan observasi yang bertujuan untuk mengetahui permasalahan yang dihadapi oleh pengguna dalam mengakses website pandanhouse.
com hingga tahapan pengujian untuk mengetahui jika solusi yang diberikan dapat dipahami dan secara mudah digunakan oleh Pada tahapan pengujian, diberikan tugas-tugas pada pengguna untuk melakukan interaksi langsung terhadap akses informasi website pandanhouse melalui perangkat smartphone, sebagai hasil akhir pengujian yaitu diharapkan pengguna sudah cukup paham dan user friendly pada website pada fitur responsive mobile website.
Kata Kunci: Human Centered Design.
Responsive Web Design.
Website.
Responsive Mobile Website PENDAHULUAN Kemajuan teknologi informasi yang pesat serta pemanfaatanya secara luas telah membuka peluang bagi pengaksesan, pengelolaan dan pendayagunaan informasi dalam volume yang besar secara cepat dan akurat baik untuk sektor bisnis, pendidikan, pemerintahan dan sektor-sektor Melalui teknologi berbasis website ataupun mobile, informasi dapat disalurkan dan mampu menarik perhatian para pelaku usaha dan pengguna umum sebagai sarana promosi atau pemasaran secara real dan live baik barang dan jasa dengan biaya yang relative murah dibandingkan dengan media promosi konvensional.
*Korespondensi Penulis:
E-mail: l1834@lecturer.
Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 Latar Belakang Restoran Pandanhouse merupakan restauran lokal yang berlokasi di pulau Belitung dengan memanfaatkan kekayaan hasil pertanian dan laut sebagai menu masakan dengan konsep makanan tradisional asli pulau Belitung dan makanan internasional.
Restoran Pandanhouse menggunakan media website sebagai sarana penyampaian promosi,reservasi,dan informasi tempat wisata, dan lainnya baik kepada wisatawan lokal,mancanegara,para pelaku usaha tour dan travel,serta para penikmat kuliner Identifikasi Masalah Permasalahan yang sering dihadapi oleh pengguna yaitu kesulitan mengakses informasi untuk mengetahui promo-promo, jadwal reservasi,event atau kegiatan seperti pernikahan,ulangtahun,konser,seminar,gathering ataupun mencari informasi seputar tempat wisata dan penginapan yang terletak di pulau Belitung melalui website pandanhouse.
dengan tampilan desktop dan belum mendukung tampilan secara mobile website Tujuan dan Manfaat Penelitian Berfokus pada permasalahan di atas,penulis memberikan solusi dengan melakukan pengembangan website berbasis responsive mobile website yang dapat diakses sesuai aspek user interface dan user experience.
Diharapkan dengan pengembangan website pandanhouse berbasis mobile web dapat bermanfaat dari sisi pengguna lebih nyaman melakukan proses pencarian informasi dan reservasi pada website pandanhouse.
TINJAUAN PUSTAKA
Human Center Design Human Centered Design (HCD) adalah sebuah pendekatan untuk mendesain produk yang berfokus pada Manusia atau pengguna.
Dalam HCD desainer mendesign sebuah produk atau service sesuai dengan kebutuhan, kebiasaan, dan kapabilitas manusia.
Empat Proses Siklus Iteratif HCD.
Observation Idea Generation Prototyping Testing Observation Aktivitas pertama yang dilakukan dalam siklus ini adalah observasi, dengan observasi kita dapat mengetahui masalah yang akan diselesaikan.
Dalam Aktivitas ini dilakukan observasi langsung kepada pengguna, memantau aktivitasnya, mencoba mengetahui ketertarikan, motif, dan kebutuhannya.
Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 Idea Generation Dalam tahap Ideation setelah masalah yang ingin diselesaikan sudah diketahui, langkah atau aktivitas selanjutnya yang dilakukan adalah men-generate solusi potensial atas masalah yang ada.
Dalam fase ini kreatifitas sangatlah dibutuhkan, kita sebebas mungkin melakukan brainstorming agar dapat mencari solusi yang bisa diterapkan terhadap masalah masalah Aturan yang dapat diikuti pada tahap ini:
Generate ide sebanyak mungkin Jadilah sekreatif mungkin tanpa perlu memperhatikan batasan-batasan Tanyakan Apapun Prototyping Prototyping merupakan .
metode pengembangan perangat lunak, yang berupa model fisik kerja sistem dan berfungsi sebagai versi awal dari sistem.
Dengan metode prototyping ini akan dihasilkan prototype sistem sebagai perantara pengembang dan pengguna agar dapat berinteraksi dalam proses kegiatan pengembangan sistem informasi.
Ide yang sudah di-generate dalam tahapan prototyping dibuat prototype agar bisa di test secara langsung kepada calon pengguna.
prototype yang digunakan bisa saja masih berupa sketsa-sketsa hasil oret-an atau yang sudah dibuat menggunakan tools seperti marvel,invision atau Adobe XD.
Melakukan prototyping dalam penentuan masalah dapat memberitahu bahwa masalah yang akan diselesaikan dipahami oleh pengguna.
Testing Dalam aktivitas ini kumpulkan beberapa orang untuk melakukan testing agar dapat diketahui solusi yang diberikan kepada pengguna sudah menyelesaikan masalah atau belum.
Testing dapat dilakukan dengan mengajak satu orang atau lebih untuk mencoba prototype yang sudah tersedia.
Tahapan testing ini penting untuk mempelajari perilaku pengguna dan mengetahui bagian mana yang masih kurang pas dan dapat diperbaiki pada iterasi selanjutnya.
User Interface (UI) User interface adalah bagian dimana user bisa melihat sekaligus berinteraksi dengan komputer, website, atau aplikasi dengan tujuan agar user experience yang lebih mudah dan intuitif.
Jenis User Interface:
Form-based UI, merupakan tampilan antarmuka yang digunakan untuk memasukkan data ke dalam program atau aplikasi yang menawarkan pilihan terbatas.
Graphical UI, merupakan perangkat input yang dapat menghasilkan output berupa visual, contohnya keyboard dan monitor.
Menu-driven UI, merupakan UI yang menggunakan daftar pilihan agar bisa menavigasi program atau web.
Misalnya pada ATM, perangkat tersebut menggunakan UI menu-driven ini sehingga user .
dapat menggunakannya dengan mudah.
Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 Touch UI, merupakan antarmuka yang bisa dioperasikan dengan sentuhan.
Kamu bisa menemukan jenis UI ini pada sebagian besar smartphone, tablet, dan perangkat apapun yang menggunakan layar sentuh dengan input haptic.
Voice UI, merupakan bentuk perangkat yang menggunakan perintah auditori atau suara agar terjadi interaksi antara manusia dan mesin.
Contohnya pada perangkat virtual assistant, talk-to-text.
GPS, dan lain sebagainya.
User Experience (UX) UX sebagai persepsi dan tanggapan seseorang yang dihasilkan dari penggunaan dan/atau antisipasi penggunaan produk, sistem, atau layanan.
Sederhananya,UX merupakan keadaan perasaan pengguna terhadap interaksi yang sedang di hadapan pengguna dengan apa yang ada di depan pengguna saat menggunakannya.
Website Website adalah kumpulan halaman yang berisi informasi tertentu dan dapat diakses dengan mudah oleh siapapun, kapanpun, dan di manapun melalui internet .
Anda bisa mengakses website dengan menuliskan URL di alamat website pada web browser.
Uniform Resource Locator atau URL adalah alamat web yang mengarah ke website, halaman web, atau dokumen tertentu di internet.
Alamat ini memungkinkan Anda mengakses informasi dari komputer atau lokasi online, seperti web server atau penyimpanan cloud.
Web browser merupakan perangkat lunak dengan fungsi sebagai penerima serta penyaji berbagai informasi yang bersumber pada internet.
Sumber informasi yang dimaksud dalam internet dapat diidentifikasi sebagai URL dengan berbentuk website, video, gambar, dan berbagai jenis muatan konten lainnya.
Melalui web browser inilah pencari informasi mampu mengakses, mencari, serta menampilkan berbagai halaman dari website yang terdapat di internet.
Responsive Mobile Website Responsive mobile website atau desain web responsif adalah sebuah teknik atau metode bagi web designer untuk membuat suatu layout website yang dapat menyesuaikan diri sesuai dengan ukuran layar pengguna pada device smartphone atau desktop .
Baik dari ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi device yang digunakan.
Selain dapat memengaruhi apa yang ditampilkan pada perangkat tertentu, ini juga untuk meningkatkan kenyamanan pengguna dalam mengunjungi suatu website.
Dengan responsive web design,maka berbagai komposisi,tata letak,akan menyesuaikan dengan sendirinya.
cPanel cPanel adalah control panel hosting yang berfungsi untuk mempermudah pengelolaan hosting seperti server, email, dan website.
cPanel memiliki tampilan dasboard yang intuitif dan mudah digunakan.
cPanel umumnya dirancang sebagai manajemen hosting berbasis sistem operasi Linux seperti CentOS.
Ubuntu dan Almalinux.
Beberapa fitur yang dirancang dalam mendukung pengelolaan website diantaranya: manajemen email.
CMS(Content Management Syste.
, domain, file manager, statistik pengunjung dan lainnya.
Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 Hosting Hosting web adalah layanan yang menyimpan situs web atau aplikasi web dan membuatnya mudah diakses di berbagai perangkat seperti desktop, seluler, dan tablet.
Setiap aplikasi web atau situs web biasanya terbuat dari banyak file, seperti gambar, video, teks, dan kode, yang perlu Anda simpan di komputer khusus yang disebut server.
Penyedia layanan hosting web memelihara, mengonfigurasi, dan menjalankan server fisik yang dapat Anda sewa untuk file.
Layanan hosting situs web dan aplikasi web juga memberikan dukungan tambahan, seperti keamanan, pencadangan situs web, serta performa situs web, yang membebaskan waktu Anda agar dapat fokus pada fungsi inti dari situs web.
Linux Sistem operasi Linux adalah jenis sistem operasi komputer yang bebas dan sumber terbuka, didistribusikan di bawah lisensi GNU General Public License (GPL) yang memungkinkan pengguna untuk mengunduh, menginstal, dan mengubah kode sumber sistem operasi secara OS Linux terdiri dari kernel Linux yang dikembangkan oleh Linus Torvalds dan berbagai perangkat lunak yang dikembangkan oleh komunitas open-source.
Sebagai sistem operasi yang bebas dan sumber terbuka.
OS Linux menjadi populer di kalangan pengguna komputer yang memiliki minat pada teknologi dan ingin lebih memahami cara kerja sistem operasi.
Selain itu.
OS Linux juga digunakan oleh banyak perusahaan dan organisasi di seluruh dunia karena kemampuannya yang dapat diubah dan disesuaikan sesuai kebutuhan mereka.
GNU General Public License (GPL) Lisensi Publik Umum GNU pertama kali diterbitkan pada tahun 1989 oleh Richard Stallmann, salah satu pendiri Proyek GNU.
Pada tahun 1991, versi kedua GNU GPLv2 dan pada tahun 2007 versi terakhir GNU GPLv3 diterbitkan.
Lisensi menjamin hak untuk penggunaan dan modifikasi gratis tanpa penolakan kepengarangan dari pengembang.
Ini biasanya dilakukan dengan menempatkan salinan teks lisensi GNU resmi yang dilampirkan ke perangkat lunak.
Jadi setiap lisensi GPL memberikan banyak hak seperti untuk mereproduksi, mendistribusikan, memodifikasi, dan membuat perangkat lunak tersedia untuk umum.
Oleh karena itu penerbit juga harus membuat kode sumber tersedia untuk umum.
Perangkat lunak yang paling terkenal, yang menggunakan lisensi ini, adalah Linux dan WordPress.
Awstats Advanced Web Statistics (AWStat.
adalah logfile server web yang baik.
Analyzer ditulis dalam perl yang menunjukkan semua statistik web anda termasuk kunjungan, pengunjung unik, halaman, hits, jam sibuk, mesin pencari, kata kunci yang digunakan untuk menemukan situs anda, robot, broken link dan banyak lagi.
Memberikan lebih rinciInformasi dan grafik grafis yang lebih baik daripada webalizer, dan lebih mudah digunakan.
Bekerja dengan beberapa format log web server sebagai CGI dan/atau dari baris perintah.
Mendukung lebih dari 30 bahasa.
CSS Framework CSS framework adalah kerangka kerja yang fungsinya untuk memudahkan Anda ketika membuat desain website atau aplikasi, tepatnya di bagian layout dan tema.
CSS framework berisi kumpulan kode CSS yang sudah siap pakai.
Anda tak perlu repot untuk membuat struktur dasar desain dari nol.
Sebab,CSS framework menyediakan berbagai macam elemen desain.
Mulai dari sistem grid, pola user interface (UI) yang interaktif, aneka tipografi untuk website, tombol, ikon, dan lain-lain.
Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X
e-ISSN: 2621-9840
METODOLOGI PENELITIAN
Metodologi penelitian dengan mengedepankan sisi user interface dan user experience dengan menggunakan metode Human Centered Design sehingga didapatkan kemudahan dalam mengakses informasi pada website pandanhouse.
Subjek penelitian adalah para pengguna perangkat smarphone dalam mengakses website pandanhouse.
com dengan tampilan responsive mobile website.
Mulai Identifikasi Permasalahan Studi Literatur Human Centered Design Analisis Kebutuhan Konteks Penggunaan Evaluasi UI/UX Existing Analisis Kebutuhan Pengguna Desain Website Responsive Evaluasi Desain dan Solusi Hasil dan Kesimpulan Selesai Gambar 1.
Metodologi Penelitian Penelitian ini akan dilakukan dengan beberapa tahapan seperti yang digambarkan pada Gambar 1.
Pada tahap awal akan dilakukan pendataan identifikasi masalah yang dihadapi selama ini oleh pengelola Restoran Pandanhouse dalam menjaring konsumen melalui website dengan tampilan awal desktop,kemudian dilanjutkan dengan tahapan studi literature guna mempelajari hal-hal yang terkait dari penelitian ini seperti:userinterface,userexperience,human centered design,heuristic evaluation dan lainnya.
Selanjutnya tahapan analisis konteks penggunaan adalah dengan melakukan pemetaan dan identifikasi pengguna dengan memakai perangkat smartphone baik dari lingkungan internal maupun eksternal restoran.
Tahap selanjutnya adalah analisis kebutuhan pengguna, yaout melakukan pencatatan informasi apa saja yang dibutuhkan pengguna dalam mengakses website pandanhouse.
Pada tahap desain website responsive, dilakukan proses pengerjaan desain website dengan menggunakan teknologi css framework dalam hal ini menggunakan Bootstrap 5.
0 dan penggunaan framework Bahasa pemrograman PHP CodeIgniter 4.
Setelah dilakukan tahap desain dan deployment akan dilanjutkan tahap Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 evaluasi desain dan solusi yaitu dengan melakukan penelitian berdasarkan jumlah statistik pengunjung website dari cPanel dan kuisioner penilaian user interface dan experience menggunakan platform Google Form Coding Tahap coding untuk memembuat tampilan pada website pada tahap coding ini menggunakan HTML,CSS,Framework CSS Bootstrap 5.
HTML digunakan untuk membuat desain pada website setelah desain dibuat lalu ditata dan dipercantik dengan menggunakan CSS agar website lebih rapih,nyaman, dan user-friendly dipandang,agar website bisa digunakan pada perangkat mobile penulis menggunakan Framework Bootstrap 5.
0 untuk membuat website menjadi responsive dengan memanfaatkan grid yang sudah disediakan pada Bootstrap dan menggunakan Framework PHP Codeigniter 4.
Gambar 2.
Tampilan Responsive Website pandanhouse.
Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 Gambar 3.
Coding HASIL DAN PEMBAHASAN Penulis melakukan pengujian terhadap pengguna dengan memberikan kuisoner melalui Google Form untuk mengetahui tingkat penilaian terhadap website yang sudah dipublish apakah sudah memenuhi aspek user interface dan user experience.
Selain itu didapatkan data langsung secara nyata statistik pengunjung website melalui Awstats cPanel berdasarkan periode .
onthly,daily,yearl.
, negara pengunjung .
OS dan lainnya.
Tabel 1.
Pengujian Pertanyaan 1 Tampilan Desain Website 2 User Friendly 3 Responsive Mobile Support 4 Menu Navigasi Sangat Baik Baik Kurang Statistik Pengunjung Awstats Cpanel Statistik pengunjung bisa dilihat dan monitor secara live melalui cPanel Hosting Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 Gambar 4.
Monthly Period Visitor Pada Gambar 5 terjadi peningkatan trafik pengunjung per bulan yang mengakses website Gambar 5.
Visitor based on OS Pada Gambar 6 terjadi peningkatan trafik pengunjung yang menggunakan perangkat smartphone berbasis Android sebanyak 36% dan IOS sebanyak 0.
6% yang mengakses website Gambar 6.
Locale Visitor Pada Gambar 6 terjadi peningkatan trafik pengunjung dari luar negeri seperti Amerika Serikat.
Rusia,China dan lainnya.
SIMPULAN
Hasil yang didapat dengan pengujian langsung melalui kuisioner dapat diketahui tingkat kemudahan bagi pengguna untuk mencari informasi,reservasi, jadwal kegiatan pada website com serta dapat disimpulkan dengan User Interface,User Desain dan Metode Human Centered Design yang mendukung tampilan Responsive Mobile Website pada Jurnal Algoritma.
Logika dan Komputasi Versi Online: https://journal.
id/index.
php/alu DOI: http://dx.
org/10.
30813/j-alu.
Vol.
VI (No.
2 ) : 595 - 604.
Th.
p-ISSN: 2620-620X e-ISSN: 2621-9840 meningkatkan trafik pengunjung atau visitor website pandanhouse.
com dengan melihat peningkatan trafik pengunjung website melalui Awstats Cpanel Hosting Pandanhouse.
DAFTAR PUSTAKA