BAB I Pendahuluan

1.1 Latar Belakang

Perkembangan teknologi yang diikuti dengan pengembangan interface
(antar muka) yang dibuat oleh para praktisi / pengembang, baik perangkat keras
maupun perangkat lunak semakin pesat dan menyebar ke seluruh dunia. Untuk
membuat program aplikasi komputer seorang programmer atau analis harus
membuat tampilan yang menarik dan baik untuk digunakan. Rancangan tampilan
bisanya dibuat dengan tahapan-tahapan, salah satu tahapan yaitu dengan membuat
rancangan layar
Tidak hanya program aplikasi berbasis desktop yang dapat dibuat namun
program aplikasi dapat dibuat untuk perangkat mobile yang paling dekat dengan
masyarakat pengguna. Perkembangan platform aplikasi mobile android menjadi
sebuah sistem operasi yang populer di dunia. OS hasil rancangan raksasa Google
ini telah membius banyak pengguna smartphone yang tidak bisa dipungkiri lagi
dengan segala kelebihan fitur yang dimiliki android.
Open source dan berbiaya rendah serta bahasa pemrograman yang juga
dapat dipelajari merupakan salah satu alasan mengapa para pengembang aplikasi
mobile memilih sistem android. Termasuk framework React Native menjadi salah
satu pilihan yang dianggap tepat karena fitur yang disediakan oleh library react
native digadang-gadang memiliki performa yang sama dengan native android
(Java) dan atau native IOS (objG).
Expo merupakan suatu set SDK tools, library dan service yang digunakan
dalam pengembangan aplikasi berbasis react native. Pada dasarnya Expo dan react
native itu sendiri sama hal dalam menuliskan kode program akan tetapi pada Expo
dapat lebih cepat karena beberapa tools, library, dan services sudah disediakan oleh
Expo itu sendiri. Menyajikan struktur coding yang simpel, library, komponen dan
file extension bersumber dari GitHub yang cukup lengkap, mode debug dapat
langsung dijalankan pada device expo itu sendiri dan lain sebagainya.
Berdasarkan pengembangan tersebut, maka sangat penting halnya mengenai
keberadaan dokumentasi bahasa pemrograman mobile tersebut untuk dapat
dipelajari dan dicoba oleh para user. Tanpa adanya support system dari dokumentasi
tersebut maka akan susah untuk dapat mengembangkan tujuan perusahaan tersebut
menciptakan framework itu.
Oleh karena itu penulis menganalisis dokumentasi website dari framework
react native dengan tujuan untuk memberikan gambaran tentang interaksi manusia
terhadap keberadaan web tersebut dan menyajikan usability system framework
react native bagi kalangan para pengembang aplikasi mobile
1.2 Rumusan Masalah
1.2.1 Bagaimana usability web dokumentasi reactnative.dev dari system framework
react native?
1.2.2 Bagaimana design User Experience yang diberikan oleh web reacnative.dev
tersebut terhadap interaksi manusia dan komputer?
1.2.3 Bagaimana design User Interface yang diberikan oleh web reactnative.dev
tersebut terhadap interaksi manusia dan komputer?
1.2.4 Bagaimana struktur dari pada web reactnative.dev dari segi interaksi manusia
dan komputer?

