Kullanıcı akışları: Ne oldukları ve UX tasarımında neden önemli oldukları19 min read

Harika UX piksellerle başlamıyor. Kullanıcıların ne yapmaya çalıştıklarını, bir ürüne nereden girdiklerini, hangi kararları vermeleri gerektiğini ve onları başarılı bir sonuca hangi yolun götüreceğini anlamakla başlar.

Bu yola denir kullanıcı akışı.

Kullanıcı akışı, bir kişinin bir uygulama, web sitesi veya belirli bir görev boyunca attığı adımların görsel bir haritasıdır. Bir SaaS uygulamasına katılım gibi tam bir ürün deneyimini veya kaydolma, demo rezervasyonu yapma, bir bültene abone olma veya ödemeyi tamamlama gibi daha küçük bir akışı gösterebilir.

UX tasarımcıları, ürün ekipleri ve kurucuları için kullanıcı akışları, ayrıntılı ekranlara geçmeden önce daha iyi arayüzler tasarlamanın en basit yollarından biridir. Kullanıcıların kafasının karışabileceği yerleri, bir akışın nerede çok fazla adım içerdiğini ve gerçekte hangi ekranları tasarlamanız gerektiğini görmenize yardımcı olurlar.

Bu kılavuzda kullanıcı akışlarının ne olduğunu, bunların nasıl okunacağını, ne zaman oluşturulacağını ve daha iyi UX tasarımını nasıl desteklediklerini açıklayacağız.

Yapay zeka ile kullanıcı akışları tasarlamayı deneyin

Tasarlamak istediğiniz kullanıcı akışını tanımlayın ve ardından Anima’in bunu UX’e, ekranlara ve koda dönüştürmesine izin verin.

Kullanıcı akışı nedir?

bir kullanıcı akışı kullanıcının bir ürün içindeki bir hedefi tamamlamak için izlediği yolu gösteren bir diyagramdır. UX tasarımında bu ürün genellikle bir uygulama, web sitesi, web uygulaması veya dijital hizmettir.

Kullanıcı akışı, ana sayfa, açılış sayfası, arama sonucu, e-posta bağlantısı, giriş ekranı veya alışveriş sepeti gibi bir giriş noktasıyla başlar. Hesap oluşturma, satın alma işlemini tamamlama, form gönderme, proje yayınlama veya onay sayfasına ulaşma gibi son bir etkileşimle sona erer.

Bir kullanıcı akışı şunları temsil edebilir:

• Yeni bir uygulamayı keşfetme, kaydolma ve kullanma gibi eksiksiz bir ürün yolculuğu
• Parolayı sıfırlamak veya planı yükseltmek gibi tek bir görev
• Bir proje oluşturma, bir ekip arkadaşını davet etme veya bir tasarımı dışa aktarma gibi bir özellik akışı
• Ekranların ürünün içine nasıl bağlandığını gösteren bir kullanıcı arayüzü akışı

Amaç basit: Arayüzü detaylı bir şekilde tasarlamadan önce kullanıcının yolunu netleştirin.

Temel kullanıcı akışı yapısına bir örnek

Kullanıcı akışı ve kullanıcı arayüzü akışı

Şartlar kullanıcı akışı ve kullanıcı arayüzü akışı yakından ilişkilidir.

Kullanıcı akışı, kullanıcının bir hedefe giden yoluna odaklanır. Aşağıdaki gibi sorulara yanıt verir:

• Kullanıcı nereden başlar?
• Hangi eylemi tamamlamaya çalışıyorlar?
• Yol boyunca hangi kararları veriyorlar?
• Başarılı olurlarsa, başarısız olurlarsa veya farklı bir yol izlerlerse ne olur?

Kullanıcı arayüzü akışı daha spesifik olarak ekranların, durumların, düğmelerin, formların ve arayüz öğelerinin nasıl bağlandığına odaklanır. Aşağıdaki gibi sorulara yanıt verir:

• Bundan sonra hangi ekran gelecek?
• Kullanıcı bu düğmeye tıkladığında ne olur?
• Bu hata durumu nereye gidiyor?
• Kullanıcı formu gönderdikten sonra ne görür?

Uygulamada UX ekipleri sıklıkla her ikisini de birlikte kullanır. Kullanıcı akışı yolu tanımlar. Kullanıcı arayüzü akışı, bu yolu UI ürününün içinde somutlaştırır.

