JNATIA Volume 1, Nomor 1, November 2022

Jurnal Nasional Teknologi Informasi dan Aplikasinya

ANALISIS PERANCANGAN WEB APLIKASI GOFFEESHOP DENGAN METODE ATOMIC DESIGN DAN USER CENTERED DESIGN

  • G. A. M. Bendesaa1, M. A. Raharjaa2

aProgram Studi Informatika, Falkutas Matematika dan Ilmu Pengetahuan Alam, Universitas Udayana, Badung, Bali, Indonesia, 1gdeagung15@gmail.com 2made.agung@unud.ac.id

Abstract

Design patterns in Software Engineering generally provide solutions to recurring problems that often occur in software design. The subjective difference in design style is one of the obstacles experienced by Front-End Developers in designing the user interface design of slicing software, making the process of designing user interface designs tends to take a long time. This is the background of the author to design a Design System with the Atomic Design method in designing Goffeeshop Web Applications. In this research will be carried out using the Atomic Design method in the design process and the overall process of this research will use the User Centered Design method in several stages that are adapted to the research. Based on the test results, the research can be seen that the System Design that is designed can increase the productivity of a Front-End Developer in the design so that the time used is reduced because by utilizing the concept of the Atomic Design method. In addition, the resulting system results are more uniform and consistent. Then tested with the concept of User Centered Design using a questionnaire before and after the research design in accordance with usability indicators. Testing with a questionnaire before design is carried out to find out the solution and researchers can decide to create this information system, then a questionnaire is carried out after the design is carried out to be able to measure the level of user satisfaction with the Goffeeshop Web Application that has been designed which in this study an average of 69.6% of respondents users say this system is very easy and suitable.

Keywords: Software Engineering, User Centered Design, Atomic Design, User Interface, FrontEnd Developer

  • 1.    Pendahuluan

Belakangan ini karena zaman sudah semakin berkembang, Ramai pemberitaan tentang Pemerintah yang mewacanakan Aparatur Sipil Negara (ASN) dapat bekerja dari mana saja atau Work From Anywhere (WFA) [1]. Oleh karena itu banyak pekerja WFA yang memilih bekerja dari Bali agar sekaligus mereka dapat menikmati wisata-wisata yang ada di Bali. Pada saat ini banyak wisatawan yang berkunjung ke bali setelah sekian lama pandemi, cenderung membutuhkan sebuah panduan untuk menemui objek-objek wisata. Maka dari itu penulis memberikan solusi untuk membuatkan tempat panduan wisata khususnya wisata kopi di Bali yang diberi nama Goffeeshop. Goffeeshop ini singkatan dari Go yang artinya pergi dan Coffeshop artinya tempat atau kedai kopi yang kemudian disingkat menjadi Goffeeshop yang artinya tempat untuk mencari tempat wisata kopi. Gofeeshop ini dirancang menjadi Web Aplikasi panduan yang bertujuan untuk menyarankan wisatawan terkait tempat wisata kopi berdasarkan kriteria Objek pemandangan, Tipe, dan Budget yang diharapkan memudahkan wisatawan dalam mengetahui tempat wisata kopi yang ada di Bali berdasarkan kriteria yang tercantum.

Dalam pengembangan web Goffeeshop terdapat kendala yang dialami oleh pihak tim pengembang Front-End Developer, Bahwa dalam pengembangan sebuah Web Aplikasi sering

kali seorang Front-End Developer menghabiskan waktu yang lama ketika melakukan slicing desain antarmuka website, Hal ini disebabkan karena pihak developer cenderung mengedepankan hasil yang subjective, namun tanpa memikirkan efisiensi waktu yang dapat mengurangi produktifitas seorang developer. Selain itu dilakukan juga pengujian pra-penelitian dalam slicing tampilan antarmuka yang kemudian ditemukan beberapa point permasalahan. Masalah yang ditemukan yaitu perbedaan keseragaman antarmuka, menyebabkan tidak konsistennya suatu antarmuka, dan beberapa antarmuka pengguna yang dibuat tidak sesuai identitas perusahaan [2]. Adapun dalam proses pembuatan antarmuka website pada pengujian pra penelitian cenderung memakan waktu yang lama. Antarmuka pengguna yang konsisten merupakan hal yang sangat penting dalam sebuah produk digital tentunya. Antarmuka pengguna yang tidak konsisten pada suatu produk digital akan membuat pengguna lebih sulit memahami suatu komponen pada produk digital dan membuat pengalaman yang buruk bagi pengguna.

