Projektowanie UI: Opcje wyboru

0:00Omówiliśmy już przyciski.

0:02Teraz czas na kolejną część, a mianowicie formularze.

0:06Obok przycisków to jedne z najczęstszych

0:08elementów UI, które przyjdzie Wam projektować.

0:11Mogą być super proste, składające się z

0:13jednego pola i przycisku, a mogą być też kilku etapowymi i

0:17rozbudowanymi konfiguratorami, do których wprowadza się masę danych.

0:21Żeby dobrze zaprojektować formularze, trzeba przede wszystkim znać ich podstawę,

0:26czyli komponenty, które służą nam do wprowadzania danych.

0:29Zacznijmy więc od najczęściej spotykanego elementu pola tekstowego.

0:35OK, ale czym jest pole tekstowe i z czego właściwie się składa?

0:39Pola tekstowe to komponenty, które pozwalają użytkownikom wprowadzać treści.

0:43Litery, cyfry i znaki specjalne.

0:46Używamy ich, gdy mamy do uzupełnienia formularz kontaktowy, wniosek o pożyczkę,

0:50gdy robimy przelew lub wpisujemy dane do wysyłki w sklepie internetowym.

0:55Spotkacie się również z prostymi

0:56formularzami składającymi się z jednego elementu, np.

1:00formularzem BLIK, zapisem na newsletter czy polem wyszukiwarki.

1:04Patrząc na pola tekstowe możemy wyodrębnić kilka elementów, z których się składają.

1:09To między innymi kontener, etykieta, tekst zastępczy, tekst pomocniczy i ikona.

1:16Przejdźmy do kontenera.

1:18Kontener to tło naszego pola tekstowego.

1:21Obszar, który je ogranicza i dyktuje, jak wiele znaków widzimy wpisanych do pola.

1:27Czasami kontener jest mniejszy niż maksymalna długość wpisywanego tekstu.

1:32Zobaczcie.

1:37Należy wtedy zadbać, by wraz z wpisywaniem tekstu treść przesuwała się w prawo, a

1:42wpisane znaki były cały czas widoczne dla użytkownika.

1:45Może składać się z samej ramki lub kolorowego tła.

1:49Całkiem często używane są również wewnętrzne cienie.

1:52Może być zwykłym prostokątem lub mieć zaokrąglone rogi.

1:56Warto dopasować styl formularzy do pozostałych elementów w interfejsie.

2:01Dość popularne stały się formularze, które

2:03zamiast pełnego obramowania składają się jedynie z cienkiej kreski.

2:08Rozpowszechnione przez Material Design zaczęły pojawiać się zarówno w

2:11rozwiązaniach mobilnych, jak i desktopowych.

2:15Ich użyteczność, a bardziej

2:17rozpoznawalność jako elementy interaktywne jest jednak trochę wątpliwa i sami twórcy

2:22materiala wycofali się ze stosowania ich w takiej formie.

2:25Zanim zdecydujecie się więc na stosowanie pola tekstowego w tej formie,

2:30upewnijcie się, że będzie wystarczająco wyróżniać się na tle innych elementów

2:34interfejsu, zwłaszcza zwykłych tekstów i podkreśleń.

2:39Kolejny element to etykieta.

2:41Etykieta informuje nas o tym, jakiego typu

2:43treści powinniśmy wprowadzać do pola tekstowego.

2:47Musi być przede wszystkim zrozumiała dla

2:48odbiorcy, jednoznaczna, możliwie krótka i czytelna.

2:53Ważne jest jej położenie względem kontenera.

2:56Najbezpieczniej ułożyć ją nad polem, którego dotyczy.

2:59W przypadku krótkich formularzy można ułożyć ją również obok pola, ale przy

3:03większej liczbie kłopotliwe może być formatowanie etykiet względem pól.

3:07Układając kilka pól jedno pod drugim,

3:09stosując jednocześnie ułożenie etykiet nad polami, upewnijmy się, że odległość

