Użyteczność stron internetowych

2 MAJA 2016

Dla wielu webmasterów użyteczność (usability) stron internetowych to zupełnie obce pojęcie. W wyniku niewiedzy lub powierzchowności w tworzeniu witryn, w sieci pojawiają się małowartościowe, nieintuicyjne i trudne w obsłudze serwisy internetowe, co zwykle wiąże się z utratą potencjalnych klientów.

Na użyteczność stron internetowych mają wpływ:

Dobra nawigacja to podstawa dokumentów hipertekstowych – to ona pozwala na szybkie „przejście” do odrębnych elementów serwisu jak również pozwala na łączenie ze sobą poszczególnych komponentów strony www w jedną, spójną całość. Nawigowanie po stronie musi być przede wszystkim intuicyjne i powinno w łatwy i szybki sposób prowadzić użytkownika do poszukiwanej informacji. Dobra nawigacja na stronie umożliwia szybką orientację w serwisie – wiesz gdzie jesteś, gdzie możesz pójść, w jaki sposób możesz się tam dostać, jak możesz powrócić do miejsca, w którym już byłeś i wiesz gdzie już byłeś...
Biorąc pod uwagę aspekt dostępności serwisu, należy zwrócić uwagę na to, czy osoba, która przykładowo jest osobą niepełnosprawną lub po prostu nie ma myszki, z łatwością będzie mogła przemieszczać się po poszczególnych elementach witryny.

Według Web Design Practises projektanci stron internetowych w 89% umieszczają główne menu u góry strony, pozostała część web designerów menu sytuuje w postaci paska nawigacyjnego w lewej kolumnie. Co ciekawe, przeprowadzone badanie wykazało, że obszary, w które użytkownicy kliknęli, by przejść w inne miejsce tego samego serwisu, to nie tylko obszar treści strony, nagłówki strony, ale w równej mierze lewa kolumna jak i prawa kolumna serwisu (tendencja ta spowodowana jest popularyzacją blogów, gdzie zwykle nawigacja zlokalizowana jest po prawej stronie).

To, co pozwala na szybkie określenie swojej lokalizacji w serwisie (szczególnie w bardzo rozbudowanych serwisach) to breadcrumbs, czyli menu okruszkowe. Breadcrumbs zwykle przyjmuje postać poziomego paska, usytuowanego u góry strony, a jego struktura wygląda następująco:
Strona główna > Strona sekcji > Strona podsekcji...

