Bileşen Tabanlı Çerçeveler için A/B Test UX

Kodlamaya aşina olmak tasarımcılara büyük fayda sağlayabilir. Sonuç olarak, birçoğu dalışa geçti ve mühendislerle işbirliği yaparken daha etkili olmanın bir yolu olarak kodla nasıl çalışılacağını (veya en azından bir dereceye kadar dilini konuşacağını) öğrendi. Muhtemelen web'in en sevilen betik dili olan JavaScript, oluşturduğu çerçevelerle web'in geleceğini şekillendiren güçlü bir topluluğa sahiptir.

Yapılarının ve teknik kısıtlamalarının bir sonucu olarak, Vue.js, React.js ve Material UI gibi çerçeveler, sağlam tasarım sistemleri için yapı taşları olarak hareket ettikleri için tasarımcılar için önemlidir. Ayrıca, A/B testleri gibi bir geliştirme ortamında veriye dayalı tasarım tekniklerini kolaylaştırırken kodun nasıl çalıştığını bilmek de işe yarar.

Bireyleri ruh sağlığı uzmanlarına bağlamak için bir hasta yönetim platformu oluşturan bir girişim için yakın zamanda yapılan bir projede, hasta hesaplarını mümkün olduğunca az sürtüşmeyle oluşturmanın ve yönetmenin bazı klinik danışmanlarımız için kilit önemde olduğunu gördük. Hasta profilleri için sezgisel bir tarama deneyimi oluşturmaya odaklanmak, hastalara sağlıklı yaşam etkinlikleri oluşturmak, düzenlemek ve atamak için en uygun kullanıcı akışını ayarlamak kadar çok önemliydi.

Projeyi teknik liderle tartışırken, uygulamanın temelde oldukça basit olduğu belirlendi: Klinisyenlerin hasta profilleri oluşturma ve düzenleme, sağlıklı yaşam etkinlikleri kitaplığını görüntüleme ve hastalara dersler atama becerisine ihtiyaçları vardı.

Ekip, açılır modeller, ekran kartları, etkin/etkin olmayan düğmeler, akordeon listeleri ve bir dizi başarı ve uyarı bildirimi gibi temel öğeleri kullanarak projenin tasarımını Malzeme Kullanıcı Arayüzü çerçevesiyle uyumlu hale getirmeye karar verdi. Temel öğeleri oluşturacak bileşenler tanımlandıktan sonra, ürün ekibi uygulamanın düzeni hakkında farklı görüşler sundu.

Projenin UI tasarımı hakkında tartışmalar sırasında geliştirici, işlevsel ve ekran bileşenleri arasındaki farkı ve işlevsel bileşenlerin bir uygulamanın verilerinin akışını nasıl kontrol ettiğini, oysa ekran bileşenlerinin UI ve düzen ile ilgili olduğunu açıkladı.

Basitçe söylemek gerekirse, ekran bileşenleri bir uygulamanın görsel dilini tanımlar ve işlevsel bileşenler onları hayata geçirmeye yardımcı olur .

Bu yapı, tasarımcılara benzersiz olanaklar sunar, çünkü tipik olarak, bir uygulamanın mantığını yönetmekle ilgili kod, UI'nin düzenini kontrol edenden ayrı bir dosyaya yalıtılır. Doğru yapıldığında, yazılım tasarımına yönelik bu yaklaşım, test odaklı bir süreç sağlayan modüler ve sağlam bir kod tabanı sağlar.

