+ All Categories
Home > Documents > Pengembangan Antarmuka Website Dengan Menggunakan …

Pengembangan Antarmuka Website Dengan Menggunakan …

Date post: 31-Oct-2021
Category:
Upload: others
View: 7 times
Download: 0 times
Share this document with a friend
9
Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer e-ISSN: 2548-964X Vol. 3, No. 6, Juni 2019, hlm. 5540-5548 http://j-ptiik.ub.ac.id Fakultas Ilmu Komputer Universitas Brawijaya 5540 Pengembangan Antarmuka Website Dengan Menggunakan Metode Goal Directed Design (Studi Kasus: PT. Focus Inservindo) Arif Ramadhan 1 , Hanifah Muslimah Az-Zahra 2 , Niken Hendrakusma Wardani 3 Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya Email: 1 [email protected], 2 [email protected], 3 [email protected] Abstrak PT. Focus Inservindo atau FOCUS merupakan organisasi yang membantu para pengusaha Usaha Kecil Menengah (UKM) dalam penyediaan jaminan baik dari asuransi maupun bank. FOCUS menghendaki pengembangan website dari segi tampilan dan tambahan beberapa halaman dan fitur untuk meningkatkan kredibilitas website sehingga membantu perusahaan untuk memperluas cakupan bisnis serta jaringan dan diharapkan profit perusahaan dapat meningkat. Penelitian ini menghasilkan rancangan website FOCUS menggunakan metode Goal Directed Design. Metode tersebut memiliki enam fase untuk memberikan solusi untuk terhadap rancangan website berdasarkan tujuan perusahaan. Diawali tahap research, untuk mengetahui kebutuhan dari stakeholder dan pengguna. Tahap modeling, untuk menghasilkan model pengguna berupa persona untuk menggambarkan kelompok pengguna umum. Tahap requirement definition, untuk menghasilkan 19 daftar kebutuhan website dan kebutuhan lingkungan website. Tahap design framework, untuk menghasilkan sitemap sebagai gambaran struktur informasi dan menghasilkan rancangan antarmuka website berupa wireframe. Tahap design refinement, untuk menghasilkan prototype high-fidelity yang siap uji. Tahap design support, untuk menguji prototype yang telah dihasilkan. Pengujian dilakukan dengan cara user testing dan dilakukan kepada pengguna website FOCUS, baik sebagai client perusahaan maupun non-client. Selain itu, digunakan kuesioner SUPR-Q untuk menilai aspek usability, credibility, appearance dan loyalty. Dari hasil yang didapat, keseluruhan aspek bernilai 77,04% (kategori C) yang bernilai baik sehingga dapat diinterpretasikan bahwa website yang dikembangkan bernilai baik dan dapat diterima ( acceptable) oleh pengguna. Kata kunci: goal directed design, antarmuka pengguna, user testing, SUPR-Q, usability, credibility. Abstract PT. Focus Inservindo or FOCUS is an organization that helps Small and Medium Enterprises (SMEs) entrepreneurs in providing guarantees from both insurance and banks. FOCUS wants the development of websites in appearance aspect and additional pages and features to increase the credibility of the website so that it helps companies to expand the scope of businesses and networks and it is expected that company profits can increase. This study produced a FOCUS website design using the Goal Directed Design method. The method has six phases to provide solutions for website design based on company goals. The research phase begins, to determine the needs of stakeholders and users. The modeling phase, to produce a user model in the form of persona to describe the general user group. Requirement definition stage, to generate 19 lists of website requirements and website environmental requirements. Design framework phase, to produce a sitemap as an overview of information structure and produce a website interface design in the form of wireframe. Design refinement phase, to produce a high-fidelity prototype that is ready for testing. Stage design support, to test the prototype that has been produced. Testing is done by means of user testing and is done to FOCUS website users, both as corporate clients and non-clients. In addition, the SUPR-Q questionnaire was used to assess usability, credibility, appearance and loyalty aspects. the results obtained, the overall aspects worth 77.04% (category C) are of good value so that it can be interpreted that the website developed is good and acceptable (acceptable) by the user. Keywords: goal-directed design, user interface, user testing, SUPR-Q, usability, credibility.
Transcript
Page 1: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer e-ISSN: 2548-964X Vol. 3, No. 6, Juni 2019, hlm. 5540-5548 http://j-ptiik.ub.ac.id

Fakultas Ilmu Komputer

Universitas Brawijaya 5540

Pengembangan Antarmuka Website Dengan Menggunakan Metode Goal

Directed Design (Studi Kasus: PT. Focus Inservindo)

