Ścieżki powrotu – breadcrumbsy

Ścieżki powrotu – breadcrumbs – pokazują Twoją aktualną pozycję w hierarchii witryny. Ścieżki powrotu pokazują drogę od strony głównej do aktualnego położenia. Jest to doskonałe uzupełnienie całego systemu nawigacji na naszej stronie.

Steve Krug sugeruje by umieszczanie breadcrumbs’ów miało miejsce w górnej części witryny. Jak słusznie przyznaje umieszczenie ich w dolnej części sprawia, iż rywalizują z dolnym menu (jeśli takowe istnieje), a taka sytuacja powoduje niepotrzebne myślenie użytkownika, która nawigacja jest tą “poprawną”. Od siebie zaś dodam, iż najlepiej jest podkreślić dodatkowe ostatni element (oznaczenie obecnej pozycji), gdyż często spotykam strony, których ścieżka powrotu zdaje się być linkami wstecz, w rzeczywistości jednak ostatni link jest linkiem do obecnej pozycji.

Podsumowując breadcrumbs pokazują trasę, którą dany użytkownik podążał do danego miejsca na naszej stronie. Ułatwiają użytkownikowi nawigację po stronie i zwiększają jego orientację w serwisie. Nalezy je traktować jako element dodatkowy do nawigacji, a nie nawigacja sama w sobie. Jakob Nielsen podaje, że aż 30% kliknięć w internecie (wszystkich) to kliknięcia przycisku Wstecz. Jest to kolejny argument na wykorzystywanie breadcrumbs’ów u siebie na stronie.

Komunikaty błędów

Bardzo ważnym elementem strony internetowej są komunikaty o błędach. Komunikaty te tworzone są najczęściej przez osoby związane stricte z działem technicznym, tworzącym daną infrastrukturę. Jest to błędne podejście – komunikaty powinny być tworzone przez dział marketingu, który potrafi najlepiej sformułować informację na temat tego co się stało oraz jakie jest wyjście z sytuacji.

Bardzo częstym błędem programistów jest całkowite pominięcie spraw związanych z błędem 404 – nie odnaleziono strony. Najczęstszym powodem takich błędów są źle sformułowane linki zewnętrzne czy wewnętrzne. Perfumeria internetowa tagomago.pl (rysunek obok) nie zadbała o to, by swoim użytkownik – na wypadek błędu 404 – podrzucić stronę internetową, która chociaż w ograniczony sposób pomoże użytkownikowi. Z pomocą tutaj przychodzi jednak sama przeglądarka, która daje możliwość przejścia do strony głównej. Nie zmienia to faktu, iż w tym miejscu powinna znajdować się rozbudowana strona błędu, “ratująca” użytkownika.

Kolejnym negatywnym przykładem jest strona spółki akcyjnej, firmy Black Red White, produkującej meble. Tam programista jako wyjście z sytuacji zaimplementował przekierowanie 301 na stronę główną z informacją, iż nieznaleziono podkategorii. Użytkownik, który w jakiś sposób trafił na stronę poprzez błędny link zewnętrzny czy wewnętrzny (nie znalazłem takiego) zostaje przekierowany do punktu wyjścia – strony głównej z marnym komunikatem. Dodatkowym negatywnym aspektem jest wielkość samego komunikatu i jego imiejscowienie – pod krzyczącym banerem jest on zwyczajnie niewidoczny. Dopiero po którymś wejściu z kolei doszło do mnie, że jednak jest komunikat o błędzie. Właścicielom strony polecałbym strony dedykowanej takim błędom, w której nie byłoby miejsca na jakiekolwiek banery reklamowe, a precyzyjna informacja na temat szybkiego wyjścia z problemu.

Błędnie sformułowane komunikaty lub ich brak powoduje z reguły poczucie niepewności i zagubienia po stronie użytkownika. Niejednokrotnie dochodzi do sytuacji, że użytkownik obwinia samego siebie za każdy błąd systemu. Podświadomie czuje, że robi coś nie tak jak powinien. Jakob Nielsen w swojej książce nie poruszył szerzej tego tematu, natomiast Tomasz Karwatka w swojej książce pt.: “Usability w E-Biznesie” dość dokładnie opisał ten temat.

 A tutaj chciałbym pokazać absolutne the best of the best. Podczas rejestracji konta na YouTube zapomniałem zaznaczyć pola określającego płeć. Komunikat jest sformułowany w ten sposób, że w zasadzie nie wiadomo o co chodzi. Na początku sądziłem, że ominąłem pole, które przypisuje tworzony kanał do odpowiedniej kategorii, np. IT, Media, Polityka, etc. Jednak po chwili stwierdziłem, że przecież nie ma takiego pola, więc błąd popełniłem w formularzu. W końcu doszedłem: chodzi o płeć :) Sami przyznacie, że ten komunikat jest opisany w bardzo ciekawy sposób. Jak widać wpadki w tym zakresie nie zdarzają się tylko i wyłącznie programistom początkującym (chociaż tutaj plamę dał copywriter przepisujący teksty z angielskiego). Koncern Google też odnotowuje czasem wpadkę z zakresu użyteczności.

Odnośniki niezmieniające koloru po kliku

Świat stron internetowych, to jedyne środowisko, w którym możliwa jest “teleportacja”. W ciągu sekundy możemy przenieść się z jednego obszaru sieci w drugi. Za pomocą kilku kliknięć możemy przeglądać najbardziej zakotwiczone zasoby pojedynczej strony internetwej, jak i przenieść się do stron dajmy na to z Hondurasu. O ile migracja użytkowników między stronami internetowymi pozostaje w gestii użytkownika (jeśli idzie o wiedzę jak to zrobić), o tyle na “teleportację” wewnątrz naszej strony powinniśmy mieć olbrzymi wpływ.

Naszym najważniejszym zadaniem jest to, by dać użytkownikom informacje: gdzie byli, gdzie są i gdzie mogą się udać. Świadomość o tym gdzie się było i gdzie się jest bardzo pomaga w podjęciu decyzji gdzie udać się w następnej kolejności. Zaznaczenie elementów, w którym użytkownik był zmniejsza prawdopodobieństwo odwiedzenia tej samej lokalizacji ponownie.

Idealnym przykładem strony, która nie stosuje zaznaczania odwiedzanych odnośników to strona banku BPH (rysunek obok). Z kategorii “Rachunki i operacje” wszedłem o jeden poziom niżej – do podkategorii  ”Rachunki bankowe”. Zaznaczonym elementem pozostała jednak kategoria główna, przez co użytkownik może mieć wrażenie, że jest w innym miejscu aniżeli w rzeczywistości. Webmasterom banku polecałbym wprowadzenie poprawek w tym miejscu.

Jakob Nielsen w swojej biblii na temat usability napisał: “Obecnie 74% witryn internetowych używa tej właściwości (zaznacza innym kolorem odwiedzone odnośniki), co czyni ją konwencją, której użytkownicy oczekują”. O wadze norm, a właściwie o wadze trzymania się tych norm, polecam przeczytać mój post na temat konwencji.

Czytelność strony internetowej

Czytelność strony internetowej to baza jeśli idzie o typografię na naszej stronie. Jej przejrzystość to jeden z najważniejszych elementów rzutujących na funkcjonalność ogółu. Jeżeli nasi użytkownicy mają problemy z odczytywaniem tekstu, masz poważny problem, który szybko trzeba rozwiązać. Musisz wziąć pod uwagę, iż Twoimi użytkownikami są ludzie w różnym wieku – również ludzie starsi, dla których mała czcionka niejednokrotnie oznacza męczarnię w przeglądaniu zasobów strony. Dodając do tego zaciemnione elementy “pod” tekstem lub w jego okolicy, często użytkownik jest zmęczony po przeczytaniu zaledwie kilku zdań tekstu.

Jak tworzyć strony przejrzyste i czytelne? Należy zastosować się zaledwie do kilku wskazówek, o których pisze każdy spec od usability (od Nielsena po Krug’a):

• korzystamy z czcionek o rozmiarze 10 najmniej,
• ideałem jest stosowanie jasnych czcionek tekstu wraz z ciemnymi kolorami tła,
• unikamy chaotycznego tła,
• unikamy tekstów “pływających”.

Żaden z powyższych autorów – z tego co mi wiadomo – nie napisał o jednym z najczęściej popełnianych błędów podczas projektowania stron. Otóż projektanci mają zwyczaj wrzucania – tuż po “wyprodukowaniu” szablonu strony – łacińskich tekstów w stylu “lorem ipsum”. Sugeruje to właścicielowi właściwe miejsce na tekst na projekcie strony. Jednak błędem jest całkowity brak analizy tekstu wstawianego w miejsca łacińskich wierszyków. Wklejamy tekst i mamy gotowca. Zapominamy o tym, iż zmieniła się forma wyświetlania tego tekstu i wymogiem jest poddanie takiego tekstu ponownej analizie: czy odpowiednie zdania ujęte są w odpowiednim miejscu.

Mam nadzieję, że powyższe będzie pożyteczne i skorzystają na tym Wasi użytkownicy.

Użytkownicy: nastawienie na przeglądanie lub wyszukiwanie

Wchodząc na daną stronę internetową, która daje Ci możliwość zarówno przeszukiwania jej zasobów za pomocą wędrówki po kategoriach jak i zwykłego wklepania hasła w wewnętrzną wyszukiwarkę, którę formę penetracji tej strony wybierasz? Na co się decydujesz?

To zależy. Zależy to od samopoczucia, od czasu ile masz na przejrzenie strony, ale również od systemu nawigacji. Niektórzy – Bóg usability Pan Jakob Nielsen mówi o nich “uzytkownicy nastawieni na wyszukiwanie” od razu po wejściu korzystają z wyszukiwarki w celu znalezienia potrzebnych informacji. Inni zaś – “użytkownicy nastawieni na przeglądanie” – prawie zawsze przeglądają zawartość witryny. Korzystają oni z wyszukiwarki w momencie, w którym wszystkie opcje przeglądania (znalezienia prawidłowej kategorii poprzez przeglądanie) zawiodły.

Przy odpowiedniej konstrukcji naszej strony możemy zachęcić użytkownika do wyboru jednej z metod szukania porządanych informacji. Jeżeli dla przykładu umieścimy wyszukiwarkę w centralnym miejscu na stronie wraz z odpowiednio dużą liczbą kategorii sugerujących, użytkownik zdecyduje się poszukać informacji za pomocą wyszukiwarki.

Waga norm w użyteczności

W projektowaniu stron internetowych istnieją pewne normy, standardy, do których stosowania zachęca praktycznie każdy autor książki o użyteczności stron internetowych. Dla każdego człowieka zajmującego się funkcjonalnością i użytecznością temat tzw. konwencji jest tematem obowiązkowym.

Idealnym przykładem konwencji jest przykład Steve’a Kruga, który odnosił się do umieszczanie loga danej stacji telewizyjnej narożniku podczas oglądanie praktycznie każdego programu danej stacji. Internet zapożyczył sobie ten zwyczaj i umieszczanie loga w lewym górnym rogu każdej strony to standard. Kazde odstępstwo od tej normy traktowane jest bardzo często przez użytkowników takiej strony internetowej jako swego rodzaju podejście “egzotyczne”.

Jakie są cele tzw. konwencji?
Przede wszystkim służą zwalnianiu użytkownika z… myślenia. Ma on się interesować przede wszystkim treścią, forma jej ukazania ma podkreślać zalety, a nie wprowadzać chaos. Wsiadając do windy, w której nie ma przycisków oznaczających piętra w budynku, zdziwilibyśmy się, gdyby na ich miejscu widniała kartka z informacją, iż przyciski ‘wybiera się’ nogami w podłodze :)

W internecie pojawia się sporo nowinek, które w stosunkowo krótkim stają się konwencjami. Pamiętajmy jednak, że jeżeli nie jesteśmy pewni, że wprowadzane rozwiązanie nie wzbudzi zachwytu u naszych klientów, trzymajmy się już utartych szlaków. Użytkownik ma się czuć swobodnie na stronie.

Ograniczamy chaos szablonu

Bardzo częstym błędem jest dążenie by użytkownik po wejściu zwrócił uwagę na wszystko. W tym celu webmasterzy zwykli używać mnóstwa wykrzykników, rażących kolorów, ‘przeofertowania’ (wklepywanie na siłę największej możliwej liczby ofert produktów, promocji czy usług). Jednym zdaniem - produktem tylko i wyłącznie myśli sprzedażowej jest chaos.

Kolejnym błędem są – jak zwykł pisać Steve Krug - “zakłócenia w tle”. Przytoczył on w swojej książce przykład witryny MSNBC.com (w starszej wersji portalu można było ‘rozczarować się’ nawigacją strony). Jednak moim skromnym zdaniem nie był to wystarczający przykład – może jestem użytkownikiem o wysokim poziomie tolerancji. Ja osobiście za dobry przykład uważam stronę… agencji reklamowej SearchLab.pl.

Jak widzimy po najechaniu na element nawigacji globalnej, stałej rozwija się nam ładnie menu z podkategoriami danej podkategorii. Twórca jednak totalnie przesadził z “title” dodawanym do każdego linka kierującego do określonej podkategorii. Najeżdżając kursorem na sekcję ‘O linkach sponsorowanych’ “title” zasłania mi podkategorię poniżej. Jest to moim zdaniem idealny case tzw. “zakłóceń w tle”. Błędy jak widać nie przydarzają się tylko drobnym webmasterom, ale również firmom pokroju Agora S.A..

Kończąc moje wywody na tematy związane z podstawowymi błędami generującymi chaos na naszym szablonie proponuję by projektować z myślą, iż trafią nam się użytkownicy o najniższym poziomie tolerancji. Tylko takie podejście gwarantuje sukces.