PERANCANGAN USER INTERFACE BERDASARKAN USER...

PERANCANGAN USER INTERFACE BERDASARKAN USER

EXPERIENCE APLIKASI KONSULTASI ILMU FIKIH

MENGGUNAKAN METODE USER-CENTERED DESIGN

TUGAS AKHIR

Disusun oleh :

1202150282 Khalida Zia Amrina

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS REKAYASA INDUSTRI

UNIVERSITAS TELKOM

BANDUNG

2019

LEMBAR PERNYATAAN ORISINALITAS

Menyatakan bahwa Tugas Akhir ini merupakan karya orisinal saya sendiri. Atas

pernyataan ini, saya siap menanggung risiko atau sanksi yang dijatuhkan kepada

saya apabila kemudian ditemukan adanya pelanggaran terhadap kejujuran

akademik atau etika keilmuan dalam karya ini, atau ditemukan bukti yang

menunjukkan ketidakaslian karya ini.

Bandung, 07 Agustus 2019

Khalida Zia Amrina

Name: Alifahrin Akhmad Thayyib

NIM: 1102100139

Address: Cigebar No.22 RT.02 RW.04 Desa

Bojongsari Kec Bojongsoang Kab

Bandung

Phone: 089660104986

Email: [email protected]

Nama : Khalida Zia Amrina

NIM : 1202150282

Alamat : Jalan Sukabrius

No. Tlp : 082283377806

Email : [email protected]

LEMBAR PENGESAHAAN

Tugas Akhir dengan judul :

PERANCANGAN USER INTERFACE BERDASARKAN USER

EXPERIENCE APLIKASI KONSULTASI ILMU FIKIH

MENGGUNAKAN METODE USER-CENTERED DESIGN

Telah disetujui disahkan untuk mengikuti Sidang Tugas Akhir

Program Studi Strata 1 Sistem Informasi

Faklutas Rekayasa Industri Universitas Telkom

Oleh :

KHALIDA ZIA AMRINA

1202150282

Bandung, July 2019 Disetujui oleh,

Pembimbing 1 Pembimbing 2

Rachmadita Andreswari S.Kom., M.Kom. Muhammad Azani Hasibuan, S.Kom., M.T.I.

NIP. 14890057 NIP. 14850055

iv

ABSTRAK

Fikih merupakan ilmu yang membahas hukum-hukum dalam agama Islam, terdapat

aturan dalam berbagai bidang kehidupan umat Islam. Fikih memiliki dua sumber

sebagai pedoman hidup yatu Al-Quran dan Sunnah, Ilmu fikih membahas hukum

sesuai sumber tersebut. Aplikasi konsultasi Ilmu Fikih merupakan aplikasi yang

menghubungkan seorang ustaz dengan seorang muslim yang memiliki

permasalahan dalam pelaksanaan tata cara beribadah dan hukum-hukum dalam

pelaksanaan ibadah maupun kegiatan sehari-hari, berdasarkan hasil survei terhadap

231 responden sebanyak 75,8% responden menyatakan pernah mengalami kendala

dalam pelaksanaan tata cara dan hukum dalam beribadah dan 75,3% berpendapat

mencari solusi dari permasalahan tersebut sangat penting. Tujuan dari penelitian ini

yaitu merancang solusi desain user interface (UI) berdasarkan hasil analisis user

experience (UX) yang dapat memenuhi kebutuhan pengguna. Pentingnya UI/UX

dalam pengembangan aplikasi untuk mempermudah pengguna mengendalikan

aplikasi, mendapat respon dari interaksi dan mengetahui kebutuhanan pengguna.

Pada perancangan penelitian ini menggunakan metode user-centered design,

metode ini berfokus kepada kebutuhan pengguna. Hasil dari penelitian adalah

sebuah solusi desain pada Aplikasi Konsultasi Ilmu Fikih yang dapat diterima oleh

pengguna dengan hasil skor SUS sebesar 78.

Kata kunci: UI/UX, Aplikasi Konsultasi Ilmu Fikih, User-Centered Design.

v

ABSTRACT

Fiqh is a science that discusses the laws in Islam, is a rule in various fields of life

of Muslims. Fiqh has two sources as a guideline for the life of the Qur'an and

Sunnah, fiqh discusses laws according to that source. The Fiqh Consultation

application is an application that connects an ustaz with a Muslim who has

agreement in the implementation of worship procedures and laws in the

implementation of worship or daily activities, based on the results of a survey of

231 respondents. In implementing procedures and law in worship and 75.3%

asking for a solution to the problem is very important. The purpose of this research

is to make user interface (UI) design solutions based on the results of user

experience (UX) analysis that can meet user needs and requirements. The

importance of UI / UX in application development to make it easier for users to

control applications, get responses from interactions and understand user needs.

In the design of this study using user-centered design methods, this method supports

the needs and requirements of users. The results of the study are design solutions

in the Fiqh Consultation Application that can be accepted by users with a SUS score

of 78.

Keywords: UI / UX, Jurisprudence Consultation Application, User-Centered

Design.

vi

KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada kehadirat Allah SWT karena atas

rahmat dan karunia-Nya saya dapat menyelesaikan Proposal Tugas Akhir dengan

judul “PERANCANGAN USER INTERFACE BERDASARKAN USER

EXPERIENCE APLIKASI KONSULTASI ILMU FIKIH MENGGUNAKAN

METODE USER-CENTERED DESIGN” yang telah saya susun sebaik mungkin.

Tujuan dari penulisan Tugas Akhir ini adalah untuk memenuhi syarat

kelulusan mata kuliah Metode Penelitian pada jurusan S1 Sistem Informasi,

Fakultas Rekayasa Industri, Universitas Telkom. Tugas Akhir merupakan sarana

bagi penulis untuk mengimplementasikan ilmu yang didapat dari proses

perkuliahaan dan hasilnya dapat berguna bagi orang lain.

Dalam proses penyusunan Proposal Tugas Akhir ini tidak terhindar dari

bantuan dan dukungan dari berbagai pihak. Berkat bantuan tersebut semua

hambatan dan kesulitan dapat teratasi dengan baik. Pada kesempatan ini, penulis

ingin menyampaikan ucapan terimakasih yang sebesar-besarnya kepada:

1. Almarhum Mama Zulfaidar yang telah mengajarkan untuk selalu bekerja

keras dan tekun untuk melakukan sesuatu hal. Terima kasih untuk

Almarhum Papa Amri Bakar yang telah mengajarkan kesabaran dan

bersyukur terhadap apa yang dimiliki.

2. Qori Helly Amrina selaku kakak yang telah membantu biaya selama kuliah

dan memberikan bantuan semangat kepada penulis. Penulis juga ucapkan

terima kasih untuk kakak, abang serta keluarga yang telah memberi

dukungan dan semangat untuk menyelesaikan tugas akhir ini.

3. Ibu Rachmadita Andreswari, S.Kom., M.Kom. selaku dosen Pembimbing I

yang telah memberikan bimbingan, arahan, evaluasi, dan dukungan dalam

proses pengerjaan Proposal Tugas Akhir ini.

4. Bapak Muhammad Azani Hasibuan, S.Kom., M.T.I. selaku dosen

Pembimbing II yang telah memberikan bimbingan, arahan, evaluasi, dan

dukungan dalam proses pengerjaan Proposal Tugas Akhir ini.

vii

5. Nyimas Marissa Gita Fitri dan Vian Rasyid Diyatma selaku rekan satu

kelompok tugas akhir yang telah bekerja keras dalam proses penyelesaian

perancangan dan pengembangan aplikasi Fikh.

6. Aprianil Sesti Rangga dan Mia Dwi Aulia selaku teman yang memberikan

dukungan, semangat serta kritik dan saran selama proses penyelesaian tugas

akhir.

7. Selanjutnya pihak yang telah memberikan dorongan, kritik dan saran dalam

proses penyusunan tugas akhir yang tidak dapat penulis sebutkan satu-

persatu.

Penulis menyadari bahwa masih banyak kekurangan dalam penyusunan

Tugas Akhir ini, oleh karena itu penulis menerima kritik maupun saran dari seluruh

pihak. Semoga dengan penyusunan Tugas Akhir ini dapat memeberikan sumbangan

pengetahuan dan bermanfaat bagi kita semua.

viii

DAFTAR ISI

ABSTRAK ............................................................................................................ iv

ABSTRACT ........................................................................................................... v

KATA PENGANTAR .......................................................................................... vi

DAFTAR ISI ....................................................................................................... viii

DAFTAR GAMBAR ............................................................................................ xi

DAFTAR TABEL ............................................................................................... xii

DAFTAR SINGKAT .......................................................................................... xiii

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

I.1. Latar Belakang ......................................................................................... 1

I.2. Rumusan Masalah .................................................................................... 2

I.3. Tujuan Penelitian ...................................................................................... 2

I.4. Manfaat Penelitian .................................................................................... 3

I.5. Batasan Masalah ....................................................................................... 3

I.6. Sistematika Penulisan ............................................................................... 3

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

II.1. Fikih .......................................................................................................... 5

II.2. Mobile Interface ....................................................................................... 6

II.3. User Interface dan User Experience ........................................................ 7

II.4. User-Centered Design (UCD) .................................................................. 9

II.5. Perbandingan UCD dengan EID ............................................................ 10

II.6. Semi-structured Interviews ..................................................................... 12

II.7. Persona ................................................................................................... 13

II.8. Mental Model ......................................................................................... 15

ix

II.9. Hierarchical Task Analysis (HTA) ........................................................ 16

II.10. Usability Testing ................................................................................. 17

II.11. System Usability Scale (SUS) ............................................................. 17

II.12. Single Ease Questions (SEQ) ............................................................. 18

II.13. Adobe XD ........................................................................................... 19

II.14. FlatIcon ............................................................................................... 19

II.15. Balsamiq ............................................................................................. 20

II.16. State of The Art ................................................................................... 21

BAB III METODOLOGI PENELITIAN ......................................................... 25

III.1. Model Konseptual ............................................................................... 25

III.2. Sistematika Penelitian ......................................................................... 26

III.2.1. Tahap Pendahuluan ..................................................................... 28

III.2.2. User Centered Design ................................................................. 28

III.2.3. Tahap Penutup ............................................................................. 29

BAB IV ANALISIS DAN PERANCANGAN ................................................... 30

IV.1. Plan the Human Centered Design ...................................................... 30

IV.1.1. Wawancara .................................................................................. 30

IV.1.2. Kesimpulan dari Hasil Wawancara ............................................. 33

IV.2. Specify the Context of Use .................................................................. 36

IV.3. Specify User Requirements ................................................................. 39

IV.3.1. Menentukan Kebutuhan Persona ................................................. 39

IV.3.2. Perancangan Model Mental ......................................................... 39

IV.3.3. Analisis Tugas Pengguna ............................................................ 40

IV.3.4. Model Skenario ........................................................................... 43

BAB V IMPLIMENTASI DAN PENGUJIAN ................................................. 46

V.1. Produce Design Solution ........................................................................ 46

x

V.1.1. Perancangan Wireframe .................................................................. 46

V.1.2. User Interface Design Aplikasi ....................................................... 49

V.2. Evaluate Designs Againts User Requirements ....................................... 59

V.2.1. Perencanaan Testing ........................................................................ 59

V.2.2. SEQ ................................................................................................. 60

V.2.3. SUS ................................................................................................. 62

V.3. Analisis Hasil Pengujian ........................................................................ 64

V.3.1. Hasil Pengujian SEQ ....................................................................... 64

V.3.2. Hasil Pengujina SUS ....................................................................... 66

BAB VI KESIMPULAN DAN SARAN............................................................. 70

VI.1. Kesimpulan ......................................................................................... 70

VI.2. Saran ................................................................................................... 70

DAFTAR PUSTAKA .......................................................................................... 71

LAMPIRAN ......................................................................................................... 75

xi

DAFTAR GAMBAR

Gambar II.1. Elements of user interface for mobile platform (Liu, 2016) .............. 7

Gambar II.2. Proses UCD ISO 13407 ..................................................................... 9

Gambar II.3. Ecological interface design ............................................................. 11

Gambar II.4. Perbedaan EID dengan UCD ........................................................... 11

Gambar II.5. Contoh Hierarchical Task Analysis (Hornsby, 2010) ..................... 16

Gambar II.6. Skala penilaian skor SUS ................................................................ 18

Gambar II.7. Skala Penilaian SEQ ....................................................................... 18

Gambar III.1. Model Konseptual .......................................................................... 25

Gambar III.2. Sistematika Penelitian .................................................................... 27

Gambar IV.1. Model Mental Konsultasi ............................................................... 40

Gambar IV.2. HTA Konsultasi ............................................................................. 41

Gambar V.1. Hasil Pengujian SEQ ....................................................................... 66

xii

DAFTAR TABEL

Tabel II.1. Proses Perancangan Berorientasi Pengguna (Liu, 2016) ...................... 6

Tabel II.2 Kelebihan Penggunaan Persona ........................................................... 13

Tabel II.3. State of The Art .................................................................................... 21

Tabel IV.1. Pertanyaan Wawancara ...................................................................... 30

Tabel IV.2. Kesimpulan dari Hasil Wawancara .................................................... 33

Tabel IV.3. Persona ............................................................................................... 37

Tabel IV.6. Kebutuhan Persona ............................................................................ 39

Tabel IV.7. Model Skenario .................................................................................. 43

