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 ma 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:
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.
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:
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).
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ć.
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. O tym wkrótce.