Kompleksowy przewodnik po projektowaniu powiadomień

Wiadomości peryferyjne w produktach cyfrowych, zwane zbiorczo powiadomieniami, nigdy nie powinny szkodzić wrażeniom użytkownika. Zamiast tego muszą przyczynić się do doświadczenia, które pomoże ludziom osiągnąć cel. Zajęcie się projektowaniem powiadomień na wczesnym etapie procesu projektowania produktu przyniesie lepsze wyniki.

Wyobraź sobie grupę architektów projektujących trzypiętrowy dom, którzy miesiącami pracują nad projektami. To robi wrażenie! To jest piękne! Ale kiedy zbliżają się do ukończenia diagramu, jeden z nich woła: „ Czekaj! Jak ludzie dostają się z pierwszego na trzecie piętro? Zapomnieli o schodach!

Podobnie projektanci produktów mają tendencję do myślenia o małych, ale krytycznych ulepszeniach UX na końcu. Podobnie jak w przypadku pustych stanów, projektanci mają tendencję do pozostawiania projektu powiadomień — alertów, komunikatów o błędach, potwierdzeń, ogłoszeń i potwierdzeń — do samego końca. Problem może nagle wyjść na jaw, gdy programista zapyta: „ Jak radzimy sobie z błędami? ” Ponieważ jest to refleksja, takie podejście do doczepiania się często prowadzi do niechlujnych „frankendesigns”, co szkodzi UX.

Aby uniknąć takiego scenariusza, najlepiej jest zastosować zintegrowane podejście do projektowania powiadomień, aby poprawić wrażenia użytkownika . Chociaż projektanci mogą nie mieć wszystkich informacji na wyciągnięcie ręki, zaprojektowanie kompleksowej struktury powiadomień podczas cyklu życia projektu produktu pomoże przygotować produkt na nieprzewidziane przypadki użycia.

Rozpoczynając projektowanie powiadomień, podstawową zasadą projektowania, o której należy pamiętać, jest to, że muszą one pomagać (nie utrudniać) ludziom wykonywania zadań . Niezbędne jest wczesne przetestowanie prototypów produktów i określenie przypadków użycia, w których komunikaty peryferyjne mogą być przydatne w interakcjach . Jednak najlepszy sposób komunikacji z użytkownikami będzie różny i zależy od kilku kluczowych czynników:

• Rodzaj przekazywanych informacji
• Pilność informacji – czy trzeba ją natychmiast zobaczyć
• Czy w wyniku tych informacji wymagane jest działanie użytkownika?

Oprócz tego, jaka będzie stylistyka i zachowanie powiadomień, ich ton musi zostać ustalony przez kopię UX. Wszystkie kopie powiadomień muszą być jasne, zwięzłe i użyteczne. Dobrze zaprojektowany system powiadomień został również zaprojektowany z myślą o dostępności i jest elastyczny w obsłudze różnych języków.

Terminologia używana do powiadomień jest zwykle podobna, ale będzie się nieznacznie różnić w zależności od zespołu i projektu. Zadaniem projektanta jest określenie terminologii struktury powiadomień — jak nazywa się co — oraz zsynchronizowanie wszystkich powodów ich użycia: co, gdzie i jak .

Lepsza użyteczność dzięki lepszemu projektowi powiadomień

Powiadomienia pełnią istotną funkcję w użyteczności produktu. „ Widoczność stanu systemu ” jest numerem jeden na liście „10 heurystyk użyteczności dla projektowania interfejsu użytkownika” opracowanej przez Nielsen Norman Group. Zasada mówi, że „ system powinien zawsze informować użytkowników o tym, co się dzieje, poprzez odpowiednią informację zwrotną w rozsądnym czasie. ”

System powiadomień jest tak dużą częścią UX produktu cyfrowego, że bez niego produkt wydawałby się pominięty. Jeśli nie ma „widoczności stanu systemu” i informacji zwrotnych, jest to podobne do jazdy samochodem bez deski rozdzielczej.

Deska rozdzielcza samochodu jest pełna wskaźników, ikon i świateł zaprojektowanych w celu zapewnienia widoczności systemu operacyjnego samochodu oraz zapewnienia bezpiecznej i niezawodnej obsługi. Podczas jazdy na bieżąco informuje nas zestaw odczytów i powiadomień dotyczących temperatury silnika, stanu akumulatora, ciśnienia oleju, świateł, hamulców, poduszek powietrznych itd. Kiedy chcemy skręcić, migające światło sygnalizuje skręt, a także dźwięk kliknięcia, które dostarczają nam informacji zwrotnej. Posiadamy również wskaźnik zbiornika paliwa, który wskazuje, kiedy zbiornik paliwa jest niski.