Arif Ramadhan1, Hanifah Muslimah Az-Zahra2, Niken Hendrakusma Wardani3

Program Studi Sistem Informasi, Fakultas Ilmu Komputer, Universitas Brawijaya

Email: [email protected], [email protected], [email protected]

Abstrak

PT. Focus Inservindo atau FOCUS merupakan organisasi yang membantu para pengusaha Usaha

Kecil Menengah (UKM) dalam penyediaan jaminan baik dari asuransi maupun bank. FOCUS

menghendaki pengembangan website dari segi tampilan dan tambahan beberapa halaman dan fitur

untuk meningkatkan kredibilitas website sehingga membantu perusahaan untuk memperluas cakupan

bisnis serta jaringan dan diharapkan profit perusahaan dapat meningkat. Penelitian ini menghasilkan

rancangan website FOCUS menggunakan metode Goal Directed Design. Metode tersebut memiliki

enam fase untuk memberikan solusi untuk terhadap rancangan website berdasarkan tujuan perusahaan.

Diawali tahap research, untuk mengetahui kebutuhan dari stakeholder dan pengguna. Tahap modeling,

untuk menghasilkan model pengguna berupa persona untuk menggambarkan kelompok pengguna

umum. Tahap requirement definition, untuk menghasilkan 19 daftar kebutuhan website dan kebutuhan

lingkungan website. Tahap design framework, untuk menghasilkan sitemap sebagai gambaran struktur

informasi dan menghasilkan rancangan antarmuka website berupa wireframe. Tahap design

refinement, untuk menghasilkan prototype high-fidelity yang siap uji. Tahap design support, untuk

menguji prototype yang telah dihasilkan. Pengujian dilakukan dengan cara user testing dan dilakukan

kepada pengguna website FOCUS, baik sebagai client perusahaan maupun non-client. Selain itu,

digunakan kuesioner SUPR-Q untuk menilai aspek usability, credibility, appearance dan loyalty. Dari

hasil yang didapat, keseluruhan aspek bernilai 77,04% (kategori C) yang bernilai baik sehingga dapat

diinterpretasikan bahwa website yang dikembangkan bernilai baik dan dapat diterima (acceptable)

oleh pengguna.

Kata kunci: goal directed design, antarmuka pengguna, user testing, SUPR-Q, usability, credibility.

Abstract

PT. Focus Inservindo or FOCUS is an organization that helps Small and Medium Enterprises (SMEs)

entrepreneurs in providing guarantees from both insurance and banks. FOCUS wants the

development of websites in appearance aspect and additional pages and features to increase the

credibility of the website so that it helps companies to expand the scope of businesses and networks

and it is expected that company profits can increase. This study produced a FOCUS website design

using the Goal Directed Design method. The method has six phases to provide solutions for website

design based on company goals. The research phase begins, to determine the needs of stakeholders

and users. The modeling phase, to produce a user model in the form of persona to describe the general

user group. Requirement definition stage, to generate 19 lists of website requirements and website

environmental requirements. Design framework phase, to produce a sitemap as an overview of

information structure and produce a website interface design in the form of wireframe. Design

refinement phase, to produce a high-fidelity prototype that is ready for testing. Stage design support,

to test the prototype that has been produced. Testing is done by means of user testing and is done to

FOCUS website users, both as corporate clients and non-clients. In addition, the SUPR-Q

questionnaire was used to assess usability, credibility, appearance and loyalty aspects. the results

obtained, the overall aspects worth 77.04% (category C) are of good value so that it can be

interpreted that the website developed is good and acceptable (acceptable) by the user.

Keywords: goal-directed design, user interface, user testing, SUPR-Q, usability, credibility.

Page 2: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5541

Fakultas Ilmu Komputer, Universitas Brawijaya

1. PENDAHULUAN

Di era perkembangan teknologi informasi,

hampir semua aspek kegiatan manusia

dipengaruhi oleh teknologi, begitu juga dengan

kegiatan di suatu perusahaan seperti halnya PT.

Focus Inservindo. PT. Focus Inservindo yang

juga memiliki nama brand FOCUS adalah salah

satu organisasi yang membantu para pengusaha

Usaha Kecil Menengah (UKM) dalam

penyediaan jaminan baik yang diterbitkan

perusahaan asuransi maupun bank, membantu

perusahaan asuransi dalam sosialisasi produk

dan membantu bank dalam meningkatkan

pelayanan bank garansi bagi para nasabahnya.

PT. Focus Inservindo menginginkan perbaikan

