4.5 Produce Design Solutions
4.5.1 Perancangan Wireframe
Wireframe atau low fidelity dibuat sebagai panduan dasar dalam membuat medium fidelity prototype aplikasi iPusnas. Wireframe juga digunakan untuk menggambarkan tata letak konten dan navigasi halaman aplikasi iPusnas. Wireframe yang dibuat belum menggunakan gambar, icon secara lengkap dan belum ada warna. Wireframe yang sudah dibuat dapat dilihat pada tabel 4.14.
Tabel 4.14 Hasil perancangan wireframe rekomendasi UI & UX iPusnas
No Nama Menu Wireframe
114
2 Home
115
4 Detail Buku
116
6 ePustaka
117
8 Activity
118
10 Bookshelf
119
12 Edit Profile & Pengaturan
13 Chat Box
4.5.2 Perancangan Rekomendasi Medium fidelity Prototype Aplikasi iPusnas
Tahap ini akan dilakukan perancangan rekomendasi UI dan UX. UI dan UX dibuat menggunakan guideline standar Google Material Design (Google, 2016). UI & UX yang dibuat terdiri dari style guide warna, tipografi, icon, ilustrasi, dan design operations.
120
Gambar 4.10 Warna untuk rekomendasi UI & UX iPusnas
Warna utama yang digunakan untuk desain rekomendasi UI dan UX yang menggunakan warna biru #002766 dan hijau #389E0D. Kedua warna tersebut masih menggambarkan warna dasar iPusnas yang terdiri dari warna biru dan hijau. Warna biru lebih dominan digunakan untuk button dan warna hijau dominan digunakan untuk icon dengan background putih. Background sendiri menggunakan warna putih #FFFFFF dan abu-Abu terang #F3F3F3, kedua warna tersebut digunakan untuk memberikan kesan bersih terhadap tampilan UI dan dapat membuat pengguna lebih focus dengan konten yang disediakan. Heading menggunakan warna hitam pekat #121212 atau hitam normal #121212 dan abu-abu pekat #AAAAAA digunakan untuk warna dibawah heading untuk menciptakan visual hierarchy. Caption menggunakan warna #AAAAAA dan #DADADA, kedua warna tersebut sangat cocok digunakan untuk caption karena warna keduanya tidak terlalu pekat dan tidak terlalu terang, sehingga pengguna masih dapat membaca dengan jelas konten yang disediakan.
121
Gambar 4.11 Tipografi untuk rekomendasi UI & UX iPusnas
Tipografi menggunakan material typography guidance berdasarkan google material design dan menggunakan google fonts sebagai typeface, yaitu Roboto. Roboto digunakan karena sudah cukup familiar di kalangan pengguna android sebagai standar typeface android.
Gambar 4.12 Icon & ilustrasi untuk rekomendasi UI & UX iPusnas
Icon yang digunakan beberapa menggunakan google material design dan beberapa lainnya diambil dari flaticon. Beberapa ilustrasi diambil dari stories by
122
freepik, dan ilustrasi hanya ditampilkan pada halaman onboarding dan dialog konfirmasi.
Gambar 4.13 Design system untuk rekomendasi UI & UX iPusnas
Design system dibuat dengan memanfaatkan fitur yang tersedia pada Figma, yaitu Components. Design system terdiri dari UI Components seperti color, button, input, dialog confirmation, footer menu, status bar, icon, tab, check box, dan radio selection. Design system difokuskan untuk user experience dalam hal consistency, efficiency dan easy to scale dalam sebuah desain.
Style guide dan perancangan design system yang sudah ditentukan kemudian penulis merancang rekomendasi medium fidelity aplikasi iPusnas dalam bentuk
123
prototype. Perancang UI penulis menggunakan tools Figma dan memanfaatkan juga fitur prototype yang sudah disediakan oleh Figma untuk membuat prototype rekomendasi UI & UX aplikasi iPusnas.
Tabel 4.15 Rancangan rekomendasi medium fidelityaplikasi iPusnas
No Fitur User Interface Keterangan
1 Onboarding Onboarding adalah tampilan awal
saat pengguna baru membuka aplikasi iPusnas dan belum masuk ke dalam aplikasi. Onboarding
menggambarkan ilustrasi umum mengenai aplikasi iPusnas. Kemudian terdapat button “Join Now” difokuskan untuk pengguna baru untuk membuat akun baru iPusnas, dan button “Sign in” untuk pengguna yang sudah memiliki akun iPusnas.
2 Sign up & Sign in
Pengguna baru dapat membuat akun baru iPusnas pada halaman sign up. Pengguna diberikan tiga opsi untuk membuat akun baru, dapat
menggunakan akun Google mereka, akun Facebook, ataupun mengisi manual form data diri yang sudah disediakan.
125
3 Home Penulis menggunakan footer menu
untuk menampilkan lima menu iPusnas. Menu “Home” berada pada posisi center dan menggunakan icon dengan logo iPusnas agar
menggambarkan ini adalah menu utama iPusnas. Kemudian pada menu home juga terdapat fitur katagori untuk mempermudah user mencari buku berdasarkan katagori, posisi search bar juga difokuskan seperti pada gambar disamping untuk mempermudah pengguna mencari informasi yang mereka butuhkan. Terdapat pula fitur Continue Reading untuk memberikan informasi kepada pengguna mereka memiliki buku yang sedang dipinjam dan dapat melanjutkan membaca saat mereka baru membuka aplikasi. Kemudian terdapat pula fitur Recommendation untuk memberitahu pengguna buku-buku yang sedang popular saat ini.
4 Search Box Gambar disamping menunjukan fitur
pencarian pada rekomendasi desain UI dan UX aplikasi iPusnas
126
5 Katagori Buku Keseluruhan Book Category
ditampilkan pada halaman terpisah dengan menu home. Penulis membuat tampilan seperti ini untuk mempermudah pengguna dalam mencari katagori buku yang mereka inginkan dengan membuat tampilan setiap katagori pada masing-masing wedges.
Tampilan jika salah satu katagori diklik akan menampilkan list buku yang berada pada katagori yang dipilih seperti pada gambar kedua disamping.
127
6 Detail Buku Tampilan Detail Buku dibuat lebih
terstruktur. Gambar buku tidak dibuat besar seperti pada tampilan iPusnas saat ini, namun dibuat seperti gambar disamping untuk lebih memperjelas mengenai isi buku tersebut, seperti judul, sinopsis, informasi penulis dan informasi buku lainnya.
Bagian bawah detail buku ini juga terdapat rekomendasi buku lainnya yang masih dalam katagori buku yang sama dengan buku yang sedang dilihat dan mungkin saja dapat menarik perhatian pengguna untuk membacanya.
128
7 Meminjam
Buku
Pengguna dapat meminjam buku dengan menekan button “Borrow Book” pada halaman detail buku kemudian aplikasi akan
menampilkan popover dialog untuk konfirmasi apakah pengguna yakin untuk meminjam buku tersebut atau tidak, jika yakin pengguna dapat menekan button “Yes”, kemudian buku berhasil dipinjam dan akan menampilkan gambar kedua seperti disamping. Informasi buku yang sedang dipinjam memberikan informasi tambahan, yaitu sisa waktu peminjaman buku dan button “Borrow Book” berubah menjadi “Read Book” dengan menekan button tersebut pengguna dapat langsung membaca buku dalam bentuk ebook.
129
8 ePustaka Pengguna dapat melihat daftar
instansi atau penerbit yang sudah bekerja sama dengan iPusnas pada menu ePustaka.
130
9 Profile
ePustaka
Pengguna dapat melihat detail profile instansi atau penerbit yang sudah bekerjasama dengan iPusans. Halaman profile ePustaka terdapat informasi mengenai jumlah anggota dan koleksi buku yang dimiliki instansi ataupun penerbit, pengguna juga dapat bergabung menjadi anggota instansi atau penerbit tersebut dengan menekan button “Join Member”, kemudian dapat melihat koleksi buku yang dimiliki dengan menekan tab “collections” atau jika pengguna ingin melihat interaksi antara anggota atau memberikan komentar mengenai instansi atau penerbit pengguna dapat menekan tab “conversations”. Selain itu, pengguna juga dapat melakukan sharing dengan teman mengenai profile salah satu ePustaka tersebut dengan klik icon “share” yang berada pada pojok kanan atas halaman profile.
131
10 Activity Pengguna dapat melihat aktivitas
teman yang sudah diikuti pada menu Activity. Aktivitas yang dapat dilihat seperti saat teman meminjam buku baru, memberikan komentar pada profile instansi atau penerbit, selain itu pengguna juga dapat menyukai aktivitas yang terposting dan memberikan komentar pada aktivitas tersebut.
11 Profile Teman Pengguna juga dapat melihat profile
pengguna iPusnas lainnya, pengguna dapat saling mengikuti untuk mengetahui aktivitas masing-masing pengguna, disediakan juga fitur chatting untuk membantu sesama pengguna berkomunikasi mengenai buku yang mereka baca atau hal-hal lainnya tanpa harus menggunakan aplikasi chatting di luar iPusnas. Pada profile teman pengguna juga dapat melihat koleksi buku yang pernah dipinjam oleh teman pengguna, yang mungkin saja dapat menjadi rekomendasi buku baru untuk pengguna.
132
12 Chatting Fitur Chatting disediakan untuk
mempermudah antar pengguna untuk berbagi informasi mengenai buku-buku menarik, profile penerbit, atau hal-hal lainnya yang mungkin dapat dikomunikasikan. Fitur chatting ini juga disediakan fitur untuk mengirim media gambar atau video dan gambar bergerak (Gif) agar saat pengguna melakukan chatting tidak merasa bosan dan tidak harus menggunakan aplikasi chatting di luar iPusnas.
133
13 Bookshelf Menu Bookshelf menampilkan
buku-buku yang sedang pengguna pinjam (Reading List), wish list buku yang nanti akan dipinjam dan history buku yang pernah dipinjam oleh pengguna. Tampilan untuk buku yang sedang dipinjam memberikan informasi progress baca pengguna sudah seberapa banyak dan informasi sisa waktu peminjaman buku.
135
14 Profile Pengguna dapat melihat informasi
profile mereka pada menu Profile. Menu Profile menampilkan informasi foto akun, username, bio, jumlah pengikut dan teman yang diikuti, kemudian pada profile juga terdapat info reading list yang yaitu buku-buku yang pernah pengguna pinjam dan dapat dilihat oleh pengguna iPusnas lainnya. Pada menu Profile juga terdapat fitur edit profile dan pengaturan.
15 Following & Followers
Ini adalah tampilan daftar teman yang mengikuti profile pengguna dan daftar teman yang diikuti oleh pengguna. Antar pengguna dapat melihat aktivitas masing-masing pada aplikasi iPusnas terkait peminjaman buku, antar pengguna juga dapat mengirimkan pesan percakapan yang mereka inginkan.
136
16 Edit Profile Ini adalah tampilan Edit Profile jika
pengguna ingin melakukan
perubahan informasi profile mereka, seperti Nama, Username, Bio, Nomor Handphone, Email, dan Tanggal Lahir
137
17 Pengaturan Ini adalah tampilan pengaturan akun
iPusnas pengguna.
4.6 Evaluate Designs Against User Requirement
Tahap ini merupakan tahap terakhir dari metode UCD. Tahap evaluate against requirement akan dilakukan evaluasi design kepada 2 orang designer UI dan UX design yang sudah memiliki pengalaman lebih dari 1 tahun dalam bidang product design, kemudian akan dilakukan pengujian hasil rekomendasi UI dan UX aplikasi iPusnas berupa medium fidelity prototype yang sudah dibuat. Pengujian
138
berupa usability testing yang akan dilakukan kepada 13 pengguna iPusnas menggunakan metode think-aloud dan ISO 25022. Hasil dari usability testing kedua nantinya akan dihitung menggunakan rumus ISO 25022 untuk mengukur nilai effectiveness, efficiency dan satisfaction. Ketiga nilai usability pada pengujian kedua tersebut nantinya akan dibandingkan dengan hasil nilai usability pada pengujian pertama untuk mengetahui apakah rekomendasi UI dan UX yang dibuat lebih baik dari UI dan UX aplikasi iPusnas saat ini atau rekomendasi UI dan UX yang dibuat memiliki nilai usability lebih rendah dari UI & UX iPusnas saat ini.