» wróć na stronę główną
» wróć do AM


Wygodne i użyteczne strony


Rozważania dotyczące projektowania stron wygodnych i użytecznych. Właściwe kolory, po co grafika, jednolity wygląd, co ważne a co nie, polskie litery, parę słów o nawigacji.

W tym artykule opowiem o zadaniach stojących przed projektantem stron, o konieczności dbania o jednolity wygląd witryny, trochę o funkcjach grafiki w projektowaniu stron internetowych, trochę o tym jak kodować polskie strony i opisywać obrazki, jakie kolory internauci lubią najbardziej i co mówi o tobie twoja witryna.

Temat tego artykułu, czyli Internet, zmienia się bardzo dynamicznie, więc radzę przedstawione poniżej zagadnienia traktować jako raczej przemyślenia niż jednoznacznie obowiązujące reguły.

Właściwe kolory tła i czcionki

Stosuj duży kontrast między kolorem tła i tekstu. Białe tło i ciemny (czarny, granatowy, ciemno szary) tekst jest lepiej odbierany niż odwrotna kombinacja. Spotkałem się również z opinią, że ciemnoszary tekst na białym tle na dłuższą metę mniej meczy wzrok niż czarny tekst na takim samym tle.

Grafika na stronach

Grafika w Internecie powinna służyć jakiemuś celowi. Jeżeli nie zwraca na nic uwagi, nic nie wyjaśnia, nie pomaga czegoś zrozumieć czy wywrzeć zamierzonego wrażenia - wyrzuć ją.

Projekt graficzny musi ułatwiać zrozumienie zawartości

Dobry design (czyli projekt graficzny strony internetowej) powinien sprawiać, aby nawet skomplikowane informacje były zrozumiałe i łatwe do zapamiętania. Mogą pomóc w tym tabele czy schematy. Użytkownicy często klikają na takie schematy, idealnie byłoby więc powiązać je przy pomocy odnośników z zagadnieniami, które reprezentują.

Zadbaj o jednolity wygląd stron

Strony internetowe wchodzące w skład jednej witryny powinny tworzyć spójną całość, i to zarówno jedna w stosunku do drugiej, jak i również z treścią, którą przekazują. Typ i kolor czcionek, barwy linków czy grafika - to wszystko powinno być utrzymane w podobnym klimacie. Nie oznacza to oczywiście, że te elementy powinny być identyczne - chodzi o to, aby użytkownik nie zastanawiał się czy przypadkiem nie opuścił naszej witryny.

A oto inne elementy pomagające zachować jednolity wygląd stron:

  • ta sama szerokość kolumny tekstu,
  • równe wcięcia akapitów,
  • wyrównywanie tekstu (do lewej, prawej, obustronne)
  • odstęp między liniami tekstu,
  • jednolite wyróżnienia elementów zawartości (tytuły, nagłówki, cytaty).

Wszystko to musi być na tyle przejrzyste i proste, aby użytkownik był w stanie "nauczyć" się szybko poruszać po stronach i wyszukiwać tam informacji. Idealna sytuacja ma miejsce wtedy, gdy design staje się przezroczysty, a użytkownik widzi tylko informacje. Cała oprawa graficzna powinna działać trochę jak znaki drogowe - informować i wskazywać, ale nie absorbować uwagi.

Jednolity design ma jeszcze jedną zaletę - często pozwala na stosowanie tej samej grafiki na wielu stronach, co ma niebagatelny wpływ na szybkość ich ładowania. Podobny wygląd całej witryny najłatwiej osiągnać używając szablonów dostępnych w wielu programach do projektowania stron lub jeszcze lepiej używajac stylów kaskadowych CSS.

Oddziel ważne od nieważnego

To kolejne zadanie stojące przed projektantem stron internetowych. Projekt graficzny musi pomóc czytelnikowi odróżnić na pierwszy rzut oka informacje ważne od mniej istotnych. To zadanie może ułatwić np. podział tekstu na sekcje opatrzone nagłówkami pierwszego, drugiego, trzeciego poziomu. Do dzielenia informacji na logiczne części można stosować również poziome linie (ostrożnie), proste elementy graficzne czy choćby wolną, białą przestrzeń. Pamiętaj jednak, że odstęp sugeruje brak związku logicznego, a podobieństwo graficzne wskazuje na powiązanie logiczne dwóch lub więcej części przekazu.

Witryna odzwierciedla charakter jej właściciela

Jak wcześniej wspomniałem, grafika powinna być spójna i jednolita. Powinna także oddawać charakter autora czy właściciela witryny. Spróbujcie np. opowiadać o cieple domowych pieleszy ilustrując to grafiką w kolorach takich, jak poniżej (możliwe ale niełatwe):

         

