Efektywne serwisy WWW cz.3

Artykuł ukazał się w: Magazyn dla grafików komputerowych, .psd Starter Kit 3 (3/2007). Autor: Piotr Zając.

Gdy już poznamy potrzeby nasze bądź klienta, przeanalizujemy serwisy konkurencji oraz spiszemy listę funkcjonalności serwisu przychodzi czas na najważniejszy etap – kształtowanie charakteru serwisu poprzez projekt graficzny. W trakcie pracy przy projekcie można przyjąć dwojakiego rodzaju podejście – przenieść jedynie koncepcję projektu funkcjonalnego do grafiki, bądź – co ważniejsze przy serwisach produktowych, oraz wizerunkowych – wnieść coś do układu, struktury czy nawet koncepcji całego serwisu.

Chcąc jednak sugerować zmiany we wstępnym projekcie musisz znać podstawowe zasady użyteczności, by strony tworzone na podstawie Twoich projektów były nie tylko kreatywne, ale – co nawet ważniejsze – maksymalnie przyjazne dla użytkowników.

Czym jest użyteczność?

Użyteczność (ang. usability, web-usability) – jest to nauka, która obejmuje swym zakresem funkcjonalność oraz ergonomię wszelkiego rodzaju urządzeń i aplikacji. W naszym przypadku najbardziej interesują nas aspekty związane z aplikacjami komputerowymi, usługami elektronicznymi oraz produktami interaktywnymi.

W takim znaczeniu, użyteczność pozwala na:

• wykonanie danego zadania w intuicyjny sposób szybciej i efektywniej, z minimalną ilością popełnionych błędów
• skrócenie czasu potrzebnego na zapoznanie się z systemem, co wpływa pozytywnie na obniżenie poziomu frustracji użytkownika
• wywołać pozytywne nastawienie użytkownika do kolejnej interakcji z systemem przez wykorzystanie jego zadowolenia ze sprawnie wykonanej pracy

Użyteczny projekt graficzny?

Zastanawiasz się pewnie czy wiedza na temat użyteczności potrzebna jest grafikowi? Przecież większość projektów jakie wykonujesz dostajesz rozpisane szczegółowo, z niewielkim polem do wprowadzania jakichkolwiek zmian. Z drugiej jednak strony to, co rozrysował klient lub kierownik projektów nie jest ostatecznym kształtem serwisu, a jedynie sugestią, na podstawie której masz stworzyć efekt końcowy. Grafik bowiem nadaje zaplanowanej koncepcji serwisu wizualny charakter – dla wielu klientów projekt zaczyna się dopiero od momentu wizualizacji przedstawionej przez grafika.

To grafik dobiera kolory tła, czcionki, zdjęcia i motywy wykorzystane w projekcie, itd. Decyduje o ilości elementów graficznych i ich współgraniu ze sobą. Przeważnie też to on decyduje o zagęszczeniu elementów strony i ma największy wpływ na wygląd i rozkład elementów na stronie. Dlatego właśnie wiedza na temat projektowania użytecznych stron www przyda się każdemu grafikowi.

Użyteczność vs. Kreatywność

Użyteczność kojarzy się z ogólnie przyjętymi schematami i w dużej części opiera się na konwencjach, a projektanci serwisów www oraz graficy nie przepadają za konwencjami, gdyż często ograniczają one kreatywne podejście do projektu. Jednak konwencje, pisane i niepisane standardy są bardzo przydatne i zazwyczaj słuszne, gdyż większość z nich pochodzi ze świata realnego, zwłaszcza prasy – statycznego wydania stron internetowych.

Użyteczność przekłada się na efektywność stron www, dlatego warto zastanowić się nad tym, czy nasz projekt ma być efektywny, czy efektowny. Wszystko zależy od celu jaki stawiamy przed serwisem i jego oczekiwanym charakterem. Jeśli bowiem tworzysz system informacyjny, który ma być narzędziem pracy dla jego użytkowników postawić trzeba na jak najwyższy stopień użyteczności. Z kolei w przypadku serwisu wizerunkowego – niekoniecznie. Jednakże należy pamiętać, że serwis efektowny nie znaczy wcale nieużyteczny, a użyteczny nie znaczy również nieefektowny.

W Internecie znaleźć można liczne przykłady serwisów mało użytecznych, wręcz sprzecznych ze wszelkimi zasadami usability (np. strony wizerunkowe w pełni wykonane we flashu), a jednak bardzo efektywne – spełniające postawione przed nimi cele. Z drugiej strony są serwisy zgodne ze wszelkimi standardami, użyteczne i funkcjonalne, ale z kolei praktycznie nieefektywne. Dlatego właśnie w projektowaniu należy zachować balans i zdroworozsądkowe podejście, ale by tego dokonać trzeba znać podstawowe zasady.

Kilka użytecznych wskazówek…

Projektowanie łatwej, intuicyjnej i funkcjonalnej nawigacji strony to jedno z ważniejszych zadań użyteczności, a to dlatego, że w Sieci wbrew pozorom nawiguje się trudniej. Często po wejściu na stronę trudno jest w krótkim czasie określić jej wielkość, czy ocenić, ile zajmie jej dokładne przeszukanie, a przecież zaglądając na stronę internetową użytkownik najprawdopodobniej czegoś szuka. Może robić to na dwa podstawowe sposoby: poprzez zadawanie pytań wyszukiwarce lub przeglądanie serwisu z wykorzystaniem menu nawigacyjnego.

Wyszukiwarka – jeżeli jest w serwisie, to powinna być w widocznym miejscu, bez potrzeby przewijania strony w celu jej znalezienia. Powinna być również dobrze oznaczona – nie polecam twórczego nazewnictwa typu „szperaczek”. To samo dotyczy przycisku „Szukaj”. Najlepiej jest trzymać się konwencji: „Wyszukiwarka”, a dla przycisków „Szukaj”. Należy pamiętać również o tym, że najczęściej im dłuższe pole wyszukiwania tym dłuższe zapytanie wpisują użytkownicy, w oczekiwaniu otrzymania bardziej precyzyjnych wyników.

Stałe elementy nawigacji na stronie czyli takie, które pojawiają się w zasadzie na każdej z podstron serwisu to między innymi:

• Identyfikator strony
• Menu narzędziowe
• Menu główne
• Nawigacja tzw. okruszków chleba
• Łącze do strony startowej
• Wyszukiwarka

Menu narzędziowe

Znajduje się przeważnie w prawej górnej części strony i zawiera od 3 do 7 elementów, które uznajemy za szczególnie przydatne. Zazwyczaj są to: Strona główna, Rejestracja, Kontakt, Mapa serwisu, Współpraca, FAQ, wybór wersji językowych.

Menu główne

Powinno znajdować się w centralnym punkcie strony, zazwyczaj w górnej środkowej części strony, bezpośrednio na linii wzroku. Jeżeli go tam nie ma, użytkownicy najczęściej szukają go z lewej strony ekranu.
Strona powinna być przewodnikiem użytkownika. Powinien on szybko móc odnaleźć się w jej strukturze bez względu na to, gdzie trafi. Często projektujący serwis kładą duży nacisk na stronę główną w przekonaniu, że od tej strony użytkownicy będą ją przeglądać. Jest to błędne założenie ponieważ z wyszukiwarek najczęściej użytkownicy dostają się na konkretne podstrony serwisu.

Co zrobić, aby pomóc użytkownikowi się odnaleźć? Oto elementy strony, którymi możemy się posłużyć.

Nawigacja tzw. okruszków chleba (ang. breadrumbs, breadcrumb navigation)

