Projektowanie UI: Rozwijane listy

0:00No dobra, wiemy już, że są komponenty

0:02które pozwalają na wpisywanie danych do formularzy, ale

0:05czasami dajemy użytkownikom również opcje do

0:07wyboru.

0:08Dobrą praktyką jest, żeby gdy mamy taką możliwość.

0:11Dać użytkownikowi wybór.

0:13Spośród dostępnych

0:14opcji, zamiast wymagać od niego wymyślenia i

0:17wpisania własnej odpowiedzi.

0:19Takie praktyki dają.

0:20Większe szanse na to, że

0:21użytkownicy wypełnią np.

0:23formularz, na którym nam zależy.

0:26Wyobraźcie sobie, że macie dwie

0:27ankiety do wyboru.

0:28Którą byście wybrali?

0:30Taką, która wymaga od Was wpisywania w pola własnych odpowiedzi.

0:34Czy taką, którą szybko klikacie, zaznaczając po prostu

0:37dostępne odpowiedzi. I np.

0:39mając. do wyboru opcję z

0:41wpisanym, wpisaniem

0:42własnej?

0:43Większość z Was prawdopodobnie wybrałaby właśnie tę drugą opcję.

0:47I w projektowaniu formularzy

0:49właśnie tym będziemy się kierować.

0:51Listy wyboru to kontrolki, które pozwalają użytkownikom na podejmowanie

0:55wyborów przez zaznaczanie lub

0:57przełączanie się przez dostępne opcje.

1:00Pojawiają się właśnie tam, gdzie

1:02użytkownik musi podjąć decyzję, czy wybrać swoje preferencje.

1:06Spotkacie się z nimi ustawiając filtry w

1:08sklepie internetowym lub opcje wysyłki i włączając lub

1:11wyłączając preferencje w aplikacji.

1:15Warto ich używać

1:16użytkownicy je znają i bardzo łatwo

1:18zeskanować i porównać wzrokiem dostępne opcje.

1:22Rodzaje kontrolek. Wyboru, które omówimy

1:24w tej części to radio batton'y

1:27czyli listy jednokrotnego

1:29wyboru.

1:31CheckBox'y

1:32pola wyboru czy opcje wielokrotnego

1:34wyboru.

1:36I tak zwane switche, czyli przełączniki.

1:40Do tej grupy przycisków włączamy również rozwijane listy z opcjami tzw.

1:44dropdowns

1:45celowo nie będę teraz o nich mówić, ponieważ poświęciłam im więcej miejsca

1:48w kolejnej części warsztatu.

1:52Radio button'y

1:52chackboxt, dropdown'y i switch to najczęściej wykorzystywane

1:56listy wyboru w naszych interfejsach.

1:58Ale nie jedyne.

2:00Możecie spotkać się również z wizualnymi

2:02wariacjami, które jednak opierają się na podobnej zasadzie działania.

2:06Dlatego przy okazji omówienia.

2:08Konkretnych kontrolek pokażę Wam również inne warianty.

2:12Zacznijmy od pól jednokrotnego wyboru, czyli radio buttons.

2:17Kiedy mamy grupę jednokrotnego. Wyboru.

2:19Możemy wybrać oczywiście tylko jedną z

2:21opcji.

2:22Oznacza to, że klikając na inną niż zaznaczona opcja Wybór się przełączy.

2:27Nigdy nie będziemy mieć jednocześnie wybranych obu z nich.

2:30Dlatego stosując tę kontrolkę musimy mieć

2:33pewność, że opcje do wyboru faktycznie będą przeciwstawne i nie sprawimy

2:36niejasnym nazewnictwem dezorientacji u użytkowników.

2:41To, co jest jeszcze charakterystyczne dla tego.

2:43Komponentu to. Fakt, że z reguły mamy wybraną

2:45domyślną opcję. W radio button'ach

2:47nie projektuje

2:48się stanu, gdzie wszystkie opcje są odznaczone.

2:51Oczywiście można tak to

2:53zaprojektować, a później

2:55wdrożyć, ale nie będzie to reprezentacja domyślnego działania tego komponentu i

3:00generuje kilka kolejnych scenariuszy, które również trzeba

3:03zaprojektować.

3:04Opcje jednokrotnego wyboru działają podobnie do rozwijanych list, o których

3:08opowiem w kolejnej części warsztatu, ale mają nad nimi pewną przewagę.

3:13Użytkownik bowiem na pierwszy rzut oka

3:15widzi, ile opcji ma do wyboru i szybko może je zeskanować.

3:18Nie musi rozwijać żadnego komponentu

3:20żeby to zrobić.

3:23Trzeba jednak pamiętać, że ma to zastosowanie.

3:26W przypadku, gdy opcji do wyboru jest kilka.

3:29Jeśli radio button będzie zbyt dużo.

3:31Interfejs stanie się nieczytelny.

3:34Warto odpowiednio formatować.

3:35Opcje wyboru, by były czytelne i

3:37łatwe do porównywania.

3:39Zdecydowanie częściej będziemy więc używać

3:41ich ułożonych wertykalnie, choć i tu spotkamy się z pewnymi wyjątkami.

3:47Horyzontalne ułożenie radio buttonów będzie.

3:50Akceptowalne, jeśli opcji do wyboru będzie

3:52bardzo mało, np.

3:54dwie, maksymalnie trzy.

3:56To, co jeszcze może pomóc nam w

3:57czytelności, to stosowanie dodatkowych elementów

4:00graficznych, jak ramki, ikony i

4:02teksty uzupełniające.

4:04Komponent nie wygląda już wtedy jak klasyczna

4:06grupa radio button'ów.

4:08Ale wciąż zachowuje swoją

4:09funkcjonalność.

4:10Pozwala na zaznaczenie tylko jednej z opcji.

4:13W większości przypadków dużo wygodniej

4:15będzie stosować ułożenie właśnie wertykalne.

4:20Jak każdy element

4:21interaktywny.

4:22Również pola jednokrotnego wyboru mają swoje

4:25stany, które trzeba zaprojektować.

4:28Domyślacie się zapewne dwóch z nich. Pierwszy to

4:31zaznaczony element i ten

4:32odznaczony.

4:35Również tu będziemy mówić o stanie po najechaniu

4:38kursorem zarówno na zaznaczonym jak

4:40I odznaczonym polu.

4:43Oraz stanie focus.

4:45Gdy będziemy używać klawiatury do poruszania się po interfejsie.

4:50Pola jednokrotnego wyboru

4:51możemy też zablokować dokładnie jak przyciski pola tekstowe ze stanem disabled.

4:57Radio button'y zazwyczaj przyjmują kształt koła.

4:59Nie bez powodu użytkownicy się do tego przyzwyczaili.

5:02Spodziewają się, jak mogą działać podobnie wyglądające kontrolki.

5:06Dlatego nie warto odchodzić od tego wzorca.

5:08Bo.

5:09Możemy zrobić to kosztem rozpoznawalności komponentu i tym

5:12samym użyteczności rozwiązania.

5:15Najczęściej popełnianym błędem jest

5:17zapominanie o tym, że w małe radio button'y bardzo trudno będzie trafić

5:21palcem, jeśli używamy urządzenia dotykowego, np.

5:23. Smartfona.

5:25W wersjach mobilnych.

5:26Stron czy aplikacjach musimy więc zadbać o to

5:28aby były odpowiednio duże i oddalone od siebie.

5:31Tak by wybierając jedną opcję nie wciskać przypadkiem drugiej.

5:36Przyjęło się, że bezpieczny obszar dla palca to między 44 a

5:4050 piksele wysokości i szerokości.

5:43Ale nie oznacza to, że radio button'y powinny

5:46być takie duże.

5:48Po prostu zadbajmy o to, aby miejsce

5:50interakcji było na tyle duże i aktywne, żeby użytkownik nie miał z nim problemu.

5:55Warto zadbać o szczegóły, takie jak

5:57grubość obramowania i odpowiednie kontrasty.

6:00Oczywiście wszystko powinno być spójne z

6:03pozostałymi elementami interfejsu.

6:05Nie powinniśmy również zmieniać formatowania kolejnych wierszy tekstu.

6:09Środkowanie i wyrównanie do prawej

6:11sprawią, że interfejs straci na czytelności.

6:14Przenoszenie tekstów pod lub nad przycisk z reguły niespecjalnie ma sens.

6:20Zmiana położenia sprawdzi się tylko w niektórych przypadkach.

6:23Wyrównanie do lewej i kształtów i tekstów ułatwi za to szybkie

6:27skanowanie zawartości pól. Inaczej będziemy.

6:31Traktować radio button'y, które

6:32są częścią innych

6:33komponentów.

6:35Tu trzeba kierować się intuicją i pamiętać

6:37o tym, że komponent powinien być przede wszystkim czytelny.

6:41No i jak zawsze warto sprawdzać nasze interfejsy z użytkownikami.

6:49Kolejny komponent to wielokrotny

6:51wybór, czyli checkbox.

6:54Kolejnym popularnym sposobem na

6:55prezentowanie użytkownikom wyboru jest stosowanie checkbox'ów.

6:59W odróżnieniu od radio button'ów.

7:01Z reguły stosujemy kwadraty lub kwadraty z zaokrąglonymi rogami, ale coraz częściej

7:06projektanci decydują się również na stosowanie kształtu koła.

7:10Zanim podejmiemy taką decyzję, warto upewnić się, że nie będą

7:13mylące dla użytkowników.

7:18W odróżnieniu od radio button'a

7:20checkbox może występować jako

7:22jeden element.

7:23Spotkamy się z nim najczęściej, gdy musimy potwierdzić regulamin rejestracji albo

7:27zapisujemy się do newslettera i wyrażamy zgodę na przetwarzanie naszych danych.

7:33Checkboxy nie wymagają też zaznaczania domyślnej opcji.

7:36Możemy mieć je wszystkie odznaczone, a użytkownik może zaznaczać

7:40dowolną ich liczbę.

7:44Dużo częściej

7:45w przypadku checkboxów możecie spotkać się również z zagnieżdżeniami, a to oznacza,

7:49że dochodzi nam dodatkowy stan, który Material Design.

7:52Czy Flaunt od Microsoftu określają jako

7:55indeterminate co można wytłumaczyć jako nieokreślony.

7:59Oznacza to, że wszystkie checkbox'y w tej

8:01grupie nie są ani zaznaczone, ani nie zaznaczone.

8:05Ta grupa będzie po prostu wymieszana.

8:09Checkbox'ów używamy zazwyczaj do wybierania większej liczby

8:12opcji lub zaznaczania zgód i nie powinniśmy

8:15wykorzystywać ich jako opcji włączających i wyłączających

8:18jakieś funkcje.

8:20W tym celu stosujemy switche, o których zaraz opowiem.

8:25Klasycznie w przypadku checkbox'ów mamy

8:28stany takie jak zaznaczony, nie zaznaczony po najechaniu kursorem.

8:32Aktywny, zablokowany

8:36I walidację. Może być tak, że

8:38wymagamy zaznaczenia przynajmniej jednej opcji lub

8:41akceptacji regulaminu, a użytkownik tego nie zrobił.

8:45Powinniśmy wyświetlać walidację jak najbliżej.

8:47Komponentu. By użytkownik wiedział czego dotyczy

8:50błąd.

8:53Wspominałam wcześniej także o stanie

8:55nieokreślonym, czyli przypadku, gdy mamy zagnieżdżone checkbox'y i chcemy pokazać

9:00stan tego nadrzędnego.

9:03W związku z tym, że checkbox'y mogą występować jako grupa i pojedyncze elementy, musimy

9:07upewnić się, że stosując jedne i drugie w interfejsie odpowiedniej od siebie

9:11odsuniemy.

9:12Tak, by przypadkiem pojedynczy element nie wyglądał jak

9:15część grupy.

9:21Tu również zadbajmy o odpowiednie

9:22formatowanie i wyrównanie.

9:24Odległości pojedynczych checkboks'ów powinny być równe.

9:28Zdarza się również, że mamy więcej tekstu niż jeden wiersz przy checkbox'e.

9:31Będzie wtedy potrzeba ustalenia, jak tekst

9:34ma się formatować względem elementu graficznego.

9:37Najwygodniej wyrównać je względem siebie

9:39do góry i ustalić równą odległość od tekstów, by utrzymać porządek wizualny.

