UX Pengujian A/B untuk Kerangka Berbasis Komponen

Menjadi akrab dengan pengkodean bisa sangat bermanfaat bagi desainer. Akibatnya, banyak yang terjun dan belajar bagaimana bekerja dengan kode (atau setidaknya berbicara bahasanya sampai tingkat tertentu) sebagai cara untuk menjadi lebih efektif ketika berkolaborasi dengan para insinyur. JavaScript, bisa dibilang bahasa scripting favorit web, memiliki komunitas kuat yang membentuk masa depan web dengan kerangka kerja yang dibuatnya.

Sebagai akibat dari struktur dan kendala teknis mereka, Kerangka kerja seperti Vue.js, React.js, dan Material UI penting untuk dipertimbangkan oleh desainer karena mereka bertindak sebagai blok pembangun untuk sistem desain yang kuat. Selain itu, mengetahui cara kerja kode juga berguna saat memfasilitasi teknik desain berbasis data di lingkungan pengembangan seperti pengujian A/B.

Pada proyek baru-baru ini untuk startup yang membuat platform manajemen pasien untuk menghubungkan individu dengan profesional kesehatan mental, kami menemukan bahwa menyiapkan dan mengelola akun pasien dengan gesekan sesedikit mungkin adalah kunci bagi sejumlah penasihat klinis kami. Berfokus pada menciptakan pengalaman penelusuran intuitif untuk profil pasien sangat penting, seperti halnya menyiapkan alur pengguna yang optimal untuk membuat, mengedit, dan menetapkan aktivitas kesehatan kepada pasien.

Membahas proyek dengan pimpinan teknis, diputuskan bahwa pada dasarnya, aplikasinya cukup sederhana: Dokter membutuhkan kemampuan untuk membuat dan mengedit profil pasien, melihat perpustakaan aktivitas kesehatan, dan memberikan pelajaran kepada pasien.

Tim memutuskan untuk menyelaraskan desain proyek dengan kerangka UI Material, memanfaatkan elemen dasar seperti modal popup, kartu tampilan, tombol aktif/tidak aktif, daftar akordeon, dan serangkaian pemberitahuan keberhasilan dan peringatan. Setelah komponen yang akan membentuk elemen dasar ditentukan, tim produk menawarkan berbagai pendapat tentang tata letak aplikasi.

Selama diskusi tentang desain UI proyek, pengembang menjelaskan perbedaan antara komponen fungsional dan tampilan dan bagaimana komponen fungsional mengontrol aliran data aplikasi sedangkan komponen tampilan relevan dengan UI dan tata letak.

Sederhananya, komponen tampilan menentukan bahasa visual aplikasi, dan komponen fungsional membantu menghidupkannya .

Struktur ini menawarkan kemungkinan unik untuk desainer karena, biasanya, kode yang berkaitan dengan pengelolaan logika aplikasi diisolasi ke file yang terpisah dari yang mengontrol tata letak UI. Dilakukan dengan benar, pendekatan desain perangkat lunak ini memastikan basis kode yang modular dan kuat yang memungkinkan proses yang digerakkan oleh pengujian.

Bisakah fitur identik dalam tata letak alternatif diuji dengan upaya rekayasa minimal? Jawabannya adalah “Ya”, dan jika dilakukan dengan metode A/B di awal proses, metode tersebut akan dimasukkan ke dalam siklus hidup pengembangan produk lean. (Pengembangan produk ramping adalah spin-off dari konsep kaizen Jepang, filosofi bisnis untuk membuat peningkatan bertahap pada alur kerja, praktik, teknik, dan—dalam hal ini—produk.)

Eric Ries, pengusaha serial dan penulis, membahas panduan praktis untuk siklus hidup pengembangan produk lean dalam bukunya The Lean Startup . Metode ini mengikuti alur kerja membangun produk dengan hipotesis yang jelas, menguji apa yang dibangun, dan mengulangi berdasarkan apa yang dipelajari.

Metode Lean Startup

Mendefinisikan Pendekatan Pengujian A/B

Pengujian A/B adalah komponen inti dari toolkit profesional UX mana pun yang berpengalaman. Perannya dalam siklus hidup pengembangan perangkat lunak adalah untuk membantu meningkatkan kegunaan aplikasi. Dikombinasikan dengan data pemetaan panas, tim dapat memperoleh wawasan berharga tentang perilaku pengguna, terutama jika menyangkut titik gesekan dalam aliran aplikasi.

Sebelum memulai pengujian A/B, berikut adalah beberapa pertanyaan untuk memfokuskan proses:

• Bagaimana pengujian A/B digunakan di UX?
• Metode analisis A/B apa yang tersedia?
• Mengapa mendesain pengujian A/B saat wireframing?
• Untuk apa kita menguji?

Metode pengujian A/B yang paling umum dalam skala besar adalah pengujian terpisah yang menyajikan versi aplikasi atau situs web yang sedikit berbeda kepada pengguna langsung. Tes terpisah sering kali di luar cakupan dan/atau anggaran untuk startup atau bisnis kecil. Namun, ada alternatif untuk pengujian terpisah skala besar yang lebih mudah diakses dan mencakup: wawancara langsung, grup fokus, dan layanan online yang menghubungkan Anda ke jaringan pengguna pengujian.

Desain Berbasis Pengujian A/B

Selama proses wireframing, penting untuk mempertimbangkan kemungkinan pengujian A/B dari perspektif tata letak dan navigasi. Variasi sederhana dari komponen tampilan dapat dengan mudah mengubah cara informasi disajikan. Kerangka kerja berbasis komponen memberi Anda kebebasan untuk bereksperimen dengan cara konten diatur tanpa harus merekayasa ulang fungsionalitas inti produk.

