Desain blok bangunan: strategi desain modular untuk UXers

Artikel yang membantu mengisi celah model desain modular dari perspektif UX.

Saya akan mulai dengan sebuah cerita

Jika Anda membenci cerita, Anda harus melewati bagian ini. Ini tentang seorang desainer UX yang ditugaskan untuk memperjuangkan strategi desain modular untuk organisasinya. Dia memiliki rambut cokelat pendek dan mata biru. Jika Anda belum bisa menebaknya sekarang, desainer UX itu adalah saya.

Sekitar delapan bulan yang lalu, tim kami mendukung strategi desain modular yang disebut object-oriented UX (OOUX). Tidak seperti sistem modular luas lainnya, OOUX meminta Anda untuk fokus pada modularisasi jenis konten inti Anda - apa yang disebut OOUX objek - dan perhatikan bagaimana benda-benda ini berhubungan satu sama lain. Proses ini membantu tim desain mengekspos instance yang melekat dari navigasi kontekstual dan mendorong modul UI yang konsisten.

Yah ... itu bagus untuk mendesain arsitektur informasi dan perpustakaan pola, tetapi bagaimana dengan mendesain pengalaman. Setelah semua, memobilisasi konten Anda hanya setengah pertempuran. Jika Anda akan berada di garis depan UX, Anda harus bertanya mengapa dan bagaimana.

Mengapa dan bagaimana

Anda mungkin berkata pada diri sendiri: "jangan beri tahu saya tentang mengapa dan bagaimana! Saya seorang peneliti UX, sial! Saya makan mengapa dan bagaimana untuk sarapan.

Saya tidak berbicara tentang strategi di tingkat fitur. Saya tidak berbicara tentang aliran proses, gambar rangka, dan prototipe. Saya berbicara tentang strategi tingkat aplikasi. Anda tahu, hal yang harus selalu kita lakukan, tetapi entah bagaimana tidak pernah punya waktu untuk itu? Dan saya berbicara tentang menjadikannya bagian integral dari pendekatan kami terhadap strategi kami yang lain, seperti desain modular.

Untuk memberi Anda sedikit lebih banyak konteks, mari kita bicara melalui sebuah contoh. Katakanlah kita sedang merancang aplikasi kencan di mana salah satu konten inti adalah profil. Dengan desain modular, kami akan bertanya: "di mana konten ini muncul di UI?" - dan berdasarkan jawaban kami, kami akan merancang modul untuk masing-masing skenario tersebut. Mungkin kita akan mendesain profil yang dapat ditampilkan dalam daftar atau profil yang mengambil seluruh tampilan. Arsitektur informasi. Pola. Periksa, periksa.

Gaya

Tetapi sekarang kita telah memutuskan apa, apa yang terjadi ketika kita mau tidak mau menyadari bahwa kita perlu memikirkan mengapa seseorang ingin melihat profil tertentu? Dan bagaimana profil itu akan muncul untuk individu itu? Apakah kita menerapkan strategi itu setelah fakta dan berharap tidak ada yang rusak?

Saya harap Anda menggelengkan kepala di luar sana, karena jawabannya adalah tidak.

Alih-alih melompat lebih dulu ke merancang modul kami, kami harus membangun kerangka kerja strategis yang dapat membantu mendorong upaya desain kami dari setiap sudut. Alih-alih mendefinisikan wajah konten kami - hal-hal yang muncul di UI - kita harus mulai dengan mendefinisikan bagaimana dan mengapa hal itu mendukung konten itu. Ini disebut desain blok bangunan.

Masukkan desain balok penyusun

Alih-alih meminta Anda untuk memikirkan konten modul Anda terlebih dahulu, seperti model lainnya, desain blok bangunan meminta Anda untuk fokus pada strategi di balik konten itu.

Dalam membangun desain blok, biarkan strategi menyediakan kerangka kerja untuk desain; bukan sebaliknya.

Hanya setelah Anda menentukan strategi inti UX Anda - bingkai yang menahan konten Anda - Anda dapat mulai merancang bagaimana konten itu akan diwakili dalam antarmuka. Strategi "gambaran besar" untuk setiap konten inti adalah blok bangunan Anda. Bersama-sama, blok bangunan Anda menentukan UX produk Anda.

Desain building block adalah desain modular untuk UXers.

Anatomi blok bangunan

Untuk lebih memahami pendekatan ini dalam membuat konten yang bermakna dan terstruktur, mari kembali ke contoh aplikasi kencan. Sekarang saya telah mengidentifikasi sepotong konten inti dalam aplikasi saya - sebuah profil - saatnya untuk menelusuri dan mengidentifikasi strategi apa yang berpotensi mempengaruhi bagaimana blok ini dirancang. Dengan menjelajahi hubungan antara inisiatif strategis lain dan konten kami, kami dapat berpikir lebih kritis tentang bagaimana kami mendekati desain dan penyampaian informasi ini.

Anatomi blok profil mulai terbentuk.

Saat menjelajahi hubungan antara strategi tingkat aplikasi, yang terbaik adalah mulai dari tingkat tinggi dan turun terus. Misalnya, jika saya mengidentifikasi personas sebagai komponen utama strategi saya, saya dapat memecah strategi ini lebih lanjut dengan mengidentifikasi:

  • persona spesifik yang terlibat dengan profil;
  • di mana dalam aplikasi mereka berinteraksi dengan konten ini;
  • konteks penggunaannya;
  • tindakan inti yang mereka ambil pada profil;
  • dan seberapa sering mereka mengakses konten ini.

