Mity w web designie

mity w projektowaniu stron

Po sieci krąży sporo urban legends. Nawet takich dotyczących projektowania stron. Rośnie ilość marketingowych stron i blogów, które bawiąc się w przeklejki i nieudolne tłumaczenia, karmią czytelników różnymi rewelacjami. A potem czytam porady specjalistów, że kroje szeryfowe to są dobre do druku, a teksty na blogach to najlepiej bezszeryfowymi, bo są lepiej czytelne. Albo, że wszystkie ważne rzeczy powinny znaleźć się na górze strony, bo użytkownicy nie scrollują stron.

I powtarza się różne teorie i zasady, które prędzej czy później dotrą do początkujących projektantów. Albo boksujemy się z klientem, bo twierdzi, że „czytał artykuł na ten temat” i tak właśnie mamy zrobić. Dziś o kilku takich teoriach i o tym, dlaczego uważam je za mity.

Standardowo, jak co poniedziałek, na kanale znajdziecie filmik na ten temat.

Im większy wybór dla użytkownika, tym lepiej

Fajnie mieć wybór. Chcemy mieć wybór, nie chcemy by cokolwiek nam narzucano. Sensownym byłoby więc założenie, że im większy wybór będziemy mieć, tym lepiej dla nas, jako użytkowników. Więcej produktów, więcej opcji kolorystycznych, więcej wariantów, kategorii, filtrów. Czy to prawda?

decyzyjnosc na stronach

No cóż. Choć pozornie chcielibyśmy go mieć, w praktyce zbyt duży wybór nas paraliżuje. Prowadzono wiele badań, które udowodniły, że w zetknięciu ze zbyt dużą ilością opcji nie jesteśmy w stanie podejmować decyzji. A nawet jeśli je podejmujemy, jesteśmy trochę mniej szczęśliwi z podjętych wyborów (jest bowiem zbyt duże ryzyko, że wybraliśmy jednak źle i ominęła nas lepsza okazja). Jeżeli jesteście zainteresowani tym tematem bardziej polecam Wam świetną książkę The Paradox of choice (Barry Schwartz), która jest przeglądam przeróżnych badań i eksperymentów dotyczących właśnie teorii związanych z wybieraniem.

Jak to się ma jednak do stron internetowych? Zwróćcie uwagę przy projektowaniu na ilość elementów nawigacji, ikon, filtrów czy wyświetlanych produktów na stronie.

Do poczytania:

Smart defaults (jak ułatwić wypełnianie formularzy)
https://www.lukew.com/ff/entry.asp?691

O prawie Hicksa
http://52weeksofux.com/post/584164393/control

TED Talk: Paradox of choice
https://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice

Mobile first

Jeszcze kilka lat temu, bardzo często słyszało się tę frazę. Wszyscy krzyczeli, że projektowanie strony należy rozpocząć od projektu na najmniejsze urządzenie, które będzie wspierane (czyli najczęściej smartfona). Projektanci mieli zaczynać dizajn od zaprojektowania mobilnej wersji (od smartfona przez tablet), by skończyć na dekstopie. Czy ta zasada ma sens?

mobile first w projektowaniu

Nie ma i już Wam tłumaczę dlaczego…

Założenie mobile first jest generalnie całkiem dobre. W świecie, gdzie smartfony stały się przedłużeniem naszej ręki, musimy myśleć o użytkownikach mobilnych naszych stron. Robimy przelewy, kupujemy produkty, czytamy wpisy na blogach, oglądamy filmiki, rezerwujemy hotele czy wizytę u lekarza. Smartfony są ważnym punktem styku w przypadku wielu produktów i usług. Mam jednak wrażenie, że niektórzy projektanci zrozumieli je trochę na opak.

Zakładanie, że projekt zawsze powinno zaczynać się od najmniejszej rozdzielczości i dopiero zabieramy się za następne, jest po prostu głupie. Głupie, bo smartfon nie zawsze będzie urządzeniem, z którego korzysta najwięcej osób (tu dużo zależy od kontekstu użycia, od grupy docelowej, od samego produktu i usługi), a po drugie – z punktu widzenia już samego projektu graficznego, interfejsu, kompozycji treści, może być ograniczające. Dużo wygodniej bowiem stworzyć wersję pośrednią i zaprojektować do niej wersję mobilną (lub wersję na naprawdę duże monitory), niż na odwrót.

Niezależnie od tego, od czego się zaczyna projektowanie, wszystkie punkty styku powinny być dobrze dopracowane. Nie ucinajmy funkcji na tej czy innej rozdzielczości – nie bądźmy mobile czy desktop first – bądźmy user first. A to, czy zaczniemy od projektu mobilnego, na giga rozdzielczości, czy od samych ikonek, nie ma specjalnie większego znaczenia.

mity w projektowaniu

Zasada trzech kliknięć

To chyba jedna z najczęściej pojawiających się teorii w kontekście projektowania stron internetowych – zasada trzech kliknięć polega na takim zaprojektowaniu strony, by użytkownik dotarł do poszukiwanych treści w najdalej trzech kliknięciach (na przykład wchodzę na stronę, klikam w zakładkę Blog, scrolluję by znaleźć konkretny wpis i przechodzę do tego wpisu, mogąc przeczytać go w całości). Jeżeli użytkownik nie dotrze do poszukiwanych przez siebie informacji w trzech klikach, prawdopodobnie opuści stronę! Brzmi ciekawie, nie? Tylko, że to nie ma sensu.

Zasada zakłada, że użytkownicy są zbyt leniwi i szybko się poddają, gdy nie mogą czegoś znaleźć. To jest w sumie dobre założenie, ale okazuje się, że wcale nie przekłada się na wspomniane trzy kliknięcia. A przynajmniej dopóki czujemy, że to całe klikanie prowadzi nas w odpowiednie miejsce. Według badań jednak, okazało się, że użytkownicy wcale nie czują się tak sfrustrowani po więcej niż 3 kliknięciach żeby opuszczać stronę. Nie liczy się bowiem ich ilość, a bardziej jakość.

Dlatego aby zadbać o jakość pilnujmy odpowiedniego nazewnictwa i grupowania informacji wewnątrz serwisu. Użytkownik powinien czuć, że każde kolejne kliknięcie zbliża go do osiągnięcia celu (znalezienia informacji, zakupu produktu itd.). I wtedy nie ma znaczenia czy kliknięć będzie 15 czy 3.

Do poczytania:

Testing the Three-Click Rule
https://articles.uie.com/three_click_rule/
Stop counting clicks
http://www.uxbooth.com/articles/stop-counting-clicks/

strona glowna nie jest najwazniejsza

Strona główna jest najważniejszą stroną w serwisie

Z jakiegoś powodu wciąż jako projektanci spędzamy masę czasu na projekcie strony głównej, często zaniedbując inne podstrony. I faktycznie, kiedyś rola strony głównej była nie do przecenienia. Otwieraliśmy przeglądarki, wpisywaliśmy adres strony i szukaliśmy konkretnych treści. Sęk w tym, że sposób w jaki przeglądamy sieć i wyszukujemy treści trochę się zmienił. A co za tym idzie, dużo rzadziej trafiamy na strony główne.

Korzystamy z wyszukiwarek, linków w portalach społecznościowych, linków, które wysyłają nam znajomi. Z reguły dotyczą konkretnego fragmentu strony jak produktu czy wpisu na dany temat. Tak trafiamy po raz pierwszy na stronę i to, czy przejdziemy do strony głównej, zależy w sumie od nas. Możemy więc nie zobaczyć wybajerzonego slidera, dużej fotki autora strony i boksów z „dlaczego warto skorzystać z…”. Dlatego musimy pamiętać, by nie zaniedbywać podstron i poświęcać im tak samo wiele uwagi jak stronie głównej. Bo ostatecznie może okazać się, że na stronę główną użytkownik w ogóle nie trafi.

Do poczytania:

(posłuchania) – podcast Home page design
https://uie.fm/shows/usability-tools/home-page-design

5 homepage myths
https://www.dtelepathy.com/blog/design/5-homepage-myths

scrollowanie i above the fold

Ludzie nie scrollują

Myślę, że każdy z Was słyszał o tym, że najważniejsze elementy strony powinny się znaleźć w tak zwanym „above the fold”, czyli nad miejscem, w którym zaczyna się przewijanie strony. Rzekomo dlatego, ponieważ użytkownicy nie scrollują i prawdopodobnie nie dotrą do tych informacji, które znajdują się niżej…

Sęk w tym, że nasze przyzwyczajenia się zmieniają. Zwróćcie zresztą uwagę jak sami korzystacie z Facebooka czy Twittera, a nawet szukając czegoś w Google. Wiele serwisów opiera się teraz na scrollowaniu i jest to dla nas dość naturalne, że scrollując przeglądamy różne treści. Oczywiście wciąż nie oznacza to, że użytkownik będzie zawsze wiedział co znajdzie po zescrollowaniu i może zdarzyć się tak, że wygląd strony zasugeruje, że niżej nic już się nie znajduje. Niemniej jednak zależy to głównie od samego projektu i sprytnego pokierowania wzroku użytkownika do elementów, na których nam zależy.

Więcej o scrollowaniu:

Unfolding the insights into webpage scroll
https://www.clicktale.com/resources/blog/unfolding-the-fold-insights-into-webpage-scroll/

