Sempurnakan Proses Desain UX Anda – Panduan untuk Desain Prototipe

Proses pembuatan prototipe—mulai dari membuat gambar rangka sederhana hingga menguji mockup yang berfungsi penuh—adalah salah satu rangkaian keterampilan paling kuat dan kuat yang dapat dikuasai oleh desainer mana pun. Ini juga penuh dengan bahaya di tempat kerja di mana prosesnya dilewati sebagai pengganti hanya "merancang prototipe" sebagai hasil sederhana untuk diberikan kepada departemen berikutnya untuk dibangun. Tidak peduli seberapa rajin bisnis Anda dengan pembuatan prototipe, proses yang sebenarnya sering kali dapat membuat atau menghancurkan produk akhir Anda.

Bagaimana dan mengapa untuk benar-benar membangun sebuah prototipe sering menjadi misteri. Tanya banyak desainer dan mereka akan memiringkan kepala mereka seperti anak anjing yang bingung. "Maksud kamu apa? Lakukan saja,” kata mereka. Dan cukup benar: Kita semua tahu cara membuat prototipe. Kami hanya tidak tahu bagaimana kami tahu.

Ini sangat penting mengingat bagaimana prototipe seringkali merupakan hasil yang paling berharga. Klien dan manajer ingin melihat apa yang Anda lakukan, apakah itu situs web atau produk fisik. Mereka ingin mencobanya, memeriksa berbagai elemen, dan memahami alur kerja. Mereka ingin melihat "cara kerjanya".

Membangun prototipe saja tidak cukup; kita harus memahami proses yang terlibat dengan membangun konsep awal produk. Artikel ini akan membahas secara mendalam semua yang perlu diketahui dan dilakukan oleh seorang desainer untuk mencapainya.

Desain Prototipe - Untuk Apa Prototipe?

Manusia sangat visual. Faktanya, 30 persen dari korteks serebral kita dikhususkan untuk penglihatan. Jadi ketika Anda melihat sebuah prototipe, hal terpenting tentangnya adalah Anda melihatnya ! Ketika klien dapat melihatnya, dan memahami semua proses yang terlibat dengan produk, terutama area pertikaian untuk pengujian di masa mendatang, prototipe itu menjadi hidup.

Jadi apa itu prototipe? Prototipe adalah alat untuk memvisualisasikan hamparan karya desain interaktif; pada dasarnya, prototipe (pada hampir semua tahap) adalah penggabungan dari semua pekerjaan yang datang sebelumnya menjadi satu, terlihat, bagian fungsional. Representasi visual ini menunjukkan apa yang dilakukan produk pada titik tertentu, apa elemen interaktifnya, dan bagaimana produk akan berfungsi di dunia nyata.

Meskipun ada banyak mekanisme untuk berbagai aspek desain prototipe (seperti membuat sketsa), mudah untuk melewatkan sesuatu dan membuat kesalahan.

Hal ini membuat pekerjaan tentang bagaimana sebuah prototipe dibangun menjadi sangat berharga, karena dalam banyak hal ini menggambarkan bagaimana tujuan produk tersebut diaktualisasikan. Tidak sempurna, dan pasti tidak akurat sebagian besar waktu, tetapi seperti namanya, prototipe tidak final.

Mereka memperlambat kita untuk mempercepat kita. Dengan meluangkan waktu untuk membuat prototipe ide-ide kita, kita menghindari kesalahan yang mahal seperti menjadi terlalu rumit terlalu dini dan bertahan dengan ide yang lemah terlalu lama.

Tim Brown, CEO dan presiden IDEO

Cara sederhana untuk memikirkan prototipe adalah sebagai mekanisme untuk mendemonstrasikan fungsionalitas.

Penjelasan praktis tentang cara kerja sesuatu itu memiliki sejumlah manfaat bernilai tinggi, antara lain:

• Menjadikannya nyata – Sebelum prototipe apa pun dibuat, produk ini sepenuhnya konseptual! Itu bagus untuk sementara, tetapi pada akhirnya itu harus menjadi sesuatu yang akhirnya dipahami dan dihargai oleh para pemangku kepentingan dan pengguna. Sebuah prototipe adalah langkah pertama dalam bergerak dari konseptual ke aktual.
• Menyelesaikan masalah – Terkadang, kami memiliki tantangan desain tanpa solusi. Sebagai keterampilan, membuat prototipe adalah cara yang bagus untuk memvisualisasikan masalah dan memperkenalkan solusi dengan cepat. Jika tidak berhasil, buang prototipe dan coba lagi.
• Iterate – Pembuatan prototipe dilakukan secara bertahap, tetapi hasilnya sama: untuk mengembangkan ide Anda. Dari sketsa hingga hi-fis, setiap iterasi baru menawarkan sejumlah besar perilaku dan fungsi untuk diuji. Dan dengan lebih banyak data, kami dapat melakukan iterasi dengan lebih cepat dan lebih cerdas.
• Deteksi skenario yang tidak diinginkan – Setelah sesuatu terlihat, kami memiliki keterbatasan produk kami yang tersedia untuk dipelajari, yang juga memberikan konteks yang lebih baik tentang apa yang seharusnya ada…dan apa yang tidak boleh!
• Deteksi masalah kegunaan – Di sinilah banyak desainer tinggal: Setelah suatu produk memiliki prototipe dalam bentuk apa pun, tantangan kegunaan tiba-tiba menjadi mudah dikenali dan diperbaiki.
• Presentasi – Prototipe pada setiap tahap adalah standar untuk presentasi. Baik Anda menguji versi halaman atau mempresentasikan produk ke klien, prototipe dalam beberapa bentuk harus ada di sana. Dan jika tidak, Anda dapat bertaruh bahwa seseorang akan bertanya di mana itu dan mengapa itu tidak disertakan.

Bagaimana Memulai Proses Pembuatan Prototipe

Setelah menerima dokumen persyaratan 50 halaman dari klien, melihat kanvas kosong bisa jadi menakutkan. Meninjau pemikiran yang tidak terorganisir dari pertemuan klien, sketsa serbet, dan foto papan tulis kotor jarang membantu.

Karena prototipe dibangun di atas begitu banyak informasi lain, penting untuk mengumpulkan detail yang diperlukan terlebih dahulu untuk meletakkan pena di atas kertas. Pertimbangkan daftar periksa berikut dan tinjau detail yang diberikan oleh klien atau manajer Anda:

1. Apa tujuan proyek?

Mulailah dengan gambaran besar. Apakah produk memecahkan kebutuhan nyata? Bagaimana cara mengatasi kebutuhan itu? Memahami utilitas produk sangat penting untuk memberikan segala jenis solusi yang layak.

2. Produk kompetitif apa yang saat ini digunakan orang?

Analisis persaingan yang kuat akan memberikan gambaran yang jelas tentang keadaan pasar untuk jenis produk, ditambah apa yang diharapkan pengguna saat ini.

3. Siapa penontonnya? Apa tujuan mereka?

Memahami demografi dan kebutuhan pengguna memberikan konteks yang diperlukan untuk membuat produk yang diarahkan untuk menyediakan jenis pengguna tertentu dan memenuhi kebutuhan mereka.

4. Apa jenis produk itu, dan untuk apa (perangkat) itu?

Dengan begitu banyak teknologi dan solusi yang berbeda, desainer UX perlu mengetahui bagaimana produk akan digunakan (aplikasi web, situs web responsif, aplikasi seluler, dll.), pada perangkat apa, dan bagaimana versi yang berbeda akan hidup berdampingan (jika ada ).

5. Apakah ada preseden visual untuk diikuti?

Jika produk sudah ada dan proyek tersebut untuk perbaikan atau desain ulang, mungkin ada beberapa persyaratan yang mempertimbangkan perilaku pengguna saat ini dengan produk tersebut.

6. Apa kirimannya?

Menetapkan harapan tentang hasil dan proses sangat penting untuk perencanaan dan alur kerja Anda. Setiap proyek berbeda, tetapi jika kiriman didefinisikan dengan baik, sisa proses desain UX memiliki peluang lebih tinggi untuk berjalan dengan lancar.

Gambar Prototipe Anda