9:46W aplikacjach mobilnych można spotkać się dość często ze stosowaniem checkbox'ów

9:49po prawej stronie od tekstów lub zdjęć i ikon.

9:53Wygodniej nawiguje się wtedy kciukiem,

9:55ale upewnijmy się, że jasno widać wtedy, który checkbox dotyczy którego elementu.

10:00Tak, by użytkownik nie musiał się za bardzo skupiać na dopasowywaniu

10:04ich do siebie. Duże odległości, wielkość, a także

10:07elementy oddzielające jak linie mogą w tym przypadku pomóc.

10:13Checkbox może być również stosowany bez etykiety tekstowej jako sama ikonka.

10:17Zazwyczaj ma to miejsce w tabelach i

10:19listach, gdzie zaznaczenie dotyczy całego wiersza tabeli.

10:22Ostatni z elementów tej części warsztatu to switch, czyli tak zwany przełącznik.

10:28Przełączniki.

10:30W zależności od systemu możecie spotkać się z nazwami Switch lub Toggle.

10:34To komponenty, które mają dwa przeciwstawne stany.

10:37Tak jak w świecie rzeczywistym możemy włączyć i włączyć

10:40światło czy czajnik na wodę.

10:42Tak w wirtualnym świecie mamy

10:44przełączniki, które przełączamy między dwoma stanami.

10:48Są szczególnie popularne w rozwiązaniach

10:50mobilnych, bo przede wszystkim oszczędzają masę miejsca.

10:54Musimy upewnić się tylko, że stosujemy

10:56odpowiednie nazwy i etykiety, by nie były mylące dla użytkowników.

11:00To, na co trzeba zwrócić szczególną uwagę,

11:02to odpowiednie akcentowanie zmiany stanu, np.

11:05przez położenie i kolor elementu.

11:08Pomocne mogą być słowne etykiety, ale trzeba stosować je z rozwagą.

11:11Łatwo wprowadzić nimi użytkownika w błąd lub sprawić zakłopotanie.

11:15Zobaczcie na przykład.

11:16Tego, jak zrobił to Microsoft. Jedna

11:18z popularnych drukarni internetowych.

11:21Patrząc na oba te switche nie do końca mamy

11:23pewność, czy ta

11:24etykieta, która znajduje się po prawej stronie dotyczy stanu obecnego, czy to

11:29będzie stan, do którego przejdziemy, kiedy wciśniemy switcha.

11:33Wynika to z tego, że

11:34ta kropka switchowa.

11:36Jest po przeciwległej stronie od etykiety.

11:38I można by się było zasugerować, że przesuwając ją w prawą stronę będziemy

11:43właśnie aktywować tą etykietę, która po prawej stronie się znajduje.

11:47Sporo pytań, sporo zagwozdek i nie za bardzo chcemy ten

11:51efekt osiągać u naszych

11:53użytkowników, więc zanim zaprojektujemy

11:56switcha w takim stylu, warto pokazać go najpierw naszym

11:59użytkownikom i po prostu podpytać, jak wyobrażają sobie

12:03działanie tego komponentu.

12:07To co może pomóc to wpisanie etykiet w

12:09komponent bądź dodatkowych ikon

12:12ale to też nie sprawdzi się w każdym przypadku.

12:14I dobrze podchodzić po prostu do tego ostrożnie.

12:17Tak jak wspomniałam, najlepiej pokazać

12:19projekt kilku osobom i zapytać, jak według nich działa zaprojektowane

12:23przez nas komponent.

12:26Switche oczywiście również mają swoje stany włączony

12:29I wyłączony.

12:30Po najechaniu kursorem

12:32aktywny

12:34I zablokowany.

12:36Pamiętajcie, że to tylko przykładowe

12:38wizualizacje stanów i możecie dowolnie je stylować.

12:41Czy będą to zmienione obramowania np.

12:43pogrubione, zmienione kolory czy położenie niektórych elementów?

12:47To tak naprawdę zależy tylko od projektanta.

12:51To, o czym warto pamiętać, to to, że

12:53jesteśmy już przyzwyczajeni, że używając przełącznika widzimy natychmiastowy