dari website perusahaan yang sudah ada. Selain

terdapat kekurangan pada sisi desain dan

tampilan yang harus diperbaiki, pihak

perusahaan pun menginginkan penambahan

beberapa halaman informasi seperti kegiatan

perusahaan, berita dan artikel dari dunia

asuransi penjaminan dan fitur form pelayanan

pelanggan yang juga berfungsi untuk menjaring

calon konsumen. Hal tersebut dilakukan untuk

meningkatkan kredibilitas website sehingga

kredibilitas perusahaan dan pelayanan terhadap

konsumen maupun calon konsumen juga

meningkat. Meningkatnya kredibilitas dari

perusahaan, akan membantu perusahaan untuk

melakukan perluasan cakupan serta dapat

meningkatkan profit perusahaan.

Berkaitan dengan website PT. Focus

Inservindo yang membutuhkan perbaikan serta

pengembangan untuk tujuan yang jelas.

Terdapat metode yang berorientasi pada tujuan,

metode yang dimaksud adalah Goal Directed

Design. Metode Goal Directed Design dipilih

untuk membantu melakukan perbaikan dan

pengembangan website guna meningkatkan

kredibilitas website perusahaan sehingga

perusahaan lebih efektif untuk memperluas

cakupan bisnis serta jaringan dan diharapkan

profit perusahaan juga dapat meningkat.

Goal-Directed Design mengidentifikasi

tujuan serta perilaku bisnis dan pengguna.

Tujuan tersebut langsung diterjemahkan ke

dalam desain. Metode ini memiliki serangkaian

tahapan proses, yakni Research, Modeling,

Requirements Definition, Design Framework,

Design Refinement dan Design Support yang

melibatkan kolaborasi antara perancang,

manajemen dan teknologi yang memberikan

hasil akhir berupa rancangan desain antarmuka

aplikasi yang sesuai dengan kebutuhan,

perilaku dan tujuan pengguna. (Cooper, et al.,

2007).

Pengembangan tidak hanya dilakukan

dengan menggunakan metode Goal Directed

Design, namun dibantu dengan 8 Golden Rules

Interface Design (Shneiderman dan Plaisant,

2005) sebagai prinsip desain perancangan

antarmuka. Lalu, dibantu dengan teknik card

sorting untuk mendapatkan perancangan

struktur informasi yang baik (Sabariah, 2016).

Dan pengujian dilakukan dengan menerapkan

user testing dan Standardized User Experience

Percentile Rank Questionnaire (SUPR-Q)

untuk mendapatkan feedback serta penilaian

terkait aspek usability, credibility, appearance

dan loyalty (Hidayat, 2017). Berdasarkan uraian

latar belakang tersebut, maka peneliti

mengangkat masalah ini sebagai penelitian

yang berjudul “Pengembangan Antarmuka

Website dengan Menggunakan Metode Goal

Directed Design (Studi Kasus: PT. Focus

Inservindo)” dengan tujuan yakni untuk

mengetahui hasil pengembangan antarmuka

pada website PT. Focus Inservindo yang

dilakukan dengan metode Goal Directed

Design untuk meningkatkan kredibilitas website

perusahaan.

2. LANDASAN KEPUSTAKAAN

2.1 Goal Directed Design

Goal Directed Design merupakan metode

perancangan desain aplikasi yang fokus

terhadap tujuan. Metode ini mengidentifikasi

tujuan serta perilaku bisnis dan juga

memperhatikan tujuan dari pengguna. Dengan

memperhatikan tujuan pengguna, maka

perancang akan mengetahui kepuasan dari

pengguna, sehingga tujuan perusahaan dapat

lebih efektif tercapai (Cooper, et al., 2007).

Metode Goal Directed Design memiliki

serangkaian tahapan proses. Tahapan tersebut

ditampilkan pada Gambar 1 berikut ini.

Gambar 1. Tahapan dari Metode Goal Directed

Design

(Cooper, et al., 2007)

Tahapan dari metode Goal Directed Design

tersebut diantaranya adalah fase Research, fase

Modeling, fase Requirements Definition, fase

Design Framework, fase Design Refinement

Page 3: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5542

Fakultas Ilmu Komputer, Universitas Brawijaya

dan fase Design Support.

3. METODOLOGI PENELITIAN

Metode penelitian yang dilakukan dalam

penelitian ditampilkan pada Gambar 2 berikut.

Gambar 2. Diagram Alur Penelitian

3.1 Observasi Awal

Observasi awal dilakukan terhadap objek

penelitian yakni website FOCUS. Observasi ini

dimaksudkan untuk mendapatkan latar belakang

masalah penelitian sehingga peneliti dapat

memberikan solusi dengan metode yang sesuai

dengan masalah yang dihadapi.

3.2 Studi Pustaka

Pada tahap ini, peneliti melakukan

pengumpulan referensi, fungsinya ialah untuk

menjelaskan dasar teori yang digunakan dalam

pelaksanaan penelitian.

3.3 Pengumpulan Data dan Analisis

3.3.1 Research

Pada tahap ini, peneliti mengumpulkan data

kualitatif dengan melakukan wawancara.

Wawancara dilakukan kepada 5 orang

responden yang terdiri dari 3 stakeholder dan 2

pengguna website (1 client perusahaan dan 1

non-client).

3.3.2 Modeling

Pada tahap ini, peneliti membuat model dari

pengguna yang akan menjadi karakter utama

dalam skenario pada website yang

dikembangkan. Pemodelan tersebut akan

digambarkan dalam bentuk persona.

3.3.3 Requirement Definition

Pada tahap ini, peneliti melakukan analisis

terhadap fase sebelumnya. Data yang telah

dikumpulkan dari fase sebelumnya akan diubah

dan dijelaskan dalam bentuk daftar kebutuhan

website sesuai tujuan bisnis dan pengguna.

3.4 Pengembangan Antarmuka

3.4.1 Design Framework

Dalam tahap ini, peneliti mulai membuat

rancangan produk secara keseluruhan, diawali

dengan menyusun struktur informasi website

dengan teknik card sorting berdasarkan konten

yang telah didapat pada fase sebelumnya. Lalu

hasil dari card sorting berupa Sitemap

dikembangkan menjadi rancangan desain

antarmuka website berupa wireframe.

3.4.2 Design Refinement

Pada tahap ini, peneliti fokus pada

pembuatan koherensi tugas berupa purwarupa

website sesuai dengan hasil design framework.

Antarmuka yang akan dikembangkan, didukung

juga menggunakan prinsip 8 Golden Rules

Interface Design dan hasil akhirnya adalah

prototype high-fidelity.

3.5 Evaluasi dan Analisis

3.5.1 Design Support

Pada tahap ini peneliti melakukan

pengujian terhadap prototype yang telah dibuat.

Pengujian dilakukan dengan menggunakan

teknik user testing untuk mengetahui feedback

positif dan negatif dari responden. Selain itu,

pengujian juga dilakukan dengan menggunakan

Standardized User Experience Percentile Rank

Questionnaire (SUPR-Q) untuk mendapatkan

penilaian pada aspek usability, credibility,

appearance dan loyalty terhadap website yang

dikembangkan.

3.6 Kesimpulan dan Saran

Pada tahap ini peneliti melakukan

penarikan kesimpulan dari hasil pelaksaan

penelitian. Kemudian saran ditulis dengan

tujuan untuk perbaikan penelitian selanjutnya.

Page 4: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5543

Fakultas Ilmu Komputer, Universitas Brawijaya

4. HASIL DAN PEMBAHASAN

4.1 Pengumpulan Data dan Analisis

Tahap pengumpulan data merupakan tahap

research dalam metode goal directed design,

dilakukan dengan melakukan wawancara

kepada perwakilan pihak FOCUS sebagai

stakeholder dan perwakilan perusahaan dari

pihak client maupun pihak non-client. Hasil

wawancara akan dijadikan landasan analisis

untuk memberi pemahaman mengenai tujuan

pengembangan website, serta gambaran

pengguna website. Hasil wawancara

stakeholder dirangkum menjadi beberapa topik

seperti strategi bisnis perusahaan, ruang

lingkup, tujuan, motivasi dan prioritas proyek.

Sedangkan hasil wawancara kepada pihak client

dan non-client dirangkum menjadi beberapa

topik seperti tujuan, motivasi serta prioritas

dalam mengakses website FOCUS dan saran

untuk website FOCUS. Hasil wawancara

terhadap stakeholder adalah sebagai berikut:

1. Strategi Bisnis PT. Focus Inservindo

FOCUS merupakan agen sebuah

perusahaan penjaminan.

Posisinya sebagai penghubung antara

client dan perusahaan penjaminan.

FOCUS memiliki standar waktu dalam

melayani suatu proyek.

Hubungan kepada client sangat dijaga.

FOCUS memiliki beberapa jenis layanan.

FOCUS mengikuti kegiatan workshop

dibidang asuransi.

2. Ruang Lingkup Proyek

Memperbaiki seluruh tampilan website.

Seluruh kegiatan registrasi layanan

diinformasikan.

Menampilkan Informasi seluruh produk &

layanan FOCUS.

Menampilkan Informasi kegiatan

perusahaan dan achievement dapat di

tampilkan.

Menampilkan artikel-artikel atau

mengangkat isu-isu terkait dunia asuransi

penjaminan.

Prototype menggambarkan website

sesungguhnya.

Target selesai bulan Januari.

Fokus terhadap tampilan, diperkenankan

untuk menggunakan data dummy.

3. Tujuan Proyek

Mendukung segala aktifitas branding,

promosi, melakukan penjaringan

pelanggan serta edukasi terhadap para

pembaca terkait asuransi.

4. Motivasi Proyek

Untuk menambah daya saing dan

memperluas cakupan perusahaan.

5. Prioritas Proyek

Penyajian konten yang menarik dan rapi.

Terutama informasi terkait layanan serta

profil FOCUS dibuat secara lengkap,

menarik dan terpercaya.

Sajian informasi untuk pengunjung

website terutama untuk perusahaan non-

client dalam melakukan registrasi layanan.

Informasi layanan FOCUS, kegiatan,

penghargaan yang diraih serta artikel-

artikel yang membahas isu dunia asuransi.

Hasil wawancara terhadap pihak client adalah sebagai berikut:

1. Tujuan akses website FOCUS

Melihat kontak yang dapat dihubungi.

2. Motivasi akses website FOCUS

Mendapatkan pelayanan yang maksimal

dari FOCUS.

3. Prioritas akses website FOCUS

Melihat dan menghubungi kontak yang

tertera pada website

4. Saran untuk website FOCUS

Perbaikan tampilan serta penambahan

informasi yang ada terutama layanan yang

ditawarkan oleh perusahaan.

Profil perusahaan yang ditampilkan harus

menarik disertai dengan penghargaan yang

diraih sehingga menambah kepercayaan

setiap client.

Hasil wawancara terhadap non-client

adalah sebagai berikut:

1. Tujuan akses website FOCUS

Mencari informasi layanan dari PT. Focus

Inservindo.

Mengetahui profil perusahaan.

Mengetahui penghargaan yang diraih.

2. Motivasi akses website FOCUS

Mendapatkan agen/broker asuransi yang

tepat.

Page 5: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5544

Fakultas Ilmu Komputer, Universitas Brawijaya

3. Prioritas akses website FOCUS

Mengetahui layanan dari perusahaan.

Mengetahui Penghargaan yang didapat

oleh perusahaan.

Melihat informasi mitra pendukung.

Melihat profil perusahaan yang menarik.

4. Saran untuk website FOCUS

Perbaikan tampilan seluruh konten.

Informasi yang diberikan untuk saat ini

kurang jelas.

Menambahkan konten atau informasi yang

dapat meningkatkan kepercayaan dari

calon konsumen.

Tahap selanjutnya adalah modeling dengan

pembuatan persona sebagai pemodelan

pengguna untuk kelompok pengguna umum

yang terdiri atas client dari FOCUS dan non-

client. Persona dibuat berdasarkan hasil

wawancara pada tahap sebelumnya. Persona

berisi beberapa informasi yang menggambarkan

kelompok pengguna yakni demografi, tujuan,

motivasi, prioritas dan teknis ditambah dengan

foto dan nama yang dapat mewakili pengguna.

Pada Gambar 3 berikut ini menampilkan hasil

persona yang telah dibuat.

Gambar 3. Persona Pengguna Umum

Tahap selanjutnya requirement definition,

dengan menenetukan daftar kebutuhan website

bedasarkan hasil tahap sebelumnya. Kebutuhan

yang telah didefinsikan lalu dianalisis menjadi

sebuah konten yang akan menyusun kerangka

website pada tahap selanjutnya. Daftar

kebutuhan website yang dihasilkan adalah

sebagai berikut:

1. Sejarah Perusahaan

Menjelaskan sejarah singkat PT. Focus

Inservindo.

2. Visi dan Misi

Menjelaskan visi dan misi PT. Focus

Inservindo.

3. Pengurus Perusahaan

Menampilkan informasi dasar hukum usaha

yang dijalankan.

4. Perizinan Usaha

Menampilkan informasi dasar hukum usaha

yang dijalankan.

5. Mitra Kerja

Menampilkan daftar mitra pendukung baik

bank maupun perusahaan penjaminan.

6. Penghargaan

Menampilkan informasi penghargaan yang

telah diraih oleh PT. Focus Inservindo.

7. Penjaminan Pembiayaan Umum.

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

8. Penjaminan Pembiayaan Multiguna.

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

9. Penjaminan Pembiayaan Mikro.

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

10. Penjaminan Pembiayaan Konstruksi &

Pengadaan Barang/Jasa.

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

11. Customs Bond.

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

12. Kontra Bank Garansi.

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

13. Letter of Credit (L/C).

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

Page 6: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5545

Fakultas Ilmu Komputer, Universitas Brawijaya

14. Surety Bond.

Menampilkan Informasi layanan FOCUS

yang dimaksud dengan lengkap.

15. Artikel dan Berita

Menampilkan artikel yang membahas isu

keuangan dan dunia asuransi penjaminan

16. Kegiatan

Menampilkan dokumentasi dari kegiatan

yang dilakukan oleh PT. Focus Inservindo.

17. Layanan Pelanggan

Menampilkan alamat, kontak perusahaan

dan form pengiriman email dari pelanggan.

18. Tata Cara Pengaduan

Menampilkan informasi tata cara

pengaduan untuk client menyampaikan

keluhan atau masukan.

19. FAQ

Menampilkan pertanyaan yang sering

diajukan oleh pengguna disertai dengan

jawaban dari stakeholder.

Setelah kebutuhan didefinsikan, selanjutnya

dilakukan teknik card sorting dan pembuatan

wireframe yang masuk pada tahap design

framework. Seluruh konten atau kebutuhan

yang telah didefinisikan akan digunakan

sebagai komponen atau bahan pelaksanaan card

sorting untuk menghasilkan rancangan struktur

informasi website dalam bentuk Sitemap. Card

sorting dilakukan kepada 15 responden dari

pihak stakeholder dan pengguna umum

(Nielsen, 2004). Card sorting dilakukan dengan

kolaborasi teknik open card sort dan closed

card sort secara bertahap. Sitemap yang

dihasilkan, ditampilkan pada Gambar 4 berikut.

Gambar 4. Sitemap Website FOCUS

4.2 Pengembangan Antarmuka

Sitemap yang telah dibuat kemudian

menjadi dasar pada pembuatan rancangan detail

desain antarmuka website berupa wireframe

yang merupakan hasil akhir dari tahap design

framework. Seluruh informasi pada Gambar 4

ditampilkan oleh wireframe menjadi setiap

halaman yang mencakup tampilan antarmuka

secara garis besar dengan tata letak setiap

konten. Pada Gambar 5 di bawah menampilkan

contoh wireframe halaman sejarah perusahaan.

Gambar 5. Wireframe Halaman Sejarah Perusahaan

Kemudian wireframe diimplementasikan

menjadi desain yang lebih detail pada tahap

design refinement. Desain disempurnakan

sehingga menyerupai wujud produk akhir atau

dapat disebut dengan prototype high fidelity.

Prototype tersebut nantinya digunakan sebagai

bahan eksplorasi pengujian tampilan pada tahap

selanjutnya. Contoh prototype yang telah dibuat

ditampilkan pada Gambar 6.

Gambar 6. Prototype Halaman Sejarah Perusahaan

Page 7: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5546

Fakultas Ilmu Komputer, Universitas Brawijaya

Pada tahap design refinement, pembuatan

prototype dibantu dengan prinsip 8 Golden

Rules Interface Design sebagai acuan

rancangan sebuah antarmuka website. Berikut

merupakan penjelasan dari rancangan

antarmuka yang telah dibuat dengan adaptasi

poin-poin pada prinsip tersebut.

Gambar 7. Strive for Consistency

Gambar 7. Strive for Consistency (Lanjutan)

Gambar 7 menjelaskan bahwa prototype

yang telah dibuat memiliki konsistensi warna

yakni biru serta memiliki konsistensi tulisan,

yakni tipe Raleway untuk judul dan Open Sans

untuk body sebuah konten.

Gambar 8. Cater to universal usability

Gambar 8 menjelaskan bahwa prototype

yang telah dibuat memiliki fitur shortcut yakni

kolom pencarian untuk memudahkan pengguna

dalam melakukan perubahan konten.

Gambar 9. Offer informative feedback

Gambar 9 menjelaskan bahwa prototype

yang telah dibuat memberikan timbal balik

yang informatif.

Gambar 10. Design dialogs to yield closure

Gambar 10. Design dialogs to yield closure

(Lanjutan)

Gambar 10 menjelaskan bahwa prototype

yang telah dibuat menggambarkan proses

interaksi secara lengkap.

Gambar 11. Prevent errors

