O czym pamiętać projektując nawigację? Jak zaprojektować użyteczny formularz? Jak stworzyć tabelę przyjazną użytkownikowi?

1. Nawigacja
Formularze
Tabele
Anna Sorbian
Projektant UX
Szkolenie UX cz.II

2. Nie ma rozwiązań idealnych.

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

4. Projektowanie to szukanie kompromisów.

5. Duże i czytelne zdjęcia vs. Dużo pozycji na jednej stronie
Spójność vs. Podkreślenie odrębności obszaru

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

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

8. 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!

9. Dobre praktyki

10. Nawigacja
Formularze
Tabele

11. 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

12. 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ść

13. 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)

14. Nawigacja
Wyszukiwarka
Formularze Tabele
▪ Nigdy nie może jej zabraknąć.
▪ Musi być dostępna z każdego miejsca
w serwisie.

15. 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

16. Nawigacja
Gdzie jestem? (1)
Formularze Tabele
1. stopień
2. stopień
3. stopień

17. Nawigacja
Gdzie jestem? (2)
Formularze Tabele
Podświetlanie wybieranych elementów.
Wyraźne!

18. 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.

19. Nawigacja
Czego dotyczy nawigacja?
Formularze Tabele
Wyraźne wskazanie obszaru, który
„zmieniamy” za pomocą nawigacji
A jak dotrzeć do karty innego pacjenta?

20. 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.

21. Nawigacja
Wsparcie etykiet ikonami
Formularze Tabele
▪ Ikony zdecydowanie przyspieszają
identyfikację poszukiwanej sekcji.

22. 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.

23. 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

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

25. 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.

26. 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?

27. Nawigacja
Zapominamy o regule
Trzech kliknięć. (1)
Formularze Tabele
Teraz!

28. Nawigacja
Zapominamy o regule
Trzech 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.

29. 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”.

30. Nawigacja Formularze Tabele
Szukamy obroży dla kota.
I nie korzystamy z wyszukiwarki.

31. Nawigacja Formularze Tabele
1
2

32. Nawigacja Formularze Tabele
3
4

33. 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 EtykietaEtykieta Etykieta EtykietaEtykieta Etykieta EtykietaEtykieta

34. 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ę.

35. Nawigacja
Formularze
Tabele

36. 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

37. Nawigacja
Formularze toTwó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.

38. 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).

39. Nawigacja
Unikaj wielu kolumn
Formularze Tabele
Linia skanowania etykiet jest bardzo
nieregularna. Utrudnia to pracę z
formularzem.

40. Nawigacja
Zadbaj o tytuł
Formularze Tabele
Czego dotyczy formularz?

41. 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.

42. Nawigacja
Sugeruj zawartość pól
Formularze Tabele
To szczególnie ważne w przypadku:
▪ numerów kont bankowych
▪ Adresów
▪ Numerów telefonu

43. 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.

44. 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?

45. 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.

46. 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.

47. 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

48. 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.

49. 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 :-)

50. Nawigacja
Pola wymagane
Formularze Tabele
Pola wymagane lub opcjonalne
oznaczamy gwiazdką lub słownie.

51. 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?

52. Nawigacja
Wszystkie pola wymagane
Formularze Tabele
Wszystkie albo żadne.
Allegro
Mailchimp

53. Nawigacja
Pola wymagane
Formularze Tabele
Większość pól jest wymagana.
Oznaczone powinny być jedynie pola
opcjonalne.
Ale nie gwiazdką!

54. 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.

55. Nawigacja
Używaj języka użytkownika (2)
Formularze Tabele
Który formularz jest lepszy?

56. Nawigacja
Używaj języka użytkownika (3)
Formularze Tabele
Czyli zaznaczyć, czy odznaczyć?
Użytkownik nie wie, czym są akcje
witryny.
Ja też nie. Także po rozwinięciu listy.

57. 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.

58. 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.

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

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

61. Nawigacja
Zadbaj o użyteczność
podpowiedzi
Formularze Tabele
Niedoskonałości w lokalizacji elementów
pomocowych może mocno ograniczyć
ich skuteczność.

62. Nawigacja
Jak wyrównać etykiety?
Formularze Tabele
1. Do lewej?
2. Do prawej?
3. Nad polem?
To zależy ☺

63. 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

64. 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

65. 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

66. Nawigacja
Etykiety i nasz wzrok
Formularze Tabele
1. Nad polami
2. Do prawej
3. Do lewej
1
2
3
Linia – przejścia wzroku
Plama – zatrzymanie wzroku

67. 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

68. 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?

69. Nawigacja
Jaka forma wprowadzania danych?
Formularze Tabele
To zależy ☺
Pierwsza opcja