Seperti upaya desain lainnya, pengujian A/B yang efektif harus mengikuti metodologi yang didefinisikan dengan jelas. Pertama, putuskan variabel apa yang Anda uji. Selanjutnya, tentukan apa yang dimaksud dengan kesuksesan. Selesaikan dengan mengevaluasi data dan menentukan apa langkah selanjutnya yang harus dilakukan.

Misalnya, dalam satu kasus, hierarki tata letak diuji. Tata letak A terdiri dari kisi dua kolom yang memiliki komponen daftar pasien di sebelah kiri layar dan komponen profil pasien di sebelah kanan. Tata letak B memiliki daftar pasien satu kolom yang akan mengklik komponen profil pasien.

Tes pertama kami adalah untuk kejelasan. Kami bertanya kepada penasihat klinis dalam sesi wawancara yang mana dari dua desain yang terasa paling terorganisir. Berlawanan dengan asumsi internal, kisi satu kolom diindikasikan dengan kuat sebagai solusi desain yang lebih intuitif. Penasihat kami merasa bahwa kombinasi daftar pasien dan profil dalam tampilan yang sama terasa "sibuk" dan "berantakan". Sebaliknya, kata-kata yang digunakan untuk menggambarkan tata letak kotak satu kolom jelas dan “bersih.”

"Model Kotak Komponen"

Untuk aplikasi web ini, kami menggunakan React, sebuah kerangka kerja yang didasarkan pada konsep manajemen keadaan dan komponen modular. React adalah library JavaScript deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna. Ini memungkinkan Anda membuat UI kompleks dari potongan kode kecil yang terisolasi yang disebut "komponen." Modularitas ini diterjemahkan menjadi fleksibilitas saat mengerjakan produk yang melibatkan pengembang dan desainer.

Saya memahami kerangka kerja ini dengan inspirasi dari model kotak HTML+CSS. Model Kotak Komponen menawarkan modalitas organisasi yang dapat digunakan untuk membuat blok bangunan untuk aplikasi. Ini sangat cocok untuk mengembangkan sistem desain untuk proyek yang berkembang pesat.

Agar pemikiran desain tetap gesit, serangkaian prinsip desain yang sangat cocok untuk siklus hidup pengembangan produk ramping dapat diikuti.

• Prinsip pertama: Kelompokkan konteks dan tindakan yang serupa .
• Prinsip kedua: Biarkan arsitektur informasi membantu menyederhanakan aliran "keadaan" antar komponen.
• Prinsip ketiga: Rancang sistem visual yang dapat diskalakan untuk merampingkan cara pengembang memahami dan mengimplementasikan desain.

Mengelompokkan Konteks Serupa

Pertimbangkan model mental pengguna Anda—kelompokkan hasil dan tindakan serupa berdasarkan “konteks penggunaan” mereka. Pertimbangkan apakah pengguna perlu membuat, membaca, memperbarui, dan menghapus item dalam setiap konteks, dan jika Anda perlu memberikan umpan balik untuk tindakan mereka. Saat menentukan pengujian A/B untuk skenario penggunaan tertentu, pertimbangkan tata letak, cara mengakses input, dan metode navigasi.

Sederhanakan Alur Interaksi “Negara”

Di React, aliran "status" mengacu pada bagaimana informasi bergerak di seluruh aplikasi, bagaimana komponen membantu mengatur data dan bagaimana itu ditampilkan. Biasanya, status mengalir ke komponen tampilan dari komponen fungsional yang bertindak sebagai wadah. Desainer dapat mempersiapkan pengujian A/B dengan menguraikan terlebih dahulu bagaimana komponen fungsional dapat mengubah tata letak aplikasi dengan mengubah cara penilaian komponen tampilan.

Kembangkan Sistem Desain yang Kuat

Menggunakan komponen tampilan untuk mengembangkan standar elemen visual seperti tipografi, tombol, input, modal, dan kartu membantu menyediakan blok bangunan untuk bahasa desain standar. Sistem visual yang kuat memiliki fleksibilitas untuk menjaga desainer dan pengembang UX pada halaman yang sama tentang komponen yang direferensikan dalam gambar rangka.

Ringkasan

Keberhasilan desain berbasis pengujian A/B terkait dengan sinergi antara produk dan tim teknis. Desainer yang ingin mengadopsi metode ini harus tepat tentang di mana dan bagaimana menguji. Luangkan waktu untuk mengembangkan hipotesis dan menentukan apa yang ingin Anda temukan. Jangan terganggu. Patuhi itu—sangat mudah untuk menyimpang dari metode Anda.

Proses ini tidak pernah benar-benar selesai dan berkembang seiring dengan pertumbuhan produk. Desainer yang menggunakan strategi pengembangan produk yang digerakkan oleh tes harus memanfaatkan peluang untuk pembelajaran yang muncul di sepanjang siklus hidup pengembangan produk.

Komponen, seperti halnya sistem desain, adalah tentang modularitas dan penggunaan kembali pola, bukan tentang tata letak atau gaya. Dari sudut pandang desainer, fleksibilitas untuk menguji, menyempurnakan, dan meningkatkan produk dengan pengujian A/B dapat membantu mengembangkan produk yang lebih berpusat pada pengguna, yang pada akhirnya mengarah pada kesuksesan yang lebih besar.

•••

Bacaan lebih lanjut di Blog Desain Toptal:

• Memanfaatkan Model Mental dalam Desain UX
• Pengujian UX untuk Massa: Tetap Sederhana dan Hemat Biaya
• Panduan Dasar untuk Kegunaan Seluler
• Nilai Penelitian Pengguna
• Memahami Sistem dan Pola Desain