Yapay Zekanın Net Bir Şekilde Görmesine Yardımcı Olmak: Bir Pano Tasarımı Vaka Çalışması

Yapay zeka (AI) bugün birçok sektörde iş başında. Perakendecilerin envanteri yönetmesine ve talebi tahmin etmesine yardımcı olur, doktorların akciğer taramalarında kanseri tanımlamasını kolaylaştırır ve arabaların kendi kendilerine gitmesini sağlar.

Ancak AI destekli otomasyon gelişmeye devam ediyor ve hala insan müdahalesi gerektiriyor. Bu pano tasarımı vaka çalışmasında, insan operatörlerin AI tanıma süreçlerini iyileştirmesine yardımcı olan UI'leri nasıl geliştirdiğimi detaylandırıyorum.

Müşteri

Müşteri, müşterilerinin birden fazla sektör için gerçek zamanlı olarak AI görüntü tanıma hatalarını çözmesine yardımcı olan bir ABD girişimiydi. Sağladığı çözümler, arazi haritalama, tesis sınıflandırma, perakende ürün tanımlama, barkod tarama ve daha fazlasını sağlayan otomatik sistemleri iyileştirir.

AI görüntü tanıma sistemleri, görsel girdiyi tanımak ve yorumlamak ve "gördüklerine" dayalı kararlar vermek üzere eğitilmiştir. Ancak bazen bu sistemler istisnalarla, yani nesne beklenmedik bir görünüme sahip olduğu için işleyemedikleri görüntülerle karşılaşır. Bir istisna, bir AI sisteminin önemli bilgileri tanımlamamasına veya gördüklerini yanlış tanımlamasına neden olabilir. Örneğin, bir bakkal ürünü tarayıcısı, kutu değiştiği için bir karton portakal suyunu tanımayabilir veya kendi kendini süren bir çiftlik robotu bir engelle karışabilir. Bu gibi sorunlar, bir işletmenin faaliyetlerinde gecikmelere veya aksamalara neden olabilir.

Bu sorunları çözmek için müşterinin yazılımı, müşterilerinin AI sistemleriyle bütünleşir ve insan operatörlerin tanıma sorunlarını gerçek zamanlı olarak incelemesini ve çözmesini sağlar. Ancak operatörler, istisnaları çözmekten daha fazlasını yapar: Aynı zamanda, benzer bir şeyle bir daha karşılaştıklarında yapay zeka sistemlerine ne yapacaklarını da öğretirler. Bu, daha geniş bir görüntü yelpazesini tanımlamak için daha donanımlı AI sistemleriyle sonuçlanır.

Özet

İki ay boyunca, bir operatör panosu ve bir müşteri panosu için tasarımlar sunmak üzere müşteriyle birlikte çalıştım. Ayrıca bu çıktılara eşlik eden bir bileşen kitaplığı ve stil kılavuzu hazırladım.

Yaklaşımım, araştırma, beyin fırtınası, düşük kaliteli prototipleme, yüksek kaliteli prototipleme ve kullanıcı testini içeren tasarım düşünme sürecini takip ediyor. Bu süreci her zaman zamanın, sermayenin ve insanların mevcudiyetine göre uyarlarım.

Proje sırasında müşterinin kurucu ekibi ve ön uç geliştirici ile yakın bir şekilde çalıştım ve herkesin ilerlememden haberdar olmasına yardımcı olan günlük güncellemeleri paylaştım. Ayrıca, günlük çalışmalarına paha biçilmez bir bakış açısı sağlayan iki operatörle de işbirliği yaptım.

Operatör Kontrol Panelini İyileştirme

Müşterinin ürününün kalbinde, AI uzmanlarının görüntü tanıma sorunlarını çözmek için kullandığı arayüz olan operatör panosu bulunur. Bir AI sistemi bir görüntüyü tanımlamada sorun yaşadığında, bu görüntü bir operatörün panosuna gönderilir. Operatör, her bir nesneyi işaretleyerek ve "insan", "ağaç" veya "büyük engel" gibi önceden belirlenmiş etiketlere göre sınıflandırarak görüntüyü manuel olarak etiketler.

Müşterinin operatörleriyle görüştüğümde, kullandıkları yazılımın mevcut durumunu bana gösterdiler ve işlerini yaparken gözlemlememe izin verdiler. Bu ilk araştırmadan tasarımlarımı şekillendirecek içgörüler, sorunlu noktalar ve iyileştirme fırsatları topladım.

Önemli işlevlerin eksik olduğunu ve bazı görevlerin gereksiz yere karmaşık olduğunu keşfettim, bu da arayüzün kullanımını zorlaştırıyordu. Örneğin, bir görüntüyü etiketlemek için operatörün her seferinde seçmek, etiketlemek, gözden geçirmek ve göndermek için araç çubuğu ve görüntü arasında gidip gelmesi gerekiyordu. Aynı şekilde, bir eylemi geri alma veya yeniden yapma yeteneği de eksikti, bu da operatörlerin bir hata yaptıklarında görevleri tekrarlamaları veya ekstra adımlar atmaları gerektiği anlamına geliyordu.

Bir başka endişe de, arayüzün çoğunlukla hazır bileşenlerin bir karışımına dayandığından birleşik bir görünüme ve hisse sahip olmamasıydı. Bu tutarsızlıklar, belirli öğelerin ve işlevlerin bulunmasını veya kullanılmasını zorlaştırdı.

Bu iyileştirme fırsatlarını göz önünde bulundurarak, ilk kavramlar için beyin fırtınası yaptım ve iki operatörle paylaştığım tel kafesler oluşturdum. Bir hafta boyunca her gün operatörlere tel çerçeveler sundum ve sanal geri bildirim oturumları aracılığıyla ilk izlenimlerini tartıştım. Oturumlar son derece işbirlikçiydi ve gösterge tablosunu iyileştirmeye yönelik fikirleri derlememe yardımcı oldu.

Geri bildirim oturumu sırasında ortaya çıkan ilginç bir nokta, operatörlerin eylemlerini seçtiği sağ taraftaki araç çubuğunda gösterilen bilgi miktarıydı. Orijinal tasarımım çok minimalist bir çözüm önerdi; yalnızca simgeleri gösteren dar bir panele daraltılabilen bir araç çubuğu. Bunun, odağın merkezi görüntüde olmasına izin vereceğine inandım.

Ancak operatörler bu fikri beğenmediler çünkü simgelerin ne anlama geldiğini ve ana eylemlerin ne olduğunu bir bakışta anlamak zordu. Bu önemli içgörüyle, daha basitin her zaman daha iyi olmadığını anladım. Bu durumda, daha fazla bilgiyi görünür bırakmak operatörlerin daha verimli çalışmasına yardımcı oldu.

İlk tel çerçeveleri iyileştirip iyileştirdikten sonra, Figma'da etkileşimli, düşük kaliteli bir prototip oluşturdum ve test edebilmeleri için operatörlere ve paydaşlara gönderdim. Geri bildirimlerini aldıktan sonra, herkes tatmin olana kadar tasarımı yineledim.

Bahsettiğim gibi, orijinal gösterge panosu, hazır UI bileşenlerinin bir karışımı kullanılarak oluşturuldu ve ürün içi deneyim baştan sona tutarlı değildi.

Ancak, zaman ve bütçe açısından paydaşlar, mümkün olan yerlerde hazır bileşenleri elde tutmak istediler. Bu nedenle, ön uç geliştiriciyle birlikte çalışarak, düğmeler, formlar ve alanlar ile diğer UI öğelerini içeren mevcut bileşenleri yeni gösterge tablolarının görünümüne ve hissine uyacak şekilde özelleştirdim. Bu ince ayarlar renkleri, yazı tiplerini, boşlukları ve diğer ayrıntıları etkiledi. Canlı izleme ilerleme animasyonları gibi mevcut bileşenleri güncellemenin imkansız olduğu durumlarda yenilerini oluşturduk. Operatör panosunun çoğu bu şekilde sıfırdan yapılmıştır.

Daha sonra, renk ve fotoğraf operatörlerinin yazılımda tipik olarak göreceği türden fotoğrafları birleştiren, gezilebilir, aslına uygun bir prototip ürettim. Ayrıca dikdörtgenler, kurşun kalemler ve çokgenler gibi seçim araçlarını da ekledim ve ekranın altına operatörlerin görüntü iyileştirmeleri yapabileceği bir panel ekledim. Son olarak, After Effects'te canlandırılan mikro etkileşimlerin özellikleriyle birlikte prototipi ön uç geliştiriciye gönderdim, böylece panoyu oluşturabilsinler.

Sıfırdan Müşteri Kontrol Paneli Tasarlamak

Projenin ikinci aşaması, AI sistemlerinin sahiplerinin çözülen sorunlarının ilerlemesini gözlemlemelerine olanak tanıyan bir müşteri panosuydu. Müşteri, ürünü daha fazla müşteriye sunmadan önce bu deneyimi geliştirmek istedi.

Başlangıçta, müşterinin müşterilerinin e-posta yoluyla ilerleme raporları talep etmesi gerekiyordu. Her rapor, hangi istisnaların çözüldüğünü veya halen devam etmekte olduğunu belirten bir PDF veya CSV dosyasıydı. Müşterinin, müşterilerin her bir istisnanın durumunu bir bakışta kontrol edebilmesi için bir yola ihtiyacı vardı.

Tasarladığım pano ile müşteriler oturum açabilir ve her bir istisnanın ilerlemesini gerçek zamanlı olarak izleyebilir. Gelen görüntüleri, gözden geçirilenleri ve zaten çözülmüş olan istisnaları görebilirler. Sorunun nasıl çözüldüğünü daha iyi anlamak için her bir çözümün ayrıntılarını da görüntüleyebilirler.

Pano, müşterilerin toplam etkileşimler ve toplam çözünürlükler gibi özet verileri daha iyi anlamalarına yardımcı olmak için grafikler ve görselleştirmeler içerir. Müşteriler ayrıca, ödeme yöntemleri ve oturum açma bilgileri de dahil olmak üzere hesaplarının işle ilgili yönlerine kolayca erişebilir ve bunları yönetebilir.

Müşteri panosu prototipi için, belirli UI öğelerinin nasıl davranacağını göstermek için After Effects'te animasyonlar oluşturdum. Örneğin, incelemede bir istisnayı göstermek için bir ilerleme animasyonu oluşturdum, bu istisna çözüldüğünde bir onay işareti haline geldi. Ayrıca bir projenin ne zaman yayında olduğunu göstermek için titreşen bir nokta tasarladım.

Figma'da Bileşen Kitaplığı Oluşturma

Ölçeklenebilir ve bakımı kolay ürünler tasarlamanın önemli bir yönü, bir bileşen kitaplığı ve stil kılavuzu oluşturmaktır. Standartlaştırılmış ve yeniden kullanılabilir tasarım bileşenlerine sahip olmak, dijital bir ürüne ölçekleme ve özellikler eklerken hem tutarlılık hem de hız sağlar.

Müşterinin kitaplığını Figma'da barındırmayı seçtim çünkü bileşenleri değiştirmeyi ve bir tasarımda göründükleri her yerde güncellemeyi kolaylaştırıyor. Tüm bileşenler ve stiller sekiz noktalı bir ızgara kullanılarak belgelendi. Kitaplık, menüler, kenar çubukları, sekmeler, giriş simgeleri ve düğmeler gibi temel bileşenleri içerirken, stil kılavuzu tipografi, renkler, simgeler, boşluklar ve ızgaralar gibi öğeleri kapsıyordu.

Gelecekte, bileşen kitaplığı tam teşekküllü bir tasarım sistemine dönüşebilir. Ancak şimdilik, ürünü büyütmek için bir temel ve kurum içi personel, serbest çalışanlar veya ajans profesyonelleri olsun gelecekteki tasarımcılar için bir referans olarak hizmet ediyor.

Kullanıcı Araştırma Konuları

Bu proje ödüllendiriciydi çünkü bana birçok endüstride otomatik sistemleri geliştiren ve yapay zekanın dünyayı yorumlama şeklini şekillendiren dijital bir ürünü geliştirme fırsatı verdi. Ayrıca kullanıcı araştırmasının ve doğrudan gözlemin önemini pekiştirdi. Operatörlerin işlerini yapmalarını ve soru sormalarını izleyebilmek, onların daha verimli ve etkili çalışmalarını sağlayan gösterge tabloları sunmak için çok önemliydi. Bir tasarımcı, ilk etapta deneyimlerini anlayana kadar birinin çalışma şeklini iyileştiremez.

Toptal Blog'da Daha Fazla Okuma:

• Pano Tasarımı - Hususlar ve En İyi Uygulamalar
• Tutarlılık Anahtardır – Bir Figma Tasarım Sistemi Nasıl Oluşturulur
• UX Araştırma Teknikleri ve Uygulamaları
• Kullanıcı Araştırmasının Değeri
• UX'in Gerçek Yatırım Getirisi: Executive Suite'i İkna Etmek