🎨 uxowy.dev #58: doskonałe komunikaty o błędach, dark patterny

Mikołaj Waśkowski -

Dziś wyjątkowo w poniedziałek, bo... po prostu nie zdążyłem przygotować wszystkiego na piątek 🤷  

Także... na dobry początek tygodnia:

  • Doskonałe komunikaty o błędach: zwiększ skuteczność i zaufanie swojej aplikacji (NNGroup)
  • Jak firmy używają dark patternów, abyś nie anulował subskrypcji?

Doskonałe komunikaty o błędach: zwiększ skuteczność i zaufanie

UX | źródło

Świetny artykuł od NNGroup o przyjaznych użytkownikowi komunikatach o błędach.

Poniżej znajdziesz skrótowiec i parę przykładów z artykułu.
Zachęcam jednak do zapoznania się z jego pełną treścią.

👇👇👇

Skrótowiec - na co warto zwrócić uwagę?

  • komunikaty o błędach powinny być łatwo zauważalne przez użytkowników,
  • wykorzystaj odpowiednie kolory, ikony lub animacje, aby przyciągnąć uwagę użytkowników,
  • komunikaty powinny być jasne, zwięzłe i precyzyjne,
  • unikaj nadmiaru informacji, skupiając się na przekazaniu istotnej wiadomości dotyczącej błędu,
  • wyróżnij różne typy komunikatów, np. error / warning / form validation,
  • twórz je w sposób pozytywny, unikając złośliwości i obarczania użytkownika winą za błąd,
  • spróbuj dodać info o tym, jak rozwiązać problem,
  • wynik walidacji w formularzu powinien być wyświetlany bezpośrednio przy polu, a nie jako oddzielne okno dialogowe / zbiorcze info na dole,
  • pamiętaj też o accessibility komunikatów, sprawdź jak wygląda sprawa na czytnikach ekranu (może trzeba dodać jakieś ARIA?).

Przykłady błędów (dobrych ✅ i złych ❌)

❌ ŹLE - błąd powinien być blisko miejsca, które powoduje problem i ...wyglądać jak błąd. Źródło
✅ DOBRZE - błąd zaraz pod polem, czerwony kolor, bold, odpowiednia ikona. Źródło
✅ DOBRZE - warning ostrzegający o możliwości opóźnionej dostawy. Źródło
✅ DOBRZE - pole hasła może powodować dużą ilość błędów - warto dodać walidację live. Źródło
❌ ŹLE - na tej stronie jest autofocus na pole email. Jeśli pole odklikniemy (blur), od razu wyświetla się błąd. Źródło
❌ ŹLE - błędy powinny być pisane prostym, zrozumiałym dla każdego językiem. To nie jest dobre miejsce na śmieszki, grę słów itd. Źródło
✅ DOBRZE - prosty feedback o konieczności dodania więcej $ do koszyka. Zwróć uwagę na brak obwiniana usera. Źródło
❌ ŹLE - przeciwieństwo powyżeszego - "You are not eligible" bezpośrednio obwinia usera. Źródło
✅ DOBRZE - ostrzeganie użytkownika, że nie dodał załącznika a w treści maila wspomniał o tym załączniku. Źródło

Więcej przykładów i wartościowej wiedzy, którą warto obczaić:
nngroup.com/articles/error-message-guidelines

Error-Message Guidelines
Design effective error messages by ensuring they are highly visible, provide constructive communication, and respect user effort.
Nielsen Norman GroupBruce Tognazzini

Jak firmy używają dark patternów, abyś nie anulował subskrypcji?

UX | źródło

Warto wejść choćby po to, aby zobaczyć w jakiej formie jest ten artykuł przedstawiony. Wow!

Link: pudding.cool/2023/05/dark-patterns

How companies use dark patterns to keep you subscribed
Unsubscribing should be easy. It’s not.
The PuddingThe Pudding
😎
Zapodaj info o tym newsletterze swoim devowym ziomkom! Na pewno im też przyda się trochę wiedzy o UI/UX dla developera! A ja będę bardzo wdzięczny, że dzięki Tobie to, co robię dociera do większej ilości osób!

Dzięki!

To wszystko na dziś!
Dobrego tygodnia!

Mikołaj Waśkowski
uxowy.dev

Poprzednie wydania: