implementasi metode user centered design (u cd) u …digilib.unila.ac.id/55844/3/skripsi tanpa bab...

IMPLEMENTASI METODE USER CENTERED DESIGN (UCD) UNTUKSISTEM INFORMASI GEOGRAFIS UMKM BERBASIS WEB DAN

ANDROID

(Skripsi)

Oleh

Amrullah Subekti

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS LAMPUNG

BANDAR LAMPUNG

2019

ABSTRAK


ANDROID

Oleh

AMRULLAH SUBEKTI

Salah satu faktor yang mempengaruhi keberadaan suatu sistem adalah faktor

kenyamanan pengguna (user experience). Studi ini membahas desain antarmuka

pengguna (user interface) untuk meningkatkan pengalaman pengguna menggunakan

metode user centered design. Metode user centered design digunakan untuk

menentukan tingkat kesesuaian persyaratan sistem dari sisi pengguna. Melalui metode

ini, pengguna dapat memberikan saran secara langsung untuk meningkatkan antarmuka

sehingga desain sistem menjadi lebih mudah dan siap untuk diimplementasikan.

Analisis ini dilakukan untuk menentukan tingkat pengalaman pengguna Sistem

Informasi Geografis Mikro, Kecil dan Menengah (UMKM) dan menyarankan desain

antarmuka dan peningkatan selama pengembangan.

Sistem Informasi Geografis UMKM adalah sistem yang membantu orang menemukan

informasi produk dari UMKM melalui lokasi, serta membantu UMKM dalam

mempromosikan produk mereka. Selain itu, sistem ini dapat membantu pelaku UMKM

untuk menemukan bahan baku yang dijual oleh UMKM lain.

Studi ini berfokus pada persepsi evaluator dalam hal kemudahan, efisiensi, kemudahan

mengingat, kesalahan, dan kenyamanan dari antarmuka pengguna. Hasil dari penelitian

ini adalah bentuk desain antarmuka pengguna baru berdasarkan hasil analisis

menggunakan prinsip user centered design.

Kata Kunci : user interface, user experience, sistem informasi geografis, usaha mikro

kecil dan menengah, user centered design.

ABSTRACT

USER CENTERED DESIGN (UCD) METHOD IMPLEMENTATION FORUMKM GEOGRAPHIC IINFORMATION SYSTEM BASED ON WEB AND

ANDROID

By

AMRULLAH SUBEKTI

One of the factors that influence the existence of a system is the user comfort factor

(user experience). This study discusses the user interface design to improve user

experience using the user centered design method. The user-centered design method is

used to determine the level of system requirements compliance from the user side.

Through this method, users can provide suggestions directly to improve the interface

so that the system design becomes easier and ready to implement. The analysis was

conducted to determine the level of user experience of existing Micro, Small and

Medium Enterprise (MSME) Geographic Information System and suggest an interface

design and improvement during development.

The MSME Geographic Information System is a system that helps people find product

information from MSME through locations, as well as assist MSME in promoting their

products. In addition, this system can help MSME perpetrator to find raw materials

sold by other MSME.

This study focuses on evaluator’s perceptions in terms of learnability, efficiency, ease

of remembering (memorability), errors, and convenience (satisfaction) of the user

interfaces. The results of the study were in a form of new user interface design based

on the results of the analysis using the user centered design principle.

Keywords : user interface, user experience, sistem informasi geografis, usaha mikro

kecil dan menengah, user centered design.


ANDROID

Oleh

AMRULLAH SUBEKTI

Skripsi

Sebagai Salah Satu Syarat untuk Memperoleh GelarSARJANA KOMPUTER

Pada

Jurusan Ilmu KomputerFakultas Matematika dan Ilmu Pengetahuan Alam

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAMUNIVERSITAS LAMPUNG

BANDAR LAMPUNG2019

RIWAYAT HIDUP

Penulis dilahirkan pada tanggal 25 Desember di Desa Titiwangi Lampung Selatan,

sebagai anak pertama dari tiga bersaudara dengan ayah bernama Suharsoyo dan Ibu

Miftakhurrohma.

Penulis Menyelesaikan pendidikan formal pertama kali di taman Kanak-Kanak

Bustanul Athfal Lampung Selatan dan selesai pada tahun 2002. Pendidikan dasar di

Madrasah Ibtidaiyah Bumijaya dan selesai pada tahun 2008. Pendidikan menengah

pertama di SMPN 1 Candipuro diselesaikan pada tahun 2011, kemudian melanjutkan

ke pendidikan menengah atas di SMAN 1 Sidomulyo yang diselesaikan pada tahun

2014.

Pada tahun 2014 penulis terdaftar sebagai mahasiswa Jurusan Ilmu Komputer Fakultas

Matematika dan Ilmu Pengetahuan Alam Universitas Lampung melalui jalur

SBMPTN. Selama menjadi mahasiswa beberapa kegiatan yang dilakukan penulis

antara lain.

1. Menjadi anggota Kaderisasi Himpunan Mahasiswa Jurusan Ilmu Komputer pada

tahun periode 2014-2015.

2. Menjadi Asisten Laboratorium dan Asisten Dosen Jurusan Ilmu Komputer pada

tahun periode 2015-2018.

3. Pada bulan November 2016 sampai dengan Mei 2017 penulis bekerja sebagai

UI/UX Designer di PT. Anco Jaya Telekomunikasi.

4. Pada bulan Januari 2017 penulis melaksanakan kerja praktik di PT. Anco Jaya

Telekomunikasi.

5. Pada bulan April 2017 sampai dengan September 2017 penulis bekerja sebagai

UI/UX Designer di Dewangga Technology.

6. Pada bulan November 2017 sampai saat ini penulis sebagai Anggota di Capung

Technology.

7. Pada bulan Juli 2017 penulis melaksanakan Kuliah Kerja Nyata di Desa

Sidomulyo, Kecamatan Sidomulyo, Kabupaten Lampung Selatan, Lampung.

PERSEMBAHAN

Puji dan syukur saya panjatkan kepada Allah SWT

atas segala berkah-Nya sehingga skripsi ini dapat

terselesaikan.

Kupersembahkan karya ini kepada:

Ayahanda dan Ibunda tercinta, Adik-adikku dan

orang terkasih yang selalu senantiasa memberikan

cinta, kasih sayang, dan do’a serta dukungan yang

tiada terhingga untuk mencapai keberhasilanku.

Dan seluruh keluarga besarku yang selalu

memberikan semangat dan perhatian kepadaku,

Keluarga Ilmu Komputer 2014,

Serta Almamater Tercinta, Universitas Lampung

MOTTO

“A reader lives a thousand lives before he dies. The man who

doesn’t read lives only one”.

(Jojen Reed)

“Never forget what you are, the rest of world will not. Wear

it like an armor and it can never be used to hurt you”.

(Tyrion Lannister)

SANWACANA

Puji syukur penulis panjatkan ke hadirat Alloh SWT atas berkah, rahmat, dan hidayah-

Nya penulis dapat menyelesaikan skripsi yang berjudul “Implementasi Metode User

Centered Design (UCD) untuk Sistem Informasi Geografis UMKM berbasis Web dan

Android” dengan baik dan lancar.

Terima kasih penulis ucapkan kepada semua pihak yang telah membantu dan berperan

besar dalam menyusun skripsi ini, antara lain.

1. Kedua orang tua tercinta, Bapak Suharsoyo dan Ibu Miftakhurrohma, Adikku

tercinta Amin, dan Rafiq, serta Keluarga Besar yang selalu memberikan doa,

motivasi dan kasih sayang yang tak terhingga. I love you guys more than I love

myself and no other words could ever describe it.

2. Ibu Anie Rose Irawati, ST, M.Cs., sebagai pembimbing utama, pembimbing

akademik penulis dan juga selaku Ketua Prodi D3 Manajemen Informatika FMIPA

Universitas Lampung, yang telah membimbing penulis dan memberikan ide, kritik

serta saran sehingga penulisan skripsi ini dapat diselesaikan.

3. Bapak Didik Kurniawan, S.Si., MT., sebagai pembimbing kedua dan juga selaku

Sekretaris Jurusan Ilmu Komputer FMIPA Universitas Lampung, yang telah

membimbing penulis dan memberikan ide, kritik serta saran sehingga penulisan

skripsi ini dapat diselesaikan.

4. Bapak Ir. Machudor Yusman, M.Kom., sebagai pembahas, yang telah memberikan

masukan yang bermanfaat dalam penyelesaian skripsi.

5. Bapak Prof. Warsito, S.Si., D.E.A., Ph.D. selaku Dekan FMIPA Universitas

Lampung.

6. Bapak dan Ibu Dosen Jurusan Ilmu Komputer FMIPA Universitas Lampung yang

telah memberikan ilmu dan pengalaman dalam hidup untuk menjadi lebih baik.

7. Ibu Ade Nora Maela, Bang Zainuddin dan Mas Ardi Novalia yang telah membantu

segala urusan administrasi penulis di Jurusan Ilmu Komputer.

8. For the rose that always bloom, the one that tamed the fox, you are such an amazing

creature, and you help make this world a better place. Hanny Pertiwi Hambali.

Puissiez-vous toujours vous réveiller le matin avec un sourire sur votre visage.

9. Rekan Himaen Squad Ferly Medyansyah, Malik, Jayadi, Avif, Dayat, Richi,

Nanda, Tejo, Rajes, Rifqi yang telah membantu penulis terutama Ferly yang telah

mendukung penulis serta menjadi tempat berbagi canda dan tawa selama penulis

menyelesaikan skripsi.

10. Rekan seperjuangan Saiful Anwar, Faiz Azmi Rekatama, Muammar Rizki

Fadhillah Ibrahim, Niki Rahmadi Wiharto, dan Feri Krisnanto yang telah

menemani, teman diskusi, rekan kerja, rekan bercanda, rekan yang perduli dan

rekan yang membangun mimpi penulis. Bersama-sama untuk berjuang mencapai

gelar S. Kom. Semoga kita bisa menggapai cita-cita kita dan meraih kesuksesan

kita serta selalu menjadi sahabat penulis.

11. Rekan seperjuangan Keluarga Cemara Kak Liong, Mbak Peye, Adik Akbar, dan

Om Boris. Yang telah memberi warna semasa perkuliahan.

12. Keluarga Ilmu Komputer 2014 yang tidak bisa penulis sebut satu persatu. Keluarga

kedua penulis, rekan kelompok, rekan diskusi, rekan bercanda dan telah memberi

arti dan warna serta pengalaman tak ternilai semasa duduk dibangku kuliah.

13. Keluarga Himakom yang sudah mengajari banyak hal dalam berorganisasi,

memberikan banyak pengalaman, berjuang bersama memajukan Himakom,

berjuang bersama membawa nama baik Jurusan Ilmu Komputer. Semoga

Himakom semakin sukses untuk kedepannya. Himakom, MAKIN JAYA.

14. Teman-teman Asisten Dosen yang juga menjadi keluarga kedua, mengajari banyak

hal dalam berorganisasi, memberi banyak pengalaman, berjuang bersama

memajukan Lab Ilmu Komputer.

Penulis menyadari bahwa skripsi ini masih jauh dari kata sempurna, semoga skripsi ini

membawa manfaat dan keberkahan bagi semua civitas Ilmu Komputer Universitas

Lampung.

Bandar Lampung, 14 Februari 2019

Amrullah SubektiNPM 1417051012

DAFTAR ISI

Halaman

DAFTAR ISI........................................................................................................... i

DAFTAR GAMBAR............................................................................................ iii

DAFTAR TABEL ................................................................................................. v

I. PENDAHULUAN .............................................................................................. 1

1.1 Latar Belakang ......................................................................................... 1

1.2 Rumusan Masalah .................................................................................... 3

1.3 Batasan Masalah....................................................................................... 3

1.4 Tujuan Penelitian...................................................................................... 4

1.5 Manfaat Penelitian.................................................................................... 4

II. TINJAUAN PUSTAKA................................................................................... 5

2.1. Data dam Informasi .................................................................................. 5

2.1.1. Data ................................................................................................... 5

2.1.2. Informasi ........................................................................................... 5

2.2. Desain ....................................................................................................... 6

2.3. Desain User Interface (UI)....................................................................... 6

2.4. Desain User Experience (UX).................................................................. 6

2.5. Fixed Width Design .................................................................................. 6

2.6. Android..................................................................................................... 7

2.7. User Centered Design (UCD) .................................................................. 7

2.7.1. Proses User Centered Design (UCD) ............................................... 8

2.7.2. Pengguna User Centered Design (UCD) .......................................... 8

2.8. Usability ................................................................................................... 9

ii

2.9. Usability Testing (Pengujian Kebergunaan)........................................... 10

2.10. Penelitian Terkait ................................................................................ 10

III. METODOLOGI PENELITIAN ................................................................. 12

3.1. Waktu dan Tempat Penelitian ................................................................ 12

3.2. Perangkat Penelitian ............................................................................... 12

3.3. Tahapan Penelitian ................................................................................. 14

3.3.2. Daftar Kebutuhan Pengguna............................................................... 15

3.3.3. Storyboard .......................................................................................... 17

3.3.4. Hasil Pengujian Paper Prototyping .................................................... 38

IV. PEMBAHASAN............................................................................................ 39

4.1. Pengujian Tingkat Kegunaan (Usability Testing) .................................. 39

4.2. Penerapan Pengujian pada Interface ...................................................... 46

4.2.1. Interface Android ............................................................................ 48

4.2.2. Desain Interface Web...................................................................... 56

4.3. Hasil Pengujian....................................................................................... 63

V. KESIMPULAN DAN SARAN ...................................................................... 75

5.1. Kesimpulan............................................................................................. 75

5.2. Saran ....................................................................................................... 76

DAFTAR PUSTAKA.......................................................................................... 77

DAFTAR GAMBAR

Gambar Halaman

2.1. Proses UCD berdasarkan ISO 9241-210:2010................................................. 8

3.1. Tahapan Penelitian ......................................................................................... 14

3.2. Halaman Registrasi (web) .............................................................................. 19

3.3. Halaman Registrasi (android) ........................................................................ 20

3.4. Halaman re-aktivasi (web) ............................................................................. 21

3.5. Halaman re-aktivasi (android)........................................................................ 22

3.6. Halaman Profil Pelaku (web) ......................................................................... 23

3.7. Halaman Profil Pelaku (android) ................................................................... 24

3.8. Halaman Produk (web) .................................................................................. 25

3.9. Halaman Produk (android)............................................................................. 26

3.10. Halaman Feedback (web) ............................................................................ 27

3.11. Halaman Feedback (android)....................................................................... 28

3.12. Halaman Peta (web) ..................................................................................... 29

3.13. Halaman Peta (android)................................................................................ 29

3.14. Halaman Navigasi (web).............................................................................. 30

iv

3.15. Halaman Navigasi (android) ........................................................................ 31

3.16. Halaman Pencarian (web) ............................................................................ 32

3.17. Halaman Pencarian (android)....................................................................... 33

3.18. Halaman Wishlist (web) ............................................................................... 34

3.19. Halaman Wishlist (android) ......................................................................... 35

3.20. Halaman Rating (web) ................................................................................. 35

3.21. Halaman Rating (android)............................................................................ 36

3.22. Halaman Rekapitulasi (web) ........................................................................ 37

4.1. Halaman Profil ............................................................................................... 48

4.2. Halaman Produk............................................................................................. 50

4.3. Halaman Peta ................................................................................................. 51

4.4. Halaman Navigasi .......................................................................................... 53

4.5. Halaman Rating dan feedback........................................................................ 54

4.6. Halaman Profil ............................................................................................... 56

4.7. Halaman Produk............................................................................................. 57

4.8. Halaman Peta ................................................................................................. 58

4.9. Halaman Navigasi .......................................................................................... 60

4.10. Halaman Rating dan feedback...................................................................... 61

4.11. Halaman Rekapitulasi .................................................................................. 62

DAFTAR TABEL

Tabel Halaman

3.1. Kebutuhan pengguna...................................................................................... 17

4.1. Fitur utama ..................................................................................................... 40

4.2. Task usability testing ..................................................................................... 40

4.3. Plot aspek usability ........................................................................................ 43

4.4. Pertanyaan kuisioner untuk tiap task.............................................................. 45

4.5. Responden penguji ......................................................................................... 46

4.6. Kriteria Penilaian ........................................................................................... 47

4.7. Persentase Penilaian ....................................................................................... 47

4.8. Hasil kuisioner task 1..................................................................................... 49

4.9. Hasil kuisioner task 2..................................................................................... 50

4.10. Hasil kuisioner task 3................................................................................... 52





vi





4.19. Hasil pengujian task 1 (Android) ................................................................. 64





4.24. Hasil pengujian task 1 (Web)....................................................................... 69






I. PENDAHULUAN

1.1 Latar Belakang

Desain merupakan hal yang berkaitan dengan kehidupan manusia. Desain adalah

sebuah rancangan yang melibatkan suatu kreativitas dan inovasi. Di zaman modern

seperti ini banyak produk yang digunakan oleh manusia bermula dari desain dalam

proses pembuatannya. Contohnya adalah aplikasi mobile dan situs-situs web yang

ada pada saat ini.

Dalam pengembangan sebuah perangkat lunak, agar proses pembuatannya tersusun

dan berjalan lancar, diperlukan desain yang matang. Mulai dari desain

teknologinya, sistemnya bagaimana, sampai desain antar mukanya seperti apa. Oleh

sebab itu, proses desain sangat penting dilakukan dalam membangun sebuah

perangkat lunak.

Sebuah sistem dapat dikatakan baik dapat dilihat dari keberhasilan pengguna dalam

mengoperasikannya. Misalnya, “ketika saya melihat halaman web, saya harus bisa

“mengerti” apa itu dan cara menggunakannya tanpa harus mengeluarkan banyak

usaha untuk memikirkannya” (Krug, 2014).

Sebuah desain sistem informasi yang baik, selain memiliki interface yang bersifat

eye catching dan mudah dipahami, juga harus bisa memenuhi semua kebutuhan

2

penggunanya. Diperlukan desain sistem yang baik dan menarik agar pengguna tidak

merasa kesulitan dalam menggunakan sistem dan juga agar pengguna tidak merasa

bosan dalam menggunakan sistem. Selain dari sisi tampilan, pada proses desain

sistem juga harus melihat dari sisi kebutuhan. Kebutuhan apa saja yang dibutuhkan

dari pengguna. Jangan sampai membuat desain sistem yang rumit, sehingga

membuat pengguna kesulitan dan tidak ingin lagi menggunakan sistem tersebut.

Menurut penelitian yang dilakukan oleh User Interface Engineering, Inc diketahui

60% waktu terbuang karena orang tidak bisa menemukan informasi yang ingin

didapat, dan hal ini berdampak pada penurunan produktifitas dan meningkatkan

frustasi (Anonim, 2004).

Dari alasan tersebut, pada penelitian ini peneliti ingin melakukan implementasi

metode user centered design (UCD) pada studi kasus Sistem Informasi Geografis

UMKM berbasis Web dan Android. Tujuan penggunaan metode user centered

design ini adalah untuk mengatasi masalah ketidakmampuan pengguna dalam

menggunakan sistem, dan diharapkan pengguna mampu mengetahui fungsi sistem

dalam sekali pakai.

Metode User Centered Design melibatkan calon pengguna pada tahap awal

pengembangan sehingga calon pengguna dapat memberikan masukan mengenai

antarmuka Sistem Informasi Geografis UMKM berbasis Web dan Android. Hasil

akhir dari penelitian ini menghasilkan tampilan dan fungsionalitas yang maksimal

serta memiliki nilai usability (learnability, efficiency, memorability, errors dan

satisfaction).

3

1.2 Rumusan Masalah

Permasalahan yang dikaji dalam penelitian ini dapat dirumuskan sebagai berikut :

1. Bagaimana membuat desain interface untuk sistem informasi geografis UMKM

berbasis web dan android berdasarkan hasil analisis yang telah dilakukan?

2. Bagaimana membuat dan mengukur desain interface untuk sistem informasi

geografis UMKM berbasis web dan android yang dapat memenuhi 5 nilai

usability yaitu learnability, efficiency, memorability, errors dan satisfaction

dengan menggunakan metode user centered design (UCD) ?

1.3 Batasan Masalah

Permasalahan yang tercakup tidak berkembang terlalu jauh atau menyimpang

terlalu jauh dari tujuannya dan tidak mengurangi efektifitas pemecahannya. Batasan

masalah yang diangkat pada penelitian ini :

1. Penelitian ini berfokus kepada pembuatan dan pengukuran desain interface

sistem informasi geografis UMKM berbasis web dan android berdasarkan hasil

analisis yang telah dilakukan.

2. Membuat desain interface sistem informasi geografis UMKM menggunakan

metode User Centered Design untuk sistem informasi geografis UMKM

berbasis web dan android.

3. Desain akhir dari penelitian ini menghasilkan sebuah rancangan sistem

informasi geografis UMKM yang perlu dilanjutkan oleh pengembang untuk

diimplementasikan ke platform web dan android.

4

1.4 Tujuan Penelitian

Tujuan dari dilakukannya penelitian ini adalah membuat desain Sistem UMKM

berbasis android dan web yang dapat memenuhi semua kebutuhan sistem dengan

interface yang ideal yang memenuhi 5 nilai usability yaitu learnability, efficiency,

memorability, errors dan satisfaction.

1.5 Manfaat Penelitian

Manfaat penelitian ini adalah sebagai berikut :

1. Dengan adanya desain interface UMKM berbasis android dan web yang

memenuhi 5 nilai usability yaitu learnability, efficiency, memorability, errors

dan satisfaction, diharapkan dapat memudahkan pengembang dalam

mengimplementasikan ke platform web dan android dan memenuhi kebutuhan

pengguna sistem UMKM.

2. Dengan adanya desain interface sistem UMKM berbasis android dan web yang

bersifat eye catching, dapat menarik pengguna dalam menggunakan sistem dan

mudah dipahami oleh pengguna dari semua kalangan.

II. TINJAUAN PUSTAKA

2.1. Data dam Informasi

2.1.1. Data

Data adalah fakta mengenai objek, orang dan lain-lain. Data dinyatakan dengan

nilai (angka, deretan karakter, atau simbol) (Burch, 1984).

Menurut pendapat lainnya, data adalah fakta tentang sesuatu di dunia nyata yang

dapat direkam dan disimpan pada media komputer. Definisi di atas perlu diperluas

untuk mencerminkan realitas yang ada saat ini. Dengan demikian pengertian data

dapat diperluas menjadi: fakta, teks, grafik, suara video yang bermanfaat di lingkup

pengguna (Hariyanto, 2004).

2.1.2. Informasi

Informasi adalah hasil olahan data dalam bentuk yang lebih berguna dan lebih

berarti bagi yang menerimanya. Sumber dari informasi adalah data. Suatu informasi

dapat dikatakan bernilai bila manfaatnya lebih efektif dibandingkan dengan biaya

mendapatkannya. Kegunaan informasi adalah untuk mengurangi hal ketidakpastian

dalam proses pengambilan keputusan tentang suatu keadaan. Informasi yang