Dalam merancang sebuah web aplikasi tentunya melibatkan pengguna untuk mempertimbangkan kebutuhan, tujuan, dan masukan dari pengguna. User Centered Design (UCD) dapat digunakan dalam konteks industri untuk memperkenalkan lebih banyak wisata kopi yang ada di daerah Bali. Metode Atomic Design digunakan dalam perancangan desain sistem. Metode Atomic Design mengklasifikasikan antarmuka ke dalam beberapa bagian, dari yang paling kecil hingga menjadi bagian elemen yang lebih besar dan kompleks

Berdasarkan permasalahan yang sudah diuraikan sebelumnya disebabkan karena standarisasi desain atau pendoman desain oleh pihak (User Interface). Standarisasi desain dapat membantu meningkatkan kemampuan tim desain dan Front-End Developer dalam mempelajari komponen desain yang sesuai dengan identitas perusahaan, sehingga menambah produktivitas tim desain maupun pihak Front-End Developer karena berkurangnya waktu dalam proses pengembangan suatu antarmuka.

  • 2.    Metode Penelitian

Pada penelitian ini dilakukan dengan konsep Atomic Design yang akan diterapkan dalam perancangan desain sistem. Nantinya dalam analisis dan perancangan slicing Web Aplikasi mengacu pada metodologi Atomic Design yang mempunyai beberapa tahapan yang disesuaikan dengan penelitian ini. Kemudian metodologi User Centered Design dilakukan dalam proses perancangan dan pengujiannya yang menggunakan kuesioner dengan indikator usability yang langsung melibatkan responden atau pengguna [3].

  • 2.1.    Metode Pengumpulan Data

Beberapa aktivitas yang dilakukan dalam tahapan pengumpulan data untuk penelitian ini adalah:

  • 1.    Studi Literatur

Pengumpulan data dengan cara mengumpulkan literatur seperti jurnal dari internet, dan mempelajari yang berkaitan dengan penelitian yang akan dibahas.

  • 2.    Perancangan Web Aplikasi

Perancangan Web Aplikasi dilakukan dengan menggunakan konsep User Centered Design dalam melakukan survey langsung dengan beberapa responden untuk mendapatkan solusi dan peneliti dapat memutuskan untuk menciptakan sistem yang diinginkan langsung oleh pengguna. Kemudian konsep dari metode Atomic Design diharapkan dapat memudahkan dan mempercepat slicing tampilan Front-End.

  • 3.    Pengujian Pra-penelitian dan Pasca Penelitian

Pengumpulan data dengan cara melakukan pengujian pra-penelitian dengan tujuan mengetahui poin permasalahan dan menjadi acuan perbandingan waktu slicing FrontEnd pada pengujian pasca-penelitian. Pengujian dilakukan dengan skenario uji coba saat melakukan slicing tampilan Front-End yang nantinya hasil dari studi kasus ini menjadi variable acuan dalam pengujian pasca-penelitian nantinya.

  • 2.2.   Metode Perancangan Sistem

Pada saat perancangan Web Aplikasi dari Goffeeshop dilakukan pengumpulan data yang akan lakukan kuesioner kepada beberapa responden yang berisikan beberapa pertanyaan untuk mendapatkan solusi dan peneliti dapat memutuskan untuk menciptakan sistem informasi ini.

Gambar 2.1. Skema User Centered Design (UCD)

Kemudian dalam perancangan sistem akan menggunakan konsep dari metode Atomic Design. Adapun konsep dari Atomic Design mengklasifikasikan antarmuka ke dalam beberapa bagian, dari yang paling kecil hingga menjadi bagian elemen yang lebih besar dan kompleks. Dalam pengembangan web, ada lima level yang jelas dalam desain atom: Atom, Molekul, Organisme, Template, dan Halaman [4].

Gambar 2.2. Skema Atomic Design

Pada Gambar diatas merupakan tahapan analisis dari Atomic Design. Pada tahapan ini dimulai dari apakah desain user interface (UI) bisa dipecahkan kembali menjadi lebih kecil, apabila bisa maka UI akan dipecahkan menjadi serpihan yang lebih kecil lagi. Proses tersebut berulang sampai UI tersebut menjadi atom.

Sebagai contoh, Atom dapat berupa sebuah tombol yang ada pada sebuah Navigation Bar. Pada Navigation Bar terdiri dari beberapa tombol seperti tombol navigasi dan juga tombol search bar. Kemudian, jika hal tersebut digabungkan menjadi satu Navigation Bar, maka akan dapat dikatakan sebuah Molekul pada konsep Atomic Design. Dengan ini, dapat dikatakan bahwa