Alternatif yerleşimlerdeki özdeş özellikler minimum mühendislik çabasıyla test edilebilir mi? Cevap “Evet”tir ve sürecin başlarında bir A/B yöntemiyle yapılırsa, yalın ürün geliştirme yaşam döngüsüne dönüştürülecektir. (Yalın ürün geliştirme, iş akışlarında, uygulamalarda, tekniklerde ve bu durumda ürünlerde kademeli iyileştirmeler yapma iş felsefesi olan Japon kavramı kaizen'den bir yan ürün.)

Seri girişimci ve yazar Eric Ries, The Lean Startup adlı kitabında yalın ürün geliştirme yaşam döngüsüne ilişkin pratik bir kılavuzu tartışıyor. Yöntem, net bir hipoteze sahip bina ürünleri iş akışını takip eder, neyin inşa edildiğini test eder ve öğrenilenlere dayalı olarak yinelenir.

Yalın Başlangıç ​​Yöntemi

A/B Testi Yaklaşımını Tanımlama

A/B testi, herhangi bir deneyimli UX profesyonelinin araç setinin temel bir bileşenidir. Yazılım geliştirme yaşam döngüsündeki rolü, uygulamaların kullanılabilirliğini geliştirmeye yardımcı olmaktır. Ekipler, ısı eşleme verileriyle birleştiğinde, özellikle bir uygulamanın akışındaki sürtünme noktaları söz konusu olduğunda, kullanıcı davranışına ilişkin değerli bilgiler elde edebilir.

A/B testine başlamadan önce, sürece odaklanmak için bazı sorular:

• UX'te A/B testi nasıl kullanılır?
• Hangi A/B analizi yöntemleri mevcuttur?
• Tel çerçeveleme yaparken neden A/B testleri tasarlamalısınız?
• Ne için test ediyoruz?

Ölçekli A/B testinin en yaygın yöntemi, canlı kullanıcılara bir uygulamanın veya web sitesinin biraz farklı sürümlerini sunan bir bölme testidir . Bölünme testi genellikle bir başlangıç ​​veya küçük işletme için kapsam ve/veya bütçe dışındadır. Ancak, büyük ölçekli bölünmüş testin daha erişilebilir alternatifleri vardır ve bunlar arasında yüz yüze görüşmeler, odak grupları ve sizi bir test kullanıcıları ağına bağlayan çevrimiçi hizmetler bulunur.

A/B Testi Odaklı Tasarım

Tel çerçeveleme işlemi sırasında, A/B testi olasılıklarını bir düzen ve gezinme perspektifinden değerlendirmek önemlidir. Ekran bileşenlerinin basit varyasyonları, bilgilerin sunulma şeklini kolayca değiştirebilir. Bileşen tabanlı çerçeveler, bir ürünün temel işlevselliğini yeniden tasarlamak zorunda kalmadan içeriğin nasıl düzenlendiğini deneme özgürlüğü verir.

Herhangi bir tasarım çabası gibi, etkili A/B testi de açıkça tanımlanmış bir metodolojiyi takip etmelidir. İlk olarak, hangi değişkeni test ettiğinize karar verin. Ardından, başarıyı neyin oluşturduğunu tanımlayın. Verileri değerlendirerek bitirin ve bir sonraki adımın ne olması gerektiğini belirleyin.

Örneğin, bir durumda düzen hiyerarşisi test edildi. Düzen A, ekranın solunda hasta listesi bileşeni ve sağda hasta profili bileşeni bulunan iki sütunlu bir ızgaradan oluşuyordu. Düzen B, hastanın profil bileşenine tıklayan tek sütunlu bir hasta listesine sahipti.

İlk testimiz netlik içindi. Görüşme oturumlarında klinik danışmanlara iki tasarımdan hangisinin daha organize olduğunu sorduk. Dahili varsayımların aksine, tek sütunlu ızgaranın daha sezgisel tasarım çözümü olduğu kuvvetle belirtildi. Danışmanlarımız, aynı ekranda bir hasta listesi ve profil kombinasyonunun "meşgul" ve "dağınık" hissettirdiğini hissettiler. Buna karşılık, tek sütunlu ızgara düzenini tanımlamak için kullanılan kelimeler açık ve "temiz" idi.

"Bileşen Kutusu Modeli"

Bu web uygulaması için, durum yönetimi ve modüler bileşenler kavramlarına dayalı bir çerçeve olan React'i kullandık. React, kullanıcı arayüzleri oluşturmak için bildirimsel, verimli ve esnek bir JavaScript kitaplığıdır. "Bileşenler" adı verilen küçük, yalıtılmış kod parçalarından karmaşık kullanıcı arayüzleri oluşturmanıza olanak tanır. Bu modülerlik, hem geliştiricileri hem de tasarımcıları içeren bir ürün üzerinde çalışırken esnekliğe dönüşür.

Bu çerçeveyi HTML+CSS kutu modelinden ilham alarak anladım. Bileşen Kutusu Modeli , bir uygulama için yapı taşları oluşturmak için bir organizasyon yöntemi sunar. Özellikle hızla gelişen projeler için bir tasarım sistemi geliştirmeye çok uygundur.

Tasarım odaklı düşünmeyi çevik tutmak için, özellikle yalın ürün geliştirme yaşam döngüsüne çok uygun bir dizi tasarım ilkesi izlenebilir.

• Birinci ilke: Benzer bağlamları ve eylemleri gruplandırın.
• İkinci ilke: Bilgi mimarisinin bileşenler arasındaki “durum” akışını basitleştirmeye yardımcı olmasına izin verin.
• Üçüncü ilke: Geliştiricilerin tasarımları nasıl anladığını ve uyguladığını kolaylaştırmak için ölçeklenebilir görsel sistemler tasarlayın.

Benzer Bağlamları Gruplama

Kullanıcılarınızın zihinsel modelini göz önünde bulundurun; benzer sonuçları ve eylemleri “kullanım bağlamlarına” göre gruplandırın. Kullanıcıların her bağlamda öğeler oluşturması, okuması, güncellemesi ve silmesi gerekip gerekmediğini ve eylemleri için herhangi bir geri bildirim sağlamanız gerekip gerekmediğini değerlendirin. Belirli bir kullanım senaryosu için bir A/B testi tanımlarken, yerleşimi, girdilere nasıl erişileceğini ve gezinme yöntemlerini göz önünde bulundurun.

“Devlet” Etkileşim Akışını Basitleştirin

React'te "durum" akışı, bilgilerin bir uygulama boyunca nasıl hareket ettiğini, bileşenlerin verileri düzenlemeye nasıl yardımcı olduğunu ve nasıl görüntülendiğini ifade eder. Tipik olarak, durum, kaplar olarak işlev gören işlevsel bileşenlerden görüntü bileşenlerine akar. Tasarımcılar, ekran bileşenlerinin nasıl değerlendirildiğini değiştirerek işlevsel bileşenlerin bir uygulamanın düzenini nasıl değiştirebileceğini önceden belirleyerek A/B testlerine hazırlanabilir.

Sağlam Tasarım Sistemleri Geliştirin

Tipografi, düğmeler, girişler, modlar ve kartlar gibi görsel öğeler için standartlar geliştirmek için ekran bileşenlerini kullanmak, standartlaştırılmış bir tasarım dili için yapı taşları sağlamaya yardımcı olur. Sağlam görsel sistemler, UX tasarımcılarını ve geliştiricilerini tel çerçeveler içinde referans verilen bileşenler hakkında aynı sayfada tutma esnekliğine sahiptir.

Özet

A/B test odaklı tasarımın başarısı, ürün ve teknik ekipler arasındaki sinerjiye bağlıdır. Bu yöntemi benimsemek isteyen tasarımcılar, nerede ve nasıl test edileceği konusunda kesin olmalıdır. Bir hipotez geliştirmek ve ne bulmayı umduğunuzu belirlemek için zaman ayırın. Dikkatin dağılmasın. Buna bağlı kalın - yönteminizden uzaklaşmak çok kolaydır.

Bu süreç hiçbir zaman gerçekten bitmez ve ürünler büyüdükçe gelişir. Test odaklı bir ürün geliştirme stratejisi uygulayan tasarımcılar, bir ürünün geliştirme yaşam döngüsü boyunca ortaya çıkan öğrenme fırsatlarından yararlanmalıdır.

Bileşenler, tasarım sistemleri gibi, düzen veya stil ile değil, modülerlik ve kalıpların yeniden kullanılabilirliği ile ilgilidir. Bir tasarımcının bakış açısından, A/B testi ile ürünleri test etme, iyileştirme ve iyileştirme esnekliği, daha kullanıcı merkezli ürünler geliştirmeye yardımcı olabilir ve bu da sonuçta daha büyük başarılara yol açar.

•••

Toptal Tasarım Blogunda daha fazla okuma:

• UX Tasarımında Zihinsel Modellerden Yararlanma
• Kitleler için UX Testi: Basit ve Uygun Maliyetli Tutun
• Mobil Kullanılabilirlik için Temel Kılavuz
• Kullanıcı Araştırmasının Değeri
• Tasarım Sistemlerini ve Kalıpları Anlama