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ż czarne litery.
o autorach
Piotr Górniaczyk Webmaster VoodooMan. Jego witryna porusza tematykę związaną z programem Adobe Photoshop oraz webdesignem.
Łącznie napisał dla nas 5 artykułów.tych samych autorów
- Nagłówek - 90% sukcesu [PG]
- Dlaczego strony muszą się dobrze drukować? [PG]
- Sztuka projektowania odnośników [PG]
- Strona główna - twoja wizytówka [PG]
zobacz również
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ć
Dobry design (czyli projekt graficzny) 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 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żywąjąc szablonów dostępnych w wielu programach do składania stron lub jeszcze lepiej używajac stylów kaskadowych CSS.
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 wlaś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 .
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
Tworząc strony 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 wyszukiwarek (niektórych).
- przeglądarki osób niewidomych potrafią czytać na głos znaczniki ALT
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. Voodooman Photoscope). 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.
Przekonaj swoich gości do wysłania ci swoich wrażeń i doświadczeń związanych z sefrowaniem 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.
Projektuj dla wszystkich
U podstaw HTML, języka Internetu leży założenie, że każdy powinien mieć możliwość oglądania strony bez względu na to pod jakim pracuje systemie, jakiej używa przeglądarki i jaką ma ustawioną rozdzielczość monitora. Nie stosuj więc rozwiązań i technologii obsługiwanych tylko przez niektóre przeglądarki ani nie projektuj stron czytelnych tylko w niektórych rozdzielczościach. Staraj się tworzyć dla wszystkich nie tylko dla większości. Przemyśl czy dla pewnych efektow "specjalnych" warto wyrzucać za drzwi, powiedzmy 5-10% potencjalnych klientów.
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 większosc łą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, podjąc informacje o rozmiarach strony czy pliku.