Moving Menu

Czym jest web-usability i jak je osiągnąć?

corner Marcin Golis
Marcin Golis
2012-12-17
corner Czym jest web-usability i jak je osiągnąć?
Czym jest web-usablility? Dlaczego jest takie ważne? Jak ocenić, czy Twoja strona jest przyjazna? Na te wszystkie pytania odpowiadam w moim dzisiejszym wpisie.
Przeczesując zasoby Internetu nie raz i nie dwa trafiłem na strony, które, choć miały zarabiać pieniądze i przyciągać do siebie użytkownika, były zaprojektowane w sposób tak tragiczny, że myszka sama kierowała się do krzyżyka zamykającego kartę przeglądarki. Dlatego w moim wpisie chcę przedstawić kilka niuansów, które mogą być lekarstwem dla źle zaprojektowanej strony.

Użyteczna strona to taka, która:

  • ma intuicyjną nawigację, nie musimy „przeklikiwać się” przez całą witrynę, żeby dotrzeć do potrzebnych nam treści,
  • sama w sobie jest tak zbudowana, aby ułatwić nam poszukiwanie informacji,
  • zapewnia zrozumiałą dla użytkowników komunikację.

5 najważniejszych elementów usability

  • Learnability – czyli to, jak szybko użytkownik jest w stanie wykonać określone zadanie, wyszukać potrzebną mu informację na stronie podczas pierwszego kontaktu z witryną,
  • Efficiency – jak szybko te same zadania wykona użytkownik, który już zna stronę,
  • Memorability – to, czy, użytkownik odnajduje się na stronie po dłuższej nieobecności,
  • Errors – ilośc błędów popełniana przez użytkownika na stronie, komunikowanie błędu oraz czas jego rozwiązania przez użytkownika,
  • Satisfaction – to, czy użytkownik lubi korzystać z danej strony.

Cele usability przy budowaniu strony, sklepu i portalu

To, czy budujemy mały komercyjny serwis, sklep internetowy czy rozbudowany portal będzie stawiało przed nami różne cele. Dla serwisu komercyjnego celem usability jest zainteresowanie użytkownika stroną, skłonienie go do dalszego kontaktu czy zakupu, dla użytkownika będzie to z kolei efektywny kontakt i poznanie produktów oferowanych na stronie. Dla sklepu internetowego najważniejszym celem będzie sprzedaż i budowanie lojalności klienta; dla portalu: zatrzymanie użytkownika na swojej stronie.

Jak stworzyć efektywną stronę?

Wystarczy pamiętać o kilku zasadach, a nasza strona na pewno będzie przejrzysta i przyjazna dla użytkownika.

Zachowaj konwencję

  • Nie bój się pewnych standardów. Niech logo znajdzie się w lewym górnym narożniku i niech odnosi nas z innej podstrony do strony home. Nie uciekajmy od standardowo przyjętych nazw. Użytkownicy będą poszukiwali „koszyka zakupowego”, a nie „worka” czy „tablicy”, na której mogą podsumować swoje zakupy.

Niech Twoje komunikaty będą zrozumiałe

  • Zwracaj uwagę na to, czy komunikaty informujące o błędzie, np. przy wypełnianiu formularza na stronie skutecznie komunikują problem, w tym przypadku czy wyjaśniają format wpisywanych danych. Często sam napis „błąd na stronie” nie jest dla użytkownika żadną wskazówką, internauta nie wie, co spowodowało błąd i jak mu zaradzić.

Efektywne linki

  • Stosuj nazwy odnośników, ale unikaj sformułowań typu „kliknij tutaj”, wyraźnie zaznaczaj linki kolorem czy podkreśleniem i oznacz te, już odwiedzone.

Logiczna struktura strony

  • Buduj zrozumiałe menu, niech użytkownik wie, gdzie znajduje się w danym momencie na mapie serwisu i jak powrócić do poprzedniej strony, stosuj menu rozwijane tylko w razie konieczności (np. przy wyborze kraju czy języka witryny) i zadbaj o to, żeby najważniejsze informacje znalazły się na stronie głównej.

Bank BZ WBK jako przykład instytucji, która uczy się na własnych błędach

  • Nazwa sekcji w menu głównym „Home: Dla Ciebie” nie jest trafną i intuicyjną nazwą (nr 1);
  • Menu „Usługi dla Ciebie” – aby zapoznać się z resztą usług należało przewijać okienko (nr 2);
  • Dla wielu osób automatyczne przełączenie z głównej domeny www.bzwbk.pl na www.dlaciebie.bzwbk.pl nie było jasnym wyznacznikiem tego, że znaleźli się w sekcji dla klientów indywidualnych. Klienci korporacyjni, aby przejść do swojej sekcji serwisu musieli wybrać link tekstowy znajdujący się na górze;
  • Wyszukiwarka (nr 3) znajdowała się w dość nietypowym dla niej miejscu. Zastąpienie przycisku „Szukaj” linkiem mogło utrudniać zrozumienie wyszukiwarki;
  • Logo nie odnosiło nas do strony home.
  • Jasne i czytelne nazwy zakładek, osobna sekcja dla klientów indywidualnych, firm i przedsiębiorstw korporacyjnych;
  • Najważniejsze informacje dostępne z poziomu menu głównego;
  • Wyszukiwarka we właściwym miejscu;
  • Strona przejrzysta i intuicyjna, z właściwym nazewnictwem zakładek.

Architektura informacji

  • Strona powinna być podzielona na konkretne bloki tematyczne, kolejne zakładki porządkują nam informacje znajdujące się na stronie.
  • Im coś ważniejsze, tym ma się bardziej wyróżniać.
  • Elementy powiązane ze sobą logicznie powinny być też powiązane w sposób wizualny.

Jak sprawić, by nasza komunikacja z użytkownikiem była efektywna?

Z mojego doświadczenia wiem, że im mniej bardziej przejrzystego i dobrze zorganizowanego tekstuy, tym lepiej postrzegana jest strona.

„Złote rady” dla piszących teksty na stronę:

  • Stosuj o połowę mniej tekstu niż na papierze (mniejszy chaos, treści ważne lepiej widoczne, brak konieczności przewijania strony).
  • Stosuj zasadę odwróconej piramidy – od ogółu do szczegółu.
  • Dobrze przemyśl publikowane zajawki do artykułu.
  • Wykorzystaj strukturę HTML – czyli odpowiednia wielkość nagłówków, tytułów, itp.
  • Weź pod uwagę SEO – ilość słów kluczowych w tekście.
  • Call to action, czyli nawołuj do działania – np. przycisk „Napisz do nas!”, odwołujący użytkownika do formularza i pojawiający się na każdej podstronie, to szansa na to, że internauta odpowie pozytywnie na nasz apel.

Najgorsza strona jaką widzieliście?

A co Wam najbardziej przeszkadza na stronach www? Podzielcie się z nami swoimi przemyśleniami!
comments powered by Disqus

Powiązane

photo corner
Jak powstaje strona internetowa? - kiedyś a dziś

Projektanci, programiści, menedżerowie projektów i wreszcie klienci - wszyscy lepiej lub gorzej znają już przebieg procesu projektowania strony internetowej. Ale czy w tak dynamicznie rozwijającej się się branży jaka bez wątpienia jest web development istnieje jeszcze ten jeden właściwy sposób? Czy wczorajsze standardy nie okażą się jutro przestarzałe i nie zaczną hamować naszej kreatywności lub, co gorsza, utrudniać ukończenie zalecenia? Przyjrzyjmy się procesowi powstawania strony internetowej jeszcze raz.

Czytaj więcej
photo corner
Projektowanie przycisków w Photoshopie

Przyciski towarzyszą nam od początków konsumenckiego wydania Internetu i nic nie wskazuje na to, że by ten element interfejsu użytkownika miał w najbliższym czasie stracić na popularności. Internetowe buttony naśladują przecież guziki znane nam doskonale z prawdziwych urządzeń. Zobaczmy zatem jak w prosty sposób wykonać efektowny i klikalny przycisk.

Czytaj więcej
photo corner
Zakoduj fajny przycisk w CSS3

W moim poprzednim artykule przedstawiłem proste metody projektowania przycisków w Photoshopie. Dziś spróbujemy wykonać w pełni funkcjonalny button za pomocą HTML i CSS3. Odpalmy zatem notatnik i weźmy się do pracy.

Czytaj więcej