Są to elementy nawigacyjne przedstawiające aktualną lokalizację użytkownika w serwisie. Przykład to element C na rys. 1. Warto zaznaczyć, że nawigacja powinna opierać się na linkach tekstowych, dzięki czemu możemy z danego miejsca wrócić do kategorii nadrzędnej.

Używanie wyróżników w menu – przy pomocy odpowiednio oznaczonych elementów należy dać znać użytkownikowi, która pozycja menu jest aktualnie wybrana (np. pogrubionym krojem czcionki, podświetlony element, „wciśnięty przycisk”). Jeśli jest to tylko możliwe należy unikać menu rozwijanego o dużej ilości zagłębień, gdyż utrudnia to orientację, a także wydłuża czas potrzebny na zorientowanie się w strukturze i wielkości danej strony.

Strona główna

Strona główna w większości przypadków powinna różnić się od pozostałych podstron serwisu – jest to strona reprezentacyjna. Powinna jasno komunikować odbiorcy, co może na stronie znaleźć, jaki jest cel strony oraz wskazać główne i najbardziej interesujące elementy struktury. Dlatego też najczęściej znajdziemy na niej skróty najważniejszych informacji w serwisie zawartych oraz banery prowadzące wprost do konkretnych podstron. Dodatkowo dostęp do strony głównej powinien być zapewniony z każdej podstrony serwisu.

Liczy się pierwsze wrażenie, dlatego strona główna powinna być stworzona w ten sposób, aby wywoływać pozytywne pierwsze wrażenie. Z badań wynika, że użytkownicy na podstawie strony głównej wyrabiają sobie opinię o całym serwisie decydując o pozostaniu w nim bądź nie.

Należy pamiętać o odpowiednio zaprojektowanej architekturze informacji. Gdy będzie zaprojektowana w odpowiedni sposób, użytkownicy błyskawicznie będą orientować się co jest ważne i gdzie powinni się udać. Dobrą praktyką jest również dzielenie strony na wyraźne bloki funkcjonalne. Pozwala to użytkownikom skupić się tylko na tym co dla nich ważne. Należy jednak uważać z nadmiernym wyróżnianiem – często bardzo migający element może zostać potraktowany jak banner i użytkownik podświadomie go zignoruje.

Punkty startowe to bardzo przydatne elementy strony głównej prowadzące w głąb struktury serwisu. Powinny one odzwierciedlać najczęściej poszukiwane elementy serwisu. Z drugiej strony powinny to być tym samym elementy serwisu, do których najbardziej chcemy, by użytkownik trafił. Punkty startowe pokazują więc, co użytkownik na stronie można znaleźć i co zrobić. Przykłady punktów startowych widać na rys. 2 i 3.

Wyraźnie oznaczaj elementy graficzne, które są linkami – elementy graficzne służące do nawigacji powinny się jakoś wyróżniać. Nie można kazać się domyślać użytkownikowi, że dany element może być linkiem.

Rysunek 4 pokazuje menu główne serwisu a pod nim elementy graficzne, które miały służyć za punkty startowe. Jednak nie zostały one wyróżnione – wyglądały jak banner flashowy. Z testów wynika, że praktycznie nikt nie korzystał z tego elementu, co w efekcie spowodowało jego usunięcie z serwisu.

Na zakończenie…

Poruszone w tekście zagadnienia to zaledwie niewielki ułamek wiedzy na temat tworzenia użytecznych stron www. Warto zapoznać się z różnymi materiałami dostępnymi w Internecie – część z nich:

www.kursusability.pl
www.uzytecznosc.pl
www.webusability.pl
www.belloisnadaje.pl
www.webaudit.pl
www.usability.gov/pdfs/guidelines.html
www.useit.com

Autor
Piotr Zając

Publikacja:
Magazyn dla grafików komputerowych, .psd Starter Kit nr 3 (3/2007)

Umieszczony dzięki uprzejmości: IDEO – Software House i Agencja Interaktywna (www.ideo.pl)