Gambar 11 menjelaskan bahwa prototype

yang telah dibuat memberikan informasi

penanganan kesalahan.

Gambar 12. Permit easy reversal of actions

Gambar 12 menjelaskan bahwa prototype

yang telah dibuat memiliki fitur untuk

pengembalian aksi yang mudah yakni dengan

menyediakan breadcumb.

Gambar 13. Support internal locus of control

Gambar 13 menjelaskan bahwa prototype

yang telah dibuat memiliki fitur kendali yakni

tombol tutup.

Gambar 14. Reduce short-term memory load

Page 8: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5547

Fakultas Ilmu Komputer, Universitas Brawijaya

Jumlah Nilai Diperoleh Jumlah Nilai Maksimal

Gambar 14 menjelaskan bahwa prototype

yang telah dibuat terdapat ikon cari dan

memudahkan pengguna untuk mengetahui

bahwa kolom tersebut merupakan kolom

pencarian.

4.3 Evaluasi dan Analisis

Evaluasi serta analisis masuk kedalam

tahap terakhir dalam metode goal directed

design yakni tahap design refinement. Evaluasi

dilakukan dengan user testing dan kuesioner

SUPR-Q. Pengujian dilakukan guna mendapat

feedback dari responden dan penilaian terhadap

website yang dikembangkan pada aspek

usability, credibility, appearance, dan loyalty.

Pengujian user testing yang menghasilkan data

kualitatif, dilakukan kepada 5 responden dari

pihak pengguna baik client maupun non-client

(Nielsen, 2012). Selanjutnya, pengujian dengan

menggunakan kuesioner SUPR-Q dilakukan

kepada 20 responden dari pihak pengguna baik

client maupun non-client untuk mendapatkan

data kuantitatif (Nielsen, 2006).

Hasil yang diperoleh dari user testing

berupa feedback dikelompokan menjadi

penilaian positif dan penilaian negatif. Penilaian

positif dari responden adalah terkait tampilan

website secara keseluruhan yang sudah baik dan

sederhana, fungsi pada website yang mudah

digunakan serta konten pada website yang

informatif, telah tertata dengan rapi dan

menarik karena menjelaskan juga dokumen

yang harus dipersiapkan sebagai persyaratan.

Sedangkan penilaian negatif atau kekurangan

dari website berdasarkan feedback yang didapat

ialah terkait dengan kurangnya variasi dalam

menyajikan konten artikel/berita dan kurangnya

fitur untuk kolom komentar, share, like atau

dislike sebuah artikel/berita, lalu penataan letak

suatu konten/fungsi yang masih kurang sesuai

dan kurang maksimalnya fungsi pada website,

selain itu terdapat saran untuk menambahkan

fitur live chat agar menambah nilai lebih untuk

perusahaan.

Selanjutnya, pengujian dilakukan dengan

menggunakan kuesioner SUPR-Q untuk

mendapat data kuantitatif dan dihitung dengan

persamaan 4.1 di bawah (Hidayat, 2017).

Nilai SUPR-Q = x 100% (4.1)

Hasil yang didapat oleh keseluruhan aspek

sebesar 77,04%. Lalu, dilakukan perhitungan

dan analisis terhadap masing-masing aspek,

sehingga dapat diketahui bahwa nilai pada

aspek usability bernilai 84,5%, aspek credibility

bernilai 75,5%, aspek appearance bernilai 76%

dan aspek loyalty bernilai 72,4%.

Gambar 15. Skala Konversi System Usability

Scale (SUS)

Berdasarkan skala konversi yang

ditampilkan pada Gambar 15, hasil yang

didapat pada pengujian dengan kuesioner

SUPR-Q baik secara keseluruhan maupun pada

setiap aspek, nilai yang didapat tergolong

kedalam kategori yang baik sehingga dapat

diinterpretasiikan bahwa website yang

dikembangkan bernilai baik dan dapat diterima

(acceptable) oleh pengguna baik sebagai

perwakilan dari pihak client maupun pihak non-

client.

5. KESIMPULAN DAN SARAN

Peneliti menyimpulkan beberapa poin dan

dijabarkan sebagai berikut:

1. Kebutuhan dari website perusahaan

disajikan berupa konten yang akan

ditampilkan pada website perusahaan

sesuai dengan kebutuhan dan

diharapkan dapat meningkatkan

kredibilitas website. Konten tersebut

didapatkan dari serangkaian proses

yang di awali oleh tahap research

dengan melakukan wawancara yang

menghasilkan kebutuhan stakeholder