3:15etykiety do pola jest mniejsza niż do następnego elementu.

3:20Na pierwszy rzut oka powinno być jasne, którego pola etykieta dotyczy.

3:25Jeżeli ułożymy etykiety idealnie między

3:28poszczególnymi polami, przy dłuższych formularzach w środku tego formularza

3:33nie do końca będzie jasne, którego pola etykieta dotyczy.

3:36Czy jest to bardziej podpis pod polem,

3:39które znajduje się wyżej, czy dotyczy faktycznie tego, które znajduje się niżej.

3:44Stosując zasadę Gestalt, zasadę bliskości, powinniśmy właśnie dopasowywać te

3:50elementy, które dotyczą siebie nawzajem bliżej siebie.

3:55Tekst zastępczy.

3:56Tak zwany placeholder to tekst, który znajduje się w polu tekstowym, a znika,

4:01gdy w nie klikniemy lub zaczniemy coś wpisywać.

4:04Można spotkać się z łączeniem funkcji tekstu zastępczego i etykiety.

4:08Mówimy wtedy o floating labels

4:10i to wygodny sposób na zaoszczędzenie miejsca w naszych formularzach.

4:14Placeholder w stanie wyjściowym pełni rolę

4:17etykiety, a po rozpoczęciu wpisywania treści przesuwa się w inne miejsce.

4:22Ten wzorzec można zobaczyć np.

4:24w ostatniej wersji Material Design.

4:25Ale nie tylko.

4:27Placeholder może pełnić rolę podpowiedzi.

4:30Za jego pomocą pokazuje się przykładową

4:32treść, jaką użytkownik powinien wprowadzić lub prezentuje jej format.

4:37Musimy jednak pamiętać, żeby Placeholder nie wyglądał jak wpisany już tekst.

4:42Dobrze jest odsunąć tekst zastępczy od lewej krawędzi pola.

4:46Dzięki temu łatwiej odczytamy tekst wewnątrz.

4:49Jeśli stosujemy zaokrąglone pola w

4:51kontenerze, marginesy boczne możemy ustalić na końcówkę zaokrąglenia.

4:56Jeśli ułożymy go zbyt przesunięty do lewej

4:59krawędzi, przy mocnym zaokrągleniu efekt wizualny będzie mniej atrakcyjny, a

5:04tekst będzie wyglądał na bardziej ściśnięty.

5:07Do naszego pola tekstowego możemy dodać

5:09również tekst pomocnicze, tak zwany helpertext albo description.

5:14Czasami chcemy zamieścić ważne informacje

5:16obok pola, ale nie chcemy, żeby zniknęły po wpisaniu treści np.

5:20informację dlaczego zbieramy dane

5:23albo coś o maksymalnej liczbie znaków czy oczekiwaniach względem treści np.

5:28wymagania do tworzonego hasła.

5:30Takie dopiski umieszczamy z reguły pod polem tekstowym.

5:35Warto zadbać o estetyczne formatowanie.

5:38Tekst nie powinien być za długi, a maksymalna szerokość linii powinna być

5:42możliwie zbliżona do szerokości pola, którego dotyczy.

5:46Dzięki temu zachowamy wrażenie porządku w naszym formularzu.

5:50W polach tekstowych możemy dodawać również ikony.

5:53Idealnym przykładem jest chociażby pole

5:55wyszukiwarki, którego częścią jest często właśnie ikona lupy.

5:59Można spotkać się również z ikoną kasowania wpisanej treści.

6:03Krzyżyk, która jest całkiem wygodną opcją w mobilnych formularzach,

6:07albo dynamiczną walidację po wpisaniu odpowiedniej treści.

6:10W obrębie pola pojawia się ikona akceptacji lub błędu.

6:15Ikony pojawiają się również w roli czysto dekoracyjnej.

6:19Mogą podpowiadać typ treści, jaki powinien być wpisane, np.

6:23adres e-mail, numer telefonu czy link do kanału w portalu społecznościowym.

6:29Ikony mogą znajdować się zarówno w obrębie pola lub w bliskiej odległości.

6:34Z reguły ich wysokość jest mniejsza niż wysokość pola.

6:38Przejdźmy do rodzajów pól tekstowych.

6:41Pole tekstowe może przyjąć najprostszą formą ramki z możliwością wpisania tekstu,

6:46ale nie zawsze będzie to najbardziej optymalne rozwiązanie.

6:49Są rodzaje pól, które w określonych sytuacjach mogą pomóc użytkownikom

6:53szybciej uzupełnić formularz, a przede wszystkim uniknąć popełniania błędów.

6:59Zanim zaczniemy projektować pola

7:00formularzy, zastanówmy się, jakiego typu dane użytkownik będzie musiał do niego

7:05wprowadzić, a później zdecydujmy, jakiego rodzaju pole powinniśmy stworzyć.

7:10Klasyczne pole tekstowe text field to

7:12właśnie ten najczęściej spotykany wariant pola tekstowego.

7:16Może przyjąć różne formy wizualne, ale jego działanie jest dość proste.

7:21Sprawdza się idealnie do takich

7:23podstawowych informacji jak imię, nazwisko, adres e-mail,

7:27ale czasami dajemy użytkownikowi możliwość wpisania dłuższej wypowiedzi, która może

7:32składać się z kilku linijek tekstu, a nawet paragrafów.

7:36Ma to miejsce np.

7:37w komentarzach pod wpisami, gdy wystawiamy

7:40recenzję kursu czy opisujemy dodatkowe informacje do składanego zamówienia.

7:46Możemy zastosować wtedy obszar tekstowy,

7:48który na pierwszy rzut oka może wizualnie nie różnić się od zwykłego pola.

7:53Pole może mieć stałą wysokość, a po osiągnięciu określonej, określonej liczby

7:58znaków pojawiają się paski przewijania, ale także może dostosowywać się do liczby

8:04wpisanych znaków i powiększać wraz z kolejną linijką.

8:08Czasami chcemy wyświetlać treści

8:10wprowadzane przez użytkowników w określony sposób.

8:14Idealnym przykładem są długie ciągi

8:16znaków, jak numery telefonów, kont bankowych czy kody licencyjne.

8:21Automatyczne dodawanie spacji, dywizów lub nawiasów potrafi ułatwić odczytanie

8:27takiego numeru i upewnienie się, że wpisaliśmy go poprawnie.

8:31W przypadku takiego zabiegu mówimy o maskowaniu pola i jest to nic innego jak

8:36narzucanie pewnego szablonu wprowadzanym treściom.

8:39Dobrze dobrane pola z maskowanie potrafią

8:42uniknąć wielu błędów, które użytkownicy mogą popełnić, jeśli wymagamy od nich

8:47wprowadzania danych o określonym formacie, jak wspomniane numery telefonów czy kody

8:53pocztowe, które można wpisać na wiele sposobów ciągiem, wykorzystując dywizy

8:58ukośnik i wpisując lub nie numer kierunkowy.

9:01Czasami też ukrywamy treści wpisywane przez użytkowników.

9:06Zasłonięcie danych gwiazdkami lub kropkami ma najczęściej miejsce w przypadku danych

9:11wrażliwych, takich jak wpisywanie haseł czy pinów.

9:16Logując się do jakiegokolwiek serwisu czy

9:18tworząc nowe konto z pewnością się z nim spotkaliście.

9:22Pole hasła nie różni się specjalnie od zwykłego pola tekstowego.

9:26Należy jednak zaplanować jak będzie wyświetlać się stan uzupełniony

9:31i czy dajemy możliwość użytkownikowi na podgląd wpisanych danych.

9:35Najczęściej w formie aktywnej ikony

9:38symbolizującej oko, która po kliknięciu pokazuje wpisaną treść.

9:42Tak samo jak w przyciskach, w polach formularzy również występują stany

9:46wynikające z interakcji z elementem, które musimy przewidzieć.

9:50Najczęściej spotkamy się ze stanem wyjściowym.

9:53To początkowy, nie uzupełniony jeszcze

9:55stan formularza, czyli taki, który zobaczymy, gdy np.

9:59pierwszy raz wchodzimy na jakąś stronę i musimy wypełnić formularz.

10:02Tak samo jak w przypadku linków i przycisków.

10:05Po najechaniu kursorem na pole powinniśmy

10:07dostać odpowiedź od interfejsu, że mamy do czynienia z interaktywnym elementem.

10:13Całe pole może zmienić lekko kolor, może

10:15zmienić się jego obramowanie czy pojawić lub powiększyć cień.

10:20Oczywiście styl tego stanu powinniśmy dopasować do reszty elementów naszego

10:24interfejsu, tak żeby było spójnie i estetycznie.

10:28Potem mamy stan aktywny.

10:30Focus to ten moment, kiedy klikamy Tabniemy lub

10:33oznaczymy pole za pomocą klawiatury i możemy wprowadzać w niej jakieś dane.

10:39Powinniśmy wyróżnić je wizualnie od

10:41pozostałych, by użytkownik od razu widział, które pole teraz uzupełnia.

10:45To ważne zwłaszcza przy długich

10:47formularzach, gdy wizualnie łatwo pogubić się między polami.

10:52No i mamy stan wypełniony, czyli kiedy już

10:55uzupełnimy pole treścią, powinniśmy na pierwszy rzut oka móc odróżnić je od tego

11:01nie wypełnionego czy też wyświetlającego tekst zastępczy.

11:06W Formularzach

11:06dość często możemy spotkać się również ze stanem zablokowanym disabled.

11:12Z tym stanem spotkacie się najczęściej w

11:14formularzach edycji, gdy jednego z pól nie da się edytować np.

11:19login czy adres e-mail, który twórcy

11:21serwisu założyli, że jest niemożliwy do aktualizacji.

11:25Niektóre pola formularzy mogą być też

11:27nieaktywne do momentu, jak nie uzupełnimy jakiejś informacji.

11:32W tym przypadku dobrze jest informować

11:34użytkownika, dlaczego pole jest zablokowane.

11:38Najczęściej spotkamy się z polami

11:40zablokowanymi, które są wyszarzone albo mają ustawiony jakiś stopień przezroczystości.

11:46Trzeba jednak uważać, żeby nie przesadzać

11:48z przezroczystością, żeby pola nie zrobiły się wręcz niewidoczne dla niektórych

11:53użytkowników, zwłaszcza tych z mocno kontrastowymi monitorami.

11:58No i walidacja.

11:59Walidacja to moment, w którym sprawdzane

12:02jest, czy użytkownik wprowadził odpowiednie treści do pól.

12:06Np. jeśli jest obowiązkowe pole w formularzu, a użytkownik nic nie wpisał,

12:11może pojawić się informacja o wymogu uzupełnieniu tego pola.

12:16Jeśli wymagany jest adres e-mail, a w treści pola nie znalazł się symbol

12:20małpki, możemy domyślać się, że wprowadzone zostały niepoprawny format.

12:26Pole, które przechodzi w stan walidacji i

12:29informuje o błędzie powinno być od razu widoczne z informacją jak poprawić błąd.

12:35Użytkownik musi wiedzieć, jak może poprawnie zakończyć proces.

12:40Warto pamiętać, że z formularzy korzystają również osoby nie widzące barw.

12:46Rozróżnienie błędnego pola od innych tylko

12:49za pomocą koloru może być więc niewidoczne dla niektórych osób.

12:53Aby wzmocnić informację o błędzie, można stosować dodatkowe ikony, pogrubione ramki

12:59i kontekstowe wyświetlanie informacji o błędach.

13:03Możemy od razu informować użytkownika, czy

13:05wpisał poprawne dane i wyświetlać mu również potwierdzenie.

