logo taat

Jak ocenić jakość wykonania strony internetowej?

Czytając ten artykuł dowiesz się jak ocenić jakość wykonania strony internetowej. Znajdziesz tutaj podstawowe informacje, rzeczy które powinieneś wiedzieć, jeśli chcesz zlecić wykonanie strony lub rzeczy, które powinny być dla Ciebie oczywiste, jeśli sam tworzysz strony.

Dla tych, którzy nie mają czasu przeczytać od razu całego artykułu, podstawowe zasady zostały wyróżnione w ramkach.

Nie daj się zwieść pozorom

Idealna sytuacja ma miejsce dopiero wtedy, jeśli w parze z piękną szatą graficzną serwisu idzie techniczny profesjonalizm i doświadczenie tworzącego stronę. Niestety, aby to ocenić, trzeba wziąć pod uwagę również ważniejsze kryteria niż to, czy strona ładnie się prezentuje.

Primo. Strona wizualna serwisu nie jest sprawą najważniejszą.

Używanie określenia „projektowanie stron internetowych” utarło się w czasie, kiedy tworzenie strony ograniczało się prawie wyłącznie do przygotowania projektu graficznego serwisu. Zdecydowanie bardziej precyzyjnym jest użycie w miejsce „projektowania” terminu „tworzenie stron”, lub potocznie: „robienie stron”, za którym kryje się o wiele, wiele więcej niż tylko projekt szaty graficznej.

Na to, czy strona została wykonana starannie i rzetelnie pod względem technicznym, składa się wiele rzeczy. Jakich? Żeby odpowiedzieć na to pytanie, należy zastanowić się nad tym, czym powinna się charakteryzować dobrze zrobiona strona internetowa.

O jakości strony internetowej powinny świadczyć:

  1. jej treść (zawartość merytoryczna, użyteczność i  nawigacja)
  2. dostępność dla wszystkich użytkowników
  3. jakość techniczna
  4. dopracowanie szczegółów
  5. strona wizualna

Treść strony internetowej

Zawartość merytoryczna

Niezależnie od tematyki, dobra strona internetowa powinna dostarczać każdemu użytkownikowi konkretnych, użytecznych informacji w zrozumiały i czytelny sposób oraz oferować łatwą nawigację pomiędzy podstronami.

Użyteczność

Użyteczność (web-usability, usability) to dział projektowania zajmujący się ergonomią, optymalizacją pod kątem przyjazności dla użytkownika.

Sposób prezentacji treści w głównej mierze stanowi o przyjazności serwisu. Umiejętne wyróżnianie ważnych elementów strony a także starannie dobrana typografia, odstępy, marginesy, wielkość nagłówków, rozmiary elementów i ich kolorystyka pozwalają odwiedzającemu stronę znaleźć informacje szybko i zapamiętać stronę na przyszłość.

Elementy powinny być rozmieszczone w sposób przemyślany, tak aby serwis był przyjazny dla użytkownika. Czas potrzebny na znalezienie odpowiednich części serwisu powinien być możliwie najkrótszy.

Jeśli to tylko możliwe, serwis powinien oferować opcję automatycznego przeszukania zawartości podstron.

Więcej na temat użyteczności, możesz się dowiedzieć przeglądając kurs usability.

Nawigacja

Łatwość nawigacji można ocenić po tym, w jaki sposób są ze sobą powiązane podstrony, czy z każdej podstrony można się cofnąć wstecz lub ile ruchów trzeba wykonać aby przejść do interesującej nas podstrony. Intuicyjność nawigacji w dużym stopniu wpływa na to, czy użytkownicy lubią korzystać z danej witryny.

Linki użyte w serwisie powinny być zaprezentowane w taki sposób, aby jednoznacznie informować, czy strona kryjąca się za tym odnośnikiem to to strona którą aktualnie oglądamy jest częścią tego samego serwisu, czy kieruje do innego , czy strona na której byliśmy przed chwilą.

Odnośniki powinny mieć charakter opisowy, np. zamiast pisać:

Jeśli chcesz pobrać przeglądarkę Firefox, kliknij tutaj

powinno być napisane:

Jeśli chcesz, pobierz przeglądarkę Firefox

Wszystkie linki w serwisie powinny działać i być aktualne.

Dostępność strony internetowej

Dostępna dla wszystkich

Dostępność, oznacza, że treść strony powinna być dostarczona w niezmienionej postaci do każdego użytkownika, w szczególności osoby niepełnosprawnej. Każdy użytkownik przeglądający stronę, niezależnie od wieku, wykształcenia, stopnia niepełnosprawności, używanego sprzętu, oprogramowania, miejsca czy szybkości łącza powinien tak samo łatwo odnaleźć interesującą go treść.