1.3 Tujuan
1.3.1 Untuk mengetahui usability web dokumentasi reactnative.dev dari system
framework react native
1.3.2 Untuk mengetahui User Experience yang diberikan oleh web reacnative.dev
tersebut terhadap interaksi manusia dan komputer
1.3.3 Untuk mengetahui User Interface yang diberikan oleh web reacnative.dev
tersebut terhadap interaksi manusia dan komputer
1.3.4 Untuk mengetahui struktur dari pada web reactnative.dev dari segi interaksi
manusia dan komputer
BAB II Kajian Analisis ReactNative.Dev
2.1 Usability
2.1.1 Page Design
Page Design adalah salah satu desain halaman yang memuat berbeda beda
konten di setiap page dan memiliki tujuan dan fungsi dalam penyampaian
informasi yang terpisah ke dalam suatu sub bagian. Pembagian sub bagian dalam
suatu situs akan sangat membantu para pengguna untuk mencapai tujuannya
dalam mencari informasi dan sebagainya. Berdasarkan hasil tangkap layar page
design yang dimiliki oleh react native developer ini, tepatnya pada page
dokumentasi design khususnya layout with flexbox, menerangkan bahwa page
ini memberikan informasi mengenai teori layout dengan menggunakan flexbox.
Tidak hanya teori saja, page ini juga memberikan contoh penerapan Code
program react native berbasis Java Script yang dinamis. Pengunjung dapat
membaca, mencoba, mengubah dan menyalin contoh code yang diberikan.
Theme color pada page ini dapat diubah dan diberikan 2 tema yang paling
banyak disukai para pengguna, yaitu theme color warna cerah dengan warna
dasar putih, dan theme color warna gelap dengan warna dasar hitam keunguan
seperti tema warna drakula theme

2.1.2 Link
Website yang penulis analisis dapat dilihat pada link berikut :
https://reactnative.dev/
2.1.3 Content Design
Content design adalah praktik yang dijalankan untuk mengembangkan
elemen front-end dari sebuah website. Konten ini berupa hasil riset
pengembangan yang menunjukkan bahwa konten tersebut dibutuhkan oleh para
pengguna. Disiplin pembuatan konten ini merujuk pada kebutuhan pengguna
khususnya para programmer atau mobile apps developer. Konsep yang
diberikan telah terencana by design. Kesuksesan adanya website ini dipengaruhi
oleh treatment dan proses pada content designer untuk meracik konten yang
paling sesuai dengan kebutuhan pengguna.
Proses yang dilakukan untuk meracik konten website ini adalah dengan cara
riset untuk menentukan kebutuhan user, teknik yang digunakan untuk
memahami pengguna adalah melalui teknik user journey. User journey ini
diartikan sebagai perjalanan pengguna ketika melakukan sesuatu di website.
Berdasarkan analisis user journey tersebut, content designer dapat menentukan
channel yang cocok
Channel yang cocok untuk para pengguna react native berdasarkan analisis
user journey adalah GitHub.com. GitHub digunakan oleh para pengguna untuk
saling share repository dari setiap Code Primitif. Content yang disematkan pada
website react native tidak selalu sebuah tutorial dokumentasi tertulis. Melainkan
juga share study case, dan pengalaman setelah mencoba menggunakan bahasa
pemrograman ini.

2.1.4 Site Design

Site design adalah sekelompok desain halaman yang merupakan induk

dengan nama domain tersendiri. Representasi dari site design ini lebih
mengarah ke landing atau screen home yang akan memberi tahu secara singkat
untuk para pengunjung tentang fungsi dan tujuan adanya website ini.
 Tata cara designer memperkenalkan fungsi dan tujuan adanya website ini
yaitu memberikan kalimat punchline. Seperti yang tertera pada laman landing
dikatakan bahwa “Create native apps for Android and iOS using React”.
Kalimat ini sangat jelas mengartikan bahwa website ini diperuntukkan untuk
para programmer mobile apps developer dimulai dari basic sampai dengan
profesional baik Android atau iOS apps developer

2.2 User Experience

2.2.1 Konseptual User Experience
User Experience atau UX adalah pengalaman pengguna dalam proses
interaksi dengan aplikasi atau perangkat lunak untuk memberikan kemudahan
bagi pengguna. Atas dasar pembelajaran pengalaman pengguna, hal ini mampu
memaksimalkan segala aspek mulai dari fitur, design, konten yang dapat
membantu pengguna untuk mencapai tujuan saat berinteraksi dengan aplikasi.
User experience juga memiliki tujuan untuk mendukung kinerja produk, yaitu:

• Memberikan pengalaman yang baik dan menyenangkan melalui

pemberian informasi yang jelas, tampilan menarik dan mudah untuk
digunakan.
• Membantu user dalam mendapatkan informasi dan tujuan pada produk.
Produk diharapkan mampu menjawab dan memberikan informasi yang
dibutuhkan oleh pengguna
Pemecahan suatu masalah dalam user experience dapat diterapkan beberapa
metode yakni:

• User Centered Design. Metode ini berpusat pada pengguna, dengan cara
melakukan diskusi bersama pengguna langsung. Berdasar hasil
kebutuhan yang diutarakan oleh pengguna maka tim designer dan tim
non design yaitu programmer akan menggunakan Spesifikasi Kebutuhan
Perangkat Lunak atau SKPL sebagai pedoman dalam pengembangan
suatu produk
• Activity Centered Design. Metode ini berpusat pada aktivitas yang
kemungkinan akan di lakukan. Dalam menganalisis menggunakan
metode ini dapat menerapkan teori task analyst, memahami tindakan,
dan operasional kerja.
• Keep it Simple Stupid. Metode ini berfokus pada kesederhanaan design.
Experience yang diberikan mengutamakan dalam pembuatan desain
yang sesederhana mungkin, namun memiliki tampilan yang baik serta
mendukung pengalaman pengguna yang efektif
• Goal Directed Design. Metode ini berpusat pada desain adalah kunci
utama. Cara yang dapat dilakukan adalah mewawancarai langsung
 beberapa user nantinya, dari data tersebut diolah langsung ke dalam
sebuah desain aplikasi

2.2.2 User Experience React Native Dev

Berdasarkan tujuan dari pembuatan website ini adalah memberikan
dokumentasi bahasa pemrograman kepada pengguna mobile apps developer
maka metode yang digunakan dalam pemecahan permasalahan yang
berhubungan dengan interaksi antara pengguna terhadap website adalah
menggunakan metode user centered design dan activity centered design.
Dari website ini, designer memberikan pengalaman kepada pengguna
selayaknya dalam buku tutorial yang menjelaskan step by step dokumentasi
bahasa pemrograman berbasis Java Script ini, dapat dilihat pada gambar berikut
ini.

Gambar tersebut berfokus pada metode activity centered design yang secara
jelas memberikan Outline atau Roadmap dari dokumentasi yang memberi tahu
para pengunjung atau pengguna, dimulai dari bagian mana yang harus di pahami
dan dilaksanakan oleh pengguna. Pemberian outline yang dibagi dalam sub bab
ini sangat memudahkan untuk para user dalam mencari informasi dengan cepat.
Terdapat fitur yang sangat menyenangkan untuk para pengguna yaitu fitur
untuk mencoba, mengubah dan menyalin contoh code primitif yang diberikan,
dapat dilihat pada gambar berikut ini.
 Berbagai fitur yang dapat di coba langsung dalam web ini sangat membantu
para user untuk belajar. Tidak hanya di browser saja kita bisa melakukan ini,
namun dapat di coba di dalam Snack Expo Io, emulator Android Virtual Device
(AVD) dari Android Studio dan aplikasi Expo Go untuk aplikasi mobile. Website
ini telah diupayakan dapat dijalankan di berbagai platform untuk memberikan
pengalaman lebih ke pada user

2.3 User Interface

2.3.1 Konseptual User Interface
User Interface atau UI adalah tampilan visual dalam sebuah aplikasi sebagai
tempat (media) untuk menghubungkan antara sistem dengan user. Dalam
pengaplikasiannya, user interface juga berhubungan erat dengan user
experience. Penerapan desain user interface sangat penting dalam sebuah
pengembangan desain produk UI yaitu sebagai berikut:

• Desain user interface membantu meningkatkan traffic website, dengan

cara membuat tampilan website yang menarik, mudah, interaktif dan
moderen,
• Membantu memudahkan pengguna produk,
• Mendukung terbentuknya user experience yang tepat dan optimal. UI
harus melewati berbagai proses terlebih dahulu seperti melakukan user
research dan research competitor produk

2.3.2 User Interface React Native Dev

Programmer atau orang yang bergerak pada bidang IT adalah salah satu
target terbesar dibangunnya website React Native ini. Maka desain antar muka
yang di terapkan pada Web Dokumentasi React Native ini adalah theme color
primer dan sekunder yang familiar dengan text editor. Jika dijelaskan
berdasarkan prinsip user interface maka website react native dapat dicirikan
sebagai berikut