12:58efekt. Np.

12:59włączamy światło i robi się jasno.

13:02W interfejsie powinno być podobnie.

13:04Jeśli używamy switcha, akcja z nim

13:06związana powinna być aktywna w momencie włączenia.

13:09Nie wymagajmy zatem używania switcha i np.

13:12przycisku zapisywania jednocześnie. No dobra

13:15to teraz jeszcze kilka zasad na koniec.

13:18Pamiętajmy o logicznej kolejności opcji.

13:21Układając grupy jak checkboks'ów i radio button'ów

13:23zadbajmy o odpowiednie rozłożenie treści.

13:26Jeśli mamy dużo opcji do

13:28wyboru, zastanówmy się według jakiego klucza

13:30je układać.

13:32Mogą to być np.

13:33Najczęściej wybierane opcje.

13:35Tu możemy opierać się na danych lub lista alfabetyczna.

13:39Nie ma nic bardziej irytującego jak aktywny radio button tylko

13:43w miejscu elementu

13:44graficznego, czyli żeby go zaznaczyć musimy trafić kursorem idealnie w

13:48kropkę.

13:49Zamiast dręczyć tak użytkowników, możemy

13:52ustalić, że aktywny obszar kliknięcia to również obszar tekstu,

13:56a najlepiej założyć określone szerokości i wysokości i przekazać je programiście.

14:00To samo tyczyć będzie się checkboksów i wszystkich innych elementów interfejsu

14:05który zaprojektujemy.

14:08I na koniec pamiętajmy o tym, żeby dopasować komponenty do typu treści i

14:12celów, jakie użytkownik chce osiągnąć w naszym produkcie.

14:15Mamy do wyboru całe mnóstwo

14:17komponentów, więc

14:18upewnijmy się, że wykorzystujemy je właściwie.

14:22No ale nic tak nie utrwali naszej nowo

14:24zdobytej wiedzy, jak przećwiczenie tego wszystkiego w praktyce.

14:28Więc zobaczcie jakie dwa

14:29zadania domowe dla Was przygotowałam.

14:33Projektując sklepowe filtry często

14:35będziemy projektować je wykorzystując właśnie listy wyboru.

14:38Wyobraźmy sobie sklep z butami, w którym możemy wyszukiwać produkty

14:42według podanych niżej kategorii.

14:44Zaprojektujcie interfejs tak, żeby można było wybrać w nim rozmiar buta,

14:49markę, materiał, kolor, cenę i rodzaj obcasa.

14:53Zastanówcie się jakiego typu podpowiedzi mogą

14:56być w filtrach. Jakiego typu dane użytkownik będzie miał

14:59do wyboru i w którym miejscu powinien mieć opcję

15:02wielokrotnego wyboru, jednokrotnego wyboru.

15:05A może jeszcze jakieś inne komponenty,

15:07które być może już znacie i chcecie zastosować.

15:11Oczywiście spróbujcie zaprojektować te

15:13filtry zarówno w wersji desktopowej, jak i

15:16wersji mobilnej.

15:18Drugie zadanie to wybór płatności i

15:19dostawy w sklepie internetowym.

15:22Wybór kilku opcji płatności i dostawy jest

15:24miejscem w

15:25sklepie, które można uatrakcyjnić ciekawym

15:27projektem.

15:28Pamiętajcie, że użytkownicy mogą już znać pewne

15:31rozwiązania I rozpoznawać je, gdy

15:33zobaczą ich logo.

15:35Załóżmy, że w

15:36przypadku dostawy będzie można

15:38wybrać odbiór osobisty kuriera np.

15:42DPD

15:42lub skorzystać

15:43z paczkomatu InPost.

15:45Jeżeli będziemy wybierać sposoby płatności.

15:49Dajmy użytkownikom przynajmniej

15:50trzy opcje do wyboru płatność na miejscu przy odbiorze osobistym

15:55płatność za pobraniem lub dokonanie przelewu

15:58online z wykorzystaniem jakiejś bramki

16:00internetowej. To może być chociażby PayU.

16:04I tak jak w poprzednim zadaniu spróbujcie

16:06zrealizować to zadanie zarówno w wersji desktopowej

16:09jak i mobilnej.