Niepełnosprawni

„Jeśli nie będzie dostępna dla niepełnosprawnych, to co z tego? Ale normalnie będzie działało, tylko niepełnosprawnym się nie wyświetli? Tak?”

Nie. Tracisz dużo więcej niż myślisz.

Możesz popełnić karygodny błąd i pominąć przy tworzeniu strony tą grupę odbiorców, ale musisz mieć świadomość tego, że:

Szereg osób z typowymi ułomnościami nie może zobaczyć strony tylko dlatego, że nie pomyślał o nich tworzący stronę. Przykładem mogą być daltoniści, którzy po wielu z kolorowych, pięknych stron nie potrafią się poruszać, bo nie rozróżniają elementów nawigacyjnych, których kolorystyka została źle dobrana.

Dla użytkownika niedowidzącego lub z wadą wzroku mała czcionka może być bardzo uciążliwa, a brak możliwości jej powiększenia może uniemożliwić dostęp do zawartości serwisu.

Sprawdź, jak zachowuje się strona po powiększeniu lub zmniejszeniu czcionki (w nowoczesnej przeglądarce skrót Ctrl++, Ctrl+- lub Ctrl+kółko myszy, także w menu „widok”)

Nie każdy użytkownik używa myszy do obsługi komputera. Strona powinna dać się sprawnie przeglądać wyłącznie za pomocą klawiatury.

Sprawdź czy łatwo można się poruszać używając wyłącznie klawiatury, za pomocą klawiszy TAB,  Enter lub specjalnych klawiszy skrótów.

Należy sobie zdać sprawę z tego, że — wbrew pozorom — z internetu korzystają także osoby niewidome. Czytniki ekranu (screen-readers) używane przez osoby niewidzące lub niedowidzące pozwalają na przekształcenie tekstu na dźwięk.

Czy wiesz, że prawidłowo przygotowana galeria zdjęć, może być również dostępna dla osoby niewidomej? Tak, wystarczy żeby zdjęcia były opisane za pomocą tekstu.

Osoba niewidoma, może sobie radzić za pomocą słuchu. A co z osobami które są niewidome i niesłyszące? Takie osoby też powinny mieć dostęp do strony. Korzystają także z czytników ekranu, lub urządzenia wyświetlającego tekst alfabetem Braille’a, pozwalając osobie niesłyszącej za pomocą dotyku odczytać zawartość strony.

Film na temat dostępności

Poniższy film pokazuje jak czytniki ekranu działają w praktyce.

Zainstaluj Flash Player!

Możesz zainstalować testową wersję czytnika Jaws oraz Syntezator mowy Ivona dla Windows, lub EmacSpeak dla Linuxa, żeby sprawdzić jak strona jest czytana przez screen-reader.

Przy tworzeniu dobrej witryny, należy założyć, że każdy odwiedzający stronę jest niepełnosprawnym. Dzięki takiemu podejściu uzyskasz stronę łatwą w nawigacji, przyjazną i użyteczną na czym skorzystają wszyscy użytkownicy.

Absolutnie nie można zakładać strategii, że jeśli strona nie będzie dostępna dla niepełnosprawnych, nie wyświetli się im jakiś element — to nic nie szkodzi, przecież wszystkim się wyświetli, tylko niepełnosprawnym nie.

Dopilnowanie zgodności z wytycznymi dostępności stron formułowanymi przez W3C (organizację zajmującą się standaryzacją internetu) jest jednym z czynników świadczących o rzetelnym podejściu wykonawcy do tworzenia strony.

Różnorodność sprzętu

Każdy z internautów przegląda internet w innych warunkach. Z komputera stacjonarnego lub przenośnego, telefonu komórkowego lub czytając wydruki stron z drukarki zdala od komputera. Użytkownicy dysponują lepszym lub gorszym komputerem, szybszym lub wolniejszym łączem, mniejszym lub większym monitorem wyświetlającą określoną ilość kolorów.

Strona internetowa powinna zostać zaprojektowana tak, aby na każdym z tych urządzeń była tak samo funkcjonalna. Oczywiście, dodatkowym atutem będzie to, jeśli oprócz prawidłowego działania będzie miała identyczny wygląd.

Możesz sprawdzić jak wygląda pogdląd wydruku strony, jak zachowuje się strona po zmniejszeniu okna przeglądarki lub jak długo ładują się elementy strony na różnym sprzęcie i oprogramowaniu.

