Laporan Akhir Competition Seeker

LAPORAN ASSIGNMENT HUMAN AND COMPUTER INTERACTIONS

COMPETITION SEEKER

<<COMP6176>>

Disusun oleh :

Daniel - 2101634911

Gary Nico - 2101641910

Gregorius Natanael Elwirehardja - 2101629022

Jason - 2101700371

Juan Hebert - 2101633070

        

                                    

BINUS UNIVERSITY

JAKARTA

2019

KATA PENGANTAR

Puji dan syukur kami panjatkan ke hadirat Tuhan Yang Maha Esa karena atas berkat yang telah Ia limpahkan, kami berhasil menyelesaikan Laporan Assignment Human and Computer Interaction ini. Makalah ini berisi tentang laporan project kami, yaitu CompetitionSeeker. Kami sebagai penyusun laporan ini berharap laporan ini bisa bermanfaat bagi pembaca.

Jakarta, 14 Juni 2019

                 Penyusun

DAFTAR ISI

Kata Pengantar.....................................................................................................................	1
Daftar Isi..............................................................................................................................	2
Bab I Pendahuluan...............................................................................................................	3
Latar Belakang...........................................................................................................	3
Rumusan Masalah......................................................................................................	3
Tujuan.......................................................................................................................	3
Bab II Landasan Teori.........................................................................................................	4
User Interface dan User Experience..........................................................................	4
Eight Golden Rules dari Ben Schneiderman.............................................................	4
Adobe XD.................................................................................................................	5
Bab III Laporan Pelaksanaan Kegiatan...............................................................................	6
Deskripsi Produk......................................................................................................	6
Segi Bisnis................................................................................................................	6
Segi UI/UX...............................................................................................................	7
Bab IV Kesimpulan.............................................................................................................	11
Daftar Pustaka......................................................................................................................	12

BAB I

PENDAHULUAN

A.    Latar Belakang

Hasil survei yang dilakukan sebuah perusahaan analisis dan riset pasar aplikasi mobile bernama “App Annie” pada tahun 2017, menunjukkan bahwa rata-rata pengguna smartphone di Indonesia menghabiskan waktu mencapai hampir 250 menit dalam sehari untuk berinteraksi dengan smartphone. Hal ini menunjukkan bahwa smartphone sudah begitu dekat dengan kehidupan manusia. Dapat dikatakan bahwa bisnis pada platform smartphone memiliki pangsa pasar yang sangat luas. Karena itu, kelompok kami pun memutuskan untuk membuat suatu Mobile Application untuk memenuhi tugas mata kuliah ini.

Di lain pihak, saat ini di sekitar kita juga kita bisa melihat banyak perlombaan. Salah satu elemen vital dalam perlombaan adalah peserta. Umumnya, salah satu kesulitan dalam mengadakan lomba adalah mencari partisipan lomba. Karena itulah dibutuhkan media partner. Namun penggunaan metode ini juga tidak sepenuhnya efektif karena ada metode penyebaran informasi yang lebih efektif lagi, yaitu internet dan mobile application.

Solusi yang dapat kami tawarkan untuk masalah ini adalah membuat suatu mobile application untuk menyebarkan informasi perlombaan. Model aplikasi yang kami pikirkan adalah e-commerce. Mengapa e-commerce? Pada tahun 2018 saja, tercatat bahwa Indonesia menduduki peringkat pertama untuk negara dengan pertumbuhan e-commerce tercepat di dunia dengan angka pertumbuhan mencapai 78%. Hal ini berarti bisnis berbasis e-commerce­ memiliki potensi yang sangat besar untuk menarik konsumen.

Karena itu, kami pun memutuskan untuk membuat suatu aplikasi mobile e-commerce untuk memasarkan perlombaan. Namun yang menjadi tantangan bagi kami adalah membuat desain User Interface dan User Experience yang baik.

B.     Rumusan Masalah

1.      Bagaimana desain UI/UX yang baik untuk suatu mobile application?

C.    Tujuan

1.      Membuat e-commerce mobile application untuk memasarkan lomba dengan desain UI/UX yang baik.

