Projektowanie UI: Kilka zasad na koniec

0:00Oprócz tego, że te przyciski w jakiś

0:01sposób wyglądają, musimy jeszcze pomyśleć o tym, w jaki

0:05sposób będą zachowywać się w interakcji z użytkownikiem.

0:09Wszystkie elementy interaktywne mają jakieś swoje stany.

0:12Jeżeli wejdziemy do jakiejś aplikacji albo na jakąś stronę zobaczymy.

0:16Prawdopodobnie w większości przypadków tak zwane stany wyjściowe, czyli stany default

0:22jakiegoś przycisku czy właśnie pola formularza.

0:25To są te stany, które

0:27są z wizualizowanie zanim użytkownik wejdzie w interakcję z danym elementem.

0:34Tutaj najlepiej pokazać to oczywiście na

0:35przykładzie, więc zerknijmy jak zrobił to Material Design.

0:39To co widzimy teraz to jest tzw.

0:41przycisk default'owy

0:43ze stanem wyjściowym, w którym z którym jeszcze nie weszliśmy w żadną interakcję.

0:47Ale jeżeli teraz najedź kursorem myszy na ten przycisk, to zobaczycie, że nie dość,

0:51że zmienił on trochę kolor, to również zmienił się jego cień.

0:55Oczywiście ten styl na najechaniu kursorem jest absolutnie

1:00dowolny i możecie odpowiednio go oscylować według własnych wytycznych

1:04czy też wytycznych jakiegoś brandbook'a czy design systemu, z którego korzystacie.

1:10Ale to o czym warto pamiętać, to po prostu, że trzeba je zaprojektować.

1:15Mamy więc styl tzw.

1:16hover effect, czyli po najechaniu kursorem na jakiś obiekt.

1:21Czyli taki efekt unoszenia się, aktywowania tego przycisku.

1:26Ale nie jest to jedyny stan, o którym musimy pamiętać.

1:29Drugim takim dość istotnym stanem w naszym

1:31interfejsie tych elementów interaktywnych będzie tak zwany focus.

1:37I żeby zobaczyć jak wygląda focus na różnych stronach.

1:40Wystarczy, że zaczniecie korzystać z

1:42klawiatury, żeby poruszać się po elementach interfejsu wciskając TAB.

1:48Będziecie poruszać się

1:51po różnych elementach i zobaczycie, że one w odpowiedni sposób się podświetlają.

1:55One nie zostały jeszcze kliknięte

1:57one zostały po prostu zaznaczone.

1:59Spróbujmy jeszcze raz.

2:01Mamy focus na linku Content na Tobie.

2:04Właściwie mamy focus na przycisku. Widzicie?

2:07On lekko zmienił swój swój kolor i ten cień.

2:12On wygląda trochę jak byłby właśnie nałożony ten efekt po najechaniu kursorem

2:19i w przypadku przycisku z krzyżykiem zamykania.

2:24Tutaj też widzicie, że jest jakiś obszar, który wygląda na obszar aktywny.

2:28Kiedy używamy tego focusa i dlaczego w ogóle trzeba o nim pomyśleć?

2:32Stan focus pomaga użytkownikom, którzy korzystają właśnie z klawiatury, żeby

2:37poruszać się po naszych stronach internetowych.

2:40Jeżeli zablokujemy ten stan, jeżeli go w

2:42ogóle nie zaprojektujemy, to użytkownik, który właściwie skazany jest tylko na

2:46korzystanie z klawiatury, nie może korzystać z myszki, nie będzie widział,

2:50które elementy interaktywne zostały zaznaczone.

2:56Więc tak naprawdę nie za bardzo wie, w jaki sposób może przejść dalej.

2:59W momencie, kiedy zaznaczy sobie przycisk na klawiaturze, przycisk Tab i zaznaczy

3:05interesujące go, obiekt będzie mógł kliknąć Enter i przejść dalej.

3:11Projektowanie stanu focus ma duże

3:12znaczenie w przypadku użytkowników, którzy nie mogą korzystać z myszki i korzystają

3:18ze stron internetowych wyłącznie za pośrednictwem klawiatury.

3:23Klikając tabem po obiektach na stronie

3:25internetowej po prostu zaznaczamy kolejne elementy, w które możemy kliknąć.

3:29Czyli nie jest to jeszcze no czyli to jest taki

3:32efekt najechania myszką, tylko bez używania myszki.

3:37Najprościej mówiąc kolejny stan, o którym warto pamiętać to

3:41stan prest, czyli kiedy wciskamy button, kiedy go aktywujemy.

3:45I teraz wystarczy kliknąć,

3:47żeby zobaczyć, że pojawia się tutaj jakaś animacja po wciśnięciu.

3:51Oczywiście to nie musi być animacja, to

3:54może być po prostu jakiś cień, który się pojawia.

3:57Większy, mniejszy.

3:58Tak jak w przypadku tych efektów najechania czy focusa.

4:02Ten styl będzie zależny od projektanta,

4:06ale również warto zadbać o takie najdrobniejsze szczegóły.

4:09One naprawdę potrafią

4:11sprawić, że to korzystanie z interfejsu jest dużo przyjemniejsze.

4:15Jeszcze jeden stan, o którym chciałabym opowiedzieć, a którego akurat tutaj nie

4:19mam pod ręką dostępnego, to stan disabled, czyli zablokowany np.

4:24jeżeli mamy formularz wysyłki, w którym jest dużo wymaganych pól od użytkownika

4:29i nie chcemy, żeby użytkownik kliknął w wyślij zanim nie wypełni tych wszystkich

4:34pól formularzy, to możemy ten przycisk wyślij zablokować.

4:38On będzie po prostu widoczny.

4:40Zazwyczaj jest odrobina

4:42odrobina, zdjęta przezroczystość albo jest jakiś wyszarzony

4:46i nie jest możliwe kliknięcie w w w ten przycisk jest nieaktywna i dopiero

4:51kiedy wypełni się jakieś pola formularzy np.

4:54odblokowujemy ten przycisk i dajemy użytkownikowi możliwość przejścia dalej.

4:59Z tymi stanami disabled trzeba uważać

5:01przede wszystkim dlatego, żeby one faktycznie były widoczne dla użytkowników.

5:05Jeżeli wyszarzamy jakieś przyciski, to

5:08zadbajmy o to, żeby ten kontrast między przyciskiem a tłem nie był zbyt niski.

5:12Żeby nie było tak, że one są wręcz niewidzialne dla naszych użytkowników

5:17i jasno dajemy do zrozumienia, dlaczego te przyciski zostały zablokowane.

5:22Bo nie ma nic bardziej irytującego niż użytkownicy, którzy chcą przejść dalej

5:26klikają uparcie w ten zablokowany przycisk, bo nie zauważyli, że np.

5:30pojawiła się jakaś walidacja, która

5:32sprawia, że po prostu przejść dalej się nie da.