Laporan Akhir HCI

DOUBLE P ( Pertolongan Pertama )

Karimah Najiyah – 1206202305Mardiyah - 1206240423

LAPORAN AKHIR HUMAN & COMPUTER INTERACTION

Kata Pengantar

Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa, karena atas berkah serta

rahmat-Nya proposal mata kuliah Human Computer Interaction yang berjudul “Double P” dapat

kami selesaikan dengan baik.

Pertama kami ingin mengucapkan terimakasih kepada Prof. Bagio sebagai dosen mata kuliah

Human Computer Interaction. Kami juga ingin berterima kasih kepada semua pihak yang telah

membantu baik material maupun non material.

Laporan akhir kami ini disusun untuk memberikan penjelasan tentang desain dari aplikasi

yang telah kami buat. Laporan ini berisikan latar belakang dibuatnya aplikasi, deskripsi aplikasi,

spesifikasi aplikasi, dan manfaat aplikasi yang telah akmi buat..

Kami menyadari dalam pembuatan laporan ini terdapat banyak kekurangan. Oleh karena itu,

pemberian kesan, pesan, dan saran yang bersifat membangun sangat kami harapkan.

Penulis

Daftar IsiDaftar Isi.........................................................................................................................................3

BAB I...............................................................................................................................................4

1.1 Latar Belakang................................................................................................................4

1.2 Tujuan..............................................................................................................................5

1.3 Target Pengguna..................................................................................................................5

BAB II.............................................................................................................................................6

2.1 Double P................................................................................................................................6

2.2 Fitur-fitur Double P.............................................................................................................6

2.2.1 Menu Utama..................................................................................................................6

2.2.2. Menu Pertolongan Pertama........................................................................................7

2.2.3 Menu Informasi Obat-obatan......................................................................................8

2.2.4 Menu Informasi Nomor-Nomor Darurat.................................................................10

2.2.5 Menu About Us...........................................................................................................10

2.3 Aspek – Aspek interface....................................................................................................11

2.3.1 Tulisan.........................................................................................................................11

2.3.2 Warna..........................................................................................................................11

2.3.3 Gambar........................................................................................................................11

BAB III.........................................................................................................................................12

ANALISA.....................................................................................................................................12

3.1 Halaman Utama.................................................................................................................12

3.2 Halaman Provinsi..............................................................................................................12

3.3. Halaman List Lokasi........................................................................................................12

BAB IV..........................................................................................................................................12

KESIMPULAN............................................................................................................................12

BAB IPENDAHULUAN

1.1 Latar Belakang

Pertolongan pertama merupakan suatu tindakan pertolongan ataupun bentuk perawatan

yang diberikan secara cepat dan tepat terhadap seorang korban dengan tujuan mencegah keadaan

bertambah buruk, cacat tubuh bahkan kematian sebelum korban mendapatkan perawatan dari

tenaga medis yang resmi sehingga pertolongan pertama bukanlah tindakan pengobatan yang

sesungguhnya dari suatu diagnosis penyakit agar si penderita sembuh dari penyakit yang

dialaminya.

Pertolongan pertama merupakan hal penting, bukan hanya dikalangan aktifis palang

merah atau kalangan aktifis kesehatan saja, melainkan sangat penting dan berguna juga bagi

setiap orang karena kecelakaan atau hal-hal yang buruk bias terjadi kepada siapa saja, kapan saja,

dan dimana saja.

Double P merupakan web application, dimana alasan kami membuat aplikasi berbasis

web adalah karena kebanyakan orang tidak akan mau menginstall aplikasi yang kegunaannya

hanya bersifat sementara atau hanya dibutuhkan disaat tertentu saja atau biasanya orang akan

menginstall aplikasi tersebut, namun setelah selesai menggunakannya dan telah menemukan

informasi yang dicarinya ia akan melakukan uninstall pada aplikasi tersebut.

Sebelum Double P dibuat, sudah ada aplikasi bernama Buku Saku P3K, yang juga

menampilkan informasi mengenai pertolongan pertama, obat-obatan, dll. Akan tetapi tampilan

yang diberikan masih bersifat text based dan merupakan aplikasi berbasis android. Double P

dibuat untuk membantu setiap orang yang ingin mendapatkan informasi mengenai cara

penanganan atau pertolongan pertama pada kecelakaan atau hal-hal buruk yang terjadi namun

disajikan dengan tampilan yang menarik dan tidak lagi text based, melainkan lebih banyak diisi

dengan gambar. Tujuannya adalah agar penggunanya lebih mudah untuk mengerti dan lebih

menarik untuk dibaca.

1.2 Tujuan

Double P dibuat dengan harapan dapat membantu masyarakat umum, khususnya

masyarakat Indonesia dalam menemukan informasi mengenai cara yang dilakukan untuk

melakukan pertolongan pertama pada kasus kecelakaan. Selain itu dengan desain yang kami buat

diharapkan Double P dapat mempermudah dalam melakukan pencarian informasinya, karena

desain yang kami buat user friendly.

1.3 Target Pengguna

Double P dibuat untuk ditawarkan pada semua kalangan, baik pelajar SMP, pelajar SMA,

mahasiswa, remaja, dan orang dewasa. Informasi yang disajikan oleh aplikasi kami masih

menggunakan Indonesia sehingga target kami untuk sementara ini masih untuk orang Indonesia

saja.

BAB IIDESKRIPSI DAN DESAIN

2.1 Double P

Double P merupakan aplikasi berbasis web dimana aplikasi ini akan menampilkan

berbagai macam informasi yang berkaitan dengan bagimana cara untuk melakukan pertolongan

pertama pada situasi darurat atau pada kasus kecelekaan. Bukan hanya itu saja, Double P juga

memiliki beberapa fitur yaitu :

Informasi pertolongan pertama

Informasi obat-obatan

Informasi nomor-noor darurat

2.2 Fitur-fitur Double P

2.2.1 Menu Utama

Pada menu utama akan ditampilkan Judul dari aplikasi yaitu “Double P”. Pada bagian kanan atas akan menampilkan ikon-ikon yang berfungsi untuk membawa pengguna

kehalaman informasi pertolongan pertama, halaman informasi obat-obatan, atau halaman informasi kontak kami

2.2.2. Menu Pertolongan Pertama

Pada menu ini terdapat beberapa pilihan kasus kecelakaan atau penyakit-penyakit

yang sering terjadi dalam situasi mendadak dan butuh pertolongan secepatnya, seperti

asthma, keseleo, luka luar, pingsan, mimisan, dan tersedak. Selanjutnya user akan memilih

informasi apa yang ingin ia ketahui, dengan cara menekan (klik) pada gambar yang

diinginkan.

Hasilnya akan muncul informasi mengenai Gejala yang biasa terjadi pada penyakit itu

serta informasi mengenai tindakan yang dapat dilakukan untuk penyakit tersebut. Dapat

dilihat pada Gambar 3. Informasi Penyakit Asthma.

2.2.3 Menu Informasi Obat-obatan

Pada menu ini terdapat beberapa pilihan obat-obatan yang sering kita jumpai, baik di

Apotek atau toko-toko/warung disekitar kita seperti Paracetamol, Betadine, Oralit, Norit,

Inhaler, dan Dermacolin. Selanjutnya user akan memilih informasi apa yang ingin ia ketahui,

dengan cara menekan (klik) pada gambar yang diinginkan.

Hasilnya akan muncul informasi mengenai komposisi atau kandungan yang ada pada

obat tersebut serta informasi mengenai indikasi atau fungsi dari obat tersebut

(menyembuhkan penyakit apa). Dapat dilihat pada Gambar 5. Informasi Obat Paracetamol.

2.2.4 Menu Informasi Nomor-Nomor Darurat

Pada menu ini menampilkan daftar nomor-nomor darurat seperti nomor telepon

ambulans, polisi, dan pemadam kebakaran.

2.2.5 Menu About Us

Pada menu ini menampilkan beberapa informasi tentang si pembuat aplikasi ini,

dimana informasi ini berupa Alamat, Account Line, Askfm, dan Instagram.

2.3 Aspek – Aspek interface

2.3.1 Tulisan

Aplikasi Double P menggunakan jenis font glyphicons- halflings regular dan ukuran font

disesuaikan dengan ukuran dari container dan windows.

2.3.2 Warna

Aplikasi Double P menggunakan komposisi warna dasar hijau dan putih untuk setiap

background pada menunya. Warna ini dipilih karena kesehatan identik dengan warna hijau,

sedangkan kesehatan identik pula dengan kebersihan, dimana putih merupakan warna yang

mengibaratkan kebersihan.

2.3.3 Gambar

Aplikasi Double P menggunakan Gambar dengan tipe kartun untuk mnu pertolongan

pertamanya, karena kebanyakan penyakit jika ditampilkan kedalam gambar aslinya akan

membuat orang yang melihatnya menjadi risih atau jijik, khususnya yang mengandung unsure

darah. Sehingga untuk menghindari itu kami menggunakan jenis gambar kartun atau karikatur.

Sedangkan pada menu obat-obatan kami menggunakan gambar asli, hal ini diharapkan akan

mempermudah pengguna untuk menyesuaikan informasi dari aplikasi kami dengan obat-obatan

yang dimilikinya.

BAB III

ANALISIS3.1 Analisis Design

3.1.1 Halaman Utama

Pemilihan warna kami adaptasi dari template yang telah di berikan oleh padatemplate bootstrap. Alasan kami tidak menggantinya adalah warnanya yang soft / pasta yang tidak membuat mata berakomodasi maksimum. Pada pojok kiri atas terdapat kepanjangan dari Double P yaitu pertolongan pertama. Pada pojok kanan atas terdapat pilihan menu berupa icon :

1. Icon orang yang sedang menolong : merepresentasikan bahwa icon tersebut menunjukkan pertolongan pertama ,sehingga pengguna akan dibawa pada section pertolongan pertama.

2. Icon obat : merepresentasikan bahwa icon tersebut akan membawa user pada menu obat-obatan.

3. Icon contact : merepresentasikan bahwa icon tersebut akan membawa user ke section yang berisi contact, namun contact disini adalah contact yang berkaitan dengan pertolongan pertama itu sendiri.

Pada bagian tengah menampilkan icon tas dokter yang melambangkan kesehatan dan peralatan kesehatan sesuai dengan materi yang ada pada web yaitu pertolongan pertama. Selain itu pada bagian bawah judul memuat konten utama yang disajikan oleh web ini, sehingga pengguna mengetahui konten apa saja yang akan disajikan oleh web ini.

judul sub program

Judul program

Icon section menu

Konten Utama

3.1.2 Section Pertolongan Pertama

Pada section pertolongan pertama akan ditampilkan macam-macam penyakit/kecelakan yang membutuhkan pertolongan pertama, pada section ini ditampilkan dengan gambar yang besar dengan keterangan dari gambar tersebut , hal ini diterapkan karena tidak semua oramg mengetahui maksud gambar. Namun sebagian besar dari orang-orang terpelajar akan langsung dapat mengenali jenis penyakit/kecelakaan yang dimaksud oleh gambar.

Fitur ini akan mempop-up keterangannya dengan cara diklik , gambar yang diklik akan menampilkan keterangannya sebagain berikut

Menu obat yang akan zoom in jika di klik

Saat gambar diklik pop up tentang penyakit tersebut akan muncul , kami memilih fitur pop-up disebabkan lebih menghemat waktu dari pada me-loading halaman web yang baru.

3.1.3 Section Medicine

Gejala

Tindakan

3.1.4 Section Nomor Darurat

3.1.5 Section Contact Pemilik Website

3.2 Analisis Usability3.3. Analisis Ergonomic3.4 Analisis Task

BAB IV

KESIMPULAN

Laporan Akhir HCI

Documents

Transcript of Laporan Akhir HCI