BAB II

LANDASAN TEORI

A.    User Interface dan User Experience

User Experience Design atau UX design adalah desain yang dirancang untuk meningkatkan kesenangan dan kepuasan pengguna dalam interaksi antara pengguna dan produk. Dengan kata lain bentuk desain ini berkaitan dengan perasaan pengguna terhadap kinerja produk, secara teknis maupun desain. Aplikasi dengan UX design yang baik akan membuat aplikasi mudah digunakan dan tidak membingungkan bagi pengguna.

User Interface Design atau UI design adalah desain antarmuka produk. UI design lebih berkaitan dengan seberapa menarik dan interaktif tampilan suatu aplikasi. Aplikasi dengan UI design yang baik akan membuat pengguna merasa tertarik dengan tampilannya yang terkesan atraktif. Kombinasi penggunaan warna, bentuk, gambar, animasi, tipografi, dan sebagainya sangat berperan dalam menentukan kualitas UI design.

B.     Eight Golden Rules dari Ben Schneiderman

Dalam bukunya yang berjudul “Designing the User Interface”, Ben Schneiderman mengemukakan 8 aturan yang perlu diikuti interface designer dalam membuat interface design yang baik. Kedelapan aturan tersebut adalah :

·         Strive for Consistency

Desain yang digunakan antara 1 halaman dengan halaman lainnya dalam suatu aplikasi perlu dibuat konsisten. Artinya dasar desain yang digunakan, seperti warna, gambar, dan lainnya sebaiknya dibuat konsisten atau tidak jauh berbeda. Hal ini perlu dilakukan agar pengguna aplikasi menyadari bahwa mereka masih membuka aplikasi yang sama.

·         Cater to Universal Usability

Pengguna suatu aplikasi pastinya bervariasi, terutama dari segi latar belakang. Karena itu konten dari aplikasi sebaiknya dibuat sedemikian rupa agar macam-macam pengguna mengerti konten dan kegunaan aplikasi tersebut. Misalnya dari segi bahasa.

·         Offer Informative Feedback

Aplikasi yang baik akan menunjukkan respon terhadap action yang dilakukan pengguna agar pengguna menyadari bahwa apa yang ia lakukan sudah diterima dan dikenali aplikasi.

·         Design Dialogs to Yield Closure

Aplikasi yang membutuhkan rangkaian action dari pengguna juga perlu menunjukkan respon agar pengguna menyadari bahwa action yang harus dilakukannya sudah selesai.

·         Prevent Errors

Dalam suatu aplikasi, diperlukan instruksi sederhana agar tidak terjadi error dalam jalannya aplikasi. Misalnya instruksi pengisian formulir registrasi member.

·         Permit Easy Reversal of Actions

Aturan ini sangat penting untuk menunjang segi UX. Dalam setiap aplikasi sangat diperlukan opsi ”undo” atau pembatalan suatu action. Hal ini tentu akan sangat berguna seandainya pengguna melakukan kesalahan action secara sengaja maupun tidak.

·         Support Internal Locus of Control

Ada pengguna aplikasi yang ingin bisa mengatur jalannya proses, serta desain aplikasi. Karena itulah diperlukan fitur yang memungkinkan pengguna untuk mengatur sendiri tampilan yang disukainya untuk menunjang segi UX.

·         Reduce Short-term Memory Load

Yang dimaksud dalam aturan ini adalah aplikasi memerlukan sistem yang tidak mengharuskan pengguna mengingat berbagai data. Misalnya ketika pengguna memasukkan data barang, bisa dibuatkan fitur ”Suggestion” agar pengguna tidak harus hafal nama barang tersebut.

C.    Adobe XD

Adobe XD adalah aplikasi yang dirilis oleh Adobe yang digunakan untuk membuat prototype aplikasi. Aplikasi yang dirilis pada bulan Februari tahun 2019 ini memungkinkan pengguna untuk membuat desain aplikasi dengan fitur-fitur interaktif. Aplikasi ini juga memungkinkan pengguna untuk membuat prototype aplikasi dengan berbagai platform. Beberapa platform prototype yang tersedia di antaranya adalah Windows, Mac, iOS, serta Android.

BAB III

LAPORAN PELAKSANAAN KEGIATAN

A.    Deskripsi Produk

Mobile application yang kami buat ini bernama “Competition Seeker”. Aplikasi ini merupakan sejenis aplikasi e-commerce, namun produk yang dijual adalah perlombaan. Pengguna bisa mendaftarkan dirinya untuk berbagai lomba yang terdaftar dalam aplikasi kami.

B.     Segi Bisnis

Dari segi bisnis, kami sudah merancang BMC untuk produk kami. Menurut kami, aplikasi ini memiliki potensi juga di dunia bisnis dikarenakan oleh tidak banyaknya kompetitor untuk aplikasi serupa. Selain itu, ramainya pengguna mobile application jika membuat kami memprediksi bahwa produk ini akan sukses dari segi bisnis.

C.    Segi UI/UX

Tampilan Splash Screen

Gambar di samping adalah tampilan ketika aplikasi dibuka. Desain sederhana dipilih untuk digunakan agar perhatian pengguna bisa difokuskan pada nama aplikasi untuk tujuan branding.

Tampilan landing page setelah splash screen, yaitu halaman Register and Login

Seperti mobile application pada umumnya, ketika user membuka aplikasi ini, mereka harus melakukan login atau register. Mereka bisa melakukan login dengan account google ataupun facebook mereka.

Tampilan halaman Register

Berikut ini adalah tampilan halaman untuk Register. User harus mengisi semua data tersebut, Jika ada data yang tidak sesuai, maka akan ditampilkan message seperti pada gambar-gambar berikut ini.

Tampilan Home Page aplikasi

Setelah proses login/register selesai, halaman di samping akan terbuka, yaitu home page dari aplikasi ini. Pada halaman ini terdapat slider pada bagian atas, seperti yang ditunjukan oleh tanda panah di bawah ini. User juga bisa menekan gambar lomba yang ingin dilihatnya dan akan tampil halaman seperti pada berikut ini (pada halaman berikutnya).

Tampilan halaman Search

Pada halaman Search, akan ditampilkan interface berikut ini. User bisa melakukan searching untuk perlombaan yang diminatinya.

BAB IV

KESIMPULAN

            Project ini berhasil kami selesaikan dengan menggunakan aplikasi Adobe XD. Prototype yang kami buat ini juga memiliki interface design yang sudah kami sesuaikan dengan “Eight Golden Rules” yang dibuat oleh Ben Schneiderman walaupun belum semua aturan tersebut kami terapkan. Menurut kami, aplikasi “Competition Seeker” yang kami buat ini sudah memiliki desain yang bagus, baik secara User Interface, maupun User Experience.

DAFTAR PUSTAKA

Beaumont, D. (2019, Februari 9). February 2019 Release of Adobe XD: More Love for Photoshop and Illustrator, Audio Narration, and Increased Language Support. Diambil kembali dari Adobe Blog: https://theblog.adobe.com/xd-february-2019-update-integrations-language-support-narration/

Ghaoui, C. (2006). Encyclopedia of Human Computer Interaction. Hershey: Idea Group Reference.

Maulana, R. (2018, Januari 23). App Annie: Durasi Penggunaan Aplikasi Mobile Indonesia Tertinggi di Dunia. Diambil kembali dari TechInAsia: https://id.techinasia.com/app-annie-report-2017-indonesian-app-market-potentials

Pratama, G. (t.thn.). Apa Perbedaan User Experience (UX) dan User Interface (UI)? Diambil kembali dari Belajarkoding: https://belajarkoding.net/apa-itu-user-experience-ux-dan-user-interface-ui/

Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2018). Designing the User Interface. Harlow: Pearson Education Limited.

Widowati, H. (2019, April 25). Indonesia Jadi Negara dengan Pertumbuhan E-Commerce Tercepat di Dunia. Diambil kembali dari Katadata: https://databoks.katadata.co.id/datapublish/2019/04/25/indonesia-jadi-negara-dengan-pertumbuhan-e-commerce-tercepat-di-dunia