Na różnych monitorach, przy różnej rozdzielczości ekranu, prawidłowo wykonana strona internetowa powinna prezentować tą samą treść i być tak samo łatwa w nawigacji.

Sprawdź, jak strona wygląda po otwarciu w przeglądarce telefonu komórkowego. Sprawdzić z komputera możesz uruchamiając symulator opera mini.

Zmień rozmiar okna przeglądarki (np. na pół ekranu) i zobacz, jak zachowuje się strona. Przy takim rozmiarze powinna zachować swoją czytelność i łatwość nawigacji.

Różnorodność oprogramowania

Przeglądarki

Każda strona powinna być przygotowana do oglądania na dowolnym systemie operacyjnym. Każdy system oferuje szereg różnorodnych przeglądarek. Należy sprawdzić jak wyświetlają stronę najpopularniejsze przeglądarki na różnych systemach operacyjnych.

Sprawdź jak strona zachowuje się w różnych przeglądarkach internetowych. Możesz skorzystać z narzędzi online, żeby zobaczyć jak strona wygląda w innych środowiskach:

Strona powinna zostać przygotowana tak, aby nie wymagała od użytkownika instalowania dodatkowego oprogramowania ani dodatków do przeglądarek. Jeśli któryś z elementów strony nie może być z jakiegoś powodu wyświetlony (np. z powodu nietypowych ustawień przeglądarki) użytkownik powinien zostać poinformowany dlaczego tak się dzieje i w jaki sposób można to poprawić.

Flash

Elementy Flash są atrakcyjną formą prezentacji wizualnej. Na stronach występują zwykle w postaci animacji.

Sprawdzić, czy element strony jest wykonany we Flash’u można klikając na nim prawym przyciskiem. Jeśli w menu kontekstowym wyświetli się pozycja „About Flash Player...”, jest to element wykonany w technologii Flash.

Nie ulega wątpliwości że flash jest potężnym narzędziem, szczególnie w połączeniu z językiem programowania Action Script który jest jego integralną częścią.

Dlaczego zwykle flash to nie jest najlepsze rozwiązanie?

Atrakcyjność wizualna, to główna zaleta elementów Flash. Ale oprócz ciekawego wyglądu, mają wiele wad, o których należy pamiętać:

Najczęściej spotykanym błędem jest tworzenie menu nawigacyjnego we Flash’u, które jest niedostępne i uniemożliwia dużej grupie użytkowników, a także robotom wyszukiwarek poruszanie się po stronie.

Jeśli z jakiegoś powodu (np. konieczność prezentacji filmów, animacji) serwis musi zostać wykonany z użyciem Flash, należy pamiętać aby:

Rozwiązaniem wyjątkowo denerwującym użytkownika jest tzw. intro do strony, czyli strona powitalna wykonana we Flashu. Długo się ładuje, często wymaga zainstalowania nowej wersji Flash Player i z reguły nie jest tym czego internauta szuka.

Strona powitalna to bardzo kiepskie rozwiązanie. Jedynym argumentem uzasadniającym stworzenie strony powitalnej jest wyświetlenie informacji o zawartości wyłącznie dla dorosłych lub strony możliwej do obejrzenia pod pewnymi warunkami, które wcześniej użytkownik musi zaakceptować. Jeśli koniecznie potrzebujesz takiej strony, powinna być jak najprostsza, wykonana bez użycia Flash.

Na ocenę tego, czy strona się podoba, czy nie potrzeba zaledwie 50 milisekund. W tak krótkim czasie użytkownik nie oceni animacji.

Dlaczego flash może się okazać dobrym pomysłem?

Flash doskonale nadaje się do:

Dlaczego zleceniodawcy chcą Flash’a?

Fruwające chmury, latające skanujące światło, migający biznesmeni to klasyka stron z lat ’90. Przeciętny zleceniodawca wyobraża sobie stronę z Flashowym topem, w kolumnach jak zestawienie tabelaryczne i — koniecznie — zdjęciami przejściem do przezroczystości.

A kto jest przeciętnym zleceniodawcą? Ktoś, kto się na tym nie zna, nigdy nie będzie korzystał z tej strony i prawdopodobnie nie jest osobą niepełnosprawną.

Przeciętny zleceniodawca myśli jest jak reklamodawca. Chce żeby strona wyglądała jak telewizyjna reklama. A co robi przeciętny telewidz widząc reklamę? Zmienia kanał na inny. Dokładnie tak samo jest w internecie.

Zobacz jak trafnie podsumowali reklamodawców Mann i Materna:

Zainstaluj Flash Player!

