Prototipe Canggih – Mengapa Menggunakan Axure

“Desain bukan hanya seperti apa yang terlihat dan terasa. Desain adalah cara kerjanya.” – Steve Jobs

Prototipe telah terbukti sangat berharga untuk membuat keputusan desain yang lebih baik. Sebagai artefak, prototipe adalah salah satu hasil inti dalam desain dan pembuatan prototipe UX, dan sebagai aktivitas, merupakan inti dari proses desain yang berpusat pada pengguna. Prototipe adalah penggabungan dari semua pekerjaan desain UX sebelumnya yang digabungkan menjadi satu, visual, produk yang berfungsi yang digunakan untuk memvalidasi hipotesis dan menguji desain.

Kedengarannya cukup mudah, tetapi di dunia yang dipenuhi dengan banyak alat desain, memilih alat prototyping yang tepat bukanlah tugas kecil yang membutuhkan pertimbangan cermat. Desainer perlu mempertimbangkan biaya, fitur, integrasi dengan alat desain lainnya, kurva pembelajaran, fitur kolaborasi, dan platform pemutaran untuk peninjauan dan pengujian pengguna.

Untuk memperumit masalah, banyak pendatang baru baru-baru ini muncul. Ada alat khusus online, misalnya, Figma, InVision, UXPin, Framer, Marvel, Prinsip, Origami, dan beberapa adalah perangkat lunak desktop tradisional seperti Sketch dan Adobe XD dengan prototipe bawaan sebagai perluasan fungsinya. Mereka semua memiliki pro dan kontra, fitur, dan integrasi.

Tapi yang baru tidak selalu lebih baik. Masih ada beberapa kuda perang tua di medan perang: Axure adalah salah satunya. Ketika desainer ingin menghadirkan prototipe yang kaya fitur dan mendetail, Axure layak untuk dilihat lagi. Axure telah ada untuk sementara waktu, bertahun-tahun sebelum alat yang baru dicetak yang disebutkan di atas lahir, dan banyak desainer menganggapnya sebagai kakek dari alat wireframing dan prototyping yang diberkahi dengan kemampuan yang mendalam.

Mengapa Menggunakan Axure?

Saat ini, sebagian besar, desainer menggunakan alat prototipe berbasis hotspot untuk menghubungkan layar, dan mungkin menambahkan beberapa transisi layar. Masalahnya, metode ini tidak menyertakan interaksi kecil yang melengkapi pengalaman pengguna secara keseluruhan selama pengujian. Sebaliknya, Axure dapat dengan mudah menangani detail halus dan interaksi mikro yang menghidupkan prototipe.

Untuk mengeksplorasi lebih dalam bagaimana orang akan berinteraksi dengan desain tertentu, desainer dapat membangun prototipe dengan logika kondisi, berbagai masukan pengguna, dan animasi dinamis yang membuat prototipe terlihat lebih realistis. Ini adalah cara terbaik untuk mendapatkan wawasan berharga tentang apa yang berhasil dan apa yang tidak.

Harus melompat-lompat terlalu banyak aplikasi desain yang tidak terintegrasi juga menghadirkan masalah inefisiensi. Alur kerja desain yang khas melibatkan seorang desainer yang membuat UI di Sketch dan membuat prototipe di alat lain seperti InVision atau Marvel. Setelah itu, desain diserahkan kepada pengembang menggunakan alat lain, seperti Zeplin.

Axure adalah aplikasi terintegrasi yang menghilangkan kebutuhan untuk menggunakan alat desain yang berbeda. Misalnya, setelah membuat alur pengguna, peta perjalanan pelanggan, persona, storyboard, peta situs, arsitektur informasi, dan gambar rangka, desainer dapat dengan mudah melanjutkan ke prototipe kompleks—langsung di dalam Axure. Ketika desainer menyerahkan proyek kepada pengembang, mereka bisa mendapatkan pemahaman yang lebih baik tentang bagaimana sesuatu harus diimplementasikan dan dapat bekerja lebih efektif dengan manajer produk untuk memperkirakan ruang lingkup dan menilai kelayakan teknis.

Hambatan terbesar untuk memberikan produk dan layanan yang dirancang dengan baik adalah kurangnya pemahaman tentang pengguna kami. Jared Spool, UIE (User Interface Engineering)

Mirip dengan alat desain lainnya, Axure dapat diambil dengan cepat dan digunakan dengan cepat. Widget bawaan yang dapat digunakan untuk membangun interaksi dinamis yang bahkan dapat dipahami oleh non-programmer dapat langsung digunakan untuk interaksi yang mengesankan. Desainer yang ingin mendalami dan menginvestasikan waktu untuk mempelajari aplikasi dapat membangun situs web dan aplikasi yang kompleks dan realistis dengan interaksi yang rumit.

Contoh Prototipe Axure di kehidupan nyata

