Konsep Prototype: Membuat Rancangan Desain

Konsep Prototype: Membuat Rancangan Desain

URL Link: Video1

Transkrip

Kembali lagi dengan saya, Aan. Mari kita tinjau kembali apa saja yang telah kita pelajari sebelumnya. Pertama, Anda telah memahami cara berempati kepada pengguna untuk mengetahui kebutuhannya. Kedua, Anda juga telah mendefinisikan masalah pengguna dengan membuat sebuah Problem Statement. Terakhir, kita juga telah mengeksplorasi ide untuk mendapatkan solusi dengan berbagai metode, seperti How Might We dan Crazy Eight.

Nah, pada materi ini kita akan masuk ke langkah yang paling menarik dan ditunggu-tunggu dari Design Thinking, yaitu Prototype. 

Pada tahap Prototype, Anda akan membuat rancangan desain yang dapat diuji coba berdasarkan ide yang sudah dibuat. Prototipe ini diharapkan dapat mendemonstrasikan bagaimana alur dan pengalaman dari produk yang akan dibuat. Prototype juga berfungsi untuk menghemat biaya produksi karena kita bisa memvalidasi kebutuhan pengguna sebelum aplikasi benar-benar dibuat. Coba bayangkan berapa besar biaya yang dikeluarkan jika kita asal merilis aplikasi, tetapi akhirnya tidak dipakai oleh pengguna.

Selain itu, prototype juga akan menjawab beberapa pertanyaan seperti:

• Apakah rancangan aplikasi sudah menyelesaikan masalah?

• Apakah alur aplikasi dan navigasi sudah mudah digunakan?

• Apakah ada hal yang perlu diperbaiki?

• dan sebagainya.

Lalu, bagaimanakah cara membuat sebuah prototipe aplikasi? Berikut beberapa langkah pembuatan prototipe yang nantinya akan Anda pelajari:

• Merancang User Flow

• Menggambar Storyboard

• Membuat Wireframe Menggunakan Kertas

• Membuat Wireframe Secara Digital

• Membuat Mockup

• Membuat High-Fidelity Prototype.

Bagaimana? Apakah ada istilah baru lagi yang membuat Anda penasaran? Tak perlu berlama-lama. Yuk kita mulai belajar!.

Goal Statement

Sebelum masuk ke tahap selanjutnya, pastikan Anda telah memiliki Problem Statement yang jelas tentang masalah yang ingin diselesaikan. Mengapa? Hal ini karena Problem Statement akan menjadi landasan Anda dalam setiap proses desain selanjutnya. Jadi, pastikan sudah benar, ya!

Pada tahap ini Anda juga akan melihat kembali beberapa item yang sudah dibuat, seperti Empathy Maps, User Persona, User Story, dan User Journey Map. Kemudian ambil insight dari item tersebut untuk membuat desain yang lebih fokus pada masalah pengguna. 

Nah, untuk membuat desain yang lebih fokus, kita akan membuat sebuah Goal Statement. Goal Statement adalah kalimat yang mendeskripsikan tujuan dan manfaat produk bagi pengguna. Dengan kata lain, Goal Statement adalah sebuah solusi dari masalah yang sudah didefinisikan sebelumnya. Jadi, dapat disimpulkan bahwa masalah didefinisikan di Problem Statement dan solusi didefinisikan di Goal Statement.

Berikut adalah contoh format untuk membuat Goal Statement:

 

Sebuah Goal Statement yang baik berisi nama produk, apa yang bisa dilakukan produk tersebut, siapa pengguna yang terpengaruh, dan mengapa produk tersebut bisa dikatakan menyelesaikan masalah pengguna. Selain itu, di dalam Goal Statement juga terdapat indikator untuk mengukur apakah produk dikatakan berhasil atau tidak.

Cara termudah untuk menjawab pertanyaan tersebut adalah melihat kembali hasil riset kita sebelumnya, terutama pada bagian Problem Statement. Sebagai contoh pada studi kasus aplikasi pemesanan kopi, kita telah membuat Problem Statement seperti berikut:

 

Dari Problem Statement tersebut, kita dapat melihat siapa pengguna dari produk pada baris pertama, apa yang dibutuhkan pada baris kedua, dan alasan mengapa produk tersebut berguna pada baris ketiga. Nah, dengan data tersebut maka Anda dapat membuat Goal Statement seperti berikut:

 

Mantap! Kita sudah melakukan transisi dari masalah yang dihadapi pengguna menjadi solusi yang dapat kita berikan sebagai UX Designer dengan membuat Goal Statement.

Latihan Membuat Goal Statement

Nah, sekarang giliran Anda membuatnya. Untuk mempermudah Anda, kami telah menyediakan template yang bisa digunakan untuk membuat Goal Statement. Anda dapat membukanya pada tautan berikut:

• Goal Statement Template

Catatan:

File tersebut bersifat read-only (melihat saja). Untuk menggunakannya, Anda cukup klik File > Buat Salinan > Seluruh Presentasi. Setelah tersalin, Anda dapat mengubah teks yang ada di dalamnya.

Baik, sekarang saatnya membuat Goal Statement berdasarkan Problem Statement yang telah dibuat berdasarkan studi kasus Anda masing-masing. Selamat berlatih, ya! 

---

Setelah menulis solusi desain pada sebuah Goal Statement, kira - kira bagaimana implementasi nyata dari solusi tersebut ? Sabar dulu, pertanyaan tersebut akan terjawab pada materi selanjutnya. Jadi, tetap semangat, ya!.

Merancang User Flow

Pada materi sebelumnya, Anda telah mengetahui bagaimana cara untuk mengetahui tingkah laku dan kebutuhan pengguna dengan cara-cara yang ada pada tahap Empathize. Tidak hanya mengetahui kebutuhan yang pengguna pikirkan saja, Anda bahkan bisa memprediksi kebutuhan yang belum mereka pikirkan. 

Dengan mengantisipasi kebutuhan yang tidak terpikirkan itu, Anda tentu dapat memudahkan pengguna dalam mencapai tujuannya. Anda mungkin juga pernah mengalaminya. Sebagai contoh, ketika Anda membeli bubur ayam biasanya penjual akan langsung menawarkan apakah pakai kacang atau tidak, pakai kecap atau tidak, dan alternatif lain yang mungkin tidak terpikirkan sebelumnya. Tentu ini akan sangat berguna untuk mendapatkan bubur ayam yang nikmat, bukan?

Nah, salah satu cara simpel dan mudah untuk mengantisipasi kebutuhan tersebut adalah membuat User Flow. User Flow adalah bagan alur yang menunjukkan interaksi dengan produk, mulai dari awal membuka aplikasi sampai mencapai tujuannya.

UX Designer sering membuat User Flow untuk membayangkan apa saja yang dilakukan pengguna secara menyeluruh. Dengan mengetahui alur ini, Anda dapat memprediksi kebutuhan pengguna yang mungkin belum disebutkan sebelumnya. Anda juga bisa menentukan alur yang efisien bagi pengguna untuk mencapai tujuannya.

Okay, sebelum kita masuk ke latihan, Anda perlu menentukan beberapa hal berikut terlebih dahulu:

• Aksi apa saja yang akan dilakukan pengguna?

• Pilihan apa saja yang dihadapi pengguna?

• Halaman apa saja yang tampil untuk pengguna mencapai tujuannya?

