Pada kesempatan kali ini saya ingin berbagi cerita mengenai hal menarik dalam hal User Interface dan User Experience saat membuat dan mengembangkan aplikasi. Kita tidak akan berbicara terlalu luas, karena cukup membahas mengenai “secuil” design yang penting tapi disepelekan, yaitu Wireframe. Kita akan memulainya dari apa itu Wireframe dan fungsinya.
Kesimpulan yang saya dapat dari kebanyakan designer dan juga ebook design mengenai Wireframe itu merupakan tool paling penting dalam mendesain produk dan pengembangan produk. Karena apapun yang sedang kita bangun seperti website atau mobile application, wireframe ini lah yang tetap mengingatkan semua orang berada di jalan yang benar atau di halaman yang sama. Karena tidak hanya mengingatkan Product Manager dan Design, tapi juga engineer.
Inilah kasus menarik yang saya lihat pada Startup yang sedang Trend di Indonesia belakangan ini. Dimana coret-coretan kertas konsep yang sebelumnya dibuat dikertas terkadang sering dibuang setelah mulai proses pengembangan, tanpa memajangnya atau menjadikannya dalam bentuk digital terlebih dahulu. Nah, mungkin Anda akan bertanya kenapa harus memajangnya atau menjadikannya digital terlebih dahulu, tenang… dibawah Anda akan menemukan jawabannya. Pertama kita cari tahu dulu siapa saja yang harus menggunakan Wireframes ini.
Singkatnya semua karyawan itu menggunakan Wireframes, karena Wireframes ini tidak hanya digunakan dalam mengembangkan Aplikasi Website atau mobile saja, bahkan Arsitek, Teknik mesin dan sejeninsya wajib menggunakan Wireframes ini, atau mungkin yang biasa merekan kenal dengan sebutan Blue Print.
Siapa saja yang menggunakan Wireframe ini ?
Wireframe adalah blueprint – nya sebuah design. Wireframe berfungsi untuk menghubungkan sebuah konsep yang terstruktur ke bentuk tampilan dari sebuah website atau aplikasi mobile. Secara khusus, wireframe merepresentasikan visual dari sebuah tampilan yang digunakan untuk berkomunikasi oleh setiap orang di halaman yang sama, mulai dari :- Struktur – Bagaimana potongan website dapat terhubung ?
- Konten – Apa yang di tampilkan di website ini ?
- Hirarki Informasi – Bagaimana informasi ini bisa diatur dan di tampilkan?
- Fungsionalitas – Bagaimana tampilannya bekerja ?
- Kelakuan – Bagaimana website ini berinteraksi dengan user ?
Nah inilah alasan kenapa kita harus menggunakan Wireframe, seperti seorang UX Designer yang menggunakan wireframes untuk menampilkan alur user dengan tampilan. Gampangnya, flow chart yang dibuat oleh UX Designer dijadikan dalam bentuk tampilan lebih nyata sehingga mudah dimengerti oleh semua orang.
// Gambar Flow Chart Akses Fitur Aplikasi Mobile
Desain grafis menggunakannya untuk menunjukkan hasil design user interface yang dibuatnya. Karena dengan rapinya alur aplikasi dalam bentuk wireframes ini dapat memudahkan dan menginspirasi desain grafis untuk menghasilkan desain indah nan kreatif. Sehingga nantinya menghasilkan mockup dan prototype yang powerfull untuk di tunjukkan pada pengguna dan juga investor.
Dan Developer menggunakan Wireframes ini sebagai patokan dasar design detail dari aplikasi. Maksudnya, saya sering merasakan saat permbuatan design code dalam bentuk XML contohnya, panjang button hanya di kira-kira oleh developer, dimana ini harusnya sudah final dijelaskan dalam Wireframe. Akibatnya, ukuran spesifik dari 1 tombol saja dapat berubah tiap waktu, yang pastinya memakan waktu pengerjaan. Ya itu dia, kembali lagi karena menyepelekan Wireframe. Dan masih banyak lagi saya rasa kegunaan wireframes ini bagi posisi yang lain.
Nah, dari pembahasan diatas semoga membantu menjelaskan tentang siapa yang harus menggunakan Wireframes, dan bagaimana sebuah tim dapat dengan Wireframe. Next, waktunya untuk mencari tau cara apa saja yang dapat membantu kita dalam membuat Wireframe. Selain menggambarkannya langsung diatas kertas, di internet juga ada banyak tool yang dikhususkan untuk membuat Wireframe, mulai dari yang gratis hingga yang berbayar. Misalnya Balsamiq, Axure, Proto.io, UXPin, Adobe Express Design, dsb. Tertarik untuk membuatnya?, tahan dulu… karena ada Wireframe itu ada Prinsip Desainnya juga loh ..
Prinsip Design dalam membuat Wireframe
Prinsip prinsip ini saya dapatkan selama mengamati dan merasakan bekerja di Startup, dan juga saat mengikuti seminar/workshop tentang Startup. Tujuan utamanya agar saya tetap ingat dengan prinsip ini maka saya menuliskanya lalu plusnya saya bisa berbagi dengan pembaca disini. Oke langsgun saja, hal pertama yang saya dapatkan adalah:
Rencanakan mulai dari hal yang kecil dulu dan lakukan perlahan
Karena bagian penting selama mengembangkan produk yang baik adalah konsisten mengerjakannya sesuai dengan rencana. Berikut beberapa pertanyaan yang bisa kita coba tes ke ide Anda:
- Siapa pengguna utamanya?
- Apa yang pengguna butuh kan dan hasil apa yang diinginkan?
- Apa kebutuhan bisnisnya dan target bisnisnya?
- Apa produk yang sudah ada atau yang sedang digunakan oleh pengguna atau bisnis saat ini?
- Apa yang membedakannya dengan ide Anda?
- Apa konstrain dari Ide kita? (Misalnya: waktu, sumber daya, uang, skills)
Jangan menghabiskan banyak waktu hanya untuk menuliskan dan menggambarkan ide kita, karena cukup dengan melakukan Wireframing dan Prototyping maka akan membantu kita untuk mengerti dan menjawab pertanyaan diatas.
Pasang juga harapan – jangan hanya target
Pasang target yang jelas untuk apa yang kamu usahakan dan inginkan. Intel dan Google memiliki daftar Goal mereka dalam bentuk list Goal yang membuat tim production mereka tetap berjalan di yang benar dan tetap focus ke goal mereka. Contohnya, apa saja langkah dalam proses design, siapa yang mengerjakannya, apa saja deadline tiap langkahnya, dsb. Pikirkan apa yang kamu harapkan dari yang lain dan juga apa yang mereka harapkan, selain itu coba untuk tetap simple sehingga kita tidak stress.
Mulailah dari User dan yang mereka butuhkan
Siapa yang akan menggunakan produk kita untuk pertama kali, guru, polisi, anak sekolah, atau buruh?
Ada banyak Startup yang belum bisa menjawab pertanyaan ini atau jawaban mereka terlambat setelah produk jadi. Mereka memulai dari menambahkan kota, teks, warna dan gambar lalu lupa untuk siapa itu. Ini akan bagus jika kita yang buat, kita yang membutuhkan, tapi tentu bukan itu jawabannya. Ada perbandingan menarik yang bisa di ambil dari masalah diatas yaitu, perbedaan atanra seni dan design adalah design itu sendiri dapat menyelesaikan masalah. Jadi, kita harus mendesign apa yang sebenarnya user butuhkan, bukan hanya berdasarkan asumsi.
Pikirkan bagaimana caranya, bukan apa caranya
Produk Anda tidak hanya tentang perkumpulan fitur, jadi berhenti untuk fokus dengan banyak fitur. Hal inilah yang saya pelajari selama bekerja di Startup dan melihat perkembangan Startup. Yang terpenting adalah bukan seberapa banyak fungsi dari produk Anda, tetapi bagaimana itu bekerja dan menyelesaikan masalah. Pikirkan bagaimana kamu menjelasakan sesuatu ke orang lain, sesuatu yang extraordinary dan juga unik, karena apa yang kita tawarkan adalah kuncinya. Dari pengamatan tersebut, saya menarik dua pertanyaan yang bisa jadi landasan kuat untuk mengetes ide produk, antara lain:
- Apa yang dibutukan produk ini agar berfungsi dengan baik?
- Apa yang membuat orang tertarik dengan produk ini?
Mulailah dengan yang mudah, dan tetaplah menjadi mudah
Ingat, Wireframe adalah blueprintnya apa yang user butuhkan, jadi pertahankan diri untuk selalu menambahkan banyak fitur. Karena yang saya lihat produk yang bagus itu punya batasan, jangan semua fitur di masukkan dalam satu aplikasi. Tambahkanlah fitur jika memang fitur itu yang dibutuhkan.
Jangan tergesa – gesa dengan improvement
Salah satu tantangan terbesar seorang designer dan engineer adalah saat adanya task baru yang tak pernah berhenti yang berakibat keletihan. Mereka dituntut untuk terus mereview pekerjaan meraka dan ide merekan setiap menit, terus dan terus. Perusahaan teknologi yang besar saat ini juga memiliki masalah yang sama.
Semua itu harus punya arti
Maksudnya disini adalah setiap text, warna, gradient, shadow, dan gambar yang ada pada produk itu harus punya arti. Karena saat ini masih banyak produk yang mengutamakan kreatifitas dari User Interface saja dan menghiraukan User Experience, sehigga berakibat produk kurang memiliki arti.
Tetaplah konsisten, jangan ikut-ikutan
Mmmm, hal ini lah yang sepertinya jadi trend StartUp – startup Indonesia, dimana produk yang dikembangkan dipaksakan menyesuaikan dengan pengembangan produk lain. Contoh gampangnya gini, jika ternyata aplikasi yang kita kembangkan belum membutuhkan migrasi Bahasa pemograman yang lagi trend di kalangan Startup, kita paksakan untuk produk kita juga.
Sumber : wirasetiawan29.wordpress.com