Wady i zalety poszczególnych rozwiązań przy projektowaniu głównego menu strony:

  • Menu poziome
    z pewnością nie zabiera wiele miejsca i jest bardzo dobrze zauważalne, jednak taki układ ogranicza liczbę pozycji i często uniemożliwia dodanie (przykładowo wraz z rozwojem firmy) nowej pozycji w menu. Poza tym w poziomym menu nazwy linków muszą być krótkie – najlepiej jedno słowo. Poziomy układ menu sprawdza się wtedy, gdy struktura serwisu jest płytka, czyli nie wymaga podmenu, a także wtedy, gdy mamy do czynienia z niewielką liczbą głównych kategorii (6-8 linków) lub gdy mamy pewność, że liczba kategorii najwyższego poziomu w przyszłości nie będzie wzrastała.
  • Menu poziome z podmenu w zakładkach
    posiada te same zalety i wady menu poziomego, ale trzeba zwrócić uwagę na to, że taka forma menu pozwala na wyraźne zaznaczenie w serwisie miejsca, w którym aktualnie się znajdujemy, a ponadto użytkownik bez problemu rozróżnia kategorie główne od ich podmenu i widzi związek między nimi. Do wad tego rodzaju menu można zaliczyć zmniejszenie widoczności obszaru treści strony, ponieważ dwupoziomowe menu, obniża content. Oprócz tego graficzne zakładki zabierają więcej miejsca niż zwykłe linki.
  • Pionowe menu boczne
    sprzyja pomieszczeniu długich list linków, umożliwia wiele poziomów nawigacji i wyraźnie oznacza ich relacje. Ponadto jest dobrze skalowalne, czyli w przyszłości bez problemu można rozbudować je o kolejne linki – nawet o długich nazwach. Wadą pionowego menu jest to, że pochłania spory obszar na stronie, może też być nieco trudniej zauważalne niż menu poziome.
    Problemem może też być niewidoczność wybranej pozycji, jeśli znajdzie się poniżej pierwszego ekranu (linii złamania strony). Pionowe menu stosuje się wtedy, gdy mamy do czynienia z dużą liczbą głównych kategorii, gdy mamy głęboką strukturę nawigacji, a także wtedy, gdy wiemy, że w przyszłości menu będzie rozbudowywane.
    Co ważne – pionowe menu boczne może przyjąć charakter podmenu dla menu poziomego.
  • Menu kaskadowe
    z jednej strony oszczędza miejsce na stronie, a z drugiej jest dość trudne ponieważ wymaga zapamiętywania – dopóki użytkownik nie najedzie na menu, nie widzi dostępnych opcji. Oprócz tego menu rozwijalne w dół, zasłania treść strony. Zaletą tego rodzaju menu jest fakt, że użytkownicy są przyzwyczajeni do menu kaskadowego dzięki instalowanym przez nich systemom operacyjnym, jednak wadą jest to, że menu rozwijalne np. w Windows nie jest lubiane przez użytkowników. Menu kaskadowe powinno pełnić funkcję menu skrótowego do niższych poziomów struktury serwisu i raczej powinno być stosowane jako lista poleceń w aplikacjach internetowych, ponieważ jako menu rozwijalne na stronie nie umożliwia wyraźnego zaznaczenia aktualnie wybranej opcji.
  • Nawigacja przez treść
    sprawdza się w przypadku portali, gdzie cała struktura opiera się na hiperłączach, których często dokonuje się aktualizacji treści. Taka nawigacja jest bardzo naturalna dla użytkowników ponieważ nawigowanie przyjmuje charakter przeglądania treści strony. Zaletą również jest to, że cała strona przeznaczona jest jednocześnie na treść i nawigowanie.
    Wadą nawigacji przez treść jest brak możliwości szybkiego powrotu do każdego poziomu struktury przez menu (powrót możliwy tylko przyciskowi Wstecz) oraz niemożność dokładnego zaznaczenia w menu aktualnej pozycji użytkownika w serwisie.

Projektując nawigację do sieci, należy również pamiętać o konsekwentnym oznaczaniu linków. Jeśli raz zastosujemy np. kolor niebieski z podkreśleniem – trzymajmy się tego wyboru w całym serwisie.
To ułatwi identyfikację pozostałych linków.

Interakcje strony z zachowaniami użytkowników

