Karmaşık Bir Çözümünüz Olduğunda Basit Bir Kullanıcı Arayüzü Nasıl Tasarlanır?

Bu makale, insanlarla veri arasındaki engelleri kaldırmak için güzel, insan merkezli deneyimler yaratan Flatfile'deki sevgili arkadaşlarımız tarafından desteklenmiştir. Teşekkür ederim!

Ne diyorlar? Karmaşık problemler karmaşık çözümler mi gerektirir? Uygulamalar ve yazılımlar geliştirirken bu kesinlikle doğrudur.

Ancak karmaşık arka ucun ön uca damlamamasını nasıl sağlıyorsunuz?

Genel olarak karmaşık bir kullanıcı arayüzü, birçok kişinin bir web sitesini veya mobil uygulamayı terk etmesi için fazlasıyla yeterli bir nedendir. Ancak, ödeme yapan veya abone olan kullanıcılar söz konusu olduğunda, bunların hiçbirinin yazılımınızın karmaşık arayüzüne razı olmasını beklemeyin.

Ürününüzün ne kadar harika olduğu önemli değil. Dış görünümü kullanıcılarınızı çıldırtırsa, karşılığında büyük miktarlarda maliyetli kullanıcı kaybı bekleyebilirsiniz.

Flatfile ekibi, birçok tasarımcının kendi başlarına oluşturmak için mücadele ettiği bir teknoloji olan başarılı bir veri içe aktarıcı geliştirerek bu soruna çok aşinadır. Aşağıda, bu UI tasarım zorluğunun üstesinden gelmelerine yardımcı olan ve size de yardımcı olabilecek bazı ipuçlarına bakacağız.

Karmaşık Bir Çözüm İçin Basit Bir Kullanıcı Arayüzü Nasıl Tasarlanır

Çözümünüzün ön yüzünü tasarlarken amacınız, kullanıcıya (ve bazen son kullanıcıları için de) çok basit ve sezgisel bir arayüz sunmaktır.

Peki, Flatfile bunu nasıl başardı? Tek başına veri ekleme süreci karmaşık olabilir - çeşitli kaynaklardan, dosya türlerinden ve kullanıcılardan veri almak ve ardından bunları uygulama içinde kullanılabilir verilere dönüştürmek zorunda kalmak. Kullanıcıların verilerini ön uçta hazırlamasını, doğrulamasını ve sterilize etmesini sağlamak da kolay bir iş değildir.

Flatfile, standart yazılım tasarım sürecine ek olarak, kullanıcıların ürünlerinin gerçekten ne kadar karmaşık olduğunu asla hissetmemelerini sağlamak için ek adımlar attı. İşte öğrendikleri:

1. Kullanıcı Öncelikli Bir Kullanıcı Arayüzü Tasarlayabilmeniz İçin Kullanıcılarınızın Hedeflerini Belirleyin

Kullanıcıların faydalı bulduğu bir ürün oluşturmak için onların hedeflerine ve bakış açılarına göre tasarlamanız gerekir. Bunu gözden kaçırırsanız, hedeflerinizi ve önceliklerinizi önceliklendiren bir kullanıcı arayüzüne sahip olabilirsiniz, bu da perde arkasından gelen karmaşıklıkların ön plana çıkmasını sağlar.

Bu yanlış adımın uygulamanız veya yazılımınız için nasıl ciddi sonuçları olabileceğine bakalım.

Instagram kısa süre önce uzun süredir devam eden arayüzünün üstbilgisini ve altbilgisini güncelledi. Başlık, Kasım 2020'den önce ve sonra şöyle görünüyordu:

Önceki tasarım iki sembol/eylem içerir:

• Fotoğraf çekmek veya yüklemek için kamera simgesi.
• Bağlantılarla sohbet etmek için Messenger simgesi.

En son tasarım, tüm simgeleri sağa kaydırdı. Şimdi üç tane var:

• Instagram gönderileri, hikayeler, makaralar ve hayatlar oluşturmak için artı sembolü.
• Etkinliği görüntülemek için kalp simgesi (ör. etkileşim, yeni takipçiler vb.).
• Messenger simgesi aynı tasarımı ve yerleşimi korur.

Başlığa baktığınızda, burada çok fazla yanlış olduğunu düşünmeyebilirsiniz. Ancak Instagram, estetiği veya kullanılabilirliği geliştirmek için navigasyonunu muhtemelen yeniden tasarlamadı. Yeni altbilgi bunun kanıtıdır:

Ortadaki ve sondan ikinci simgelere bakın. Kasım ayından sonra, artı ve kalp simgeleri uygulamanın sağ üst köşesine taşındı ve aşağıdakilerle değiştirildi:

• TikTok'a benzer şekilde hareket eden (ve muhtemelen platformun bağımlılığını artıran) bir özellik olan Instagram makaralarına bir bağlantı.
• Kullanıcıların popüler mağazalardan (aktif olarak takip ettikleri mağazalardan değil) alışveriş yapmalarını sağlayan bir özellik olan Instagram alışverişine bağlantı.

Kullanıcı arayüzü artık (öncelikle) kullanıcıları favori hesaplarından içerik seçmeye veya diğer kullanıcılarla organik bağlantılar kurmaya teşvik etmiyor. Bunun yerine, kullanıcı arayüzü platformun yeni oyna-öde yönlerine öncelik vererek, buna para harcayan markaları ve etkileyicileri tercih ediyor.

Sonuç olarak, bildirim ve oluşturma düğmeleri başparmak bölgesinden uygulamanın bir köşesine taşındığı için uygulamanın kullanılabilirliği tehlikeye girdi. Sadece uygulamayı kullanmayı daha zor hale getirmekle kalmaz, aynı zamanda perde arkasında neler olup bittiğine dair farkındalık yaratır. Instagram kullanıcıları iş yerindeki karmaşık algoritmalar ve iş kararları hakkında düşünmediyse, kullanıcı arayüzü artık onlara dikkat çekiyor.

Başka bir şey yapmadan önce, kullanıcılarınızın neyi başarmak istediğini ve bunun nasıl olmasını beklediklerini anlayın. Ardından, Flatfile Ürün Müdürü Randy Wiafe'nin yaptığına benzer şekilde kullanıcılarınızın hedeflerini özetleyin:

“Flatfile kullanıcılarının hedefi, müşterilerinin verilerini sorunsuz bir şekilde içe aktarmaktır. Flatfile kullanıcılarının verileri bir yazılım ürününden diğerine taşıması gerekiyor ve bu sürecin mümkün olduğunca kolay olması gerekiyor çünkü bu, yeni bir müşterinin yaşayacağı ilk ürün deneyimlerinden biri - verilerini içe aktarmak.”

Bunu gözden kaçırmayı göze alamazsın. Çünkü, kullanıcılarınızın hedeflerine ve tercih ettikleri yolculuğa uygun bir kullanıcı arayüzü tasarlamıyorsanız, sahne arkasında meydana gelen karmaşıklığın bir kısmını ortaya çıkarmanız olasıdır.

2. MVP'nizi Oluşturmak İçin Müsabakaların Ürünlerini Değerlendirin

Bir uygulama oluşturduğunuzda, minimum uygulanabilir bir ürün kesinlikle gereklidir. Başlamak için ürünün yalnızca en basit sürümünü geliştirerek zamandan ve paradan tasarruf etmekle kalmaz, aynı zamanda canlı ve çalışan bir beta, siz yineledikçe gerçek kullanıcı geri bildirimlerini toplamanız için size bir şey verir.

Flatfile'ın yaptığı buydu. Wiafe, MVP'nin değerini şöyle açıklıyor:

"Beta, müşterilerin ve son kullanıcılarının ürünle nasıl etkileşime girdiği konusunda gerçekten gözlerimizi açtı. Kullanıcıların neden ve nasıl engellendiğini anlayabilmek, deneyimi önemli ölçüde iyileştirmemize yardımcı oldu."

Bununla birlikte, MVP'nizin kullanıcı arayüzüne ne kadar az gideceğinizi nereden biliyorsunuz? Çünkü minimal ve kullanılamaz arasında büyük bir fark var.

Tasarım sürecini sıfırdan başlatmak yerine, yazılımın içinde rakiplerinizden zaman ayırmanızı tavsiye ederim.

Açıkçası, başka birinin tasarımlarını çalmanızı savunmuyorum. Bununla birlikte, önerdiğim şey, onlarla ilk elden deneyim kazanmanız.

Yeni başlayanlar için, bu, kullanıcı arayüzlerinde trendleri belirlemenize olanak tanır - potansiyel müşterilerinizin zaten rahat ve kendinden emin olduğu tasarım trendleri. İkinci olarak, MPV'nizi gereken mutlak minimuma indirmek için bu demoları kullanabilirsiniz.

Bir ödeme ağ geçidi yazılımı oluşturduğunuzu varsayalım. Stripe ile başlayabilirsiniz:

Ve 2Checkout:

Bu panolardan tüm verileri çıkardım ve yalnızca ana bileşenleri, gezinmeyi ve etiketleri bıraktım. İki kullanıcı arayüzü arasında gördüğümüz ortak konular nelerdir?

• Başlığın merkezine yakın bir arama çubuğu,
• Sağ üst köşedeki kullanıcı ayarlarına veya hesap bilgilerine bir bağlantı,
• Sayfanın ⅙ veya ⅕ arasında yer kaplayan sola hizalı bir kontrol paneli,
• Bağımsız bloklar içinde sunulan veriler,
• Etiketleme için kullanılan nötr sans serif yazı tipleri,
• Renk kontrastı minimumdur ve yalnızca seçili sekmeleri belirtmek veya veri kümelerini ayırt etmek için gösterge tablosunda bulunur.

Bu sadece temel bir analiz, ama siz anladınız. Ayrıntıları ortadan kaldırarak ve rakiplerinizin ürünlerini etkin bir şekilde tel çerçevelere dönüştürerek, kullanıcıların yazılımınızda görmekten kendilerini rahat ve güvende hissedecekleri tasarım ayrıntılarını belirleyebilirsiniz.

Ayrıca ürünlerine harcanan bu zamanı, karmaşıklıklarının nerede ortaya çıktığını anlamak için de kullanabilirsiniz. Sunulan verilerin hiyerarşisi mantıksız mı? Yanlış ekranlarda göründükleri için işleri aşırı karmaşıklaştıran öğeler var mı? Kullanıcılardan birincil hedeflerine ulaşmak için çok fazla adım atmalarını mı istiyorsunuz?

Wiafe'nin önerdiği bir şey, MVP'nize kesinlikle bir tel kafes gibi davranmamaktır:

"Bizim için başka bir odak alanı, bu deneyimi kullanıcılarımıza nasıl iyi hissettireceğimizdi. Betanın soğuk ve heyecansız olmasını istemedik. İyi bir ilk izlenim bırakmak istedik ve bu, yazılımı kullanıma sunmadan önce yazılıma biraz karakter vermek için zaman harcamamız gerektiği anlamına geliyordu.”

Yani evet, kullanıcı arayüzünü basit tutacak tasarım özelliklerini ortaya çıkarmak için rakiplerin yazılımını kullanacaksınız. Bununla birlikte, MVP'nizin yine de kullanıcıların kullanmak istediği uygulanabilir bir ürün olması gerekir, bu da onu ilgi çekici olacak şekilde tasarlamak anlamına gelir.

3. Karmaşıklığı Aşamalı Olarak Tanıtın ve Kullanıcı Testiyle Onaylayın

Bir teslimat uygulaması aracılığıyla bir restorandan yemek siparişi verdiniz ve neden bu kadar uzun sürdüğünü merak ettiniz mi?

Siparişinizi akşam 8'de veriyorsunuz Uygulama, restoranın siparişi birkaç saniye sonra onayladığını ve yemeğinizi 8:45 civarında alacağınızı söylüyor. 8:40'ta, teslimat sürücüsünün haritada nerede olduğunu görmek için uygulamayı açıyorsunuz ve neden hareket etmediklerini merak ediyorsunuz. Ya da daha kötüsü, neden yanlış yöne gittiklerini. Mideniz guruldamaya başlar ve siparişi kendi başınıza almadığınıza pişman olursunuz.

Buna aşina değilseniz, şanslısınız. Ancak Google'da "teslimat sürücüsü uygulamada yanlış yöne gittiyse" ne demek istediğimi anlayacaksınız:

Bu, dışarıda yemek yiyen insanlar için yeni bir sorun. Geçmişte, aldıkları tek şey bir sipariş onay mesajıydı ve ardından yiyecekleri geldiğinde bir arama, mesaj veya kapıyı çaldılar.

Ancak teslimat uygulamaları geçen yıl ya da öylesine değişti, yalnızca restoranın yemeğinizi pişirmedeki ilerlemesine tam görünürlük sağlamakla kalmadı, aynı zamanda teslimat sürücüsünün tam olarak nerede olduğunu da gösterdi.

Bu, dağıtım uygulamalarının başarısının kesinlikle ayrılmaz bir parçası mıydı? Kullanıcıları yüksek hacimli müşteri hizmetleri şikayetleri, sipariş geri ödemeleri veya kullanıcı kaybıyla karşılaşacak kadar çileden çıkarıyorsa, hayır, değildi.

Bu nedenle, MVP'nize karmaşıklık azar azar ve yalnızca kullanıcı testi bunun değerli bir ekleme olduğunu onayladıktan sonra tam olarak entegre edilmelidir.

Wiafe'nin açıkladığı gibi:

“Ürünün kullanıcısına bağlı olarak, ürüne karmaşıklık getirmek değişir. Portal ürünümüzle geliştiricilerle daha sık çalışıyoruz, bu nedenle ithalatçının karmaşıklığını artıran bir sorun olmadı. Ancak Concierge, teknik açıdan daha az kafa yoran müşteri başarısı ve uygulama ekipleri için oluşturuldu. Bu nedenle, onları test edene kadar yazılıma herhangi bir karmaşık özellik veya bileşen ekleme konusunda çok dikkatliydik.”

Kullanıcılarınızın hedeflerini ve beklentilerini anlamak, ilk başladığınızda değerlidir. Ancak, canlı bir uygulamanız veya yazılımınız olduğunda, kullanıcılarınızın aklından geçen her şeyi anladığınızı varsaymayın.

Kullanıcılarınızın yerinde olmadığınız ve onu olduğu gibi deneyimlediğiniz sürece, yeni karmaşıklık katmanlarının, onların algıladıkları şekilde kullanılabilirliğe ne yapacağı hakkında hiçbir fikriniz yoktur.

Bu nedenle, kullanıcı arayüzüne daha fazla karmaşıklık getirdiğinizde veya çok karmaşık olduğuna inandığınız bir şeyi kaldırdığınızda ne olacağıyla ilgili çalışan hipotezler formüle etmek inanılmaz derecede önemlidir. Veri destekli bir fikriniz olduğunda, kullanıcılarınızdan geri bildirim almaya ve ürününüzü iyileştirmeye başlayabilirsiniz.

Toplama

Müşterilerinizin kullanacağı bir uygulama oluşturmak için, onlara her hafta yardım için müşteri desteğiyle iletişime geçmelerini gerektiren bir şey değil, gerçekten çalışacakları bir şey vermelisiniz. Veya bu, neden eskisinden daha fazla stres ve hayal kırıklığına neden olan bir şeyi kullandıklarını sorgulamalarına neden olur.

Bu nedenle, arka uç karmaşıklığının ne kadarının ön uca bulaşmasına izin verdiğiniz konusunda dikkatli olun. Kullanıcı arayüzü gezinmek için çok karmaşıksa veya anlamak için çok karmaşıksa, kullanıcılar isyan edecek ve topluca kaçacaktır.