BAB 3 ANALISIS DAN PERANCANGAN SISTEM

(1)

27

BAB 3

ANALISIS DAN PERANCANGAN SISTEM

3.1. Analisis Aksesibilitas

Analisis aksesibilitas dilakukan untuk mengetahui bagaimana kondisi aksesibilitas pada situs berita online saat ini, adapun sampel yang akan diuji pada penelitian ini merupakah hasil perbandingan jumlah masalah pada 5 situs berita online yang paling sering diakses di Indonesia menurut Similar Websites pada bulan September 2019[2]. Adapun urutannya dapat dilihat pada Gambar 3.1.

Dan untuh hasil pengujian menggunakan accessibility evaluation tools yang disediakan Tawdis.net didapati hasil yang dapat dilihat pada Tabel 3.1.

Tabel 3.1 Hasil evaluasi

No Domain Masalah Peringatan

1 www.tribunnews.com 222 658

2 www.detik.com 78 465

3 www.kompas.com 76 192

4 www.idntimes.com 47 378

5 id.yahoo. 1 9

Berdasarkan tabel 3.1 dapat disimpulkan bahwa Tribunnews memiliki masalah aksesibilitas paling banyak diantara situs berita online populer lainnya.

Yang mana ini akan menjadi alasan memilih Tribunnews sebagai sampel situs berita online pada penelitian ini.

Gambar 3.1 5 Situs Berita Populer di Indonesia

(2)

3.1.1. Automated Testing

Dilakukan automated testing berdasarkan pedoman pada Web Content Accessibility Guidelines (WCAG) 2.0 dengan level kriteria A sampai level AA, menggunakan sebuah tools yang disediakan oleh Tawdis.net. Pengujian aksesibilitas menggunakan automated testing, bertujuan untuk mengetahui masalah-masalah aksesibilitas yang ada pada sebuah halaman situs berdasarkan pedoman aksesibilitas situs WCAG 2.0.

Halaman yang akan diuji pada penelitian ini antara lain adalah halaman utama Tribunnews (ww.tribunnews.com) dan halaman artikel berita Tribunnews, diuji pada tanggal 31 October 2019.

Ada 2 jenis hasil pengujian yang dapat dilihat, yaitu problem dan warning, yang mana problem merupakan masalah yang terdapat pada situs dan warning merupakan hal-hal yang berpotensi menjadi masalah. Adapun hasil dari pengujian halaman utama situs Tribunnews dapat dilihat pada Tabel 3.2.

Tabel 3.2 Hasil Pengujian Pada Halaman Utama

Perceivable

1.1 Text Alternatives

Guidelines Levels Problems Warnings Unable

1.1.1 Non-text Content A 94 117 0

1.3 Adaptable

Guidelines Level Problems Warnings Unable

1.3.1 Info and Relationships A 54 22 0

1.3.2 Meaningful Sequence A 0 32 0

1.4 Distinguishable

1.4.3 Contrast (Minimum) A 0 4 0

1.4.4 Resize Text AA 0 123 0

Operable

2.2 Enough Time

2.2.1 Timing Adjustable A 1 0 0

2.4 Navigable

2.4.1 Bypass Blocks A 0 50 0

2.4.2 Page Titled A 0 1 0

2.4.3 Focus Order A 0 23 0

2.4.4 Link Purpose(In-Context) A 2 2 0

2.4.6 Heading and Labels AA 0 161 0

2.4.7 Focus Visible AA 0 3 0

Understandable 3.3 Input Assistance

(3)

29

3.3.1 Error Identification A 0 8 0

3.3.2 Labels or Instructions A 10 0 0

3.3.3 Error Suggestion AA 0 4 0

3.3.4 Error Prevention(Legal, Financial, Data)

AA 0 12 0

Robust 4.1 Compatible

4.1.1 Parsing A 38 6 0

4.1.2 Name, Role, Value A 20 0 0

Berdasarkan Tabel 3.2, dapat diketahui bahwa halaman utama pada situs Tribunnews memiliki masalah sebanyak 219 buah pada 7 kriteria dan 568 peringatan pada 12 kriteria yang ada. Selain menguji halaman utama pada situs berita Tribunnews, dilakukan juga pengujian terhadap halaman artikel berita Tribunnews pada tanggal 31 October 2019. Adapun artikel yang digunakan dalam pengujian dapat diakses pada link berikut (http://bit.ly/32DNknE) dan untuk hasil pengujiannya dapat dilihat pada Tabel 3.3.

Tabel 3.3 Hasil Pengujian Halaman Artikel Berita

Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content A 24 44 0

1.3 Adaptable

1.3.1 Info and Relationships A 25 27 0

1.3.2 Meaningful Sequence A 0 14 0

1.4.4 Resize Text AA 0 76 0

Operable

2.1 Keyboard Accessible

2.1.1 Keyboard A 0 1 0

2.2 Enough Time

2.2.1 Timing Adjustable A 1 0 0

2.4 Navigable

2.4.1 Bypass Blocks A 0 11 0

2.4.2 Page Titled A 0 1 0

2.4.3 Focus Order A 0 7 0

2.4.4 Link Purpose(In-Context) A 9 11 0

2.4.6 Heading and Labels AA 0 34 0

Understandable 3.3 Input Assistance

(4)

3.3.1 Error Identification A 0 8 0

3.3.2 Labels or Instructions A 10 0 0

3.3.3 Error Suggestion AA 0 4 0

3.3.4 Error Prevention(Legal, Financial, Data)

AA 0 12 0

Robust 4.1 Compatible

4.1.1 Parsing A 56 14 0

4.1.2 Name, Role, Value A 23 0 0

Berdasarkan automated testing dan manual testing, dapat diketahui bahwa halaman detail berita pada situs Tribunnews memiliki masalah sebanyak 146 buah pada 7 kriteria dan 264 peringatan pada 14 kriteria yang ada.

3.1.2. Manual Testing

Dilakukan manual testing bertujuan untuk menguji kriteria sukses tambahan yang hanya ada pada Web Content Accessibility Guidelinews 2.1 dan kriteria sukses yang sudah diuji oleh automated testing tools tidak akan diuji kembali di tahap manual testing.

Halaman yang akan diuji pada penelitian ini antara lain adalah halaman utama Tribunnews (ww.tribunnews.com) dan halaman artikel berita Tribunnews, diuji pada tanggal 27 Januari 2010. Adapun hasil observasinya dapat dilihat pada Tabel 3.4.

Tabel 3.4 Hasil Pengujian Halaman Artikel Berita

Perceivable 1.3 Adaptable

Guidelines Level Problems

1.3.4 Orientation AA 0

1.3.5 Identify Input Purpose AA 1

1.4.10 Reflow AA 0

1.4.11 Non-Text Contrast AA 0

1.4.12 Text Spacing AA 0

1.4.13 Content on Hover or Focus AA 3

Operable

2.1 Keyboard Accessible

2.1.4 Character Key Short Cuts A 1

2.5 Input Modalities

(5)

31

2.5.1 Pointer Gestures AA 0

2.5.2 Pointer Cancellation A 0

2.5.3 Label in Name A 0

2.5.4 Motion Actuation A 0

Understandable Robust

4.1 Compatible

4.1.3 Status Message AA 0

3.1.3. Hasil Testing

Berdasarkan automated testing dan manual testing, adapun rangkuman masalah-masalah yang ditemukan dapat dilihat pada Tabel 3.5.

Tabel 3.5 Identifikasi Masalah Pada situs Tribunnews

No Masalah

1 Tidak adanya label pada sebuah form Guideline : 1.1.1, 1.3.1, 3.3.2, 4.1.2

Principle : Perceivable, Understandable, Robust Level : A

2 Adanya gambar yang tidak memiliki atribut “Alt”

Guideline : 1.1.1 Principle : Perceivable Level : A

3 Tautan teks dan gambar menuju ke tujuan yang sama Guideline : 1.1.1

Principle : Perceivable Level : A

4 Tidak adanya konten diantara 2 heading Guideline : 1.3.1, 2.4.1,

Principle : Perceivable, Operable Level : A

5 Tidak adanya fitur resize text Guideline : 1.4.4

Principle : Perceivable Level : AA

6 Adanya meta tag refresh pada halaman Guideline : 2.2.1

Principle : Operable Level : A

7 Adanya tautan yang kosong Guideline : 2.4.4

8 Tidak adanya heading atau label pada kategori berita Guideline : 2.4.6

9 Adanya frame yang tidak memiliki judul Guideline : 4.1.2

(6)

No Masalah Principle : Robust

Level : A

10 Tidak adanya mekanisme yang dapat memotong blok yang diulang pada beberapa halamn situs

Guideline : 2.4.1 Principle : Operable Level : A

11 Kurangnya kontras warna pada text tertentu Guideline : 1.4.3

12 Adanya hover dengan pemicu pointer pada fitur pencarian Guideline : 1.4.13

13 Adanya elemen di dalam konten berita Guideline : 1.3.2

Principle : Perceivable Level : A

3.2. Analisis Sistem

Analisis sistem bertujuan untuk menguraikan analisis dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, kesempatan- kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya.

Pada sub bab ini akan diuraikan proses analisis sistem Blinews yang merupakan ekstensi browser yang dapat memanipulasi situs dan prilaku browser untuk memperbaiki masalah-masalah aksesibilitas pada situs berita di Indonesia, yang bertujuan untuk mempermudah akses untuk Tunanetra ketika membaca berita online.

3.2.1. Seleksi Masalah

Seleksi masalah merupakan tahap dimana masalah-masalah yang ditemukan diseleksi berdasarkan batasan masalah yang ada yaitu hanya memperbaiki masalah aksesibilitas pada Document Object Model website tersebut.

Adapun hasil seleksi masalah dapat dilihat pada Gambar 3.6.

(7)

33

Tabel 3.6 Hasil Seleksi Masalah

No Masalah Hasil

1 Tidak adanya label pada sebuah form Diambil

2 Adanya gambar yang tidak memiliki atribut “Alt” Tidak Diambil 3 Tautan teks dan gambar menuju ke tujuan yang sama Tidak Diambil 4 Tidak adanya konten diantara 2 heading Tidak Diambil

5 Tidak adanya fitur resize text Tidak Diambil

6 Adanya meta tag refresh pada halaman Diambil

7 Adanya tautan yang kosong Tidak Diambil

8 Tidak adanya heading atau label pada kategori berita Diambil 9 Adanya frame yang tidak memiliki judul Tidak Diambil 10 Tidak adanya mekanisme yang dapat memotong blok yang

diulang pada beberapa halaman web

Diambil

11 Kurangnya kontras warna pada text tertentu Diambil 12 Adanya hover dengan cursor sebagai pemicu Diambil

13 Adanya elemen di tengah-tengah konten Diambil

14 Kontent Berita Yang berhalaman-halaman Diambil

3.2.2. Pemetaan Solusi

Pada penelitian ini analisis pemetaan masalah dilakukan untuk menghubungan masalah-masalah aksesibilitas yang sudah diseleksi sebelumnya dengan solusi yang akan diambil dan cara implementasinya ke sistem yang akan dibangun. Adapun penjelasan hasil analisis pemetaan solusi dapat dilihat pada Tabel 3.7.

(8)

Tabel 3.7 Masalah Yang Akan Diperbaiki

No Masalah Solusi Alternatif

1 Adanya efek hover pada fitur pencarian

Menghapus elemen yang menampung field input pencarian dan

memindahkannya.

2 Tidak adanya label pada sebuah form

Meng-injeksi tag <label> pada field input yang tidak memiliki label.

3 Tidak adanya heading atau label pada kategori berita

Meng-injeksi tag <h2> atau <label>

pada setiap kategori berita.

4 Tidak adanya fitur skip to content

Membuat navigasi dengan menginjeksi tag <nav> atau <ul> yang berisi link menuju elemen tertentu.

5 Adanya warna text yang kurang kontras

Meng-injeksi warna baru untuk elemen text yang kurang kontras

6 Tidak adanya fitur resize text Membuat fitur minimum font size pada browser

7 Adanya elemen di dalam konten berita

Meng-injeksi property css “display”

dengan value none pada elemen tersebut.

8 Halaman konten berita yang berhalaman-halaman

Menyisipkan string “?page=all” pada akhir url

Berdasarkan Tabel 3.7 akan dijelaskan secara lengkap dari masalah-masalah yang ditemukan. Berikut merupakan detail dari problem solution mapping dari masalah masalah yang sudah diseleksi.

1. Adanya efek hover pada fitur pencarian

Berikut problem solution mapping untuk masalah efek hover pada fitur pencarian dapat dilihat pada Gambar 3.2.

(9)

35

Gambar 3.2 Problem Solution Mapping 1

Berdasarkan Gambar 3.2 dapat dilihat bahwa masalah yang dihadapi adalah hover yang pemicunya adalah cursor yang mana ini akan menjadi masalah karena

(10)

pengguna dengan disabilitas netra mengoperasikan komputer hanya dengan keyboard.

Adapun proses pertama yang dilakukan adalah mengahapus elemen hover tersebut berdasarkan class atau id nya dengan menggunakan remove() lalu injeksi elemen baru yang berisikan baris fitur pencarian dan menjadikannya anak dari elemen lain dengan fungsi appendChild().

Berdasarkan Gambar 3.3 pada bagian Document Object Model, elemen baru dengan class “seacrhform” berhasil diinjeksian dan dijadikan anak ke elemen dengan class “havc search blue”.

2. Tidak adanya label pada sebuah form

Berikut problem solution mapping untuk masalah efek hover pada fitur pencarian dapat dilihat pada Gambar 3.3.

(11)

37

Berdasarkan Gambar 3.3 dapat dilihat bahwa masalah yang dihadapi adalah tag <input> yang tidak disertai label yang mana ini tidak sesuai dengan kriteria sukses 1.3.1 Info and Relationship pada WCAG 2.1 .

(12)

Karena antarmuka fitur pencarian sebelumnya sudah dibuat ulang maka tahap selanjutnya hanya menambahkan tag <label> pada fungsi innerHTML.

Berdasarkan Gambar1.7 pada bagian Document Object Model, tag <label> berhasil diinjeksian sebelum tag <input>.

3. Tidak adanya heading atau label pada kategori berita

Berikut problem solution mapping untuk tidak adanya label pada kategori berita dapat dilihat pada Gambar 3.4.

(13)

39

(14)

Berdasarkan Gambar 3.4 dapat dilihat bahwa masalah yang dihadapi adalah kategori-kategori berita yang tidak memiliki label atau heading yang mempresentasikan kategori berita tersebut.

Adapun proses pertama yang dilakukan adalah membuat elemen <label>

menggunakan fungsi createElement(), lalu mengisi labelnya dengan innerHTML dan menyisipkan elemen tersebut sebelum elemen kategori berita yang diinginkan.

Berdasarkan Gambar 3.4 pada bagian Document Object Model, elemen label yang ditambahkan berhasil diinjeksian sebelum elemen kategori berita.

4. Tidak adanya fitur skip to content

Berikut problem solution mapping untuk masalah tidak adanya fitur skip to content dapat dilihat pada Gambar 3.5.

(15)

41

Berdasarkan Gambar 3.5 dapat dilihat bahwa masalah yang dihadapi adalah tidak adanya mekanisme skip to content untuk mempersingkat waktu pengguna dengan disabilitas netra dalam mengakses elemen situs.

Adapun proses pertama yang dilakukan adalah membuat elemen <ul >

menggunakan fungsi createElement() dan mengisinya dengan daftar link yang berisi class atau id tujuan elemen.

(16)

Berdasarkan Gambar 3.5 pada bagian Document Object Model,terlihat daftar link skip to content berhasil diinjeksi dibelakang logo.

5. Adanya warna text yang kurang kontras

Berikut problem solution mapping untuk masalah text yang kurang kontras dapat dilihat pada Gambar 3.6.

(17)

43

(18)

Berdasarkan Gambar 3.6 dapat dilihat bahwa masalah yang dihadapi adalah warna teks yang kurang kontras yang mana minimal perbandingan kontras antara teks dan background memiliki 3:1.

Adapun proses pertama yang dilakukan adalah membuat elemen <ul >

menggunakan fungsi createElement() dan mengisinya dengan daftar link yang berisi class atau id tujuan elemen.

Berdasarkan Gambar 3.6 pada bagian Document Object Model,terlihat daftar link skip to content berhasil diinjeksi dibelakang logo.

6. Tidak adanya fitur resize text

Berikut problem solution mapping untuk tidak adanya fitur resize text dapat dilihat pada Gambar 3.7.

(19)

45

Berdasarkan Gambar 3.7 dapat dilihat bahwa masalah yang dihadapi adalah tidak adanya mekanisme yang dapat mengubah ukuran teks pada website.

(20)

Adapun proses pertama yang dilakukan adalah membuat antarmuka untuk pengguna agar bisa mengatur value font size dan menetapkannya sebagai minimum font size pada browser dengan menggunakan browser API fontSettings.setMinimumFontSize().

Berdasarkan Gambar 3.8 pada bagian Font Settings, nilai minimum font size berubah menjadi 16px.

7. Adanya elemen di dalam konten berita

Berikut problem solution mapping untuk adanya elemen didalam kontent berita dapat dilihat pada Gambar 3.8.

(21)

47

Berdasarkan Gambar 3.8 dapat dilihat bahwa masalah yang dihadapi adalah adanya elemen ditengah-tengah konten yang dapat menyebabkan kesalahpahaman pengguna dengan disabilitas netra.

(22)

Adapun proses pertama yang dilakukan adalah mencari class atau id elemen yang berada di tengah-tengah kontent tersebut dan menginjeksian properti display dengan value none pada class atau id tersebut.

Berdasarkan Gambar 3.8 pada bagian Document Object Model, properti berhasil diinjeksian dan antarmuka yang dihasilkan tidak ada lagi elemen di tengah- tengah konten.

8. Halaman konten berita yang berhalaman-halaman

Berikut problem solution mapping untuk konten berita yang berhalaman- halaman dapat dilihat pada Gambar 3.9.

(23)

49

Berdasarkan Gambar 3.9 dapat dilihat bahwa masalah yang dihadapi adalah konten berita yang berhalaman-halaman yang dapat mempersulit pengguna dengan disabilitas netra dalam mengakses berita.

(24)

Adapun proses perbaikannya adalah mendapatkan URL saat ini dengan document.location.href lalu menambahkannya dengan string “?page=all” di akhir URL tersebut.

Berdasarkan Gambar 3.9 pada bagian Address Bar,terlihat bahwa string

“?page=all” berhasil ditambahkan pada akhir URL dan membuat konten berita menjadi 1 halaman.

3.2.3. Analisis Manifest Ekstensi

Pada ekstensi yang akan dibangun, manifest bertugas sebagai pusat dari ekstensi dan berfungsi untuk mendeklarasikan pengaturan ekstensi yang akan dibuat seperti nama ekstensi, versi ekstensi, perizinan, komponen-komponen yang akan digunakan dan hal-hal pelengkap lainnya. Berikut komponen-komponen yang digunakan pada ekstensi browser Blinews.

1. Informasi Umum

Pada manifest ekstensi browser terdapat string yang menampung informasi- informasi umum ekstensi. Berikut informasi umum yang terdapat pada ekstensi dapat dilihat pada Tabel 3.8.

Tabel 3.8 Informasi Umum

String Value

“manifest_version” “2”

“version” “1.0”

“name” “Blinews”

“description” “Make news website more accessible”

Berdasarkan Tabel 3.8 dapat diketahui bahwa versi manifest yang akan digunakan adalah versi 2.0, versi ekstensi yang akan dibangun adalah 1.0, nama ekstensi adalah “Blinews” dan deskripsinya adalah “Make news websites more accessible”.

2. Permission

Pada manifest ekstensi browser terdapat string yang menampung periziinan yang akan digunakan ekstensi. Berikut informasi perizinan yang terdapat pada ekstensi dapat dilihat pada Tabel 3.9.

(25)

51

Tabel 3.9 Informasi Permission

String Value

“permission” “fontSettings”

Berdasarkan Tabel 3.9 dapat diketahui perizinan yang digunakan merupakan fontSetting, izin ini digunakan untuk mengakses pengaturan font pada browser Google Chrome.

3. Icons

Pada manifest ekstensi browser terdapat string yang menampung ikon yang akan digunakan ekstensi. Berikut informasi ikon yang terdapat pada ekstensi dapat dilihat pada Tabel 3.10.

Tabel 3.10 Informasi Ikon

String Value

“128” “icon128x128.png”

“48” “icon48x48.png”

“16” “icon16x16.png”

Berdasarkan Tabel 3.10 dapat diketahui ikon yang digunakan anatara lain gambar 128 x 128, 48 x 48 dan 16 x 16. Gambar ini digunakan untuk ikon ekstensi pada browser Google Chrome dan Chrome Web Store.

4. Browser Actions

Pada manifest ekstensi browser terdapat string yang menampung komponen content scripts, adapun komponen ini berfungsi untuk menginjeksi elemen ke adalam Document Object Website. Berikut informasi ikon yang terdapat pada ekstensi dapat dilihat pada Tabel 3.11.

Tabel 3.11 Informasi Browser Actions

String Value

“default_popup” “popup.html”

“default_title” “Blinews”

Berdasarkan Tabel 3.11 dapat diketahui bahwa file yang berisi antarmuka popup ekstensi adalah popup.html dan judul dari ekstensi adalah Blinews.

(26)

5. Content Scripts

Komponen content scripts pada ekstensi yang akan dibangun berfungsi untuk mengakses HTML DOM, adapun tujuannya adalah untuk mengubah antarmuka fitur pencarian, menambahkan skip link, menambahkan label dan lain- lain. Berikut format content scripts pada manifest.json dapat dilihat pada Tabel 3.12.

Tabel 3.12 Manifest Content Scripts

String Value

“matches” “*://*.tribunnews.com/*”

“css” [“content.css”]

“js” [ “content.js”]

Berdasarkan Tabel 3.12 dapat dilihat komponen content scripts hanya berlaku pada spesifik URL yaitu Tribunnews, menggunakan 1 file css yaitu content.css yang berisi properti css untuk element buatan, 1 file javascript antara lain content.js yang bertujuan untuk mengubah HTML DOM.

3.2.4. Analisis Arsitetur Sistem

Blinews merupakan ekstensi browser yang berfungsi mengubah antarmuka pada sebuah situs secara otomatis ketika situs tersebut diakses oleh pengguna.

Arsitektur ekstensi Blinews terdiri dari sisi yaitu sisi elemen antarmuka, pengaturan event dan inject html dan css di bagian content script. Adapun cara kerjanya adalah ket arsitektur sistem dari ekstensi browser tersebut dapat dilihat pada Gambar 3.5.

(27)

53

Gambar 3.10 Arsitektur sistem yang akan dibangun.

Berdasarkan gambar 3.10 adapun penjelasan tentang alur dari arsitektur sistem yang akan dibuat adalah sebagai berikut :

1. Pengguna mengakses situs berdasarkan url yang dimasukan di address bar atau dari hasil pencarian oleh google.

2. Jika url yang dibaca oleh ekstensi cocok dengan url yang sudah ditetapkan di manifest.json pada ekstensi maka ekstensi akan secara otomatis menginjeksi baris kode dari komponen content scripts.

3. Pengguna berinteraksi dengan antarmuka popup ekstensi contohnya mengubah ukuran minimum font dan klik apply.

4. Komponen Browser Action akan meneruskan message yang diberikan oleh pengguna ke popup.html lalu diteruskan ke popup.js dan pending_changes.js.

5. Ekstensi mengubah minimum font size yang digunakan pada browser chrome

6. Ekstensi menampilkan antarmuka baru ke pengguna.

(28)

3.2.5. Analisis Kebutuhan Non-Fungsional

Analisis kebutuhan non fungsional yang dilakukan meliputi analisis kebutuhan perangkat keras (hardware), analisis kebutuhan perangkat lunak (software) dan analisis kebutuhan perangkat pikir (user). Adapun analisis yang dilakukan yakni sebagai berikut.

1. Analisis Kebutuhan Perangkat Keras

Spesifikasi perangkat keras yang disarankan dalam proses pembangunan perangkat lunak dapat dilihat pada Tabel 3.13.

Tabel 3.13 Kebutuhan Perangkat Keras yang disarankan

No Kebutuhan Perangkat Keras

1 Processor minimum Intel Pentium Dual Core 2.0 GHz

2 RAM minimum 2 GB

3 Harddisk minimum 100 GB

4 Resolusi Monitor minimum 1024x768 pixels

2. Analisis Kebutuhan Perangkat Lunak

Spesifikasi perangkat lunak yang disarankan dalam proses pembangunan perangkat lunak dapat dilihat pada Tabel 3.14.

Tabel 3.14 Kebutuhan Perangkat Lunak yang disarankan

No Kebutuhan Perangkat Lunak 1 Sistem Operasi (platform bebas) 2 Situs browser (Google Chrome) 3 Screen Reader (platfrom bebas) 4 Magnifier (platform bebas)

3. Analisis Kebutuhan Perangkat Pikir

Spesifikasi pengguna yang berhubungan dengan perangkat lunak dapat dilihat pada Tabel 3.15.

Tabel 3.15 Kebutuhan Perangkat Pikir

Pengguna Tugas Pendidikan Tingkat Keterampilan yang Harus Dimiliki Pembaca

berita online

Mencari dan mengakses berita

- Dapat mengoperasikan

komputer dan mengerti cara mengakses situs dengan tingkat menengah

(29)

55

3.2.6. Analisis Kebutuhan Fungsional

Analisis kebutuhan fungsional bertujuan untuk menganalisis proses yang diterapkan dalam sistem dan menjelaskan kebutuhan yang diperlukan.

Menganalisis operasional sistem dengan mendefinisikan skenario penggunaan aplikasi.

1. Use Case Diagram

Use case diagram digunakan untuk menjelaskan fungsi apa saja yang ada di dalam sebuah sistem dan apa saja yang berhubungan dengan fungsi-fungsi tersebut.

Adapun use case diagram sistem yang akan dibangun dapat dilihat pada Gambar 3.11.

Gambar 3.11 Use Case Diagram

(30)

2. Use Case Identification

Penjelasan atas semua aktor dapat dilihat pada Tabel 3.16 sedangkan penjelasan use case dapat dilihat pada Tabel 3.17.

Tabel 3.16 Definisi Actor

Aktor Deskripsi

Pengguna Aktor yang bertugas untuk mengakses situs berita dan berinteraksi dengan user interface ekstensi

Tabel 3.17 Definisi Use Case

Use Case Deskripsi

Akses URL Use case ini merupakan fungsi untuk mengakses sebuah situs yang tersedia di browser

Ubah Antarmuka Use case ini ter-trigger otomatis ketika pengguna mengakses URL tertentu Popup Ekstensi Use case ini merupakan fitur pengaturan ukuran font yang dapat dilakukan

oleh pengguna Atur Ukuran

Minimum Font

Use case ini merupakan generalisasi dari use case popup ekstensi yang berfungsi mengatur minimum font size yang diinginkan pengguna.

Simpan Ukuran Minimum Font

Use case ini merupakan generalisasi dari use case popup ekstensi yang berfungsi menyimpan minimum font size yang pengguna tentukan

Reset Ukuran Minimum Font

Use case ini merupakan generalisasi dari use case popup ekstensi yang berfungsi menghapus pengaturan minimum font size pada browser.

3. Use Case Scenario

Skenario Use Case berfungsi untuk menjelaskan lebih detail mengenai modul-modul yang terdapat dalamekstensi. Adapun penjelasan mengenai keterangan tabel skenario Use Case berdasarkan aktor sebagai berikut :

a. Use Case Scenario Akses URL

Use case scenario akses URL menggambarkan langkah-langkah aktor untuk mengaktifkan sistem. Use Case Scenario akses URL dapat dilihat pada Tabel 3.18.

Tabel 3.18 Use Case Scenario Akses URL

Use Case Name Akses URL

Goal In Context Memungkinkan pengguna mengakses situs tertentu Preconditions Pengguna berada di home page pada browser.

Successful End Condition Pengguna berhasil mengakses situs berdasarkan URL yang dimasukan.

Failed End Condition Sistem gagal mengakses situs berdasarkan URL

Primary Actor Pengguna

Trigger Pengguna memasukan URL di kolom address bar pada browser

Main Flow Step Action

1 Pengguna membuka browser

2 Pengguna memasukan alamat situs pada address bar 3 Pengguna berhasil masuk ke halaman situs

(31)

57

a. Use Case Scenario Ubah Antarmuka

Use case scenario ubah antarmuka menggambarkan langkah-langkah aktor untuk mengaktifkan sistem. Use case scenario ubah antarmuka dapat dilihat pada Tabel 3.19.

Tabel 3.19 Use Case Scenario Ubah Antarmuka

Use Case Name Ubah Antarmuka

Goal In Context Memungkinkan ekstensi browser mengubah antarmuka situs yang diakses oleh pengguna

Preconditions 1) Pengguna belum mengakses URL tertentu.

Successful End Condition Ekstensi berhasil mengubah antarmuka sebuah situs yang diakses oleh pengguna.

Failed End Condition Ekstensi browser memiliki error Primary Actor

Trigger Pengguna memasuki halaman situs tertentu

1 Pengguna masuk ke halaman situs tertentu

2 Ekstensi secara otomatis mengubah antarmuka situs

b. Use Case Popup Ekstensi

Use case scenario Popup ekstensi menggambarkan langkah-langkah pengguna mengakses antarmuka ekstensi . Use case scenario popup ekstensi dapat dilihat pada Tabel 3.20.

Tabel 3.20 Use Case Scenario Popup Ekstensi

Use Case Name Popup Ekstensi

Goal In Context Menampilkan antarmuka popup ekstensi

Preconditions Pengguna berada dihalaman situs atau homepage.

Successful End Condition Penggunda dapat membuka antarmuka popup ekstensi Failed End Condition Antarmuka popup tidak muncul

Trigger Pengguna men-klik kiri pada icon ekstensi

1 Pengguna menklik kiri icon ekstensi 2 Antarmuka popup ditampilkan 3 Fitur minimum font size ditampilkan

c. Use Case Atur Ukuran Minimum Font

Use case scenario atur ukuran minimum font menggambarkan langkah- langkah untuk mengatur minimum font size . Use case scenario atur ukuran minimum font dapat dilihat pada Tabel 3.21.

(32)

Tabel 3.21 Use Case Scenario Atur Ukuran Minimum Font

Use Case Name Atur Ukuran Minimum Font

Goal In Context Menyimpan value ukuran font yang diinginkan.

Preconditions Value ukuran font adalah 8 pixel.

Successful End Condition Pengguna berhasil mengatur ukuran font sesuai yang diinginkan.

Failed End Condition Slider atur ukuran minimum font tidak berubah

Trigger Pengguna mengatur slider atur ukuran minimum font

1 Pengguna menklik kiri icon ekstensi 2 Antarmuka popup ditampilkan 3 Atur Slider Ukuran Minimum Font 4 Value ukuran minimum font berubah

d. Use Case Simpan Ukuran Minimum Font

Use case scenario simpan ukuran minimum font menggambarkan langkah- langkah pengguna menyimpan pengaturan minimum font size untuk browser Google Chrome. Use Case simpan ukuran font dapat dilihat pada Tabel 3.22.

Tabel 3.22 Use Case Scenario Simpan Ukuran Minimum Font

Use Case Name Simpan ukuran minimum font

Goal In Context Memungkinkan pengguna menyimpan pengaturan minimum font size pada browser

Preconditions Pengguna membuka antarmuka popup ekstensi.

Successful End Condition Pengguna menyimpan pengaturan minimum font size sesuai dengan slider yang pengguna atur

Failed End Condition Pengaturan minimum font size tidak berubah

Trigger Pengguna menklik button Simpan

1 Pengguna membuka antarmuka popup ekstensi 2 Pengguna mengatur slider ukuran font

3 Pengguna menklik button simpan

4 Pengaturan minimum font size berubah sesuai ukuran font yang telah diatur

e. Use Case Reset Ukuran Minimum Font

Use case scenario reset ukuran minimum font menggambarkan langkah- langkah pengguna mereset pengaturan minimum font size pada browser ke default.

Use Case reset ukuran font dapat dilihat pada Tabel 3.23.

Tabel 3.23 Use Case Scenario Reset Ukuran Minimum Font

Use Case Name Reset ukuran minimum font

Goal In Context Memungkinkan pengguna me-reset pengaturan minimum font size pada browser ke default

(33)

59

Preconditions Pengguna membuka antarmuka popup ekstensi.

Successful End Condition Pengguna mereset pengaturan minimum font size pada browser Failed End Condition Ekstensi gagal me-reset pengaturan minimum font size

Trigger Pengguna menklik button reset

1 Pengguna membuka antarmuka popup ekstensi 2 Pengguna menklik button reset

3 Pengaturan minimum font size pada browser menjadi default.

4. Activity Diagram

Activity diagram Menggambarkan rangkaian aliran dari aktivitas, digunakan untuk mendeskripsikan aktifitas yang dibentuk dalam suatu operasi sehingga dapat juga digunakan untuk aktifitas lainnya seperti use case atau interaksi.

a. Activity Diagram Akses URL

Activity diagram Akses URL dapat dilihat pada Gambar 3.12 yang menggambarkan alur dari aktifitas mengakses URL yang dilakukan oleh pengguna di browser.

Gambar 3.12 Activity Diagram Akses URL b. Activity Diagram Ubah Antarmuka

Activity diagram ubah antarmuka dapat dilihat pada Gambar 3.13 yang menggambarkan alur dari bagaimana ekstensi mengubah antarmuka sebuah situs.

(34)

Gambar 3.13 Activity Diagram Ubah Antarmuka c. Activity Diagram Popup Ekstensi

Activity diagram popup ekstensi dapat dilihat pada Gambar 3.14 yang menggambarkan alur dari bagaimana pengguna mengakses antarmuka popup.

(35)

61

Gambar 3.14 Activity Diagram Antarmuka Popup d. Activity Diagram Atur Ukuran Minimum Font

Activity diagram atur ukuran minimum font dapat dilihat pada Gambar 3.15 yang menggambarkan alur dari bagaimana pengguna megatur ukuran minimum font yang sudah pengguna atur untuk menjadi minimum font size pada browser.

(36)

Gambar 3.15 Activity Diagram Atur Ukuran Minimum Font e. Activity Diagram Simpan Ukuran Font

Activity diagram Simpan ukuran font dapat dilihat pada Gambar 3.16 yang menggambarkan alur dari bagaimana pengguna menyimpan ukuran font yang sudah pengguna atur untuk menjadi minimum font size pada browser.

(37)

63

Gambar 3.16 Activity Diagram Ubah Ukuran Font f. Activity Diagram Reset Ukuran Font

Activity diagram reset ukuran font dapat dilihat pada Gambar 3.17 yang menggambarkan alur dari bagaimana pengguna menyimpan ukuran font yang sudah pengguna atur untuk menjadi minimum font size pada browser.

(38)

Gambar 3.17 Activity Diagram Reset Ukuran Font 5. Class Diagram

Class diagram sistem Blinews yang akan dibangun dapat dilihat pada Gambar 3.18.

(39)

65

Gambar 3.18 Class Diagram Sistem Blinews

6. Identifikasi Class Diagram

Identifikasi setiap kelas yang ada pada class diagram dapat dilihat pada Tabel 3.24.

Tabel 3.24 Identifikasi Class Diagram

No Kelas Jenis Kelas

1 popup.html Boundary

2 popup.js Control

3 pending_changes.js Control

4 content.js Control

3.3. Perancangan Sistem

Perancangan merupakan bagian dari metodologi pembangunan suatu perangkat lunak yang harus dilakuakn setelah melalui tahapan analisis. Pada bagian ini akan dijelaskan perancangan sistem yang dimaksudkan untuk menggambarkan perbedaan antara sistem yang sedang berjalan dengan sistem yang diusulkan.

Perancangan sistem ini menggunakan pendekatan sistem terkompsuterisasi.

3.3.1. Perancangan Antarmuka

Tahapan perancangan antarmuka digunakan untuk menentukan layout dasar yang digunakan pada halaman dan juga pop up dari ekstensi browser. Hasil dari

(40)

solusi desain interaksi didapatkan gambaran sederhana atau sketsa antarmuka yang mewakili satu atau beberapa desain interaksi yang dibuat.

1. Antarmuka Beranda Website

Rancangan tampilan antarmuka halaman utama Tribunnews dengan menggunakan ekstensi browser yang dapat dilihat pada Gambar 3.19

Gambar 3.19 Antarmuka Halaman Utama

2. Antarmuka Popup

Rancangan tampilan antarmuka popup akan menampilkan fitur minimum font setting yang dapat dilihat pada Gambar 3.20

(41)

67