Dobra strona to taka, na której czujemy się jak w domu – wiemy, gdzie co jest lub podejrzewamy, gdzie może się znaleźć. Oprócz tego wszystko jest prawidłowo oznaczone – etykieta z mąką znajduje się na pojemniku z mąką, a etykieta z cukrem na pojemniku z cukrem, gorzej gdy pojemnik jest pusty...
Wszystko można z łatwością odnaleźć, czujemy się bezpiecznie, wszystko pod ręką, aż się nie chce wychodzić z domu, bo po co skoro wszystko mamy... Podobnie jest ze stroną internetową, projektanci powinni tworzyć ergonomiczne strony i takie, które nie zmuszają do ich opuszczenia...
Co na to wpływa? Między innymi intuicyjne rozmieszczenie poszczególnych elementów strony:

  • Logo
    Prawdę powiedziawszy niewielu użytkowników wie, że logo firmy na stronie powinno być „klikalne” i powinno przenosić do strony głównej. Ci, którzy zdają sobie z tego sprawę to zwykle osoby, które interesują się projektowaniem stron internetowych. Dlatego warto w title'u linku z logo firmy wpisać „Strona główna”. Wówczas użytkownik po najechaniu na logo zorientuje się dokąd prowadzi obrazkowy odnośnik.
    Przyjęło się, że logo firmy lokalizowane jest w lewym górnym rogu i to jest najbardziej intuicyjne miejsce na eksponowanie znaku firmowego.
  • Wyszukiwarka
    Powinna być prosta w obsłudze, ewentualnie może posiadać link do opcji z wyszukiwaniem zaawansowanym. Wyszukiwarka powinna być zlokalizowana w prawej części strony (raczej górnej).
  • Logowanie
    Panel z logowaniem do strony, by móc móc powiedzieć, że znajduje się w intuicyjnym miejscu, powinien zostać usytuowany w prawym górnym rogu. Dobrze zaprojektowany interfejs logowania powinien również uwzględniać opcję rejestracji, przypomnienia hasła oraz zapamiętywania go na komputerze. Trzeba również zwrócić uwagę na to, który element w panelu logowania jest istotniejszy: link z logowaniem czy link z rejestracją. Link, button czy inne oznaczenie opcji Zaloguj powinno być wyraźniejsze, bardziej rzucające się w oczy aniżeli Rejestracja, ponieważ jest znacznie częściej używane przez użytkownika niż rejestracja, z której praktycznie korzysta się tylko raz.
  • Koszyk
    Czyli to, co jest podstawą systemów e-commerce. Trudno sobie wyobrazić duży sklep bez koszyka... Dostęp do niego powinniśmy mieć zaraz po wejściu do sklepu, w przypadku sklepu internetowego – u góry strony. Oznaczenie koszyka powinno być jasne i wyraźne – nie odbiegajmy od standardów – i nie zamieniajmy naszego stabilnego koszyka np. na torbę... Najbardziej sprawdza się opcja Mój koszyk i ikonka koszyka...
  • Newsletter
    Jeśli planujemy rozsyłać mailem regularnie lub nieregularnie do wszystkich zainteresowanych gazetkę z najważniejszymi informacjami, nowościami, promocjami itd., to pamiętajmy o formie zapisu do newslettera, który powinien być jak najprostszy – wystarczy jedno pole formularza, gdzie wpisujemy adres mailowy, na który ma być wysyłany newsletter i dwie opcje: zapisz do newslettera i wypisz z newslettera. Ta druga opcja jest bardzo ważna, bo co ma zrobić internauta jeśli już nie chce otrzymywać newsów z danej strony? Założyć filtr w swoim kliencie pocztowym, co przyczyni się do utraty jego zaufania do naszej firmy?
Czytelność strony

Do czytelności strony internetowej przyczynia się jej typografia, grafika i kolorystyka zastosowana w witrynie. I o tym poniżej...

Typografia

Typografia typografii nie równa – inne zasady (wytyczne) panują w typografii do prasy, a inne do Internetu. Rozmaite pastelowe i kontrastujące „cudeńka” można znaleźć w Internecie – jasnoróżowy tekst na jasnoniebieskim tle ładnie prezentuje się ale np. na t-shircie, nie w Internecie! Po co zamieszczamy teksty na swoich stronach skoro i tak nikt nie jest w stanie ich odczytać? Kontrast pomiędzy barwą tekstu a kolorem tła powinien być optymalny, tak, by czytanie nie męczyło. Stosowanie dwóch kontrastujących barw nie jest najlepszym rozwiązaniem, lepiej zastosować np. bardzo ciemny odcień szarości na białym tle, niż czarny tekst na białym tle.

Wyrównanie tekstu to kolejny problem, który dotyka projektantów stron internetowych – doceńmy pracę twórców określonego kroju pisma i nie wyrównujmy tekstu do obu stron (justowanie), to jest dobre ale w gazecie, nie na stronie internetowej, gdzie dziury pomiędzy wyrazami wyglądają strasznie – nie po to projektanci pisma pracują nad światłem między znakami, żeby później ich pracę zniweczyć... Strona powinna „oddychać”, więc nie bójmy się pustych miejsc na stronie. Aby dobrze się czytało, interlinia (line-height) powinna osiągać co najmniej 140% rozmiaru tekstu. Wprowadź do tekstu nagłówki i akapity! Pisząc długi artykuł zadbaj o to, by stosować porozdzielane akapity i „podtytuły” do rozdziałów.

Kolejna rzecz, to rozmiar fonta, zbyt mały odpada, zbyt duży także. Optymalna wielkość pisma to 10-12 pikseli, z możliwością jego powiększenia. Tekst musi być czytelny! Mieszanie stylów pisma – wszystko z głową! Jeśli przykładowo każdy nagłówek na stronie zapiszemy innym krojem pisma i innym rozmiarem, to nikt nie będzie w stanie w łatwy i szybki sposób nawigować po stronie. Prawdopodobnie zniesmaczony użytkownik opuści witrynę w kilka sekund... Poza tym, jeśli projektując stronę wybierzesz jakiś niestandardowy krój pisma, taki, który Ty posiadasz, a pozostali użytkownicy nie, i nie zdeklarujesz w stylach CSS zastępczego i dostępnego dla wszystkich użytkowników fonta, wówczas dany krój zostanie zastąpiony innym dostępnym fontem (w systemie operacyjnym Windows będzie to: Arial, Arial Black, Baskerville Old Face, Comic Sans MS, Courier New, Georgia, Impact, Symbol, Times New Roman, Trebuchet MS, Verdana lub WinDings), co prawdopodobnie wprowadzi chaos w witrynie i zburzy panującą w niej harmonię.

Grafika i kolorystyka

Najważniejsza na stronie internetowej jest informacja, to dla niej każdy z nas wchodzi do Internetu. Grafika to dodatek, który może osiągać status priorytetowego na stronach grafików, malarzy, twórców – ogólnie artystów. Estetyka grafiki to podstawa, nigdy nie powinna zwracać większej uwagi niż sama informacja, a z pewnością nie powinna utrudniać odnalezienia informacji. Tak więc, nie wrzucajmy na stronę wszystkiego, co nam się podoba – zredukuj na swojej stronie liczbę jaskrawych, drażniących kolorów, migających i świecących, ruchomych pierdółek. Nie zamieszczaj również na swojej stronie dużych i ciężkich zdjęć, np. żywcem skopiowanych z aparatu cyfrowego. Pomijając fakt, że nie będą się one ładnie prezentować na stronie, to będą się bardzo długo ładować – waga wszystkich obrazków na stronie nie powinna przekraczać 100-150 kb.

W dzisiejszych czasach internauci przeglądają bardzo szybko strony, dlatego preloadery (strona startowa z dynamicznym elementem wskazującym na poziom załadowania witryny) sprzyjają zniecierpliwieniu użytkowników i często z całkowitej rezygnacji z wejścia na stronę.
Z czego jeszcze powinniśmy zrezygnować projektując grafikę do strony? Z obrazkowych linków, wyglądających jak banner reklamowy. Zjawisko ślepoty bannerowej (banner blindness) zostało zauważone i opisane już około 10 lat temu, polega ono na nieświadomym ignorowaniu reklam przez użytkowników. Stąd wysokie prawdopodobieństwo niezauważalności - przedstawionej w takiej formie - informacji na stronie.

Przy projektowaniu do sieci stosuje się model kolorów RGB, dodatkowo projektując do Internetu wykorzystujemy kod składający się z sześciu znaków, np. kolor czerwony to #FF0000 (zapis heksametryczny).

Obsługa błędów

Projektowanie komunikatów o błędach na stronie, często jest ignorowane przez projektantów. Jednak w sytuacji, gdy występuje błąd, użytkownik prawdopodobnie opuści witrynę. Dlatego tak istotne jest, by komunikaty o błędach były dobrze zaprojektowane: spójne – w obrębie całej witryny powinny wyglądać tak samo i zawierały sensowną informację: jaki błąd wystąpił, gdzie wystąpił (w którym miejscu) oraz w jaki sposób należy dalej postępować.

Zastosowane technologie na stronie

To, czy strona internetowa będzie prawidłowo wyświetlana na monitorze i czy będzie dostępna dla każdego z użytkowników sieci nie powinno być zależne od technologii w jakiej została wykonana. A jednak... W przypadku, gdy strona wykonana jest w technologii Flash, a użytkownik nie ma zainstalowanej odpowiedniej wtyczki – nie zobaczy dynamicznych elementów witryny. Bardzo dobrą alternatywą dla Flasha jest JavaScript.