Projektowanie UI: Alternatywy dla wyskakujących okienek

0:00Typowe okienko dialogowe nie zawsze jest najbardziej optymalnym rozwiązaniem.

0:05Ich minusem jest odwracanie uwagi użytkownika od reszty elementów.

0:10Czasami izolacja wymagająca aktywności w

0:13ramach tego okienka, a nie zawsze mamy do zaprezentowania

0:16informacje, które wymagają przerywania jakiejś akcji.

0:21Idealnym przykładem są modyfikacje tzw.

0:25toast'y pary, snackbar'y które mają np.

0:27za zadanie potwierdzić wykonanie jakiegoś zadania.

0:31Wyobraźmy sobie, że wypełniamy formularz, klikamy przycisk wyślij.

0:36Informację o powodzeniu akcji możemy

0:38pokazać użytkownikowi na kilka sposobów, np.

0:41przenosząc go na stronę z potwierdzeniem,

0:43na której użytkownik przeczyta, że wszystko poszło OK.

0:47Wyrzucając okno dialogowe na wierzch z

0:49informacją i przyciskiem OK lub Zamknij albo przekierować użytkownika na dowolną

0:55stronę zgodnie z założeniami działania produktu i wyświetlenie drobnego elementu,

1:01który potwierdzi dodatkowo wykonanie zadania.

1:05Te notyfikacje przyjmują formę paska

1:08pojawiającego się w górnej lub dolnej części ekranu.

1:11Dzięki temu nie zasłaniają kluczowych funkcji.

1:15Dodatkowo często same po jakimś czasie

1:17znikają lub mają opcję wyłączenia przez ikonkę krzyżyka lub link tekstowy.

1:26Popularnym typem notyfikacji, z którym

1:29często się spotkacie, są również powiadomienia o np.

1:32skopiowanej treści do schowka.

1:35Używając skrótów klawiaturowych bądź wybierając opcję kopiowania w interfejsie

1:41możemy spotkać się właśnie z małą, pojawiającą się informacją o powodzeniu tej akcji.

1:47Notyfikacje spełniają ważną rolę w interfejsie, bo dają odpowiedź o statusie,

1:52co jest chociażby jedną z heurystyk Nielsena.

1:56Jednocześnie nie są tak angażujące jak okienka modalne i pozwalają użytkownikowi

2:01dalej korzystać z interfejsu bez potrzeby wyłączenia ich, bo z

2:06założenia pojawiają się w miejscu, w którym nie powinny za bardzo przeszkadzać.

2:12Notyfikacje, w odróżnieniu od

2:14wyskakujących okienek nie wygasają nam całego ekranu.

2:18Dlatego planując wygląd skupiamy się

2:20wyłącznie na tym, jak wygląda ten komponent i w którym miejscu się pojawi.

2:27Notyfikacje najczęściej przyjmują formę niższego lub wyższego paska,

2:31czyli prostokąta z ewentualnie zaokrąglonymi rogami.

2:35I co ważne mogą przyjąć inny wygląd w zależności od ich typu.

2:40Zdarzają się systemy, w których pojawiają się np.

2:43trzy typy snackbar'a różniące się kolorem tła i ikoną,

2:47informujące o powodzeniu akcji, błędzie lub ostrzeżeniu.

2:52Ale są systemy, w których te trzy typy

2:54będą wyglądać dokładnie tak samo, różniąc się tylko treścią.

2:58To wszystko będzie zależeć od kierunku, który wybierzecie jako projektanci.

3:05Na początku wspominałam o rozmieszczeniu

3:07notyfikacji i ich położeniu na dole lub u górze ekranu.

3:11Ich pozycja powinna być zależna od pozostałych elementów na ekranie, ponieważ

3:15musimy upewnić się, że przypadkiem ich nie zakryją.

3:19Co więcej, warto zaplanować liczbę wyświetlanych notyfikacji.

3:24Są systemy, w których

3:27notyfikacji pojawia się kilka i wtedy pojawią się jedna pod drugą

3:33lub po osiągnięciu określonej liczby tych notyfikacji zastępują te najstarsze.

3:39W przypadku Material Design pojawiła się wytyczna, by nie pokazywać więcej niż

3:43jednego snakbar'a jednocześnie, co widzieliście przed chwilą, gdy usuwałam

3:47jedną po drugiej wiadomości, była widoczna cały czas tylko jedna forma

3:51notyfikacji, która pozwoliła mi cofnąć tą ostatnią akcję.

3:56No i tu znów spotkacie się z różnym podejściem i wybór powinien paść zawsze w

4:01kontekście produktu, nad którym pracujecie.

4:04Jeżeli wyświetlać jednocześnie kilka

4:05notyfikacji, to lepiej projektować ich wygląd od razu

4:09w takim kontekście. Pozwoli Wam to zaobserwować, czy wystarczająco różnią się

4:14od siebie w zależności od tego, czego dotyczą.

4:17Tu również czeka Was zaplanowanie

4:19marginesów między nimi tak, by estetycznie wyglądały i wciąż pozostały czytelne.

4:26Tło notyfikacji może przyjąć dowolny kolor, choć zdarzają się często

4:30ciemniejsze barwy, by wyróżnić je na tle strony.

4:33Projektując notyfikację zawsze róbmy to na tle gotowego projektu,

4:37by widzieć jak w rzeczywistości będą widoczne dla użytkownika.

4:42Zdarzają się tła, które są lekko

4:44przezroczyste, ale pamiętajmy, że na tych notyfikacjach prawdopodobnie pojawiać się

4:49będą głównie teksty i lepiej byłoby, żeby były czytelne.

4:54Bezpieczniej więc używać płaskich kolorów, ewentualnie z delikatnym gradientem, ale

5:00im prostsze opcje wybierzecie, tym pewniejsi możecie być

5:04co do kontrastu tekstu do tła.

5:07Pod tytułem notyfikacji mogą pojawiać się cienie, które pozwolą bardziej odciąć ten

5:12element od pozostałych widocznych pod spodem.

5:16Stosując notyfikacje nie dodajemy żadnego

5:19wygaszenia czy przyciemnienia w tle, więc warto zastanowić się w jaki sposób

5:23chcemy wydzielić je wizualnie od pozostałych treści.

5:29Poza kolorem tła możemy zastosować

5:33obramowanie, które może wizualnie odciąć element od reszty,

5:38a także dodatkowe elementy graficzne, jak na przykład kolorowe paski z boku.

5:44W przypadku Design systemu Carbon Design System.

5:48Głównym typem treści

5:51takich notyfikacji są teksty z reguły niezbyt rozbudowane,

5:56ograniczające się do jednej lub dwóch linii tekstu.

6:00Uzupełnieniem informacji tekstowej jest też często ikona, która na pierwszy rzut

6:04oka pomaga zrozumieć użytkownikowi jakiego typu to notyfikacja.

6:09Nie jest jednak obligatoryjnym elementem i

6:12spotkacie się z toastmi czy snack barami, które ikon nie zawierają w sobie wcale.

6:19W komponentach tego typu nie spotkacie się

6:21raczej z bardziej rozbudowanymi kontrolkami, nie będzie tu więc pól

6:25tekstowych czy bardziej złożonych interakcji.

6:28Podstawową funkcją jest informacja o

6:30statusie aplikacji, więc w związku z tym typów treści nie będzie zbyt wiele.

6:36W zależności od design systemu spotkacie się z modyfikacjami, które wyłączają się

6:41zawsze automatycznie po upłynięciu określonego czasu lub

6:45takimi, które użytkownik może wyłączyć sam.

6:49Są też warianty, które zarówno znikną

6:51same, jak i szybciej mogą zostać ukryte przez użytkownika.

6:55Jeśli zakładamy opcję, że użytkownik

6:57wpływa na zachowanie notyfikacji, musimy oczywiście również zaprojektować funkcję

7:01zamykania poprzez użycie ikonki krzyżyka lub linku tekstowego.

7:06Zamknij, schowaj, ukryj bądź podobnego.

7:10Warto w tym momencie zastanowić się, czy

7:12nie będziemy w notyfikacjach używać jeszcze innych akcji jak np.

7:15odśwież przy komunikacie błędu albo cofnij

7:18w przypadku błędnie usuniętego elementu, jak pokazywałam Wam w Gmailu.

7:23Jeśli je planujemy, warto od razu

7:25zwizualizować jest ikoną lub okienkiem zamykania.

7:29Czy ułożone zbyt blisko siebie nie będą generowały dodatkowych błędów, np.

7:34przypadkowych kliknięć w niewłaściwą opcję?

7:37Unikniemy tego problemu właśnie wtedy, gdy będziemy zawsze automatycznie wyłączać

7:41powiadomienia i nie potrzebna będzie funkcja zamykania.

7:45Tak jak opisuje to Material Design.

7:48W związku z tym, że z założenia

7:50notyfikacje nie powinny być zbyt duże, by nie przesłaniać treści, przyjmują poziome

7:55kompozycje z wyraźnym rozdzieleniem na ikonę treści i elementy interaktywne, np.

8:01zamknięcie lub inny przycisk akcji.

8:03Dlatego najłatwiej nad elementami będzie

8:06zapanować stosując wyrównania do lewej strony.

8:09Będziecie mieć dzięki temu pewność, że marginesy między poszczególnymi elementami

8:13będą spójne niezależnie od długości tekstów.

8:17Na koniec warto zadbać też o sposób pojawiania się, czyli animacje.

8:22To właśnie ruch sprawi, że nasi

8:24użytkownicy zwrócą uwagę na komponent, więc warto go dopracować.

8:28Najczęściej jest to jakaś forma wjazdu slajdu, ale styl powinien być dopasowany

8:33do innych animacji pojawiających się w produkcie.