digunakan di dalam suatu sistem informasi umumnya digunakan untuk beberapa

keguanaan (Hariyanto, 2004).

6

2.2. Desain

Desain merupakan tahapan pertama dalam pengembangan produk atau sistem

rekayasa (Pressman, 2010).

2.3. Desain User Interface (UI)

Desain User Interface (UI) adalah cara program dan pengguna untuk berinteraksi.

User Interface memiliki fungsi untuk menghubungkan atau menerjemahkan

informasi antar pengguna dengan sistem operasi, sehingga perangkat dapat

digunakan (Lastiansah, 2012).

2.4. Desain User Experience (UX)

Proses meningkatkan kepuasan user dalam meningkatkan kegunaan dan

kesenangan yang diberikan dalam interaksi antara pengguna dan produk. UX design

adalah proses membuat sebuah website atau aplikasi yang kamu buat menjadi

mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh

pengguna (Pratama, 2015).

2.5. Fixed Width Design

Fixed-width design (FWD) memiliki wrapper dengan lebar yang fixed (tetap), dan

komponen yang terdapat didalamnya memiliki baik itu lebar yang ditentukan

dengan persentase tertentu atau lebar yang tetap. Hal yang terpenting adalah bahwa

elemen wrapper diatur untuk tidak dapat bergerak. Tidak dipedulikan, berapapun

resolusi layar yang pengguna gunakan, pengguna akan melihat lebar yang sama

dengan pengguna yang lain (Knight, 2009).

7

2.6. Android

Android adalah sebuah sistem operasi untuk perangkat mobile berbasis linux yang

mencakup sistem operasi, middleware, dan aplikasi. Android menyediakan

platform yang terbuka bagi para pengembang untuk menciptakan aplikasi mereka.

Android merupakan generasi baru platform mobile, platform yang memberikan

pengembang untuk melakukan pengembangan sesuai dengan yang diharapkannya.

Sistem operasi yang mendasari Android dilisensikan di bawah GNU, General

Public Lisensi Versi 2 (GPLv2), yang sering dikenal dengan istilah "copyleft"

lisensi dimana setiap perbaikan pihak ketiga harus terus jatuh di bawah terms.

Android didistribusikan di bawah Lisensi Apache Software (ASL/Apache2), yang

memungkinkan untuk distribusi kedua dan seterusnya (Safaat, 2011).

2.7. User Centered Design (UCD)

User centered design adalah sebuah proses desain interface yang berfokus terhadap

tujuan kegunaan, karateristik pengguna, lingkungan tugas dan alur kerja didalam

desainnya. Prinsip yang harus diperhatikan dalam UCD adalah (Henry, 2004).

1. Fokus kepada pengguna

2. Perancangan terintegrasi

3. Dari awal berlanjut pada pengujian pengguna

4. Perancangan interaktif.

8

2.7.1. Proses User Centered Design (UCD)

Proses UCD berdasarkan standar ISO 9241-210:2010, ditunjukkan pada Gambar

2.1.

Gambar 2.1. Proses UCD berdasarkan ISO 9241-210:2010.

Penjelasan gambar:

1. Memahami dan menentukan konteks pengguna

2. Menentukan kebutuhan pengguna dan organisasi

3. Solusi perancangan yang dihasilkan

4. Evaluasi perancangan terhadap kebutuhan pengguna.

2.7.2. Pengguna User Centered Design (UCD)

Pengguna tidak harus mempunyai pengetahuan mengenai aplikasi yang akan

dikembangkan, tujuan penelitian dan sebagainya. Akan lebih mudah mengetahui

apakah pengguna memenuhi kriteria yang telah ditentukan atau belum jika

pengguna dekat dengan designer yang merupakan teman maupun keluarga

designer, agar mendapatkan hasil yang lebih realistis (Barnum, 2011).

9

2.8. Usability

Usability dapat diartikan sebagai tingkat kemudahan suatu produk untuk

digunakan. Usability menjadi tolak ukur UCD terhadap pengembangan sebuah

sistem yang interaktif yang fokus untuk membuat sistem yang berguna.

Usability mempunyai beberapa komponen, yaitu learnability, efficiency,

memorability, errors, dan satisfaction. Learnability adalah sistem yang dibuat

harus mudah untuk dipelajari supaya pengguna dapat dengan cepat bekerja dengan

sistem yang ada (Nielsen, 1993).

Menurut ahli usability (Nielsen, 1994), kriteria – kriteria web usability adalah

sebagai berikut:

1. Learnability adalah kriteria yang mengukur tingkat kemudahan suatu

situs untuk dipelajari dan digunakan, khususnya bagi pengguna yang

baru pertama kali melihat dan menjelajahi situs tersebut.

2. Efficiency adalah kriteria yang mengukur tingkat performansi

pengguna ketika menggunakan situs.

3. Memorability adalah kriteria kualitatif yang dapat dilihat melalui

kemudahan pengguna dalam menggunakan lagi produk (situs) setelah

beberapa saat tidak mengunjungi situs.

4. Errors adalah kriteria kuantitatif pada web usability, errors menilai

situs melalui banyaknya kesalahan yang dilakukan oleh pengguna

ketika melakukan tugas skenario yang diberikan.

5. Satisfaction adalah pengukuran kualitatif yang dirasakan atau juga

ditunjukkan oleh pengguna, ketika sistem atau situs yang digunakan

10

menyenangkan dan juga mudah dipakai dan memberikan kenyamanan

kepada pengguna atau juga memberikan rasa puas ketika pengguna

dapat menyelesaikan tugas yang diberikan dengan baik.

2.9. Usability Testing (Pengujian Kebergunaan)

Usability seringkali dikatakan sebagai suatu nilai penerimaan (acceptance)

seseorang terhadap suatu produk atau sistem berdasarkan pemahaman dan

ketepatan aksi/reaksi seseorang terhadap sebuah antarmuka atau interface

(Wingnjosoebroto, 2009).

Tujuan usability testing pada penelitian ini adalah untuk mengetahui seberapa besar

nilai penerimaan usability oleh user terhadap sistem yang dikembangkan sehingga

pengembang yakin bahwa segala kebutuhan telah terpenuhi dan dapat diterapkan

sebagai sistem yang dipakai.

2.10. Penelitian Terkait

Penelitian tentang user centered design (UCD) ini telah banyak dilakukan, salah

satunya adalah penelitian oleh Wijang Widhiarso pada tahun 2007. Pada penelitian

tersebut dijelaskan bahwa kesulitan pengguna selama ini adalah membaca dokumen

yang ada dalam setiap pengembangan sistem. Masalah ini dapat dijelaskan

menggunakan metode UCD dengan menerjemahkan partisipasi pengalaman

manusia kedalam rancangan (Widhiarso, 2007).

Penelitian yang lain dilakukan oleh C. Liang, W. Chou dan Y. Hsu dari University

of Hongkong pada tahun 2009. Penelitian tidak menghasilkan aplikasi, melainkan

sebuah rekomendasi desain website untuk Nine-Year Integrated Curriculum di

11

Taiwan. Penelitian ini dilakukan karena sistem terdahulu tidak digunakan dengan

baik karena tidak selesai dan anak-anak tidak mengerti bahasa “profesional” dari

sistem tersebut. Pengguna dari sistem ini adalah guru dan murid tingkat sekolah

dasar dan menengah. Hasil dari penelitian ini berupa desain interface website yang

lebih mudah untuk dimengerti untuk guru dan murid (Liang dkk, 2009).

III. METODOLOGI PENELITIAN

3.1. Waktu dan Tempat Penelitian

Penelitian ini dilakukan di Kecamatan Sidomulyo, Kabupaten Lampung Selatan

dan Jurusan Ilmu Komputer, Fakultas Matematika dan Ilmu Pengetahuan Alam

Universitas Lampung yang berada di Jalan Soemantri Brojonegoro No.1 Gedung

Meneng, Bandar Lampung. Penelitian ini dilaksanakan pada semester ganjil

2017/2018.

3.2. Perangkat Penelitian

Alat pendukung yang digunakan dalam penelitian ini adalah sebagai berikut.

1. Perangkat Keras

Notebook dengan spesifikasi :

Processor : AMD FX-9800P RADEON R7, 2.70 GHz

RAM : 8192 MB

SSD : 250 GB

Smartphone dengan spesifikasi :

Merk Tipe : Xiaomi Mi A1

Processor : Snapdragon 625, octa-core Cortex-A53 2 GHz, GPU

Adreno 506

13

RAM : 4 GB

Internal : 64 GB

Layar : 5,5 inci, 1920 x 1080 pixel, IPS LCD

2. Perangkat Lunak

Sistem Operasi Windows 10 64-Bit

Adobe Illustrator CC 2018

Adobe Photoshop CC 2018

Adobe Experience Design CC

3. Perangkat Pengujian

Kuisioner Usability

Paper Prototyping

14

3.3. Tahapan Penelitian

Tahapan penelitian yang dilakukan dalam penelitian ini ditunjukkan pada Gambar

3.1.

Gambar 3.1. Tahapan Penelitian

Berikut adalah penjelasan dari tiap-tiap tahapan yang dilakukan dalam penelitian

ini.

Tahap I

3.3.1. Perumusan Masalah

Tahap awal adalah perumusan masalah yang berfungsi sebagai pedoman, penentu

arah, fokus dari penelitian. Pada penelitian ini dilakukan pembuatan user interface

15

sistem informasi geografis berbasis web dan android yang dapat memenuhi 5 nilai

usability yaitu learnability, efficiency, memorability, errors dan satisfaction yang

nantinya akan dilanjutkan ketahap pengembangan sistem berbasis web dan android.

Penelitian ini berfungsi untuk mempermudah pengembang dalam mengembangkan

sistem.

3.3.2. Daftar Kebutuhan Pengguna

Selanjutnya adalah penentuan/daftar kebutuhan user berfungsi untuk menentukan

kebutuhan-kebutuhan pengguna sistem. Daftar kebutuhan user diperoleh dengan

melakukan survey yang telah dilakukan pada penelitian sebelumnya. Berikut

merupakan daftar kebutuhan user.

a. Informasi yang dibutuhkan

Berdasarkan hasil dari survei pelaku UMKM, konten yang ingin disajikan pada

sistem berupa produk, harga bahan baku, harga produk sejenis, produk dari bahan

baku yang sama, dan distirbusi pelanggan.

b. Kemampuan sistem yang dibutuhkan

Berdasarkan hasil survei yang dilakukan, dapat dibangun sistem yang memenuhi

kebutuhan pengguna sebagai berikut.

1. Pelaku UMKM

o Sistem dapat merekam data pendaftaran Akun

o Sistem dapat menampilkan data profil pelaku UMKM

o Sistem dapat menampilkan data produk UMKM

o Sistem dapat menampilkan data feedback mengenai UMKM miliknya

o Sistem dapat menampilkan data jumlah pengunjung yang melihat produknya

o Sistem dapat menampilkan lokasi UMKM lain

16

o Sistem dapat menampilkan cara menuju lokasi UMKM yang diinginkan

o Sistem dapat melakukan pencarian terhadap produk UMKM tertentu

o Sistem dapat memberikan fitur agar pengguna dapat menambah produk

tertentu ke daftar produk harapan atau favorit

o Sistem dapat memberikan fitur kepada pelanggan untuk memberi rating dan

feedback pada produk tertentu.

2. Pelanggan

o Sistem dapat merekam data pendaftaran Akun

o Sistem dapat menampilkan data profil pelaku UMKM

o Sistem dapat menampilkan data produk UMKM

o Sistem dapat menampilkan lokasi UMKM lain

o Sistem dapat menampilkan cara menuju lokasi UMKM yang diinginkan

o Sistem dapat memberikan fitur agar pengguna dapat menambah produk

tertentu ke daftar produk harapan atau favorit

o Sistem dapat memberikan fitur kepada pelanggan untuk memberi rating dan

feedback pada produk tertentu.

3. Pemerintah

o Sistem dapat merekam re-aktivasi Akun

o Sistem dapat menampilkan hasil rekapitulasi data UMKM

o Sistem dapat mencetak hasil rekapitulasi data UMKM

o Sistem dapat menampilkan sebaran geografis UMKM

o Sistem dapat menampilkan lokasi UMKM

o Sistem dapat menampilkan cara menuju lokasi UMKM yang diinginkan.

17

Tahap II

Sebagai perencanaan awal dalam menentukan alur dan elemen website dan android,

digunakan storyboard dalam tahapan ini. Storyboard yang disusun berdasarkan

kesimpulan dari hasil riset yang telah dilakukan sebelumnya.

Setelah storyboard selesai dibuat, dilakukan pengujian berdasarkan kebutuhan

pengguna. Untuk tahapan pengujian menggunakan paper prototyping. Berikut

merupakan hasil yang dilakukan pada tahap II.

3.3.3. Storyboard

Terdapat tiga user selain admin yang menggunakan sistem ini, yaitu pelaku,

pelanggan dan pemerintah. Masing-masing memiliki kebutuhan yang sama, hanya

terdapat beberapa saja yang berbeda. Oleh sebab itu, semua kebutuhan pengguna

dirangkum dalam Tabel 3.1.

Tabel 3.1. Kebutuhan pengguna

No Kebutuhan penggunaUser

InterfaceNomorgambar

1 Sistem dapat merekam data

pendaftaran Akun

Halaman

Registrasi

Gambar 3.2

Gambar 3.3

2 Sistem dapat merekam re-aktivasi

Akun

Halaman re-

aktivasi

Gambar 3.4

Gambar 3.5

3 Sistem dapat menampilkan data profil

pelaku UMKM

Halaman

Profil Pelaku

Gambar 3.6

Gambar 3.7

4 Sistem dapat menampilkan data produk

UMKM

Halaman

Produk

Gambar 3.8

Gambar 3.9

5 Sistem dapat menampilkan data

feedback mengenai UMKM miliknya

Halaman

Feedback

Gambar 3.10

Gambar 3.11

18

Tabel 3.1. Kebutuhan pengguna (lanjutan)



6 Sistem dapat menampilkan data jumlah

pengunjung yang melihat produknya

Halaman

Profil Pelaku

Gambar 3.6

Gambar 3.7

7 Sistem dapat menampilkan lokasi

UMKM lain

Halaman Peta Gambar

3.12

Gambar

3.13

8 Sistem dapat menampilkan cara menuju

lokasi UMKM yang diinginkan

Halaman

Navigasi

Gambar

3.14

Gambar

3.15

9 Sistem dapat melakukan pencarian

terhadap produk UMKM tertentu

Halaman

Pencarian

Gambar

3.16

Gambar

3.17

10 Sistem dapat memberikan fitur agar

pengguna dapat menambah produk

tertentu ke daftar produk harapan atau

favorit

Halaman

Wishlist

Gambar

3.18

Gambar

3.19

11 Sistem dapat memberikan fitur kepada

pelanggan untuk memberi rating dan

feedback pada produk tertentu

Halaman

Rating

Gambar

3.20

Gambar

3.21

12 Sistem dapat menampilkan hasil

rekapitulasi data UMKM

Halaman

Rekapitulasi

Gambar

3.22

13 Sistem dapat mencetak hasil

rekapitulasi data UMKM

Halaman

Rekapitulasi

Gambar

3.22

19

Tabel 3.1. Kebutuhan pengguna (lanjutan)



14 Sistem dapat menampilkan sebaran

geografis UMKM

Halaman Peta Gambar 3.12

Gambar 3.13

Setelah semua kebutuhan pengguna didapatkan, langkah selanjutnya membuat