Tabel V.1. Wireframe Home ................................................................................. 46

Tabel V.2. Wireframe Daftar Ustaz ...................................................................... 47

Tabel V.3. Wireframe Materi ................................................................................ 48

Tabel V.4. Desain User Interface ......................................................................... 50

Tabel V.5. Warna yang digunakan pada Desain User Interface ........................... 55

Tabel V.6. Ikon yang digunakan pada Desain User Interface .............................. 56

Tabel V.7. Partisipan Usability Testing ................................................................ 59

Tabel V.8. Daftar Fungsi Aplikasi ........................................................................ 60

Tabel V.9. Contoh Skenario pada SEQ ................................................................. 62

Tabel V.10. Pertanyaan Testing SUS .................................................................... 63

Tabel V.11. Hasil Pengujian SEQ ......................................................................... 64

Tabel V.12. Evaluasi nilai pengujian SUS ............................................................ 67

Tabel V.13. Hasil Pengujian SUS ......................................................................... 69

xiii

DAFTAR SINGKAT

UI : User interface UX : User Experience GUI : Graphical User Interface SEQ : Single Ease Questions

SUS : System Usability Scale

CUT : Cooperative Usability Testing QU : Question of Understanding UCD : User Centered Design

1

BAB I PENDAHULUAN

I.1. Latar Belakang

Tren selama beberapa tahun terakhir, teknologi telepon seluler telah

berubah secara signifikan, dengan perangkat dan sistem operasi yang lebih canggih

(Hoehle & Venkatesh, 2015). Di Indonesia smartphone memiliki pengguna yang

bertumbuh dengan pesat. Lembaga riset digital Emarketer memperkirakan pada

tahun 2018 jumlah pengguna aktif smartphone di Indonesia lebih dari 100 juta

orang (kominfo, 2015).

Pengembangan smartphone memiliki banyak tantangan karena persyaratan

bisnis yang berubah dengan cepat dan kendala teknis yang terkait dengan sistem

semakin kompleks. Para pengembang menghadapi tantangan lingkungan yang

dinamis dengan memodifikasi sesuai kebutuhan dan harapan pelanggan (Flora,

Chande, & Wang, 2014). Upaya dalam pengembangan teknologi juga telah

dilakukan oleh banyak sarjana, ilmuwan, dan intelektual Muslim dalam

mengevaluasi dampak teknologi terhadap Islam (Muhammad & Muhammad,

2004).

Fikih adalah ilmu pengetahuan yang membicarakan atau membahas atau

memuat hukum-hukum Islam yang bersumberkan Al-Qur’an dan sunnah. Fikih

merupakan ilmu yang secara khusus membahas persoalan hukum yang mengatur

berbagai aspek kehidupan manusia, baik kehidupan pribadi, bermasyarakat maupun

kehidupan manusia dengan Tuhannya. (Dahlan, 2019).

Permasalahan terkait dengan fikih sangat penting untuk diselesaikan bagi

umat Islam, hal ini dibuktikan dari hasil survei terhadap 231 responden dengan

judul “Kuesioner Pengguna Aplikasi Mobile bagi Muslim” terdapat 75,8%

responden menyatakan pernah mengalami kendala dalam pelaksanaan tata cara dan

hukum dalam beribadah dan 75,3% berpendapat mencari solusi dari permasalahan

tersebut sangat penting. Dalam pemecahan permasalahan tersebut, 80,1%

responden melakukan pencarian di internet, namun hanya 1.7% sangat yakin

dengan jawaban yang didapat dari internet itu benar.

Berdasarkan permasalahan tersebut maka perlu adanya media untuk

memfasilitasi pemecahan masalah yaitu berupa aplikasi konsultasi dengan sumber

terpercaya, seperti pemecahan masalah dengan berkonsultasi dengan seorang ustaz,

2

hal ini dikarenakan 52,8% responden berpendapat yakin dan 23,8% berpendapat

sangat yakin dengan jawaban yang didapatkan dari seorang ustaz itu benar atau

dapat dipercaya. Namun dalam melakukan perancangan antarmuka pada aplikasi

pada smartphone sering terjadinya kesalahan dari komponen antarmuka standar

atau biasa disebut dengan UI (Nguyen & Csallner, 2015).

User Interface (UI) dan User Experience (UX) adalah hal pertama yang

pengguna lakukan untuk berinteraksi ketika mengakses layanan internet. Namun,

UI/UX, yang dirancangan dengan tidak mempertimbangkan pengguna saat

dirancang, menyebabkan ketidaknyamanan bagi pengguna. Untuk menyediakan

UI/UX yang disesuaikan dengan kebutuhan pengguna, analisis pengguna yang

akurat merupakan hal yang penting penting dan harus dioptimalkan (Ji, Yun, Lee,

Kim, & Lim, 2018). Dalam penelitian ini metode yang digunakan metode User

Centered Design. Metode yang diusulkan merupakan pendekatan untuk

pengembangan produk yang mendasari proses dalam informasi yang dikumpulkan

tentang individu dan pengaturan dimana produk dapat digunakan (R, Lyon, &

Koerner, 2016).

I.2. Rumusan Masalah

Berdasarkan latar belakang yang telah dibahas, rumusan masalah dari

penelitian ini adalah:

1. Bagaimana menganalisis user experience untuk mendapatkan informasi

kebutuhan pengguna?

2. Bagaimana merancang solusi desain berdasarkan hasil analisis user

experience?

3. Bagaimana mengevaluasi desain user interface yang dapat memenuhi

kebutuhan pengguna?

I.3. Tujuan Penelitian

1. Untuk menganalisis user experience untuk mendapatkan informasi

kebutuhan pengguna dengan menggunakan metode user centered design.

2. Merancang solusi desain berdasarkan hasil analisis user experience.

3. Mengevaluasi user interface yang dapat memenuhi kebutuhan pengguna

menggunakan metode Single Ease Questions (SEQ) dan System Usability

Scale (SUS).

3

I.4. Manfaat Penelitian

Manfaat bagi masyarakat yaitu:

1. Mendapatkan informasi yang akurat mengenai ilmu fikih

2. Memudahkan masyarakat untuk mendapatkan solusi dari

permasalahan terkait ilmu fikih dengan bertanya dengan seorang

ustaz.

Manfaat bagi akademis yaitu:

1. Memberikan kontribusi terhadap perkembangan digitalisasi ilmu fikih.

I.5. Batasan Masalah

Berikut batasan masalah pada penelitian ini:

1. Merancang User Interface berbasis mobile Android.

2. Penelitian ini dilakukan sampai tahap final desain aplikasi.

3. Dalam perancangan User Interface menggunakan Adobe Xd.

4. Dalam perancangan User Interface menggunakan FlatIcon sebagai sumber

ikon yang digunakan.

5. Responden pada wawancara dan testing merupakan sampel dari calon

pengguna aplikasi yaitu masyarakat umum yang beragama Islam dengan

jumlah 5 orang.

6. Merancang User Interface Aplikasi pada modul pengguna.

I.6. Sistematika Penulisan

Penelitian ini dibuat dengan sistematika penulisan sebagi berikut:

BAB I PENDAHULUAN

Pada bab ini berisi uraian mengenai latar belakang masalah, rumusan

masalah, tujuan penelitian, manfaat penelitian batasan masalah dan sistematika

penulisan.

BAB II TINJAUAN PUSTAKA

Pada bab ini berisi uraian mengenai teori yang relevan dengan penelitian,

metode yang digunakan, perangkat lunak yang digunakan, dan state of the art.

4

BAB III METODOLOGI PENELITIAN

Pada bab ini menguraikan langkah-langkah metode penelitian mulai dari

tahap persiapan, perancangan sampai tahap implementasi. Bab ini terdapat

Model Konseptual dan Sitematika Penelitian.

BAB IV ANALISIS DAN PERANCANGAN

Pada bab ini berisi analisis dan perancangan dari aktivitas perancangan

berdasarkan metode yang digunakan. Bab ini terdapat 3 tahapan yang ada pada

metode user-centered design yaitu Plan the Human Centered Design, Specify

the Context of Use, dan Specify User Requirements.

BAB V IMPLEMENTASI DAN PENGUJIAN

Bab ini berisikan perancangan aplikasi, hasil perancangan, dan hasil testing.

Bab ini terdapat 2 tahapan yang ada pada metode user-centered design yaitu

Produce Design Solution dan Evaluate Designs Againts User Requirements.

BAB VI KESIMPULAN DAN SARAN

Pada bab ini berisi kesimpulan dan saran yang didaptkan dari hasil

penelitian ini.

5

BAB II TINJAUAN PUSTAKA

II.1. Fikih

Fiqih (fqhu) memiliki arti paham atau tahu, jika dilihat dari segi ilmu

pengetahuan yang berkembang dalam Islam, fikih adalah ilmu pengetahuan yang

membicarakan atau membahas atau memuat hukum-hukum Islam yang

bersumberkan Al-Qur’an dan sunnah (Dahlan, 2019).

Ilmu fikih disebarkan melalui kitab-kitab fikih oleh berbagai mazhab.

Mazhab adalah pengelompokan suatu hukum atau aturan dan memiliki suatu ciri

khas. Dalam ilmu fikih terdapat 4 mazhab, berikut penjelasannya (Huda, 2007).

1) Mazhab Hanafi

Nama dari mazhab Hanafi diambil dari nama pendirinya yaitu Imam

Abu Hanafi An-Nu’man bin Tsabit. Beliau lahir pada tahun 80 Hijriah di

Kufa dan wafat pada tahun 150 Hijriah. Mazhab ini juga dikenal dengan

nama mazhab Ahli Qiyas.

2) Mazhab Maliki

Mazhab maliki didirikan oleh Al-Imam Maliki bin Anas Al-

Ashbhay. Beliau lahir pada tahun 93 Hijriah dan wafat pada tahun 179

Hijriah. Beliau sebagai ahli hadis di Madinah. Mazhab ini juga dikenal

dengan nama mazhab Ahli Hadists.

3) Mazhab Syafi’i

Mazhab Syafi’I didirikan oleh Al-Imam Muhammad bin Idris As-

Syafi’I Al-Quraisyi. Beliau lahir pada tahun 150 Hijriah di Ghuzzah dan

wafat pada tahun 204 Hijriah di Mesir. Beliau menyatukan 2 mazhab yaitu

mazhab Qiyas dan Hadists.

4) Mazhab Hanbali

Mazhab Hanbali didirikan oleh Al-Imam Ahmad bin Hanbal As-

Syaebani. Beliau lahir pada tahun 164 Hijriah di Baghdad dan wafat pada

thun 248 Hijriah. Beliau merupakan murif dari Imam Syafi’I.

6

II.2. Mobile Interface

Perkembangan smartphone dan telepon seluler mempengaruhi

perkembangan antarmuka. Desain dan pengembangan antarmuka pengguna telah

menjadi arah penelitian paling aktif dibidang desain international. Antarmuka

pengguna sangat mempengaruhi cara orang mengontrol dan memanipulasi

smartphone. Dengan peningkatan teknologi smartphone maka interaksi antara

orang dengan ponsel semakin kompleks oleh karena itu pengalaman pengguna,

desain interaksi dan kegunaannya menjadi hal yang penting dalam perancangan

(Liu, 2016). Proses perancangan berorientasi pengguna yang dijelaskan pada Tabel

II.1 sebagai berikut.

Tabel II.1. Proses Perancangan Berorientasi Pengguna (Liu, 2016)

Kategori Konten

Penelitian

Tentukan tujuan dan jadwal

Meninjau pekerjaan dan produk yang ada saat ini.

Memahami kebutuhan dan perilaku pengguna

Model Model pengguna dan pelanggan

Definisi

Kebutuhan

Skenario

Menggambarkan kemampuan produk

Definisi

Framework

Mendefinisikan informasi dan fungsi

Merancangan arsitektur pengalaman pengguna

Menggambarkan interaksi peran dan produk pengguna

Penyempurnaan

Desain

Membuat desain lebih spesifik

Pendukung Melakukan revisi desain

Desain yang berpusat pada pengguna dapat diusulkan dengan

pengembangan produk dan penelitian pengalaman pengguna. Pada tahap awal

desain produk, strategi desain adalah untuk memenuhi kebutuhan pengguna, dan

penelitian tentang perilaku pengguna menjadi pusat dalam semua proses desain

(Liu, 2016). Berdasarkan definisi tersebut desain berorientasi pengguna pada

mobile platform memiliki beberapa elemen ditunjukan pada gambar berikut.

7

Gambar II.1. Elements of user interface for mobile platform (Liu, 2016)

Pada Gambar II.1 diatas menunjukan bahwa elemen antarmuka pengguna

untuk platform mobile dibagi menjadi 4 jenis yaitu Bars, Content views, Control

dan Temporary view. Bars dirancang untuk menggambarkan konteks pengguna

yang dapat mengantar pengguna untuk melakukan banyak tindakan. Content views

mencakup beberapa konten aplikasi dan mendukung perilaku pengguna. Control

dapat mengeksekusi tindakan dan mengirim informasi kepada pengguna. Dan

Temporary view memberikan pengguna beberapa fungsi untuk sementara (Liu,

2016).

II.3. User Interface dan User Experience

User Interface (UI) adalah istilah luas untuk sistem, yang memungkinkan

pengguna untuk terhubung dengan teknologi. Banyak jenis antarmuka dari berbagai

framework dan program perangkat lunak. Salah satu jenis antarmuka seperti

Graphical User Interface (GUI). User Experience (UX) adalah pendekatan

sistematis untuk merancang dan menganalisis pengalaman pengguna dengan

teknologi. UX mengacu pada presepsi dan tanggapan pengguna yang muncul dalam

8

penggunaan sistem atau aplikasi interaktif (Gonza lez-Perez, Ramí rez-Montoya,

Garcí a-Pen alvo, & Cruz, 2017). Dalam perancangan UI/UX ada beberapa proses

akan di lewati (Peak, 2018).

1) Understanding your user

Proses perancangan dimulai dengan memahami target pengguna

mulai dari perilaku, kebutuhan dan tujuan pengguna, sehingga dapat

mengidentifikasi persona sehingga dapat memulai merancang board.

2) Wireframes

Dalam merancang tidak hanya memperhitungkan persona dan board

tetapi juga skenario pengguna guna mengetahui spesifikasi fungsional

rancangan.

3) Graphic design

Merancang sesuai keperluan antarmuka yang akan digunakan, dan

menyesuaikan antarmuka yang familiar dengan pengguna. Beberapa faktor

yang mendukung Graphic Design yaitu ukuran layar, ukuran ikon, dan

touch gestures. Dalam merancang, UI dapat beradaptasi dengan berbagai

perangkat dan mode sehingga pengguna dapat memahami konteks dari

aplikasi.

4) Interactive visual prototyping

Interactive visual prototyping merupakan proses perancangan

dengan membuat prototipe visual yang interaktif, sehingga pengguna dapat

memahami tampilan dan nuansa dari aplikasi.

5) Gathering feedback

Prototipe yang sudah di rancang akan diuji kepada pengguna untuk

mengetahui rancangan dapat dipahami dengan mudah atau tidak dan

seberapa ramah hasil rancangan. Setelah menerima feedback dari pengguna,

maka tahap selanjutnya melakukan perubahan terhadap rancangan yang

menyesuaikan hasil feedback.

Pada penelitian ini menghasilkan User Interface berdasarkan

kebutuhan pengguna yang didapatkan dari analisis User Experience untuk

merancang User Inteface yang sesuai dengan kebutuhan pengguna

penelitian ini menggunakan metode User-Centered Design.

9

II.4. User-Centered Design (UCD)

User Centered Design (UCD) adalah metodologi desain dimana kebutuhan,

keinginan dan keterbatasan pengguna berfokus pada semua tahapan dalam proses

desain dan siklus hidup perancangan. Produk yang dikembangkan menggunakan

metodologi UCD bertujuan untuk menyesuaikan kebutuhan pengguna dan

meningkatkan kegunaan. UCD tidak berarti menghadirkan informasi yang mereka

butuhkan kepada pengguna pada saat tertentu (Endsley, BoltC, & Jone, 2003). Pada

standar internation ISO 13407: Proses Human Centered Design menyediakan basis

untuk UCD. Standar tersebut mendefinisikan proses diseluruh siklus hidup

pengembangan (Jokela, Livari, Karukka, & Matero, 2003). Penerapan UCD

dilakukan dengan cara membuat kuesioner terdiri dari beberapa pertanyaan umum

tentang dampak keseluruhan metode UCD dalam perancangan dan pertanyaan

berfokus pada perancangan yang representatif, dan penilaian terperinci dari lima

metode UCD yang digunakan untuk diidentifikasi oleh responden berdasarkan

pengalaman mereka sendiri (Vredenburg , Mao, Smith, & Carey, 2002). Proses

UCD telah diuraikan menjadi lima tahap, yang diilustrasikan pada Gambar II.2

Berikut.

Gambar II.2. Proses UCD ISO 13407

Menurut panduan ISO 13407 untuk memcapai kegunaan dengan

menggunakan proses UCD yang dijelaskan pada gambar diatas diatas bahwa proses

UCD dilakukan sampai tujuan perancangan terpenuhi. Proses UCD memiliki

10

beberapa tahapan fundamental yang terkait dengan seluruh kegiatan, berikut

ketentuan proses UCD fundamental (Mithun & Yfooz, 2018).

1) Study/Analysis/Requirement

Kegiatan awal menunjukan kebutuhan pengguna, analisis pengguna,

konteks dan spesifikasi sistem yang dilakukan pada seluruh kegiatan dalam

proses UCD.

2) Design/Prototype

Desain atau prototipe mengacu pada proses UCD adalah persyaratan desain

atau instruksi dari sistem dan pengguna.

3) Build/Development

Istilah ini menunjukan aktivitas pengembangan sistem atau artefak dimana

persyaratan dikumpulkan dari tahap sebelumnya.

4) Evaluasi

Evaluasi merupakan pendekatan untuk memastikan efektivitas dan efisiensi

artefak yang memenuhi persyaratan pengguna.

II.5. Perbandingan UCD dengan EID

User-Centered Design (UCD) dan Ecological Interface Design (EID)

merupakan metode desain penting dalam bidang desain antarmuka pengguna.

Desain yang berpusat pada pengguna adalah kerangka kerja penelitian dari proses

desain bahwa keterbatasan psikologis dan fisikologis pengguna menjadi hal yang

diperhatikan pada setiap tahap dari proses desain antarmuka. Metode UCD berfokus

pada interaksi pengguna dengan antarmuka pengguna, sedangkan metode EID

berfokus pada hierarki perancangan, berikut Gambar II.3 yang menggambarkan

hierarki yang terdapat pada metode EID (Wu, Li, Lei, & Li, 2016).

11

Gambar II.3. Ecological interface design

Metode EID digunakan untuk analisis kerja domain atau lingkungan,

complex system, real-time dan dynamic systems. UCD digunakan untuk simple

system, everyday use, dan static system. Berikut Gambar II.4 yang menjelaskan

perbedaan UCD dengan EID (Wu, Li, Lei, & Li, 2016).

Gambar II.4. Perbedaan EID dengan UCD

12

Penelitian ini menggunakan metode UCD karena dalam perancangan

UI/UX berfokus pada kebutuhan pengguna dan mendapatkan tanggapan pengguna

terhadap aplikasi. Dalam metode UCD mendapatkan tanggapan pengguna ada

beberapa cara yaitu dengan wawancara, focus groups, kuesioner, dan usability

testing.

II.6. Semi-structured Interviews

Semi-structured Interviews mengembangkan pertanyaan-pertanyaan yang

sudah ditentukan sebelumnya seperti yang digunakan dalam Structured Interviews.

Pewawancara menggunakan pendekatan Semi-structured Interviews umunya

mengikuti dokumen yang disebut panduan wawancara atau jadwal wawancara

seperti:

1) Pengantar tujuan dan topik wawancara

2) Daftar topik pertanyaan tentang masing-masing topik

3) Menuntun responden pada pertanyaan

4) Komentar penutup

Tujuan umum dari wawancara semi-terstruktur adalah untuk

mengumpulkan informasi sistematis tentang serangkaian topik sentral, sementara

juga memungkinkan beberapa eksplorasi ketika masalah atau topik baru muncul.

Wawancara semi-terstruktur digunakan ketika ada beberapa pengetahuan tentang

topik atau masalah yang sedang diselidiki, tetapi masih membutuhkan rincian lebih

lanjut. Wawancara semi terstruktur dapat didasarkan pada topik, masalah, dan

pertanyaan yang muncul dari wawancara tidak terstruktur atau sumber informasi

lainnya. Wawancara semi-terstruktur memungkinkan diskresi pada jumlah dan

urutan pertanyaan yang telah ditetapkan diajukan kepada peserta namun tidak

secara terperinci seperti wawancara terstruktur. Jenis wawancara ini melibatkan

pengguna pertanyaan terbuka dan tertutup dan dapat memberikan data kuantitatif

dan kualitatif (Wilson, 2014). Kelebihan Wawancara semi-terstruktur sebagai

berikut:

1) Dapat mengungkap masalah yang sebelumnya tidak diketahui (berbeda

dengan wawancara terstruktur).

2) Mengatasi topik kompleks melalui penyelidikan dan klarifikasi.

13

3) Dapat memastikan bahwa poin-poin tertentu dapat disampaikan kepada

peserta dan juga memungkinkan peserta dan pewawancara untuk

menyampaikan keprihatinan dan masalah tambahan.

4) Memberikan mekanisme untuk mengalihkan pembicaraan yang

menyimpang terlalu jauh dari topik utama.

5) Memberikan beberapa fleksibilitas untuk pewawancara dan juga

memungkinkan beberapa perbandingan luas di seluruh wawancara.

6) Membutuhkan lebih sedikit waktu pelatihan daripada wawancara tidak

terstruktur karena pewawancara memiliki serangkaian pertanyaan spesifik

yang tersedia sebagai titik awal.

II.7. Persona

Persona biasanya didefinisikan sebagai perwakilan dari sekelompok

pengguna yang berbagi kesamaan tentang kebutuhan dan keinginan tentang

teknologi. Persona biasanya dibingkai dalam filosofi User-Centered Design (UCD)

sebagai sarana khusus hanya untuk desain dan profesi desain (Cabrero, Kapuire,

Winschiers-Theophilus, Stanley, & Abdelnour-Nocera, 2016). Berikut proses

identifikasi dan pemilihan pengguna (Kujala & Kauppinen, 2004).

1) Mendefinisikan karakteristik populasi pengguna

2) Menggunakan sampel yang representatif dari kelompok pengguna

Berikut kelebihan penggunaan persona dari beberapa sumber yang akan

dijelaskan pada Tabel II.2 (Koza, 2011).

Tabel II.2 Kelebihan Penggunaan Persona

No. Sumber Kelebihan

1. Cooper (1999) - Meningkatkan fokus pada tujuan

pengguna

- Mengurangi perubahan pada akhir

proses

2. Coopeer and Reimann

(2002)

- Membangun kesepakatan dan komitmen

untuk merancang

- Membantu mengukur keefektifan desain

14

- Mendefinisikan fitur produk

- Memfasilitasi komunikasi yang efektif

dalam proyek tim

- Dapat membantu hal lain seperti rencana

pemasaran

3. Grudin and Pruitt (2002) - Memfasilitasi fokus pada pengguna dan

konteks kerja

- Memungkinkan perhitungan

pengatahuan dari sebagian pengguna

dalam berbagai konteks

- Membuat asumsi pengguna secara jelas

- Memfasilitasi komunikasi yang efektif

tentang pengguna

- Meningkatkan fokus pada audiens yang

spesifik

4. Long (2009) - Memperkuat fokus pada pengguna

selama proses pengembangan

- Mengarah ke desain yang user-friendly

- Membuat kebutuhan pengguna lebih

jelas

- Sebagai panduan pengambilan

keputusan

5. Ma and LeRouge (2007) - Memfasilitasi komunikasi yang efektif

tentang pengguna

- Meningkatkan identifikasi dengan target

pengguna

6. Pruitt and Adlin (2006) - Membuat asumsi tentang pengguna

secara jelas

- Mempersempit target pengguna

- Mengarah ke keputusan desain yang

lebih baik

15

- Meningkatkan keterlibatan antar tim

desain

- Membangun empati untuk pengguna

Dibalik kelebihan personas masih terdapat perancang tidak menggunakan

personas dalam merancang desain dengan berbagai alasan. Berikut alasannya

(Matthews, Judge, & Whittaker, 2012).

1) Personas bersifat abstrak

Proses abstraksi dari data pengguna menjadi persona sulit untuk dimengerti,

jadi persona menjadi kurang detail.

2) Persona tidak bersifat impersonal(pripadi)

Detail dari personfikasi dalam personas gagal memberikan rasa empati.

3) Detail Personalisasi dapat menyesatkan

Sulit untuk memilih detail personal yang tidak memberikan kendala yang

tidak seharusnya terjadi pada saat merancang.

4) Detail personifikasi mengalihkan perhatian

Detail dari personifikasi dapat membuat perancang tidak fokus pada aspek

persona yang sangat penting.

II.8. Mental Model

Mental model adalah salah satu konsep yang penting dalam Human-

computer interaction (HCI). Mental model merupakan hal yang diyakini pengguna

tentang sistem yang ada. Berikut elemen yang penting pada Mental model (Nielsen

J. , 2019).

1) Mental model didasarkan pada kepercayaan bukan berdasarkan fakta,

maksudnya yaitu model yang diketahui pengguna (menurut yang mereka

tahu) tentang sistem.

2) Masing-masing pengguna memiliki model mental mereka sendiri. Model

mental internal untuk setiap otak pengguna dan pengguna yang berbeda

dapat membangun model mental yang berbeda dari satu antarmuka yang

sama.

Penelitian model mental menempati tempat dalam tatanan teknik setelah

pengumpulan data pengguna dan sebelum konsep desain produk dan interaksi.

16

Model mental untuk topik tertentu, pada dasarnya, merupakan diagram afinitas dari

perilaku pengguna. Diagram yang mewakili nama grup untuk perilaku di dalamnya.

Diagram afinitas, dalam interpretasi yang paling sederhana, menunjukkan

kelompok hal-hal terkait (YOUNG, 2008).

II.9. Hierarchical Task Analysis (HTA)

Hierarchical Task Analysis (HTA) pertama kali diusulkan pada akhir tahun

1960-an sebagai pendekatan umum untuk memeriksa tugas. Dalam HTA, tugas