Barwy te odbierane są jako zimne, stwarzające dystans. Z drugiej strony kolory z pogranicza zieleni i żółci, szczególnie te mocno nasycone odbierane są jako witalne, "biologiczne", żywotne. Bazując na odpowiednim doborze kolorów można przekazać odbiorcy bardzo istotną informację o charakterze osoby czy firmy. Zainteresowanych tematem kolorów w grafice odsyłam do dobrego artykułu Dmitra Kirsanowa pt. "The world of color" (po angielsku).

Skupiaj się na zawartości

Projektując strony internetowe pamiętaj, aby grafika, design - ogólnie cała powłoka nie tłumiła przekazywanych informacji. Dlatego należy np. ostrożnie używać niestandardowych czcionek, odciąga to uwagę czytelnika od treści, sprawia, że staje się ona trudniejsza do uchwycenia (pomijam tu zupełnie trudności techniczne, jakie niestandardowe czcionki mogą powodować).

Standard kodowania ISO 8859-2

Do kodowania stron napisanych po polsku używaj wyłącznie standardu ISO 8859-2, w tym celu pomiędzy znacznikami <HEAD> </HEAD> umieść ten fragment kodu:

<META http-equiv="Content-Type" content="text/html;charset=iso-8859-2">

Na polskiej stronie ogonkowej znajdziesz więcej informacji na ten temat.

Opisuj obrazki za pomocą znacznika ALT

Wszystkie obrazki na stronach opisuj za pomocą znacznika ALT, ponieważ:

  • niektórzy używają przeglądarek z wyłączonym ładowaniem grafiki
  • czasem nie warto czekać, aż załaduje się cała strona, żeby od razu przejść na inną
  • znacznik ALT może zawierać słowa kluczowe i tym samym podnosić ich liczbę na stronie wpływając pozytywnie na twoją pozycję w rankingach niektórych (już niewielu) wyszukiwarek
  • przeglądarki dla osób niewidomych potrafią czytać na głos znaczniki ALT

Projektowanie stron wygodnych dla użytkownika - kontynuacja

W tej części o nawigacji, o konieczności szybkiej odpowiedzi na listy, jak zachęcić użytkownika do wypełniania formularzy, o tym co w projektowaniu stron internetowych najważniejsze i czy nowości zawsze się opłacają.

Nadawaj stronom tytuły

Każda strona na twojej witrynie powinna być opatrzona tytułem, ponieważ:

  • tytuł wyświetlany jest w kilku miejscach w przeglądarce (historia, zakładki, pasek stanu), dostarcza więc cennych informacji użytkownikowi o tym, gdzie jest i co strona zawiera
  • wyszukiwarki internetowe podając wyniki poszukiwań, każdy z nich opatrują tytułem strony. Nie chcesz chyba, żeby twoja strona nazywała się "No Title". Poza tym dobry tytuł może podnieść pozycję strony w rankingu.
  • jedna z twoich stron może czasem pojawić się w zestawieniach stron na innych witrynach. W takim przypadku lepiej samemu nazwać stronę niż zostawić to przypadkowej osobie, czyli autorowi tamtej witryny. Tutaj ważne jest, aby tytuł był zrozumiały nawet po wyrwaniu z kontekstu, jakim jest twoja witryna.

Intuicyjna i wygodna nawigacja

Dobrze przemyśl nawigację na swoich stronach. Powinna być maksymalnie uproszczona i intuicyjna, a sam pasek nawigacyjny powinien zajmować jak najmniej miejsca, pozostając jednocześnie czytelnym. Nawigacja ma pomagać odpowiedzieć na trzy podstawowe pytania:

  • gdzie jestem?
  • skąd się tu wziąłem?
  • gdzie mogę pójść?

Bez odpowiedzi na te pytania niemożliwe jest świadome poruszanie się po jakimkolwiek terenie, po Internecie również.

W przypadku dużych witryn dobrze jest na każdej stronie udostępnić użytkownikowi nawigację pionową i poziomą. Na szczycie nawigacji pionowej stoi strona główna (1. poziom), potem są główne strony poszczególnych sekcji (2. poziom), dalej strony z zawartością (3. poziom). Taka nawigacja jest wygodna, bo daje możliwość przeskoczenia w każdej chwili poziom wyżej lub niżej. Nawigacja pozioma natomiast daje możliwość wyboru pomiędzy stronami na tym samym poziomie, np. między poszczególnymi artykułami.

Przypominaj użytkownikowi, gdzie się znajduje

Użytkownik może dostać się na jedną z twoich stron (nie chodzi mi o stronę główną) w różny sposób: poprzez zakładkę, dzięki wyszukiwarce, przez odnośnik na innej stronie. Zadbaj więc, aby strona była jasno określona względnie i bezwzględnie.

Względnie czyli w stosunku do innych stron serwisu. Użytkownik powinien być w stanie zlokalizować swoją pozycję i dostać się w każdej chwili do strony głównej.