13:08Na przykład dane login jest wolny i można go używać.

13:12Mimo, że formularz to teoretycznie tylko kilka prostokątów, bardzo łatwo

13:16zaprojektować go w nieczytelny, mylący użytkownika sposób.

13:21Dlatego warto pamiętać o kilku zasadach,

13:23które mogą pomóc nam w układaniu pól formularzy.

13:27Po pierwsze ustalamy kolejność pól, począwszy od tego, że jesteśmy już

13:31przyzwyczajeni do wypełniania formularzy w określony sposób.

13:35Na przykład najpierw wpisujemy login lub

13:36maila, a dopiero później hasło, gdy chcemy się zalogować.

13:41Przez to, że przycisk wysyłający dane

13:43formularza znajduje się z reguły na jego końcu.

13:46Dlatego jeśli elementem formularza jest np.

13:49potwierdzenie

13:51check boxa z regulaminem albo opcja dołączenia załącznika,

13:55powinniśmy umieścić je nad przyciskiem wysyłania czy zapisywania danych.

13:59Warto poświęcić chwilę na

14:01przeanalizowanie, jakiego typu treści pobieramy od naszych użytkowników i czy

14:05jesteśmy w stanie tematycznie je pogrupować.

14:09To ważne zwłaszcza w długich formularzach,

14:11które składają się z kilkunastu, a nawet kilkudziesięciu pól.

14:15Na przykład, jeśli mam dane do faktury,

14:18dane kontaktowe czy adresowe, możemy pogrupować je i umieścić blisko siebie.

14:25W formularzach, jak w każdym innym miejscu

14:27w interfejsie, powinniśmy przede wszystkim utrzymać porządek wizualny.

14:32Oprócz uspójnienia wyglądu pól powinny mieć podobną barwę, styl

14:36obramowania, stopień zaokrąglenia rogów czy charakter tekstów.

14:41Zadbajmy również o uspójnienie układu pól względem siebie.

14:45Najłatwiej zrobimy to układając pola jedno pod drugim.

14:49Wyjątek stanowią zestawy pól, które naturalnie łączą się ze sobą, np.

14:54kod pocztowy i nazwa miasta albo ulica, numer budynku i numer mieszkania.

15:00One z reguły znajdują się obok siebie.

15:02Możemy wtedy sterować szerokością pól i

15:05krótkie dane liczbowe pokazywać w formie węższych pól.

15:09Jeżeli pola będą rozłożone obok siebie, a

15:12w dodatku nie będziemy widzieć na pierwszy rzut oka porządku jakiejś siatki, to

15:16oprócz tego, że dość ciężko będzie nam skanować wzrokiem zawartość formularza,

15:21to będzie on po prostu nieatrakcyjny wizualnie.

15:25A jednak ta wizualna strona interfejsu również odgrywa dość istotną rolę.

15:30Przy bardzo rozbudowanych formularzach

15:32powinniśmy unikać rozkładania ich na kilka kolumn.

15:36Idealnie jest mieć jedną kolumnę z danymi.

15:38Zdarzają się również dwie, ale nie powinniśmy robić ich więcej.

15:43To znów problem ze skanowaniem i próbą

15:45zrozumienia, w jakiej kolejności powinniśmy wypełniać dane w formularzu.

15:51Czy robić to od lewej do prawej, czy z

15:53góry na dół, tak jak czytali byśmy wąskie szpalty tekstu w gazetach.

15:58Rozbudowane formularze możemy za to rozdzielać na osobne kroki.

16:02To dość popularny zabieg w sklepach

16:04internetowych i na stronach, które wymagają skomplikowanych konfiguracji.

16:08Formularze również nie lubią zbyt dużego rozciągania.

16:11To zauważymy przy stronach, które

16:13wyświetlają się na większych rozdzielczościach.

16:16O ile w przypadku rozwiązań mobilnych

16:19staramy się robić jak największe pola, żeby łatwo trafić w nie palcem.