Jika Anda sudah mendapatkan jawaban dari pertanyaan tersebut, saatnya melangkah ke tahap selanjutnya untuk menggambar User Flow.

Simbol pada User Flow

Biasanya UX Designer menggunakan simbol-simbol dasar untuk membuat User Flow, seperti lingkaran, kotak, belah ketupat, dan arah panah. Setiap simbol tersebut memiliki arti masing-masing yang dapat memudahkan Anda memahami alur aplikasi. Berikut adalah penjelasannya:

Simbol Nama Fungsi

 

Halaman Menunjukkan setiap halaman yang tampil dari awal sampai akhir tujuan. Contohnya adalah halaman utama, halaman detail, dan halaman konfirmasi.

 

Aksi Menunjukkan proses, aktivitas, atau langkah yang dilakukan pengguna. Contohnya seperti membuka aplikasi, mengisi data, dan memilih tombol.

 

Pilihan Menunjukkan adanya pemilihan keputusan (decision making). Contohnya seperti keluar aplikasi atau tidak, lanjut atau tidak, dsb.

 

Garis panah Menghubungkan dari satu bentuk simbol ke simbol lainnya. Menunjukkan arah proses atau alur.

Contoh User Flow

Berikut adalah contoh User Flow dari studi kasus aplikasi pemesanan kopi:

 

User Flow aplikasi ini dimulai dari pengguna membuka aplikasi dan dihadapkan dengan halaman utama. Dari sini pengguna dapat mencari dan memilih menu dan melakukan kustomisasi pada halaman detail menu. Setelah memasukkan menu ke dalam keranjang terdapat pilihan, apakah mau menambah menu lain atau tidak? Jika iya, kembali ke halaman utama, sedangkan jika tidak, lanjut ke halaman konfirmasi. Setelah melakukan pengecekan dan pemilihan promo serta metode pembayaran, pengguna dapat mengonfirmasi pesanannya dan melakukan pembayaran. Terakhir, halaman status pesanan akan tampil.

Sebagai UX Designer, kita juga mengantisipasi apabila ada pengguna yang ingin menambahkan menu lain sebelum masuk ke halaman konfirmasi dengan menambahkan pilihan seperti User Flow di atas. Anda juga bisa menambahkan alur lain yang mungkin belum terpikirkan sebelumnya. Hal terpentingnya adalah sesuaikan User Flow dengan kebutuhan yang akan dihadapi sebagian besar pengguna.

Latihan Membuat User Flow

Nah, sekarang saatnya membuat User Flow untuk studi kasus Anda sendiri. Simak langkah-langkahnya di bawah ini:

1. Silakan identifikasi halaman dan aksi apa saja yang dilakukan pengguna mulai dari awal membuka aplikasi sampai ia mencapai tujuannya.

2. Untuk membuat user flow, Anda boleh menggunakan tools apa pun, tetapi pada contoh ini kita menggunakan https://www.diagrams.net/.

3. Mulailah membuat diagram dan pilih lokasi penyimpanan. Kami sarankan menggunakan Google Drive saja. Jangan lupa untuk izinkan otorisasi ke akun Gmail Anda.

4. Klik Create New Diagram.

 

5. Ganti nama diagram dan pilih template Flowchart.

 

6. Untuk menambahkan komponen baru, cukup lakukan drag and drop dari komponen yang ada di sebelah kiri ke tengah seperti ini:

 

7. Kemudian tambahkan teks dengan memilih komponen tersebut dahulu.

 

8. Lanjutkan untuk menambahkan komponen lainnya yang dibutuhkan. Untuk membuat arah panah yang menghubungkan antar komponen, klik tanda panah pada setiap komponen seperti berikut:

  

9. Hal lain yang perlu diketahui adalah menambahkan teks pada garis panah. Caranya cukup klik 2 kali pada garis dan ketik teks yang diinginkan. Anda juga dapat memindahkan teks tersebut seperti berikut:

 

10. Lanjutkan membuat diagram sampai akhir, ya! Jangan lupa gunakan simbol yang sesuai supaya orang lain juga paham dengan apa yang Anda buat. Pikirkan juga untuk membuat alur yang memudahkan penggunanya untuk mencapai tujuannya dengan cepat.

11. Apabila User Flow sudah selesai, Anda dapat mengunduhnya dengan cara klik FIle → Export as → PNG….

Selamat! Anda telah membuat sebuah User Flow. Sekarang Anda mengetahui bagaimana rancangan aplikasi yang akan didesain dengan lebih jelas dan terstruktur. 

Pembuatan User Flow juga merupakan sebuah cara yang bagus untuk menjembatani antara kebutuhan teknis dan non-teknis. Misalnya seseorang yang memiliki ide dalam pengembangan sebuah fitur dapat menyampaikannya dengan bahasa yang ia pahami kepada pengembang software, begitu pun sebaliknya..

Storyboard

Sebelum Anda masuk ke detail desain aplikasi secara langsung, akan lebih baik jika Anda membuat alur cerita terlebih dahulu dengan membuat papan cerita (Storyboard). Storyboard adalah serangkaian sketsa yang menunjukkan bagaimana perilaku pengguna terhadap produk. Storyboard ini memudahkan Anda dalam memvisualisasikan solusi yang sudah terpikirkan sebelumnya menjadi cerita yang lebih mudah dicerna.

 

Pernahkah Anda mendengar Storyboard yang digunakan dalam pembuatan film? Ya, sekilas Storyboard yang akan kita buat mirip seperti itu. Anda akan membuat adegan demi adegan yang berurutan supaya orang lain paham dengan cerita yang ingin dibangun. Storyboard yang asli mungkin memiliki banyak adegan, tetapi di sini Anda hanya fokus untuk membuat adegan yang penting saja. 

Sebelum membuat Storyboard, mari kita berkenalan dulu dengan empat elemen penting dalam pembuatan Storyboard, yaitu:

1. Karakter : Tokoh dalam cerita.

2. Adegan (scene) : Membantu membayangkan keadaan pengguna pada langkah tertentu.

3. Plot : Cerita yang menjelaskan manfaat dari solusi desain yang dibuat.

4. Narasi : Menggambarkan masalah pengguna dan bagaimana solusi untuk menyelesaikannya.

Nah, sekarang mari kita lihat contoh template dalam membuat Storyboard berikut:

 

Anda dapat mengisi pada kolom skenario dengan narasi yang menggambarkan masalah pengguna yang akan diselesaikan. Kemudian pada setiap bingkai baru, buat sketsa urutan kejadiannya, mulai dari pojok kiri atas ke arah kanan. Selanjutnya di bagian bawah sketsa, tambahkan penjelasan mengenai sketsa tersebut, terutama untuk suatu hal yang sulit diungkapkan dengan gambar. 

Jenis Storyboard

Sebelum melangkah lebih jauh, Anda perlu mengetahui terlebih dahulu dua jenis Storyboard, yaitu:

• Big picture

Storyboard yang fokus pada bagaimana pengguna akan menggunakan produk dalam kehidupan sehari-harinya dan manfaat yang ia dapatkan. Dengan membuat Storyboard jenis ini, Anda dapat memahami pengalaman dan emosi pengguna secara menyeluruh, seperti bagaimana dan mengapa mereka menggunakan produk. Ingat kembali bahwa memahami perasaan pengguna adalah hal yang esensial dalam proses mendesain. Storyboard ini cocok digunakan untuk mempresentasikan ide ke stakeholder supaya mereka paham dengan ide Anda secara keseluruhan.

