Projektowanie UI: Stany interakcji

0:00Ok. Kiedy już wiemy, jakie role przyciski mogą

0:02spełniać, czas przejść do stylów graficznych tych przycisków.

0:06W zależności od tego, jaki styl wybierzemy dla danego przycisku,

0:11tak naprawdę będziemy sugerować jego rolę w całym interfejsie.

0:16Takim najczęściej spotykanym rodzajem

0:18przycisku, jaki znajdziecie w interfejsach, to klasyczne przyciski,

0:21które składają się z jakiegoś tła i tekstu.

0:25I tutaj możemy mieć tak zwane solid buttony, czyli

0:29wypełnienie, które jest kolorem jedynym lub gradientem i na nich tekst.

0:35Ale są też tzw.

0:37ghost buttons, które są przezroczyste i mają jedynie obrys.

0:41I ten zabieg graficzny sprawia, że one trochę się wtapiają w tło.

0:45One nie są widoczne tak bardzo na pierwszy

0:48rzut oka w naszym interfejsie, zwłaszcza jeżeli znajdują się zaraz obok takich

0:52klasycznych przycisków, które mają jakieś tło i napis.

0:56Kolejne popularne rozwiązanie to linki

0:59tekstowe, które najczęściej również traktuje się na równi z przyciskami.

1:04Najpopularniejszym rozwiązaniem jest wykorzystanie tekstu z podkreśleniem.

1:09I to jest takie domyślne ustawienie przeglądarek, kiedy

1:14nadajemy linki właśnie jakimś tekstom w, na naszych stronach.

1:19Ale oczywiście ten styl linku tekstowego możemy dowolnie oscylować.

1:24I dzisiejsze rozwiązania techniczne, dzisiejsze możliwości.

1:28Jeżeli chodzi o stronę frontendu sprawiają, że te podkreślenia one mogą być

1:33trochę grubsze lub cieńsze, bardziej lub mniej oddalone od napisu, czy też mogą

1:37mieć bardziej finezyjne kształty niż po prostu prosta kreska.

1:43To, co jest ważne w przypadku linków

1:45tekstowych to to, żeby odpowiednio wyróżnić się spośród zwykłego tekstu.

1:49Użytkownik na pierwszy rzut oka powinien

1:51widzieć, że tekst, który jest linkiem tekstowym jest do kliknięcia.

1:56On się różni tym stylem, który znajduje się w akapicie.

1:59Tutaj macie przykład

2:01Full editorial guidlines, które jest linkiem tekstowym z podkreśleniem.

2:06Ale jeżeli zerknijcie na górę strony, to

2:08zobaczycie również dwa napisy become a member i sing in.

2:12To są również linki tekstowe, które

2:14wyglądają również w inny sposób niż te teksty, które znajdują się w akapitach

2:19i wcale nie mają podkreślenia, ale ich kolor, ich ułożenie i wielkość

2:24sprawiają, że użytkownik może domyślić się, że nie są to zwykłe teksty do

2:28czytania, tylko faktycznie można wchodzić z nimi w interakcję.

2:32Rozwiązanie, które polega na stosowaniu samych ikon w przyciskach jest popularne

2:37zwłaszcza w rozwiązaniach mobilnych czy na stronach mobilnych, czy w aplikacjach.

2:42Tam wszędzie, gdzie bardzo ważne jest oszczędzenie miejsca.

2:46Wspominałam również o takich elementach jak paski narzędziowe w

2:53popularnych edytorach tekstów czy w programach graficznych.

2:57Wyobraźcie sobie taki interfejs, który składałby się z tekstów czy też z

3:01przycisków tekstowych czy nawet z tekstowych linków.

3:05To wszystko by się nie mieściło.

3:07Natomiast jeżeli wykorzystamy ikony, to nagle okazuje się, że możemy upchnąć

3:11całkiem sporo funkcji pod drobnymi elementami graficznymi.

3:16Na środkowym projekcie widzicie również

3:18rozpromowane przez Material Design rozwiązanie tzw.

3:22floating button.

3:23Najczęściej jest ikona z tłem w prawym dolnym rogu ekranu, ale

3:27nie tylko, która służy do zaznaczenia najważniejszych akcji na ekranie.

3:32Jeżeli projektujemy jakieś grupy przycisków, np.

3:35toolbar z narzędziami,

3:37to musimy upewnić się, że stosowane przez nas ikony, jeżeli nie mają podpisów, są

3:42odpowiednio dopasowane do funkcji, za które odpowiadają, tak żeby użytkownik

3:47patrząc na te ikony wiedział od razu, od czego dana ikona jest.

3:52To jest przykład bardzo popularnego narzędzia jakim jest Gmail.

3:57Ja sama z Gmaila korzystam na co dzień.

3:59Wielokrotnie w ciągu dnia wysyłam maile i przyznam się szczerze, że zawsze mam

4:06problem z rozpoznaniem drugiej i trzeciej ikony i różnic między nimi.

4:11Jedna odpowiada za dodawanie załączników, a druga za linkowanie w teksty.

4:15I bardzo często, kiedy zupełnie się nad

4:17tym nie zastanawiałem, po prostu szybko chcę wysłać wiadomość.

4:20Klikam przez przypadek w inną ikonę.

4:23Ich podobieństwo względem kształtu,

4:27ale również położenia blisko siebie sprawiają, że nie zastanawiając się

4:30specjalnie, bardzo często klikam w niewłaściwą ikonę.

4:34Jest to dosyć irytujące.

4:36Oczywiście możemy tworzyć wszelkiego rodzaju wariacje, na przykład przyciski,

4:40które mają teksty i ikony i te są również bardzo popularne w naszych rozwiązaniach.

4:46Ważne jest, żeby odpowiednio dobrać

4:48wielkość i kształt ikony do tekstu, który znajduje się w przycisku.

4:52Tą ikonę można ułożyć po lewej stronie od

4:55tekstu, po prawej stronie od tekstu czy nawet nad samym tekstem.

4:58To ułożenie powinniście dopasować po

5:00prostu do samego kształtu i wielkości obiektu.

5:04Oczywiście zwykły link tekstowy również możemy wzbogacić ikoną.

5:07Dzięki temu ten tekst, ten link nie będzie wyglądał jak zwykły tekst.

5:11Nie będziemy musieli martwić się o to, że

5:13użytkownicy mogą nie rozpoznać go jako element interaktywny, bo np.

5:17obok niego znajdzie się jakaś strzałka

5:19albo ikona profilu, albo krzyżyk czy jakikolwiek inny element, który będzie

5:24sugerował jakąś interakcję czy czy funkcję, jaką spełnia dany link tekstowy.

5:33Te ikony z podpisami również najczęściej będziecie znajdować właśnie w aplikacjach mobilnych,

5:37w tych miejscach, gdzie jest ryzyko, że użytkownicy nie rozpoznają

5:41funkcji tylko i wyłącznie po kształcie danej ikonki.

5:44Będziemy właśnie spotykać się z tymi podpisami.

5:47Ważne jest, żeby podpisy nie były za długie, bo oczywiście nie zmieszczą się po

5:52prostu w małym obszarze, ale również nie mogą być zbyt małe, tak żeby użytkownicy

5:56jednak mogli rozczytać co tam jest

5:58napisane, bo właśnie po to umieszczamy ten podpis pod ikoną.