Onboarding UX'i geliştirmek için basit bir kullanıcı arayüzü kesilmesi [OCD]

UI Mockup'lar ve çizimler, kullanıcı verilerinin zaten mevcut olduğunu varsayar. Örneğin, aşağıdaki mockup, kullanıcının sohbet edecek kişilere, bildirimlere ve hatta sohbet konularına sahip olacağını varsayar.

Bu ücretsiz eskiz kaynağını kullanarak oluşturulmuş basit mesajlaşma arayüzü

Ancak bir kullanıcı kayıt olduğunda bu asla böyle olmaz. Başlangıçta veri yok, bu yüzden boş bir rehber sütunu ve boş bir sohbet penceresi.

Parlak UI tasarımı bilgi tüketmeyi kolaylaştırır ve bu bilginin nasıl oluşturulacağına odaklanmaz.

Bunu zor yoldan öğrendim Dribbble kadar ıslattığımda bir b2b uygulaması için bir pano tasarlayabiliyordum. Sketch'de harika görünüyordu, ancak müşterilerimiz yollarını bulamadı.

Kötü UX, geliri doğrudan etkileyen yatılı ve destek maliyetini arttırır. Aynı zamanda, bir kullanıcının pikselinizi mükemmel tasarımla tüketmek için mücadele etmesini izlemek de kötü hissettiriyor. Size başarısız olduğunuzu hatırlatır.

Mevcut Çözümler

Çözümlerden biri, arayüz gibi slaytları kullanarak önceden bir görüşme yapmaktı. Bu mobil uygulamalar için standart gibi görünüyor.

Slack’ın slayt tabanlı yatılı UX’i

Slayt yaklaşımı ile ilgili sorun bağlam eksikliğidir. Slaytlarda yalnızca çok fazla şey iletebilirsiniz (kullanıcının ne kadar tutacağı farklı bir sorudur).

Ürüne genel bir bakış sunmak için harikadır ancak ürünün nasıl çalıştığını açıklamakta pek yardımcı olmaz. Kullanım durumumla ilgisizdi, çünkü ürünün karmaşıklığı birkaç slayda kadar kaynatılamadı.

Ayrıca, kullanıcıyı belirli adımlardan geçiren bir araç ipucu tabanlı çözüm de vardı. Bu seçenek web uygulamaları ile daha popülerdir. Bu akışları oluşturmanıza yardımcı olacak birçok iyi javascript kütüphanesi vardır.

İntrojs.com/ için yerleşik uçağa dayalı araç ipucu

Bir araç ipucu tabanlı çözüme kadar, onları can sıkıcı buldum ve neredeyse her zaman "öğretici atla" yı tıklattım. Canva gibi büyük şirketler uçağa biniş üzerine araç ipucu kullanıyor olsa da. AppCues adlı bir ürün, bu araç ipuçlarını kodsuz, temiz bir şekilde tasarlamanızı sağlar.

Ayrıca, yaygın olarak yanlış anlaşılan özelliklerin, gerektiğinde ilgili bilgileri sağlayan parlayan işaretlerle etiketlendiği bir işaret stili yaklaşımı vardır.

Bu en göze çarpmayan yoldur. Boğazınıza 17 adım öğreten ve gerçekten ihtiyaç duyduğunuzda kaybolan araç ipucunun aksine, bu etkin nokta tabanlı yaklaşım hazır olduğunuzda bilgi sağlar.

Slack'in 3 formun da hepsini kullandığını belirtmekte fayda var. Kullanıcılarının sadık kalmasına şaşmamalı. Bu da bir şekilde tutmanın uçağa biniş kolaylığı ile doğru orantılı olduğuna işaret ediyor.

OCD aka Onboarding merkezli tasarım

Bir şeyleri adlandırmayı seviyorum. İsimler, fikirleri akılda tutmaya yardımcı olur. Öyleyse buna Onboarding merkezli tasarım diyelim.

