Projektowanie UI: Komponenty notyfikacji

0:00Zacznijmy może od największych z nich,

0:02czyli czegoś, co nazywamy dialogami lub modelami.

0:05I choć często kojarzą nam się z czymś wkurzającym, bo ten typ wzorca stosuje się

0:10również do reklam czy zachęty do zapisu na newsletter, to dobrze zaprojektowane i

0:14użyte we właściwych celach mogą rozwiązać kilka problemów projektowych.

0:20Również stosowana nazwa pop-up idealnie odzwierciedla zachowanie tego komponentu.

0:25Pojawia się on bowiem na wierzchu innych

0:28komponentów, wyskakując i zasłaniając główną treść serwisu.

0:33Dla wzmocnienia efektu

0:35zwrócenia uwagi tylko na ten jeden element stosuje się np.

0:38przyciemnienie tła pod postacią kafli jednego koloru o nie dużym stopniu przezroczystości.

0:44Ma to za zadanie po pierwsze, jak już wspomniałam, skupienie uwagi użytkownika

0:48na tym centralnym elemencie, który właśnie wyskoczył.

0:52Gdyby nie było tła przy bardzo bogatej

0:54graficznie stronie jest szansa, że nie zauważyli byśmy okienka, a dodatkowo

0:59dzięki przezroczystości nie tracimy kontekstu strony.

1:03Więc jeżeli przejdziemy do innego okna

1:05przeglądarki, a w międzyczasie na stronie pojawi się takie okienko, to po powrocie

1:09łatwiej nam zrozumieć na jakiej stronie jesteśmy i co się stało.

1:13To zachowanie ma jednak swoje minusy.

1:15Jeśli zastosujemy taki wzorzec na np.

1:18namawiania użytkownika na polubienia strony na Facebooku albo zapisu do

1:22newslettera, kiedy użytkownik właśnie scrolluje treść wpisu,

1:26to przerywamy mu, co może wywołać irytację i zupełnie odwrotny efekt.

1:33Oprócz ostrzeżeń i namawiania użytkowników do zostawiania swoich maili, okienka

1:37dialogowe wykorzystywane są jako rozszerzenia funkcji na ekranie.

1:41Zdarzają się interfejsy, które ze względu na brak miejsca musiałyby na przykład

1:46przenosić użytkownika do nowej strony, żeby wykonać jakieś akcje.

1:50Zamiast tego pokazujemy małe okno, w którym możemy np.

1:53wyedytować dane albo dodać nowe treści.

1:56Możecie spotkać się z koszykami w sklepach internetowych na urządzeniach mobilnych,

2:00właśnie przedstawionych w formie takiego okienka nad treścią.

2:04Mamy wtedy w tak małej przestrzeni dość

2:07dużo funkcji, z których możemy skorzystać, jak dodanie lub usunięcie przedmiotu,

2:12zmianę, liczbę zakupionych rzeczy czy przejście dalej do procesu zakupowego.

2:18W ostatniej części opowiadałam o tabelach i listach.

2:22W wielu tabelach spotkacie się z opcją

2:24przycisków, które pozwolą na szybszą edycję danych w tabeli.

2:28To często tooltipy lub okienka dialogowe, w których

2:31znajdziemy jedno lub dwa pola do dalszej edycji.

2:36Rozwiązania mobilne zresztą często korzystają z podobnych rozwiązań przez

2:41małą przestrzeń, którą możemy zagospodarować na ekranie.

2:45Efekt wyciągnięcia czegoś na wierzch i zakrycia treści pod spodem wydaje się

2:49wtedy całkiem skutecznym sposobem na zaznaczenie tych najważniejszych akcji.

2:54Tu przykładem mogą być prośby o ocenę zarówno w aplikacji w sklepie, np.

2:58w AppStore albo w samym produkcie.

3:01Jeśli korzystaliście kiedyś z Ubera albo

3:03aplikacji, które polegają na ocenie usług lub produktów, to jest duża szansa, że

3:09takie oceny właśnie pojawiały się w formie wyskakującego okienka.

3:15Ale okno modalne spotkamy również w

3:17większym rozmiarze i przy bardziej złożonych akcjach.

3:21Idealnym przykładem jest aplikacja

3:23Notion, która polega na tworzeniu i organizowaniu notatek.

3:26Zresztą bardzo fajne narzędzie i przy okazji bardzo je polecam.

3:30W Notion dodając nową notatkę otwiera nam się właśnie nowe okienko nad treścią,

3:37które jak widzicie jest całkiem rozbudowane.

3:40Właściwie można powiedzieć, że mieści w sobie całą stronę.

3:44Co więcej, aplikacja pozwala użytkownikowi

3:47otworzyć okienko w nowej stronie i korzystać z niej klasycznie.

3:52To użytkownik wybiera, czy chce przejść i pracować tylko na tej jednej konkretnej

3:57zakładce, czy zależy mu na tym, żeby nie tracić kontekstu, bo np.

4:02chce dodać szybko kilka takich notatek i

4:04dopiero później je uzupełnić i wchodzić w szczegóły.

4:08Podsumowując.

4:10Idealnie sprawdzą się, gdy będziemy

4:12chcieli skupić uwagę użytkownika na jednym zadaniu.

4:15Gdy do wykonania jest krótkie i proste zadanie np.

4:20podjęcie decyzji zamknij lub zostań na

4:23stronie lub informowania o ważnych zmianach.

4:27Unikajmy ich, jeśli nie są bezpośrednio związane z wykonywanym właśnie działaniem.

4:33Jeśli nie są wywoływane przez konkretne

4:35akcje użytkownika, jak kliknięcie w przycisk.