Scrolling research report
https://www.clicktale.com/resources/blog/clicktale-scrolling-research-report-v20-part-1-visibility-and-scroll-reach/

Life below 600px
http://www.iampaddy.com/lifebelow600/

As the page scrolls
https://articles.uie.com/page_scrolling/

eyetracking badania

Nasz wzrok zawsze podąża w ten sam sposób

Dość często widziałam argumentowanie umieszczaniem pewnych elementów w projekcie… ruchem gałek ocznych. Te założenia opierano podejrzewam, na wizualizacji badan eyetrackingowych albo nie wiem… wróżeniu ze szklanej kuli?

Co to ten eyetracking? To badanie polegające na śledzeniu ruchu gałek ocznych, pozwalające sprawdzić, jakie elementy serwisu przyciągają uwagę lub na których użytkownik musi skupić się najdłużej żeby zrozumieć np. sens polecenia. Badanie to opiera się mocno na kontekście zadania, które się wykonuje (polecenia badacza) i wyniki jakie otrzymamy będą ściśle z nim związane. Nie ma więc sensu brać losowego efektu badania z internetu i podtrzymywać tezę, że… użytkownik patrzy zawsze w lewy górny róg, potem prawy, a potem dopiero na środek. Bo nie jest to prawdą.

usability eyetracking
screen pochodzi ze strony Nielsen Norman Group

To w jaki sposób będzie prowadzony wzrok zależy w dużej mierze od hierarchii informacji. Od wyróżnionych elementów, kontrastów kolorów, wielkości (przy czym nie zawsze największy tekst będzie od razu rzucał się w oczy), od zdjęć, ale także od przyzwyczajeń. Już nie wspominając o aspektach kulturowych. Sama konstrukcja treści jest równie ważna – na przykład, przy klasycznych stronach opierających się na blokach tekstu, w badaniach najczęściej pojawia się struktura bazująca na kształcie litery F – czyli czytamy od lewej do prawej i lecimy w dół, przy czym coraz mniej uwagi przywiązujemy do tekstów niżej (skanujemy je).

Takich popularnych modeli tego w jaki sposób przeglądamy strony jest kilka i w zależności od kompozycji treści, nasze oczy będą zachowywać się trochę inaczej. Pamiętajmy o tym!

Do poczytania:

The Smarter Screen: Surprising Ways to Influence and Improve Online Behavior; Shlomo Benartzi; Chapter 3: Display Biases

How People Read on the Web: The Eyetracking Evidence; Nielsen Norman Group Report

Jest tego pewnie więcej

Niestety, wraz z dostępem do Internetu musimy liczyć się z ryzykiem przegrzebywania się przez masę informacji. Nie zawsze są poprawne, albo podawane jako niepełne mogą prowadzić do różnych wniosków. Na jednej stronie przeczytamy, że użytkownicy są leniwi i nie scrollują, na innej, że jest zupełnie na odwrót. Warto więc pytać zawsze o źródła lub szukać ich na własną rękę.

Teraz każdy może mieć bloga, stronę, założyć kurs o tworzeniu stron nie mając żadnej wiedzy dotyczącej projektowania, czy kodowania. I jako projektanci musimy być czujni i sprawdzać docierające do nas informacje. Zanim założymy, że najważniejsza jest strona główna, albo przycisk akcji w konkretnym kolorze, pamiętajmy po prostu, że robimy te nasze projekty dla kogoś. I jeżeli chcemy już coś sprawdzać, to najlepiej na tej grupie.

Psychologia ma sporo wspólnego z projektowaniem

Decyzje jakie podejmujemy, zachowania jakie przenosimy do Internetu, mają ścisły związek z naszymi doświadczeniami, naszą wiedzą, wyobrażeniami, ale też nastrojem! Projektowanie ma w gruncie rzeczy sporo wspólnego z psychologią i z pewnością nie raz jeszcze pojawi się tu temat z nią związany. Jeżeli interesuje Was to zagadnienie to wpadnijcie też na wpis o Gestalcie (http://zebza.net/gestalt-projektowanie/) i dajcie znać czy chcecie więcej tekstów łączących psychologię z projektowaniem!

You May Also Like
Read More

„Trendy” w UI i web designie

„Najważniejsze trendy w UX!”, „Jakie są trendy w projektowaniu?”, „Trendy w UI na 2023!” – styczeń to zawsze wysyp tych wszystkich wpisów, które tłumaczą…
projektowanie ui
Read More

WWW: Projekt interfejsu

Na mojej liście etapów w procesie projektowania strony internetowej, projekt warstwy wizualnej znalazł się dopiero na miejscu piątym. O wcześniejszych etapach już pisałam…