Projektowanie UI: Zasady tworzenia okienek

0:00Tooltip element, z którym spotkał się każdy z

0:02nas, ale często nie zwracamy na niego większej uwagi.

0:05Najczęściej pojawia się jako opis funkcji po najechaniu kursorem np.

0:10na przycisk w formie ikony.

0:12Jest też ratunkiem przy skróconych

0:14tekstach w tabelach czy zwiniętych zakładkach przeglądarki.

0:17Ale to oczywiście nie jedyne jego użycie i nie jedyna forma, z którą się spotkacie.

0:24Tooltip'y to zazwyczaj wywoływane są akcją najechania kursorem na obiekt, tekst, link, obrazek,

0:31ale zdarza się, że trzeba kliknąć czy tapnąć.

0:36A także pojawiają się samodzielnie, kiedy np.

0:39załaduje się strona.

0:40Najpopularniejszym typem treści, które pojawia się w Tooltip'ach są po prostu teksty,

0:46ale spotkacie się z bardziej rozbudowanymi, zawierającymi zdjęcia,

0:50ilustracje, linki tekstowe, a nawet bardziej rozbudowane funkcje, jak np.

0:54pogrubienia tekstu, który właśnie

0:57zaznaczyliśmy, czy dodanie załącznika do wiadomości.

1:01W rozwiązaniach mobilnych częściej

1:02pojawiają się samoistnie lub po zaznaczeniu jakiegoś tekstu.

1:07Z komponentami tego typu możecie spotkać się również w onboardingach, czyli

1:11pierwszych instrukcjach, które pojawiają się po wejściu do aplikacji.

1:15Jeśli interfejs aplikacji jest złożony i wymaga wstępnego poinstruowani,

1:20możemy pokazać użytkownikowi, co i jak może robić.

1:24Onboarding to złożony temat, który może

1:27przyjąć również różne formy, ale jeżeli decydujemy się na zastosowanie go w

1:31produkcie i jednocześnie użycie komponentów takich jak dialogi czy Tooltip'y,

1:36warto pamiętać o opcji pominięcia czy wyłączenia instrukcji.

1:43W aplikacjach zazwyczaj pojawia się raz,

1:45kiedy użytkownik pierwszy raz odpala produkt albo właśnie stworzył konto,

1:50ale musimy zakładać, że mógł już kiedyś korzystać z tej aplikacji

1:54na przykład na innym koncie lub systemie, a także chcę po prostu szybko sprawdzić

1:59coś w aplikacji i nie interesują go kilku krokowe instrukcje.

2:07Tooltip'y są małe, ale jak już doskonale

2:09wiecie, w interfejsach diabeł tkwi w szczegółach.

2:11Dlatego zwrócimy uwagę na każdy piksel.

2:14Zacznijmy od wielkości.

2:16W zależności od tego, jaki cel ma spełniać Tooltip, przyjmie formę tekstowej

2:20informacji lub bardziej rozbudowanego komponentu.

2:25W pierwszym przypadku to zazwyczaj

2:26prostokąt lub prostokąt z zaokrąglonymi rogami, nie wyższy niż linijka tekstu.

2:32Osiąga więc wysokość nie większą niż 100 pikseli.

2:36Przy tak małej wysokości warto zadbać, by

2:38ewentualne zaokrąglenia rogów miały ładne kształty.

2:43Co to oznacza?

2:45Już bardzo małe zaokrąglenie sprawi, że

2:47kształt będzie wydawał się przyjemniejszy niż ten z ostrymi kątami.

2:53Są jednak wartości, które nie wypadają zbyt atrakcyjnie, bo dają wrażenie

2:58niepełnego zaokrąglenia, wręcz załamania się kształtu.

3:03Tak jak w prawym górnym przykładzie, warto w ramach ćwiczeń stworzyć kilka czy

3:08kilkanaście elementów o tym samym rozmiarze i zobaczyć, jak

3:12zmienia się kształt, a tym samym odbiór całości przeróżnych zaokrągleniach rogów.

3:19Pamiętając o tym, że to mały element,

3:22musimy zadbać o odpowiednio kontrastowy kolor tła.

3:25Tu często spotkamy się z Tooltip'ami, które są

3:28czarne, ciemnoszare lub granatowe, tak by były bardziej zauważalne.

3:33Również jak inne typy okienek pojawiają się nad treścią, co możemy zaznaczyć przez

3:38stosowanie cienia pod elementem lub dodatkowego obramowania całego kształtu.

3:44Cechą charakterystyczną jest też dzióbek,

3:46który spotkacie w wielu z nich, ale nie jest elementem koniecznym.

3:51W przeglądarce Chrome czy na stronach

3:52internetowych często pojawiają się w formie zwykłego prostokąta.

3:56Robiąc jednak dzióbek, warto dostosować