Berikut ini adalah contoh big picture Storyboard dari aplikasi pemesanan kopi:

 

 

• Close-up

Storyboard yang fokus pada bagaimana produk tersebut bekerja secara detail, seperti apa saja yang bisa dilakukan pada suatu halaman, apa yang perlu dilakukan pengguna untuk ke halaman selanjutnya, dsb. Storyboard ini cocok untuk memperlihatkan seberapa praktis desain yang dibuat.

Berikut ini adalah contoh close-up Storyboard dari aplikasi pemesanan kopi:

 

Perlu diketahui bahwa sebagai UX Designer, Anda mungkin diminta untuk membuat kedua jenis Storyboard tersebut. Jadi pahami baik-baik ya perbedaannya!

Latihan Membuat Storyboard

Anda sudah paham tentang pengertian dan jenis-jenis Storyboard. Sekarang saatnya Anda untuk praktik membuat Storyboard berdasarkan studi kasus Anda masing-masing. Berikut ini adalah langkah-langkahnya:

1. Sebelum memulai, lihat kembali data-data yang sudah Anda buat sebelumnya, seperti User Persona, User Journey Map, Problem Statement, dan Goal Statement.

2. Buka template Storyboard berikut:

Storyboard Template

3. Cetak berkasnya pada kertas sebanyak dua kali. Satu untuk big picture Storyboard dan satu lagi untuk close-up Storyboard.

4. Tuliskan pada bagian skenario sebuah narasi yang berisi solusi dari masalah pengguna yang ingin diselesaikan.

5. Buat satu ide per panel. 

a. Untuk big picture Storyboard, panel pertama berisi awal cerita, panel selanjutnya berisi langkah yang dilakukan pengguna. Jangan lupa masukkan emosi pengguna pada setiap panel, seperti wajah sedih ketika menemukan pain point dan wajah senang ketika menemukan solusi.

b. Untuk close-up Storyboard, panel awal berisi halaman awal aplikasi, kemudian dilanjutkan dengan aksi-aksi yang perlu dilakukan pengguna untuk mencapai tujuannya. 

6. Scan atau foto hasil gambar tersebut dan simpan di tempat yang aman supaya ketika sewaktu-waktu dibutuhkan, Anda dapat langsung mengaksesnya..

Perbedaan Low-Fidelity dan High Fidelity

URL Link: Video3

Transkrip

Sebelum melangkah lebih jauh, kita perlu tahu bahwa sebuah desain bisa memiliki tingkat fidelitas yang berbeda. Fidelitas adalah tingkat kemiripan desain yang dibuat dengan produk jadinya. Nah, mari berkenalan dengan dua fidelitas yang akan sering kita jumpai pada materi selanjutnya, yaitu Low-Fidelity (Lo-fi) dan High-Fidelity (Hi-fi). 

Mari kita bahas satu per satu.

• Low-Fidelity (Lo-fi)

Pertama, yaitu Low-Fidelity (Lo-fi). Lo-fi adalah desain yang masih simpel dan kasar. Desain ini tidak menunjukkan detail warna dan ilustrasi yang akan digunakan, namun hanya beberapa simbol dan kerangka saja. Desain jenis ini cocok digunakan jika Anda ingin menuangkan ide dengan cepat ke dalam rancangan desain. Salah satu contoh dari lo-fi adalah Wireframe yang akan Anda pelajari pada materi ini.

• High-Fidelity (Hi-fi)

Selanjutnya, yaitu High-Fidelity (Hi-fi). (Hi-fi) adalah desain yang sudah diperhalus dan kompleks. Desain ini sudah menunjukkan pemilihan warna dan ilustrasi yang akan digunakan. Begitu juga dengan font teks pada setiap komponennya persis sebagaimana aplikasi yang akan dipakai pengguna. Biasanya desain yang sudah final ini disebut dengan Mockup.

Supaya lebih jelas, berikut adalah contoh dari kedua fidelitas tersebut:

 

Gambar pertama (sebelah kiri) adalah contoh dari low-fi design yang masih dibuat di kertas. Lalu, gambar selanjutnya (tengah) adalah low-fi design yang sudah diubah ke bentuk digital. Kemudian gambar terakhir (sebelah kanan) adalah contoh hi-fi design yang sudah final dengan ilustrasi dan kata-kata yang jelas. 

Mantap! Anda sudah paham kan perbedaan dari low-fidelity dan high-fidelity. Menariknya, Anda akan membuat desain tersebut satu per satu. Sudah tidak sabar, kan? Yuk, kita melangkah ke materi selanjutnya!.

Wireframe

 

Seperti yang kita ketahui sebelumnya, Wireframe merupakan salah satu contoh low-fidelity design. Wireframe adalah struktur dasar dan tata letak untuk mengetahui gambaran kasar dari suatu halaman dan menonjolkan fungsionalitas aplikasi sebelum ditambahkan warna dan gambar. Seperti namanya, Wireframe dibuat hanya dengan menggunakan garis-garis dan bentuk dasar saja. 

Sebagian designer mungkin melewatkan langkah ini karena merasa akan menghabiskan waktu. Namun ketahuilah, langkah ini penting dalam proses mendesain. Dengan membuat Wireframe, Anda akan mendapatkan banyak manfaat, seperti:

• Mengetahui struktur dasar suatu halaman, seperti elemen apa saja yang ada di dalam suatu halaman, komponen apa yang digunakan untuk navigasi antar halaman, dan tata letak penyusunan informasi.

• Mengetahui gambaran fungsionalitas dari suatu produk. Sehingga, tim lain bisa segera memberikan masukan apabila ada yang tidak tepat. 

• Menghemat waktu dan tenaga sebelum masuk ke proses development.

• Dapat mengubah dan menyesuaikan desain dengan cepat. 

Dalam membuat Wireframe biasanya dimulai dengan menggambarnya di dalam kertas terlebih dahulu. Anda bisa mengeksplorasi berbagai macam desain terlebih dahulu. Kemudian melihat poin-poin yang bagus dan satukan dalam sebuah desain akhir. Langkah selanjutnya adalah mengubah Wireframe tersebut ke dalam bentuk digital. 

Nah, pada materi selanjutnya kita akan mulai latihan menggambar Wireframe. Tetap semangat, ya!.

Latihan Dasar Menggambar Wireframe di Kertas

Anda telah mengetahui apa itu Wireframe dan manfaatnya. Nah, sekarang saatnya kita latihan untuk menggambar Wireframe. Seperti pada latihan membuat sketsa pada Crazy Eight, Anda tidak perlu menjadi ahli gambar untuk membuat Wireframe, yang terpenting adalah konteksnya. Jadi jangan takut dan ragu ya! Anda hanya perlu membiasakan diri untuk mengutarakan ide ke dalam Wireframe.

Ada dua jenis desainer dalam membuat Wireframe, ada yang suka menggambar langsung menggunakan tangan dan tidak terlalu rapi. Namun, ada juga yang menggambar dengan teliti menggunakan penggaris. Nah, jenis mana yang Anda pilih? Itu terserah sesuai kenyamanan Anda.

Tak perlu berlama-lama lagi, mari kita coba latihan membuat replikasi Wireframe dari aplikasi Play Store dengan bentuk seperti ini:

 

Mari siapkan kertas dan alat menggambar terlebih dahulu. Berikut ini adalah langkah-langkahnya:

1. Buat bingkai handphone terlebih dahulu dengan persegi panjang yang cukup besar sehingga Anda memiliki ruang untuk menggambar di dalamnya:

 

2. Kita mulai dari bagian yang paling atas, yakni kolom pencarian. Gambarlah persegi dengan icon pencarian di sebelah kiri dan avatar di sebelah kanan. Untuk mengganti foto, Anda bisa menggunakan tanda silang penuh. Kemudian sebagai pengganti teks, cukup gunakan garis horisontal saja seperti ini.

 

3. Selanjutnya untuk menu tab, Anda dapat merepresentasikannya seperti berikut:

 

4. Kemudian untuk menggambar menu filter yang berupa dropdown, gambarlah seperti ini:

 

5. Selanjutnya kita mulai dari posisi bawah dulu, supaya nanti ketika menggambar list bisa sesuai. Pada bagian bawah terdapat Bottom Navigation yang bisa digambarkan seperti ini:

 

6. Terakhir, buat list yang menunjukkan data yang banyak.

 

Keren! Apakah Anda sudah merasa menjadi UX Designer? Ini merupakan langkah awal yang sangat penting dan akan sering dilakukan. Untuk memudahkan proses menggambar, Anda juga boleh menggunakan penggaris. Ingat! Bagian penting dari proses ini adalah mengetahui struktur dari suatu halaman. 

Nah, supaya kemampuan Anda lebih terasah, cobalah membuat Wireframe kembali untuk aplikasi favorit. Ingat selalu bahwa latihan adalah cara terbaik untuk mendesain yang lebih baik. Jika Anda merasa butuh mengganti kertas, ganti saja dan ulang kembali. Semakin banyak berlatih, Anda akan semakin ahli dalam menggambar Wireframe..

Latihan Studi Kasus Eksplorasi Desain dengan Wireframe

Pada materi sebelumnya Anda telah membuat Wireframe untuk sebuah halaman dari aplikasi yang sudah ada. Nah, sekarang kita naik ke level berikutnya, yaitu membuat Wireframe untuk eksplorasi ide desain aplikasi yang baru. Tentu untuk eksplorasi seperti ini lebih enak dilakukan dengan kertas. Hal ini karena kita membuat desain dengan cepat dan murah. 

Langkah praktis dalam melakukan eksplorasi adalah menuliskan terlebih dahulu fitur apa saja yang ingin dimasukkan dalam sebuah halaman. Selanjutnya buat setidaknya lima desain dengan struktur informasi yang berbeda. Terakhir, tandai poin plus untuk elemen yang menarik dan buat desain baru berdasarkan hasil eksplorasi tadi.

Okay, mari siapkan kertas dan pen kembali karena kita akan mulai membuat desain sesuai studi kasus Anda masing-masing. Sebagai contoh di sini kita akan menunjukkan bagaimana mengeksplorasi ide untuk halaman home (utama) pada aplikasi pemesanan kopi.

1. Fitur yang dibutuhkan pada halaman home aplikasi pemesanan kopi adalah:

o Daftar menu

o Menu Navigasi (ke halaman keranjang, riwayat pesanan, dan profil)

o Fitur pencarian

o Fitur filter

2. Sekarang saatnya menggambar setidaknya lima desain yang memuat fitur yang sudah didefinisikan tadi. Cobalah untuk tidak menghabiskan waktu terlalu lama! Anda bisa menggunakan timer 2 menit untuk masing-masing halaman.

 

3. Setelah usai, review kembali desain yang sudah Anda buat dan beri tanda bintang untuk elemen yang menurutmu menarik.

 

4. Gabungkan elemen yang Anda beri tanda bintang tadi dalam sebuah desain baru. Jangan lupa untuk memastikan setiap fitur yang sudah didefinisikan sebelumnya tetap ada.

 

5. Scan atau foto hasil gambar tersebut dan simpan ke dalam komputer atau Google Drive supaya Anda bisa mengaksesnya lagi.

Mantap! Anda telah membuat Wireframe untuk sebuah halaman. Lakukan hal yang sama untuk halaman lainnya ya! Jangan lupa juga untuk meminta feedback kepada teman Anda supaya terdapat banyak sudut pandang..

Tool Membuat Wireframe Secara Digital

Membuat Wireframe digital adalah hal yang penting untuk mengetahui struktur halaman yang akan dibuat dengan lebih bersih dan detail. Selain itu, Wireframe digital lebih mudah dibagikan kepada orang lain. Anda juga dapat berkolaborasi dengan orang lain untuk membuat desain yang lebih baik. Tentu, hal ini lebih mudah daripada harus memfoto setiap kali ada perubahan, kan?

Oleh karena itu, pastikan Wireframe kertas Anda sudah final dulu ya! Hal ini karena mengubah Wireframe digital agak sedikit lebih sulit daripada di kertas. Berikut ini adalah beberapa hal yang perlu dipikirkan supaya Wireframe digital Anda sempurna:

1. Jangan memikirkan warna dan gambar terlebih dahulu, tetapi lebih ke fungsionalitasnya saja.

2. Pastikan Wireframe Anda berdasarkan Wireframe kertas yang telah dibuat. 

3. Sertakan lebih banyak detail daripada Wireframe kertas. Seperti menggunakan kata-kata yang sebenarnya untuk bagian yang penting. 

4. Pertimbangkan hierarki informasi di setiap layar.

5. Beri tahu pengguna apa yang dapat mereka lakukan di layar mana pun.

Nah, sekarang Anda pasti sudah tidak sabar untuk mengubah Wireframe kertas menjadi bentuk digital. Namun sebelum itu, mari kita berkenalan dengan beberapa tool yang bisa digunakan untuk membuat Wireframe digital. Apa saja itu? Yuk, kita simak.

Figma

 

Figma adalah aplikasi yang bisa digunakan untuk membuat desain secara bersama-sama dengan tim lainnya secara real-time. Figma termasuk aplikasi yang populer karena fitur gratisnya sudah sangat mencukupi untuk desainer pemula. Selain itu, Figma juga bisa dijalankan langsung melalui web browser tanpa harus menginstalnya terlebih dahulu.

Dengan Figma, Anda dapat membuat desain Wireframe dan prototype dengan mudah. Hal ini karena ada beberapa fitur seperti modern pen tool, instant arc, dan auto layout. Anda juga bisa memanfaatkan plugin dan template yang dapat mempercepat proses desain.

Adobe XD

 

Adobe XD adalah aplikasi berbayar yang dikeluarkan oleh Adobe Inc untuk mendesain berbasis vektor. Adobe XD sering digunakan oleh para desainer profesional untuk membuat UI/UX dari halaman web ataupun mobile. Aplikasi ini dapat digunakan di Windows ataupun macOS. Tidak hanya itu saja, ada juga versi Android atau iOS untuk mempermudah melihat preview desain langsung dari perangkat mobile.

Dengan Adobe XD, Anda juga dapat membuat desain Wireframe dan prototype dengan lebih menarik. Fitur utamanya adalah 3D Transform, Auto-Animate, dan Repeat Grid. Anda juga dapat mengintegrasikannya dengan produk Adobe lainnya seperti Photoshop dan After Effect..

Latihan Menggambar Wireframe Secara Digital

Sekarang adalah saat yang ditunggu-tunggu, yakni latihan membuat Wireframe digital menggunakan tool bernama Figma. Namun, jika Anda ingin menggunakan tool lain, itu tidak masalah. Hal yang paling penting adalah Anda paham konsep dasarnya.

