Dwa przyciski obok siebie - zneutralizuj mniej ważny

Często na stronie występują dwa przyciski obok siebie: “Potwierdzający” oraz „Anuluj”. Przycisk “Anuluj” nigdy nie powinien mieć podobnego koloru i wyglądać jak przycisk potwierdzający. Najlepiej nie wypełniać go kolorem. Kolorowy przycisk „Anuluj” wysyła niewłaściwe sygnały i można go łatwo pomylić z przyciskiem potwierdzającym.

Stosuj mocne czasowniki

W komunikatach na przyciskach pisz jasno i stosuj mocne czasowniki oznaczające działania, które mówią, co się stanie po wykonaniu akcji. Nie zostawiaj niczego do interpretacji. Użytkownik musi być pewien, jaki będzie następny krok po kliknięciu.

"Otwórz”

“Uruchom aplikację”

“Znajdź lot”

“Szukaj”

“Zarezerwuj stolik”

“Rezerwacja”

“Pobierz raport”

“Pobierz”

W formularzach nie duplikuj pól wypełnienia

Bardzo często na stronach spotkasz się z polami, które trzeba wypełniać dwa razy. Taka sytuacja może mieć miejsce w przypadku pola „hasło” i powtórz hasło. Tego typu praktyka ma zapobiegać wpisaniu złego hasła podczas rejestracji. Jednak, dla użytkownika, sytuacja wielokrotnego wpisywania hasła jest irytująca i zabiera mu jego cenny czas. Zrezygnuj z drugiego pola i zamiast niego dodaj ikonę, która umożliwia szybki podgląd hasła.

Autofokus na pierwszym polu formularza

Automatyczne ustawianie ostrości na pierwszym polu wejściowym w formularzu.

Jest to możliwe tylko na komputerach stacjonarnych. Oszczędza czas i wysiłek związany z klikaniem pola wprowadzania. Im mniej kliknięć na stronie musi wykonać użytkownik, tym lepiej. Zaznacz automatycznie pierwsze pole wejściowe.

Zasada symetrii - zasada Gestalt’a

Nasz umysł postrzega obiekty symetryczne jako części tej samej grupy. Tworzą one wrażenie stabilności i porządku. Elementy interfejsu, które są ułożone symetryczne względem siebie, pomagają skanować zawartość i rozpoznawać wzorce. Symetria pozwala użytkownikom skupić się na tym, co najważniejsze. Dlatego w swoich interfejsach zachowaj rytm elementów.

Kolorowy pasek

Czasem subtelna zmiana pozwoli znacząco podnieść kontrast i wyróżnić wybrany element projektu.

Wyróżnij słowo w nagłówku

Wyróżnienie jednego słowa w nagłówku np. innym kolorem, to świetny sposób na jego urozmaicenie.

Nie bój się pisać krótko

Ludzie bardzo często boją się pisać krótko i prosto. Być może nie chcą być posądzeni o ubogie słownictwo i brak profesjonalizmu. Jakoś dziwnie przyjęło się, że im bardziej zawiłe słownictwo, tym pisała to osoba z dużą wiedzą. (patrz pisma urzędowe, prawnicze regulaminy, klauzule bankowe). Wszystkie tego typu pisma można by napisać o wiele przystępniej i krócej.

Tymczasem krótkie teksty w internecie działają najlepiej. Przeczytaj swój nagłówek i pomyśl, czy wszystkie słowa są w nim potrzebne?

Slack pozwoli Ci pracować zespołowo i zwiększy Twoją wydajność.

Pracuj zespołowo. Zwiększ wydajność.

Szary tekst na kolorowym tle

Na kolorowym tle, czysto szary, czarny lub biały tekst będzie wyglądał na „wyłączony”. Dlatego warto nasycić tekst odrobiną koloru z tła. W tym celu możesz zmniejszyć krycie tekstu na 75%.

Zamiast powiększać, użyj kontrastu

Nie polegaj tylko na rozmiarze elementów, żeby kontrolować hierarchię. Może

doprowadzić do zbyt dużych treści. Do dyspozycji masz np. grubsze fonty oraz kolor.

Dodatkowo, zamiast coś uwydatniać, spróbuj zmniejszyć kontrast mniej ważnych elementów.

Ustalanie hierarchii w oparciu tylko o rozmiar, może doprowadzić do niezbyt ładnego wizualnie interfejsu. Dodatkowo może przyczynić się do sytuacji, że w danym elemencie zabraknie Ci miejsca na wpisanie tekstu.

Podsumowanie

Jak widzisz, wszystkie elementy bez problemu samodzielnie wdrożysz do swojego projektu. Jeśli interesuje Cię tematyka poprawy strony pod kątem użyteczności oraz wyglądu zapoznaj się z platformą przeprojektowani.pl, na której znajdziesz

Aurtykuł został stworzony przez portal edugrafia

10 porad na poprawę UX
na stronie

16 grudnia 2021

Dziś pokażę Ci 10 porad, które wpłyną na lepsze UX Twojej strony, a dodatkowo są bardzo łatwo do wdrożenia.