Mungkin terlihat seperti ini:

Hubungan persona-profil memberikan lebih banyak konteks untuk tampilan dan rasanya wajah blok profil saya.

Setelah saya memberikan sedikit konteks mengapa konten ini berharga bagi tipe pengguna tertentu, saya dapat mulai berpikir lebih kritis tentang tindakan apa yang perlu diprioritaskan, bagaimana modul harus disusun untuk mempromosikan pola perilaku spesifik perorangan, dan di mana dalam pengalaman konten ini perlu disampaikan.

Teknik ini memungkinkan desainer untuk fokus pada hal-hal yang penting dan tidak terjebak dalam daya tarik visual, rayuan interaksi, dan pola desain antarmuka lainnya yang terlihat bagus, tetapi tidak mendukung perilaku pengguna yang sebenarnya.

Jika saya mengulangi latihan ini dalam bentuk inisiatif strategis kedua, wawasan tambahan akan diperoleh. Bergantung pada jumlah dan kompleksitas inisiatif strategis yang Anda miliki, ini dapat dengan cepat menjadi proses yang intensif waktu. Saya sarankan memulai dengan tidak lebih dari dua strategi.

Jadi begitulah. Contoh cara membuat kaki Anda basah dengan desain balok pembangun. Jika Anda pikir ini akan menjadi latihan yang bermanfaat untuk tim desain Anda, lihat Panduan Mulai Cepat di bawah ini untuk beberapa tips tambahan. Dan, tentu saja, saya ingin mendengar pendapat Anda tentang semua hal yang termodulasi. Tambahkan komentar Anda di bawah atau hubungi LinkedIn.

Panduan mulai cepat

Saya telah menemukan bahwa banyak model desain modular di luar sana gagal memberikan pembaca mereka tindakan yang dapat dilakukan, jadi izinkan saya membuat poin untuk memberikan informasi yang berharga:

Langkah # 1: Inventarisasi strategi.

Kami melakukan inventarisasi konten dan komponen, jadi mengapa bukan inventaris strategi? Buat daftar semua strategi tingkat aplikasi yang Anda miliki. Contohnya termasuk: Persona, data, konteks penggunaan dan desain lingkungan manusia, daya tanggap, dll. Ini adalah kesempatan yang baik untuk berhenti sejenak dan bertanya "apakah kita memiliki strategi yang solid untuk aplikasi kita?" Jika jawabannya tidak, sekarang saatnya untuk mulai bekerja.

Untuk melakukan: Rally anggota tim untuk secara mandiri membuat inventaris strategi mereka sendiri.

Langkah # 2: Tentukan konten inti Anda.

Ini adalah hal yang dilakukan oleh pengguna Anda dalam aplikasi Anda. Untuk mengetahuinya, batasi waktu untuk sesi curah pendapat dengan tim Anda. Ajukan pertanyaan pada diri sendiri seperti: "Apa yang dicari pengguna saya? Melihat? Unduh? ”Setelah Anda mengidentifikasi selembar konten inti, tulis di selembar kertas dan gantung di dinding.

Untuk melakukannya: Adakan sesi curah pendapat awal dengan tim Anda.

Langkah # 3: Tentukan bagaimana dan mengapa.

Sekarang setelah Anda mengidentifikasi strategi tingkat aplikasi dan konten inti, sekarang saatnya untuk menyatukan keduanya! Kembali ke ruang curah pendapat Anda untuk pertemuan lanjutan, dan pastikan tim Anda membawa inventaris strategi mereka. Untuk bagian dari proses ini, mintalah tim Anda menempatkan strategi post-it note pada konten inti mana pun di mana strategi itu mungkin berdampak.

Untuk melakukan: Lakukan sesi curah pendapat tindak lanjut dengan tim Anda.

Langkah # 4: Anatomi blok bangunan.

Sudah waktunya untuk membagi dan menaklukkan. Tetapkan anggota tim sedikit jenis konten inti - atau blok bangunan - dan minta mereka mengulangi anatomi konten ini.

Untuk melakukannya: Tetapkan setiap anggota tim dengan beberapa jenis konten. Anggota tim itu harus mendefinisikan anatomi konten itu.

Langkah # 5: Sejajarkan, luruskan, luruskan

Sebagai langkah terakhir, kumpulkan kembali geng dalam bentuk presentasi sederhana di mana setiap anggota tim mempresentasikan anatomi blok bangunan mereka. Hemat waktu di akhir untuk pertanyaan, penyelarasan, dan keputusan tentang langkah selanjutnya untuk mengarahkan komponen strategis individu dari setiap blok bangunan.

Untuk melakukannya: Jadwalkan waktu bagi anggota tim untuk mempresentasikan anatomi blok bangunan mereka.

Artikel ini dipersembahkan oleh RUXERS untuk Anda. RUXERS adalah komunitas pemimpin pengalaman pengguna nyata yang berbagi dan mendiskusikan desain terbaru, pengalaman pengguna, kemudahan penggunaan, dan penelitian. Kami ada di Twitter - bergabunglah dengan kami!