Szkolenie UX: nawigacja, formularze, tabele

Nawigacja

Formularze

TabeleAnna Sorbian Projektant UX

Szkolenie UX cz.II

Nie ma rozwiązań idealnych.

Istnieją projekty, które stanowią odpowiednią odpowiedź na potrzeby danej grupy użytkowników.

Projektowanie to szukanie kompromisów.

Duże i czytelne zdjęcia vs. Dużo pozycji na jednej stronie

Spójność vs. Podkreślenie odrębności obszaru

Każda decyzja projektowa wspiera tylko część wartości.

Decyzje podejmujemy na podstawie odpowiedzi na pytania o cel danego elementu projektu.

W jakim celu użytkownik będzie korzystał danego elementu? Jak użytkownik może zinterpretować ten element? Dlaczego? Czego użytkownik może się spodziewać po kliknięciu? Co jest tu ważne? Po co to tutaj jest? Czy użytkownik zorientuje się, że ten element tak działa? Co go naprowadzi? Dlaczego decydujemy się na taką kolejność elementów? Dlaczego wybieramy taką nazwę dla tej sekcji? Jakie są inne opcje? Co jest kolejnym krokiem? Dlaczego? Czego może się spodziewać użytkownik? Jaki problem rozwiązuje takie podejście/koncepcja? Dlaczego warto w to kliknąć? Skąd użytkownik będzie wiedział, że warto? Skąd ktoś ma o tym wiedzieć? Jak możemy to zrobić inaczej? Bardziej zrozumiałe? Co by się stało, gdybyśmy zrezygnowali z tego? Dlaczego ktoś miałby opuścić w tym momencie stronę? …

Pytajmy!

Dobre praktyki

Nawigacja

Formularze

Tabele

Nawigacja

Stała dostępność nawigacji

Formularze Tabele

1. Nawigacja nie powinna być ukrywana.

2. W przypadku widoków modalnych, powinna być pozostawiona oczywista ścieżka pozwalająca na ich opuszczenie.

3. Użytkownik powinien zawsze mieć możliwość przejścia: ✓ na stronę główną ✓ do Kategorii 1.stopnia ✓ do Kategorii-rodzeństwa

Nawigacja

Czytelne punkty startowe

Formularze Tabele

▪ Wskaż wyraźne punkty rozpoczęcia interakcji z interfejsem

▪ Punkty te powinny pozostawać z związku z najczęściej realizowanym scenariuszami na stronie

▪ Ogranicz ich ilość

Nawigacja

Ogranicz liczbę opcji

Formularze Tabele

Staraj się zdefiniować zaledwie kilka opcji. Z im mniejszej liczby opcji użytkownik będzie mógł wybrać jedną, tym szybciej go dokona i tym mniej będzie sfrustrowany i tym szybciej zaangażuje się w interakcję.

Ilość czasu potrzebnego do dokonania wyboru wydłuża się wraz z ilością opcji do wyboru. Prawo Hicka (1954)

Nawigacja

Wyszukiwarka

Formularze Tabele

▪ Nigdy nie może jej zabraknąć. ▪ Musi być dostępna z każdego miejsca

w serwisie.

Nawigacja

Potęga stopki

Formularze Tabele

Stopka w ostatnich latach stała się bardzo ważnym punktem nawigacyjnym, którego nie można zaniedbywać.

Bardzo duża liczba użytkowników docenia czytelne listy z posegregowanymi sekcjami. Warto zadbać o to, aby stopka była wygodnym skrótem do kluczowych dla użytkownika części serwisu, zwłaszcza: ▪ Pomocowych ▪ Informacyjnych ▪ Kontaktowych

Nawigacja

Gdzie jestem? (1)

Formularze Tabele

1. stopień

2. stopień

3. stopień

Nawigacja

Gdzie jestem? (2)

Formularze Tabele

Podświetlanie wybieranych elementów. Wyraźne!

Nawigacja

Gdzie jestem? (3)

Formularze Tabele

Ścieżka okruszków pomaga zorientować się użytkownikowi gdzie się znajduje w obrębie struktury strony.

Dodatkowo, bardzo użytecznym jest zapewnienie dynamicznego podglądu sekcji z danego poziomu kategorii.

Nawigacja

Czego dotyczy nawigacja?

Formularze Tabele

Wyraźne wskazanie obszaru, który „zmieniamy” za pomocą nawigacji

A jak dotrzeć do karty innego pacjenta?

Nawigacja Formularze Tabele

Wygląd wyjaśnia sposób działania

▪ Strzałka w dół sugeruje rozwijaną w dół listę.

▪ Strzałka w bok sugeruje przejście we wskazanym kierunku.

▪ Wygląd zakładkowy nawigacji sugeruje przełączanie się między widokami.

Nawigacja

Wsparcie etykiet ikonami

Formularze Tabele

▪ Ikony zdecydowanie przyspieszają identyfikację poszukiwanej sekcji.

Nawigacja

Używasz ikonek?Nie rezygnuj z etykiet!

Formularze Tabele

▪ Jeżeli stosujesz ikony, nie rezygnuj z podania nazwy kategorii/sekcji. Zwłaszcza, gdy jest projekt wyświetlany jest na dużym ekranie laptopa.

▪ Rezygnacja z używania etykiet może być uzasadniona na ekranach smartfonów, zwłaszcza w przypadku : ✓ aplikacji dla osób swobodnie

poruszających się w środowisku cyfrowym

✓ ikon standardowych, używanych powszechnie.

Nawigacja

Tryby modalne

Formularze Tabele

▪ Informuj wyraźnie, o tym, że użytkownik jest w specjalnej przestrzeni

▪ Daj możliwość szybkiej „ucieczki” ▪ Ukryj wszystkie elementy nawigacji,

których w trybie modalnym się nie wykorzystuje

Nawigacja

Paginacja

Formularze Tabele

1. Gdzie jestem? 2. Jak dużo stron przede mną? 3. Czy mogę od razu przejść do

wybranej?

Nawigacja

Wygodna paginacja

Formularze Tabele

Duże przyciski są zawsze lepsze. Nawet na desktopie

Ostatnia pozycja na liście zastąpiona przyciskiem. W końcu właśnie ten przycisk jest poszukiwany przez użytkowników znajdujących się na końcu listy.

Nawigacja

Ogromna ilość treści i użytkownik.

Formularze Tabele

Jak zapewnić użytkownikowi komfortowe odnalezienie tego, czego szuka?

Reguła trzech kliknięćCo to znaczy?

Nawigacja

Zapominamy o reguleTrzech kliknięć. (1)

Formularze Tabele

Teraz!

Nawigacja

Zapominamy o reguleTrzech kliknięć. (2)

Formularze Tabele

P.S. Wielokrotnie przeprowadzane badania wskazały na brak spadku satysfakcji użytkownika w przypadku ścieżek dotarcia do poszukiwanego elementu/treści na drodze dłuższej niż 3 kliknięcia.

Nawigacja

Ciepło, cieplej, gorąco…Parzy!

Formularze Tabele

Użytkownicy oszacowują mimowolnie prawdopodobieństwo sukcesu dotarcia do poszukiwanej sekcji na podstawie: - Struktury kategorii - Nazw

… i na ich podstawie oceniają, czy obrana ścieżka prowadzi ich do celu.

To tak zwany „Trop informacji”.


Szukamy obroży dla kota.

I nie korzystamy z wyszukiwarki.


1

2


3 4

Nawigacja

Architektura informacji

Formularze Tabele

Prawidłowo zorganizowane i nazwane treści pozwalają na odnalezienie treści przez większość użytkowników z danej grupy docelowej.

Etykieta Etykieta Etykieta

Etykieta Etykieta Etykieta Etykieta Etykieta Etykieta Etykieta Etykieta Etykieta

Nawigacja: dobre praktyki

Co kryje się głębiej?

Możemy sprawić, aby użytkownik wyczuwał trop informacji jeszcze wyraźniej.

Ogólna nazwa kategorii/sekcji może nie wystarczyć dla szybkiego odnalezienia pożądanej treści.

Jeżeli to możliwe, warto przedstawić podkategorie. Użytkownik trafniej będzie mógł ocenić, czy wybiera właściwą sekcję.

Nawigacja

Formularze

Tabele

Nawigacja

Użytkownicy nie znoszą formularzy, ponieważ…

Formularze Tabele

