Web Design Blog / Web:

Jakość stron internetowych

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. Kolejność kroków nieprzypadkowa.

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.

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.

testowanie stron internetowych - windows

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.

testowanie stron - urządzenia mobilne

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.

testowanie stron internetowych - android studio

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

jakość stron www - w3c validator

 

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.

jakość stron internetowych - walidacja css

 

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

optymalizacja-mansfeld

 

Krok 6: Page Speed Insights – analiza optymalizacji szablonu

Ten test analizuje sposób skonstruowania strony internetowej i wpływ użytych elementów wchodzących w jej budowę na prędkość wczytywania się całości dokumentu z serwera.

Link do analizatora: Google PageSpeed Insights

optymalizacja seo pagespeed insights

 

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

test stron www - optymalizacja mobilna

 

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

test jakości strony - dane uporządkowane

 

Krok 9: 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 wyobrażam sobie, że w 2018 ktoś odważy się wykonać stronę niezgodną ze standardem przyspieszonych stron mobilnych.

Link: Test AMP

jakość stron internetowych - test amp

 

Krok 10: Analiza/audyt SEO

Strony internetowe to nie samochody a firmy SEO to nie teamy tuningujące 😉 – na taką analogie po prostu nigdy się nie zgodzę. Strona wyprodukowana dla klienta powinna spełniać obecne standardy SEO koniec kropka. W przeciwnym wypadku na miejscu klienta reklamowałbym otrzymany produkt jako… niezgodny z umową. Obecnie, strona www niezoptymalizowana pod SEO to nie strona, to jedynie „wyrób stronopodobny”. 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

jakość stron www - 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

jakość stron - analityka internetowa

 

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

jakość stron - ssl

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

jakość stron - bezpieczeństwo

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. Czytaj więcej o tym zagadnieniu w artykule: Wiarygodność w Internecie.

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. Zapraszam do współpracy w zakresie audytu stron i sklepów internetowych 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.

Źródła

https://support.google.com/webmasters/answer/35769/?hl=pl

https://developers.google.com/web/fundamentals/

Jakość stron internetowych
4.76 (95.2%) głosów: 75

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail