Projektowanie UI

0:00Klasycznie podsumujemy sobie tę część w

0:02formie kilku zasad i punktów, o których warto pamiętać.

0:08W tej części kursu skupiłam się na

0:10komponentach, które możemy dowolnie zaprojektować i oscylować.

0:14Ale warto wspomnieć jeszcze o powiadomieniach systemowych, które będą

0:18różnić się w zależności od systemu, z którego korzystamy.

0:21Najprościej różnicę dostrzeżemy, kiedy

0:23będziemy porównywać mobilne systemy Android i iOS.

0:27To powiadomienia, które mogą pytać nas np.

0:30o to, czy chcemy udostępniać mikrofon, kamerę, zdjęcia czy kontakty w jakiejś

0:34aplikacji lub jeśli link na stronie kieruje nas do otwarcia aplikacji.

0:39W przypadku iOS dostaniemy pytanie czy na pewno chcemy otwierać nową aplikację.

0:46Dlaczego o nich wspominam?

0:47Bo projektując np.

0:49aplikację mobilną powinniśmy również wziąć je pod uwagę.

0:52To znaczy nasza aplikacja sama magicznie

0:54nie pobierze wszystkich danych użytkownika, nie włączy sama aparatu ani

0:58nie doda listy kontaktów, jeśli użytkownik jej najpierw na to nie pozwoli.

1:03Ten mechanizm ma przede wszystkim

1:05zabezpieczać nasze dane i pozwalać nam decydować, co i gdzie chcemy udostępniać.

1:10Projektując aplikację musimy więc

1:11przewidzieć, co się stanie, jeśli użytkownik nie potwierdzi udostępniania.

1:16Jak zachęcimy go, żeby to zrobił? Bo np.

1:19jest to kluczowe dla działania naszej aplikacji.

1:22Nie nadużywajmy okienek dialogowych.

1:25Bywają uciążliwe i mogą irytować

1:27użytkowników, jeśli są używane nieprawidłowo lub zbyt często.

1:32Gdy będą pojawiały się często i w

1:33nieodpowiednich momentach, jest szansa, że użytkownik zacznie je ignorować

1:38lub odruchowo zamykać, zanim zapozna się z zawartością.

1:42I tu pojawia się ryzyko, że gdy pojawia się faktycznie w krytycznym momencie,

1:46użytkownicy podejmą impulsywnie błędne wybory.

1:50Mogą być bezpośrednio lub pośrednio konsekwencją działania użytkownika.

1:55Przykładem jest zamknięcie przez

1:56użytkownika strony z nie zapisaną zawartością, np.

2:00edycją treści profilu, co powoduje

2:02wyświetlenie okna dialogowego z pytaniem czy chcę zapisać zmiany przed zamknięciem.

2:08Jeśli już wymagamy od użytkownika skupienia uwagi na jakimś elemencie,

2:13zadbajmy o to, aby szybko zrozumiał, co ma zrobić.

2:16Z reguły jednozdaniowe komunikat w zupełności wystarczy, ale też nie ma sensu

2:21na siłę skracać treści treści, jeśli mają stracić sens.

2:26Zarówno komunikaty, jak i treści na

2:28przyciskach powinny być jednoznaczne i nie wymagać dłuższego zastanowienia.

2:33Samo zadanie do wykonania również powinno być proste, np.

2:37kliknięcie w przycisk, wpisanie treści w

2:40pole formularza, wybranie jednej z kilku opcji itd.

2:43Jeżeli w ramach okna dialogowego pojawia

2:46się sporo bardzo złożonych funkcji, jest ryzyko, że użytkownik przypadkiem wyłączy

2:51je i straci efekty wykonywanej do tej pory pracy.

2:56Projektując system, w którym pojawiają się różne treści w wyskakujących okienkach,

3:01powinniśmy przewidzieć, co będzie działo się w skrajnych przypadkach.

3:04Takie alternatywne wersje warto pokazać

3:07programistom, aby odpowiednio zakodowali nasze projekty.

3:11Jeśli pojawi się bardzo krótka informacja,

3:14być może nie musimy pokazywać bardzo dużego okienka, a w przypadku długiej

3:18treści, która nie zmieściłaby się w zakładanej wielkości np.

3:22ze względu na tłumaczenia na inny język, dać możliwość przewijania treści.

3:27Jeśli wykorzystujemy w serwisie okna dialogowe, upewnijmy się, że nie zaserwujemy

3:32użytkownikowi okienkozy, czyli okienek w okienkach na okienkach, gdy użytkownik

3:38będzie miał już treść wyświetlaną w oknie dialogowym.

3:41Starajmy się nie dorzucać kolejnych warstw, przez które trzeba się przedrzeć.

3:45To znacznie oddala nas od głównej treści

3:47strony, a także może wywoływać błędy i konsternację użytkownika.

3:52By zapobiec takim przypadkom, warto

3:54rozłożyć nasz interfejs na mniejsze elementy i zobaczyć do czego stosujemy,

3:58jakie komponenty, notyfikacje, błędy, dodatkowe informacje.

4:02Warto sprawdzić, czy w jakiejś konfiguracji nie skąplikujemy widoków.

4:07Jako projektanci musimy pamiętać również o kwestiach dostępności.

4:11To ważne, by zadbać o możliwość wyłączenia okienek np.

4:15za pomocą klawiatury, a także odpowiednią kolejność fokusowania pól.

4:20Jeśli szukacie informacji na temat dostępności i dobrych praktyk, możecie

4:24zerknąć na strony widoczne na slajdzie bądź szukać pod hasłem Accessibility.

4:28Szukając informacji o dobrych praktykach

4:31konkretnych komponentów wystarczy szukać haseł jak accessible modals i tym podobne.