W niniejszym artykule pokażę jak badać jakość strony internetowej. Zaprezentuję narzędzia do analizy i wytłumaczę jak interpretować otrzymane wyniki. Podpowiem też jak prostymi sposobami podwyższyć jakość istniejących serwisów.
Projektowanie witryn WWW (ang. web development) odnosi się do ogółu prac związanych z tworzeniem strony internetowej. Na początku należy zaplanować układ informacji i treść, potem przepisać to na kod HTML.
Opracowanie prezentacji graficznej polega na ostylowaniu i dodaniu ewentualnych animacji. W praktyce, oznacza to, że web developerzy powinni posiadać szerokie umiejętności w zakresie organizowania struktury informacji, programowania jak i projektowania UI oraz UX dla potrzeb witryn internetowych.
Zadaniem projektanta jest zapewnienie łatwego dostępu do wszystkich informacji zawartych w dokumencie www oraz tzw. wysokiej jakości użytkowej (ang. usability). Jakość ta określa, w jakim stopniu projekt danej strony www, już przy pierwszej wizycie zapewnia przeciętnemu użytkownikowi sieci Web, dostęp do zawartych tam informacji, a także jak łatwo można dostać się do każdej podstrony serwisu.
Najistotniejszym aspektem tworzenia witryn www, oczywiście poza przestrzeganiem aktualnie rekomendowanych standardów, pozostaje zapewnienie użytkownikom przede wszystkim ogólnie rozumowanej wygody oraz użyteczności treści.
Jakość to to, co sprawia, że rzecz jest rzeczą, którą jest.
Arystoteles
Czym jest UI strony internetowej?
User interface (interfejs użytkownika) – to określenie interakcji oraz tych elementów strony internetowej, które biorą udział w interakcji z użytkownikiem. W odniesieniu do stron możemy tutaj wymienić takie elementy jak: pole robocze, przyciski, treść strony, rozmieszczenie tych elementów oraz sposób przechodzenia pomiędzy kolejnymi podstronami. Odległości pomiędzy poszczególnymi elementami możemy zmierzyć, opisać ich proporcje kolor oraz inne właściwości. Możemy ustalać standardy dobrych praktyk i wykorzystywać je w tworzeniu stron. To po części właśnie temu zagadnieniu poświęcony jest niniejszy wpis.
Czym jest UX strony internetowej?
User experience – to wrażenia użytkownika, czyli odpowiedź na pytanie jakie wrażenia i emocje produkt/prezentacja wzbudza u konsumenta. Czy klient wierzy, i dokonał wyboru czy wątpi i szuka dalej? Jakości UX nie jesteśmy w stanie zbadać lub opisać ścisłym językiem – możemy ją jedynie przetestować na użytkownikach, wykonać badanie jakości za pomocą ankiety satysfakcji lub ewentualnie wykonywać testy A/B sprzęgając to z analityką internetową.
Wysoka jakość UX przekłada się na zadowolenie użytkownika w konsekwencji ma przełożenie na efektywność stron, czyli spełnia założony cel – klient umawia się na spotkanie zakłada konto w serwisie bądź kupuje produkt przez Internet. Dobre UX strony jest wynikiem dobrego planowania, dokładnej analizy grupy docelowej, ścisłego określenia celu, współpracy projektanta ze zleceniodawcą i wzajemnego zrozumienia twórców i konsumentów. Odnosi się do całokształtu stron internetowych, wygody ich użytkowania i sposobu przekazywania na nich informacji.
Użytkownik na pierwszym miejscu
Ta zasada czyli „user first” powinna przyświecać projektantowi podczas pracy nad każdą kolejną stroną internetową. Witrynę w internecie tworzymy wyłącznie dla użytkowników końcowych. Zaś jedynie skutkiem ubocznym tych wszystkich działań zmierzających do poprawy poziomu zadowolenia użytkowników naszych witryn powinno być spełnienie standardów jakościowych, o których czytamy we wskazówkach dla webmasterów czy w uwagach zamieszczonych w narzędziach do analizy serwisów internetowych.
Jak nie trudno się domyślić, chęć szybkiego pojawienia się na pierwszych miejscach w wynikach wyszukiwania, rozwój biznesu SEO oraz oferowanie projektowania stron przez grafików i amatorów, doprowadził do sytuacji paradoksalnej, gdzie kosztem wygody użytkownika i perfekcyjnego przekazu spełnia się sztywne zasady budowania stron (o ile w ogóle ma to miejsce) co i tak w dłuższej perspektywie nie ma najmniejszego znaczenia – a nawet gdyby dochodziło do proporcjonalności wprost – fakt pojawiania się na pierwszym miejscu w Google jest w większości takich przypadków przeceniany. Pierwsze miejsce w Google to zazwyczaj jedynie „but w drzwi” – to czy dochodzi do transakcji zależy od jakości strony www, atrakcyjności treści i ostatecznie obsługi klienta przez sprzedawcę czy przedsiębiorcę.
Na szczęście tendencja skierowania uwagi projektantów stron na szybkość działania, wsparcie urządzeń mobilnych oraz konkurencyjność branży SEO i Web Design podleczyła kondycję typowych stron internetowych. Narzędzia do analizy stron to świetny sposób na weryfikację najistotniejszych elementów na stronie ale… uwaga.
Narzędzia do analizy stron nie badają semantyki kodu
Narzędzia analizujące kod stron internetowych nie są wstanie sprawdzić jego semantyki czyli znaczenia poszczególnych wyrażeń w kodzie źródłowym. Tylko doświadczony projektant stron jest w stanie sprawdzić czy poprawnie wykorzystano tag article, czy hierarchia tytułów jest sensowna i użyteczna z punktu widzenia użytkownika i SEO. Wreszcie, czy treść ułożenie i zagnieżdżenie znaczników ma sens i zgodnie z zaleceniami zastosowano atrybuty i właściwości w treści, które mają ogromne znaczenie zarówno w pozycjonowaniu jak i w serwowaniu przydatnych informacji na najwyższym poziomie. To samo tyczy się stosowania dostępnych technologii mówię tutaj o danych strukturalnych, standardzie stron mobilnych AMP lub chociażby technologii powiadomień Web Push.
Analizatory SEO nie rozumieją logiki treści
Tylko osoba, która mogłaby być potencjalnym odbiorcą strony internetowej jest w stanie zweryfikować czy treść jest adekwatna do tego czego oczekuje oraz czy całość jest zbudowana w oparciu o konsekwentny przekaz. Pewnie nie raz spotkaliście się z chaosem informacyjnym, mylącym oznaczeniem przycisków albo nieprzemyślaną nawigacja. Takich błędów i niedociągnięć żaden analizator nigdy niestety nie zaoferuje. Sztuczna inteligencja to na obecnym etapie mrzonki. Tego typu elementy wpływające na jakoś stron internetowych sprawdzi jedynie doświadczony projektant stron internetowych i tak będzie jeszcze przez co najmniej kilka najbliższych lat.
Wszyscy korzystają z analizy automatycznej
Projektanci stron, firmy z branży pozycjonowania oraz sami klienci mają świadomość o istnieniu automatycznych narzędzi do sprawdzania jakości stron oraz z nich korzystają. Spełnienie wymogów na powiedzmy 80% mimo że wynik jest zaznaczony na zielono i w podsumowaniu mamy „Good” nie jest w obecnych czasach niczym szczególnym. Grunt to skupić się na jakości tam gdzie większość „idzie na łatwiznę” to właśnie tam mamy szansę na polepszenie jakości i w efekcie uzyskaniu jeszcze lepszych rezultatów płynących z opublikowanej strony firmowej, portalu internetowego lub aplikacji internetowej.
Krok 1: Multiplatformowe testowanie stron internetowych – Desktop
To od tego najlepiej zacząć. Testowanie stron na rożnych systemach i przeglądarkach to konieczność. Istnieją duże różnice w interpretowaniu kodu CSS przez różne przeglądarki internetowe.
Przeglądarki w systemie Microsoft Windows
Do testowania stron internetowych na urządzeniach z systemem operacyjnym Windows używam natywnego urządzenia. Jak wiadomo skorzystamy z co najmniej 3 przeglądarek. Będą nimi: Internet Explorer, Google Chrome i Mozilla Firefox – te najpopularniejsze. Każda przeglądarka na swój sposób interpretuje kod HTML i CSS, zawsze pomiędzy przeglądarkami będą występować drobne różnicę. Internet Explorer jest wręcz obiektem branżowych żartów, w tej przeglądarce nowe opracowania i rozwiązania są wprowadzane ze stosunkowo dużym opóźnieniem lub wcale nie są wspierane – np. niektóre filtry graficzne, dołączanie zasobów itp… Przeglądarka Microsoftu zawsze wymagała i będzie wymagać „specjalnego traktowania” to jednak nie powinno być wymówką dla projektantów – strony www powinny być w stu procentach funkcjonalne także w tej przeglądarce.
Nie ma praktycznej możliwości dysponowania przez agencję każdym urządzeniem fizycznym z każdą wersją systemu i przeglądarki, jest jednak prosty sposób, który wykorzystuje się przy produkcji oprogramowania i daje 100% pewności. Podchodząc do sprawy testowania stron bardzo poważnie skorzysta się wówczas z wirtualizacji. Wirtualizacja to uruchomienie oryginalnego systemu w wirtualnym środowisku, które „udaje” inny sprzęt.
Przeglądarka w systemie Apple OS X
Osobiście do testowania stron klientów w systemach operacyjnych OS X firmy Apple korzystam z oprogramowania VMware Workstation 12. Mam tam zainstalowany system OS X 10.11 El Capitan i dzięki niemu mogę w przeglądarce Safari widzieć stronę dokładnie tak jak widzą to użytkownicy nowych MacBooków bez konieczności posiadania fizycznego urządzenia.
Krok 2: Multiplatformowe testowanie stron internetowych – Urządzenia mobilne
Testowanie wdrożenia Responsive Web Design wyłącznie poprzez skalowanie okna przeglądarki nie ma najmniejszego sensu. Urządzenia mobilne inaczej traktują jednostki miary a pomiędzy kolejnymi wersjami Androida (nie wspominając już o różnicy między platformami Android/iOS) są dosyć znaczne.
Testowanie strony na natywnych urządzeniach mobilnych
Do testowania Responsive Web Design i standardu AMP używam dwóch fizycznych telefonów. jednego z Androidem 5.0.1 Lollipop oraz iPhone 6s z najnowszym systemem iOS. W telefonie z Androidem testuję strony w przeglądarce systemowej oraz Google Chrome.
Stronę warto przetestować także na tabletach o różnych przekątnych wyświetlacza z najnowszymi a także z tymi starszymi wersjami Androida na pokładzie. Do testowania stron w takich warunkach znowu przyda nam się wirtualizacja. Jednak tym razem skorzystamy ze środowiska programistycznego dla aplikacji mobilnych: Android Studio. Dzięki AVD Managerowi możemy uruchomić urządzenie o dowolnych parametrach z dowolną wersją Androida.
Jeżeli na stronie wszystko da się kliknąć, tapnąć i wszystko wygląda atrakcyjnie, możemy przejść do kolejnych etapów oceny jakościowej strony internetowej.
Krok 3: Poprawność kodu HTML5 (syntaktyka)
Analiza poprawności składni kodu ma za zadanie sprawdzić czy w kodzie utrzymano porządek zagnieżdżania i wyłapuje ewentualne literówki lub niedozwolone wyrażenia. Dzięki poprawności kodu przeglądarki mogą poprawnie wyświetlić prezentację strony www zgodnie z założeniem jej twórcy. Jest to najważniejsza analiza strony internetowej jaką należy przeprowadzić. Uwaga nie wystarczy zbadać tylko strony głównej ale wszystkie unikalne podstrony serwisu.
Link do analizy poprawności kodu: W3C Markup Validation Service
Krok 4. Poprawność stylów CSS (syntaktyka)
Po kodzie HTML5 mamy do sprawdzenia poprawność składni kodu CSS. Dzięki poprawności tej części strony możemy mieć pewność, że strona będzie dobrze wyglądać na wielu urządzeniach jednocześnie.
Krok 5: Prędkość wczytywania się strony z serwera
Temat wałkowany u mnie na każdym kroku dlatego nie będę się powtarzał i odsyłam do artykułów: Przyspieszanie stron internetowych, optymalizacja stron www. Prędkość ładowania się strony www ma wpływ na pozycje wyszukiwarce i konwersje w sklepach internetowych.
Link do narzędzia testującego prędkość wczytywania: Pingdom
Krok 6: Podstawowe wskaźniki internetowe i Page Speed Insights
Ten test analizuje sposób skonstruowania strony internetowej i wpływ użytych elementów wchodzących w jej budowę na prędkość wczytywania i renderowania się dokumentu.
Link do analizatora: Google PageSpeed Insights
Wprowadzone w 2020 roku Core Web Vitals są widoczne z poziomu Search Console i dla każdego adresu URL widać, czy spełnia zalecenia jakościowe:
Od 2020 roku prędkość wczytywania i szybkość renderowania jest rejestrowana w SearchConsole. Czytaj więcej
- jak szybkość strony wpływa na pozycjonowanie,
- jak zdobyć 100 punktów w PageSpeed Insights,
- jak spełnić podstawowe wskaźniki internetowe.
Krok 7: Test optymalizacji mobilnej
Ten test bada rozmieszczenie i odstępy pomiędzy przyciskami,oraz konfigurację pola widoku przeglądarki. Pozwala określić czy założenia responsive web design zostały poprawnie wdrożone. Czytaj więcej w artykule, w którym piszę o tym jak projektuje się strony responsywne.
Link do narzędzia optymalizacji RWD: https://search.google.com/test/mobile-friendly
Krok 8: Poprawność danych strukturalnych
Jeżeli na stronie wykorzystujemy jakiekolwiek i jakiegokolwiek typu dane strukturalne należy je przetestować pod kątem poprawności składni. Do tego celu użyjemy narzędzia od samego Google. W tym artykule piszę dokładnie o: danych strukturalnych.
Link: Narzędzie do testowania danych uporządkowanych
Krok 9 (opcjonalny): Analiza stron mobilnych AMP
Ten test sprawdza poprawność wdrożenia standardu AMP i kwalifikację strony do indeksowania przez wyszukiwarkę do specjalnej pamięci cache jako strona AMP. Nie wszystkie strony korzystają ze standardu AMP. Technologia ta jest przydatna w przypadku portali informacyjnych i stronach z reklamami.
Link: Test AMP
Krok 10: Analiza/audyt SEO
Strona wyprodukowana dla klienta powinna spełniać obecne standardy SEO. W przeciwnym wypadku na miejscu klienta reklamowałbym otrzymany produkt jako… niezgodny z umową. Każda publikowana strona powinna od nowości spełniać zasady dobrych praktyk z szczególnym uwzględnieniem słów kluczowych znajdujących się na stronie.
Link do narzędzia testującego stronę: Seo SiteCheckup
Krok 11: Indeksacja, poprawność wdrożenia i pozycje
Po opublikowaniu strony warto przesłać mapę witryny do Google i sprawdzić czy wyszukiwarka ta nie ma problemów z indeksowaniem witryny. Może tak się stać w przypadku błędnych adresów URL, przekierowań oraz nieprawidłowym funkcjonowaniu CMSa. W przypadku stron wielojęzycznych konieczne będzie jeszcze sprawdzenie poprawności wdrożenia linku hreflang, standardu AMP i ogólnie tego jak nasza strona jest widziana przez roboty indeksujące. Do tego przyda się Google Search Console (kiedyś „Narzędzia dla webmasterów”).
Narzędzie to posiada wiele przydatnych funkcji, o których jednak opowiem szerzej w specjalnym artykule.
Link: Google Search Console
Krok 12: Analityka internetowa
Po opublikowaniu nowej strony lub krótko po modernizacji warto regularnie sprawdzać zachowanie użytkowników na na naszej stronie www. Należy zwrócić szczególną uwagę na to skąd przychodzą do nas użytkownicy, które podstrony są najczęściej przeglądane, które zaś są pomijane i które strony najczęściej powodują wyjścia.
Taka analityka powdrożeniowa powinna być nieodłącznym elementem testu jakościowego nowej strony internetowej. Narzędzia analityczne które śledzą zachowanie użytkowników pozwalają wyciągnąć wnioski na temat użyteczności serwisu i wprowadzić ewentualne udoskonalenia tak aby zmaksymalizować współczynnik konwersji czyli odsetek użytkowników, którzy zostają faktycznymi klientami, ponieważ dokonują zakupu produktu, przesyłają wypełniony formularz lub dzwonią do firmy.
Link: Google Analytics
Krok 13: Analityka doświadczeń użytkownika
Nie do przecenienia jest posiadanie informacji o tym, które konkretnie obszary wywołują większe zainteresowanie odwiedzającego, gdzie wędruje jego wzrok i w którym miejscu na stronie zatrzymuje się i dokonuje (lub próbuje dokonać) interakcji. Takie dane można wykorzystać do optymalizacji interfejsu i udoskonaleń w obszarach użyteczności i ogólnego UX (czyli wrażeń z użytkowania) strony internetowej.
Z pomocą przychodzą nam narzędzia monitorujące interakcję, które w efekcie generują mapy cieplne a nawet klipy wideo z konkretnych wizyt.
Link: Crazyegg.com
Dodatek I: Bezpieczeństwo stron internetowych
Mówiąc o jakości nie można oczywiście pominąć kwestii bezpieczeństwa. Tym bardziej, że większość spraw związanych z bezpieczeństwem stron internetowych nie dotyczy tylko nas autorów danej strony, (w większości przypadków przedsiębiorców) ale przede wszystkim naszych klientów.
Bezpieczeństwo hostingu
Pierwszą rzeczą jaką możemy sprawdzić są ustawienia hostingu, które utrudniają potencjalnym szkodnikom na ingerencję w naszą opublikowaną stronę www. Poprawne wdrożenie przekierowań, certyfikatu SSL, ukrycie informacji technicznych i ewentualnych błędów to niezbędne kroki jakie należy podjąć chcąc spełnić wszelkie standardy bezpieczeństwa. Część z tych spraw są poruszane w punkcie audytu SEO ale postanowiłem temu zagadnieniu poświęcić osobny akapit.
Istnieją narzędzia online sprawdzające najważniejsze ale niestety tylko najłatwiejsze do sprawdzenia z zewnątrz elementy mające wpływ na bezpieczeństwo stron www.
Jednym z takich narzędzia jest: AsafaWeb
Jakość certyfikatu SSL
Trend stosowania certyfikatów SSL na wszystkich podstronach serwisu spowodował wysyp usług, które są oferowane przez firmy hostingowe. Jak wiadomo, certyfikat certyfikatowi nierówny. Jest istotna siła szyfrowania, a także typ samego certyfikatu, o których szerzej piszę w artykule: Certyfikat SSL czy warto? Istnieją także w tym przypadku narzędzia, które dostarczą nam za darmo raport jakościowego testu online.
Link do narzędzia: Qualys SSL Labs
Usuwanie szkodliwego kodu
Jak już jesteśmy przy tych tematach, od czasu do czasu warto sprawdzić czy nasza strona nie padłą ofiarą wandalizmu i nie została zhakowana. Włamanie polega najczęściej na doklejeniu lub podmianie plików JS tak aby strona wysyłała spam generowała sztuczny ruch na innych stronach itp…
Do skanowania stron w trybie online niezastąpionym narzędziem jest: sitecheck.sucuri.net
Dodatek II: Formalności i kwestie prawne
Na końcu ale nie mniej istotne. Jeżeli nasza strona jest wykorzystywana do celów zarobkowych, nieważne czy jest to tylko wizytówka działalności gospodarczej lub sklep internetowy, jesteśmy zobowiązani do przestrzegania prawa.
Strona, na której działa formularz kontaktowy powinna zawierać link do specjalnej strony, na której znajduje się Polityka Prywatności. Taki dokument zawiera pełne dane firmy oraz informacje o tym w jaki sposób dane są zbierane i wykorzystywane przez administratora danych osobowych. W większości przypadków będzie konieczna rejestracja bazy danych w GIODO a w przypadku sklepów internetowych konieczne będzie stworzenie Regulaminu, oraz Regulaminu zwrotów, który informuje o prawach i obowiązkach klienta, korzystającego z usług sklepu internetowego. Warto zwrócić uwagę, że dokumenty te powinny być wolne od tzw. klauzul niedozwolonych. W przypadku sklepu internetowego stworzenie niezbędnych regulaminów zawsze deleguję współpracującej ze mną wyspecjalizowanej w e-commerce kancelarii prawnej.
Na stronach internetowych, koniecznie trzeba informować o wykorzystywaniu technologi cookies (tzw. ciasteczek), co wynika z przepisów znowelizowanej ustawy Prawa Telekomunikacyjnego, która weszła w życie 22 marca 2013 r. Dopełnienie tych obowiązków ma też dodatkową korzyść w postaci bardziej wiarygodnego wizerunku w internecie. Aktualizacja: Czytaj o nowych przepisach: Strony internetowe zgodne z RODO.
Podsumowanie
Narzędzia do analizy stron www to bardzo przydatne rozwiązania ale jak już wspomniałem w kilku punktach powyżej, niczego nie zastąpi ludzkie podejście i znajomość niuansów, które bardzo trudno jest zamknąć w formułę sztywnych procedur bazujących na operacjach porównywania, sumowania i wyliczania. Jeżeli interesuje cie jakość w szerszym ujęciu i dla sklepów internetowych, zapoznaj się z tematem audytu stron i sklepów internetowych, który sprawdza je pod kątem zarówno wyników w analizatorach SEO jak i faktycznych pozycji w wyszukiwarce czy wreszcie zaangażowania użytkowników i sprzedaży.