Mari kita mulai dengan membuat akun di Figma pada halaman berikut: Figma.

Silakan klik Create one untuk mendaftar. Anda bisa menggunakan akun Google ataupun email dan password lain.

Apabila Anda seorang siswa/mahasiswa, lakukan pendaftaran sebagai Figma Education pada halaman berikut: Figma Education.

Dengan mendaftar akun Figma Education, Anda akan mendapatkan akses secara penuh ke semua fitur sebagaimana akun Professional tanpa dipungut biaya apa pun.

Setelah akun Anda siap, mari kita berlatih untuk mengubah Wireframe kertas menjadi Wireframe digital. Sebelum mulai, kita perlu menyiapkan proyek yang ingin dibuat dengan langkah-langkah di bawah ini:

Menyiapkan Project 

1. Buka Figma dan buat project baru dengan klik Design file pada kanan atas halaman.

 

Jika Anda sudah masuk ke project lain, klik Logo Figma di kiri atas →  File → New. Berikut tampilan halaman awal ketika membuat project baru: 

2. Hal pertama yang bisa Anda lakukan adalah mengubah nama project. Caranya, klik tanda panah pada samping nama project dan pilih Rename.

 

Anda juga dapat melakukannya dengan klik dua kali pada nama project untuk mengubah nama project dengan cepat. Kemudian tuliskan nama project baru, misalnya “Latihan UX Designer” dan klik Enter.

3. Selanjutnya kita mulai dengan membuat Frame yang akan menjadi kanvas tempat meletakkan elemen terlebih dahulu. Anda bisa membayangkan Frame sebagai setiap halaman yang akan dibuat dalam aplikasi. Klik menu Frame tool yang berbentuk seperti tanda hashtag (#) atau menekan shortcut F.

 

Selanjutnya pilih jenis Frame yang akan digunakan. Karena kita akan membuat desain untuk mobile, pilih Android pada pilihan di sebelah kanan.

 

Hasilnya akan terlihat kanvas dengan ukuran handphone seperti ini: 

Anda bisa melihat setiap frame yang dibuat pada bagian Layers sebelah kiri. Kelebihan dari menggunakan Frame yaitu Anda dapat memindahkan satu Frame dengan lebih mudah tanpa harus memilih objek yang ada di dalamnya satu per satu.

Klik dua kali pada nama Frame di bagian Layers untuk mengubah nama Frame. Sebagai contoh frame Android-1 ini kita ubah menjadi Home.

 

 

4. Supaya Anda mendapatkan gambaran, masukkan foto dari Wireframe yang sebelumnya sudah digambar di kertas sebagai referensi. Anda dapat menggunakan gambar berikut untuk mengikuti latihan ini:

 

Untuk memasukkan gambar, klik Logo Figma di kiri atas → File → Place Image… dan klik di luar frame. Anda juga dapat menggunakan drag and drop untuk memasukkan gambar dengan lebih mudah.

5. Kemudian hasilnya terlihat seperti berikut:

 

Apabila gambar terlalu besar, Anda dapat melakukan Zoom dengan cara pinch 2 jari atau menggunakan shortcut + (Zoom in) atau - (Zoom out). Cara lainnya yaitu dengan mengubah konfigurasi Zoom/view options yang ada pada pojok kanan menjadi Zoom to fit (Shift + 1) supaya semua gambar terlihat.

 

Sehingga hasilnya seperti ini:

 

 

6. Untuk mengubah ukuran suatu elemen, Anda dapat mengubahnya dengan drag bagian pojok elemen. Pastikan bentuk panahnya berubah menjadi seperti ini dulu ya!

 

Anda juga dapat mengatur ukuran dengan lebih presisi melalui property W untuk lebar dan H untuk tinggi yang ada di panel sebelah kanan seperti ini:

 

7. Pada latihan ini, akan ada lima bagian utama yang akan kita buat, yaitu:

o Banner

o Menu pencarian

o Filter kategori

o Daftar menu

o Menu bottom navigation.

Mari kita buat satu per satu..

Latihan Membuat Banner

Langkah pertama dari latihan menggambar Wireframe ini yaitu membuat bagian yang paling atas terlebih dahulu, yaitu banner. Berikut ini adalah langkah-langkahnya:

1. Okay, mari kita mulai dengan menambahkan elemen persegi panjang ke dalam kanvas sebagai ilustrasi dari banner. Pertama, pilih Rectangle (R) pada Shape Tools.

 

Kemudian buat elemen sesuai dengan ukuran yang diinginkan. Anda juga dapat melakukan drag and drop untuk memindahkan elemen.

 

Dalam aplikasi Figma terdapat garis bantu berwarna merah yang membantu Anda untuk membuat elemen yang presisi.

2. Selanjutnya untuk membuat garis silang, Anda perlu menggunakan Line (P) pada Shape Tools.

 

Untuk menggunakannya cukup drag dari lokasi awal sampai lokasi akhir seperti ini:

 

Seperti yang Anda lihat, Figma akan membantu Anda untuk meletakkan titik sehingga desain menjadi lebih rapi.

3. Kemudian kita akan mengubah warna garis tersebut menjadi abu-abu. Untuk memilih lebih dari satu elemen, tekan Shift sambil memilih elemen lainnya. Kemudian pada bagian stroke, ganti warnanya menggunakan Hex Color seperti 969696 atau menggunakan color picker seperti ini:

 

4. Kemudian untuk memudahkan manajemen elemen, kita akan menggabungkan beberapa elemen menjadi sebuah grup. Caranya yaitu blok atau pilih elemen yang ingin digabungkan, kemudian klik kanan dan pilih Group selection (Ctrl + G).

 

Hasilnya dapat dilihat pada panel di sebelah kiri. Anda juga dapat mengubah namanya dengan klik dua kali supaya lebih mudah dicari ketika elemen semakin banyak nanti..

Latihan Membuat Menu Pencarian

Langkah kedua dari latihan menggambar Wireframe ini yaitu membuat kolom pencarian di atas banner. Berikut ini adalah langkah-langkahnya:

1. Buatlah sebuah Rectangle (R) di atas banner seperti ini:

 

Kemudian atur warnanya menjadi Putih (FFFFFF) dengan mengganti property yang ada pada bagian Fill.

 

2. Anda juga dapat mengatur seberapa melengkung sudut suatu elemen dengan mengatur radius seperti berikut:

 

3. Kemudian untuk membuat representasi ikon pencarian, lakukan Copy Paste elemen Image yang sudah dibuat sebelumnya. Tentu Anda sudah mahir dengan cara ini, kan? Cukup Ctrl + C untuk Copy dan Ctrl + V untuk Paste. Perhatikan pada panel sebelah kiri ketika sebuah elemen sudah tersalin. Namun, perlu diperhatikan bahwa lokasi salinan biasanya sama dengan lokasi asalnya. Jadi untuk mengeceknya, pindahkan lokasinya seperti berikut:

 

4. Namun, jika diperhatikan posisi gambar masih ada di sebelah bawah menu pencarian. Untuk memindahkannya ke atas, cukup klik kanan dan pilih Bring to front atau menggunakan shortcut Ctrl+Shift+].

 

Sebenarnya ada empat mekanisme untuk memindahkan posisi, yaitu:

o Bring forward / Ctrl+] : Memindahkan satu posisi ke atas.