Bezwzględne położenie mówi internaucie, że znajduje się na takiej, a nie innej stronie (np. CiMAP - Projektowanie Stron Internetowych). Dlatego bardzo ważne jest umieszczenie na wszystkich stronach serwisu swojego logo i nazwy firmy czy witryny. Spełniają one bowiem dwojaką funkcję - określają pozycję bezwzględną (mówiąc, że to twoja strona) oraz pomagają "zlokalizować się" względnie - logo może przenosić do strony głównej, chociaż nie jest to niestety rozpowszechnione.

Zachęcaj odwiedzających do wysyłania swoich wrażeń

Przekonaj swoich gości do wysłania ci swoich wrażeń i doświadczeń związanych z surfowaniem po witrynie. Jeśli uda ci się znaleźć odpowiedź na następujące pytania:

  • które części twojej strony podobają im się najbardziej,
  • jakie tematy chcieliby widzieć na niej w przyszłości,
  • jak znaleźli twoją witrynę,

...będziesz mógł poprawić swoje usługi, sprawić, że witryna będzie jeszcze lepsza. Pamiętaj jednak, że ludzie nie są skłonni do współpracy, jeśli się ich do tego nie przekona, oferując na przykład coś za darmo. Może to być darmowa czcionka, porady, opracowanie, wartościowe zestawienie czy cokolwiek związanego z obszarem twojej działalności.

Odpowiadaj jak najszybciej na listy, które otrzymujesz

Najlepiej tego samego dnia, jeżeli pytanie zawarte w liście jest złożone i wymaga więcej czasu na odpowiedź - wyślij list typu "...pytanie dotarło, właśnie przygotowuję odpowiedź". W przypadku skomplikowanych kwestii może warto wdrożyć następującą procedurę:

  • list z prośba o cierpliwość,
  • odpowiedź właściwa
  • dwa, trzy dni później kolejny list, w którym upewniasz się, czy twoja odpowiedź okazała sie pomocna i była wyczerpująca.

Zbudujesz w ten sposób zaufanie do strony i firmy reprezentowanej przez tę stronę.

Autorem strony jest człowiek, a nie maszyna

Nie pozwól użytkownikom o tym zapomnieć. Zamieszczaj informacje o sobie lub o swojej firmie (historia, cele, misja). Dzięki temu przestaniesz być dla swoich gości tylko adresem internetowym. Ma to szczególne znaczenie przy prowadzeniu interesów przez Internet, w ten sposób dajesz sygnał, że się nie ukrywasz i wzbudzasz zaufanie. Warto tutaj wspomnieć o jeszcze jednej sprawie (do której sam do niedawna podchodziłem bardzo sceptycznie). Znajdź na swojej witrynie jakieś rozsądne miejsce na swoje zdjęcie lub zdjęcie szefa firmy - to pomaga zbudować zaufanie (bo się nie ukrywasz i jesteś człowiekiem z krwi i kości).

Nowości nie zawsze się opłacają

Używanie na swoich stronach technologii, która jest wspierana tylko przez najnowsze przeglądarki nie jest dobrym rozwiązaniem. Badania wskazują, że użytkownicy zmieniają swoje przeglądarki na najnowsze w tempie 1% na tydzień - oznacza to, że po roku zaledwie połowa z nich będzie miała je zainstalowanie na komputerze, a tym samym dopiero po tym czasie będzie w stanie korzystać z jej dobrodziejstw. Tak więc teoretycznie należałoby czekać dwa lata, aby nabrać pewności, że wszyscy zobaczą to samo i tak samo.

Szybkość strony jest najważniejsza

Podczas tworzenia stron za główne (choć nie jedyne) kryterium należy postawić sobie czas, z jakim strona będzie się ładować. Ma to szczególne znaczenie w Polsce, gdzie prędkość łączy pozostawia szczególnie wiele do życzenia, a wiele osób łączy się z Internetem przez modem. Postaraj się (uprzedzam, jest to trudne), aby twoja strona ładowała się nie dłużej niż 10 sekund, jest to bowiem maksymalny czas, jaki ludzie są skłonni czekać skupieni, potem zwracają swoją uwagę na inne czynności, lub mogą całkowicie zrezygnować z oglądania strony. Wynika to z badań przeprowadzonych w latach osiemdziesiątych w USA, badania dotyczyły nie Internetu, ale ludzkiego mózgu, więc są nadal aktualne. (Zainteresowanych tematem odsyłam do papierowej książki Jacoba Nielsena "Designing Web Usability", możliwe również, że jakieś informacje na ten temat znajdziecie na jego stronie www.useit.com).

Jeżeli zachodzi konieczność umieszczenia na witrynie dużej strony, ładującej się powyżej 10 sekund (ok. 35 KB), dobrym rozwiązaniem jest uprzedzenie o tym użytkownika, podając informacje o rozmiarach strony czy pliku.


Piotr Górniaczyk
webdesigner
piterski@plusnet.pl


Artykuł pochodzi z magazynu komputerowego @t.
Darmową prenumeratę możesz złożyć na www.at.w.pl