desain storyboard berdasarkan kebutuhan pengguna. Desain storyboard dalam

penelitian ini sebagai berikut.

1. Halaman Registrasi (web)

Gambar 3.2. Halaman Registrasi (web)

Halaman registrasi digunakan untuk pelaku UMKM atau pelanggan yang ingin

mendaftarkan dirinya dalam sistem. Pada halaman ini menampilkan jendela pop-up

yang berisi form-form yang wajib diisi oleh pengguna mulai dari nama lengkap

yang harus diisi dengan nama lengkap pengguna, username yang harus diisi dengan

huruf kecil tanpa menggunakan karakter spesial, email yang harus diisi dengan

email pengguna, tentunya dengan format email yang benar (contoh:

[email protected]), hingga form password dan ulangi password yang harus diisi

dengan minimal 8 karakter. Lalu pendaftar juga dapat memilih mendaftar sebagai

20

pelaku UMKM atau sebagai pelanggan. Pada bagian bawah terdapat tombol daftar

yang berfungsi untuk merekam data akun yang telah melakukan pendaftaran. Pada

Gambar 3.2. juga terdapat tombol close pada bagian pop-up window dan tombol

kembali yang berfungsi untuk kembali ke halaman login. Setelah semua data selesai

diisi, pengguna melakukan klik tombol daftar untuk mendaftarkan diri sekaligus

mengirimkan data tersebut kepada sistem untuk direkam.

2. Halaman Registrasi (android)

Gambar 3.3. Halaman Registrasi (android)

Untuk halaman registrasi Android, menampilkan form-form yang wajib diisi oleh

pengguna mulai dari nama lengkap yang harus diisi dengan nama lengkap

pendaftar, username yang harus diisi dengan huruf kecil tanpa menggunakan

karakter spesial, email yang harus diisi dengan email pengguna, tentunya dengan

format email yang benar, hingga form password dan ulangi password yang harus

diisi dengan minimal 8 karakter. Lalu pendaftar juga dapat memilih dapat

mendaftar sebagai pelaku UMKM atau sebagai pelanggan. Pada Gambar 3.3. juga

terdapat tombol daftar yang berfungsi untuk merekam data akun yang telah

melakukan pendaftaran. Sistem akan merekam semua data yang telah diisi oleh

21

pengguna setelah pengguna melakukan klik tombol daftar. Pada bagian bawah

tombol daftar terdapat text bertuliskan sudah punya akun? Login. Yang apabila di-

klik maka akan langsung kembali ke halaman login. Terdapat juga tombol close

pada bagian pop-up window yang berfungsi untuk kembali ke halaman login.

3. Halaman re-aktivasi (web)

Gambar 3.4. Halaman re-aktivasi (web)

Halaman re-aktivasi pada Gambar 3.4., pengguna akan menerima notifikasi berupa

peringatan untuk melakukan reaktivasi, lalu terdapat sebuah tombol pada halaman

beranda untuk melakukan reaktivasi. Pengguna hanya harus klik tombol tersebut

untuk melakukan reaktivasi. Setelah itu halaman akan langsung direct ke halaman

reaktivasi, pada halaman ini berisi daftar UMKM secara keseluruhan yang telah

melakukan reaktivasi dan yang belum melakukan reaktivasi. Pada halaman ini

berisi informasi mulai dari nama UMKM, nomor telepon, dan status aktivasi.

Setelah pengguna melakukan klik aktivasi, sistem akan merekam data pengguna

tersebut kedalam daftar UMKM yang sudah teraktivasi.

22

4. Halaman re-aktivasi (android)

Gambar 3.5. Halaman re-aktivasi (android)

Pada halaman re-aktivasi untuk android menampilkan foto profil usaha dapat dilihat

pada Gambar 3.5., lalu pada bagian bawah foto terdapat nama usaha dan nama

pelaku UMKM. Dan pada bagian bawah terdapat sebuah tombol aktivasi bagi

pengguna untuk melakukan re-aktivasi UMKM yang akan merekam data UMKM

yang telah melakukan aktivasi. Sistem akan merekam data aktivasi pada saat

pengguna melakukan klik tombol aktivasi. Pada bagian pojok atas kiri terdapat

tombol back yang berfungsi untuk kembali ke halaman sebelumnya.

23

5. Halaman Profil Pelaku (web)

Gambar 3.6. Halaman Profil Pelaku (web)

Halaman profil pelaku pada web menampilkan data profil pelaku UMKM mulai

dari foto profil pelaku UMKM, nama pelaku, jumlah rating berupa bintang

berjumlah 5 buah berwarna kuning, banyaknya feedback yang telah diberikan dan

lokasi UMKM dapat dilihat pada Gambar 3.6. Pada halaman ini foto pelaku

UMKM di bagian atas dan nama pelaku dibuat sedikit besar agar pengguna dapat

dengan jelas melihat info pelaku UMKM tersebut. Di bagian bawah terdapat

beberapa gambar produk dan nama produk yang diproduksi oleh UMKM tersebut.

Pada bagian sebelah kanan terdapat peta, diletakkan pada bagian sebelah kanan agar

pengguna dapat lebih mudah mengakses peta UMKM.

24

6. Halaman Profil Pelaku (android)

Gambar 3.7. Halaman Profil Pelaku (android)

Halaman profil untuk versi android menampilkan data profil UMKM mulai dari

foto profil, nama, jumlah rating yang diberikan berupa bintang berjumlah 5 buah

berwarna kuning, jumlah feedback yang diberikan dan lokasi UMKM dapat dilihat

pada Gambar 3.7. Pada bagian tengah menampilkan deskripsi detail UMKM

tersebut. Pada bagian bawah terdapat beberapa gambar yang merupakan produk

yang diproduksi oleh UMKM tersebut.

25

7. Halaman Produk (web)

Gambar 3.8. Halaman Produk (web)

Halaman Produk pada web dapat dilihat pada Gambar 3.8., terdapat logo dan nama

aplikasi agar pengguna dibuat familiar dengan logo tersebut. Lalu pada bagian

bawah menampilkan data produk berupa nama produk, gambar-gambar produk

untuk menunjukkan detil produk kepada pengguna, harga produk dan juga

informasi produk telah dilihat berapa kali oleh pengunjung. Terdapat juga icon

keranjang belanja di bagian sebelah kanan yang berfungsi untuk memasukkan

produk kedalam produk harapan. Icon diletakkan sedikit keatas agar pengguna

dapat dengan mudah mengakses produk setelah melihat-lihat. Pada bagian sebelah

kanan terdapat peta, diletakkan pada bagian sebelah kanan agar pengguna dapat

lebih mudah mengakses peta UMKM.

26

8. Halaman Produk (android)

Gambar 3.9. Halaman Produk (android)

Halaman produk versi android dapat dilihat pada Gambar 3.9., pada bagian atas

pengguna langsung disuguhi dengan gambar produk yang lebar dan jelas agar

pengguna dapat dengan mudah menganalisa produk, terdapat dua sampai lima

gambar produk yang ditampilkan. Pengguna hanya cukup melakukan slide kekanan

atau ke kiri untuk melihat gambar lainnya. Terdapat tombol pada bagian bawah

gambar yaitu tombl tambah produk untuk di masukkan ke dalam produk harapan

(wishlist). Dan pada bagian bawah merupakan nama produk dan deskripsi lengkap

tentang produk tersebut, mulai dari detail produk, harga produk, nama UMKM yang

menjual produk tersebut, spesifikasi produk, rating produk dan feedback, Lalu pada

bagian bawah kanan dilengkapi dengan tombol navigasi yang digunakan untuk

menunjukkan arah ke UMKM penjual produk apabila pengguna ingin tahu lokasi

UMKM tersebut.

27

9. Halaman Feedback (web)

Gambar 3.10. Halaman Feedback (web)

Halaman feedback pada web dapat dilihat pada Gambar 3.10., secara keseluruhan

