Başarı ve duygusal tepki mesajları

1) Neden başarı mesajları

UX-geribildirimi "başarı" (başarı durumu geribildirimi), kullanıcının başarılı bir işlemden sonra aldığı olumlu bir geri bildirimdir: bir form göndermek, bir ödemeyi tamamlamak, kaydı onaylamak, ayarları kaydetmek vb.
Bu mikro anlar UX psikolojisinin güçlü bir aracıdır: kontrol duygusunu geliştirir, çabayı ödüllendirir ve davranışsal bir alışkanlığı güçlendirir. Davranışsal tasarım açısından, ürüne güven ve sadakat oluşturan bir "dopamin tepki anı'dır.

1. Sonucu doğrular. Kullanıcının her şeyin doğru bittiğinden şüphesi yoktur.

2. Duygu yaratır. Neşe, tatmin, bütünlük duygusu.

3. Sonraki adımı belirler. Şimdi ne yapılabilir - paylaşın, geri dönün, devam edin.

2) Başarı mesajları türleri

3) UX başarı mesajlarının temel ilkeleri

1. Özellikler. Tam olarak ne başarılı oldu: "Belgeler kontrol edildi", "Ödeme kabul edildi".
2. Bağlam. Kullanıcının adımını göz önünde bulundurun: kayıt ≠ çıktı ≠ tasarruf.
3. Zamanındalık. Mesaj onaylandıktan hemen sonra, gecikmeden görüntülenir.
4. Kısalık. 1-2 satır metin + anlaşılır CTA.
5. Görsel destek. Renk, animasyon, kene simgesi, ses veya titreşim sinyali.
6. Duygusal denge. Eylem rutin ise aşırı "şenlik" olmadan.
7. Bir sonraki adım. Kullanıcıyı "çıkmaz bir sokakta" bırakmayın - mantıklı bir devam önerisinde bulunun.

4) Başarı mesajının yapısı

• Başlık (isteğe bağlı): kısa onay ("Bitti! ", "Başarıyla Kaydedildi").
• Metin: sonucu somutlaştırmak.
• CTA: Sonraki ilgili eylem.
• Görselleştirme: olumlu bir sonucu vurgulayan hafif animasyon/simge.
• Görüntüleme süresi: Tost için 2-4 saniye veya modal pencere için tıklamadan önce.

5) Farklı senaryolar için desenler

5. 1 Kayıt/Yetkilendirme

«Hoşgeldiniz! Hesap oluşturuldu. Lütfen onay için postanızı kontrol edin"

"Başarıyla giriş yaptınız. Kaldığınız yerden devam edin"

5. 2 Ödemeler/şarj

"Ödeme kabul edildi! Fonlar 15 dakika içinde kredilendirilecek"

"Yenileme başarılı oldu. Denge güncellendi"

5. 3 KYC/Doğrulama

"Belgeler doğrulandı. Tüm özellikler artık mevcut"

«Tebrikler! Hesabınız tamamen doğrulandı"

5. 4 Ayarlar/kaydeder

"Değişiklikleriniz kaydedildi".

"Ayarlar güncellendi. Yeni değerler yeniden başlatıldıktan sonra geçerli olacak"

5. 5 Bonuslar/Başarılar

«Tebrikler! 50 FS bonus aldın"

"Oyun Haftası görevini tamamladınız! [Ödül Alın]"

6) Duygusal mesaj tasarımı

Başarı mesajları, arayüzün duygusal manzarasının bir parçasıdır. Sistemin "canlılık" hissini oluştururlar.

• Mikroanimasyonlar: bir kene, konfeti, yumuşak titreşimin pürüzsüz görünümü.
• Renk: yeşil/turkuaz - güvenlik ve kabul ile ilişki.
• Ses/titreşim (mobil): Görsel faza denk gelen kısa bir sinyal.
• Ton: sakin güven yerine pazarlama öfori.

7) UX dengesi: rasyonel ve duygusal