Desainer selalu kekurangan waktu dan perlu menunjukkan bagaimana alur pengguna tertentu akan bekerja dalam ulasan dan menguji desain produk lebih awal dengan pengguna. Kemampuan dasar Axure dapat bersinar dalam skenario ini karena desainer dapat dengan cepat mengubah gambar dari alat desain lain menjadi prototipe interaktif.

Dalam contoh produk B2B di bawah, serangkaian layar diekspor dari OmniGraffle sebagai PNG. Gambar di-crop, di-mask, dan di-layer di Axure. Selanjutnya, hotspot dan komponen interaktif ditambahkan dari pustaka widget Axure, seperti menu tarik-turun dan bidang formulir, untuk membuat prototipe yang kaya dan fungsional. Fitur dan fungsionalitas produk kemudian diuji menggunakan pengujian pengguna jarak jauh yang dimoderasi, yang menghasilkan iterasi desain cepat berdasarkan umpan balik pengguna.

Dalam contoh lain, tim desain dan teknik dapat menemukan cara terbaik untuk merancang dua widget yang sangat rumit untuk produk B2B yang kompleks. Tujuannya adalah untuk merancang filter lanjutan dan pemilih kolom khusus untuk tabel data-berat yang akan meningkatkan kegunaan dan juga layak secara teknis.

Dalam skenario ini, gambar dari status berbeda diekspor dari Sketch, dan interaksi cepat ditambahkan dan dianimasikan di Axure. Komponen UI ditambahkan, seperti tombol dan kotak centang, untuk mendemonstrasikan interaksi dan efeknya. Tim melewati beberapa iterasi yang ditinjau dan diuji. Dengan alat prototyping lainnya, upaya ini mungkin memakan waktu lebih lama.

Fitur dan Manfaat Axure

Saya baru-baru ini bekerja di sebuah perusahaan yang hanya menggunakan prototipe layar-ke-layar dasar yang dibuat dengan InVision dan tidak pernah melakukan banyak pengujian pengguna. Untuk menguji fitur produk utama yang akan datang, saya ditugaskan untuk membuat prototipe produk yang terperinci. Banyak yang memanfaatkan fitur baru ini, dan pemangku kepentingan ingin melakukannya dengan benar.

Saya hanya membutuhkan waktu kurang dari dua hari untuk membuat prototipe terperinci di Axure dengan status berbeda dan banyak interaksi mikro yang menunjukkan bagaimana produk akan berperilaku di bawah skenario yang berbeda. Sebagai manfaat yang tidak terduga, banyak kasus tepi muncul yang dapat ditangani oleh tim desain.

Saat menguji, kami dapat melihat di mana pengguna berjuang dengan desain dan mengapa , yang tidak mungkin dilakukan dengan prototipe yang kurang detail yang dibuat dengan layar statis. Hasilnya, kami dapat dengan cepat mengatasi masalah yang kami temukan.

Saya juga memberikan prototipe kepada pengembang untuk menunjukkan kepada mereka di mana titik henti sementara desain responsif, bagaimana fokus atau status kesalahan seharusnya terlihat, dan bagaimana pencarian prediktif seharusnya bekerja.

Ketika pengembang front-end bisa mendapatkan prototipe, itu membuat hidup mereka lebih mudah juga. Bahkan pengembang back-end menghargai prototipe karena mereka dapat melihat bagaimana produk akhir seharusnya bekerja.

Prototipe cepat, pengujian, dan implementasi fitur produk baru semacam ini jauh lebih cepat daripada pengembangan fitur lain yang pernah mereka lakukan sebelumnya, dan lebih sedikit masalah yang muncul saat sampai pada fase QA.

Ketika semua dikatakan dan dilakukan, semua orang di tim menyebutkan betapa membantunya prototipe terperinci itu dan meminta agar proses pembuatan prototipe semacam ini dilakukan lebih sering. Kesimpulannya adalah membuat, meninjau, dan menguji prototipe terperinci dapat membuat perbedaan besar. Seluruh tim dapat melihat interaksi penting dan komprehensif yang bermakna bagi pengguna.

Axure memungkinkan kita untuk menguji semuanya, bahkan kasus penggunaan yang paling kompleks. Prototipe kami terlihat dan bertindak seperti aslinya. Julie, Lab Pengalaman Pengguna

Fitur dan Kekuatan Axure

Desainer tidak perlu tahu cara membuat kode untuk membuat prototipe yang kompleks, dinamis, dan kaya fitur di Axure. Interaksi yang canggih dan rumit dapat diatur menggunakan panel Interaksinya dengan pernyataan “jika ini, maka itu”. Di bawah ini adalah daftar beberapa fitur tambahan Axure:

Prototipe Dasar dan Lanjutan

• Widget built-in untuk wireframing cepat dan prototyping
• Lingkungan seret dan lepas
• Membangun prototipe berbasis browser tanpa coding
• Membangun interaksi dari aset Sketch
• Emulasi seluler dan tampilan perangkat seluler
• Bidang formulir kerja yang memungkinkan input pengguna
• Menambahkan logika kondisional, variabel, dan ekspresi
• Bekerja dengan konten dinamis dan tampilan adaptif
• Menambahkan efek animasi
• Tampilan prototipe offline
• Pustaka widget khusus
• Integrasi dan plugin Adobe XD
• Berbagi prototipe di Axure Cloud yang dapat dilihat di browser

Penulisan bersama dan Kolaborasi

• Axure RP dan Axure Cloud memungkinkan banyak orang untuk mengerjakan proyek yang sama secara bersamaan.

Aset Bersama

• Buat dan bagikan pustaka komponen interaktif, dan impor aset dari Sketch.

Serah Terima Pengembang

• Publikasikan desain dari RP dan Sketch ke Axure Cloud untuk redline otomatis plus CSS dan ekspor gambar.

Dokumentasi dan Spesifikasi

• Buat alur proses, pembongkaran produk, dan spesifikasi visual.

Studi Kasus Mini Prototipe Axure

Untuk menampilkan kemampuan Axure yang melampaui prototipe layar-ke-layar yang sederhana, saya membuat beberapa layar dengan interaksi halus untuk Zalando—situs eCommerce yang sudah ada. Setelah selesai, semua rangkaian prototipe ini diekspor ke HTML dan dapat ditinjau di browser oleh siapa saja, di mana saja menggunakan Axure Cloud.

Pertama, saya membuat beberapa interaksi situs yang mendemonstrasikan menu mega, pencarian, pengguliran horizontal melalui produk, memfavoritkan, dan mendaftar untuk buletin.

Pada halaman daftar produk, saya membuat efek hover pada thumbnail di bawah gambar produk utama untuk menampilkan produk dalam warna yang berbeda (bertukar gambar pada hover). Saya juga menambahkan memfavoritkan produk lagi dan widget dropdown untuk memfilter halaman daftar produk dengan menetapkan kisaran harga.

Selanjutnya, dengan nada yang sama seperti layar di atas, saya ingin mendemonstrasikan menukar gambar produk yang berbeda saat mengarahkan kursor ke gambar mini pada halaman detail produk. Saya juga menambahkan fungsi hover lainnya sehingga pembeli dapat melihat deskripsi produk, info tentang ukuran dan kecocokan, pengiriman, dan ulasan. Terakhir, saya memasukkan pemilih ukuran dan menambahkan produk ke keranjang belanja.

Mengilustrasikan alur pengguna berikut, saya ingin menunjukkan bagaimana mengelola keranjang belanja akan bekerja—misalnya, menghapus produk dari keranjang—menggunakan animasi slide, fade, dan penggantian elemen yang halus. Tidak ada kode yang digunakan untuk membuat interaksi mikro yang halus ini.

Last but not least, saya ingin menunjukkan transformasi UI yang halus pada layar masuk ketika orang memasukkan informasi masuk yang salah dan pesan kesalahan apa yang akan ditampilkan.

Interaksi halus dan transformasi UI ini berguna saat menguji fitur produk karena desainer dan peneliti pengguna dapat melakukan pengujian pengguna yang lebih mendetail dan mendapatkan wawasan yang lebih dalam tentang reaksi orang terhadap situs eCommerce. Mereka menunjukkan tampilan dan nuansa spesifik dan canggih yang tidak mungkin atau mungkin terbukti sangat sulit dibuat dengan alat prototyping lainnya.

Ringkasan

Dalam mencari alat wireframing dan prototyping terbaru dan terhebat, desainer terkadang mengabaikan alat yang sudah mapan dan mampu yang telah teruji oleh waktu.

Desainer harus memberi Axure tampilan lain. Karena kedalaman, rangkaian fitur, dan fleksibilitasnya, Axure adalah alat yang andal dan tangguh dibandingkan dengan solusi lain, dan perusahaan terus memperbaruinya untuk mempertahankan relevansinya sebagai alat desain.

Uji coba gratis Axure tersedia untuk diunduh. Desainer dapat mengekspor UI dari Sketch, mengimpor ke Axure, dan membuat prototipe yang tampak realistis. Ada juga banyak tutorial yang tersedia untuk setiap jenis proyek (di YouTube dan situs Axure), dan widget Axure yang siap pakai juga tersedia secara luas untuk diunduh (gratis dan berbayar).

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Sempurnakan Proses Desain UX Anda – Panduan untuk Desain Prototipe
• 10 Hasil Kerja UX yang Digunakan Desainer Teratas
• Mitos UX – Pembuatan Prototipe, Pengujian Pengguna, dan Hasil Kerja UX
• Tutorial Pembingkai: Cara Membuat Prototipe Interaktif yang Menakjubkan
• Kuasai Kerajinan Anda dengan Alat UX Teratas Ini