Projektowanie UI: Wygląd okienek modalnych

0:00Jednym z elementów, z którym spotkacie się w sieci, zwłaszcza ostatnio dość często,

0:05to wyskakujące, pojawiające się nagle elementy nad oglądaną do tej pory treścią.

0:10Samo wyskakiwanie jakiegoś elementu jest właściwie wzorcem niż komponentem, bo

0:15określa już bardziej złożone zachowanie interfejsu.

0:18Pojawiają się bowiem różne komponenty

0:21od małych komunikatów z prośbą o zatwierdzenie powiadomień o promocjach,

0:25zachęty do zapisu na newsletter, wygaszające resztę strony i wymagające od

0:30nas zamknięcia najpierw okienka, żeby móc coś robić dalej.

0:34Po najechaniu kursorem na ikonę może pojawić się np.

0:37szerszy opis jakiegoś zagadnienia,

0:39a gdy będziemy próbowali wyjść ze strony, na której wypełniliśmy właśnie długi

0:44formularz, pojawi nam się komunikat, który będziemy musieli potwierdzić.

0:49Większość z nich pojawia się w wyniku naszej interakcji scrollowania, klikania,

0:54przesuwania kursorem lub używania skrótów klawiaturowych.

0:59To znaczy, że jako użytkownicy się ich spodziewamy,

1:03ale spotykamy się na co dzień również z takimi okienkami, których zupełnie się nie

1:07spodziewamy, jak chociażby wszelkiej maści reklamy i informacje o promocjach.

1:14To, czego nie lubimy jako użytkownicy, uwielbiają jednak marketerzy.

1:19Nie można bowiem odmówić skuteczności wyskakujących okienek.

1:24Dobrze zaprojektowane i ubrane w sensowne

1:26treści mogą pomóc w wyróżnieniu oferty produktów lub wyprzedaży.

1:31Wesprą budowanie listy mailingowej i

1:33pomogą odzyskać uwagę odwiedzających, zanim opuszczą stronę.

1:37Jestem jednak zdania, że warto w pierwszej

1:40kolejności szukać alternatyw i zamiast ryzykować irytację użytkownika, spróbować

1:46szukać mniej inwazyjnych rozwiązań niż pełna ekranowe blokujące treści okienka.

1:52W tej części kursu skupię się na elementach, które w swoim założeniu mają

1:56wspierać użyteczność, a nie realizować cele biznesowe.

2:01Dla porządku zatrzymajmy się jednak na chwilę przy nazwach.

2:04Nie zaskoczy Was pewnie to, że jak w

2:06przypadku innych komponentów, mamy tu spore niespójności w nazewnictwie i

2:10klasyfikacji pomiędzy różnymi design systemami.

2:14Spotkacie się z nazwami jak dialogi,

2:16pop-up'y, modale, okienka modalne, okna dialogowe, wyskakujące okienka lightboxy

2:22w większości przypadków będą

2:24określać typ komponentu, który wyświetla jakąś informację tekstową lub bardziej

2:29złożoną, przysłaniając tym samym większą część strony.

2:33Dają możliwość wejścia w interakcję potwierdzenie kliknięciem, wpisanie maila

2:37do pola z zapisem na newsletter albo nawet rejestrację i wyłączenie całego

2:41komponentu, czyli powrotu do stanu sprzed pojawienia się okienka.

2:47Możecie spotkać się z rozróżnieniem, że

2:49okienka modalne to takie, które użytkownik może chwycić i przesunąć, albo takie,

2:55które nie blokują dalszego przeglądania strony.

2:57Z kolei dialogi czy pop-up'y miałyby przesłaniać, wręcz blokować treści,

3:01dopóki nie wejdziemy z nimi w interakcję, np.

3:04nie zatwierdzimy czegoś przyciskiem albo po prostu wyłączymy ikonką krzyżyka.

3:09Ale taki podział znajdziecie w jednym

3:11miejscu, a w innym zupełnie twórcy nie będą się do tego stosować.

3:16Więc w ramach przypomnienia polecam

3:18w trakcie projektowania i rozmów z developerami dokładnie opisywać działanie

3:23komponentu po interakcjach, by obie strony na pewno się zrozumiały.

3:28Kolejna grupa wyskakiwaczy.

3:29Czy to komponenty wyświetlające notyfikacje?

3:33Częściej spotkacie je w aplikacjach mobilnych, ale również w bardziej

3:36złożonych stronach, aplikacjach jak Gmail czy Drive.

3:39Możecie się z nimi spotkać.

3:41To z reguły mniejsze elementy, które

3:44pojawiają się przypięte do dolnej lub górnej części przeglądarki

3:50i mogą służyć do informowania, do potwierdzania jakiejś akcji, np.

3:56wysłania maila czy usunięcia maila.

3:59Wspierają kontrolę użytkownika, jak np.

4:02w pokazanym przed chwilą Gmailu.

4:04Po usunięciu wiadomości albo próbie przeniesienia jej do innego folderu,

4:09będziemy mieli możliwość jeszcze przez chwilę cofnąć tę akcję.

4:13Zdarzają się notyfikacje, które

4:14samoczynnie wyłączają się po jakimś czasie, tak jak przed chwilą widzieliście,

4:18czy wręcz użytkownik sam nie może ich wyłączyć.

4:21Ale są również te, które pozwalają na ukrycie komponentu np.

4:25przez ikonkę krzyżyka.

4:27Tu spotkacie się z takimi nazwami jak snack bar, toast'y bannery czy notification bar.

4:35Ostatni typ komponentów, o których

4:37chciałabym wspomnieć to tak zwane tooltip'y.

4:39To elementy interfejsu, które pojawiają

4:41się po najechaniu kursorem na jakiś element lub kliknięciu.

4:47Mają za zadanie zazwyczaj opisać element lub rozwinąć jakieś informacje.

4:54Spotkacie się z nimi w formularzach, gdy pojawiają się w interfejsie niezrozumiałe

4:58określenia, a także gdy mamy w interfejsie ikony bez podpisów.

5:03Takie tooltip'y są wsparciem dla nas w

5:05funkcji albo po prostu podpowiadają tak jak w przypadku Figmy, którą tutaj widzicie.

5:11Również skróty klawiaturowe do tej funkcji.

5:16Tu również możecie spotkać się z

5:17alternatywnymi nazwami, jak na przykład pop-over'y, a nawet balony.

5:21Najbezpieczniej jednak stosować te najpopularniejsze nazwy i w tym przypadku

5:25wydaje mi się, że tooltip jest najbardziej powszechnym.

5:29No dobrze, to tyle jeżeli chodzi o nazwy i wstęp do tej części.

5:31Przejdźmy teraz do tematów bardziej

5:33projektowych i omówmy te wszystkie komponenty bardziej szczegółowo.