Projektowanie UI: Anatomia tabelki

0:00Niezależnie czy będziecie projektować stronę internetową czy aplikację mobilną,

0:05stanie przed Wami potrzeba zaprojektowania listy bądź tabeli.

0:09Zwłaszcza listy to element właściwie bazowy dla wielu interfejsów.

0:13Wchodząc na stronę z newsami albo bloga

0:16będziemy przeglądać właśnie listy z wpisami.

0:19Korzystając z aplikacji bankowej będziemy sprawdzać historię rachunku, która właśnie

0:24najczęściej przedstawiana jest w formie listy lub tabeli.

0:27W sklepach internetowych przeglądamy listy

0:30produktów w poszukiwaniu czegoś interesującego.

0:33Nawet serwisy takie jak Facebook, Twitter czy YouTube

0:36składają się właśnie z list, które zawierają przeróżne treści.

0:41W związku z tym, że pojawiają się w tak

0:43wielu miejscach jako projektanci musimy zadbać o ich jakość.

0:47Głównym celem list jest i tabel jest

0:49prezentowanie treści, które się w nich znajdują.

0:53Format treści jest powtarzalny w ramach jednego komponentu i projektując go często

0:58zaczynamy właśnie od projektu pojedynczego wiersza albo karty, które następnie

1:02będziemy multiplikować, zmieniając oczywiście treści w środku.

1:07Warto pamiętać, że trzeba zadbać zarówno o

1:10projekt pojedynczego elementu, jak i całości.

1:14Dlatego projektując listy i tabele powinniśmy ciągle sprawdzać, jak zmiany w

1:19pojedynczych elementach rzutują na ogólny wygląd.

1:22Może okazać się, że pojedyncza karta albo

1:24wiersz wyglądają całkiem w porządku, ale dopiero kiedy zestawimy je jedno pod

1:29drugim, okaże się, że trzeba popracować np.

1:32nad odległościami między elementami czy wielkością niektórych elementów.

1:38To jak będzie wyglądać i działać

1:40nasza lista powinno być w pełni zależne od

1:42typu treści, jakie mają znaleźć się w środku i sposobu ich przeglądania.

1:47Ale o tym opowiemy jeszcze później.

1:51W sieci można spotkać się z różnym sposobem rozróżnienia, czym lista różni

1:54się od tabeli, a w niektórych systemach tego rozróżnienia praktycznie nie ma.

1:59Nie przywiązywałabym się więc specjalnie

2:02do określania, gdzie kończy się tabelka, a zaczyna lista.

2:06Dla porządku możemy założyć, że tabele

2:08będą bardziej uporządkowane, z wyraźnym podziałem na kolumny i wiersze i

2:13prawdopodobnie będą miały jakieś nagłówki kolumn, żeby łatwiej interpretowały się dane.

2:19W przypadku list mamy z reguły bardziej swobodne podejście.

2:23Składają się często z kart, które mają w

2:25sobie różnego typu treści, jak zdjęcia, teksty, ikony i podobne.

2:30W tej części warsztatu będziemy poruszać

2:33tematy projektu, listy i tabeli również w wersjach mobilnych, ponieważ te

2:37przy dużej ilości danych bywają kłopotliwe.

2:41Listy i tabele z reguły nie funkcjonują w

2:44zupełnym oderwaniu od reszty komponentów na ekranie.

2:47Dlatego też chciałabym choć chwilę poświęcić na takie zagadnienia jak

2:51wyszukiwanie, filtrowanie i sortowanie wyników.

2:57W zależności od typu produktu, nad którym

3:00pracujemy, możemy spotkać się z pewnymi wzorcami charakterystycznymi dla np.

3:06branży albo typu strony.

3:08Sklepy internetowe i systemy bankowe są idealnym przykładem tego, jak pewne wzorce

3:14i sposoby prezentowania treści są spójne między różnymi firmami.

3:19Część z nich wynika, choćby z przyzwyczajeń użytkowników, np.

3:23spodziewamy się, że na liście produktów

