Zasady rządzą światem, czyli jak UI wpływa na użytkownika

Każdy użytkownik ma swoje ulubione strony, z których czerpie informacje o świecie, trendach, lub zamawia jakieś produkty. Pytając swoich znajomych, dlaczego wybierają konkretnie tą stronę często słyszymy „Łatwiej mi wszystko na niej znaleźć” lub że po prostu jest ładniejsza od innych tego typu stron. Weźmy na przykład pod uwagę strony, z których możemy zamówić jedzenie on-line - proponują one te same restauracje jednak z jakiegoś powodu częściej wybieramy tą lepiej wyglądającą wizualnie. Dlaczego tak się dzieje? Odpowiedź jest prosta osoby, które ją zaprojektowały przestrzegają ZASAD, dzięki którym manipulują ludźmi, hipnotyzują ich swoim produktem. W tym artykule chciałabym zająć się tymi zasadami i w prosty sposób wytłumaczyć każdą z nich.

FORMA NIE PODĄŻA ZA FUNKCJĄ

Musza ze sobą współdziałać. Inaczej ludzie nie zrozumieją ich działania. Kształt ma się zgadzać z tym, jaka funkcje ma pełnić np. do przycisku nie użyjemy randomowego kształtu z Internetu. Forma musi być przejrzysta, aby była lepiej odebrana przez użytkowników. Zbyt duża ilość funkcji może doprowadzić do tego, że odbiorca będzie skołowany. Warto również pamiętać o RWD, czyli o responsywności Twojej strony. Czy aby na pewno wszystkie funkcje na stronie odpalonej w przeglądarce muszą być widoczne od razu na urządzeniu mobilnym?

BALANS

Stworzenie wizualnego porządku sprawi, że użytkownikowi, który odwiedzi naszą stronę będzie o wiele łatwiej się po niej poruszać. Musimy znaleźć ten „złoty środek”, czyli punkt, w którym osoba nie będzie przytłoczona ilością funkcji na stronie, a jednocześnie nie będzie miała problemu z odnalezieniem informacji, dla której tu jest. Weźmy pod lupę stronę odzieżową, pierwsze, co chce zobaczyć to to jak dany produkt wygląda, ile kosztuje, a nie długi opis produktu.

Zbalansowanie Layoutu

Chodzi o to, aby tak zaaranżować elementy na stronie i jej przestrzeń negatywną żeby ze sobą współgrały, nie przyćmiewały się nawzajem, no chyba, że jest to zabieg celowy. Zadaniem balansu jest upewnienie się, że wszystko do siebie pasuje. Wspomniane we wcześniejszym punkcie współpracowanie formy z funkcją nie zostałoby osiągnięte bez balansu, jest to w dużej mierze jego zasługa. Nie ma być konkurowania ze sobą elementów w designie a tak się dzieje jak nie wprowadzimy balansu na stronie. Jeśli indywidualne elementy skupia na sobie za dużo uwagi nie widzimy, co tak na prawdę tworzą, dlaczego zostały stworzone i co sobą reprezentują – wystąpi chaos komunikacyjny ( skupianie się na drzewach a nie na lesie)

Gdy przyjrzymy się layoutowi na tej stronie widzimy ze rozmiary i szerokości pomiędzy elementami są inne. Użytkownik w takim wypadku patrzy na ciemniejsze kształty zamiast zobaczyć, co tak na prawdę tworzą razem. Widzi tutaj 4 oddzielne elementy. A teraz sprawdźmy jak będą wyglądały, jako uporządkowane i zbalansowane.

Wyrównaliśmy tu szerokość negatywnej przestrzeni pomiędzy elementami. Widać teraz ze pomiędzy poszczególnymi sekcjami zachodzą relacje. Użytkownik teraz z łatwością będzie poruszał się po takiej stronie. Taka zmiana sprawia, że zamiast czterech elementów widzimy jeden, spójny.

RYTM

Raz, dwa, trzy i raz, dwa, trzy. Każda piosenka ma rytm, my też żyjemy zgodnie z jakimś rytmem mycie zębów, poranna kawa, spacer z psem. Na stronie rytm pojawia się wtedy, gdy jesteśmy w stanie przewidzieć interwały pomiędzy elementami. Może to się objawiać tym, że mają one podobny kształt, długość i wielkość. Osoba, która ją odwiedza właśnie poprzez ten wizualny rytm jest w stanie szybciej wywnioskować, czym są te elementu i zrozumieć, co one tak naprawdę robią. Najlepiej będzie to zobrazować na przykładzie - zrobiłam zrzut ekranu tweeter’a UX Drinking Game.

Pomijając fakt, że muszę naładować telefon, widać tutaj wyraźnie powtarzalność.