diwakili dalam bentuk hierarki ofgoals dan subgoals, menggunakan gagasan

rencana untuk menunjukan kapan subgoals perlu dilakukan (Shepherd, 2001).

HTA membutuhkan pemahaman rinci tentang tugas-tugas pengguna, hal ini dapat

dicapai dengan beberapa cara sebagai berikut (Hornsby, 2010).

1) Mengidentifikasi tujuan utama pengguna

2) Mengidentifikasi secara rinci langkah-langkah yang harus dilakukan

pengguna untuk mencapai tujuan mereka.

3) Mengoptimalkan prosedur tersebut.

Berikut Gambar II.5 yang merupakan ilustrasi dari contoh Hierarchical

Task Analysis dengan contoh tugas yaitu memesan buku.

Gambar II.5. Contoh Hierarchical Task Analysis (Hornsby, 2010)

Dalam analisis Hierarchical Task Analysis diatas, terdapat tugas yang

memiliki beberapa subtugas, untuk menjelaskan hubungan antara tugas utama

dengan subtugas menggunakan skema penomoran. Hierarchical Task Analysis

berdasarkan pada sudut pandang pengalaman pengguna, namun tidak menjelaskan

bagaimana komunikasi pengguna dengan sistem. Hierarchical Task Analysis dapat

menjelaskan tentang langkah-langkah tugas yang akan dilakukan pengguna.

17

II.10. Usability Testing

Usability testing merupakan suatu teknik testing dengan cara menjelaskan

kepada pengguna untuk memahami informasi atau konten dari aplikasi yang

diusulkan. Dari Usability testing sendiri memiliki metode Cooperative Usability

Testing (CUT) dengan Question of Understanding (QU). Proses melakukan CUT

dan QU dapat dilakukan dengan proses wawancara terhadap pengguna. Tujuan dari

Usability Testing sendiri agar mendapatkan pengetahuan yang tepat tentang

pemahaman pengguna terhadap konten aplikasi (Rasmusse, Frøkjær, & Andersen,

2017). Pada penerapan Usability testing membutuhkan informasi dari responden

salah satu cara mendapatkan informasi yaitu dengan Usability Questionnaires.

Usability Questionnaires memiliki beberapa metode standar nasional dan

internasional. Berikut metode-metode Post-Study Questionnaires.

1) The Questionnaire for User Interaction Satisfaction (QUIS)

2) The Software Usability Measurement Inventory (SUMI)

3) The Post-Study System Usability Questionnaire (PSSUQ)

4) The System Usability Scale (SUS)

Pada Usability Questionnaires memiliki metode yang ditujukan untuk

melakukan testing setelah pengguna melakukan pengujian atau yang disebut post-

task question. Berikut metode-metode Post-task question.

1) The After-Scenario Questionnaire (ASQ)

2) Expectation Ratings (ER)

3) Usability Magnitude Estimation (UME)

4) The Single Ease Question (SEQ)

5) The Subjective Mental Effort Question (SMEQ)

II.11. System Usability Scale (SUS)

System Usability Scale (SUS) adalah salah satu metode survei yang

digunakan untuk menilai kegunaan berbagai produk atau layanan. SUS memiliki

beberapa karakteristik. Peratama Terdiri sepuluh pertanyaan masing-masing

memiliki skala lima poin yang berkisar dari sangat tidak setuju sampai sangat

setuju. Berikut Gambar II.6 yang menjelaskan skala penilaian dari skor yang di

dapat dalam pelaksanaan SUS.

18

Gambar II.6. Skala penilaian skor SUS

Karakteristik yang kedua yaitu, SUS merupakan teknologi tinggi yang

berarti dapat digunakan secara luas dan dapat digunakan berbagai antar muka

seperti WEB, Mobile, interactive voice response (IVR) systems dan TV (Bangor,

2009).

SUS digunakan sebagai metode testing pada penelitian ini dikarenakan,

SUS merupakan salah satu metode standar post-study yang populer dan praktis.

Penelitian terbaru menyatakan dibandingkan dengan metode lain SUS merupakan

yang memiliki hasil cepat dan mudah (Suaro & Lewis, 2012).

II.12. Single Ease Questions (SEQ)

Single Ease Questions (SEQ) adalah pengujian yang dilakukan setelah

menyelesaikan semua skenario ataupun task yang diberikan. Penguji akan

memberikan berkas yang terdapat task yang akan dilakukan oleh responden dan

terdapat skala peringkat yang terdapat tujuh poin untuk menilai seberapa mudah

respoden mengerjakan task (Suaro & Lewis, 2012). Berikut Gambar II.7 yang

merupakan contoh format penilaian menggunakan SEQ.

Gambar II.7. Skala Penilaian SEQ

Penelitian terbaru menyatakan Post-Task Questionnaire terbaik yaitu SEQ

dan SMEQ. Untuk mendapatkan hasil tes yang sederhana dan memenuhi kualifikasi

19

psikometri yang layak SEQ merupakan metode yang baik untuk digunakan (Suaro

& Lewis, 2012).

II.13. Adobe XD

Adobe Experience Design CC merupakan aplikasi desktop untuk

Merancang User Inteface, merancang mockup, dan prototype alur pengguna serta

interaksi pengguna (Budhiluhoer, 2018). Terdapat beberapa fitur utama pada Adobe

XD (kompasiana, 2016).

1) Focused design tools

Adobe XD dapat digunakan untuk membuat kerangka kerja, screen

layouts, dan mockup.

2) Prototyping tools

Tools ini dapat berfungsi untuk menetapkan alur pengguna.

3) Built in sharing

Tools ini dapat berfungsi untuk membuat rekaman video selama proses

pengerjaan desain.

4) Support for bringing in existing assets from Photoshop, Illustrator and

Sketch

Adobe XD mendukung aset desain dari berbagai macam sumber seperti

Photoshop, Illustrator maupun Sketch.

5) Fast Performance

Pada Adobe XD dapat membuat dan menyatukan proyek desain yang

kompleks secara bersamaan seperti desain website, aplikasi, mobile,

dan sebagainya tanpa menggangu peforma software.

II.14. FlatIcon

FlatIcon merupakan salah satu website yang menyediakan icon gratis

maupun berbayar untuk mengunduh ikon pada FlatIcon terdapat 3 jenis user,

berikut jenis user pada FlatIcon (FlatIcon, 2019).

1) Non-registered User

Non-registered User Merupakan user yang tidak melakukan registrasi pada

website FlatIcon dan hanya dapat membuat 1 Icon Collection dan saat

mengunduh memiliki limit yaitu 10 ikon perhari.

2) Registered User

20

Registered User merupakan user yang melakukan registrasi dan hanya dapat

membuat 3 Icon Collection dan bisa mendownload 100 ikon per hari.

3) Premium User

Premium User merupakan user yang melakukan pembayaran, dapat

membuat Icon Collections secara unlimited dan dapat mengunduh 2000

ikon perhari.

II.15. Balsamiq

Balsamiq merupakan aplikasi desktop untuk membuat sketsa ide untuk

produk atau antarmuka dalam bentuk kerangka. Sebelum Balsamiq dan aplikasi

serupa lainnya, wireframing secara tradisional dilakukan dengan tangan di atas

kertas, atau dengan menggunakan aplikasi seperti Visio atau Photoshop. Sementara

itu Balsamiq menawarkan hal-hal yang tidak dimiliki aplikasi lain. Berikut hal-hal

yang ditawarkan oleh Balsamiq (Faranello, 2012).

1) Kemudahan penggunaan: Dapat membuat wireframe beberapa saat setelah

membuka aplikasi.

2) Alat Sederhana: Balsamiq diisi dengan alat visual yang mudah dipahami

yang akan membantu transfer ide-ide.

3) Portability: File Balsamiq dapat dengan mudah dibagikan diantara rekan

dan klien. Dengan Balsamiq, dapat merancang berbagi pekerjaan di

berbagai sistem operasi dan dengan siapa pun yang dapat dipilih melalui

email, cetak, atau online.

4) Keterjangkauan: Balsamiq merupakan aplikasi gratis.

21

II.16. State of The Art

Tabel II.3. State of The Art

Judul Peneliti Tahun Tujuan Pendukung Kelebihan/Batasan Hasil

The Design Of

The Ui/Ux Of

Mobile

Aplication

Calculation and

The Payment Of

Zakat

Nugroho Surya

Alam,

Riky.A.Siswanti

.,S.Ds.,M.dES,

Jiwa

Uatama.,S.Ds.,

M.Ds

2015 Pembuatan UI/UX

aplikasi perhitungan

dan pembayaran

zakat yang dapat

digunakan oleh

BAZNAS

Transaksi zakat di

Indonesia mencapai

217T, dan dikeluar

baru mencapai 1%

Memberikan

edukasi kepada

masyarakat agar

paham mengenai

zakat

Aplikasi ini

membantu

mengingatkan waktu

pembayaran zakat

agar pengguna tidak

melupakan

kewajiban

Rancang

Bangun Aplikasi

Pembelajaran

Hadis Untuk

Perangkat

Mobile berbasis

Android

Heru Supriyono,

Ardhiyatama,

Nur Saputra,

Endah

Sudarmilah, dan

Ruswa Darsono

2014 Aplikasi untuk

media pembelajaran

Pengembangan

aplikasi android

pembelajaran ilmu

hadist sebelumnya

belum pernah ada

Pengujian

dilakukan terhadao

25 orang dari

berbagai kalangan

masyarakat

Apliaksi

pembelajaran hadis

yang dibuat akan

digunakan sebagai

media pembelajaran

dalam mempelajari

pengertian ilmu

22

hadis secara umum

sehingga lebih

mudah dipahami dan

dimengerti oleh

pengguna aplikasi

Mobile Smart

Phone

Application for

Faham Fiqh Al-

Aqsa(AFAQ)

Dr. Ahmed S.A.

Al-Qodsi

Prof.

Dr.Sharifah

Norshah Bani

Syed Bidin

Dr.Mohammed

Muneer’Deen

Olodo al-Shafi’I

Profesor

Dr.Kamarul

Shukri Mat Teh

2018 Memfasilitasi

informasi tentang

fatwa yang

disebarluaskan

kepada publik

Penelitian bekerja

sama dengan

Selangor State Mufti

Department

Membantu orang

untuk mengakses

fatwa di selangor

malaysia dengan

menggunakan

applikasi mobile

Aplikasi yang

efektif dan dapat

diakses melalui

telepon genggam

User-centered

design of a

Brita Sedlmayr,

Jennifer

2014 Tujuan utama dari

penelitian ini adalah

Pendekatan proses

UCD dan metode

Pengobatan hanya

ada sebagai versi

Satu tipe persona /

pengguna, konsep

23

mobile

medication

management

Schöffler, Hans-

Ulrich Prokosch

& Martin

Sedlmayr

untuk melaporkan

pengembangan

konsep antarmuka

seluler untuk

mendukung

pengelolaan

informasi

pengobatan

yang terlibat dapat

diterapkan oleh

peneliti lain sebagai

kerangka kerja untuk

pengembangan

aplikasi serupa

berbasis kertas,

yang terkait dengan

beberapa masalah,

yang dapat

dihindari dengan

alternatif elektronik

desain antarmuka

dikembangkan, yang

menerima SUS-

Score rata-rata 92,1

dalam tes pengguna.

Masalah kegunaan

telah dipecahkan

sehingga konsep

desain dapat

diperbaiki untuk

implementasi di

masa depan

Perancangan

dan

Implementasi

Konsultasi Gizi

Online Berbasis

Web

Muhammad

Iqbal, Husin

2017 Mengedukasi

masyarakat tentang

pentingnya gizi

Penyediaan tenaga

gizi disediakan pada

website merupakan

perhimpunan profesi

gizi

Pada penelitian

menggunakan

Metode waterfall

Konsultasi gizi

online dapat

mengatasi

permasalahan

pelayanan gizi yang

biasanya dihadapi

24

oleh konsultasi

konvensional

25

BAB III METODOLOGI PENELITIAN

III.1. Model Konseptual

Pada perancangan UI/UX aplikasi fikih menggunakan model yang

dikemabangkan oleh Hevner dkk. Model tersebut digunakan untuk

mengidentifikasi dan mengevaluasi masalah pada penelitian sistem informasi

menggunakan konsep design science dan behavior science. Behavior science

membahas penelitian melalui pengembangan dan justification teori yang

memprediksi fenomena terkait dengan kebutuhan bisnis. Design science membahas

penelitian melalui pembangunan dan evaluasi artefak yang dirancang untuk

memenuhi kebutuhan bisnis (Hevner, Ram, March, & Park, 2004). Berikut Gambar

III.1 sebagai penerapan model konseptual yang digunakan dalam penelitian ini.

Gambar III.1. Model Konseptual

Dalam perancangan user interface berdasarkan permasalahan dari kebutuhan

pengguna untuk menemukan solusi dari permasalahan terkait ilmu fikih. Penelitian

ini menggunakan teori user interface, user experience dan user mobile interface

serta menggunakan metode user centered design sebagai metode perancangan dan

26

menggunakan Semi-structured Interview pada pelaksanaan wawancara. Aplikasi

yang dihasilkan akan melewati fase pengujian atau evaluasi menggunakan metode

SEQ (Single Ease Questions) dan SUS (Software Usability Scale). Landasan

pengetahuan dapat diterapkan pada penelitian ini untuk menghasilkan artefak yaitu

UI/UX aplikasi konsultasi fikih pada modul pengguna. Pada perancangaan user

interface memiliki target pengguna yaitu masyarakat muslim yang beragama Islam.

III.2. Sistematika Penelitian

Sistematika penelitian adalah tahapan yang dapat digambarkan berupa alur

pelaksanaan penelitian dengan tujuan memecahkan masalah yang sudah

diidentifikasi sebelumnya. Pada penelitian ini memiliki 3 tahapan yaitu tahap

pendahuluan, user centered design, dan tahap penutup. Berikut Gambar III.2 yang

menggambarkan alur dari sistematika penelitian.

27

Gambar III.2. Sistematika Penelitian

28

III.2.1. Tahap Pendahuluan

Pada Gambar III.2 diatas terdapat tahap pendahuluan yang memiliki

beberapa aktivitas yang pertama penetapan latar belakang dimana peneliti

melakukan survei dengan judul “Kuisioner Pengguna Aplikasi Mobile bagi

Muslim” survei ini bertujuan untuk mengetahui permasalahan pada calon

pengguna terhadap topik penelitian. Tahapan selanjutnya yaitu identifikasi

masalah terkait penelitian dengan mengumpulkan masalah yang terdapat

pada survei yang telah dilakukan sebelumnya. Pada tahap selanjutnya yaitu

Menentukan solusi dimana mencari solusi atas masalah yang telah

ditemukan pada tahap sebelumnya. Proses selanjutnya yaitu penetapan

tujuan penelitian yaitu mementukan tujuan dari solusi yang akan diterapkan

pada penelitian ini. Proses terakhir padah tahap pendahuluan yaitu

Penetapan batasan masalah, yaitu menetapkan batasan masalah yang ingin

dipecahkan dalam penelitian ini.

III.2.2. User Centered Design

Tahap User Centerd Design memiliki 5 proses yang pertama Plan

the human centered process pada proses ini peneliti melakukan wawancara

terhadap calon pengguna sebelum melakukan wawancara menentukan

target responden wawancara. Wawancara dilakukan dengan 5 orang calon

pengguna dan menggunakan metode Semi-structured Interview. Proses

selanjutnya yaitu Specify the context of use yaitu melakukan identifikasi

pada target pengguna dan persona, pada proses ini peneliti membuat persona

yang mana terdapat 3 kriteria persona. Proses selanjutnya yaitu Specify user

and organisational pada proses ini hal yang pertama dilakukan yaitu

menentukan kebutuhan pengguna selanjutnya membuat perancangan model

mental menggunakan diagram Affinity diagram, setalah mengetahui tugas

yang akan dilakukan user yang dapat dilihat pada Affinity Diagram maka

peneliti akan melakukan Analisis task user dengan menggunakan

Hierarchical Task Analysis. Setalah membuat HTA maka untuk

menjelaskan proses pada HTA peneliti menggunakan model skenario yang

mana terdapat penjelasan dan alur pada tugas yang ada pada HTA. Setelah

mendapatkan alur tugas pada proses sebelumnya maka lanjut pada proses

29

Produce design solution pada proses ini terdapat aktivitas membuat

wireframe antar muka pengguna, dan selanjutnya amembuat desain

antarmuka pengguna berdasrkan wireframe yang telah dibuat. Setelah

antarmuka pengguna selesai dirancang maka akan lanjut pada proses

Evaluate designs againts user requirements yaitu melakukan evaluasi

desain apakah seseuai dengan kebutuhan pengguna, pada proses ini terdapat

dua aktivitas yang pertama melakukan testing menggunakan metode SEQ

dan SUS kepada 5 orang calon pengguna, setelah testing dilakukan maka

akan melakukan analisis hasil dari testing, apakah desain yang telah

dirancang sesuai atau tidak dengan kebutuhan pengguna. Jika hasil testing

tidak sesuai maka peneliti akan kembali pada Specify the context of use,

namun jika hasil testing yang diinginkan tercapai maka peneliti akan lanjut

pada tahap akhir penelitian.

III.2.3. Tahap Penutup

Tahap penutup merupakan tahapan terakhir dari penelitian dimana

terdapat kesimpulan yang berisi tentang rangkuman atau hal yang

didapatkan selama melakukan penelitian. Setelah kesimpulan berikutnya

saran, berisi tentang hal-hal yang harus diperbaiki guna untuk penelitian

selanjutnya.

30

BAB IV ANALISIS DAN PERANCANGAN

IV.1. Plan the Human Centered Design

IV.1.1. Wawancara

Pada penelitian ini wawancara dilakukan dengan menggunakan

metode Semi-structured Interviews dimana pertanyaan-pertanyaan telah

disiapkan untuk mencapai tujuan tertentu. Pada penelitian wawancara

dilakukan dengan 5 orang narasumber. Berikut Tabel IV.1 yang terdapat

daftar pertanyaan wawancara yang akan ditanyakan kepada responden.

Tabel IV.1. Pertanyaan Wawancara

Tujuan Pertanyaan Pertanyaan Lanjutan

Mengidentifikasi

pengalaman

pengguna

menggunakan

smartphone

1a. Seberapa sering anda

menggunakan

smartphone?

1. Aplikasi apa saja

yang anda gunakan?

2. Kenapa anda memilih

menggunakan

aplikasi tersebut?

3. Ceritakan

pengalaman anda

menggunakan

aplikasi tersebut!

1b. Apakah anda

menggunakan aplikasi

yang berkaitan dengan

ke agamaan?

1. Aplikasi apa saja

yang anda gunakan?


menggunakan

aplikasi tersebut?

3. Ceritakan

pengalaman anda

menggunakan

aplikasi tersebut!

Mengidentifikasi

cara pengguna

menagani masalah

2a. Apa yang biasa kamu

lakukan ketika

1. Bagaimana cara

kamu mendapatkan

31


mendapatkan masalah

terkait fikih?

solusi dari masalah

tersebut?

2. Apa cara alternatif

lain yang kamu

lakukan ketika

mencari solusi?

3. Kenapa kamu

memilih solusi

tersebut?

2b. Apakah anda pernah

mencari solusi dengan

mencari artikel?

1. Apa yang menjadi

tolak ukur anda untuk

mempercayai solusi

yang kamu cari

dengan membaca

artikel?

2. Ceritakan

pengalaman anda!

2c. Apakah anda pernah

mencari solusi dengan

bertanya dengan seorang

ustaz?

1. Apa yag menjadi

tolak ukur anda untuk

mempercayai

jawaban dari solusi

yang diberikan ustaz?

2. Apa yang menjadi

tolak ukur menilai

kredibilitas seorang

ustaz sehingga anda

memutuskan untuk

bertanya kepada

ustaz tersebut?

3. Ceritakan

pengalaman anda

32


ketika bertanya

dengan ustaz.

2d. Menurut anda

bagaimana cara

penanganan solusi yang

baik ketika mendapat

masalah tersebut?


solusi tersubut?

2. Jelaskan alasan

kenapa menyarankan

solusi tersbut?

Mengidentifikasi

cara pengguna

menggunakan

produk

3a. Apakah anda pernah

melakukan komunikasi

menggunakan media

komunikasi dengan

seorang ustaz?

1. Jika iya, apa media

yang anda gunakan

dan ceritakan

pengalaman anda.

2. Jika tidak, kira-kira

anda akan

menggunakan media

apa saat ingin

melakukan

komunikasi dengan

seorang ustaz dan

kenapa memilih

media tersebut?

3b. Pada saat

penggunaan media

komunikasi apakah anda

menemui masalah atau

kendala saat melakukan

konsultasi?

1. Jika iya, apa masalah

yang anda temui?

2. Apakah masalah

tersebut cukup

menggangu?

3. Ceritakan

pengalaman anda.

Penutup 4a. Jika terdapat aplikasi

konsultasi dengan

seorang ustaz apa

1. Menurut anda apa

saja fitur yang

sebaiknya kami

tawarkan?

33


harapan anda terhadap

aplikasi tersebut?

IV.1.2. Kesimpulan dari Hasil Wawancara

Kesimpulan dari hasil wawancara diambil dari beberapa pernyataan

atau jawaban dari responden. Kesimpulan dari hasil wawancara dijelaskan

pada Tabel IV.2 berikut.

Tabel IV. 2. Kesimpulan dari Hasil Wawancara

No. Tujuan Pertanyaan Kesimpulan Hasil Wawancara

1. Mengidentifikasi

pengalaman pengguna

menggunakan

smartphone

Dari hasil wawancara didapat kesimpulan

bahwa:

• Pengguna rata-rata menggnakan

smartphone 4 sampai dengan 5 jam

sehari.

• Aplikasi yang sering digunakan yaitu

aplikasi chatting, jasa dan hiburan.

• Pengguna memilih aplikasi tersebut

karena banyaknya orang-orang disekitar

mereka menggunakan aplikasi yang

sama. Aplikasi jasa digunakan karena

kebutuhan untuk transportasi dan tidak

memiliki banyak waktu untuk

melakukan kegiatan tertentu misal,

belanja dan membeli makanan.

• Pada saat penggunaan beberapa aplikasi

pengguna menemukan masalah saat

login menggunakan nomor handphone.

Yaitu pada saat mengganti nomor baru.

• Pada saat melakukan registrasi aplikasi

pengguna lebih menyukai menggunakan

34


email dari pada nomor handphone yang

menurut pengguna merupakan hal yang

bersifat pribadi.

• Pengguna rata-rata pernah

menggunakan 1 sampai dengan 3

aplikasi keagamaan

• Aplikasi yang digunakan yaitu

pengingat waktu shalat, arah kiblat, dan

Al-Qur’an

• Pada saat penggunaan aplikasi beberapa

pengguna menemukan fungsi yang tidak

jalan sebagaimana mestinya

• Ada beberapa aplikasi yang membuat

pengguna bingung dikarenakan terlalu

banyak fitur yang ditawarkan

2. Mengidentifikasi cara

pengguna menagani

masalah

• Pengguna melakukan pencarian di

internet jika menemukan masalah. Ada

juga pengguna bertanya kepada orang

terdekat atau mentor yang memiliki ilmu

dibidang permasalah terkait.

• Pengguna juga melakukan pencarian

diinternet dan membaca artikel atau

materi terkait masalah yang sedang

dihadapi, namun pengguna masih

kurang puas atas jawaban yang didapat

dikarenakan masih ragu dengan sumber

yang didapatkan.

• Beberapa pengguna juga mendapatkan

solusi dari permasalahan dengan

bertanya kepada seorang ustaz. Untuk

menilai kredibilitas seorang ustaz

35


pengguna menyatakan pentingnya latar

belakang pendidikan, bidang ilmu yang

didalami, bahkan visual seorang ustaz.

• Pada saat melakukan komunikasi

dengan ustaz secara langsung bagi

pengguna sangat susah untuk dilakukan

karena tidak adanya waktu luang dan

tidak memiliki kenalan ustaz.

• Pengguna membutuhkan sumber yang

dapat dipercaya pada saat melakukan

pencarian artikel ataupun materi terkait

dan membutuhkan seorang yang ahli

dalam bidangnya untuk mendapatkan

solusi dari suatu masalah yang dimiliki.

3. Mengidentifikasi cara

pengguna

menggunakan produk

• Beberapa pengguna pernah melakukan

konsultasi menggunakan media

komunikasi dengan seorang ustaz yaitu

menggunakan aplikasi chatting.

• Pengguna membutuhkan media

mengirim pesan sebagai sarana untuk

berkonsultasi dengan ustaz.

• Pengguna menemukan masalah ketika

pesan yang dikirim, namun belum ada

kejalsan kapan pesan akan dibalas.

4. Penutup • Pengguna membutuhkan aplikasi yang

dapat mengirim pesan dengan seorang

ustaz.

• Pengguna membutuhkan materi dengan

sumber yang dapat dipercaya.

36

IV.2. Specify the Context of Use

Pada proses ini adalah untuk memahami konteks pengguna dengan

mengidentifikasi persona yang didapatkan dari hasil observasi data pengguna.

Persona bertujuan untuk mempresentasikan tipe pengguna yang akan menggunakan

aplikasi dan mendapatkan kebutuhan pengguna. Dalam penelitian ini terdapat

beberapa informasi yang digunakan yaitu.

1) Demographic

Terdapat informasi mengenai target usia pengguna, dan jenis kelamin

pengguna.

2) Behavior

Terdapat infromasi kebiasaan dan tingkah laku pengguna dalam

menggunakan.

3) Enviroment and Technology

Terdapat informasi lingkungan dan kebiasan pengguna dalam menggunakan

teknologi.

4) Attitude and Activity

Terdapat infromasi mengenai aktivitas pengguna.

5) Problem

Terdapat informasi permasalahan pengguna dalam pemecahan masalah

terkait fikih.

6) Needs

Terdapat informasi kebutuhan yang merupakan solusi dari permasalahan

pengguna.

37

Tabel IV. 3. Persona

Persona

Demographic • Usia 18 tahun ke atas

• Jenis Kelamin: Laki-laki dan Perempuan

• Agama: Islam

Behavior • Terbiasa menggunakan smartphone untuk

melakukan komunikasi

• Terbiasa dengan aplikasi chatting

• Memiliki keterkatitan lebih tentang ilmu

keagamaan

• Memiliki kesadaran tentang pentingnya

mencari solusi dari permasalahan terkait