G. A. M. Bendesaa1, M. A. Raharjaa2 Analisis Perancangan Web Aplikasi Goffeeshop Dengan Metode Atomic Design Dan User

Centered Design

Atomic Design ini dapat membuat aplikasi jauh lebih maintainable dan jauh lebih baik serta programmer dapat dengan lebih cepat beradaptasi pada program.

  • 3.    Hasil dan Diskusi

    3.1.    Perencanaan Web Aplikasi User-Centered Design

Tahap perancangan Web Aplikasi Goffeeshop ini dilakukan menggunakan konsep dari User Centered Design yang dimana peneliti melakukan perencanaan berdasarkan penelitian sebelumnya [5]. Kemudian melakukan survey langsung dengan beberapa responden untuk mengetahui solusi dan peneliti dapat memutuskan untuk menciptakan sistem informasi ini. Berikut hasil grafik survei dari beberapa responden pengguna.

Gambar 3.1. Grafik Persentase Penikmat dan Pecinta Kopi

Apakah anda mengaiami kesulitan daiam mencari wisata kopi di daerah tertentu? 21 FMpOflMt



φ TMth K⅛ajuktan

9 Cukup Kesultan

• KMUlHtn

Gambar 3.2. Grafik Persentase tingkat kesulitan mencari wisata kopi di Bali

Apakah anda mengalami kesulitan daiam mencari wisata kop- dengan pemandangan yang sesuai ekspektasi?

21 rwpcrnes


* T∙dok KesUltun φ CtJiup KesuiUr.

• KeauHan

Gambar 3.3. Grafik Persentase tingkat kesulitan menggunakan sistem sebuah Web Aplikasi

  • 3.2.    Pembuatan Web Aplikasi UCD dengan Atomic Design

Berdasarkan penelitian sebelumnya, Atomic Design dapat membuat aplikasi jauh lebih maintainable dan jauh lebih baik serta programmer dapat dengan lebih cepat beradaptasi pada

program [6]. Maka dari itu, peneliti juga menggunakan metode Atomic Design ini dalam mengeksekusi pembuatan sistem Web Aplikasi Goffeeshop ini.

cBθ× mt="2">

<Button variant="ghost” IeftIcon=CcFaMountain ∕>} width="1O0⅜"

JustifyContent=llTlex-Start" as={Link} to="/" colorscheme="green" > Coffee Shop <∕Button>

<Button variant="ghost" IeftIcon=CcFaMountain ∕>} width="100%"

j ustifyContent=l,ftex-start" as={Link} to="∕about"

ColorScheme="green" > About Us <∕Button> C∕BθX>

Gambar 3.4. Kode Program sebelum menggunakan konsep Atomic Design

Pada gambar diatas merupakan tampilan kode yang belum menggunakan konsep dari Atomic Design, jadi terlihat bahwa terdapat redundansi, dimana peneliti harus mengganti setiap kode tersebut jika ingin membuat perubahan yang seragam. Kemudian pula kode tersebut sangat panjang dan boros, dan dapat memicu kelelahan penulis atau programmer dalam membuatnya berdasarkan riset sebelumnya.

<Box mt="2">

CSidebarButton leftIcon=∙(<FaMountain ∕>} text="Coffee Shop" path="/1' i>

CSidebarButton leftIcon={<FaMountain ∕>} te×t=,,About Us" path=”/about" ∕> c∕Box>

Gambar 3.5. Kode Program setelah menggunakan konsep Atomic Design

Pada gambar diatas merupakan mengimplementasikan kode setelah menggunakan konsep dari Atomic Design. dapat dilihat bahwa kode jauh lebih efisien dan juga lebih hemat. Kemudian penulis juga hanya perlu untuk mengubah komponen di dalamnya dan komponen yang sama nantinya juga akan ikut berubah. Hal Ini akan berguna jika terdapat banyak komponen yang serupa, jadi peneliti tidak harus mengganti setiap komponen tersebut.

Setelah tahap perancangan slicing tampilan Front-End selesai, berikut hasil tampilan dari sistem Web Aplikasi Goffeeshop yang telah dirancang. Terdapat tampilan Homepage pada Gambar 3.6, Tampilan About Us pada Gambar 3.7, Tampilan Modul Button Detail pada Gambar 3.8, dan Tampilan Footer pada Gambar 3.9.

