Strona główna User experience Czy brytyjski design stron www jest lepszy niż polski?

Czy brytyjski design stron www jest lepszy niż polski?

 Przeczytasz w: 10 min.
0
0
Brytyjski webdesign

Projekt i wygląd stron internetowych często determinuje to czy chętnie spędzamy czas na danym adresie i czy chętnie zapoznajemy się ze znajdującą się tam zawartością. O designie stron www napisano wiele artykułów, książek i darmowych e-booków. Nie czas zatem na rozważania jak powinna wyglądać strona www, chciałbym jednak porównać to jak wyglądają różne strony internetowe w zestawieniu ich „narodowości’. W niniejszym artykule porównam ze sobą wybrane serwisy informacyjne (strony poza mediami społecznościowymi cechujące się najwyższą ilością wejść) pochodzące z Wielkiej Brytanii oraz Polski. Dlaczego akurat Wielka Brytania? Otóż pewne elementy brytyjskiego designu www dają podwaliny do wypracowania wspólnego mianownika. Chociaż właścicielami stron są różne podmioty, design wielu stron zasadniczo prezentuje sobą pewne wzorce, jak gdyby wyszły spod ręki jednego teamu.

Lekcja historii

Najpierw przyjrzymy się temu jaki staż odnotowują czołowe witryny w obu krajach.

bbc wayback machine

Wayback Machine pierwsze dane na temat strony BBC zebrał w grudniu 1996 roku, czyli niemal 22 lata temu. Tak wtedy wyglądała główna strona, a przynajmniej tyle pobrało ww. narzędzie:

Strona BBC w roku 1996

Chciałbym Wam pokazać jak wyglądała strona popularnego brytyjskiego dziennika The Times, aczkolwiek Wayback Machine nie zapisał żadnych danych ze względu na ten zapis, który blokuje crawlowanie:

Disallow dla Wayback Machine

Dla porównania sprawdźmy Onet:

Onet w Wayback Machine

Nie najgorzej, prawda? Wayback Machine pobrał pierwsze dane już w pierwszym kwartale 1997 roku. Wtedy Onet nie był jeszcze Onetem, a Opitmus Net:

Optimus Net

Już ponad 2 dekady temu widać było kierunek, w którym zmierzał przyszły Onet – portal horyzontalny. Dziś wiele serwisów dziennikarskich, serwisów dzienników, gazet, czasopism, ma właśnie taki styl, chociaż tylko część z nich stanowi swego rodzaju wzorniki dla pozostałych i to na nich dziś się skupimy.

Brytyjska strona BBC.com (czyli wersja globalna BBC) obecnie wygląda tak:

BBC strona główna

Układ strony jest standardowy: logo w lewym górnym rogu, kolejne elementy menu układają się poziomo w górnej części, po prawej stronie znajduje się wyszukiwarka. Niżej obserwujemy najważniejsze newsy, a scrollując w dół trafimy do kolejnych, podzielonych tematycznie działów.

Nieco inaczej (już bardziej brytyjsko), prezentuje się właściwa wersja BBC, czyli BBC.co.uk – które włączy się tylko wtedy, jeżeli mamy włączone brytyjskie IP:

BBC co uk

Na pierwszy rzut oka może jeszcze nie widać większych różnic, ale już uwypukla się fakt, iż strona jest jasna, minimalistyczna, zaś content zachowuje pomiędzy sobą przyjemne dla oka odstępy, dzięki czemu łatwiej się go skanuje wzrokiem.

Font ma znaczenie

Spójrzmy teraz na dział sportowy BBC:

BBC Sport strona

Od razu dostrzegalna jest pewna tendencja. Niewielka ilość treści, bardzo elegancki design z przejrzystym układem i zastosowanie bardzo przyjemnego w odbiorze fontu ReithSans, który naprawdę ułatwia czytanie. Samo BBC chwaliło się tym wdrożeniem, więcej informacji o tym w ich artykule. Jak podaje BBC zmiana ta miała na celu wywołanie wrażenia odmienności dla contentu względem innych stron oraz zwyczajnej poprawy czytelności. I to widać. Jak dodaje BBC, fonty zaprojektowane w minionym stuleciu: Arial, Helvetica oraz Gill Sans nie spełniają już tak dobrze swojej roli jak kiedyś. Gill Sans jest jednak fontem, który wciąż prezentuje się nader dobrze i jako czcionka bezszeryfowana jest jeszcze wykorzystywana w części serwisów BBC. Info z Wikipedii oraz jej przykład poniżej:

GillSans

Krój ReithSans, o którym mowa wyżej, sprawdza się w sposób następujący:

BBC-Sport-3

Tekst właściwie sam się czyta, ma się wrażenie jego „miękkości”, elegancji i przyjemnego feelingu jednocześnie. Warto zwrócić uwagę także na świetne przestrzeni pomiędzy kolejnymi akapitami, które ułatwiają szybkie czytanie tekstu, zaś same zawierają w sobie kolejne myśli zebrane w całość. Zasada 3-4 zdań w akapicie sprawdza się na BBC bardzo dobrze.

W tym momencie musimy zrobić kolejne porównanie – tym razem z serwisem Sport.pl:

Sport-pl-4

Dokładnie taki sam obszar w polu monitora. Sprawdźmy zatem jaka różnica dzieli BBC i Sport.pl w wymiarze ilości znaków ze spacjami (nie będziemy porównywać ilości słów, gdyż w języku angielskim są one zwyczajne krótsze i zmieści się ich więcej w danym polu). 1419 zzs na BBC oraz 1869 na Sport.pl. Aż 32% procent więcej na polskim serwisie. Właściwie nawet bez pomocy narzędzi liczących znaki, łatwo rozpoznać, który tekst jest bardziej zbity i zawiera więcej treści. Niestety długie akapity na Sport.pl nie są zbyt przyjemne w odbiorze.

Szeroko stosowany font ReithSans sprawdza się także w innych miejscach serwisu, np. na dedykowanych, aktualizowanych w trybie rzeczywistym sekcjach sportowych:

BBC-Sport-1

Dla porównania, tutaj możecie zobaczyć praktycznie ten sam typ sekcji na Onecie:

Sport Onet

Chociaż koncepcja designu jest podobna, to już samo wykonanie jest lepsze u Brytyjczyków. Każdy news i komentarz posiada linki do szerowania, w prawym sidebarze mamy aktualne statystyki, a po lewej krótkie podsumowanie. To jest prawdziwa relacja, to nie jest tylko design, ale przede wszystkim design thinking, czyli twórcza metoda projektowania, która pozwala rzeczywiście zrealizować potrzeby użytkownika.

Spójrzmy teraz na inne zestawienie: BBC (tam użyto Ariala) oraz TVN24:

Kroje pisma TVN24 oraz BBC

Jak zaznaczyłem na zrzucie powyżej, oba serwisy dzielą pewne różnice. Chociaż niewielkie, zmieniają poziom przyjemności z czytania. Wysokość linii jest nieco wyższa w przypadku BBC, podobnie rozmiar czcionki (16px vs 14px). Inna jest również odległość pomiędzy akapitami: 31px vs 18px. Te 3 parametry odpowiadające za stylowanie tekstu, wpływają na to jak dobrze skanuje się wzrokiem sam artykuł. A jest to przecież bardzo ważny element odbioru treści na stronie www. Zła kompozycja i brzydki wygląd odrzucą nas nawet od najciekawszego artykułu.

Szeryfy i nieszeryfy

Wróćmy jeszcze do kwestii fontów. Na większości stron www królują czcionki bezszeryfowe, czyli bez „ogonków”. W odróżnieniu od książek, strony internetowe nie zawierają niemalże samego tekstu, z tego względu serif font mógłby utrudnić czytanie (jeżeli ogonki są zbyt nachalne). Nie oznacza to jednak, że na żadnej stronie nie znajdziemy takiego rozwiązania. Brytyjski The Guardian używa dla przykładu fontu Guardian Text Egyptian Web:

Czcionka na TheGuardian

I trzeba przyznać, że wcale źle to nie wygląda. Gdybyśmy w to samo miejsce wstawiliby np. Times New Roman, byłoby gorzej:

Times New Roman vs GillSans

Ten sam artykuł ze zmienionym fontem u góry oraz oryginalnym w drugim akapicie. GillSans na Guardianie prezentuje się naprawdę ciekawie i mimo swoich ogonków wcale nie przeszkadza w czytaniu. Litery są bardziej krągłe i poprawiają estetykę.

Czcionki szeryfowe to domena oczywiście nie tylko Guardiana. Oto przykład komentarzy z The Independent:

Komentarze na Independent

I porównajmy to z polskim Dziennikiem:

Komentarze na dzienniku

Na polskim serwisie zastosowano „defaultowy” font sans serif, natomiast na The Indepent, elegancki krój szeryfowy. Indy Serif to nie tylko krój stosowany na stronie www…ale także w gazecie! O tym przeczytacie w tym artykule przedstawiającym redesign marki.

Komentarze na Dzienniku, które wykorzystują pospolity font szeryfowy nie należą do szczególnie eleganckich. Zwłaszcza jeżeli zestawimy je w bardzo mizernym projektem, który uwypukla nick autora, a nie jego komentarz…a przecież to opinia jest tutaj ważna, a nie imię autora, prawda?

Serwisy tematyczne

Zestawmy teraz ze sobą serwisy o innej tematyce – technologicznej.

The Guardian tech
The Guardian / Technology

 

WP Tech
Tech WP

Obie strony prezentują podobną tematykę. Ale obie są zupełnie inne. Obie zawierają wspólne elementy, ale w tym zestawieniu lepiej wypada dział serwisu The Guardian, niż dział Tech serwisu WP.pl. Dlaczego? [T.G. vs WP]

  • 6 elementów menu vs 13 elementów menu
  • pojedyncze menu główne vs podwójne menu główne
  • Przejrzysta szata graficzna vs nieprzyjazny układ i wielkie zdjęcia
  • Pretytuł (np. Keyboards) vs cały tytuł
  • Brak dodatkowego menu vs infantylne menu w lewym sidebarze

Strona WP została zaprojektowana tak, aby skutecznie od siebie odrzucać. Chociaż design może wyglądać na nowoczesny, to jest także odrzucający, a to główny przyczynek do wyjścia ze strony.

Serwisy plotkarskie

W zbiorze brytyjskich portali newsowych są jednak serwisy, które nie szczycą się przemyślanym designem, znajdziemy im odpowiedniki także tutaj, w Polsce. Spójrzmy na tzw. „żółtą prasę”:

DailyMail

DailyStar

Pudelek

Zarówno brytyjskie jak i polskie serwisy w kontekście contentu plotkarskiego, zaprojektowane zostały żałośnie. Ale przyjmijmy, że to właśnie taka stylistyka buduje ich markę i większe zmiany mogłyby spowodować, że część odbiorców uzna serwis za nieco bardziej „premium” i tym samym zwątpi w to, czy jest właściwym odbiorcą.

Prasa lokalna

Strony internetowe, które zamieszczają na swoich łamach wiele artykułów często borykają się z tym, że posiadają nieprzemyślany design, w konsekwencji czego, po dużym zapełnieniu treścią, rodzi się pewien chaos.

Dla przykładu, zestawić możemy serwisy lokalne: Gazetę Wrocławską oraz Manchester Evening News. Oba serwisy celują w target lokalny, czyli czytelnika mieszkającego w mieście, które jest źródłem większości informacji. Chociaż Manchester jest mniej ludnym miastem niż Wrocław, serwis prowadzony jest zdecydowanie lepiej i wygląda o wiele lepiej. Na głównej stronie widzimy główny news ostatnich godzin:

Manchester Evening News

Na Gazecie Wrocławskiej jest zgoła inaczej:

Gazeta Wrocławska strona główna

Dwa poziomy menu, reklama serwisu, baner i dopiero później newsy. W opozycji do jednego głównego newsa na brytyjskim serwisie, tutaj widzimy 6 bloczków. Jeden główny, 2 średnie oraz 3 małe. Naturalnie największy box wydaje się być najważniejszym, jednakże to manchesterski serwis lepiej kieruje użytkownikiem od razu serwując mu jeden, najważniejszy w danej chwili artykuł. Dopiero pod głównym zdjęciem znajdziemy kolejne sekcje tekstów, które zresztą zostały estetycznie zaprojektowane. Pomijając design, Manchester Evening News jest lepiej zaprojektowany w każdym aspekcie, zwłaszcza jeżeli popatrzymy na „artykuły” Wrocławskiej, które mieszczą się w lidzie 🙂

Tarnogaj

Profesjonalizm, design, pomysł – to wszystko może przekładać się na popularność. Zwróćmy uwagę na Facebooki obu serwisów:

Manchester Evening News FB

Gazeta Wrocławska FB

Manchester Evening News pokazuje…Manchester. Gazeta Wrocławska…zdjęcie ze stocka. I komu tu zaufać?

A do wszystkiego takie dane:

MEN FB polubienia
Polubienia Manchester Evening News
Gazeta Wrocławska FB polubienia
Polubienia Gazety Wrocławskiej

Liczby polubień obu serwisów mocno się różnią. Biorąc pod uwagę fakt, że Wrocław jest jednak liczniejszy i jest znaczącym w Polsce miastem, zaledwie ~90 tysięcy polubień może zaskakiwać, podobnie jak ponad 1,5 mln dla brytyjskiego serwisu, który ma około 3 razy mniej mieszkańców niż liczba lajków.

Design stopki

Ciekawym elementem stron, który dobrze pokazuje to, czy strona została interesująco zaprojektowana, jest stopka. Znajdujący się na samym dole www obszar, zwykle zawiera jedno zdanie podsumowujące serwis w skrócie i garść linków do najważniejszych sekcji lub innych serwisów w swojej grupie.

Tak wygląda to właśnie np. na Pulsie Biznesu:

Stopka Pulsu Biznesu

Stopka zaprojektowana tak, jakby właściwie została wygenerowana przez automat. Brak jej autentyczności, unikalnego charakteru, czegokolwiek przyciągającego. Istnieje różnica pomiędzy minimalizmem a lenistwem; mam wrażenie, że w tym przypadku przeważa to drugie podejście.

Poniżej przedstawiam z kolei stopkę brytyjskiego serwisu The Economist:

Stopka The Economist

Tutaj stopka stanowi niejako dopełnienie zawartości znajdującej się w wyższych sekcjach. Znajdujemy podobnie jak na PB odnośniki do takich miejsc jak „O nas” czy „Kontakt” ale poza tym możemy także przejść do profili na social mediach, zapisać się do newslettera czy chociażby dowiedzieć się jak długa jest historia marki „The Economist”. Bardzo dobrze zaprojektowana stopka.

UK vs PL

Dziennikarstwo brytyjskie jest o wiele bardziej dojrzałe pod kątem warsztatu i researchu niż polskie. To chyba nie jest odkrycie Ameryki. Co ciekawe, przekłada się to także na web design. Brytyjskie strony są zwyczajnie kilka lat przed polskimi serwisami i wyglądają zdecydowanie lepiej, schludniej. Dużą rolę odgrywa tam bardzo przemyślany layout, czcionki oraz tak podstawowe elementy jak przestrzeń pomiędzy tekstem i zdjęciami.

Brytyjskie serwisy mogą stanowić doskonałe wzorce dla polskich front-end developerów, są zaprojektowane z pomysłem, lekkością, mają także przykuwającą oko szatę graficzną i rozmieszczenie zawartości poszczególnych sekcji. Co bardzo ważne – zostały zaprojektowane dla użytkownika – pozwalają mu płynnie poruszać się w obrębie serwisu i chłonąć z niego garściami. Polskie serwisy nie do końca wiedzą jak to rozegrać i po prostu „robią swoje”. Wiele może się zmienić, ale do tego niezbędne jest nabranie doświadczenie, a to w sieci najłatwiej zdobywać po prostu podglądając lepszych, a Wielka Brytania jest mocniejsza w web designie serwisów niż Polska, po prostu.

 

 

Radek

Z marketingiem internetowym związany od 2014 roku. Specjalizuje się w SEO oraz komunikacji wizerunkowej. Zainteresowany UX, designem, programowaniem oraz innowacyjnymi technologiami.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Załaduj więcej z działu User experience