16:23W przypadku rozwiązań desktopowych bardzo

16:25łatwo przesadzić i mówiąc o przesadzić mam na myśli głównie ich szerokość.

16:30Jeżeli mamy stronę, która opiera się tylko

16:33na formularzu i wyświetlamy ją w rozdzielczości np.

16:36Full HD, to nie powinniśmy robić

16:39formularza, który wypełnia prawie całą jej przestrzeń.

16:42Nie jest to ani czytelne rozwiązanie, ani estetyczne.

16:46Jak sobie w takim razie poradzić ze zbyt dużą przestrzenią?

16:49Warto zerknąć jak robią to inni, np.

16:52Dropbox zamiast otwierać nową stronę z

16:55opcją logowania, wysuwa boczny panel, który po scrollowaniu

16:59w dół chowa się i odsłania treść kolejnych sekcji.

17:02Formularze newsletterowe też bywają kłopotliwe,

17:05głównie ze względu na to, że składają się zazwyczaj tylko z jednego pola.

17:09Na blogu invision projektanci wykorzystali

17:12szerokość paragrafów i zamknęli całość jasnym tłem.

17:16Dzięki temu nie ma wrażenia, że formularz

17:18wisi w próżni, czyta się go jako całość, a nie rozrzucone pojedyncze elementy.

17:23Z kolei w Miro postawili na duży

17:25formularz, ale warto zwrócić uwagę, że pola wcale nie są bardzo szerokie.

17:30Proporcja szerokości do wysokości jest odpowiednia, do tego dopasowana wielkość

17:35kroju, a całość kompozycji zamyka się z prawej strony.

17:39Elementem dekoracyjnym tła Nie ma dzięki temu wrażenia, że połowa

17:44ekranu jest pusta, mimo że w rzeczywistości jest.

17:49Warto próbować różnych kompozycji i sposobów okiełznania formularzy.

17:53Możemy wykorzystywać elementy dekoracyjne, obramowania i dodatkowe tła.

18:01Możemy wykorzystywać zdjęcia albo

18:03ilustracje, żeby wizualnie wypełnić przestrzenie dookoła.

18:07Tu trzeba jednak uważać, żeby nie przesadzić i za bardzo nie odwrócić uwagi

18:12użytkownika od tych najważniejszych elementów interfejsu.

18:18I na koniec zawsze warto pomyśleć nad

18:20kompozycją dodatkowych elementów, takich jak nagłówki czy teksty uzupełniające czy

18:26cokolwiek innego, co musimy umieścić obok formularza.

18:31No dobra, na koniec części o polach tekstowych.

18:35Przypomnimy sobie kilka zasad i ustalmy pewne reguły.

18:40Nie projektujemy pól, które wyglądają jak przyciski i odwrotnie.

18:45Użytkownik na pierwszy rzut oka powinien móc określić, co może zrobić z

18:50komponentem, czyli w tym przypadku wpisać do niego tekst.

18:54Jeżeli nasze pola formularzy będą przypominać za bardzo przyciski,

18:58użytkownik może w ogóle nie zobaczyć, że ma jakiś formularz do wypełnienia.

19:02A tego prawdopodobnie nie chcemy.

19:05Warto również zadbać o szerokość naszego pola.

19:09Szerokość powinna być dopasowana do typu treści, która będzie wprowadzana.

19:15Jeżeli wiemy, że użytkownik musi

19:17wprowadzić krótki kod pocztowy, możemy zaprojektować mniejsze pole.

19:21I na odwrót.

19:22Jeśli treści mogą być bardzo, bardzo

19:24długie, zadbajmy o wygodę użycia i zróbmy możliwie szeroki obszar.

19:29Projektując z myślą o urządzeniach

19:31mobilnych musimy zadbać o odpowiednią wielkość pól tekstowych oraz odległość

19:37między kolejnymi elementami interaktywnymi.

19:40Nie chodzi tylko o kwestie wizualne.

19:42Łatwiej będzie nam zeskanować treści,

19:44jeśli je odsuniemy od siebie, ale także użytkowe.

19:48Dużo łatwiej trafić w palcem w konkretne pole, nie wciskając tych sąsiadujących.

19:54W zależności od design systemu możemy

19:56spotkać się z różnymi wytycznymi odnośnie wielkości obiektów klikalnych.

20:00Najczęściej są to wartości między 40 i 50 pikseli wysokości i szerokości.

20:05Jeżeli planujemy ograniczać możliwą liczbę

20:07znaków w polu, jest szansa, że użytkownicy ją przekroczą.

20:12Powinniśmy o tym informować,

20:14najlepiej w jasny sposób sugerując ile znaków jeszcze zostało.

20:18W zależności od formularza możemy mieć

20:20sytuację, w której wszystkie pola są obowiązkowe, bądź tylko kilka z nich.

20:25Powinniśmy wizualnie oznaczyć to użytkownikom, żeby na pierwszy rzut oka

20:29wiedzieli, które dane trzeba wypełniać, a które pola mogą po prostu pominąć.

20:34Najpopularniejszym rozwiązaniem jest

20:36oznaczenie symbolem gwiazdki bądź opisem słownym wymaganych pól.

20:41No i na koniec dobry formularz to taki,

20:43który zmniejsza ryzyko popełnienia błędu przez użytkownika.

20:48Dlatego trzeba zadbać nie tylko o jego formę, ale również treści.

20:52Nazwy etykiet i tekstów pomocniczych

20:54odgrywają kluczową rolę w użyteczności formularzy.

20:58Usprawnienia, takie jak maskowanie pól, dynamiczna walidacja i ograniczenia

21:03wprowadzania typu treści mogą pozwolić na uniknięcie wielu błędów,

21:08ale muszą być odpowiednio obsłużone po stronie kodu.

21:11Dlatego tak ważna jest współpraca z

21:13programistami i przekazanie informacji, jak mają działać formularze.

21:18No dobra, ale nie nauczymy się niczego,

21:20jeżeli nie spróbujemy projektować własnych formularzy.

21:24Przygotowałam dla Was dwie prace domowe 2

21:27zadania, które pozwolą Wam przećwiczyć zdobyte informacje.

21:33Pierwsze zadanie to formularz Newsletter'owy.

21:36Najprostszy formularz, z jakim można się

21:38spotkać to ten służący do zapisu na newsletter.

21:42Stwórzcie formularz bazujący na rysunku poniżej moja cudowna makieta

21:46i przedstawcie go w różnych stanach pól, np.

21:50wyjściowym w trakcie wpisywania i z błędem.

21:54Zadanie drugie to formularz logowania.

21:56Jednym z częstszych do zaprojektowania jest właśnie ten formularz.

22:00Stwórzcie go wykorzystując elementy

22:02wypisane niżej i przedstawcie w różnych stanach wyjściowym, aktywnym i z błędem.

22:08Elementy, które powinny znaleźć się w tym

22:10formularzu to adres e-mail jako login, hasło.

22:14Opcja zapamiętania hasła tak, żebyśmy nie musieli ponownie wpisywać wszystkich

22:19danych, przycisk logowania, żebyśmy mogli przejść dalej.

22:23Opcja przypomnienia hasła.

22:24Gdyby jakimś cudem zdarzyło się, że właśnie go zapomnieliśmy.

22:30Alternatywnie link do zakładania konta.

22:32Jeżeli użytkownik przypadkiem trafił na

22:34stronę logowania, a okazuje się, że tego konta jeszcze nie miał okazji założyć.

22:40Bardziej zaawansowane osoby mogą przećwiczyć również tworzenie formularzy z

22:45animowanymi elementami bądź w różnych stylach, np.

22:49flat lub skeumorficznym .

22:52Im więcej formularzy stworzycie i im więcej czasu poświęcicie na ćwiczenia

22:56praktyczne, tym lepiej dla Was także powodzenia!