70. 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)
.

71. 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

72. 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

73. Nawigacja
Różne długości pól formularza
Formularze Tabele
Aby intuicyjnie rozpoznawać, jakiej treści
system od nas żąda.

74. 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.

75. Nawigacja
Dziel i grupuj (2)
Formularze Tabele
Wyodrębnione sekcje tematyczne czynią
formularz bardziej przyjaznym.

76. Nawigacja
Zbyt wiele podziałów generuje
szum informacyjny
Formularze Tabele
Dziele treści jest wskazane, jednak jak
zawsze wskazany jest umiar.

77. 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.

78. 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ć.

79. 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.

80. Nawigacja
Zilustruj, jeśli to pomoże
Użytkownikowi zrozumieć
Formularze Tabele
Jeżeli można wyjaśnić użytkownikowi
dostępne opcje za pomocą schematu lub
grafiki, warto to zrobić.

81. 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.

82. 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.

83. 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.

84. 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.

85. Nawigacja
Podświetlaj edytowane pola
Formularze Tabele
Pomóż użytkownikowi skoncentrować się
na wykonywanej czynności.

86. Nawigacja
A może Mad Libs?
Formularze Tabele
Konwersja zwiększona o 40%
www.vast.com

87. Nawigacja
Wielkość robi wrażenie
Formularze Tabele
Zaskoczni?
Ale wypełnia się naprawdę przyjemnie ☺

88. 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?!

89. 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.

90. Nawigacja
Web Form Design: Filling
in the Blanks
Formularze Tabele
Luke Wroblewski

91. Nawigacja
Formularze
Tabele

92. Nawigacja
Jak zoptymalizować?
Formularze Tabele

93. 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?

94. 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.

95. 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ą!

96. Nawigacja
Granice komórek
Formularze Tabele
▪ Zaznaczaj linie poziome
▪ Nie stosuj tej samej metody do
wyróżniania linii poziomych i
pionowych

97. 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)

98. Nawigacja
Co jest nie tak?
Formularze Tabele

99. 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)?

100. 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.

101. 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ą.

102. 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.

103. 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.

104. Nawigacja
Sortowanie i filtrowanie
Formularze Tabele
Aby jak najszybciej dotrzeć do
poszukiwanej treści.

105. Nawigacja
Pokazuj kryterium sortowania
Formularze Tabele
Wskazuj zawsze wyraźnie kryterium
sortowania, które zostało zastosowane.
…choć mogło być wyraźniej.

106. 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.

107. 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.

108. Nawigacja
Mega-Paginacja
Formularze Tabele
Niekiedy ilość podstron jest naprawdę
imponująca.

109. Nawigacja
Postaw na symbole, gdy wartości
to O albo 1
Formularze Tabele
Ułatwia to analizę treści w tabeli.

110. 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.

111. 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.

112. Nawigacja
Dużo wierszy?
Formularze Tabele
a. Pogrupuj je w zwijane/rozwijane
sekcje, zgodnie z ich zawartością.
b. Zastosuj zakładki

113. Nawigacja
Dużo kolumn? (1)
Formularze Tabele
Pokazuj kilka wartości w jednej komórce,
sensownie zgrupowanych.

114. Nawigacja
Dużo kolumn? (2)
Formularze Tabele
Część wartości może być ukrytych,
dostępnych po rozwinięciu.

115. Nawigacja
Dużo kolumn? (3)
Formularze Tabele
Część wartości może być ukrytych,
dostępnych po rozwinięciu – na przykład
na warstwie.

116. Nawigacja
Dużo kolumn? (4)
Formularze Tabele
Wiersze zamień na kolumny.

117. 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.

118. Nawigacja
Mały ekran (1)
Formularze Tabele
Zakotwiczenie kolumny –
tej, która zawiera główną daną
charakterystyczna/różnicującą treści

119. Nawigacja
Mały ekran (2)
Formularze Tabele
Zmiana sposobu prezentacji danych –
na mniejszych ekranach łatwiej czytać
zależności na wykresie.

120. Nawigacja
Mały ekran (3)
Formularze Tabele
Rezygnacja z prezentacji części
danych jako rzędu w kolumnie –
grupowanie danych w znaczące
zbiory.

121. Nawigacja
Mały ekran (4)
Formularze Tabele
Zmiana rozmiaru kolumn

122. Nawigacja
Mały ekran (5)
Formularze Tabele
Reorganizacja sposobu prezentacji treści.

123. 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.

124. Kto zadaje pytania, ten tworzy lepsze projekty ☺
Anna Sorbian
Projektant UX