3:25przycisk dodaj do koszyka lub zobacz szczegóły, o ile będzie widoczny na

3:30stronie, znajdzie się po prawej stronie, prawdopodobnie w pobliżu ceny.

3:36Jeśli mamy listy transakcji w banku,

3:38spodziewamy się, że ułożone będą chronologicznie od najnowszych.

3:43A daty znajdziemy gdzieś po lewej stronie listy.

3:46Jeśli projektujemy sklep lub bank, dobrze by było poznać te wzorce,

3:51prześledzić konkurencyjne rozwiązania i zebrać benchmarki.

3:55Pozwoli to lepiej zaprojektować produkt i

3:57stworzyć coś, co będzie łatwe w użyciu i zrozumiałe przez użytkowników.

4:03Oczywiście pamiętajmy o testowaniu naszych

4:05propozycji stworzenia ładnego wizualnie projektu jest stosunkowo łatwe.

4:10Cała sztuka polega na tym, żeby był jednocześnie użyteczny.

4:16Gdzie szukać wzorców.

4:18Warto sprawdzić, czy nie ma dostępnych darmowych do pobrania raportów branżowych.

4:23Często tworzone są właśnie takie z

4:25obszarów e-commerce, czyli sprzedaży online i sektora finansowego.

4:29Również popularne firmy badawcze jak Nielsen Norman Group czy

4:34Baymard's Institute mają na swoich stronach darmowe artykuły i wycinki płatnych raportów.

4:41Dobre listy i tabele pozwalają

4:43użytkownikom na skanowanie, analizowanie i porównywanie informacji.

4:49Pozwalają również na podejmowanie dalszych działań.

4:52Zapisanie piosenki do ulubionych,

4:54przejście do wpisu lub dodanie produktu do koszyka.

4:59Zanim wybierzemy format i podejmiemy decyzję, jak będzie wyglądał komponent,

5:04trzeba zadać sobie pytanie co chcemy właściwie wrzucić do środka?

5:10Jakiego typu treści będziemy przedstawiać?

5:13Czy będą to tylko teksty, pojedyncze frazy, słowa, a może dłuższe opisy?

5:19Czy będzie potrzeba dodania zdjęcia lub ikonki?

5:22A może chcemy dodać jeszcze funkcje, które

5:24pozwalają zaznaczać, wybierać, usuwać pojedyncze elementy?

5:29Czy tych informacji będzie dużo czy mało?

5:32Czy damy użytkownikom możliwość sortowania ich i w jaki sposób?

5:36Czy prezentowane w komponencie informacje będą wszystkim, co zobaczy użytkownik?

5:41Czy może przez jakieś rozwinięcie albo

5:44kliknięcie dalej będzie można rozpoznać, zapoznać się ze szczegółami?

5:49Jak bardzo będą różnić się informacje w ramach jednego elementu?

5:53Czy będziemy mieć np.

5:54mnóstwo powtarzających się treści, których jedynym rozróżnienie będzie np.

5:59wielkość i cena albo data dodania elementu do listy?

6:04Kolejna rzecz to jak użytkownicy będą z tego korzystać.

6:07Czego właściwie będą szukać i w jaki sposób do tych poszukiwań będą podchodzić?

6:15To dużo pytań, ale im wcześniej będziemy mogli odpowiedzieć sobie na część z nich,

6:21łatwiej będzie określić, czego właściwie potrzebujemy.

6:25Powinniśmy dążyć do tego, że projekt pomaga użytkownikowi bez wysiłku zrozumieć

6:31i ocenić zakres informacji, który przegląda.

6:35Umożliwia bezproblemową nawigację po tych

6:37wynikach i przedstawia treści tak, by były łatwe do porównywania.

6:43Oznacza to, że projekt nie może odwracać

6:46uwagi użytkowników od treści, które są w środku.

6:49Teksty muszą być czytelne bez większego

6:52wysiłku, więc nie mogą być zbyt małe lub mało kontrastowe w stosunku do tła.

6:58Nawet jeśli wydawać będzie się to bardziej atrakcyjne od wizualnej strony.