Login lub e-mail Hasło   

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

Odnośnik do oryginalnej publikacji: http://biznes-internetowy.artykularnia.p(...)01.html
Projektując stronę internetową powinno się pamiętać o tym, że internauci mają schematy swoich zachowań, według których poruszają się po serwisie. Wynikają one z przyzwyczajeń.
Wyświetlenia: 16.820 Zamieszczono 05/04/2007

Projektując stronę internetową powinno się pamiętać o tym, że internauci MAJĄ schematy swoich zachowań, według których poruszają się po serwisie. Wynikają one z przyzwyczajeń.

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!

----------
Marcin de Lehenstein Werndl zajmuje się zawodowo obsługą klientów w firmie Laboratorium Sztuki Pi (http://www.laboratoriumsztuki.pl). Prywatnie interesuje się użytecznością stron internetowych oraz projektowaniem maksymalnie intuicyjnych w obsłudze interfejsów stron www.
----------
Ten artykuł pochodzi z serwisu Artykularnia.pl - źródła darmowych artykułów do przedruku!

Podobne artykuły


7
komentarze: 0 | wyświetlenia: 961
7
komentarze: 18 | wyświetlenia: 700
6
komentarze: 3 | wyświetlenia: 844
83
komentarze: 25 | wyświetlenia: 71271
51
komentarze: 40 | wyświetlenia: 647291
44
komentarze: 36 | wyświetlenia: 14664
33
komentarze: 30 | wyświetlenia: 21195
30
komentarze: 22 | wyświetlenia: 40185
29
komentarze: 8 | wyświetlenia: 12948
29
komentarze: 15 | wyświetlenia: 22143
29
komentarze: 16 | wyświetlenia: 52874
28
komentarze: 29 | wyświetlenia: 17808
28
komentarze: 16 | wyświetlenia: 17137
 
Autor
Artykuł



  oldml,  09/02/2008

Bardzo cenne i rzeczowe uwagi. Duża część webmasterów powinna przeczytać pkt. 4. "Wielkość czcionek wygodna do czytania".
Dodałbym tu jeszcze: treść powinna być czarno na białym, a nie żółto na czarnym.
Niektóre serwisy są tak "wykolorowane", że można sobie wzrok popsuć.

Dla mnie - człowieka spoza branży - bardzo cenne uwagi. Fakt - wyczuwam pewne sprawy intuicyjnie i często do razu zamykam stronkę, której "nie czuję", a raczej "czuję" negatywnie.

Nie znoszę np. białej (lub w innym kolorze) czcionki na czarnym tle. W dodatku małej.Straszne to po prostu. Wkurzają zlewające się teksty - bez akapitów, odstępów itd.

Drażniące są również tzw. "kosmiczne

...  wyświetl więcej

  W kubek  (www),  03/10/2010

Co do pkt 7, to dobrze jest też dać link do całości. Jak komuś słoń siądzie na łączu, to czekanie na załadowanie się kolejnych kilku paragrafów jest koszmarem. Jak czekać, to na całość.



Dodaj swoją opinię
W trosce o jakość komentarzy wymagamy od użytkowników, aby zalogowali się przed dodaniem komentarza. Jeżeli nie posiadasz jeszcze swojego konta, zarejestruj się. To tylko chwila, a uzyskasz dostęp do dodatkowych możliwości!
 

© 2005-2018 grupa EIOBA. Wrocław, Polska