Każdy tweet wygląda tak samo: zdjęcie, nazwa, opis, ikony. Tak samo jest w layoucie na stronie, poszczególne elementy są ze sobą spokrewnione, komunikują się między sobą, mają te same funkcje. Jak możemy odnaleźć na stronie taki rytm? Takie elementy będą miały głównie taki sam kształt i rozmiar. Przestrzeń pomiędzy nimi będzie taka sama. Przykładowo przyjrzyjmy się nagłówkowi strony Wirtualnej Polski.

Automatycznie jesteśmy w stanie zauważyć, że z lewej strony mamy pogodę składającą się z obrazka, ilości stopni i miasta wraz z innymi informacjami. Z prawej strony: poczta, wp pilot, program tv i serwisy to powiązane elementy.

HARMONIA

Wyobrażasz sobie książkę, którą czytasz od prawej do lewej strony? 

.ewtał eikat ot tsej eiN

W harmonii chodzi właśnie o tą kierunkowość. Wszystko jest zaprojektowane tak, żebyś przeglądanie strony zaczął od góry z lewej strony i wzrokiem podążał w prawo, po czym obniżasz wzrok i znowu zaczynasz od lewej. Każdy element na stronie powinien mieć swój cel, najczęściej w górnym lewym rogu znajduje się logo i potem prowadząc wzrok do prawej strony widzimy różne ikony. Twój umysł sam z siebie chce zauważyć to połączenie elementów na stronie. Jeśli sam projektujesz harmonicznie stronę zauważ, że przychodzi to w taki sam naturalny sposób, bo jest on zgodny z naturalnymi umiejętnościami Twojego mózgu. Weźmy pod lupę stronę Udemy, która proponuje kursy on-line z wybranej dziedziny.

Samoczynnie pierwsze, na co patrzysz to logo i poruszasz się w prawą stronę. Podobnie jest rząd niżej gdzie znajduje się nawigacja elementy w tej sekcji mają podobne kształty, rozmiar i są rozmieszczone równomiernie. Poniżej gdzie znajdują się poszczególne kursy zastosowano podobne zasady. Dodatkowo każda linia z ofertami po prawej stronie posiada ikonę strzałki, która jasno sugeruje możliwość rozszerzenia danego zasobu. Widząc to zanim przejdziemy do kolejnej linii przejrzymy tą zawartość. Według mnie przez to jak stworzona jest ta strona większa ilość osób nawet po znalezieniu swojego kursu nie opuści jej tylko wróci właśnie na tak zharmonizowaną stronę i przejrzy wiele innych ofert. Jak to mówią diabeł tkwi w szczegółach. Nawet w polu wyszukiwania mamy do czynienia z harmonią.

Gdy widzimy takie pole początkowo zauważamy miejsce do wpisania kluczowych słów, które chcemy wyszukać, ale zaraz po tym poprzez kontrast tła, na którym znajduje się ikona lupy wzrok porusza się do prawej strony. Harmonia to spójność interwałów wizualnych, czyli patrząc na sekcje strony zauważamy echo. Może się objawiać taką samą odległością pomiędzy elementami, podobny kształt, albo też identycznym kolorem na początku i końcu. Harmonie najlepiej podsumować trzema słowami: balans, rytm, powtarzalność. Przejrzyj teraz kilka stron i postaraj się odnaleźć ten wzór, który sprawia, że dana część strony jest spójna.

UŻYTKOWNIK PONAD WSZYSTKO

Ostatnia i najważniejszą zasadą jest postrzeganie użytkownika, jako najważniejszej osoby. Dla mnie nie jest to jakby oddzielna zasada tylko podsumowanie tego, co napisałam powyżej. To, co robisz - robisz dla nich. Dla osób, które mają wchodzić na Twoją stronę i pozostać na niej jak najdłużej. Podstawą jest zrozumienie odbiorcy i jego potrzeb. I nie, nie chodzi tu teraz o to żebyś przejrzał stosy stron, które już odniosły sukces w sieci w ramach inspiracji. To nie rozwiąże Twoich problemów, musisz poznać klienta. Jeżeli Twoja strona jest o bajkach dla małych dzieci, nie będziesz wybierał kolorystyki jak z horroru, a jeśli za cel postawisz sobie, że malec będzie mógł sam puścić sobie jakąś bajkę to nie dodasz zbyt wielu niepotrzebnych funkcji. A jeśli strona, którą tworzysz to portfolio skup się na pracodawcach, pokaż na swojej stronie, że umiesz wykorzystać technologie, o których piszesz. No i mam nadzieje, że przy okazji będziesz przestrzegał opisanych przeze mnie zasad.

Powodzenia!

Jeśli masz jakieś pytania, wątpliwości lub chcesz podzielić się swoją wiedzą z danego tematu - czekam na Twoją wiadomość w komentarzu :)