berisi foto profil pemberi ulasan, nama, ulasan dan rating bintang yang diberikan.

Rating bar diletakkan sedikit terpisah ke sebelah kanan bertujuan agar dapat lebih

mudah dilihat oleh pengguna yang lain dan juga pemilik UMKM untuk melihat

feedback untuk produk dan UMKM nya sendiri. Karena poin utama dari halaman

feedback ini adalah rating yang telah diberikan. Pada bagian sebelah kanan terdapat

peta, diletakkan pada bagian sebelah kanan agar pengguna dapat lebih mudah

mengakses peta UMKM.

28

10. Halaman Feedback (android)

Gambar 3.11. Halaman Feedback (android)

Halaman feedback untuk android dapat dilihat pada Gambar 3.11., berisi foto profil

pengguna, disamping foto profil terdapat nama pengguna yang memberikan

feedback dan ulasan dari pengguna. Rating bar diletakkan sedikit terpisah ke

sebelah kanan bertujuan agar dapat lebih mudah dilihat oleh pengguna yang lain

rating bar berupa bintang yang berjumlah 5 bintang berwana kuning. Untuk

halaman feedback tidak ada batasan, jadi semua ulasan yang telah diberikan akan

ditampilkan semua. Pemilik UMKM dan pengguna hanya harus scroll kebawah

untuk melihat semua ulasan yang telah diberikan.

29

11. Halaman Peta (web)

Gambar 3.12. Halaman Peta (web)

Halaman peta pada web dapat dilihat pada Gambar 3.12., menampilkan peta secara

keseluruhan dan persebaran UMKM terdaftar. Terdapat pin map berwarna yang

masing-masing berfungsi untuk menunjukkan lokasi UMKM. Setelah pin map di-

klik maka sistem menampilkan informasi UMKM yang dipilih mulai dari nama

UMKM, alamat UMKM dan rating UMKM yang dipilih.

12. Halaman Peta (android)

Gambar 3.13. Halaman Peta (android)

30

Halaman peta pada android dapat dilihat pada Gambar 3.13., menampilkan peta

secara keseluruhan dan persebaran UMKM terdaftar. Terdapat pin map berwarna

yang berfungsi untuk menunjukkan lokasi-lokasi UMKM yang terdaftar di lokasi

tersebut, apabila di-klik akan menampilkan profil UMKM mulai dari nama

UMKM, alamat UMKM dan rating UMKM yang dipilih.. Pengguna dapat

melakukan zoom in atau zoom out pada peta agar pengguna dapat lebih mudah

mengakses peta.

13. Halaman Navigasi (web)

Gambar 3.14. Halaman Navigasi (web)

Halaman navigasi pada web dapat dilihat pada Gambar 3.14., menampilkan peta

mini yang mencakup lokasi pengguna dan lokasi tujuan. Halaman ini bertujuan

sebagai petunjuk arah untuk pengguna yang ingin mengetahui lokasi UMKM

tujuan. Pada bagian atas peta mini terdapat sebuah form yang digunakan untuk

mencari lokasi tujuan. Untuk melakukan navigasi ke UMKM yang ingin dituju,

pengguna menginputkan nama UMKM yang ingin dituju pada form yang terdapat

31

dibagian atas. Setelah itu pengguna melakukan klik tombol submit untuk

melakukan pencarian UMKM yang ingin dituju. Diletakkan dibagian atas peta mini

bertujuan agar pengguna tidak kebingungan mencari dimana ia harus menginputkan

lokasi tujuan UMKM yang dicari. Setelah pengguna klik tombol submit peta akan

menampilkan dua buah pin map, lokasi pengguna dan lokasi UMKM tujuan dengan

petunjuk arah jalan yang dilalui.

14. Halaman Navigasi (android)

Gambar 3.15. Halaman Navigasi (android)

Halaman navigasi untuk android dapat dilihat pada Gambar 3.15., menampilkan

peta yang mencakup lokasi awal dan lokasi tujuan. Pengguna hanya harus memilih

UMKM yang ingin dituju, aplikasi akan langsung membawa pengguna ke halaman

navigasi. Pada halaman navigasi menampilkan dua buah pin map yaitu lokasi anda

dan lokasi tujuan, halaman ini menunjukkan rute tercepat untuk menuju ke lokasi

UMKM tujuan.

32

15. Halaman Pencarian (web)

Gambar 3.16. Halaman Pencarian (web)

Halaman pencarian untuk web dapat dilihat pada Gambar 3.16., disediakan form

untuk mencari produk, pengguna perlu memasukkan kata kunci pencarian untuk

melakukan pencarian, contohnya produk tertentu atau nama UMKM yang ingin

dicari. Form pencarian ini diletakkan dibagian atas agar mudah dilihat oleh

pengguna. Lalu pada bagian bawah menampilkan foto foto semua produk yang

berhubungan dengan kata kunci. Pada contoh gambar di atas form pencarian diisi

dengan kata kunci kayu, sehingga yang ditampilkan adalah semua produk yang

berhubungan dengan kata kunci. Pada bagian sebelah kanan terdapat peta,

diletakkan pada bagian sebelah kanan agar pengguna dapat lebih mudah mengakses

peta UMKM.

33

16. Halaman Pencarian (android)

Gambar 3.17. Halaman Pencarian (android)

Pada halaman pencarian untuk android dapat dilihat pada Gambar 3.17., terdapat

icon kaca pembesar pada bagian atas kanan yang digunakan untuk mencari produk.

Terletak dibagian atas agar mudah dilihat oleh pengguna. Form tersebut perlu diisi

dengan kata kunci oleh pengguna untuk mencari produk atau UMKM yang ingin

dicari. Setelah form sudah diisi dengan kata kunci pengguna melakukan klik pada

icon kaca pembesar, maka halaman akan langsung menampilkan semua produk atau

UMKM yang berhubungan dengan kata kunci pencarian. Pengguna dapat

melakukan scroll ke bagian bawah untuk melihat produk secara keseluruhan.

34

17. Halaman Wishlist (produk harapan) (web)

Gambar 3.18. Halaman Wishlist (web)

Halaman wishlist pada halaman web dapat dilihat pada Gambar 3.18., berisi foto

dan nama produk yang telah dimasukkan kedalam keranjang. Untuk memasukan

sebuah produk kedalam daftar belanja, pengguna hanya cukup melakukan klik

tombol masukan kedalam wishlist atau tombol bergambar love pada deskripsi

produk. Setelah tombol di klik, maka produk tersebut akan masuk kedalam wishlist

pengguna. Untuk ukuran foto produk dibuat sedikit besar agar pengguna tidak

kesulitan dalam menganalisa produk yang telah meraka masukkan. Pada bagian

sebelah kanan terdapat peta, diletakkan pada bagian sebelah kanan agar pengguna

dapat lebih mudah mengakses peta UMKM.

35

18. Halaman Wishlist (android)

Gambar 3.19. Halaman Wishlist (android)

Halaman wishlist pada android dapat dilihat pada Gambar 3.19., berisi list foto,

nama produk dan rating produk yang telah dimasukkan kedalam keranjang. Untuk

memasukan sebuah produk kedalam daftar belanja, pengguna hanya cukup

melakukan klik tombol masukan kedalam wishlist atau tombol bergambar love pada

deskripsi produk. Pada bagian sebelah kanan terdapat tombol hapus yang digunakan

untuk menghapus produk dari daftar belanja. Ukuran foto dibuat sedikit besar agar

pengguna tidak kesulitan dalam menganalisa produk yang telah meraka masukkan.

19. Halaman Rating (web)

Gambar 3.20. Halaman Rating (web)

Halaman rating pada web dapat dilihat pada Gambar 3.20., terdapat form komentar

dan rating bar berupa bintang lima untuk pengguna memberi ratingnya. Pada form

36

komentar pengguna dapat menuliskan komentar tentang produk atau UMKM.

