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 wiec 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.

Odziel 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ęsci można stosować również poziome linie (ostrożnie), proste elementy graficzne czy choćby wolną, bialą przestrzeń. Pamiętaj jednak, że odstęp sugeruje brak związku logicznego a podobienstwo 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. Bazujac 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

Projektujc strony internetowe pamiętaj aby grafika, design - ogólne cała powłoka nie tłumiła przekazywanych informacji. Dlatego np. należy 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 starndardu ISO 8859-2, w tym celu pomiedzy 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 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ę tam "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 ona 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 nie 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 mozliwość 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 powinnien 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 serfowaniem 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 się upewniasz 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 technologi, 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 bedzie 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 ładowala 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 w 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

Autor: Piotr Górniaczyk
Dodano: 12.06.2002