Projektowanie UI: Zadanie domowe z okienek

0:00Jak już wspomniałam kilka razy,

0:02wyskakujące okienka bywają źle zaprojektowane

0:05lub stosuje się je w niewłaściwym celu, co w efekcie powoduje irytację użytkowników.

0:10Dlatego warto znać też alternatywne

0:13rozwiązania, by móc nie tylko je projektować, ale również proponować

0:17interesariuszom, którzy upierają się przy okienkach.

0:20Po prostu pokazujemy w ten sposób lepsze praktyki.

0:24Pierwsze pytanie, które warto sobie zadać, to czy faktycznie musimy wyświetlać

0:28dodatkowe okienko, żeby pokazać jakiś element.

0:31Być może zamiast angażować użytkownika w dodatkowe klikanie i przerywanie działań,

0:36można elementy pokazywane w okienku dać w treści.

0:40Zdarza się, że okienka są nadużywane w

0:42sytuacjach, w których treść okienka można przenieść jeden do jeden na treść strony.

0:49Upewnijcie się, że nie zaprojektowaliście właśnie takiej sytuacji.

0:53Treści strony wydają się zbyt chaotyczne.

0:56Być może z pomocą przyjdzie grid, siatka i odpowiednie rozłożenie ich na stronie.

1:01Wizualne rozdzielenie np.

1:03przez inne tło, linie lub cienie, a niekoniecznie wyskakujące okna.

1:08Jeśli martwimy się, że przez rezygnację z okienek na ekranie pojawi się zbyt wiele

1:13elementów, rozważmy zwijanie części z nich.

1:16Nie zawsze musimy pokazywać wszystko od razu.

1:19Zwłaszcza w przypadku bardziej

1:20zaawansowanych funkcji, które identyfikujemy jako rzadziej używane.

1:25Porządkując nasz interfejs, nadając mu hierarchię, będziemy w stanie określić,

1:29które elementy powinny być widoczne zawsze, a które powinniśmy ukrywać.

1:34Dzięki temu prostemu zabiegowi możemy wyeliminować użycie okienek.

1:39Zdarza się, że okienka modalne i Tooltip'y

1:41są zaślepkami dla słabo zaprojektowanych komponentów, takich jak tabele i listy.

1:47Unikamy dzięki nim rozbudowywania tych

1:49komponentów i w najgorszym wypadku wszystkie funkcje pokażemy przez

1:53Wyskakiwanie, ale to nie jest optymalne rozwiązanie dla użytkownika.

1:58O ile są sytuacje, w których wyskakujące

2:01okna dobrze się sprawdzą, nie powinniśmy traktować ich jako

2:05tymczasowych rozwiązań, bo dobrze wiemy, że tymczasowe rozwiązania

2:09potrafią funkcjonować zdecydowanie za długo.

2:12No wiecie, skoro działają, to po co je zmieniać?

2:15Są zawsze inne priorytety.

2:17Dlatego warto od razu projektując bardzo

2:19złożone komponenty, przewidywać ich rozwijanie i dodawanie kolejnych funkcji.

2:25W przypadku tabel i list możecie spotkać się np.

2:27z funkcjami edycji inline, czyli klikając

2:30w komórkę od razu przechodzimy do edycji elementu bądź rozwijaniem treści.

2:35Analogicznie jak w poprzednim przykładzie, zamiast pokazywać więcej treści w okienku,

2:40po prostu pokazujemy je poniżej wiersza lub rozciągamy cały wiersz.

2:45Zdecydowanie za często wyskakujące okna stosowane są również do walidacji.

2:52Myślę, że zdarzyło Wam się je zobaczyć

2:54przynajmniej raz, gdy coś zostało źle uzupełnione.

2:58Zamiast pokazywać od razu błędny format czy niedozwoloną liczbę znaków, po

3:03kliknięciu w wysyłkę formularza system zwracał błąd pokazany np.

3:07w okienku modalnym.

3:09To rozwiązanie jest proste projektujemy dynamiczne formularze, które po przejściu

3:14do kolejnego pola pokażą błędy, a najlepiej odpowiednio im zapobiegną.

3:18Przez dobry dobór pól i instrukcji dla użytkownika.