keagamaan

Enviroment and

Technology

• Menggunakan perangkat smartphone dengan

sistem operasi Android

• Menggunakan aplikasi chatting sebagai

media komunikasi dengan orang lain

Attitude and Activity • Kesibukan sehari-hari bekerja, kuliah atau

mengurus anak dirumah

• Senang menggunakan smartphone sebagai

alat untuk mempermudah suatu hal atau

kegiatan

Problem • Masalah yang sering dialami saat mencari

solusi permasalahan terkait fikih

menggunakan mesin pencarian yaitu sumber

yang tidak jelas

38

• Tidak leluasa mengirimkan pertanyaan yang

bersifat personal pada forum khusus yang

membahas masalah keagamaan

• Tidak memiliki waktu untuk bertanya kepada

seorang ahli agama mengenai permasalahan

• Tidak memiliki kenalan ustaz untuk bertanya

mengenai permasalahan

Needs • Mendapatkan sumber yang jelas

• Membutuhkan ustaz yang mana bidang

keilmuannya sesuai dengan topik

permasalahan

• Dapat mengirim pertanyaan secara personal

• Terdapat aplikasi yang dapat diakses kapan

saja dan dimana saja

• Memiliki pilihan ustaz yang dapat ditanya

Pada Tabel IV.3 diatas menjelaskan tentang karakteristik target pengguna

yang terdapat beberapa informasi yang akan digunakan pada tahap selanjutnya,

yang mana informasi tersebut didapatkan dari observasi hasil wawancara yang telah

dilakukan sebelumnya.

39

IV.3. Specify User Requirements

IV.3.1. Menentukan Kebutuhan Persona

Adapun kebutuhan yang dibutuhkan oleh pengguna berdasarkan

hasil persona dan wawancara. Kebutuhan pengguna didapat Needs

pengguna pada Persona yang dijelaskan pada Tabel IV.4 berikut.

Tabel IV. 4. Kebutuhan Persona

Needs Requirement

Mendapatkan sumber

yang jelas

a. Pada profil ustaz terdapat informasi lengkap

ustaz

b. Terdapat materi yang ditulis oleh ustaz

Membutuhkan ustaz

yang mana bidang

keilmuannya sesuai

dengan topik

permasalahan

a. Pada profil ustaz terdapat infromasi bidang

keilmuan yang didalami oleh seorang ustaz

dan informasi mazhab ustaz

Dapat mengirim

pertanyaan secara

personal

a. Terdapat fitur pesan untuk mengirim pesan

kepada ustaz secara personal

b. Terdapat riwayat pesan yang dapat dilihat

kembali jika diinginkan

c. Riwayat pesan dapat dihapus

Terdapat aplikasi yang

dapat diakses kapan

saja dan dimana saja

a. Aplikasi dapat diakses jika perangkat

tesambung internet

Memiliki pilihan ustaz

yang dapat ditanya

a. Terdapat daftar ustaz yang dapat ditanya oleh

pengguna

IV.3.2. Perancangan Model Mental

Model mental digunakan untuk mengidentifikasi ekspektasi dari

pengguna saat menggunakan aplikasi. Berikut model mental pada proses

konsultasi dipresentasikan menggunakan diagram affinity. Diagram affinity

digunakan untuk mengatur sebagian besar dari gagasan yang didapat dari

40

hasil Brainstorming. Diagram ini digunakan untuk menghasilakan,

mengatur, dan menggabungkan infromasi terkait dengan produk, proses,

atau masalah. Brainstorming dilakukan dengan pengguna dan tim untuk

memutuskan informasi yang akan diambil (ASQ, 2019).

Gambar IV.1. Model Mental

Pada Gambar IV.1 diatas menjelaskan bahwa model mental pada

rancangan user interface memiliki 4 ide utama yaitu Konsultasi, Baca

Materi, Simpan Materi, dan Kirim Materi. Setiap ide utama memiliki sub

ide yang merupakan tugas apasaja yang akan dilakukan oleh pengguna saat

mengerjakan tugas pada 4 ide utama.

IV.3.3. Analisis Tugas Pengguna

Pada proses Analisis Task User ini menggunakan Hirarcial Task

Analysis (HTA), pada proses ini terdapat sub-task dari task yang ada pada

model mental.

41

Gambar IV.2. HTA Konsultasi

Pada Gambar IV.2 diatas yang merupakan diagram HTA yang

menjelaskan bahwa pada saat Konsultasi, pengguna memiliki sub-task yaitu

Memilih menu Ustadz, Memilih Ustadz, dan Mengirim pesan. Sub-task

Memilih Ustaz ada beberapa tugas lainnya yang akan dikerjakan pengguna

yaitu mencari ustaz yang sedang online, melakukan preview pada profil

sang ustaz, dan terakhir memilih ustaz yang ingin ditanya. Sub-task

42

Mengirim pesan terdapat juga beberapa tugas yang akan dilakukan oleh

pengguna yaitu mengetik pesan berisikan pesan yang akan dikirim kepada

sang ustaz yang telah dipilih, setelah pengguna mengetik pesan maka pesan

tersebut akan dikirim kepada ustaz. Jika pesan pengguna langsung dibalas

oleh sang ustaz maka pengguna akan dapat langsung membaca balasan

pesan dari ustaz, namun jika pesan dari pengguna tidak langsung dibalas,

kemungkinan pengguna akan kembali ke halaman Home atau halaman

lainnya atau bahkan keluar dari aplikasi. Pada saat pengguna berada pada

halaman Home atau halaman lainnya dan ustaz membalas pesan dari

pengguna maka pengguna akan melakukan tugas memilih menu pesan dan

membuka pesan.

43

IV.3.4. Model Skenario

Tabel IV. 5. Model Skenario

No Task Sub Task Goals Deskripsi

1. Konsultasi 1. Memilih menu

2. Memilih ustaz

3. Mengirim

pesan

• Memilih menu ustaz

yang mana terdapat

daftar ustaz

• Memilih ustaz sesuai

keinginan pengguna

• Mengirimkan pesan

yang ingin ditanyakan

kepada ustaz yang

telah dipilih

Berikut alur konsultasi:

1. Pada halaman home pengguna memilih

Menu usadz

2. Setalah menu ustadz berhasil dimuat,

system akan menpilkan berbagai daftar

ustadz

3. Pengguna dapat memilih ustaz sesuai

keinginan pengguna

4. Setelah menemukan ustaz yang diinginkan

selanjutnya pengguna dapat mengirim

pesan yang ingin ditanyakan

2. Membaca

materi

1. Memilih

kategori

2. Memilih materi

• Memilih ketegori

materi yang ada pada

home

Berikut alur Membaca materi:

1. Pengguna dapat memimilih metri

berdasarkan ketegori di halaman home

44


3. Membaca

materi

• Memilih materi sesuai

keinginan pengguna

• Membaca materi yang

telah di pilih

2. Setelah pengguna memilih kategori maka

system memuat daftar materi

3. Setelah system memuat daftar materi,

pengguna dapat memilih materi sesuai

keinginan

4. Pengguna dapat membaca materi yang

telah di pilih

3. Simpan

materi

1. Memilih

materi

2. Simpan

3. Melihat materi

yang disimpan

• Memilih materi

yang ingin disimpan

• Menyimpan materi

yang telah dipilih

• Melakukan

pengecekan

terhadap materi

yang telah disimpan

Berikut alur Simpan Materi:

1. Pengguna memilih menu materi

2. Pengguna memilih materi yang akan

disimpan

3. Pengguna melakukan penyimpanan

materi

45


4. Share

materi

1. Memilih

materi

2. Mengirim

materi

• Memilih materi

yang ingin

dibagikan

• Mengirim materi

yang telah dipilih

Berikut alur Share Materi:

1. Memilih menu materi

2. Memilih materi yang akan dibagikan

3. Klik ikon share

4. Memilih aplikasi yang diinginkan

5. Memilih kontak

46

BAB V IMPLIMENTASI DAN PENGUJIAN

V.1. Produce Design Solution

V.1.1. Perancangan Wireframe

Pada bagian ini membuat sketsa antarmuka tujuannya untuk

memprediksi elemen-elemen yang terdapat pada antarmuka. Berikut Tabel

V.I sampai dengan Tabel V.3 merupakan wireframe user interface.

Tabel V.1. Wireframe Home

Wireframe Home

Deskripsi :

Halaman home merupakan

tampilan awal setelah pengguna

melakukan login aplikasi, dimana

pada halaman ini menawarkan

beberapa elemen.

Elemen :

Bars :

- Toolbar

- Navigation Bar

Content views :

- Collection view

- Image view

Control :

- Page control

Komponen :

- Gambar

- Ikon

47

Tabel V.2. Wireframe Daftar Ustaz

Wireframe Daftar Ustadz

Deskripsi :

Pada halam daftar ustadz tedapat

daftar ustaz, pada halaman ini

user dapat melakukan pencarian

ustaz dengan menggunakan fungsi

search.

Elemen :

Bars :

- Toolbar

- Search bar

- Navigation bar

Content views :

- Collection view

- Image view

Control :

- Button

Komponen :

- Gambar

- Ikon

48

Tabel V.3. Wireframe Materi

Wireframe Materi

Deskripsi :

Pada halaman materi terdapat list

materi dan fungsi search untuk

melakukan pencarian materi.

Elemen :

Bars :

- Status Bar

- Toolbar

- Search bar

Content views :

- Collection view

- Image view

- Scroll view

- Text view

Control :

- Text field

Komponen :

- Gambar

- Ikon

49

V.1.2. User Interface Design Aplikasi

Pada tahapan ini wireframe yang telah dirancang akan dijadikan

sumber rancangan User Interface. Dalam perancangan user interface

menggunakan Adobe XD. Berikut User Interface yang dihasilkan yang

dijelaskan pada Tabel V.4 berikut.

50

Tabel V.4. Desain User Interface

No. Nama Tampilan Tampilan User Interface Keterangan Elements

1. Home

Pada halaman Home terdapat ustaz yang

online, highlight materi, beberapa kategori

materi, dan terdapat info yang ditawarkan

sebagai materi edukasi untuk pengguna.

Bars :

- Status Bar

- Toolbar

- Navigation Bar

Content views :

- Collection view

- Image view

- Scroll view

- Text view

-

Control :

- Page control

- Slider

51


2. Riwayat Pesan

Pada halaman Pesan terdapat riwayat

pesan. Ketika user telah melakukan

konsultasi maka riwayat pesan hasil

konsultasi dapat dilihat kembali oleh user.

Bars :

- Status Bar

- Toolbar

- Navigation Bar

- Search bar

Content views :

- Collection view

- Image view

- Scroll view

- Text view

- Refresh control

Control :

- Text field

52


3. Daftar Ustadz

Pada halaman Ustadz terdapat daftar ustaz.

Ustaz yang online akan berada dibagian

paling atas dan button tanya akan

berawarna hijau dan ustaz yang tidak online

maka button tanya akan bewarna abu dan

tidak bisa diklik.

Bars :

- Status Bar

- Toolbar

- Navigation Bar

- Search bar

Content views :

- Collection view

- Image view

- Scroll view

- Text view

- Refresh control

Control :

- Button

- Text field

53


4. Materi

Pada halaman materi terdapat daftar materi,

pada halaman ini pengguna dapat

melakukan pencarian materi menggunakan

fungsi search dan terdapat fungsi yang

dapat mengirim dan menyimpan materi.

Bars :

- Status Bar

- Toolbar

- Navigation Bar

- Search bar

Content views :

- Collection view

- Image view

- Scroll view

- Text view

Control :

- Text field

54


5. Akun

Pada halaman akun terdapat informasi

pengguna berupa nama dan email. Ketika

pengguna menyimpan sebuah materi maka

untuk melihat materi yang telah disimpan di

Materi Tersimpan.

Bars :

- Status Bar

- Toolbar

- Navigation Bar

Content views :

- Collection view

- Text view

Control :

- Button

55

Tabel V.5. Warna yang digunakan pada Desain User Interface

No. Warna Kode Hex Deskripsi

1.

#74CBF6 Warna ini digunakan pada

komponen utama yaitu ikon,

status bar, dan nama menu

2.

#6ABD72 Warna ini digunakan pada

komponen utama yaitu pada

button dan status

3.

#000000 Warna ini digunakan pada

semua teks, ikon, dan

komponen lainnya. Setiap

penggunaan warna ini

terdapat opacity yang berbeda

4.

#FFC94D Warna ini digunakan pada

ikon dan komponen

keterangan

5.

#FF3A3A Warna ini digunakan teks

yang ada di button keluar

Pada Tabel V.5 diatas merupakan warna-warna yang digunakan dalam

pembuatan desain user interface warna tersebut mencakup warna pada komponen

utama, ikon, button, dll.

56

Tabel V.6. Ikon yang digunakan pada Desain User Interface

No. Ikon Tipe Deskripsi

1.

Logo Digunakan pada logo aplikasi

2.

Ikon Aplikasi

(Menu utama)

Digunakan sebagai ikon Home

3.

Ikon Aplikasi

(Menu utama)

Digunakan sebagai ikon Pesan

4.

Ikon Aplikasi

(Menu utama)

Digunakan sebagai ikon Ustadz

5.

Ikon Aplikasi

(Menu utama)

Digunakan sebagai ikon Materi

6.

Ikon Aplikasi

(Menu utama)

Digunakan sebagai ikon Akun

7.

Ikon Aplikasi

(Menu utama)

Digunakan sebagai ikon pada

button mengirim pesan

8.

Ikon Aplikasi Digunakan sebagai ikon Syarat dan

Ketentuan

57


9.

Ikon Aplikasi Digunakan sebagai ikon Kebijakan

Privasi

10.

Ikon Aplikasi Digunakan sebagai ikon Tentang

Aplikasi

11.

Ikon Aplikasi Digunakan sebagai ikon Materi

Tersimpan

12.

Ikon Aplikasi Digunakan sebagai ikon Pesan

dibalas

13.

Ikon Aplikasi Digunakan sebagai ikon pencarian

materi

14.

Ikon Aplikasi

(Kategori)


kategori Shalat

15.

Ikon Aplikasi

(Kategori)


kategori Taharah

16.

Ikon Aplikasi

(Kategori)


kategori Puasa

58


17.

Ikon Aplikasi

(Kategori)


kategori Zakat

18.

Ikon Aplikasi

(Kategori)


kategori Haji

19.

Ikon Aplikasi

(Kategori)


kategori Akhlak

20.

Ikon Aplikasi

(Kategori)


kategori Mumalah

21.

Ikon Aplikasi

(Kategori)


kategori Doa

Pada Tabel V.6 diatas merupakan daftar ikon yang terdapat pada desain

user interface.

59

V.2. Evaluate Designs Againts User Requirements

V.2.1. Perencanaan Testing

Tahapan ini bertujuan untuk mempersiapan usability testing agar

hasil dari pengujian sesuai dengan target. Pada penelitian ini dilakukan

pengujian dari terhadap 30 orang. Pada penelitian ini ada 2 tahap testing

yaitu SEQ dan SUS. Pada tahapan SEQ terdapat task pada skenario yang

telah ditentukan berdasarkan fungsi yang ada pada aplikasi. Selanjutnya

tahapan SUS terdapat 10 pertanyaan yang akan dijawab responden.

Berikut Tabel V.7 yang terdapat infromasi data 30 orang partisipan

yang mengikuti usability testing pada aplikasi.

Tabel V.7. Partisipan Usability Testing

No. Nama Umur Pekerjaan

R01 Muhammad Faisal Anwar 18 tahun Mahasiswa

R02 Nazwa Davanka 19 tahun Mahasiswa

R03 Arkan Tara Muhammad 22 tahun Mahasiswa

R04 Aulia Rida M 21 tahun Mahasiswa

R05 Velia Hardila 21 tahun Pegawai Swasta

R06 Siti Salamah 22 tahun Mahasiswa

R07 Fauzan Musyafa Sadad S 18 tahun Mahasiswa

R08 Dwi Ratna Sari 21 tahun Mahasiswa

R09 Betri Nellys 45 tahun Pegawai

R10 Firda Nurul Aprilianti 21 tahun Mahasiswa

R11 Pratiwi Ika Kartika 21 tahun Mahasiswa

R12 Zahran Sevicho 21 tahun Mahasiswa

R13 Firza Vernanda 21 tahun Mahasiswa

R14 Ulfi Rezkita 22 tahun Mahasiswa

R15 Alif Muhammad Ihsan 19 tahun Mahasiswa

R16 Yayat Hidayatullah 18 tahun Mahasiswa

R17 Dioni Pasadana 22 tahun Mahasiswa

R18 A Syauqi Javani 22 tahun Karyawan Swasta

60

No. Nama Umur Pekerjaan

R19 Rahmad Nurdin 19 tahun Mahasiswa

R20 Ivan Febri Aldino 21 tahun Karyawan Swasta

R21 Rukiyah 45 tahun Ibu Rumah Tangga

R22 Gede Wira 18 tahun Mahasiswa

R23 Viola Adinda 22 tahun Mahasiswa

R24 Mia Dwi Aulia 22 tahun Mahasiswa

R25 Rizki Nurdin 22 tahun Karyawan Swasta

R26 Natam 36 tahun Pegawai Swasta

R27 Sayyid Pratama Shiddiq 21 tahun Mahasiswa

R28 Suci Wulanda Agusti 22 tahun Mahasiswa

R29 Noni Dwi Pratiwi 19 tahun Karyawan Swasta

R30 Qori Helly A 33 tahun Ibu Rumah Tangga

V.2.2. SEQ

Pada penelitian ini terdapat 16 fungsi pada yang akan ditesting,

responden akan diberikan beberapa task berdasarkan 16 fungsi yang ada.

Berikut Tabel V.8 terdapat uraian dan penjelasan dari daftar 16 fungsi.

Tabel V.8. Daftar Fungsi Aplikasi

No Fungsi Nama Fungsi Task

F01 Dafar Akun Daftar akun dengan mengisi data nama

lengkap, email dan kata sandi.

F02 Login Masuk dapat menggunakan email yang telah

didaftarkan

F03 Login

menggunakan

Google

Klik button Masuk Dengan Google untuk

masuk menggunakan akun google

F04 Reset Password Klik Lupa Kata Sandi pada halaman login,

lalu mengisi email yang telah tedaftar dan

klik button Kirim Email, maka system akan

61

No Fungsi Nama Fungsi Task

mengirim verifikasi untuk mengganti

password akun

F05 Lihat Daftar

Ustadz

Memilih Ustadz pada menu untuk melihat

daftar ustadz

F06 Lihat Detail

Ustadz

Klik daftar ustaz untuk melihat profile ustaz

F07 Krim Pesan Klik button Tanya Ustadz untuk mengirim

pesan kepada ustaz

F08 Lihat Riwayat

Pesan

Memilih Pesan pada menu untuk melihat

riwat pesan

F09 Lihat Materi

melalui kategori

pada Home

Memilih kategori pada halaman Home untuk

melihat materi

F10 Lihat Materi

melalui menu

Materi

Memilih Materi pada menu untuk melihat

materi

F11 Lihat Detail

Materi

Klik pada materi yang telah dipilih untuk

melihat detail materi

F12 Simpan Materi Klik ikon lainnya (titik tiga) pada halaman

Materi untuk menyimpan materi

F13 Lihat Materi

Tersimpan

Memilih Akun pada menu, lalu klik Materi

Tersimpan untuk melihat daftar materi yang

disimpan

F14 Share Materi Klik ikon share pada halaman detail materi

untuk membagikan materi ke media lain

F15 Lihat Akun Memilih Akun pada menu untuk melihat

akun

F16 Edit Akun Klik button Edit pada halaman Akun dan

setelah melakukan perubahan pada akun

maka klik button Simpan

62

Kuesioner yang akan diberikan kepada responden terdapat tugas-

tugas pada setiap fungsi yang harus dikerjakan dan responden akan mengisi

keterangan Ya/Tidak pada saat mengerjakan tugas. Setelah semua tugas

selesai dikerjakan maka responden akan menilai tugas secara keseluruhan.

Berikut Tabel V.9 sebagai contoh tabel skenario.

Tabel V.9. Contoh Skenario pada SEQ

Tabel 1. Skenario untuk fungsi F01 – Daftar Akun

No Tugas yang dikerjakan Ya/Tidak

1. Buka aplikasi Tanya Fikih

2. Klik Belum punya akun? Daftar

3. Klik button Daftar

Secara keseluruhan tugas ini :

Sangat Sulit

Sangat Mudah

V.2.3. SUS

Pada saat pengujian tahapan post-test questionare memiliki 10

pertanyaan yang terdapat pada Tabel V.10 dibawah yang akan diajukan

kepada responden kemudian menilai dengan skala 1 sampai dengan 5.

Dengan keterangan skala sebagai berikut.

STS : Sangat Tidak Setuju

TS : Tidak Setuju

N : Netral

S : Setuju

SS : Sangat Setuju

63

Tabel V.10. Pertanyaan Testing SUS

No Pertanyaan

Skala

1 2 3 4 5

STS TS N S SS

1.

Saya pikir saya akan sering menggunakan

aplikasi ini

2. Saya menemukan fitur yang seharusnya tidak

merepotkan

3. Saya pikir aplikasi ini mudah digunakan

4. Saya pikir saya butuh bantuan seseorang

untuk bisa menggunakan aplikasi ini

5. Saya pikir fitur yang terdapat pada aplikasi

ini sudah terintegrasi dengan baik

6. Saya pikir dalam aplikasi terdapat banyak hal

yang tidak konsisten

7. Menurut saya, orang lain dapat mempelajari

cara menggunakan aplikasi ini dengan cepat

8.

Menurut saya aplikasi ini sangat sulit untuk

digunakan

9.

Saya merasa percaya diri menggunakan

aplikasi ini

10. Saya perlu belajar banyak hal sebelum saya

bisa menggunakan aplikasi ini

64

V.3. Analisis Hasil Pengujian

V.3.1. Hasil Pengujian SEQ

Tabel V.11. Hasil Pengujian SEQ

No. Responden No. Fungsional

F01 F02 F03 F04 F05 F06 F07 F08 F09 F10 F11 F12 F13 F14 F15 F16

R01 6 7 6 6 7 7 7 7 7 7 7 7 7 7 7 7

R02 6 7 7 7 7 7 7 7 6 7 7 7 7 6 7 7

R03 7 7 7 7 7 7 7 7 7 7 6 6 7 6 7 7

R04 7 7 7 7 7 7 7 7 6 7 6 6 6 7 7 7

R05 7 7 6 6 7 7 7 7 6 6 6 6 7 6 7 7

R06 7 7 7 7 7 7 7 7 7 7 7 7 7 6 7 7

R07 7 7 6 6 7 7 7 7 7 7 6 6 6 6 7 7

R08 7 7 7 7 7 7 7 7 7 7 6 6 7 6 7 6

R09 6 7 6 6 7 7 6 7 7 7 7 7 7 7 7 7

R10 6 7 6 6 7 7 7 7 7 7 7 6 7 6 7 6

R11 7 7 7 7 7 7 7 6 6 7 7 7 7 6 7 7

R12 6 6 6 7 7 7 7 7 7 7 7 6 7 6 7 7

R13 6 7 6 6 7 7 7 7 7 7 7 7 7 7 7 7

R14 7 7 6 6 7 7 7 7 7 7 7 6 7 7 7 7

R15 7 7 6 6 7 7 7 7 7 7 7 7 7 6 7 7

65

No. Responden No. Fungsional

F01 F02 F03 F04 F05 F06 F07 F08 F09 F10 F11 F12 F13 F14 F15 F16

R16 7 7 6 6 7 7 7 7 6 7 7 7 7 6 7 7

R17 7 7 7 7 7 7 7 7 6 7 7 6 7 6 7 7

R18 6 7 7 6 6 6 7 7 6 7 7 7 7 7 7 7

R19 6 6 6 6 7 7 7 7 6 7 7 7 6 6 7 7

R20 6 7 6 6 7 7 7 7 7 7 7 7 6 6 7 6

R21 7 7 6 6 7 7 7 7 7 7 6 6 6 7 7 6

R22 6 6 6 6 7 7 7 7 7 7 7 6 6 6 7 6

R23 6 7 6 6 7 7 7 7 6 7 7 6 7 6 7 7

R24 7 7 7 7 7 7 6 7 7 7 6 6 7 6 7 7

R25 6 6 5 6 7 7 7 7 6 7 7 6 6 7 7 7

R26 5 6 6 6 7 7 6 7 7 7 7 7 7 7 7 5

R27 6 7 7 6 7 6 7 7 6 7 7 7 7 7 7 7

R28 7 7 7 7 7 7 7 7 7 7 7 6 7 5 7 7

R29 7 7 7 6 7 7 7 7 7 7 7 6 7 7 7 7

R30 6 7 6 7 7 7 7 7 7 7 6 7 6 7 7 7

66

Gambar V.1. Hasil Pengujian SEQ

Dari Gambar V.1 diatas dapat dilihat bahwa tanggapan pengguna dari

pelaksanaan SEQ yang diberikan kepada pengguna berupa skenario tugas

berdasarkan fungsi yang ada pada aplikasi. Tanggapan pengguna memiliki 3 nilai

yaitu 5 (cukup mudah), 6 (mudah) dan 7 (sangat mudah) pada skala likers.

V.3.2. Hasil Pengujina SUS

Perhitungan pada SUS ada beberapa langkah, berikut langkah

perhitungan pada hasil SUS.

1) Pertanyaan urutan ganjil dan bernada positif, maka skor yang didapat

dari pengguna dikurangi dengan 1.

(skor - 1)

2) Pertanyaan urutan genap dan bernada negatif, maka skor dihitung

dengan 5 yang dikurangi dengan skor yang didapat dari pengguna.

(5 - skor)

3) Setelah melakukan perhitungan pada hasil dari nilai setiap

pertanyaan maka semua hasil tersebut dijumlahkan dan hasil jumlah

dikali 2.5.

Berikut evaluasi nilai yang telah didaptkan dari 30 responden

67

Tabel V.12. Evaluasi nilai pengujian SUS

No. Responden Q01 Q02 Q03 Q04 Q05 Q06 Q07 Q08 Q09 Q10 Nilai

R01 3 3 3 3 3 3 4 3 3 3 77,5

R02 2 3 3 4 3 3 3 3 4 3 77,5

R03 3 3 3 3 3 3 4 4 3 3 80

R04 3 4 3 3 3 3 3 3 4 3 80

R05 3 3 4 3 3 3 3 4 3 3 80