▪ Mają one zbyt wiele pól do wypełnienia ▪ Muszą odpowiadać na pytania, które uważają za niestosowne lub zbędne ▪ Nie rozumieją pytań ▪ Nie znają odpowiedzi na zadawane pytania ▪ Niekiedy tracą wprowadzone już raz dane (np. w trakcie walidacji) ▪ Formularz nie akceptujące preferowanej przez nich odpowiedzi

Nawigacja

Formularze to Twój wróg

Formularze Tabele

Pytaj tylko o to, co jest absolutnie konieczne w danym momencie. Eliminuj pola, które nie są niezbędne i mogą zostać pominięte.

Każde kolejne pole drastycznie obniża satysfakcję z korzystania ze strony.

Nawigacja

Zadbaj o siatkę

Formularze Tabele

Treści ułożone regularnie są lepiej odbierane przez nasz umysł.

Taki formularz wydaje się bardziej przejrzysty oraz przyjaźniejszy (pomimo swoich niedoskonałości).

Nawigacja

Unikaj wielu kolumn

Formularze Tabele

Linia skanowania etykiet jest bardzo nieregularna. Utrudnia to pracę z formularzem.

Nawigacja

Zadbaj o tytuł

Formularze Tabele

Czego dotyczy formularz?

Nawigacja

…a dlaczego Pan pyta?

Formularze Tabele

Wyjaśniaj, dlaczego prosisz o pewne informacje. Chodzi zwłaszcza o dane wrażliwe, jak numery kontaktowe, adres, wiek, płeć…

Wyjaśnienie użytkownikowi po co jest Ci dana informacja zwiększa zaufanie użytkownika do serwisu.

Nawigacja

Sugeruj zawartość pól

Formularze Tabele

To szczególnie ważne w przypadku: ▪ numerów kont bankowych ▪ Adresów ▪ Numerów telefonu

Nawigacja

Wyjaśniaj trudne terminy

Formularze Tabele

Prośba o podanie numeru CVV. Część użytkowników nie wie czym jest ten numer, nie jest pewna gdzie go znaleźć.

Kontekstowo udzielona pomoc pomoże wielu użytkownikom dokończyć wypełnianie formularza.

Nawigacja

Pozwól zobaczyć hasło

Formularze Tabele

Dlaczego ukrywamy hasło? … Czy wpisywaliście kiedykolwiek hasło gdy nikt nie stał za Waszymi plecami?

Nawigacja

Podkreślaj akcje pierwszorzędne (1)

Formularze Tabele

Jaką akcję użytkownik chce zazwyczaj podjąć? Zasugeruj tę opcję jako pożądaną poprzez wyraźny wizualny komunikat.

Nawigacja

Podkreślaj akcje pierwszorzędne (2)

Formularze Tabele

Jaką akcję użytkownik chce zazwyczaj podjąć? Zasugeruj tę opcję jako pożądaną poprzez wyraźny wizualny komunikat.

Nawigacja

Nazywaj akcje wprost

Formularze Tabele

Jeżeli tylko mówisz, postaraj się jak najczytelniej opisać akcję, którą przycisk wykonuje.OK Wyślij

formularz

Dalej Podaj adres wysyłki

Nawigacja

Sensowne ustawienia domyślne

Formularze Tabele

Część treści, którą podaje użytkownik, jest do przewidzenia. Domyślne ustawienia zgodne z oczekiwaniami użytkowników znacznie ułatwią wypełnianie formularzy.

Mogą być to dane pobierane z przeglądarki lub poprzednio podane w systemie.

Nawigacja

Organizacja danych powinna odpowiadać realnym scenariuszom

Formularze Tabele

Sortowanie danych na liście alfabetycznie? Czy może z wewnętrznym podziałem na kategorie?

To zależy od konkretnego przypadku :-)

Nawigacja

Pola wymagane

Formularze Tabele

Pola wymagane lub opcjonalne oznaczamy gwiazdką lub słownie.

Nawigacja

Pola wymagane

Formularze Tabele

1. Oznacz pola wymagane, jeśli większość jest opcjonalna.

2. Oznacz pola opcjonalne, jeśli większość jest wymagana.

3. Najlepiej oznaczać słowem, ale można też gwiazdką.

4. Gwiazdką oznaczaj tylko pola wymagane (nie opcjonalne!)

A jeśli wszystkie pola są wymagane?

Nawigacja

Wszystkie pola wymagane

Formularze Tabele

Wszystkie albo żadne.

Allegro

Mailchimp

Nawigacja

Pola wymagane

Formularze Tabele

Większość pól jest wymagana. Oznaczone powinny być jedynie pola opcjonalne. Ale nie gwiazdką!

Nawigacja

Używaj języka użytkownika (1)

Formularze Tabele

Potraktuj formularz jak rozmowę użytkownika z systemem. Symulacja dialogu podnosi satysfakcję z korzystania z formularza.

Nawigacja


Formularze Tabele

Który formularz jest lepszy?

Nawigacja


Formularze Tabele

Czyli zaznaczyć, czy odznaczyć?

Użytkownik nie wie, czym są akcje witryny. Ja też nie. Także po rozwinięciu listy.

Nawigacja

Zasada bliskości

Formularze Tabele

Elementy związane ze sobą powinny być blisko siebie, aby zostanć zinterpretowane jako związane ze sobą.

W ty przypadku komfort czytania formularza zwiększy się, jeżeli symbole usług płatności byłyby bliżej radio buttona, którym są one wybierane.

Nawigacja

Uprzedzaj pytania (1)

Formularze Tabele

Uprzedzaj pytania, które mogą paść. Jeżeli jakaś akcja jest nietypowa, warto przygotować kontekstowe wyjaśnienie jej działania.

Nawigacja


Formularze Tabele


Nawigacja

Zadbaj o użyteczność podpowiedzi

Formularze Tabele

Niedoskonałości w lokalizacji elementów pomocowych może mocno ograniczyć ich skuteczność.

Nawigacja

Jak wyrównać etykiety?

Formularze Tabele

1. Do lewej? 2. Do prawej? 3. Nad polem?

To zależy ☺

Nawigacja

Wyrównanie prawostronne

Formularze Tabele

Kiedy stosować?

▪ krótkie, zrozumiałe etykiety ▪ mało przestrzeni w pionie, a dużo w

poziomie ▪ nie trzeba skanować etykiet

Zalety:

▪ czytelne połączenie etykiety z polem ▪ szybkość wypełniania

Nawigacja

Wyrównanie lewostronne

Formularze Tabele

Kiedy stosować?

▪ informacje są trudne lub słabo znane ▪ etykiety mają podobny rozmiar ▪ mało przestrzeni w pionie ▪ …a dużo w poziomie

Zalety:

▪ Łatwe skanowanie etykiet

Nawigacja

Etykiety nad polem

Formularze Tabele

Kiedy stosować?

▪ gdy typowe, znane informacje ▪ gdy mało przestrzeni w poziomie, ▪ a dużo w pionie

Zalety:

▪ szybkie wypełnianie i mało fiksacji ▪ elastyczność dla nietypowych pól

Nawigacja

Etykiety i nasz wzrok

Formularze Tabele

1. Nad polami 2. Do prawej 3. Do lewej

12

3

Linia – przejścia wzroku Plama – zatrzymanie wzroku

Nawigacja

Etykiety w polu

Formularze Tabele

▪ Mogą mylić się z wprowadzonymi treściami lub być traktowane jako wartości domyślne.

▪ Znikają w trakcie wprowadzania treści (co utrudnia/uniemożliwia wprowadzanie poprawek)

▪ Utrudniają skanowanie formularza, aby sprawdzić czy wszystkie pola zostały wypełnione

Nawigacja

Jakiego wyrównania użyjesz?

Formularze Tabele

▪ formularz jest długi ▪ wymaga podania wielu

złożonych i prywatnych informacji (użytkownicy mogą ich niechętnie udzielać)

▪ formularz jest długi ▪ etykiety mają bardzo

zróżnicowaną długość

▪ formularz jest krótki ▪ Wymagane informacje są

proste, typowe

Dlaczego?

Nawigacja

Jaka forma wprowadzania danych?

Formularze Tabele

To zależy ☺

Pierwsza opcja

Nawigacja

Checkbox/Radio button

Formularze Tabele

▪ użytkownik powinien wybrać z ograniczonej listy możliwych odpowiedzi

▪ użytkownik powinien najpierw zapoznać się z możliwymi odpowiedziami zanim dokona decyzji

▪ jest duże prawdopodobieństwo literówek i pomyłek przy wprowadzaniu treści „z palca”

▪ jest mało opcji ▪ ważna jest szybkość wyboru opcji (tylko

jedno kliknięcie) .

