Elementy, które wpływają na intuicyjność i ergonomię st

Elementy, które wpływają na intuicyjność i ergonomię strony internetowej.
autorem artykułu jest Marcin de Lehenstein Werndl Marcin de Lehenstein Werndl

Przyzwyczajenia te można porównać do tego, że w polskich domach kosza na śmieci szuka się w kuchni pod zlewem, gdzie najczęściej się znajduje. Gdy kosza tam nie ma, często czujemy niepokój i dezorientację.

Jeżeli ktoś na stronie internetowej, w momencie samego wejścia na nią, poczuje się podświadomie nieswojo, poczuje się zagubiony - jest duże prawdopodobieństwo że to uczucie zdominuje przeglądanie serwisu i w efekcie spowoduje wyjście ze strony - mimo, że informacje na niej zawarte były jak najbardziej konkretne.

Do standardowych elementów ergonomicznego projektu strony należą:
1. Logo strony internetowej
- jest klikalne, po kliknięciu powracamy na stronę główną serwisu
- mieści się w lewym górnym rogu strony lub na środku (nie dotyczy stron dla krajów arabskich, tam jest najczęściej z prawej)
- jednoznaczny podpis do logo, który na pierwszy rzut oka powie, co internauta na tej stronie znajdzie. Przykład: wchodzisz na stronę www i na pierwszy rzut oka widzisz kolorowy napis (logo): AMPKIN-PAMPKIN. Nie wiadomo co to jest…
Gdyby poniżej napisu było napisane “Sprzedaż części komputerowych” to od razu wiadomo, czego na stronie się spodziewać.
2. Linki w menu logicznie pogrupowane według ich roli:
- informujące o produkcie, usługach, zawierające np. katalog produktów, informację o usługach, korzyściach dla klienta, portfolio czy realizacje - napisane większą czcionką, wyróżnione kolorem, podkładem, grafiką
- linki dotyczące firmy (o firmie, kontakt, misja, aktualności) - w oddalonym, mniej uwypuklonym menu.
Pozwoli to wyrobić sobie zdanie na temat przeglądania treści skierowanych do klienta, handlowych, za pomocą linków w jednym obszarze, oraz informacji uzupełniających, dodatkowych, w innym obszarze.
Uzupełnieniem informacji o linkach jest
3. Układ menu
- pionowy, poziomy - tu nie ma zbyt wielkiej różnicy z punktu intuicyjności. Ważne jest, by skupiało bliskie sobie informacje w jednym obszarze.
Warto pamiętać, że poziome menu zmieści mniej linków.
Za to trzeba wiedzieć, że:
- długie menu pionowe nie jest wygodne do czytania. Najczęściej stosowanym zabiegiem, jeśli menu pionowe wychodzi długie, jest zrobienie wizualnych odstępów co 6, 7 linków - wstawiając większy odstęp lub linię poziomą czy lekką grafikę o funkcji separatora…
4. Wielkość czcionek wygodna do czytania.
Treść artykułów, informacji, piszmy czcionką o wielkości 12 pikseli. Ktoś ze słabszym wzrokiem przeczyta stronę komfortowo. Nie będzie potrzeby przybliżania się do monitora czy powiększania czcionek za pomocą mechanizmów przeglądarek.
Linki w menu mogą być napisane czcionką ciut mniejszą (11 pikseli), a linki typu breadcumbs (o nich niżej) 10 lub 9 pikseli.
5. Krój czcionek.
Nie możesz pozwolić sobie na stosowanie dowolnej czcionki, bo “taka Ci się podoba” (chyba że masz stronę we Flash). Pamiętaj, że ktoś może nie mieć na swoim komputerze tej Twojej ulubionej czcionki, a wtedy zobaczy on stronę zupełnie inaczej niż byś chciał.
Najbezpieczniejsze czcionki do internetu to: Verdana, Tahoma, Helvetica, Arial.
6. Logiczny podział w treści - nagłówki, akapity
Pisząc długi artykuł zadbaj o to, by stosować porozdzielane akapity i “podtytuły” do rozdziałów.
Tekst napisany jednym ciągiem czyta się niewygodnie, do tego po krótkim czasie powoduje, że internauta go nie czyta tylko przelatuje (skanuje) wzrokiem. I może nie zauważyć ważnej dla niego informacji…
7. Długość strony.
Aby Twój artykuł został przeczytany bez zmęczenia, rozdzielaj artykuły co 2, 3 “ekrany” (przewinięcie strony “w dół” monitora). Rozdzielaj strony za pomocą (znów intuicyjnych, znanych z wielu miejsc) elementów typu:
<< 1,2,3,…,10 >>
czy
<poprzedni | następny>
Internauta nie będzie zmęczony czytaniem i będzie z jednakową uwagą zapoznawał się z informacjami.
8. Należy zachować jednakową konwencję linków w całym serwisie. Załóż od razu kolor, wielkość czcionki, styl (najbardziej intuicyjne jest podkreślenie) dla linków. I tego trzymaj się w całym serwisie - jak ktoś raz skorzysta z linku, to jego znajomość ułatwi mu bezproblemową identyfikację każdego innego - i będzie w nie klikał a nie zastanawiał się “co znaczy taki kolorek, czcionka itd”.
9. Breadcumbs (”Okruchy chleba”)
Często stosowany element, w pobliżu głównego okna z treścią.
Mówi jednoznacznie gdzie w serwisie się znajdujemy.
Najbardziej intuicyjnie oznacza się go tak:
jesteś w: strona główna >> katalog produktów >> RTV/AGD >> lodówki >> Amica 5515
Ważne: aktualny element nie jest linkiem (w powyższym przykładzie Amica 5515), wyższe poziomy są klikalne, żeby za ich pomocą dojść do pożądanego poziomu.
11. Rozmiar (szerokość strony) - dobrze dopasowywać do najmniejszej używanej rozdzielczości, żeby każdy internauta widział ją bez dolnego paska przewijania w bok. Jeszcze projektuje się serwisy dopasowane do szerokości 800 pikseli, ale bez problemu można już dopasowywać strony do monitorów 1024 pikseli (daje to ok. 960-980 pikseli szerokości strony - musimy zostawić trochę miejsca na boczny pasek przewijania w przeglądarce).
12. Grafika na stronie www - jest tylko dopełnieniem treści. Stonowana, estetyczna, elegancka - musi podkreślić charakter i treść serwisu, w żadnym wypadku nie może być na pierwszym planie. Są od tego wyjątki - serwisy artystów, portfolia - tam bogata grafika jest uzasadniona.
13. Tytuł strony (tekst w górnym pasku przeglądarki) - dobrze identyfikuje serwis (podstronę) dodane do ulubionych, identyfikuje zminimalizowane okienko przeglądarki na dolnym pasku w Windowsie. Niech będzie indywidualny i jednoznaczny dla każdej podstrony.
Dla każdej podstrony można również pokusić się o jasny “adres” -
np. www.twoja_firma.pl/o-firmie.html czy www.twoja_firma.pl/jakis-produkt.php - ktoś otrzymując np w emailu czy w komunikatorze taki adres od razu wie, co pod takim adresem może się znajdować.
Pomocne elementy ułatwiające niektórym poruszanie się po serwisie:
14. Wyszukiwarka - jeśli ma być ważnym narzędziem niech będzie po lewej stronie lub na środku, w centralnym obszarze, jeśli mniej to przesuńmy ją w prawo.
15. Mapa strony - są osoby które korzystają z takiej podstrony do nawigowania po serwisie. I jest ona bardzo skuteczna przy procesie pozycjonowania strony.
Większość z zachowań internautów została przebadana, choćby dzięki Eyetrack (http://www.digit.pl/artykuly/44551.html). Dużą część z nich obserwowaliśmy sami, pracując nad wieloma projektami dla jednego z krakowskich portali. A skoro mamy dość dokładne dane, warto je zastosować.
W obecnych czasach internauci BARDZO SZYBKO przeglądają strony - jeżeli nie podasz im jak najprędzej, od pierwszego spojrzenia, i najbardziej intuicyjnie informacji przez nich szukanych, po prostu nacisną przycisk WSTECZ i pójdą do następnej strony z wyników wyszukiwania. Spraw, by zatrzymywali się właśnie u Ciebie!

--

Artykuł pochodzi z serwisu www.Artelis.pl

Zobacz takze:
Skuteczny e-mail marketing: 10 sprawdzonych wskazówek
Budujemy...
Jakie katalogi warto wybierać przy pozycjonowaniu witry
BRANŻA WELLNESS
Relacja z debaty o przenośności numerów