Case study: BBC News kontra blur test

W tym wpisie chciałabym wrócić do tematyki hierarchii wizualnej. Spróbuję zmierzyć się ze stroną BBC News, analizując ją pod tym właśnie kątem. Posłużę się opisywaną wcześniej metodą badawczą – blur testem.

W ramach krótkiego przypomnienia – hierarchia wizualna sprawia, że pewne elementy strony wysuwają się na pierwszy plan, a inne pozostają niezauważone. Natomiast blur test jest techniką polegającą na lekkim rozmyciu obrazu strony, aby móc spojrzeć na nią oczami użytkownika, który wpadł tu tylko na moment.

Zaczynamy! Poniżej znajdziesz rozmyty obraz strony BBC News. Na samym końcu zamieszczam też wersję oryginalną, ale zanim do niej przejdziesz, spróbuj chwilę zastanowić się nad tą przerobioną.

Źródło: bbc.com/news (dostęp: 1.05.2018). Zastosowano rozmycie gaussowskie o 5 px.

Przemyślenia podczas testu

Bazując na badaniach naukowych dotyczących hierarchii wizualnej, można określić, że najbardziej krzykliwym elementem strony jest czerwony pasek górny zawierający (najprawdopodobniej) menu. Znajdująca się na nim etykieta podstrony, na której się znajdujemy, przyciąga mój wzrok równie skutecznie, co menu, dzięki zastosowanemu kontrastowi. Dzieje się tak ponieważ znajdują się w najważniejszym (dla czytającego z góry do dołu i z lewej do prawej) miejscu. Ponadto zastosowane barwy funkcjonują w otaczającej nas rzeczywistości, jako ostrzegawcze, mające oznajmiać o czymś wyjątkowej wagi i/lub zagrożeniu.

Dalej, skanując stronę, docieram do obrazów. Na pierwsze dwa patrzę bardzo krótko (jeden jest nieinteresujący – na pierwszy rzut oka przedstawia jakąś błotnistą plamę, a drugi jest zbyt wysunięty na prawo, żeby mieć pierwszeństwo nad pozostałymi elementami).

Później spoglądają na mnie postacie z dużego zdjęcia na dole. Rozmiar obrazu i twarze, które zajmują większość jego powierzchi, sprawiają, że wygrywa z mniejszymi zdjęciami powyżej. Ale ostatecznie docieram i do nich. Krótki rzut oka pozwala mi stwierdzić, że trzy z nich przedstawiają ludzi. Zapewne zatrzymałabym się na nich dłużej.

Równorzędnie z którymś ze zdjęć zauważam również dwa kolorowe paski na dole strony – najpierw oczywiście czerwony, później czarny.

Na końcu zwracam uwagę na duży nagłówek pod menu.

Oczekiwania vs. rzeczywistość

Oto oryginalny screen strony:

Źródło: bbc.com/news (dostęp: 1.05.2018).

Gdy patrzę na tę stronę, rzeczywiście najbardziej oddziałują na moją uwagę zdjęcia przedstawiające ludzi, a także czerwony pasek menu. Właściwie niewidoczne były dla mnie obrazy na samym dole po prawej (być może zastosowano zbyt mały kontrast w stosunku do tła), a także menu na samej górze, tuż obok logotypu i przycisku logowania.

Zastanawiam się, jakie cele biznesowe mogą mieć właściciele serwisu BBC. Na pewno ważne jest dla nich to, żeby użytkownicy odwiedzali jak największą liczbę podstron (rośnie wtedy szansa, że znajdą to, co ich interesuje oraz że trafią na reklamę lub artykuł sponsorowany). Myślę, że ten cel można określić jako realny do osiągnięcia, bo aż 75% zdjęć bardzo mocno przykuwa uwagę. Z oczywistych przyczyn pomijam tutaj treść artykułów, chociaż gdyby nie była interesująca, to najciekawsze zdjęcia mogą nie pomóc.

Poza tym kluczowa wydaje mi się być etykieta „Shop” z tego niewidocznego prawie menu na samej górze strony. Po wejściu w nią, przenosimy się do sklepu z przeróżnymi produktami gotowymi do kupienia. Być może nie jest to główne źródło finansowania strony BBC, ale z pewnością nie zaszkodziłoby bardziej wyeksponować przycisku sklepu.

Patrząc przez pryzmat komfortu użytkownika, należy natomiast pochwalić BBC za to, że strona „ma czym oddychać”. Mam na myśli wolne przestrzenie pomiędzy elementami, ułatwiające koncentracje i rozróżnianie wątków. Jest to niesamowicie ważny aspekt, o którym często zapominają twórcy naszych rodzimych portali informacyjnych (jak np. WP). Dodatkowy – ostatni już – plus należy się projektantom za białe tło, o zaletach którego wspominałam we wcześniejszym wpisie.

1 komentarz do wpisu “Case study: BBC News kontra blur test”

Dodaj komentarz