Kullanıcı akışı nasıl okunur

Kullanıcı akışı, kullanıcının giriş noktasından son etkileşime kadar attığı adımları düzenler. Her adım genellikle düğüm olarak da adlandırılan bir şekil ile temsil edilir. Düğümler hareket yönünü gösteren oklarla birbirine bağlanır.

Çoğu kullanıcı akış diyagramı basit bir görsel dil kullanır:

• Daire veya oval: Başlangıç veya bitiş noktası
• Dikdörtgen: Ekran, sayfa veya eylem
• Elmas: Evet/hayır, başarı/başarısızlık veya yol seçme gibi karar noktası
• Ok: Adımlar arasındaki hareket yönü

Kullanıcı akışı bileşenlerinin açıklaması

Örneğin, basit bir kayıt kullanıcı akışı şöyle görünebilir:

1. Kullanıcı ana sayfaya gelir
2. Kullanıcı “Ücretsiz başla”yı tıklar
3. Kullanıcı e-posta ve şifreyi girer
4. Sistem e-postanın geçerli olup olmadığını kontrol eder
5. Kullanıcı hesabı onaylar
6. Kullanıcı katılım ekranına ulaşır
7. Kullanıcı kurulumu tamamlar
8. Kullanıcı kontrol paneline girer

Bu tür bir kullanıcı akışı örneği, ekibin her ekranı tasarlamadan önce deneyimi anlamasına yardımcı olur.

Kullanıcı akışı örnekleri

Kullanıcı akışlarını gerçek ürün görevlerine bağladığınızda anlaşılması daha kolay hale gelir. UX ekiplerinin ürün planlaması sırasında oluşturduğu birkaç yaygın kullanıcı akışı örneğini burada bulabilirsiniz.

Kullanıcı akışını kaydetme

Kayıt kullanıcı akışı, yeni bir ziyaretçinin nasıl kayıtlı kullanıcı haline geldiğini haritalar.

1. Açılış sayfasını ziyaret edin
2. Kayıt CTA’sını tıklayın
3. Kayıt yöntemini seçin
4. Hesap ayrıntılarını girin
5. E-postayı doğrula
6. İlk katılım işlemini tamamlayın
7. Ürün kontrol paneline ulaşın

Bu akış, ekiplerin ilk deneyimde sürtünmeyi azaltmasına yardımcı olur. Kayıt işleminde çok fazla adım, net olmayan form alanları veya kafa karıştırıcı doğrulama durumları varsa kullanıcılar ürünü görmeden kayıttan ayrılabilirler.

Ödeme kullanıcı akışı

Ödeme kullanıcı akışı, kullanıcının ürün ilgisinden satın alma aşamasına nasıl geçtiğini haritalar.

1. Ürünü veya fiyatlandırma sayfasını görüntüleyin
2. Öğe ekle veya plan seç
3. Sepeti veya plan ayrıntılarını inceleyin
4. Ödeme bilgilerini girin
5. Satın alma işlemini onaylayın
6. Başarı sayfasına veya makbuzuna ulaşın

Bu akış özellikle e-ticaret, SaaS ve abonelik ürünleri için önemlidir çünkü her ekstra adım dönüşümü etkileyebilir.

Oturum açma ve parola sıfırlama kullanıcı akışı

Oturum açma akışı, uç durumlar da dahil olmak üzere, geri dönen kullanıcıların hesaplarına nasıl eriştiklerini haritalar.

1. Giriş sayfasını aç
2. Kimlik bilgilerini girin
3. Sistem girişi doğrular
4. Kullanıcı başarıyla oturum açar veya bir hata görür
5. Gerekirse kullanıcı şifre sıfırlamayı başlatır
6. Kullanıcı e-postayı onaylar
7. Kullanıcı yeni şifre belirler
8. Kullanıcı ürüne geri döner

Oturum açma işlemi için kullanıcı akışı örneği (görev akışı)

Kullanıcı akışının başlatılması

Katılımcı kullanıcı akışı, yeni kullanıcıların ilk başarılı ürün anlarına nasıl ulaştıklarını haritalandırır.

1. Hesap oluştur
2. Kurulum sorularını yanıtlayın
3. Şablonu veya başlangıç noktasını seçin
4. İlk eylemi tamamla
5. Başarı durumunu görün
6. Ürüne devam edin

Yapay zeka ürünleri, tasarım araçları ve üretkenlik uygulamaları için katılım akışları kritik öneme sahiptir çünkü kullanıcıların bir sonraki adımda ne yapacaklarını hızlı bir şekilde anlaması gerekir.

Kullanıcı akışı ne zaman oluşturulmalı?

İdeal olarak ilk kullanıcı araştırmasından sonra ve yüksek kaliteli UI tasarımından önce, tasarım sürecinin başlarında kullanıcı akışları oluşturun.

Bu aşamada bir kullanıcı akışı size yardımcı olur:

• Hangi ekranların bulunması gerektiğine karar verin
• Gereksiz adımları kaldırın
• Kafa karıştırıcı karar noktalarını belirleyin
• Ekibi ürün yapısı etrafında hizalayın
• Planı prototipler daha hızlı
• Kırık bir yol için cilalı ekranlar tasarlamaktan kaçının

Kullanıcı akışları daha sonraki ürün yaşam döngüsünde de faydalıdır. Mevcut bir arayüz düşük performans gösteriyorsa bir kullanıcı akışı, insanların nerede ayrıldığını, döngüye girdiğini veya önemli görevleri tamamlamada başarısız olduğunu teşhis etmenize yardımcı olabilir.

Başka bir deyişle kullanıcı akışları yalnızca yeni ürünlere yönelik değildir. Ayrıca mevcut ürünleri geliştirmek için de faydalıdırlar.

UX tasarımında kullanıcı akışlarının rolü

Kullanıcı akışları UX tasarımının temel bir parçasıdır çünkü kullanıcı hedeflerini ürün yapısına bağlarlar. Boşluk, tipografi, görsel hiyerarşi veya bileşenler hakkında endişelenmeden önce kullanıcının neyi başarmaya çalıştığını ve ürünün bu hedefe ulaşmalarına nasıl yardımcı olduğunu bilmeniz gerekir.

Kullanıcı akışları UX ekiplerinin üç önemli şeyi yapmasına yardımcı olur.

1. Daha sezgisel bir arayüz oluşturun

Net bir kullanıcı akışı, son arayüzün anlaşılmasını kolaylaştırır.

Tasarımdan önce akışın haritasını çıkardığınızda sürtünmeyi erken fark edebilirsiniz. Belki bir kullanıcının yeterli bilgiye sahip olmadan önce bir karar vermesi gerekebilir. Belki çok erken bir form belirir. Belki onay adımı eksiktir. Belki birinin yeterli olacağı üç ekran vardır.

Akış kafa karıştırıcıysa, arayüz de muhtemelen kafa karıştırıcı olacaktır.

2. Mevcut bir arayüzü değerlendirin

Kullanıcı akışları, beklendiği gibi dönüştürülemeyen veya elde tutulmayan mevcut ürünleri optimize etmenin harika bir yoludur. Kullanıcılar dönüşüm yapmıyor, etkinleştirmiyor veya önemli bir görevi tamamlamıyorsa mevcut akışın haritasını çıkarın.

Kullanıcıların yanlış ekrana yönlendirildiğini, çok fazla bilgi istendiğini veya amaçlarına uymayan bir yola zorlandığını görebilirsiniz.

3. Stratejinizi ekip üyelerine ve paydaşlara aktarın

Kullanıcı akışları işbirliği için mükemmeldir. Tasarımcılara, geliştiricilere, Proje Yöneticilerine, karar vericilere ve paydaşlara deneyimin ortak bir haritasını sunarlar.

Tasarımcılar ekranları planlamak için akışı kullanabilir. Geliştiriciler bunu durumları ve uç durumları anlamak için kullanabilir. Proje Yöneticileri bunu gereksinimleri açıklığa kavuşturmak için kullanabilir. Paydaşlar, ekip ayrıntılı tasarım veya uygulamaya yatırım yapmadan önce deneyimin mantığını gözden geçirmek için bunu kullanabilir.

Kullanıcı akışları aynı zamanda geliştiricilerin genel durumu anlamasına da yardımcı olabilir. son prototipinizin arkasındaki yapı, bu yapar devretme daha verimli.