3:59jego styl do zaokrąglenia rogów tła i również zaokrąglić go na końcu, by nie

4:03wydawał się taki ostry i nie odstawał od stylu komponentu.

4:09Jeżeli stosujemy w produkcie jakieś

4:10ozdobne fonty, to w Tooltip'ach raczej nie ma dla nich miejsca?

4:15Głównie przez wzgląd na ich wielkość tu wybierajmy kroje, które będą przede

4:19wszystkim czytelne w małym rozmiarze, a w dodatku dobrze będą wyglądać w kontrze.

4:24Jeśli planujemy ciemne tła Tooltip'ów przyjaznych tekstach na ciemnym tle,

4:30zdarza się, że litery wyglądają na cieńsze, a w efekcie mniej czytelne.

4:34Często trzeba je wtedy pogrubić, stosując inne odmiany kroju.

4:38Tu również dbamy o margines między tekstem

4:40a krawędzią komponentu, by nie tworzyć niepotrzebnego efektu ścisku.

4:45Tak jak w przypadku praktycznie każdego komponentu.

4:48Powinniśmy założyć maksymalną wielkość, a właściwie szerokość Tooltip'a.

4:53Jeśli będzie długi tekst do umieszczenia w

4:55środku, to jest szansa, że okienko nam się bardzo rozciągnie, a to może negatywnie

5:00wpłynąć na stronę wizualną i użyteczność takiego Tooltip'a.

5:04Dlatego załóżmy maksymalną szerokość i

5:06zaprojektujemy co stanie się, jeśli teksty ją przekroczą.

5:10Prawdopodobnie będziemy przenosić tekst do kolejnej linijki, co zwiększy wysokość

5:15Tooltip'a i będzie wymagać dodatkowych wytycznych dla programistów np.

5:19podanie interlinii i maksymalnej wysokości itd.

5:24Ale wspominałam też, że spotkamy się z tymi bardziej rozbudowanymi Tooltipami, które

5:29pozwalają nam na interakcję w ramach tego elementu.

5:33Oznacza to, że przede wszystkim nie znikną, gdy zjedziemy na nie kursorem, a

5:39właściwie kiedy zjedziemy z kursorem z elementu, który je wywołuje,

5:45ale mogą zniknąć, gdy zjedziemy kursorem tła Tooltip'a.

5:52A to bywa dość irytujące, zwłaszcza gdy poruszamy się w małej przestrzeni

5:57tego komponentu i po prostu łatwo wyjechać poza jego obszar.

6:02Dlatego możecie spotkać się też z Tooltip'ami, które są wywoływane przez

6:06kliknięcie lub tapnięcie i wyłączają się po

6:11kliknięciu w krzyżyk, który pojawia się w Tooltip'ie lub kliknięciu w tło.

6:17Jeżeli nie jesteście pewni, jak powinien zachowywać się Tooltip, który projektujecie

6:21czujecie, to zacznijcie po prostu od przejrzenia stron, na których przebywacie.

6:28Częściej i sprawdźcie właśnie tam, jak Tooltip'y się zachowują.

6:32Oprócz tego przydatny może być zwykły prototyp, dzięki któremu szybko odtworzycie

6:36różne działania komponentu, Axure, Framer czy ProtoPie Studio pozwolą na takie podpięcie interakcji, że

6:44będzie można sprawdzić każde ze wspomnianych wariantów.

6:47Rozbudowane wersje Tooltip'sów, oprócz większej

6:51ilości tekstów, mogą zawierać również tytuły, ilustracje czy zdjęcia, a także

6:57linki tekstowe i wspomnianą funkcję zamykania przez ikonkę krzyżyka.

7:01I to będzie i tu będziemy stosować podobne zasady jak w przypadku okienek

7:06dialogowych, tylko po prostu w mniejszej skali.

7:11Tooltip'y zawsze pojawiają się w jakimś konkretnym kontekście, są uzupełnieniem akcji, które

7:15wykonuje użytkownik lub zwracają uwagę na konkretną funkcję.

7:20Dlatego właśnie pokazujemy je w pobliżu jakiegoś elementu.

7:24Musimy jednak zaplanować ich ułożenie, by

7:26przypadkiem nie przesłoniły istotnych dla użytkownika informacji, zwłaszcza gdy mają

7:32być większe niż standardowa linijka krótkiego tekstu.

7:37Pamiętajmy też o konsekwencji.

7:39Jeżeli przy jednym elemencie czy kilku elementach interfejsu, które są np.

7:44ikonami, używamy Tooltip'ów, to użytkownik może spodziewać się, że w każdym przypadku

7:50podobnych elementów ten Tooltip też się pojawi.

7:54Zaplanujmy więc odpowiednio gdzie i jakie Tooltip'yt powinniśmy powinny się pojawiać,

8:00by pomóc użytkownikowi w poruszaniu się po interfejsie.