Dobrze zaprojektowane okienko dialogowe zmniejsza ryzyko, że ludzie automatycznie zgodzą się na ostrzeżenie, nie zdając sobie sprawy z konsekwencji.

Jedną z głównych wytycznych dobrego UX jest zapobieganie błędom użytkownika. Projektując naszą aplikację musimy zdawać sobie sprawę, że jej odbiorcy nie zawsze będą używać jej w zamierzony przez nas sposób. Przypadkowe kliknięcie, nie trafienie w przycisk, niezrozumienie  komunikatu lub zwykła nieuwaga - może wywołać poważne konsekwencje.  Oczywiście, istnieje wiele sposobów zapobiegania (lub przynajmniej ograniczania) błędom użytkownika. Tutaj skupimy się na jednym z najprostszych — oknie dialogowym potwierdzenia.

Definicja: Okno dialogowe potwierdzenia pyta użytkowników, czy są pewni, że chcą wykonać daną czynność.

Ale po co w ogóle mieć okna dialogowe z potwierdzeniem? Odpowiedź jest prosta - aby dać użytkownikowi drugą szansę sprawdzenia ich pracy przed przystąpieniem do niebezpiecznej akcji (tj usunięcie pliku, danych lub całego konta). Podkreślę tutaj, że nie będzie to wcale druga szansa, jeśli użytkownicy zautomatyzują swoją reakcję i po prostu klikną „Tak” bez żadnego zastanawiania się.

Takie okienko musi zwrócić uwagę  użytkownika, wyjaśnić jaką akcję rozpoczyna, wraz z dokładnym objaśnieniem skutków tego działania. Bez identyfikowania szczegółów nie ma sensu prosić użytkowników o potwierdzenie żądania. Gdy użytkownicy są pytani Czy na pewno chcesz to zrobić? bez dalszych szczegółów jedyną rozsądną reakcją jest „oczywiście, że chcę zrobić to, co właśnie kliknąłem” i nacisnąć Tak bez dalszego myślenia. Takie zautomatyzowane zachowania nie zapewniają żadnej ochrony, a jedynie irytują użytkowników — i sprawiają, że ​​zwracają mniejszą uwagę na przyszłe ostrzeżenia.

Na co zwrócić uwagę projektując okienko potwierdzenia?

1. Używaj go tylko do potwierdzenia działań o poważnych konsekwencjach

Okna dialogowego potwierdzenia używaj tylko przed podjęciem działań o poważnych konsekwencjach — takich jak niszczenie pracy użytkowników lub wydawanie dużych pieniędzy. Stosowanie takiego okienka jest szczególnie istotne gdy użytkownik właśnie zamierza wykonać czynność, której efektu nie da się cofnąć. Jeśli chcemy aby nasza aplikacja była „User Friendly” powinniśmy dać użytkownikowi zarówno poczucie kontroli i wolności przy zapewnieniu poczucia bezpieczeństwa i możliwości wyjścia z poważnych problemów.

2. Nie używaj go do potwierdzania rutynowych działań.

Podobnie jak w bajce Ezopa, jeśli zbyt wiele razy wywołujesz wilka, ludzie przestaną zwracać uwagę na pytanie, a okno dialogowe potwierdzenia straci swoją moc zapobiegania błędom.

3. Bądź konkretny i informuj użytkowników o konsekwencjach ich działania.

Nie pytaj „Czy na pewno chcesz to zrobić?”.  Zamiast tego wyjaśnij, co to jest, używając terminów które są łatwe do zrozumienia i elementów graficznych które zwrócą jego uwagę. Zamiast odpowiedzi Tak/Nie, podaj opcje odpowiedzi, które podsumowują, co stanie się dla każdej możliwej odpowiedzi. Na przykład w przypadku usunięcia pliku użyj przycisków oznaczonych Usuń plik i Zachowaj plik.

4. Nie oznaczaj odpowiedzi domyślnej

Nie wybieraj za użytkownika odpowiedzi oznaczając dany przycisk np. „TAK” jako opcja domyślna. Głównym celem potwierdzeń jest upewnienie się, że użytkownicy dokładnie rozumieją swoje działanie i nie kontynuują, chyba że są naprawdę pewni, że chcą je wykonać. Można oczywiście z tego wywnioskować że dobrym pomysłem będzie ustawienie domyślnj odpowiedzi jako „ Nie”, ale najlepiej po prostu w ogóle nie mieć domyślnej odpowiedzi.

Praktyczne wskazówki projektowe:

5. Wykorzystaj siłę koloru czerwonego - dla akcji powiązanych z usuwaniem.

Kolor czerwony jest silnym wizualnym sygnałem ostrzegawczym - łatwo przykuwa uwagę i jest powszechnie stosowany dla znaków ostrzegawczych - np STOP, zakaz wjazdy czy zakaz palenia
Dlatego unikaj używania czerwonych przycisków przy standardowych okienkach związanych z regularnym działaniem  ( po co alarmować użytkowników). Kolor czerwony zarezerwuj dla potwierdzenia czynności związanej z kasowaniem.

6. Dodaj ikony, które wzmocnią siłę ostrzeżenia

Chociaż czerwony przycisk ostrzega większość użytkowników, niektórzy mogą nie traktować go poważnie.

Projektując okno potwierdzające usunięcie danego elementu - warto pomyśleć o dodatkowych elementach wizualnych (np ikonce kosza) , które wzmocnią siłę ostrzeżenia. Takie detale pomogą też użytkownikom, którzy mają problem z rozróżnieniem barw, są niewidomi lub niedowidzący.

7. Tekst okna dialogowego powinien być zwięzły i łatwy do zeskanowania

Zamiast pytać użytkowników „Czy na pewno chcesz X?”, umieść znak zapytania już na końcu samego tytułu. Na przykład tytuł „Usuń konto?” komunikuje „Czy na pewno chcesz usunąć swoje konto?” w mniejszej liczbie słów.

Nie używaj rozwlekłych zdań, aby wyjaśnić, co stanie się po potwierdzeniu. Zamiast informować użytkowników: „Jeśli usuniesz swoje konto, trwale utracisz swój profil, wiadomości i zdjęcia”, wyszczególnij, co stracą, w formacie listy, aby mogli je szybko zeskanować.

W tym przykładzie zwięzłość okna dialogowego zmniejszyła tekst z 25 do zaledwie 9 słów. Takie okno jest znacznie łatwiejsze do przeskanowania i zrozumienia.  Czytanie długich komunikatów jest czasochłonne i nudne - większość użytkowników przeskanuje je, pomijając większość treści.

8. Rozważ dodanie pisemnego potwierdzenie przy najbardziej niebezpiecznych czynnościach

W przypadku szczególnie niebezpiecznych operacji możesz poprosić użytkownika o wykonanie niestandardowego działania w celu potwierdzenia. Zamiast po prostu klikać przycisk OK (lub, lepiej, przycisk ze słowem lub dwoma do opisania działania) poproś ich o zrobienie czegoś, czego  normalnie by nie zrobili. Na przykład poproś aby wpisali konkretne słowo w polu tekstowym, jak wymaga MailChimp przed usunięciem listy mailingowej. (Don Norman posuwa się tak daleko, że sugeruje wymaganie od innego użytkownika potwierdzania najbardziej niebezpiecznych działań). Kiedy użytkownicy piszą, muszą pomyśleć o tym, co piszą, i naciskać odpowiednie klawisze. Zachęcanie ich do wpisania tekstu na klawiaturze sprawia, że ​​stają się świadomi destrukcyjnego działania takiej akcji. Jest więc mniej miejsca na błędy niż gdy poprosimy ich o samo naciśnięcie przycisku.

Takie niestandardowe opcje odpowiedzi muszą być zarezerwowane dla najniebezpieczniejszych i najrzadszych działań. Jeśli są używane zbyt często, mogą przekształcić się w kolejne zautomatyzowane zachowanie, które straciło moc zmuszania użytkownika do przemyślenia konsekwencji przed podjęciem decyzji.



Trzeba przyznać, że stworzenie dobrego okienka dialogowego wcale nie jest takie proste - chcesz ostrzec przed poważnymi konsekwencjami, ale nie chcesz tak często ostrzegać, że ostrzeżenie zostanie przeoczone, a odpowiedź stanie się automatycznym zachowaniem. Dobrą wskazówką może być przeprowadzenie szczegółowej analizy zadań jakie mogą wykonać użytkownicy w aplikacji, w celu określenia dotkliwości różnych wyników oraz częstotliwości możliwych działań niepożądanych. Na przykład witryna bankowa może być spersonalizowana tak, aby wymagała potwierdzenia tylko w przypadku płatności online, które są co najmniej dwukrotnością normalnego zakresu płatności każdego użytkownika: jeśli zwykle płacę rachunki o wartości około 100–500 USD, to moja pierwsza prośba o zapłacenie komuś 1100 USD może być błędem, a pożądana płatność może wynosić tylko 110 USD. Nawet gdybym chciał zapłacić 1100 dolarów, z radością przyjmę szansę podwójnego sprawdzenia płatności, która byłaby dla mnie duża – a przez to przerażająca. Z drugiej strony, ktoś, kto płaci rachunki w wysokości 10 000 USD kilka razy dziennie, byłby zirytowany, gdyby przerwano mu płatność w wysokości 1 100 USD. („Dwukrotność zwykłej kwoty” to oczywiście tylko przykład, niekoniecznie optymalny próg, nie chciała bym by ktoś dosłownie zinterpretował powyższy przykład)

Wydaje się, że najważniejszymi względami jakimi powinniśmy kierować się projaktując takie okienko jest ich nie nadużywanie i bycie wystarczająco konkretnym, aby użytkownicy wiedzieli, na co się zgadzają. Powtarzam: jeśli za bardzo ostrzegasz ludzi, przestają zwracać uwagę.

Wreszcie, aby poprawić ogólne doświadczenia użytkownika na naszej witrynie czy w aplikacji - poza zaprojektowaniem samego okna dialogowego, należy dołożyć wszelkich starań, aby zapewnić możliwość cofnięcia każdej akcji, nawet najlepsze okienka nie zapobiegną wszystkim błędom. Najlepsze, co możesz zrobić, to zmniejszyć ich liczbę, co pozwoli zwiększyć satysfakcję klientów, prawdopodobnie uratuje czyjąś pracę i zdecydowanie polepszy Usability Twojego projektu.