Bir çözüm istedim ki:

  • Bağlamla alakalıydı
  • Sinir bozucu değildi (hiç kimse bir özelliğin nasıl çalıştığını öğrenmek için 17 adım atmayı sevmez)
  • Göze çarpmayan (işaretçiler gibi)
  • Tüketimi kolaydır (araç ipuçlarını kullanmak kolay değildir)

Sonuç

Ben sadece devletler tasarlamaya başladım. Bu makaleyi okurken görmüş olduğunuz sohbet tasarımı üç durumla tasarlanabilir.

Durum 1: İletişim yok

Durum 2: Kişiler var, ancak sohbet yok

Durum 3: Hem sohbetler hem de kişiler var

Her durumun amacı, kullanıcıyı bir sonraki aşamaya ilerletmektir. Kullanıcı 3. duruma geçtiğinde, uçağa başarıyla bindi. Sohbet maketi göz önüne alındığında, her bir devlet için amaç aşağıdaki gibidir:

1. Devletin Hedefi: Bir kişiyi eklemesi için kullanıcıyı önceliklendirin

Aşağıdaki mockup uygulamasında yalnızca bir eylem çağrısı var, kullanıcının yeni bir kişi eklemesini sağlayan mavi artı düğmesi. Grafikler ve metinler, kullanıcının bu işlemi yapmasına öncelik verir.

Durum 1 - Kullanıcıyı kişi eklemesi için astarlayın (resimde undraw.com)

Bir kişi eklendikten sonra ikinci hedefe başlayabiliriz.

2. Devletin Amacı: Bir sohbete başlaması için kullanıcılara öncelik verin

Aşağıdaki mockup, bir sohbete başlamak için grafiksel bir önceliğe sahiptir. Açıkça mevcut özellikleri açıklar. Yine, şu anda yapabileceğiniz tek bir şey var, yani bir mesaj gönderin. Ayrıca, bu UI'da bir arama yapabilirsiniz, ancak bu işlemlerin ikisi de aynı amaca hizmet eder. Kullanıcıyı 3. adıma götürürler.

Durum 2 - Kişi eklendi, sohbete başlamak için ana

Devletin Amacı 3: Yok, kullanıcı uçağa biniyor - tüm işaretler kaybolmalı

Ve son olarak, kullanıcınız işlemi birkaç kez tekrarladığında, kullanıcı arayüzü başlangıçta hedeflediğimiz şekilde aramaya başlar.

Durum 3 - Kullanıcı başarıyla uçağa bindi

Bu yaklaşımın faydaları

  • 1. adımdaki slayt yaklaşımına kıyasla, Onboarding Centric Design (OCD) içeriği içeriği topluca sunar. Bilgi karar verme noktasında mevcuttur.
  • Bu yaklaşım hem mobil hem de masaüstü cihazlarda kullanılabilir. Bu UI basittir, ancak karmaşık bir UI olması durumunda, CTA'ları yükseltmek için sıcak noktaları olan OKB'yi kullanabilirsiniz.
  • Bu yaklaşım, sizi, kullanıcının yolculuğu hakkında düşünmeye zorlayarak UX'inizi ilk geliştirir.
  • Ön uçlarınızı React kullanarak yazıyorsanız, bu yaklaşım bileşen mimarisine tam olarak uyar.

Yani, kural olarak:

Devletler için örnekler tasarlayın.
Her eyaletin bir hedefi vardır - bir sonraki eyalete ilerleme.
Son durum, kullanıcınızın uçağa bindiği zamandır.

Okuduğunuz için teşekkürler :)

Merhaba, bu makaleyi beğendiyseniz ve güncel kalmak istiyorsanız, beni takip edin: Orta, Github veya Twitter

Diğerlerine yardım edebileceğiniz ya da genel olarak ön uç, arka uç ve gelişme hakkında yardım alabileceğiniz gevşek bir topluluk (6 Ekim 2018 itibariyle 18 üyeye sahip). Burada katılabilirsiniz.