Działa to w ten sam sposób z produktem cyfrowym. Widoczność statusu systemu i informacji zwrotnych ma fundamentalne znaczenie, jeśli chodzi o użyteczność, a użyteczność jest podstawą wspaniałych doświadczeń użytkowników.

Tworzenie przydatnych ram powiadamiania

Aby dobrze zaprojektować ramy powiadomień, pomocne może być myślenie o powiadomieniach w kategoriach „siły sygnału”. Które komunikaty peryferyjne wymagają więcej lub mniej uwagi? Na przykład interakcje, które mogą być potencjalnie destrukcyjne, wymagają „głośniejszych” powiadomień, a interakcje nieniszczące wymagają „cichszych”.

Wysyłanie ludziom odpowiedniej ilości powiadomień jest działaniem równoważącym , a przesadzenie jest obarczone niebezpieczeństwem; produkt może otrzymać wiele negatywnych opinii lub w najgorszym przypadku zrazić ludzi do tego stopnia, że ​​zrezygnują z niego. Dlatego projektanci muszą dokładnie rozważyć UX i wysyłać wiadomości tylko w dobrze zdefiniowanym celu. Dobrym pomysłem jest również zapewnienie użytkownikom elastyczności w wyłączaniu wszystkich lub przynajmniej niektórych powiadomień.

Wstępne podejście do projektowania powiadomień wymaga klasyfikacji na trzech poziomach: wysoki, średni i niski poziom uwagi , tj. „poziomy ważności”. Następnie typy powiadomień muszą być dalej zdefiniowane przez określone atrybuty na tych trzech poziomach, niezależnie od tego, czy są to alerty, ostrzeżenia, potwierdzenia, błędy, komunikaty o powodzeniu lub wskaźniki stanu.

Po zidentyfikowaniu atrybutów powiadomień nadszedł czas na utworzenie taksonomii różnych powiadomień, które będą tworzyć ramy. Poniższa lista wcale nie jest wyczerpująca — typy powiadomień będą się różnić w zależności od produktu, przypadków użycia i innych zmiennych. ( Uwaga : jak wspomniano, różne zespoły używają różnych terminologii. Na przykład „potwierdzenie” nazywamy powiadomieniem, które wymaga zgody użytkownika na przeprowadzenie destrukcyjnej interakcji. Niektóre zespoły mogą używać „potwierdzenia” jako terminu wiadomość o sukcesie.)

Wysoka uwaga

• Alerty (wymagana natychmiastowa uwaga)
• Błędy (wymagane natychmiastowe działanie)
• Wyjątki (anomalie systemowe, coś nie działało)
• Potwierdzenia (potencjalnie destrukcyjne działania, które wymagają potwierdzenia użytkownika, aby kontynuować)

Średnia uwaga

• Ostrzeżenia (nie jest wymagane natychmiastowe działanie)
• Podziękowania (informacje zwrotne na temat działań użytkownika)
• Wiadomości o sukcesie

Niska uwaga

• Wiadomości informacyjne (inaczej powiadomienia pasywne, coś jest gotowe do wyświetlenia)
• Plakietki (zwykle na ikonach, oznaczające coś nowego od ostatniej interakcji)
• Wskaźniki stanu (informacje systemowe)

Projektowanie świetnego UX powiadomień

Aby zaprojektować produkt z doskonałym UX, projektanci muszą sporządzić listę wszystkich przypadków użycia, w których powiadomienia mogą być pomocne. Zaleca się, aby ten proces był wykonywany we współpracy z programistą, ponieważ w większości przypadków mogą oni być bezstronni i być w stanie pomóc w rozwiązywaniu skrajnych przypadków, których projektant mógł nie wziąć pod uwagę.

Projektanci powinni również odnotowywać wszystkie interakcje podczas testów użytkowników, w których powiadomienia mogą stanowić wartość dla ulepszenia UX.

Po uzbrojeniu listy następnym krokiem jest kategoryzacja powiadomień na podstawie pożądanego poziomu uwagi i atrybutów. Ponownie, ponieważ powiadomienia nie powinny być nachalne , należy to zrobić ostrożnie. Niektóre z pytań, które należy zadać podczas tego procesu, to:

• Co wywoła powiadomienie?
• Jaki rodzaj informacji zwrotnej jest przekazywany?
• Gdzie i jak pojawi się powiadomienie?
• Które powiadomienie wymagałoby natychmiastowej interakcji?
• Czy powiadomienie jest trwałe czy nietrwałe?

Następnie należy określić kodowanie kolorami i ikony i wprowadzić je do systemu projektowania (lub przewodnika po stylu). Przechodząc przez ten proces, projektanci muszą wziąć pod uwagę każdy przypadek pojawienia się powiadomienia i upewnić się, że renderują się poprawnie na wszystkich tłach.

Kluczowe znaczenie ma również umieszczenie powiadomień. Ryzykując stwierdzenie oczywiste, aby uniknąć zasłaniania interfejsu, powiadomienia powinny pojawiać się na górze lub na dole, albo w pobliżu rogów interfejsu użytkownika. Co więcej, jeśli projekt jest responsywny, projektanci muszą testować wygląd powiadomień za pomocą różnych rzutni. Jest to szczególnie ważne, gdy komunikaty o błędach mogą być wyświetlane w responsywnych formularzach mobilnych.

Projektowanie struktury powiadomień nie jest łatwe. Należy wziąć pod uwagę wiele drobnych szczegółów występujących w różnych scenariuszach. Oprócz dostępności i czytelności należy pamiętać o przyszłej lokalizacji. System powiadomień, który wygląda idealnie w języku angielskim, może się całkowicie rozpaść, gdy zostanie użyty na platformie niemieckiej lub japońskiej.

Dalsze pytania, które należy zadać, jeśli chodzi o definiowanie zachowania powiadomień :

• Jeśli alert lub ostrzeżenie ma być trwałe, w jaki sposób projektanci zapewniają, że ludzie nadal mają do nich dostęp po opuszczeniu ekranu początkowego?
• Czy w miejscu, w którym można by zobaczyć archiwum powiadomień, musiałaby być umieszczona ikona ostrzeżenia z plakietką?
• Jeśli powiadomienie jest nietrwałe, po jakim czasie zniknie i czy powinna istnieć możliwość odrzucenia go, zanim zniknie?

W przypadku aplikacji mobilnych nie tylko powiadomienia w aplikacji, ale także powiadomienia push (na poziomie systemu, poza aplikacją) również muszą być starannie zaprojektowane. W większości są to przerwy, dlatego ważne jest, aby spojrzeć na kopię powiadomienia oraz jak i kiedy poprosić o zgodę na ich wysłanie. Wykorzystane zbyt często mogą zniechęcać ludzi do korzystania z aplikacji. Zbyt wiele nieistotnych powiadomień może frustrować użytkowników, którzy mogą następnie wyciszyć powiadomienia lub całkowicie przestać korzystać z aplikacji.

Projektanci powinni również wziąć pod uwagę powiadomienia , które pozwolą ludziom pracować wydajnie bez otwierania aplikacji. Umożliwienie użytkownikom wykonywania małych zadań bez wchodzenia do aplikacji może być potężnym narzędziem do ulepszania UX.

W przypadku powiadomień push na urządzenia mobilne najlepszą praktyką UX jest opóźnianie wszelkich powiadomień (prośby o dostęp do lokalizacji danej osoby, wysyłanie powiadomień push itd.), dopóki ludzie nie będą mieli okazji trochę poznać aplikacji.

Najlepsze praktyki powiadamiania dotyczące doskonałego UX

Przestrzeganie poniższych najlepszych praktyk zapewni, że ludzie będą postrzegać powiadomienia jako wartościowe, a nie jako przerwy, zwiększając w ten sposób wrażenia użytkownika. Przed zaprojektowaniem systemu powiadomień i umieszczeniem ich w systemie projektowania, rozważ następujące podstawowe najlepsze praktyki:

• Klasyfikuj powiadomienia według trzech poziomów uwagi omówionych wcześniej. Następnie zdefiniuj taksonomię różnych form powiadomień w ramach tych trzech poziomów.
• Tworząc przewodnik stylu dla systemu powiadomień, określ maksymalną długość znaków dla powiadomienia we wszystkich językach, w których będzie ono wydawane.
• Zwróć szczególną uwagę na adaptacyjność i elastyczność, aby dostosować się do różnych typów treści i długości tekstu.
• Stwórz spójną kolorystykę dla trzech poziomów uwagi, a także spójną ikonografię.
• Twórz zwięzłe, czytelne powiadomienia zawierające przydatne informacje.
• Dokładnie zastanów się , co i kiedy wysłać. Na urządzeniu mobilnym opóźnij wysyłanie powiadomień o świeżo pobranych aplikacjach, aby uniknąć zrażania ludzi. Dokładnie zbadaj kontekst i przypadki użycia.
• Błąd po stronie wyświetlania mniejszej liczby powiadomień, niezależnie od tego, czy są to alerty, ostrzeżenia, czy inne aktualizacje stanu zwracające uwagę na wysokim lub średnim poziomie. Zamiast tego umieść je na liście, do której ludzie mogą uzyskać dostęp, kiedy chcą je zobaczyć (oznaczone plakietką ikony w interfejsie użytkownika).
• Rozważ system z opcją oznaczania powiadomień „nie pokazuj ponownie”.
• Nietrwałe potwierdzenia, takie jak „bary z przekąskami”, powinny zniknąć z ekranu po co najmniej czterech sekundach i maksymalnie ośmiu sekundach, z opcją wcześniejszego odrzucenia i „cofnięcia” w razie potrzeby.
• W przypadku powiadomień o wysokim poziomie uwagi na telefonie komórkowym, jeśli to możliwe, weź pod uwagę dźwiękowe i dotykowe informacje zwrotne.
• Zapewnij odpowiedni kontrast na powiadomieniach dla czytelności oraz między tłem, na którym pojawiają się powiadomienia. Pamiętaj, że w przypadku płynnych, responsywnych projektów tło pod powiadomieniem może się przesuwać.

Najlepsze praktyki dotyczące komunikatów o błędach

• Komunikaty o błędach powinny być proste i bezpośrednie, najlepiej wykonalne, napisane w języku łatwym do odczytania i szybkim do zrozumienia.
• Unikaj niejasnych kodów i skrótów, takich jak „ powodzenie otrzymanej odpowiedzi jest fałszywe. ”
• Podaj zwięzłe, jasne opisy problemu zamiast „ wystąpił błąd”. ”
• Unikaj obwiniania ludzi lub mówienia im, że zrobili coś złego — na przykład, mówiąc, że było to „ nielegalne polecenie”. ”
• Podaj konstruktywne komunikaty o błędach w kontekście, aby ludzie mogli rozwiązać problem.
• Unikaj wskazywania błędu tylko poprzez zmianę koloru pola na czerwony. Nie czyni go dostępnym dla osób niepełnosprawnych. Zawsze najlepiej jest uwzględnić inne wizualne wskazówki, które mogą zobaczyć osoby z daltonizmem.
• Użyj walidacji wbudowanej dla pól wejściowych w formularzach.
• Komunikaty o błędach nie powinny znikać, dopóki ludzie nie naprawią problemu.

Streszczenie

Powiadomienia przyczyniają się do doświadczenia, które pomaga ludziom osiągnąć cel i powinny być traktowane jak każdy inny komponent produktu cyfrowego. Jednak powiadomienia mogą działać w obie strony. Jeśli są dobrze obsługiwane, mogą zwiększyć UX i pomóc w zaangażowaniu, ale źle wykonane mogą stać się irytujące. Osiągnięcie właściwej równowagi jest kluczowe.

Powiadomienia nie powinny być traktowane jako refleksja. Aby wykonać je prawidłowo, projektanci muszą odpowiednio wcześnie zająć się przypadkami użycia, zdefiniować różne formy podczas cyklu życia projektu produktu i szeroko je przetestować.

Krótkie podsumowanie właściwego sposobu projektowania powiadomień:

• Rozpocznij projektowanie powiadomień wcześnie, a nie po namyśle.
• Klasyfikuj powiadomienia według trzech poziomów uwagi: wysokiego, średniego i niskiego.
• Oznacz kolorami, przypisz ikony i określ miejsca docelowe.
• Kategoryzuj je według typu: trwałe lub nietrwałe, wyskakujące, banerowe, dialogowe itp.
• Włącz je do systemu projektowania.

Zrozumienie , kiedy i jak korzystać z powiadomień, jest niezbędne do zapewnienia doskonałej użyteczności i budowania spójności w wiadomościach produktowych. Uważnie oceniając komunikaty peryferyjne, które należy pokazać we właściwym momencie, projektanci mogą zwiększyć wydajność produktu i poprawić jego UX.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Jak pracować zdalnie, kiedy ma to największe znaczenie
• Jak łatwo przejść do pracy zdalnej
• Najlepsze praktyki i błędy w projektowaniu aplikacji mobilnych
• Kompletny przewodnik po projektowaniu witryn eCommerce
• Awaria czatu – gdy chatbot nie działa