R06 3 3 3 4 3 3 4 3 3 4 82,5

R07 2 3 3 4 3 3 3 3 3 3 75

R08 2 3 3 3 3 3 3 3 3 4 75

R09 3 3 3 3 3 4 3 3 3 3 77,5

R10 3 3 3 3 3 4 3 3 3 3 77,5

R11 3 3 3 4 3 3 4 3 3 3 80

R12 2 4 3 3 3 3 3 4 3 3 77,5

R13 2 3 3 3 3 3 4 3 4 3 77,5

R14 3 3 3 3 3 3 4 4 3 3 80

R15 3 3 3 4 3 3 3 4 3 3 80

R16 2 3 3 3 3 3 4 3 3 3 75

R17 2 3 3 4 3 3 3 4 3 3 77,5

R18 3 3 4 3 3 3 3 3 3 3 77,5

R19 3 4 3 4 3 3 4 3 3 3 82,5

R20 3 3 4 3 3 3 3 3 3 3 77,5

R21 3 3 4 3 3 3 3 4 3 3 80

68

No. Responden Q01 Q02 Q03 Q04 Q05 Q06 Q07 Q08 Q09 Q10 Nilai

R22 3 3 3 4 3 3 3 3 3 3 77,5

R23 3 4 4 3 3 3 3 3 3 3 80

R24 3 3 3 3 3 3 4 3 3 4 80

R25 2 3 3 3 3 3 4 3 3 3 75

R26 3 2 3 3 3 3 3 4 2 3 72,5

R27 2 3 3 3 3 3 4 4 3 3 77,5

R28 3 3 4 3 4 3 3 3 3 3 80

R29 2 3 3 3 3 3 4 4 2 2 72,5

R30 3 3 3 3 4 3 3 4 3 3 80

Nilai SUS 78,083333

69

Tabel V.13. Hasil Pengujian SUS

No. Acceptability

Ranges

Rentang

Skor

Jumlah

Tanggapan

Presentase

1. Not Acceptable 0-50 0 0%

2. Marginal 50-70 0 0%

3. Acceptable 70-100 30 100%

Hasil pengujian SUS dapat dilihat melalui Tabel V.13 diatas mendapatkan

hasil Acceptable (dapat diterima) oleh pengguna dimana dengan persentase 100%

yang dimaksud semua pengguna pada pengujian dapat menerima aplikasi.

70

BAB VI KESIMPULAN DAN SARAN

VI.1. Kesimpulan

Berdasarkan penelitian yang dilakukan, perancangan User Interface pada

Aplikasi Konsultasi Ilmu Fikih dapat di tarik kesimpulan sebagai berikut:

1. Pada perancangan desain user interface diperlukannya informasi kebutuhan

pengguna guna keperluan analisis user experience agar desain yang

dirancang sesuai dengan kebutuhan pengguna. Pada metode UCD untuk

mendapatkan infromasi kebutuhan pengguna diperlukan wawancara

terhadap pengguna. Wawancara yang dilakukan pada penelitian ini

menggunakan metode Semi-structured Interview.

2. Desain user interface dirancang sesuai dengan hasil analisis user experience

dengan menentukan kebutuhan persona, melakukan perancangan model

mental, analisis tugas pengguna, dan merancang model skenario.

3. Pengujian dilakukan untuk melakukan evaluasi pada hasil desain

menggunakan metode SEQ dan SUS. Pengujian dilakukan terhadap aplikasi

Aplikasi menghasilkan 3 nilai SEQ yaitu 5 (cukup mudah), 6 (mudah) dan

7 (sangat mudah) yang berarti aplikasi memiliki respon cukup mudah dan

memiliki respon tertinggi yaitu sangat mudah bagi pengguna. Pada

pengujian SUS mendapat skor 78, dimana skor tersebut dapat dinyatakan

dapat diterima oleh pengguna.

VI.2. Saran

Adapun saran yang didapatkan dari penelitian perancangan user interface

Aplikasi Konsultasi Ilmu Fikih, sebagai berikut:

1. Setelah mendapatkan hasil evaluasi desain sebaiknya dilakukan proses

iterasi atau perbaikan pada desain yang memiliki nilai yang rendah agar

desain yang dihasilkan memiliki nilai usability akhir yang tinggi.

2. Pada saat pengumpulan informasi pengguna sebaiknya menerapkan tahapan

iterasi dengan cara melakukan proses pertama, kedua, dan ketiga dimana

masing-masing proses melibatkan 5 orang pengguna.

71

DAFTAR PUSTAKA

ASQ. (2019, Mei). What Is An Affinity Diagram? Retrieved from ASQ:

https://asq.org/quality-resources/affinity

Bangor, A. (2009). Determining What Individual SUS Scores Mean: Adding an

Adjective Rating Scale. Journal Of Usability Studies.

Budhiluhoer, M. (2018, Agustus 14). Membuat Prototype Mobile App dengan

Adobe XD. Retrieved from CodePolitan:

https://www.codepolitan.com/membuat-prototype-mobile-app-dengan-

adobe-xd-5b7256f52bf8e

Cabrero, D. G., Kapuire, G. K., Winschiers-Theophilus, H., Stanley, C., &

Abdelnour-Nocera, J. (2016). A UX and Usability expression of Pastoral

OvaHimba: Personas in the Making and Doing. Proceedings of the 2nd

International Conference in HCI and UX Indonesia 2016, 89-92.

Dahlan, A. (2019, Mei 20). Pengertian Ilmu Fikih. Retrieved from Wawasan

Pendidikan: https://www.wawasanpendidikan.com/2014/11/pengertian-

ilmu-fikih.html

Endsley, M. R., BoltC, B., & Jone, a. D. (2003). Designing for Situation Awareness.

Broken Sound Parkway NW: CRC Press.

Faranello, S. (2012). Balsamiq Wireframes Quickstart Guide. Birmingham B3 2PB,

UK. : Packt Publishing .

FlatIcon. (2019, juli 10). Download limit: How many icons can I download?

Retrieved from FlatIcon: https://support.flaticon.com/hc/en-

us/articles/213303205-Download-limit-How-many-icons-can-I-download-

Flora, H. K., Chande, S. V., & Wang, X. (2014). Adopting an Agile Approach for

the Development of Mobile Applications. International Journal of

Computer Applications (0975 – 8887).

Gonza lez-Perez, L., Ramí rez-Montoya, M., Garcí a-Pen alvo, F., & Cruz, J.

(2017). Usability evaluation focused on user experience of repositories

related to energy sustainability: A Literature Mapping.

Hevner, A., Ram, S., March, S., & Park, J. (2004). Design Science In Information

Systems Research. MIS Quarterly, 75-105.

72

Hoehle, H., & Venkatesh, V. (2015). Mobile Application Usability:

Conceptualization. MIS Quarterly Vol. 39 No. 2, 435-472.

Hornsby, P. (2010, Februari 8). UXmatters Show search. Retrieved from

Hierarchical Task Analysis:

https://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-

analysis.php

Huda, K. A. (2007). 4 Madzhab dalam Ilmu Fiqih. Retrieved from NU Online:

https://www.nu.or.id/post/read/10336/4-madzhab-dalam-ilmu-fiqih

Ji, H., Yun, Y., Lee, S., Kim, K., & Lim, H. (2018). An adaptable UI/UX

considering user’s cognitive and behavior. CrossMark, 1045-1058.

Jokela, T., Livari, N., Karukka, M., & Matero, J. (2003). The Standard of User-

Centered Design and the Standard Definition of Usability: Analyzing ISO

13407 against ISO 9241-11.

kominfo. (2015). Indonesia Raksasa Teknologi Digital Asia. Retrieved from

Kominfo: https://kominfo.go.id/content/detail/6095/indonesia-raksasa-

teknologi-digital-asia/0/sorotan_media

kompasiana. (2016, Mei). Mengenal Adobe XD (Experience Design), Aplikasi

Desain Antarmuka Buatan Adobe.Inc. Retrieved from Kompasiana:

https://www.kompasiana.com/prdnyk/573afb7f44afbda70d8d0675/menge

nal-adobe-xd-experience-design-aplikasi-desain-antarmuka-buatan-

adobeinc

Koza, K. A. (2011). Personas and user-centered design: How can personas benefit

product design processes? Design Studies, 417-430.

Kujala, S., & Kauppinen, M. (2004). Identifying and Selecting Users for User-

Centered Design. roceedings of the third Nordic conference on Human-

computer interaction, 297-303.

Liu, Y. (2016). Analysis and application of interface design elements for mobile

platform . 2016 International Conference on Smart City and Systems

Engineering.

Matthews, T., Judge, T., & Whittaker, S. (2012). How Do Designers and User

Experience Professionals Actually Preceive and Use Personas? Proceedings

73

of the SIGCHI Conference on Human Factors in Computing Systems, 1219-

1228.

Mithun, A., & Yfooz, W. (2018). Extended User Centered Design (UCD) Process

in the Aspect of Human Computer Interaction. International Conference on

Smart Computing and Electronic Enterprise.

Muhammad, M. R., & Muhammad, M. B. (2004). Using Information And

Communication Technology (Ict) To Disseminate The Understanding Of

Islamic Jurisprudence (Fiqh) And Juridical Opinion (Fatwa): A View Of A

Technologist.

Nguyen, T. A., & Csallner, C. (2015). Reverse Engineering Mobile Application

User Interface With Remaui. IEEE/ACM International Conference on

Automated Software Engineering, 248-259.

Nielsen, J. (2000, Maret 19). Why You Only Need to Test with 5 Users. Retrieved

from World Leaders in Research-Based User Experience:

https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-

users/

Nielsen, J. (2019, April). Mental Models. Retrieved from Nielsen Norman Group

World Leaders in Research-Based User Experience:

https://www.nngroup.com/articles/mental-models/

Peak, E. (2018, November). UI/UX Design Process Creating meaningful

experiences. Retrieved from Estern Peak: https://easternpeak.com/how-it-

works/ui-ux-design-process/

R, A., Lyon, & Koerner, K. (2016). User-Centered Design for Psychosocial

Intervention. Clin Psychol (New York), 180-200.

Shepherd, A. (2001). Hierarchical Task Analysis. New York: Taylor & Francis Inc.

Suaro, J., & Lewis, J. R. (2012). Quantifying the User Experience: Practical

Statistics for User Research.

Vredenburg , K., Mao, J.-Y., Smith, P., & Carey, T. (2002). A Survey of User-

Centered Design Practice .

Wilson, C. (2014). Interview Techniques for UX Practitioners A User-Centered

Design Method. Elsevier.

74

Wu, L., Li, J., Lei, T., & Li, B. (2016). EID vs UCD: A Comparative Study on User

Interface Design in Complex Electronics Manufacturing Systems.

YOUNG, I. (2008). Mental Models Aligning Design Strategy with Human

Behavior. New York: Rosenfeld Media.

75

LAMPIRAN

76

LAMPIRAN A ANALISIS TUGAS USER

77

HTA Baca Materi

78

HTA Simpan Materi

79

HTA Mengirim Materi

80

LAMPIRAN B DESAIN USER INTERFACE

81

Hasil Desain User Interface

No. Nama Tampilan Tampilan Antarmuka Keterangan Elements

1. Login

Login aplikasi dapat dilakukan

dengan 2 cara yaitu akun yang

sudah daftar sebelumnya atau

menggunakan akun Google. Login

menggunakan akun yang telah

terdaftar dengan cara mengisi

alamat email dan kata sandi.

Bars :

- Status Bar

Content views :

- Image view

- Text view

Control :

- Text field

- Button

82


2. Daftar Akun

Pada halaman Daftar Akun

terdapat 3 data yang harus

dilengkapi pengguna yaitu Nama

Lengkap, Email, dan Kata Sandi.

Bars :

- Status Bar

Content views :

- Image view

- Text view

Control :

- Text field

- Button

83


3. Lupa Kata Sandi

Pada halaman lupa kata sandi

pengguna diminta memsaukan

email, untuk mengirim

pemberitahuan pada email untuk

mengganti kata sandi

Content views :

- Image view

- Text view

Control :

- Text field

- Button

84


4. Detail Materi

Pada halaman detail materi

terdapat informasi detail materi,

pada halaman ini terdapat ikon

share guna untuk membagikan

materi kepada aplikasi lain.

Bars :

- Status Bar

- Toolbar

Content views :

- Image view

- Text view

Control :

- Text field

- Button

85

5. Splashscreen

Halaman splashscreen merupakan

tampilan awal saat pertama kali

membuka aplikasi.

Content views :

- Image view

- Text view

Control :

- Text field

- Button

86


6. Profile Ustadz

Halaman profile ustadz terdapat

informasi detail mengenai ustaz,

yaitu jadwal online, pesentasi

pesan dibalas, dan informasi

lainnya.

Bars :

- Status Bar

- Toolbar

Content views :

- Image view

- Text view

Control :

- Text field

- Button

87

7. Edit Profile

Halaman edit profile terdapat

informasi nama dan email yang

dapat dirubah oleh pengguna.

Bars :

- Status Bar

- Toolbar

Content views :

- Text view

Control :

- Text field

- Button

88

LAMPIRAN C SURVEI

96

LAMPIRAN D KETERANGAN WAWANCARA

PERANCANGAN USER INTERFACE BERDASARKAN USER...

Documents

Transcript of PERANCANGAN USER INTERFACE BERDASARKAN USER...