• Rasyonel UX: "Eylemin tamamlandığını görüyorum".
• Duygusal UX: "Sistem katkımı takdir etti/memnunum".

• günlük aktiviteler - nötr olumlu sinyaller;
• Önemli başarılar - duygusal vurgu (illüstrasyon, ses, bonus).

Asıl mesele özü bir "etki'ile değiştirmek değildir: duygu, başarının farkındalığını arttırmalı ve dikkatini dağıtmamalıdır.

8) Duyguların lokalizasyonu ve kültürü

Farklı diller neşeyi ve "formaliteyi" farklı şekilde ifade eder.
İngilizce: "Aferin!" cela va sans dire; Almanca "Erfolgreich abgeschlossen'den daha uygundur.
Türkçe ve Arapça arayüzlerde aşırı ünlemlerden sıklıkla kaçınılır.
Lokalizasyonlarda önemlidir: aynı uzunlukta çizgiler, aynı duygu gücü.
Çevirmenler için ton haritası saklayın: senaryolara göre kabul edilebilir "sevinç" seviyeleri.

9) Performans metrikleri

Başarı mesajında CTA'ya göre TO (kaç kullanıcı gelecek).
Tepki süresi: Otomatik gizlemeden önce mesajın kapalı olup olmadığı.
Reaksiyon sayısı (fonksiyonun yeniden kullanımı).
Bir sonraki adımdaki hata oranı, geri bildirimin netliğinin bir göstergesidir.
UX röportajı: "Eylemin tamamlandığını fark ettiniz mi? ”.

• Cümle çeşitleri ("Hazır" vs "Başarılı").
• İllüstrasyon/ikon varlığı.
• CTA varlığı.
• Duygusallık tonu (nötr vs destekleyici).

10) Anti-desenler

Akışı engelleyen aşırı yüklenmiş animasyonlar.
Ciddi adımlarla aşırı neşeli veya "çocuksu" ton.
Tam olarak neyin tamamlandığını belirtmeden nötr "Tamam".
Açık bir devam varsa, CTA'sız mesaj.
Statü ile renk uyumsuzluğu (örn. Başarı üzerine kırmızı arka plan).
Uzun işlemler sırasında onay eksikliği (kullanıcı emin değil).

11) Yayın öncesi kontrol listesi

• Etkinliğin tamamlandığı açık mı?
• Tam olarak ne yapılır?
• Mesaj aşırı duygusal değil mi?
• Bir sonraki adım için bir CTA var mı?
• Renk ve simge başarı desenine uyuyor mu?
• Mesaj 2-4 saniye boyunca görünür (veya eylemden önce)?
• Karanlık ve Mobil Olarak Test Edildi?
• Yerelleştirme anlam ve tonu değiştirdi mi?

12) Örneklerden önce/sonra

• Önce: "Tamam"
• Sonra: "+ Ödeme kabul edildi! Hesaba yatırılan para. [Tarihi görüntüle]"

• Önce: "Kayıt tamamlandı"
• Sonra: "Hoş geldiniz! Hesap oluşturuldu. Lütfen onay için postanızı kontrol edin"

• Önce: "Değişiklikler kaydedildi"
• Sonra: "+ Ayarlar güncellendi. Yeni ayarlar zaten uygulandı"

• Önce: "Belgeler doğrulandı"
• Sonra: "+ Her şey hazır! Doğrulama geçti. Sonuçlar ve bonuslar artık mevcut"

13) Tasarım sistemi için şablon

jsx
<SuccessMessage title = "Done!"
message =" Your payment was successful."
icon="check-circle"
duration={3000}
primaryAction = {{label: "View history," onClick: openHistory}}
tone="positive"
/>

14) Hızlı ifade desenleri

Kısa hile sayfası

Başarıyı özellikle onaylayın.
Hafif bir duygu ekleyin - tekrar oynatma yok.
Görsel ve metinsel olarak olumlu olanı vurgulayın.
Bir sonraki adımı önerin.
Hız, okunabilirlik ve kültürel dengeyi kontrol edin.