dan pengguna. Kemudian dilakukan

pemodelan untuk menghasilkan

persona dari pengguna umum pada

tahap modeling. Hasil wawancara dan

persona yang dibuat kemudian

dianalisis pada tahap requirement

definition sehingga menghasilkan

kebutuhan website mencakup konten

yang ditampilkan pada website

FOCUS yang telah dikembangkan.

2. Perancangan dari website FOCUS

dilakukan pada tahap design

framework, menghasilkan sitemap

sebagai gambaran rancangan struktur

informasi dan menghasilkan

antarmuka website berupa wireframe.

Kemudian dilakukan pengembangan

Page 9: Pengembangan Antarmuka Website Dengan Menggunakan …

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer 5548

Fakultas Ilmu Komputer, Universitas Brawijaya

antarmuka pada tahap design

refinement yang menghasilkan

prototype high-fidelity yang siap uji

yang mengacu pada 8 golden rules

interface design.

3. Pengujian dilakukan pada tahap design

support dengan user testing untuk

menghasilkan feedback nilai positif

dan negatif dari responden terhadap

website yang telah dikembangkan.

Selain itu, pengujian dilakukan

menggunakan kuesioner SUPR-Q.

Kuesioner SUPR-Q menilai aspek

usability, credibility, appearance dan

loyalty dengan keseluruhan aspek

mendapatkan nilai 77,04% (kategori

C) yang bernilai baik sehingga dapat

diinterpretasikan bahwa website yang

dikembangkan bernilai baik dan dapat

diterima (acceptable) oleh pengguna

baik dari pihak client maupun non-

client.

Selanjutnya, saran yang dapat diberikan

kepada peneliti yang akan melakukan penelitian

lain menggunakan metode Goal Directed

Design adalah sebagai berikut:

1. Melakukan validasi kebutuhan website

pada tahap requirement definition dan

design framework sehingga jika ada

perubahan kebutuhan dan penambahan

fungsi dapat diadaptasi, kegiatan

validasi juga dapat bermanfaat untuk

menyesuaikan tampilan yang dibuat

dengan tujuan yang diinginkan

sehingga dapat mengurangi feedback

negatif.

2. Untuk melaksanakan perbaikan

maupun pengembangan website

dengan menggunakan Goal Directed

Design disarankan untuk melakukan

evaluasi terhadap website sebelumnya,

tujuannya agar memperkuat latar

belakang pengembangan dan dapat

dilakukan analisis perbandingan dari

hasil evaluasi sebelum dan sesudah

perbaikan perancangan website pada

tahap design support.

6. DAFTAR PUSTAKA

Cooper, A., Reimann, R., & Cronin, D., 2007.

About Face 3 The Essentials of

Interaction Design. Canada: Wiley

Publishing Inc., Indianapolis, Indiana.

Hidayat, 2017. Pengujian Penggunaan Laman

Universitas Padjadjaran dengan

Menggunakan SUPR-Q. [pdf] Tersedia

di<https://www.academia.edu/3162133

5/> [diakses pada 27 Agustus 2018].

Nielsen Norman Group., 2004. Card Sorting:

How Many Users to Test. [online]

Tersedia di

<https://www.nngroup.com/articles/car

d-sorting-how-many-users-to-test/>

[diakses pada 28 Agustus 2018].

Nielsen Norman Group., 2006. Quantitative

Studies: How Many Users to Test?.

[online] Tersedia di

<https://www.nngroup.com/articles/qua

ntitative-studies-how-many-users/>

[diakses pada 28 Agustus 2018].

Nielsen Norman Group., 2012. How Many Test

Users in a Usability Study?. [online]

Tersedia di <

https://www.nngroup.com/articles/how-

many-test-users/> [diakses pada 27

Agustus 2018].

Nielsen Norman Group, 2012. Usability 101:

Introduction to Usability. [online]

Tersedia di:

<https://www.nngroup.com/articles/usa

bility-101-introduction-to-usability/>

[Diakses 28 Agustus 2018].

Sabariah, M., Ashshidhiqi, G., & Suwawi, D.,

2016. Recommendation of Information

Architecture Design on Higher

Education Institution Website Using

Card Sorting Approach on Goal-

Directed Design Method. [pdf]

Tersedia di

<https://www.researchgate.net/profile/

Mira_Sabariah> [diakses pada 27

Agustus 2018].

Shneiderman, B. & Plaisant, C., 2005.

Designing The User Interface:

Strategies for Effective Human

Computer Interaction, 4th edition.

United States of America: Pearson

Education, Inc.


Recommended