Nawigacja

Otwarte pole edycyjne

Formularze Tabele

▪ bardziej naturalne jest wprowadzanie treści „z palca”

▪ użytkownicy znają możliwe odpowiedzi, a twórcy formularza - niekoniecznie

▪ znanych, możliwych odpowiedzi jest bardzo dużo (opcja z autopodpowiadaniem)

Pierwsza opcja

Nawigacja

Rozwijana lista

Formularze Tabele

▪ użytkownik powinien wybrać z ograniczonej listy możliwych odpowiedzi

▪ jest duże prawdopodobieństwo literówek i pomyłek przy wprowadzaniu treści „z palca”

▪ jest mało opcji ▪ ważne jest wykorzystanie niewielkiej

jeżeli bardzo często stosowana jest jedna, domyślna opcja

Nawigacja

Różne długości pól formularza

Formularze Tabele

Aby intuicyjnie rozpoznawać, jakiej treści system od nas żąda.

Nawigacja

Dziel i grupuj

Formularze Tabele

Użytkownicy skanują treści, nie wczytują się w nie. Zapoznają się z najpierw z ogólnym zakresem informacji wymaganych. W przypadku wyodrębnienia formularza w czytelne sekcje, staje się on bardziej zrozumiały i łatwiejszy w wypełnieniu.

Nawigacja

Dziel i grupuj (2)

Formularze Tabele

Wyodrębnione sekcje tematyczne czynią formularz bardziej przyjaznym.

Nawigacja

Zbyt wiele podziałów generuje szum informacyjny

Formularze Tabele

Dziele treści jest wskazane, jednak jak zawsze wskazany jest umiar.

Nawigacja

Wyróżniaj kolejne kroki

Formularze Tabele

Użytkownik ma poczucie kontroli nad całością procesu oraz potrafi oszacować, w której jego części jest, oraz ile pozostało mu do końca.

Takie podejścia czyni długie formularze bardziej przyjaznymi.

Nawigacja

Krok po kroku

Formularze Tabele

Potrzebujesz wiele danych od użytkownika? Zbuduj ścieżkę, która w każdym kroku prosi o podanie tylko kilku informacji.

Użytkownik nie zdąży się zniechęcić poprzez wielki formularz, a wypełniając kolejne kroki będzie widział zapełniających się pasek postępu (=sukcesu). Szkoda mu będzie go porzucić.

Nawigacja

Pokazuj dostępne opcje

Formularze Tabele

Jeżeli to możliwe, zrezygnuj z rozwijanych list i zaprezentuj dostępne do wyboru opcje używając np. radio buttonów.

Jeżeli wartości do wyboru mogą być dodatkowo zilustronwane, zrób to.

Nawigacja

Zilustruj, jeśli to pomożeUżytkownikowi zrozumieć

Formularze Tabele

Jeżeli można wyjaśnić użytkownikowi dostępne opcje za pomocą schematu lub grafiki, warto to zrobić.

Nawigacja

Dopasuj automatycznie formularz do treści

Formularze Tabele

Jeżeli konieczność wypełnienia kolejnych pól przez użytkownika jest uzależniona od wcześniejszych wyborów, odpowiednio ukrywaj lub pokazuj te sekcje.

Nawigacja

Zezwalaj na różne formaty

Formularze Tabele

Użytkownik powinien mieć możliwość podania wartości w różnych formatach, a po stronie systemu powinna być ich interpretacja.

Nawigacja

Licz ilość dostępnych znaków

Formularze Tabele

Jeżeli liczba znaków, które użytkownik może wprowadzić w danym polu jest ograniczona oraz istnieje prawdopodobieństwo, że użytkownik z łatwością może przekroczyć ich liczbę, pokazuj liczbę dostępnych znaków.

Nawigacja

Informacja zwrotna

Formularze Tabele

Jeżeli użytkownik nie wypełni prawidłowo pola, poinformuj: 1. jak naprawić błąd. 2. poprzez przyjazne komunikaty - nie

krzycz na użytkownika ☺ 3. w bezpośrednim sąsiedztwie pola, w

którym wystąpił błąd.

Informuj także o sukcesach.

Nawigacja

Podświetlaj edytowane pola

Formularze Tabele

Pomóż użytkownikowi skoncentrować się na wykonywanej czynności.

Nawigacja

A może Mad Libs?

Formularze Tabele

Konwersja zwiększona o 40% www.vast.com

Nawigacja

Wielkość robi wrażenie

Formularze Tabele

Zaskoczni?

Ale wypełnia się naprawdę przyjemnie ☺

Nawigacja

Co to jest za strona?

Formularze Tabele

▪ Brak tytułu = Czy jestem na właściwej stronie?

▪ Brakuje informacji wizualnej o przejściu w tryb modalny = Gdzie w ogóle jestem? Dlaczego zniknęła nawigacja?

▪ Termin „Zdarzenie” jest niejasny (dlaczego nie: przyczyna nieobecności”?)

▪ Brak pojęcia „Praca zdalna”. Pracując zdalnie nie jesteśmy „W biurze”.

▪ Dlaczego „Publikuj”, a nie „Wyświetlaj”? Publikacja w języku użytkownika jest jednorazowa, a tu chodzi o okres czasu.

▪ Tyle miejsca wolnego…a pola, przyciski, literki takie małe?!

Nawigacja

Pozwalaj na używanie tabulatora

Formularze Tabele

Zaawansowani użytkownicy oczekują, że będą mogli go użyć do przejścia między polami formularza.

Nawigacja

Web Form Design: Filling in the Blanks

Formularze Tabele

Luke Wroblewski

Nawigacja

Formularze

Tabele

Nawigacja

Jak zoptymalizować?

Formularze Tabele

Nawigacja

Jaki jest cel?

Formularze Tabele

Jaki jest cel tabeli? Czego użytkownik będzie szukał? Co go będzie w tabeli interesowało?

Odnalezienie celu podpowie nam jak ją opracować/zaprojektować.

Łatwe porównywanie?

Odnajdowanie konkretnej wartości?

Obserwacja tendencji?

Analiza danych w obrębie wiersza?

Nawigacja

Wyraźne tytuły: samej tabeli oraz sekcji

Formularze Tabele

Użytkownicy skanują treści wzrokiem. Szukają słów kluczy. Wyraźne tytuły od razu sugerują treść tabeli, ułatwiając jej czytanie i dotarcie do poszukiwanych elementów.

Nawigacja

Treść w centrum uwagi

Formularze Tabele

Linie o mało intensywnym kontraście pomagają skupić się na treści.

Każdy dodatkowy element (np. tło) to dodatkowe obciążanie funkcji poznawczych umysłu. Nie pozwalajmy konturom konkurować z treścią!

Nawigacja

Granice komórek

Formularze Tabele

▪ Zaznaczaj linie poziome

▪ Nie stosuj tej samej metody do wyróżniania linii poziomych i pionowych

Nawigacja

Nie centruj tekstu w tabelach

Formularze Tabele

Utrudnia to skanowanie tekstu.

Uwaga: liczby centrujemy do prawej (łatwo można zobaczyć rzędy wartości po ilości cyfr)

Nawigacja

Co jest nie tak?

Formularze Tabele

Nawigacja

Więcej światła!

Formularze Tabele

Niskie wiersze znaczenie utrudniają prace z tabelą. Nie żałujmy paddingu (oczywiście wszystko w granicach rozsądku).

Długa tabela? Szukamy kompromisów. Konieczność scrollowania irytuje użytkowników znacznie mniej, niż konieczność wczytywania się w gąszcz podanej ciasno treści.

A może stworzyć sekcje (zwijane)?

Nawigacja

Unikamy „smolistej” czerni

Formularze Tabele

Kolor tekstu powinien być w odcieniach ciemnej szarości, jednak nie przyjmować wartości #000.

Czarny na jasnym tle tworzy zazwyczaj zbyt duże kontrasty. Obciążają pracę naszego umysłu, rozpraszają, męczą wzrok.

Nawigacja

Podświetlanie wierszy

Formularze Tabele

Aby ułatwić czytanie treści wiersza, warto podświetlić go w całości w momencie najechania na niego myszką.

Nawigacja

Lista + Kafle

Formularze Tabele

Dzięki zmianie widoku na układ kaflowy szybciej odnajdziemy nie tylko zdjęcia, ale i pliki tekstowe. Także one mają: ▪ różne formatowanie, ▪ barwy ▪ akapity ▪ ilość tekstu.