Kullanıcı yolculuğu ve kullanıcı akışı

Kullanıcı yolculukları ve kullanıcı akışları sıklıkla karıştırılır ancak aynı şey değildir.

bir kullanıcı yolculuğu kullanıcının bir ürünle ilişkisinin daha geniş hikayesini anlatır. Genellikle ürün kullanımından önce, kullanım sırasında ve sonrasında kullanıcı hedeflerini, duygularını, motivasyonlarını, sıkıntılı noktaları ve temas noktalarını içerir.

bir kullanıcı akışı Kullanıcının belirli bir hedefi gerçekleştirmek için ürünün içinde izlediği yola odaklanır.

Temel farklar

Her ikisi de faydalıdır. Yolculuk, kullanıcının bağlamını anlamanıza yardımcı olur. Akış, arayüzdeki gerçek yolu tasarlamanıza yardımcı olur.

Kullanıcı akışı nasıl oluşturulur?

Beyaz tahta, tasarım aracı, diyagram oluşturma aracı veya yapay zeka tasarım aracıyla kullanıcı akışı oluşturabilirsiniz. Biçim, yolun netliğinden daha az önemlidir.

1. Kullanıcı hedefini tanımlayın

Kullanıcının tamamlamak istediği eylemle başlayın.

• Hesap oluştur
• Bir ürün satın al
• Demo rezervasyonu yapın
• Bir web sitesi yayınlama
• Bir takım arkadaşını davet et
• Bir tasarımı koda aktarma

Bir kullanıcı akışı belirsiz bir ürün alanı değil, belirli bir hedef etrafında oluşturulmalıdır.

2. Giriş noktasını seçin

Kullanıcının nerede başlayacağına karar verin. Örnekler arasında bir ana sayfa, fiyatlandırma sayfası, arama sonucu, e-posta kampanyası, uygulama kontrol paneli, bildirim veya paylaşılan bağlantı yer alır.

Farklı giriş noktaları farklı akışlar yaratabilir. Geri dönen bir kullanıcı ile ilk kez gelen bir ziyaretçinin aynı yola ihtiyacı olmayabilir.

3. Mutlu yolun haritasını çıkarın

Mutlu yol, baştan sona en basit başarılı yoldur.

1. Kullanıcı fiyatlandırma sayfasını açar
2. Kullanıcı planı seçer
3. Kullanıcı hesap oluşturur
4. Kullanıcı ödeme ayrıntılarını girer
5. Kullanıcı satın alma işlemini onaylar
6. Kullanıcı başarı sayfasına ulaşır

Bu size temel deneyimi sağlar.

4. Kararları ve uç durumları ekleyin

Gerçek kullanıcılar her zaman mükemmel yolu izlemezler. Aşağıdaki gibi karar noktalarını ekleyin:

• Kullanıcının zaten bir hesabı var mı?
• Form geçerli mi?
• Ödeme başarılı oldu mu?
• Kullanıcı aylık mı yoksa yıllık faturalandırmayı mı seçti?
• Kullanıcının devam etme izni var mı?
• Kullanıcı iptal ederse ne olur?

Bu dallar, basit bir yolu gerçek bir UX tasarım kullanıcı akışına dönüştüren şeydir.

5. Akışı basitleştirin

Akış haritalandıktan sonra sürtünmeyi arayın.

• Bir adımı kaldırabilir miyiz?
• Ekranları birleştirebilir miyiz?
• Bilgiyi çok mu erken istiyoruz?
• Bir sonraki eylem belli mi?
• Bir çıkmaz var mı?
• Hata durumları açık mı?
• Kullanıcı her zaman ne olduğunu biliyor mu?

En iyi kullanıcı akışları açıkça ortadadır çünkü karmaşıklık perde arkasında zaten çözülmüştür.

Kısaca kullanıcı akışları

Kullanıcı akışları ürün tasarımına yönelik yapısal haritalardır. Kullanıcıların bir uygulama, web sitesi veya görevde giriş noktasından son etkileşime kadar nasıl ilerlediğini gösterirler.

Güçlü bir kullanıcı akışı:

• Net bir kullanıcı hedefiyle başlar
• Kullanıcının giriş noktasını gösterir
• Yoldaki adımları, ekranları ve kararları haritalandırır
• Önemli uç durumları içerir
• Ekiplerin ayrıntılı UI tasarımından önce sürtünmeyi belirlemesine yardımcı olur
• Tasarımcılar, geliştiriciler, Proje Yöneticileri ve paydaşlar için devir işlemini kolaylaştırır

UX ekipleri için kullanıcı akışları, kullanıcı araştırmasını arayüz yapısına dönüştürmenin en pratik araçlarından biridir. Ekran ekran tahmin etmek yerine bilinçli tasarım yapmanıza yardımcı olurlar.

SSS: Kullanıcı akışları

Kullanıcı akışları nedir?

Kullanıcı akışları, kullanıcının bir uygulama, web sitesi veya ürün görevi boyunca izlediği yolu gösteren diyagramlardır. Genellikle ana sayfa veya giriş ekranı gibi bir giriş noktasında başlarlar ve kullanıcı kaydolma, satın alma veya form gönderme gibi bir hedefi tamamladığında sona erer.

UX tasarımında kullanıcı akışı nedir?

UX tasarımında bir kullanıcı akışı, kullanıcının bir hedefi tamamlamak için attığı adımları, ekranları, kararları ve eylemleri haritalandırır. UX ekipleri, yüksek kaliteli ekranlar oluşturmadan önce ürün yapısını planlamak, sürtünmeyi azaltmak ve daha net arayüzler tasarlamak için kullanıcı akışlarını kullanır.

Kullanıcı akışı ile kullanıcı yolculuğu arasındaki fark nedir?

Kullanıcı yolculuğu, kullanıcı motivasyonları, duygular, sorunlu noktalar ve temas noktaları dahil olmak üzere daha geniş bir deneyimi gösterir. Kullanıcı akışı, kullanıcının bir görevi tamamlamak için ürünün içinde izlediği belirli yola odaklanır.

Kullanıcı arayüzü akışı nedir?

Kullanıcı arayüzü akışı, ekranların, UI durumlarının, düğmelerin, formların ve etkileşimlerin bir ürün içinde nasıl bağlandığını gösterir. Bir kullanıcı akışıyla yakından ilişkilidir, ancak daha spesifik olarak arayüz düzeyindeki yola odaklanır.

Ne zaman bir kullanıcı akışı oluşturmalısınız?

İlk kullanıcı araştırmasından sonra ve ayrıntılı UI tasarımından önce bir kullanıcı akışı oluşturun. Ayrıca mevcut bir ürünü denetlemek, üründen ayrılmayı teşhis etmek veya dönüşümü iyileştirmek için daha sonra kullanıcı akışları da oluşturabilirsiniz.

Kullanıcı akışı örnekleri nelerdir?

Yaygın kullanıcı akışı örnekleri arasında kayıt akışları, ödeme akışları, katılım akışları, oturum açma akışları, parola sıfırlama akışları, rezervasyon akışları, yükseltme akışları ve ekip arkadaşı davet akışları yer alır.

Kullanıcı akışları neden önemlidir?

Kullanıcı akışları, ekiplerin, ayrıntılı tasarım veya geliştirmeye yatırım yapmadan önce kullanıcıların bir üründe nasıl ilerlediğini anlamalarına yardımcı olur. Sürtüşmeleri, eksik adımları, kafa karıştırıcı kararları ve gereksiz karmaşıklığı sürecin başında ortaya çıkarırlar.

Kullanıcı akışı nasıl yapılır?

Bir kullanıcı hedefiyle başlayın, giriş noktasını seçin, mutlu yolun haritasını çıkarın, kararlar ve uç durumları ekleyin, ardından yolu basitleştirin. Başlangıç ​​ve bitiş noktaları için daireler veya ovaller, ekranlar veya eylemler için dikdörtgenler, kararlar için elmaslar ve yön göstermek için oklar kullanın.

Kullanıcı akışları ve UX tasarımı için Anima Playground’i deneyin

Anima Playground tarayıcıda ürün fikrinden UX akışına, tasarımına ve çalışma koduna geçmenizi sağlar. Oluşturmak istediğiniz deneyimi tanımlayın, yapay zeka ile geliştirin ve sonucu gerçek bir etkileşimli ürüne dönüştürün.

Anima Playground ile tasarlamaya başlayın.