Gambar 3.6. Tampilan Homepage sekaligus menu Coffee Shop.

Gambar 3.7. Tampilan About Us


Gambar 3.8. Tampilan Modul Button Detail

Gambar 3.9. Tampilan Footer

  • 3.3.    Pengujian Sistem

  • 1.      Metode pengujian pasca-penelitian dengan metode Atomic Design dilakukan bertujuan untuk

mengetahui durasi waktu yang digunakan untuk membuat tampilan slicing Front-End. Jadi akan dilakukan pengujian sebelum menggunakan konsep Atomic Design akan memakan waktu berapa lama, dan dilakukan pengujian setelah menggunakan konsep Atomic Design akan memakan waktu berapa lama. Berdasarkan skenario yang dilakukan, menghasilkan varian perolehan durasi waktu penyelesaian slicing Front-End. Durasi waktu penyelesaian tugas dapat dilihat pada tabel berikut:

Tabel 1. Hasil waktu slicing Pra-penelitian

No

Modul

Waktu Penyelesaian slicing Front-End

1

Homepage / Coffee Shop

48 menit 45 detik

2

About Us

39 menit 30 detik

3

Modul Button Detail

33 menit 45 detik

4

Footer

22 menit 10 detik

Total

144 menit 10 detik

Tabel 2. Hasil waktu slicing Pasca-penelitian

No

Modul

Waktu Penyelesaian slicing Front-End

1

Homepage / Coffee Shop

20 menit 15 detik

2

About Us

15 menit 20 detik

3

Modul Button Detail

14 menit 16 detik

4

Footer

12 menit 20 detik

Total

62 menit 11 detik

  • 2.      Data hasil pengujian pra-penelitian ini akan dijadikan acuan perbandingan pada pengujian pasca

penelitian. Dari perolehan waktu tersebut didapatkan total penyelesaian slicing tampilan FrontEnd pra-penelitian yaitu 144 menit 10 detik dan total penyelesaian slicing tampilan Front-End pasca-penelitian yaitu 62 menit 11 detik.

4.


Kemudian metode pengujian sistem menggunakan Kuesioner dengan indikator dari Usability digunakan dalam pengujian langsung kepada pengguna untuk mengetahui tingkat kepuasan pengguna terhadap sistem yang dibuat. Kemudian terdapat hasil Berikut Hasil persentase dari pengujian dengan Kuesioner yang sudah melibatkan 30 pengguna sebagai user:

5.

Tabel 1. Hasil Kuesioner dengan 30 responden

No

Indikator

Ekspektasi

Jumlah Responden

Hasil Persentase

Kesimpulan

1

Learnability (A)

Sistem dapat dipelajari dengan mudah

30

69.6% Sangat Mudah

Valid

2

Learnability (A)

Pengguna dapat menerima informasi secara detail dan spesifik pada sistem

30

69.6% Sangat Mudah

Valid

3

Learnability (A)

Pengguna dapat memahami isi dan konten yang disajikan pada sistem

30

65.2% Sangat Mudah

Valid

4

Learnability (A)

Pengguna dapat mempelajari sistem tanpa instruksi tertulis

30

69.6% Sangat Mudah

Valid

5

Memorability (B)

Pengguna dapat mengingat penggunaan sistem

30

65.2% Sangat Mudah

Valid

6

Memorability (B)

Pengguna dapat merasa mudah kapanpun menggunakan sistem ini

30

69.6% Sangat Mudah

Valid

8

Efficiency (C

Pengguna dapat memperoleh informasi yang ada pada sistem

30

65.2% Sangat Mudah

Valid

8

Efficiency (C)

Pengguna dapat menemukan informasi yang ingin dicari dari awal membuka sistem ini

30

69.6% Sangat Mudah

Valid

10

Errors (D)

Pengguna tidak menemukan menu yang error atau tidak sesuai dengan fungsi dari sistem

30

100% Tidak Menemukan Errors

Valid

11

Errors (D)

Pengguna dapat menemukan menu atau fitur yang dicari pada sistem

30

65.2% Sangat Mudah

Valid

12

Satisfaction (E)

Pengguna senang dengan desain antarmuka pada sistem

30

69.6% Sangat Mudah

Valid

13

Satisfaction (E)

Pengguna merasa nyaman dalam menggunakan sistem

30

65.2% Sangat Mudah

Valid

14

Satisfaction (E)

Paduan warna dan tata letak sistem nyaman untuk dilihat

30

69.6% Sangat Mudah

Valid

15

Satisfaction (E)

Sistem sesuai dengan ekspetasi pengguna, ketika melihat logo yang ada pada laman sistem

30

65.2% Sangat Mudah

Valid

Hasil Pengujian Sistem

IndtMMt Uaaislft

Tabel 2. Grafik Pengujian sistem sesuai Indikator Usability

Berdasarkan hasil survey dari kuesioner yang disebarkan dengan Indikator Usability maka diperoleh bahwa indikator Learnability mendapatkan rata-rata 68%, Memorability mendapatkan rata-rata 67,4%, Efficiency mendapatkan rata-rata 67,4%, Errors mendapatkan rata-rata 81,1%, dan Satisfaction mendapatkan rata-rata 67,4%. Jadi pada indikator Errors mendapatkan persentase paling tinggi yang mengartikan sistem yang dibuat sudah berhasil dan memiliki sedikit errors.

  • 4.    Kesimpulan

Berdasarkan permasalahan dan hasil penelitian diatas dapat disimpulkan bahwa dengan menggunakan konsep dari metode Atomic Design dalam slicing tampilan Front-End akan memudahkan programmer dalam efisiensi waktu pengerjaan slicing, yaitu dari perolehan waktu tersebut didapatkan total penyelesaian slicing tampilan Front-End pra-penelitian yaitu 144 menit 10 detik dan total penyelesaian slicing tampilan Front-End pasca-penelitian yaitu 62 menit 11 detik. Dengan menggunakan konsep Atomic Design akan mengklasifikasikan antarmuka ke dalam beberapa bagian, dari yang paling kecil hingga menjadi bagian elemen yang lebih besar dan kompleks. Kemudian kode akan jauh lebih efisien dan juga lebih hemat, karena penulis hanya perlu untuk mengubah komponen di dalamnya dan komponen yang sama nantinya juga akan ikut berubah. Hal Ini akan berguna jika terdapat banyak komponen yang serupa, jadi peneliti tidak harus mengganti setiap komponen tersebut. Kemudian dilakukan pengujian dengan konsep User Centered Design menggunakan Kuesioner sebelum dan sesudah rancangan penelitian sesuai dengan indikator usability. Pengujian dengan Kuesioner sebelum perancangan dilakukan untuk mengetahui solusi dan peneliti dapat memutuskan untuk menciptakan sistem informasi ini, Kemudian dilakukan Kuesioner setelah perancangan yang dilakukan untuk dapat mengukur tingkat kepuasan user terhadap Web Aplikasi Goffeeshop yang telah dirancang yang pada penelitian ini diperoleh bahwa indikator Learnability mendapatkan rata-rata 68%, Memorability mendapatkan rata-rata 67,4%, Efficiency mendapatkan rata-rata 67,4%, Errors mendapatkan rata-rata 81,1%, dan Satisfaction mendapatkan rata-rata 67,4%. Jadi pada indikator Errors mendapatkan persentase paling tinggi yang mengartikan sistem yang dibuat sudah berhasil dan memiliki sedikit errors.

References

  • [1]    Amrynudin, A., D., K., 2022. Wacana Kebijakan Work From Anywhere (WFA). Pusat

Penelitian Badan Keahlian DPR RI Gd. Nusantara I Lt. 2, Vol. XIV, No.10/II/Puslit/Mei/2022

  • [2]    Huldan, S., Finandhita., A., 2021. Pengembangan Desain Sistem Pada Perangkat Lunak Ibid Dengan Pendekatan Atomic Design. Design system, 31 Usability matrics, User Interface, Consistent, Efficiency, 1(01), pp.112- 116.

  • [3]    Sukmasetya., P, Setiawan., A, Arumi., E., R., 2022. Penggunaan Usability Testing sebagai alat evaluasi website KRS online pada Perguruan Tinggi. P-ISSN: 2303-3142 E-ISSN: 25488570, Vol. 9 No. 1 Tahun 2020.

  • [4]    Frost, B., n.d., 2016. Atomic design.

  • [5]    Aulia., A, Kusuma., G., P., 2020. Enhancement of User-Centered Design Method for

Improving Usability of E-Learning Website Design. International Journal of Emerging Trends in Engineering Research, 8(6), June 2020, 2543 - 2550.

  • [6]    Le, N., 2022. Creating software components using atomic design and test driven

development. [online] Theseus.fi.

Halaman ini sengaja dibiarkan kosong

734