o Bring to front / Ctrl+Shift+] : Memindahkan posisi ke paling atas.

o Send backward / Ctrl+[ : Memindahkan satu posisi ke bawah.

o Send to back / Ctrl+Shift+[ : Memindahkan posisi ke paling bawah.

5. Kemudian ubah ukuran gambar menjadi 30x30 dan letakkan di bagian kiri kolom pencarian seperti ini:

 

Supaya lokasi gambar tepat di tengah kolom, manfaatkan fitur alignment pada Figma. Caranya pilih kedua elemen dengan menggunakan Shift dan pilih ikon Align vertical centers pada property seperti ini:

 

Untuk beberapa pilihan alignment yang lain adalah:

o Align left (Alt+A) : Rata kiri

o Align horizontal centers (Alt+H) : Rata tengah secara horizontal

o Align right (Alt+D)  : Rata kanan

o Align top (Alt+W) : Rata atas

o Align vertical centers (Alt+V) : Rata tengah secara vertikal

o Align bottom (Alt+S) : Rata bawah

Hore! Dengan memanfaatkan alignment tersebut, desain kolom pencarian Anda menjadi lebih rapi seperti berikut:

Latihan Membuat Filter Kategori

Langkah ketiga dari latihan menggambar Wireframe ini yaitu membuat filter kategori di bawah banner. Berikut ini adalah langkah-langkahnya:

1. Kita mulai dengan menambahkan tulisan dengan menggunakan menu Text seperti berikut:

 

Kemudian klik pada tempat yang diinginkan dan mulailah menambahkan tulisan seperti berikut:

 

Supaya lebih menarik, Anda dapat mengubah ukuran, style, dan warna teks tersebut melalui property pada panel di sebelah kanan seperti ini:

 

Berikut ini adalah pengaturan teks di atas:

- Style : Bold

- Size : 18

- Warna : 424242

2. Kita lanjutkan dengan membuat lingkaran yang merupakan representasi dari filter kategori. Untuk membuatnya pilih Ellipse pada Shape Tools terlebih dahulu.

 

Supaya mendapatkan lingkaran sempurna, Anda harus menekan Shift + Drag ketika membuat elemen seperti ini:

 

3. Untuk menambahkan garis silang di dalam lingkaran, Anda dapat membuat garis lurus dengan menggunakan Line (L) terlebih dahulu seperti ini. Jangan lupa untuk mengatur warna stroke menjadi 969696.

 

Kemudian rotasi sebesar 45 derajat dengan mengubah property Rotation ini.

 

Untuk garis yang kedua, copy paste garis ini dan rotasi sebesar 135 derajat. Sehingga, hasilnya akan tampak seperti ini.

 

4. Lanjutkan dengan menambahkan Rectangle (R) baru selebar lingkaran dan posisikan di bawahnya. Kemudian, blok semua untuk dijadikan satu grup dengan menggunakan Ctrl+G, beri nama Category Item.

 

5. Langkah selanjutnya kita akan menduplikasi grup Category Item ini dengan cepat dan mudah. Bagaimana caranya? Pertama, tahan tombol Alt, kemudian drag ke sampingnya dengan jarak tertentu. Untuk langkah selanjutnya, Anda tak perlu repot-repot lagi, Anda cukup menekan Ctrl+D untuk menduplikasi elemen. Ia otomatis membuat salinan dengan jarak yang sama dengan elemen sebelumnya. Mantap, kan!

 

6. Anda juga dapat mengatur jarak antar elemen dengan cara memilih semua komponen terlebih dahulu dan mengganti nilai spacing pada property seperti ini:

 

Hore! Untuk saat ini bagian filter kategori sudah selesai. Jangan lupa untuk menjadikan seluruh komponen dalam satu grup supaya lebih mudah dilihat strukturnya. Dengan memanfaatkan berbagai macam fitur dari Figma, proses desain menjadi lebih efisien, bukan?.

Latihan Membuat Bottom Navigation

Sebelum lanjut membuat daftar menu, kita akan membuat menu bottom navigation terlebih dahulu di bagian paling bawah. Berikut ini adalah langkah-langkahnya:

1. Untuk membuatnya buat sebuah Rectangle (R) pada bagian bawah dengan tinggi 56 seperti ini:

 

Kemudian ubah property-nya dengan mengubah warna fill menjadi putih (FFFFFF) dan menambah stroke berwarna abu-abu tua (969696) dengan menggunakan ikon tambah (+).

 

2. Untuk ikon pada menu, Anda bisa memanfaatkan elemen Image yang ada di menu pencarian ditambahkan dengan elemen Rectangle (R) kemudian buat grup dengan nama Menu Item, sehingga hasilnya akan seperti ini:

 

3. Sebenarnya Anda bisa menggunakan teknik duplikasi seperti yang sudah diajarkan sebelumnya, namun di sini saya akan menjelaskan salah satu fitur pada Figma untuk mengatur banyak komponen sekaligus.

Cobalah untuk copy-paste elemen tersebut satu per satu hingga menjadi empat elemen. Kemudian pindahkan ke tempat lain dengan jarak yang berbeda-beda. Nah, untuk membuat semua elemen tersebut memiliki jarak yang sama, Anda dapat menggunakan fitur Tidy up (Ctrl+Alt+Shift+T).

 

Cukup menarik, bukan?

4. Selanjutnya rapikan ikon tersebut supaya berada di tengah menu menggunakan shortcut.

 

Berikut langkah-langkah dan shortcut yang dilakukan pada proses di atas:

- Shift+Select : untuk memilih setiap elemen.

- Ctrl+G : untuk menggabungkan elemen.

- Alt+H : untuk membuat rata tengah horizontal.

- Alt+V : untuk membuat rata tengah vertikal.

Biasakan diri Anda untuk menggunakan shortcut, ya! Hal tersebut akan benar-benar membuat proses desain menjadi cepat dan efisien.

5. Hore! Menu bottom navigation sudah jadi. Jangan lupa untuk membuatnya menjadi satu grup supaya lebih mudah dibaca. Berikut ini adalah hasil desain Anda untuk saat ini:

 

6. Untuk bagian yang selanjutnya mungkin lebih panjang dari frame yang sudah dibuat sebelumnya. Untungnya dengan menggunakan Frame, Anda dapat mengubah ukuran tanpa mengganggu desain yang di dalamnya seperti ini:

 

Hal ini dapat Anda lakukan karena Home bertipe Frame dan fitur Clip Content tercentang.

 

Untuk mengetahui mengetahui fungsi dari Clip Content, cobalah untuk uncheck dan check kembali property tersebut.

7. Namun, jika Anda perhatikan kembali menu bottom navigation tidak mengikuti ukuran layar, sehingga Anda harus memindahkannya secara manual. Untungnya di dalam Figma terdapat sebuah fitur bernama Constraints. Constraints digunakan untuk mengatur suatu komponen melekat pada sisi mana pada frame. Sebagai contoh, supaya menu bottom navigation melekat pada bagian bawah, Anda hanya perlu mengubah properti yang sebelumnya Top menjadi Bottom. Sehingga hasilnya menjadi seperti ini:

 

Dengan begini, Anda tidak perlu khawatir seberapa panjang daftar menu pada halaman ini.  .

Latihan Membuat Daftar Menu

Langkah terakhir dari latihan menggambar Wireframe ini yaitu membuat daftar menu di bawah filter kategori. Berikut ini adalah langkah-langkahnya:

1. Kita mulai dengan membuat teks sub judul seperti ini:

 

2. Selanjutnya untuk membuat daftar menu, copy paste elemen Image dari menu pencarian ke frame utama. Kemudian supaya tinggi elemen ikut berubah ketika lebarnya diubah, Anda bisa mengaktifkan ikon Constrain proportions berbentuk rantai seperti ini:

 

3. Kemudian buat 2 Rectangle (R) dengan lebar yang berbeda untuk merepresentasikan nama menu dan harga. Gabungkan juga dalam sebuah grup (Ctrl+G) dengan nama Grid Item, seperti berikut.

 

4. Selanjutnya duplikasi menjadi 4 bagian dan sesuaikan ukuran sesuai dengan lebar aplikasi:

 

5. Mantap! Anda telah menyelesaikan seluruh latihan, berikut adalah hasil akhir dari latihan kali ini..

Latihan Export Gambar

Keren! Anda telah berhasil menyelesaikan seluruh desain. Hal terakhir yang perlu Anda pelajari adalah cara untuk mengekspor desain. Hal ini penting karena kita perlu membagikan desain ini dalam format gambar yang bisa dibuka banyak orang, sehingga orang lain dapat memberikan feedback dengan lebih mudah.

1. Caranya cukup pilih elemen yang ingin diekspor (sebagai contoh frame Home). Kemudian pada pojok kanan bawah terdapat property Export. Lalu klik ikon tambah (+) dan klik tombol Export [nama elemen].

 

Cara lainnya yang cukup ringkas jika hanya ingin copy paste ke dokumen lain yaitu dengan klik kanan pada elemen yang ingin dipilih → Copy/Paste → Copy as PNG (Ctrl+Shift+C) dan paste di dokumen lain.

 

Keren! Anda telah berlatih membuat sebuah Wireframe digital. Silakan lakukan hal yang sama untuk desain halaman yang sesuai dengan studi kasus Anda. Semakin banyak berlatih, Anda akan semakin ahli dan cepat dalam membuat desain digital. Berikut ini adalah contoh lengkap Wireframe dari aplikasi pemesanan kopi:

 Anda juga dapat melihat Project Figma dari wireframe tersebut pada tautan berikut 

• Wireframe Aplikasi Pemesanan Kopi

Tips dan Trik dalam Membuat Wireframe

Anda telah berada di akhir bab. Sebelum lanjut ke bab selanjutnya, kami akan memberikan kepada Anda tips dan trik seputar materi yang sedang dijelaskan. Pada materi ini kami akan memberikan tips dan trik dalam membuat Wireframe.

Membuat Information Architecture

Dalam membuat sebuah produk, tentu akan membutuhkan banyak halaman dengan berbagai fitur. Nah, untuk mengorganisasi konten suatu produk supaya lebih mudah dimengerti, kita akan membuat Information Architecture.

 

Information Architecture (IA) adalah sebuah bagan struktur yang berisi seluruh informasi halaman. IA dapat menunjukkan pada posisi mana posisi pengguna saat ini dan ada di mana informasi yang dibutuhkan pengguna berada. 

Jika kita mengorganisir IA dengan baik, pengguna dapat mencari informasi yang dibutuhkan dengan cepat dan efektif. Bukan secara kebetulan, tetapi memang sudah direncanakan dengan menggunakan desain.

IA membantu stakeholder untuk meninjau gambaran produk secara high-level, sehingga jika ada bagian yang tidak tepat, mereka bisa langsung mengetahuinya. IA juga membantu Anda untuk mengetahui cara bernavigasi antar halaman. Dengan begitu, Anda bisa menentukan desain yang cocok pada Wireframe. Anda juga bisa mengetahui informasi apa saja yang ada pada sebuah halaman sebelum mengaturnya pada Wireframe. 

Berikut beberapa tips dalam membuat information architecture yang bisa Anda terapkan:

• Antisipasi lokasi informasi sesuai dengan kebutuhan pengguna.

• Jangan buat pengguna membutuhkan langkah yang banyak untuk mendapatkan informasi yang diinginkan. Anda bisa mengikuti Three-Click rule.

• Tentukan halaman yang paling sering digunakan sebagai menu utama.

• Gunakan navigasi yang konsisten.

Menggunakan Shortcut

Dalam membuat Wireframe digital dengan tools seperti Figma, akan lebih baik jika Anda menggunakan shortcut. Hal ini karena dengan bantuan shortcut, Anda dapat mempercepat proses desain dengan mengurangi waktu yang dibutuhkan untuk mencari menu atau memilih menu menggunakan kursor. 

Berikut ini adalah beberapa shortcut yang sangat berguna ketika menggunakan Figma:

Nama Shortcut Keterangan

Show/Hide UI Ctrl+\ Menampilkan atau menyembunyikan panel supaya lebih fokus

Pick color I Mengambil warna dari gambar atau tempat lain

Quick action Ctrl+/ Mencari menu, perintah, plugin atau apa pun

Outlines Ctrl+Shift+3 Melihat outline untuk kerapian desain

Pan Space+Drag

(Drag 2 jari) Menggeser tampilan layar

Frame Tool F Membuat Frame baru

Zoom to next frame N Zoom ke frame selanjutnya

Text Align Ctrl+Alt+L

Ctrl+Alt+R

Ctrl+Alt+J Teks rata kiri

Teks rata kanan

Teks rata kanan kiri

Selection Ctrl+Click

Ctrl+Right click

Enter

Shift+Enter

Tab

Shift+Tab Memilih elemen di dalam suatu layer

Memilih layer

Memilih children (layer bawahnya)

Memilih parent (layer atasnya)

Memilih layer selanjutnya

Memilih layer sebelumnya

Cursor Alt

Alt+Drag

Alt saat resize Melihat jarak antar elemen

Duplikasi elemen

Mengubah ukuran dari tengah

Anda juga dapat melihat semua shortcut dengan cara klik ikon help and resource pada pojok kanan bawah dan pilih Keyboard shortcuts (Ctrl+Shift+?).

  

Menghindari Deceptive Pattern

Deceptive pattern adalah metode yang berfungsi untuk memengaruhi pengguna untuk melakukan sesuatu atau membeli sesuatu yang sebelumnya tidak akan mereka lakukan atau beli.

Beberapa contoh metode dari deceptive pattern adalah:

1. Roach motel atau trap door : Metode ini dirancang untuk memudahkan pengguna masuk ke situasi yang tidak diinginkan dan sangat sulit bagi mereka untuk keluar darinya.  Contohnya yaitu kemudahan dalam melakukan langganan, tetapi susah ketika ingin membatalkannya.

2. Forced continuity : Metode ini dirancang untuk memaksa pengguna untuk membayar membership secara tidak sengaja. Sebagai contoh yaitu trial layanan 7 hari, dan ternyata ia akan terus berlangganan.

3. Sneak into basket : Menambahkan item baru ketika akan membeli. Contohnya seperti penambahan proteksi tambahan atau garansi pada halaman checkout.

4. Hidden cost : Adalah biaya tersembunyi dan tidak disebutkan di awal. Contohnya yaitu di depan harga terlihat murah, namun ternyata di akhir terdapat biaya layanan atau pajak yang belum tercantum.

5. Confirmshaming : Metode untuk membuat merasa bersalah ketika tidak memilih sesuatu. Contohnya pada pop up penawaran suatu produk, ada pilihan “Ya, saya mau!” dan “Tidak, saya sudah pintar, saya tidak membutuhkannya”. 

6. Urgency : Metode untuk mendesak pengguna untuk segera melakukan pembelian. Biasanya dengan memberikan batas waktu satu jam atau satu hari.

7. Scarcity : Metode untuk menunjukkan bahwa suatu produk sedang langka. Contohnya dengan menampilkan jumlah stok yang tinggal sedikit atau jumlah orang yang sedang memasukan produk tersebut ke keranjang.

Anda sebelumnya sudah mempelajari bagaimana cara untuk berempati dengan pengguna, apabila pengguna merasa risih dan terganggu dengan deceptive pattern ini, maka sebaiknya pola ini dihindari. Hal ini karena bisa menyebabkan kepercayaan pengguna kepada produk Anda menurun. .

Rangkuman dari Storyboard dan Wireframe

Kita sudah berada di penghujung materi ini. Yuk kita rangkum apa saja materi-materi yang telah dipelajari sejauh ini.

• Pada tahap Prototype, Anda membuat rancangan desain yang dapat diuji coba berdasarkan ide yang sudah dibuat. 

• Goal Statement adalah kalimat yang mendeskripsikan tujuan dari produk dan manfaatnya bagi pengguna. Dengan kata lain, Goal Statement adalah sebuah solusi dari masalah yang sudah didefinisikan sebelumnya. Berikut ini adalah contoh format untuk membuat Goal Statement:

 

• User Flow adalah bagan alur yang menunjukkan interaksi dengan produk, mulai dari awal membuka aplikasi sampai mencapai tujuannya.

• Anda perlu menentukan beberapa hal berikut terlebih dahulu sebelum membuat User Flow:

o Aksi apa saja yang akan dilakukan pengguna?

o Pilihan apa saja yang dihadapi pengguna?

o Halaman apa saja yang tampil untuk pengguna mencapai tujuannya?

• Berikut ini adalah simbol-simbol yang digunakan untuk membuat User Flow:

o Persegi : Menunjukkan setiap halaman yang tampil dari awal sampai akhir tujuan.

o Lingkaran : Menunjukkan aksi proses, aktivitas, atau langkah yang dilakukan pengguna.

o Belah ketupat : Menunjukkan adanya pemilihan keputusan (decision making).

o Garis panah : Menunjukkan arah proses atau alur.

• Storyboard adalah serangkaian sketsa yang menunjukkan bagaimana perilaku pengguna terhadap produk. 

• Empat elemen penting pada Storyboard, yaitu:

o Karakter : Tokoh dalam cerita.

o Adegan (scene) : Membantu membayangkan keadaan pengguna pada langkah tertentu.

o Plot : Cerita yang menjelaskan manfaat dari solusi desain yang dibuat.

o Narasi : Menggambarkan masalah pengguna dan bagaimana solusi untuk menyelesaikannya.

• Storyboard ada 2 jenis, yaitu:

o Big picture : Storyboard yang fokus pada bagaimana pengguna akan menggunakan produk dalam kehidupan sehari-harinya dan manfaat yang ia dapatkan.

o Close-up : Storyboard yang fokus pada bagaimana produk tersebut bekerja secara detail, seperti apa saja yang bisa dilakukan pada suatu halaman, apa yang perlu dilakukan pengguna untuk ke halaman selanjutnya, dsb.

• Fidelitas adalah tentang seberapa dekat desain yang dibuat dengan produk jadinya. Ada dua jenis fidelitas, yaitu:

o Low-Fidelity (Lo-fi) : Desain yang masih simpel dan kasar. Desain ini tidak menunjukkan detail warna dan ilustrasi yang akan digunakan, namun hanya beberapa simbol dan kerangka saja. Desain jenis ini cocok digunakan jika Anda ingin menuangkan ide dengan cepat ke dalam rancangan desain. Salah satu contoh dari lo-fi adalah Wireframe.

o High-Fidelity (Hi-fi) : Desain yang sudah diperhalus dan kompleks. Desain ini sudah menunjukkan pemilihan warna dan ilustrasi yang akan digunakan, begitu juga dengan font teks pada setiap komponennya persis sebagaimana aplikasi yang akan dipakai pengguna. Biasanya desain yang sudah final ini disebut dengan Mockup.

• Wireframe adalah struktur dasar dan tata letak untuk mengetahui gambaran kasar dari suatu halaman dan menonjolkan fungsionalitas aplikasi sebelum ditambahkan warna dan gambar. 

• Manfaat dari Wireframe yaitu:

o Mengetahui struktur dasar suatu halaman, seperti elemen apa saja yang ada di dalam suatu halaman, komponen apa yang digunakan untuk navigasi antar halaman dan tata letak penyusunan informasi.

o Mengetahui gambaran fungsionalitas dari suatu produk. Sehingga tim lain bisa segera memberikan masukan apabila ada yang tidak tepat. 

o Menghemat waktu dan tenaga sebelum masuk ke proses development.

o Dapat mengubah dan menyesuaikan desain dengan cepat. 

• Berikut ini simbol yang biasa digunakan untuk menggambar Wireframe:

o Persegi/lingkaran dengan tanda silang : Ilustrasi atau gambar.

o Garis : Teks.

o Persegi panjang : Tombol aksi.

• Dalam membuat Wireframe biasanya dimulai dengan menggambarnya di dalam kertas terlebih dahulu. Anda bisa mengeksplorasi berbagai macam desain terlebih dahulu, kemudian melihat poin-poin yang bagus dan menyatukannya dalam sebuah desain akhir. Langkah selanjutnya adalah mengubah Wireframe tersebut ke dalam bentuk digital. 

• Berikut ini adalah beberapa tips supaya Wireframe digital Anda sempurna:

o Jangan memikirkan warna dan gambar terlebih dahulu, namun lebih ke fungsionalitasnya saja.

o Pastikan Wireframe Anda berdasarkan Wireframe kertas yang telah dibuat. 

o Sertakan lebih banyak detail daripada Wireframe kertas. Seperti menggunakan kata-kata yang sebenarnya untuk bagian yang penting. 

o Pertimbangkan hierarki informasi di setiap layar.

o Beri tahu pengguna apa yang dapat mereka lakukan di layar mana pun.

• Contoh tool untuk membuat Wireframe:

o Figma : Aplikasi yang bisa digunakan untuk membuat desain secara bersama-sama dengan tim lainnya secara real-time.

o Adobe XD : Aplikasi berbayar yang dikeluarkan oleh Adobe Inc untuk mendesain berbasis vektor.

• Berikut ini tips dan trik dalam membuat Wireframe:

o Membuat Information Architecture : Sebuah bagan struktur yang berisi seluruh informasi halaman. Dengan adanya IA, ia dapat menunjukkan pada posisi mana posisi pengguna saat ini dan ada di mana informasi yang dibutuhkan pengguna berada. 

o Menggunakan shortcut : Ada banyak shortcut keyboard untuk mempercepat proses desain. Hal ini karena mengurangi waktu yang dibutuhkan untuk mencari menu atau memilih menu menggunakan kursor. 

o Menghindari Deceptive Pattern :  Metode yang berfungsi untuk memengaruhi pengguna untuk melakukan sesuatu atau membeli sesuatu yang sebelumnya tidak akan mereka lakukan atau beli..

Bersambung ke: 

High-Fidelity Prototype