Dengan data kami tersedia dan terorganisir, langkah selanjutnya adalah mulai menggambar. Banyak desainer sudah memiliki ide untuk tata letak, struktur, atau bahkan di mana elemen tertentu dari desain visual berada sebelum menggambarnya. Tidak apa-apa, tetapi tujuan sketsa awal adalah untuk menjelajahi ruang yang tersedia untuk menyoroti apa yang mungkin—dan, yang lebih penting, apa yang tidak.

Kumpulkan alat tulis pilihan Anda, baik itu pensil dan kertas atau papan tulis dan spidol. Proses pembuatan sketsa mirip dengan penulis menulis bebas, atau musisi memetik; gambar apa yang Anda rasakan berdasarkan semua pekerjaan yang telah Anda lakukan sebelumnya, dan pertimbangkan potongan-potongan di bawah ini:

01 | Alur Pengguna – Ikuti pengidentifikasian aliran pengguna. Lihat bagaimana pengguna memenuhi tujuan mereka dan bagaimana mereka berinteraksi dalam sistem.

02 | Entitas informasi – Setiap aliran pengguna akan menampilkan beberapa input dan output pengguna. Identifikasi apa itu, bagaimana hubungannya dengan perilaku dan harapan pengguna, interaksi apa yang terlibat, dan bagaimana cara kerjanya.

03 | Sketsa pertama – Setelah mendapatkan ide tentang siapa yang akan menggunakan sistem, apa yang akan mereka lakukan, dan dengan apa, saatnya untuk melihat caranya. Buat sketsa alur pengguna Anda—tidak perlu membuat tata letak, cukup selesaikan fungsionalitasnya.

04 | Buat sketsa struktur yang belum sempurna – Setelah alur pengguna Anda dibuat sketsa, Anda akan memiliki gagasan yang lebih baik tentang tata letak terbaik untuk produk. Ini akan mencakup konten (teks, foto, video, dll.) yang akan muncul sebagai kotak dasar atau coretan. Jika ditulis dengan tangan, ukurannya tidak pas, jadi semua struktur dan konten hanya untuk visualisasi, bukan untuk penggunaan sebenarnya.

Salah satu tip tambahan adalah dengan menggunakan bantalan sketsa, kertas yang diformulasikan khusus, atau alat untuk membuat gambar rangka yang lebih jelas saat membuat sketsa. Mereka menyediakan tata letak dasar untuk viewport yang dimaksud, cukup murah, dan dengan stensil yang tepat juga membuat sketsa tampil lebih rapi. Ini sangat membantu jika Anda adalah laci yang berantakan karena mereka memberikan rasio aspek dan garis kisi yang benar untuk ponsel cerdas dan browser web.

Proses ini dapat berlanjut selama yang Anda inginkan, tetapi inilah saatnya untuk pindah ke langkah berikutnya setelah alur pengguna selesai dan proses penyelesaian alur itu jelas. Merupakan ide bagus untuk bolak-balik antara membuat sketsa dan membangun gambar rangka digital, terutama untuk menjaga proses tetap kreatif. Saat Anda maju melalui lebih banyak aliran, produk akan terasa lebih konkret, dan Anda secara alami akan beralih dari membuat sketsa.

Pindah ke Digital (Prototipe Rendah ke High-Fidelity)

Setelah sketsa lengkap cukup untuk bergerak maju, saatnya untuk mendigitalkannya. Baik itu Adobe XD atau Sketch, Framer, atau Flinto, atau yang lainnya, membuat sketsa versi digital adalah langkah pertama untuk memformalkannya. Oleh karena itu, fokusnya bergeser dari menambahkan elemen yang diperlukan secara kreatif ke mengatur aset dan struktur dalam desain.

Saat prototipe menjadi lebih praktis dan elemen lebih terstruktur, produk terbentuk. Saat pindah ke prototipe digital, kesetiaan ditentukan oleh tingkat interaktivitas , desain visual , dan konten . Sebuah prototipe dapat memiliki tingkat ketelitian yang rendah atau tinggi secara individual di area ini, meskipun hi-fi menggabungkan ketiganya di tingkat tertinggi.

Pertimbangkan hierarki dalam hal mencapai kebutuhan pengguna. Setiap sketsa terhubung ke alur dan cerita pengguna, dan sketsa adalah langkah pertama untuk menentukan tata letak dan struktur suatu produk. Alat digital saat ini dapat mempercepat sebagian besar hal ini—misalnya, menyetel elemen master yang berlaku untuk semua halaman dan template untuk jenis halaman.

Dengan setiap kawat baru dan iterasi, ajukan dua pertanyaan utama: Apakah halaman ini menjelaskan tujuannya dalam aliran pengguna yang lebih besar? Dan apakah interaksi tersebut masuk akal (artinya apakah pengguna memahami cara menyelesaikan tindakan)? Kami sering menanyakan pertanyaan-pertanyaan ini. Semakin banyak yang kami lakukan, semakin besar kemungkinan setiap iterasi baru untuk membawa prototipe lebih dekat ke draf akhir.

Prototipe digital juga jauh lebih mudah untuk diuji karena tidak hanya lebih mudah dibaca tetapi juga lebih cepat untuk direproduksi dan diulang secara massal. Di sinilah alat prototyping UX seperti InVision dan Proto.io sangat berguna untuk membuat prototipe yang dapat diklik. Saat dapat diklik, pengujian kegunaan berbagai aspek menjadi mudah, mulai dari tombol individual hingga keseluruhan alur.

Prototyping yang dapat diklik telah menjadi sangat populer selama beberapa tahun terakhir berkat kemudahan penggunaan program seperti InVision. Ini bahkan lebih berharga untuk perangkat seluler, di mana sekarang setiap alat prototyping utama menyediakan beberapa jalan untuk melihat atau menguji kabel seluler secara langsung pada perangkat uji.

Dengan beberapa pengetahuan teknik atau alat yang lebih canggih seperti Justinmind atau Axure, juga dimungkinkan untuk membangun prototipe fungsional, yang interaktif lebih dari sekadar mengklik. Pengguna dapat menguji hal-hal seperti mengisi formulir, menyelesaikan tugas-tugas sederhana atau kompleks, dan benar-benar menggunakan aplikasi seperti yang dimaksudkan untuk digunakan, semua tanpa benar-benar membangunnya. Desainer dengan pelatihan dalam desain interaksi komputer manusia (HCI), termasuk banyak desainer Toptal, secara teratur membuat dan menguji dengan prototipe fungsional.

Prototipe interaktif sangat bagus untuk menguji animasi, operasi pengguna di dalam aplikasi, dan fungsi tingkat tinggi yang terkadang tidak dapat diuji tanpa tindakan fungsional.

Prototipe dengan Tujuan

Keindahan—dan tantangan—prototipe sedang dalam proses. Kita dapat mengatakan hal yang sama tentang hampir semua hal, tetapi prototipe dimulai dan diakhiri dengan tujuan. Tanpa mengetahui mengapa layar tertentu perlu berperilaku dengan cara tertentu, bagaimana fitur harus beroperasi, atau apakah pengguna memerlukan corong atau tidak, prototipe yang dibuat tidak dikembangkan; itu digambar dan kemudian dibuat ad hoc.

Namun bahkan jika setiap gambar rangka yang dibangun dilakukan dengan sangat cerdas, pertanyaan yang diajukan sepanjang jalan, dengan setiap cerita pengguna yang terkait dipertimbangkan dan arsitektur informasi yang digunakan sebagai peta, masih mungkin untuk melewatkan beberapa hal. Itulah tantangan desain prototipe: Klien, manajer, dan bahkan desainer lupa bahwa prototipe belum final . Itu hanya draf, iterasi hingga versi berikutnya. Itu semua adalah bagian dari proses desain UX.

Jadi, ketika membangun rangkaian prototipe Anda berikutnya, ingatlah untuk menanyakan setidaknya satu pertanyaan penting: Apakah ini menghasilkan hasil yang diinginkan? Jika tidak, maka ini adalah kesempatan lain untuk membuat draf versi baru.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• eCommerce UX – Tinjauan Praktik Terbaik (dengan Infografis)
• Pentingnya Desain yang Berpusat pada Manusia dalam Desain Produk
• Portofolio Desainer UX Terbaik – Studi Kasus dan Contoh yang Menginspirasi
• Prinsip Heuristik untuk Antarmuka Seluler
• Desain Antisipatif: Cara Membuat Pengalaman Pengguna yang Ajaib