Chcesz się reklamować agresywnie? Bądź świadom tego, że nikt tego nie lubi.

Informacje można podać użytkownikowi w bardziej wyrafinowany sposób. Sztuką jest zrobić to sprytnie, tak aby nie wykorzystywać agresywnych środków wyrazu i zatrzymać użytkownika na dłużej w swoim serwisie.

Roboty wyszukiwarek

Już na etapie tworzenia strony należy myśleć o strategii jej promocji.

Wyszukiwarki internetowe, takie jak google.pl przeszukują i katalogują strony w internecie za pomocą specjalnych programów zwanych robotami. Większość z tych robotów, tak samo jak czytniki ekranowe, nie potrafi rozpoznać informacji w postaci innej niż tekstowej, takiej jak: grafika, filmy i animacje typu Flash.

Aby strona mogła być skatalogowana przez roboty wyszukiwarek, musi zostać odpowiednio przygotowana.

Treść wszystkich informacji na stronie musi dać się przedstawić w postaci wyłącznie tekstowej. Z reguły także, aby uzyskać wysokie pozycje w wyszukiwarkach, wszystkie teksty powinny zostać zoptymalizowane pod względem słów kluczowych.

Słowa kluczowe, to najczęściej pojawiające się słowa w ważnych elementach strony. Częstotliwość występowania słów kluczowych w stronie możesz sprawdzić za pomocą analizatora słów kluczowych.

Gwarancją uzyskania wysokiej pozycji w wynikach wyszukiwania Google jest:

Estetyka

„De gustibus non disputandum est”. O gustach się nie dyskutuje.

Walory estetyczne strony są bardzo ważne, szczególnie w stronach o komercyjnym lub stricte reklamowym charakterze.

Ale estetyka nie jest najważniejsza. Jakiż jest zysk z posiadania pięknej strony jeśli 25% użytkowników nie może jej zobaczyć z powodu złego wykonania, a kolejnym 25% opowie o tym, że strona nie działa?

Przpomnij sobie, co się dzieje, kiedy potrzebujesz coś z internetu. Najpierw szukasz, czasem krótko, czasem dłużej. Jeśli się nie zniechęcisz wyszukiwaniem, bierzesz to co potrzebujesz z tej strony do której dotrzesz jako pierwszej. Nie zastanawiasz się nawet przez chwilę, że strona nie miała animacji, muzyki w tle.

Trudno określić obiektywnie, co jest piękne a co nie i gdzie przebiega granica. Fachowiec znający się na sztuce stwierdzi „ależ to piękne” a przeciętny odbiorca subiektywnie powie, że „to jest szpetne”. Za tydzień oceny się zmienią.

Do konstruktywnego krytykowania trzeba posiadać odpowiednią wiedzę popartą dużym doświadczeniem. Ale:

Kilka podstawowych zasad na podstawie których można powiedzieć, że strona nie straszy:

Jakość techniczna

Sprawy techniczne rzutują bezpośrednio na działanie strony. Pierwszym objawem niedociągnięć technicznych jest zbyt wolne ładowanie się strony, które może być spowodowane zbyt słabym serwerem, za dużym obciążeniem lub złym zaprojektowaniem aplikacji.

Użyte technologie

Przyjęcie technologii wykonania serwisu www zależy przede wszystkim od tego jakie funkcje ma pełnić strona docelowo.

Technologia powinna być wyłącznie narzędziem służącym osiągnięciu wybranego celu. Powinna umożliwiać szerzej opisaną wcześniej dostępność i użyteczność

Jako aktualnie obowiązujące standardy dla typowych stron można przyjąć: XHTML Strict w wersji 1.0 oraz CSS 2.1

XHTML to język znaczników pozwalający na zbudowanie szkieletu logicznego strony oraz wypełnieniu go tekstem.

CSS to arkusze styli pozwalające na dowolną zmianę szaty graficznej treści strony.

Zastosowanie połączenia XHTML i CSS pozwala na rozdzielenie warstwy wizualnej strony od jej treści. Dzięki temu, zmiana kolorystyki całego serwisu, układu elementów może zająć jedynie kilka minut, a zmiany w treści/tekście można zrobić bez zbędnej gimnastyki.

Przygotowaną w taki sposób szatę graficzną serwisu można bardzo łatwo zmienić. Przykładem na to może być strona csszengarden.com, która pokazuje, jak odpowiednio przygotowaną surową treść strony można łatwo ubrać na różne sposoby za pomocą CSS. Wybierz projekt szaty graficznej i zobacz jak tą samą treść można ułożyć i umalować dzięki CSS.

Wykonawca strony powinien zaprojektować osobne arkusze stylów dla wyświetlania na ekranie komputera, osobne dla wydruku na drukarce a jeszcze inny wygląd do wyświetlania na małym ekranie komputera przenośnego lub telefonu.

Włącz podgląd wydruku, żeby sprawdzić czy strona jest zoptymalizowana do wydruku (usunięte niepotrzebne elementy zużywające niepotrzebnie papier i atrament, poprawiona typografia itp.)

Jeśli używasz nowoczesnej przeglądarki, możesz zobaczyć jak strona wygląda bez zastosowania stylu lub ze zmienionym stylem zmieniając opcje w menu „widok > styl strony”.

Poprawność kodu

Poprawność kodu strony internetowej to absolutne minimum, które powinna spełniać każda dobra strona www. Obowiązkiem każdego tworzącego stronę internetową jest dopilnowanie aby strona była napisana zgodnie z obowiązującymi standardami, specyfikacjami i wytycznymi dla danej technologii.

Uzyj walidatora, żeby sprawdzić poprawność kodu.

„Poprawność kodu” nie oznacza jedynie technicznego braku błędów. Kod powinien być poprawny semantycznie, czyli każdy z tagów powinien być użyty zgodnie z jego właściwym, logicznym przeznaczeniem.

Dopiero poprawność techniczna (zgodność ze specyfikacjami i działanie we wszystkich przeglądarkach) i semantyczna (logiczna) idące ze sobą w parze świadczą o wysokiej jakości kodu.

Bezpieczeństwo serwisu

Każda strona serwisu internetowego jest potencjalnie narażona na niebezpieczne działania osób trzecich: hakerów, spamerów, konkurencji itp. Wszystkie niepożądane działania powinny zostać przez twórców strony przewidziane, a strona zabezpieczona w odpowiedni sposób.

Najprostszym testem zabezpieczeń może być na przykład wpisanie w polu formularza nietypowych znaków, na przykład ciągu znaków „' or 1=1 --” albo „<script>test” i sprawdzenie, jak została wyposażona w obsługę błędów. Każde nieprawidłowe wprowadzenie danych, powinno być wyłapane i potwierdzone wyświetleniem odpowiedniego komunikatu.

Zabezpieczenia antyspamowe

Na każdej witrynie internetowej, powinien się znaleźć adres e-mail, aby móc się skontaktować z twórcą strony. Korzystając z tego, że adresy e-mail są upubliczniane, spamerzy tworzą roboty, które je masowo zbierają i wysyłają na nie niechciane wiadomości, czyli spam.

Ten sam proceder dotyczy formularzy zamieszczanych na stronach www. Niezabezpieczone formularze są wykorzystywane do rozsyłania spamu lub wirusów.

Adres e-mail umieszczony na stronie www należy zabezpieczyć. W jaki sposób sprawdzić sprawdzić te zabezpieczenia, nie mając o tym pojęcia? Chyba najprostszą drogą jest po prostu zapytanie właściciela serwisu o to, jaką oglądalność ma jego serwis i ile niechcianych wiadomości dostaje.

Możesz sprawdzić, czy adres IP strony którą chcesz sprawdzić jest w bazie ORDB (baza adresów komputerów, które są znane z rozsyłania spamu).

Dopracowanie szczegółów

Dużą część pracy, do której nie wszyscy twórcy przywiązują należytą uwagę, stanowi dopracowanie szczegółów, które są zwykle mniej istotne, takich jak:

Audyt stron www

Jeśli zależy Ci na dokładnym sprawdzeniu jak został wykonany dany serwis, możesz zamówić wykonanie audytu witryny w firmie, która zajmuje się tym zawodowo. Otrzymasz szczegółowy raport i analizy wielokryterialne pod każdym kątem.

Tester all-in-one

Dobrym wskaźnikiem technicznej jakości wykonania strony jest uzyskanie dobrego wyniku w ogólnej ocenie którą wystawia tester jakości stron online KWA KWA lity. Wynik testu jest reprezentowany przez ilość punktów. Najlepszy wynik to 255/255, najgorszy to 0/255.

Linki dla webmasterów

Poniżej trochę linków, które każdy kto tworzy strony internetowe — amatorsko lub zawodowo — powinien znać.

Podstawowe

Walidatory

Walidatory, to narzędzia pozwalające sprawdzić poprawność kodu. Nie są wyrocznią, bo to tylko automaty, ale są niezbędnym narzędziem wyłapującym pomyłki.

Różne

Rozszerzenia do Firefox’a

Inne ciekawe strony: