Hubungan antara UX wireframe dan penelitian UX
Dalam artikel ini, kita akan membahas pertanyaan-pertanyaan tersebut:
- Apa yang dimaksud dengan UX wireframe?
- Bagaimana mereka digunakan dalam proses desain?
- Apa yang bisa menggantikannya?
- Bagaimana manfaatnya Penelitian UX?
Ketika kita mempertimbangkan desain situs web, hal pertama yang kebanyakan dari kita pikirkan adalah branding dan gaya merek, warna dan fitur yang ditampilkan antarmuka pengguna segera setelah halaman dimuat, dan seberapa menarik hal tersebut untuk mendorong kita melalui perjalanan kita dalam mencapai apa yang kita butuhkan darinya.
Sebelum halaman berisi gambar-gambar yang mencolok, tulisan yang ditulis dengan cerdik, dan lonceng dan peluit yang berputar-putar menjadi halaman kode yang hidup dan bernapas, masih banyak lagi prosedur dan praktik yang diperlukan untuk membawa setiap tim ke tahap di mana branding, desain visual, dan penyampaiannya dapat disatukan.
Setiap tahap desain dimulai dengan mempertimbangkan apa yang dibutuhkan oleh para pemangku kepentingan dari pengunjung dan apa yang mereka butuhkan dari para pemangku kepentingan. Diskusi, berdasarkan kebutuhan pengguna dan bisnis, yang mendorong tercapainya setiap tujuan dibantu dengan penelitian, ide, presentasi, dan prototipe yang mendalam.
UX (pengalaman pengguna) adalah interaksi dan transaksi yang menyenangkan bagi pengguna dalam proses situs web Anda. Tujuannya adalah untuk memberikan pengalaman pengguna yang mendorong mereka untuk menyelesaikan, kembali, dan merekomendasikan dengan cepat, efisien, dan semudah mungkin.
Wireframe adalah alat berharga yang digunakan pada tahap pertama dan diskusi selanjutnya dari setiap perjalanan desain.
Apa yang dimaksud dengan wireframe?
Desain web wireframe adalah representasi paling sederhana dari situs web Anda, biasanya selama tahap awal.
Membuat wireframe aplikasi atau situs web membantu kita membayangkan bagaimana perjalanan pelanggan terlihat dan terasa bagi pengguna, memutuskan elemen mana yang penting, di mana mereka harus berada di halaman, dan bagaimana mengarahkan pengguna ke tahap berikutnya dalam mencapai tujuan mereka.
Wireframe memandu komunikasi, organisasi, dan alur kerja. Ini membuat desainer dan para peneliti berfokus pada konseppengguna dan fitur-fiturnya serta menawarkan cara yang cepat dan mudah untuk menyampaikan atau menerapkan perubahan pada alur kerja; mereka adalah bagian penting dari proses desain interaksi.
Pada setiap tahap di mana desain, penelitian, dan alur kerja bersatu, efisiensi adalah hal yang sangat penting untuk skala waktu dan tenggat waktu. Jadi, Anda memerlukan alat yang dapat membingkai ulang ide dari pertimbangan terakhir Anda yang tidak perlu kembali ke desainer atau tim presentasi hanya untuk bergerak maju dengan beberapa langkah sederhana.
Dalam bentuk yang paling sederhana, desainer UX memulai dengan membuat sketsa gambar di atas kertas. Mengapa harus menunggu berhari-hari atau berminggu-minggu jika pena dan kertas dapat melakukan pekerjaan yang sama dalam beberapa goresan cepat? Mereka dapat dipresentasikan pada tahap apa pun untuk mendapatkan umpan balik dari pengguna atau persetujuan klien - mulai dari prototipe kertas dasar hingga wireframe dengan ketelitian tinggi - dan dari sudut pandang praktis, menjaga proyek bergerak maju dengan cepat dan efisien.
Tiga tingkat desain kerangka kerja UX
Bingkai gambar dengan ketelitian rendah
Tergantung pada tahap mana Anda berada dalam proses dan penelitian yang telah Anda lakukan, desain web wireframe dapat terlihat sesederhana dan berantakan seperti sketsa kasar. Ini digolongkan sebagai wireframe dengan ketelitian rendah. Wireframe pena dan kertas memperjelas aliran produk atau proses tanpa komplikasi yang tidak perlu. Mereka mendemonstrasikan bagaimana struktur halaman dan elemen antarmuka bekerja dengan cara yang paling sederhana.
Bingkai gambar dengan ketepatan menengah
Seiring dengan kemajuan proses, wireframe dengan ketelitian rendah Anda akan berkembang menjadi opsi wireframe digital yang lebih terorganisir (dan lebih umum) dan disajikan secara profesional - yang dikenal sebagai bingkai foto dengan ketelitian menengah menggunakan perangkat lunak yang memberikan tata letak dan alur kerja yang lebih cerdas dan lebih mudah dibayangkan.
Untuk pertemuan pertama, pena dan kertas biasanya cukup untuk memulai, tetapi pada akhirnya, opsi-opsi sebelumnya akan digantikan oleh wireframing digital. Banyak alat bantu wireframing untuk desainer UX yang memberikan jenis model yang dibutuhkan pada tahap proses pengembangan ini.
Wireframe mid fidelity memperkenalkan detail baru? mungkin, jarak, atau saran proporsi dan posisi komponen UI memungkinkan Anda membuat wireframe dengan kualitas yang sesuai untuk komunikasi pemangku kepentingan dan klien.
Bingkai gambar dengan ketelitian tinggi
Di bagian atas tumpukan, wireframe menampilkan tata letak sempurna piksel (wireframe dengan ketelitian tinggi) dengan halaman yang disajikan secara profesional, hanya beberapa langkah dari tahap selanjutnya versi prototipe. Membangun wireframe dengan ketelitian tinggi membutuhkan penggunaan alat bantu desain UX spesialis, yang memungkinkan pengenalan interaktivitas, lebih banyak detail visual, dan opsi yang lebih mudah dipahami yang mencakup beberapa implikasi teknis yang tidak dapat dilakukan oleh halaman statis atau wireframe kertas.
Beralih dari wireframe statis ke versi digital menciptakan peluang ideal untuk pembuatan prototipe cepat dan pengujian pengguna tahap awal.
Dengan penelitian tambahan, pemikiran lebih lanjut, dan pertimbangan, sesuatu yang lebih terorganisir dapat membantu setiap tim mempertimbangkan elemen mana yang berhasil dan mana yang tidak, serta memberikan rencana yang lebih baik dan lebih terstruktur tentang bagaimana cara melanjutkannya.
Wireframe dengan ketelitian tinggi memberikan versi yang penuh harapan dan sudah dipaku yang dapat diubah oleh para desainer, subjek uji coba, dan pemangku kepentingan sebelum melanjutkan ke tahap berikutnya. Ini adalah wireframe yang membuat semua orang berada di halaman yang sama - ini adalah cetak biru untuk membangun tahapan proses selanjutnya. Dengan demikian, halaman statis ini sering kali menjadi titik yang tepat untuk mempertimbangkan untuk memperkenalkan fase desain antarmuka pengguna dan prototipe yang lebih rinci.
Mengapa menggunakan wireframe dan proses wireframing?
Wireframe membantu desainer UX untuk memutuskan konten, informasi, dan fitur apa yang dibutuhkan setiap platform, bagaimana konten, informasi, dan fitur tersebut dapat dan harus disusun, bagaimana hierarki bekerja, dan apa artinya bagi perilaku dan ekspektasi pengguna.
Apakah platform Anda akan memuaskan kebutuhan pengguna Anda? Membuat wireframe harus dapat memberikan keuntungan sebagai berikut:
- Cepat dan mudah untuk membuat, mengubah, menghapus, atau mengerjakan ulang
- Membantu tim, pemangku kepentingan, dan operator yang terlibat dalam proses desain untuk memahami setiap peluang, tetap fokus, dan tetap berada di halaman yang sama
- Mendefinisikan dan menyajikan fitur dan operasi tanpa menggunakan deskripsi yang rumit, atau jargon desain
- Pengujian manual tahap awal tanpa memilih opsi yang membutuhkan waktu dan keahlian teknologi
- Pemangku kepentingan dapat mempertimbangkan apakah produk atau platform memenuhi persyaratan mereka
- Untuk menentukan alur logis antara halaman, layar, dan tindakan
- Mendeteksi kesenjangan dalam, dan memahami, perjalanan pelanggan
Wireframe UX ? diskusi dimulai di sini
Di mana, bagaimana, dan mengapa? Ini adalah pertanyaan-pertanyaan yang harus Anda ajukan pada setiap elemen situs Anda.
Jawaban Anda menentukan UX dan UI situs web, aplikasi, atau platform digital lainnya, sehingga setiap wireframe UX atau UI membantu Anda, pengguna, dan mitra Anda untuk melihat gambaran besar dengan lebih jelas dalam struktur yang ditentukan.
Kerugian dari pengujian wireframe
- Metode ini bersifat statis, jadi bukan metode pengujian terbaik menurut standar saat ini. Metode ini berguna untuk debat dan diskusi, namun tidak terlalu bagus untuk mengungkapkan reaksi aktual dan wahyu pengguna.
- Ini adalah pilihan yang buruk untuk menyajikan kekuatan animasi, transisi, dan efek pada perhatian dan reaksi pengguna. Tidak ada fasilitas yang sama untuk mempertimbangkan emosi pengguna pada citra yang diungkapkan oleh alat penelitian desain alternatif.
- Wireframe membutuhkan imajinasi. Desainer UX akan memiliki hal tersebut dengan berlimpah, namun Anda tidak dapat menjamin klien dan pengguna uji coba Anda akan memiliki kedalaman visi yang sama.
- Perlu waktu untuk membuat penyampaian yang dapat dipahami oleh semua orang. Mendapatkan masing-masing pihak pada halaman yang sama bisa memakan waktu beberapa putaran untuk meyakinkan mereka. Teknologi atau praktik yang unggul dapat membawa mereka ke sana lebih cepat.
Cara membuat bingkai foto
- Jaga agar tetap sederhana.
- Hilangkan semua warna; warna hanya berfungsi sebagai pengalih perhatian? Tetaplah pada warna hitam, putih dan abu-abu.
- Jangan gunakan foto, font dekoratif, atau merek (yang semuanya akan muncul kemudian).
- Gunakan simbol, placeholder, dan representasi yang paling sederhana dari elemen yang biasa kita lihat di halaman yang serupa.
Ketika Anda mulai membuat wireframe Anda sendiri, Anda harus dapat menghapus, mencoret-coret, dan mereproduksi setiap elemen dengan setiap saran, alternatif, atau perbaikan yang baru dan berharga, atau yang diminta. Proses ini dirancang untuk mengejar kemungkinan dan peluang dengan cepat dan mudah.
Jangan terlalu mementingkan gambar rangka Anda. Tugas mereka adalah untuk dihapus dan diganti dengan mudah - itulah mengapa kami membuatnya tetap sederhana dan belajar membuat wireframe cepat dengan cepat. Jika satu rute tidak berhasil, tinggalkan rute tersebut, dan susun rute berikutnya yang mungkin berhasil.
Wireframe adalah tentang umpan balik. Apa yang berhasil, apa yang tidak, dan apa yang dapat membuat segalanya sepuluh kali lebih baik bagi pengunjung Anda, mencapai tujuan mereka dengan lebih cepat dan lebih bahagia sepanjang perjalanan mereka.
Mana yang lebih baik: berpegang teguh pada sketsa sederhana atau menggunakan alat wireframe profesional?
Salah satu dan keduanya. Tergantung pada sistem Anda, di mana Anda berada dalam proses dan fasilitas yang Anda miliki.
Tim yang berbeda akan memiliki proses yang berbeda dengan rencana dan keahlian yang berbeda; kita semua harus bermain sesuai dengan kekuatan kita, jadi harapkan desainer Anda memberikan hasil yang sesuai dengan mereka. Ini semua tentang menyelesaikan pekerjaan dengan cara terbaik yang mereka bisa, sesederhana dan sesederhana mungkin. Sebagian besar memulai dari yang paling sederhana (dengan wireframe kertas yang paling dasar), bekerja dengan tangga ketepatan saat elemen dan proses menjadi lebih konkret.
Penelitian UX bertemu dengan wireframe UX
Saat mendesain ulang platform yang sudah usang atau gagal atau membuat sesuatu yang baru, penelitian UX Anda menentukan data dan dorongan pengguna Anda.
Setiap peluang wireframe membantu mengungkap alternatif dan opsi alur kerja yang lebih disukai. Selama tahap berikutnya, pembuatan prototipe mengungkapkan bagaimana perasaan pengguna, dan akhirnya, semuanya bersatu pada tahap desain, menunjukkan bagaimana seharusnya bekerja sebagai produk jadi.
Di mana kita menerapkan riset pengguna?
Mengenai riset dan wireframe, langkah-langkah mendasar yang sama diperlukan seperti memulai dari proyek halaman kosong. Perbedaannya adalah kami menerapkan data penelitian kami:
- Mengatur alur kerja
- Menilai urutan
- Menetapkan fungsionalitas
- Menghadirkan tata letak yang ideal untuk pengalaman optimal pengguna
Menggunakan riset yang telah ditentukan selama langkah pertama tersebut memberikan platform yang terdidik untuk membangun, memberikan akurasi atas asumsi ke seluruh alur kerja dan setiap bagian yang lebih kecil.
Wawancara, kelompok fokus, survei, dan studi dapat memberikan data instrumental dan penggerak alur kerja di awal setiap proyek.
Apa yang kita pelajari dari penelitian semacam itu?
Penelitian UX mengungkapkan tujuan untuk setiap aplikasi, kemungkinan masalah, perilaku, kebutuhan, dan keinginan. Melihat pesaing yang ada atau alur kerja sebelumnya dapat menyoroti tantangan dan keberhasilan utama operasi sebelumnya, memberikan diskusi tentang cara melakukan sesuatu dengan lebih baik.
Memetakan alur kerja dan urutan dalam wireframe memberikan perjalanan visual yang jauh lebih mudah dipahami dan juga menentukan jumlah langkah yang diperlukan untuk mencapai tujuan tertentu.
Bagaimana kita harus menerapkan temuan-temuan itu?
Fungsionalitas yang disempurnakan dari setiap sistem yang ditingkatkan, harus menyertakan semua elemen yang berharga, dan bagian yang tidak perlu dibuang. Dengan memeriksa alur kerja dan kebutuhan serta reaksi pengguna, kami dapat memberikan setiap tata letak yang baru dengan pengalaman pengguna yang ditingkatkan.
Akankah alat prototipe menggantikan UX dan wireframe UI dalam penelitian UX?
Setiap gambar rangka adalah kerangka desain UX Anda pada saat itu. Tujuannya adalah untuk memberikan tampilan yang dapat dipahami semua orang, melihat di mana posisi proses saat ini, dan mendiskusikan ke mana arahnya.
Karena teknologi kami menjadi lebih inovatif dan intuitif, setiap alat yang kami gunakan untuk menyajikan alur kerja dan mendorong diskusi menjadi lebih mudah digunakan. Mereka menyediakan persilangan dan opsi yang jauh lebih baik bagi para peneliti UX untuk digunakan dalam perjalanan desain dan penelitian mereka.
Kami melihat alat pembuatan prototipe terus menggantikan wireframing dalam penelitian UX, karena pembuatan prototipe memberikan lebih banyak peluang untuk pengujian, umpan balik, dan kegunaan. Alat ini juga memberikan peluang yang jauh lebih unggul untuk menguji alur dan proses secara fisik di arena digital waktu nyata.
Menyampaikan data yang dapat digunakan membutuhkan lebih dari sekadar sketsa dan dialog pengantar
Di bidang penelitian, kami berusaha keras untuk mendapatkan data yang mendorong pengambilan keputusan - baik untuk persetujuan pengguna maupun klien. Opsi prototipe dengan ketelitian tinggi memberikan lebih banyak hal yang kami butuhkan daripada kebanyakan percakapan wireframe tahap pertama.
Dengan kemudahan pengoperasian semua alat digital yang menjadi lebih sederhana, ini merupakan lompatan yang tampaknya sederhana untuk membuat prototipe alih-alih menggunakan kertas dan pena atau bahkan perangkat lunak wireframe khusus. Jika mereka memberikan hasil yang lebih berkualitas, membuat prosesnya menjadi lebih mulus, mudah, dan cepat - terutama di tangan para peneliti UX - maka mengapa mereka tidak menjadi alat yang digunakan dan diandalkan untuk melangkah maju?
Jika Anda ingin tahu lebih banyak tentang wireframing dan bagaimana melakukan penelitian UX dengan wireframe, email kami di hello@ux247.com.