• User Compatibility, Product Compatibility

Tampilan yang simpel dan elegan ini sangan disukai para programmer.
Istilah-istilah yang digunakan juga sangat sejalan pada bidang IT. Terkait
fitur text editor yang diberikan ini sangat sejalan dengan bagaimana cara
membedakan class, variabel, function, package, atribut, comment dll
telah diberi warna yang berbeda untuk mencirikan suatu syntax tertentu.
web ini sangat diperuntukkan untuk programmer baik pemula atau kaum
profesional

• Task Compatibility, WYSIWYG, Work Flow Compatibility

Outline yang terdapat di menu memiliki kejelasan dan tujuan yang sama
dengan apa yang user inginkan. User dapat memahami work flow dari
website React Native Developer karena telah diurutkan dari pengenalan,
basic hingga ke tingkatan yang lebih tinggi
• Consistency, Familiarity, Simplicity
Color Theme, tata letak setiap komponen dalam setiap page design,
sangat sesuai dengan prinsip UI yaitu konsisten dan simple. Hal ini dapat
memudahkan user dalam mengingat tata letak yang ditetapkan. Konsep
antar muka yang digunakan sangat familiar dengan text editor, karena ini
juga menyesuaikan dengan target user yaitu pada programmer

• Direct Manipulation, Control, Flexibility

Terdapat fitur yang tidak kalah penting dari web ini yaitu pengaturan
mode malam dan mode terang. User dapat memanipulasi, dan
mengontrol secara flexible tampilan sesuai keinginan dan situasi di
sekitarnya.

• Invisible Technology, Robustness

Dalam mempelajari, mencoba dan menyalin code program, user dapat
melihat hasil di berbagai platform, dapat dilihat dari perangkat android,
emulator dan juga web. Web ini juga dapat dijalankan pada aplikasi
pihak ketiga yaitu Expo Go. Jika dalam percobaan simulasi code terdapat
kesalahan syntaxis maka emulator tersebut juga akan memberikan popup
incorrect
• Responsiveness
Dalam setiap outline work flow terdapat juga inline scroll bar yang dapat
secara cepat melakukan perpindahan dalam 1 halaman tersebut

• Easy of Learn
Karena web ini berbasis dokumentasi bahasa pemrograman, pastinya
web ini dibuat sedemikian rupa agar mudah dipelajari
2.4 Structure
BAB III Penutup
3.1 Kesimpulan
UI dan UX merupakan suatu bagian yang tak terpisahkan meskipun
keduanya memiliki aspek yang cukup berbeda, baik dalam tahap perencanaan,
pembuatan dan pengembangan. UI/UX adalah dua faktor yang memberi implikasi
langsung terhadap pengalaman pengguna saat pengoperasian produk digital
Dari hasil analisa usability web framework reactnative.dev memiliki nilai
aspek usability dan sangat layak digunakan oleh semua kalangan pengembang
aplikasi mobile dikarenakan sangat mudah dipelajari serta dimengerti oleh
pengguna. Berbagai fitur yang ditawarkan sangat membantu para pengunjung atau
user untuk menemui jawaban atas pertanyaan yang mereka miliki
Dari segi pengembangan User Experience, web framework react-native ini
mengambil metode User Centered Design dan Activity Centered Design yang
sangat disukai oleh para programmer mobile apps. User Interface yang tawarkan
sangat sesuai dengan target yaitu para programmer beginner maupun profesional
yang desain antar mukanya sendiri telah sesuai dengan prinsip dari User Interface

3.2 Saran
Site design dan page desain dalam web ini sudah sangat layak dalam
memberikan informasi dokumentasi dari bahasa programnya. Namun dalam
content desain terdapat kekurangan, yaitu kurangnya content berbentuk video yang
di berikan. Dengan adanya suatu video tutorial yang dikeluarkan langsung oleh
pihak internal, maka penggunaan framework ini pasti akan meningkat pesat