Nawigacja

Odróżniaj typy pozycji

Formularze Tabele

Łatwo odróżniamy typy plików od siebie dzięki różnym ikonom, które dodatkowo mają wyraźnie odmienny kolor.

Charakteryzuj dodatkowo, jeżeli projekt tego wymaga. Tu: informacja o współdzieleniu pliku.

Nawigacja

Sortowanie i filtrowanie

Formularze Tabele

Aby jak najszybciej dotrzeć do poszukiwanej treści.

Nawigacja

Pokazuj kryterium sortowania

Formularze Tabele

Wskazuj zawsze wyraźnie kryterium sortowania, które zostało zastosowane.

…choć mogło być wyraźniej.

Nawigacja

Wyszukiwanie

Formularze Tabele

Zawężaj listę wyników na bieżąco, aby użytkownik otrzymywał informację, czy ma w dany sposób szansę na dotarcie do poszukiwanej treści.

Wyszukiwanie może odbywać się w obrębie kolumn.

Nawigacja

Liczba wierszy na stronie oraz paginacja

Formularze Tabele

Jeżeli decydujemy się na ograniczenie wyświetlanej liczby wierszy, pozwólmy swobodnie nawigować między podstronami.

Nawigacja

Mega-Paginacja

Formularze Tabele

Niekiedy ilość podstron jest naprawdę imponująca.

Nawigacja

Postaw na symbole, gdy wartości to O albo 1

Formularze Tabele

Ułatwia to analizę treści w tabeli.

Nawigacja

Edycja danych w obrębie wiersza

Formularze Tabele

Zapewnij wyraźny przycisk służący do edycji.

Akcje możesz wyświetlać po najechaniu myszką. Uwaga: na ekranach dotykowych nie ma stanu HOVER.

Nawigacja

Masowa edycja danych

Formularze Tabele

Po zaznaczeniu masowej edycji, wyświetl przyciski potrzebne w tym kontekście

Informuj ile jest zaznaczonych wierszy.

Zapewnij oczywiste dla użytkownika zakończenia trybu masowej edycji.

Nawigacja

Dużo wierszy?

Formularze Tabele

a. Pogrupuj je w zwijane/rozwijane sekcje, zgodnie z ich zawartością.

b. Zastosuj zakładki

Nawigacja

Dużo kolumn? (1)

Formularze Tabele

Pokazuj kilka wartości w jednej komórce, sensownie zgrupowanych.

Nawigacja

Dużo kolumn? (2)

Formularze Tabele

Część wartości może być ukrytych, dostępnych po rozwinięciu.

Nawigacja

Dużo kolumn? (3)

Formularze Tabele

Część wartości może być ukrytych, dostępnych po rozwinięciu – na przykład na warstwie.

Nawigacja

Dużo kolumn? (4)

Formularze Tabele

Wiersze zamień na kolumny.

Nawigacja

Dużo kolumn? (5)

Formularze Tabele

Ukryj domyślnie te, z których użytkownicy korzystają najrzadziej. Daj szansę na dostosowanie tabeli do własnych potrzeb użytkowników.

Nawigacja

Mały ekran (1)

Formularze Tabele

Zakotwiczenie kolumny – tej, która zawiera główną daną charakterystyczna/różnicującą treści

Nawigacja

Mały ekran (2)

Formularze Tabele

Zmiana sposobu prezentacji danych – na mniejszych ekranach łatwiej czytać zależności na wykresie.

Nawigacja

Mały ekran (3)

Formularze Tabele

Rezygnacja z prezentacji części danych jako rzędu w kolumnie – grupowanie danych w znaczące zbiory.

Nawigacja

Mały ekran (4)

Formularze Tabele

Zmiana rozmiaru kolumn

Nawigacja

Mały ekran (5)

Formularze Tabele

Reorganizacja sposobu prezentacji treści.

Nawigacja

Mały ekran (6)

Formularze Tabele

Ukrycie części kolumn: Użytkownik samodzielnie wybiera kolumny, które zobaczy.

Ważne są oczywiście sensowne domyślne ustawienia.

Kto zadaje pytania, ten tworzy lepsze projekty ☺

Anna Sorbian Projektant UX

Szkolenie UX: nawigacja, formularze, tabele

Design

Transcript of Szkolenie UX: nawigacja, formularze, tabele