Setelah pengguna selesai menuliskan komentar, pengguna memberi rating tentang

produk atau UMKM yang diulas, semakin banyak bintang yang diberikan maka

semakin bagus kualitas produk atau UMKM yang diulas. Pada bagian bawah

terdapat ulasan ulasan sebelumnya. Dibuat simple agar pengguna tidak dibuat

kebingungan jika ingin memberi ulasan pada sebuah UMKM atau produk. Pada

bagian sebelah kanan terdapat peta, diletakkan pada bagian sebelah kanan agar

pengguna dapat lebih mudah mengakses peta UMKM.

20. Halaman Rating (android)

Gambar 3.21. Halaman Rating (android)

Halaman rating pada android dapat dilihat pada Gambar 3.21., terdapat form

komentar dan rating bar untuk pengguna memberi ratingnya. Pada halaman ini

pengguna dapat meninggalkan ulasan tentang produk atau UMKM yang dilihat,

dengan cara menuliskan komentar dan memberi bintang tentang produk atau

UMKM tersebut. Setelah pengguna menuliskan komentar dan rating, halaman akan

menampilkan komentar dengan rating di bagian kanan komentar. Halaman rating

akan menampilkan semua ulasan-ulasan yang telah diberikan sebelumnya. Dibuat

37

simple agar pengguna tidak dibuat kebingungan jika ingin memberi ulasan pada

sebuah UMKM atau produk.

21. Halaman Rekapitulasi (web)

Gambar 3.22. Halaman Rekapitulasi (web)

Halaman rekapitulasi dapat dilihat pada Gambar 3.22., menampilkan diagram –

diagram yang dibutuhkan pihak pemerintah dalam merekap data UMKM. Letak

dari diagram satu dengan diagram lainnya dibuat vertikal agar lebih mudah dalam

membedakannya. Terdapat juga tombol disebelah kanan atas untuk mengunduh

versi dokumen. Pada bagian sebelah kanan terdapat peta, diletakkan pada bagian

sebelah kanan agar pengguna dapat lebih mudah mengakses peta UMKM.

38

3.3.4. Hasil Pengujian Paper Prototyping

Berdasarkan dari hasil analisis kebutuhan sistem informasi geografis UMKM yang

telah dilakukan dan menerjemahkannya kedalam desain storyboard telah sesuai

dengan kebutuhan pengguna. Desain yang digunakan merupakan hasil dari

storyboard yang telah diperiksa oleh user, dan hasil dari umpan balik yang diterima

oleh user, sehingga user dapat mengerti dan dapat melakukan aksi pada storyboard

yang sudah dibuat untuk menjalankan masing-masing fungsi. Jadi dapat

disimpulkan bahwa storyboard yang dibuat telah memenuhi kebutuhan pengguna.

V. KESIMPULAN DAN SARAN

5.1. Kesimpulan

Telah dilakukan pengukuran usability pada desain interface Sistem Informasi

Geografis UMKM Berbasis Web dan Android dengan menggunakan metode User

Centered Design (UCD) dengan kesimpulan sebagai berikut.

1. Hasil pengukuran UCD pada interface fitur utama dalam Sistem Informasi

Geografis UMKM Berbasis Web dan Android menunjukkan nilai sangat

baik dengan nilai 81,03% untuk task 1 (android), 81,72% untuk task 2

(android), 81,93% untuk task 3 (android), 81,03% untuk task 4 (android),

81,51% untuk task 5 (android), dan bernilai baik yaitu 79,17% pada task 1

(web), 79,51% task 2 (web), 79,17% pada task 4 (web), 78% pada task 6

(web), dan bernilai sangat baik yaitu 82.62% pada task 3 (web), 80.75%

pada task 5 (web).

2. Hasil pengukuran pada poin 1 menunjukkan bahwa desain interface Sistem

Informasi Geografis UMKM Berbasis Web dan Android memiliki usability

baik dan sangat baik sehingga dapat direkomendasikan untuk

dikembangkan menjadi antar muka yang sebenarnya.

76

5.2. Saran

Berdasarkan perancangan desain interface sistem yang telah dilakukan, maka

beberapa saran yang perlu diperhatikan dalam mengembangkan desain interface

sistem ini adalah sebagai berikut.

1. Dari hasil interface yang sudah dibangun, diharapkan dapat

diimplementasikan kedalam platform web dan android.

2. Dilakukan pengembangan perancangan desain interface yang mampu

mempertimbangkan aspek interoperabilitas sehingga pengguna dapat

memperoleh efek yang sama pada saat interface tersebut diakses dari

berbagai macam devices.

DAFTAR PUSTAKA

Anonim. 2004. Usability Testing, (http://usability.gov/tools/usabilitytesting.html/,diakses tanggal 5 november 2017).

Bank, C. & Cao, J. 2014. Web UI Design Best Practices. Mountain View: UXPin.

Barnum, C. M. 2011. Usability Testing Essentials. 11 ed. s.1: Academic Press,Inc.

Burch J, Grudnitski G. 1984. Information Systems Theory and Practice. EdisiKeempat; New York: John Wiley & Sons.

Hariyanto B. 2004. Sistem Manajemen Basis Data. Bandung: Informatika.

Henry, S.L. 2004. Notes on User Centered Design Process (UCD),

(http://www.w3.org/WAI/EO/204/ucd, diakses tanggal 1 november 2017).

Denzin, n. K. & Lincoln, Y. S., 2009. Handbook of Qualitative Research. 3 ed.Yogyakarta: Pustaka Pelajar.

Knight, K. 2009. Fixed vs. Fluid vs. Elastic Layout : What’s The Right One ForYou, (http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/, diakses tanggal 5 november2017).

Krug, Steve. 2014. Don’t Make Me Think, Revisted A Common Sense Approach toWeb Usability. Edisi Ketiga; New York: New Riders

Lastiansah, Sena. 2012. Pengertian User Interface. Jakarta: PT. Elex MediaKomputindo.

Liang, C., Chou, W., Hsu, Y. 2009. A User Centered Design Approach to Developa Web-Based Instructional Resources System for Homeland Education. AnInternational Journal.

78

Moleong, L. J., 2009. Metodologi Penelitian Kualitatif. Revisi ed. Bandung: PT.Remaja Rosdakaya.

Nielsen, Jakob. 1993. Usability engineering San Diego, CA: Academic Press.

Nielsen, Jakob. 1994. Usability Engineering – Interactive Technologies. MorganKauffman.

Pratama, G. 2015. Belajar koding, (https://belajarkoding.net/apa-itu-user-experience-ux-dan-user-interface-ui/, diakses tanggal 5 november 2017).

Pressman, R. S. 2010. Rekayasa Perangkat Lunak Buku 1 Pendekatan Praktis. 7ed. Yogyakarta: ANDI.

Safaat, H. Nazruddin. 2011. PEMROGRAMAN APLIKASI MOBILESMARTPHONE dan TABLET PC BERBASIS ANDROID. Bandung:Informatika Bandung.

Sugiyono. 2012. Metode Penelitian Kuantitatif Kualitatif dan R&D. Bandung :Alfabeta.

Widhiarso, Wijang. 2007. Metode UCD (User Centered Design) Untuk RancanganKios Informasi Studi Kasus : Rumah Sakit Bersalain XYZ. JurnalInformatika Vol III No III.

Wingnjosoebroto, S. Sudiarno, A., Harenda, D. 2009. Perancangan InterfacePrototype Web berdasarkan pada Aspek Usability (Studi Kasus:Laboratorium Ergonomi dan Perancangan Sistem Kerja Teknik IndustriITS). (http://digilib.its.ac.id/public/ITS-Undergraduate-8877-2504100030-Paper.pdf, diakses tanggal 10 november 2018).

implementasi metode user centered design (u cd) u …digilib.unila.ac.id/55844/3/skripsi tanpa bab...

Documents