Ślepota bannerowa (banner blindness)

 
Banner blindness - rozmieszczenie i kolorystyka

Ślepota bannerowa (banner blindness) to termin opisujący wyuczone zachowanie internautów do unikania wzrokiem reklam, w szczególności tych w formie bannerów. Innymi słowy, zysk z umieszczenia na stronie bannera może być odwrotnie proporcjonalny do tego, jak bardzo przypomina typową reklamę.

To gdzie te reklamy?

Jak w takim razie umieszczać reklamy na stronie? Po pierwsze unikaj typowych formatów bannerów i typowych pozycji dla reklam na stronie. Po drugie warto wykorzystać paletę kolorów dopełniających layout strony zamiast użycia kolorów kontrastujących. Po trzecie animacja – jeżeli to możliwe, zrezygnuj z niej.

Zauważyłeś na swoich stronach skutki banner blindness? Udało Ci się je zminimalizować? Podziel się swoim doświadczeniem w komentarzu.

 
 

Magiczna siódemka w skutecznej nawigacji

 

Optymalizacja nawigacji z regułą siedmuMagiczny i szczęśliwy numer? Pierwsza myśl – siódemka! Coś w niej musi być skoro mamy 7 grzechów głównych, 7 dni w tygodniu, 7 powodów by się obijać… ;]

Siedem. Plus/minus dwa. Tyle obiektów możemy przechować w naszej pamięci krótkotrwałej. Tyle czynności wykonywać naraz, na tyle rzeczy zwracać uwagę. Siedem. To jedna z naczelnych zasad kognitywistyki, wyniesiona z artykułu opublikowanego w 1956 roku przez psychologa George’a A. Millera.

Dlatego strony z masą animowanych gifów nie są najlepszym rozwiązaniem. Dlatego warto się zastanowić nad strukturą nawigacji na naszej stronie. Ta może być głęboka (użytkownik potrzebuje więcej kliknięć, by dostać się do żądanego zasobu), lub płytka.

Tradycyjnie potrzebujemy złotego środka – i tu przychodzi magic rule of seven. Na każdym poziomie nawigacji powinniśmy mieć 7 odnośników (plus/minus 2). Wtedy przeszukiwanie jest wydajne (niewiele przejść), a jednocześnie nie powoduje uczucia przytłoczenia informacją.

Nawigacja na stronie według magic rule of seven

Kolejną magiczną liczbą jest 3. Trzy kliknięcia to wystarczająco dużo, by zniechęcić czytelnika, poszukującego odpowiedniego zasobu. Sprawdźmy ile stron jesteśmy w stanie wygenerować przy pomocy trzech poziomów nawigacji.

73 = 343 strony

To chyba wystarczająca ilość dla większości stron. A jak Ty budujesz nawigację? Jaką logikę czy podziały stosujesz? Napisz poniżej!

 
 

Kompozycja strony w czterech słodkich punktach

 

Prostokąt o proporcjach 1.6 x 1.0 - nasze "płótno"

Dwu- czy trzykolumnowy layout? Menu górne czy boczne? Stopka? Tak, Poproszę. Voila! Mamy gotową stronę.

Ten blog nie zostałby nazwany KISSdesign, gdyby traktował o stronach wyciętych z szablonu. Sieć to prawdopodobnie najbardziej konkurencyjne środowisko z jakim mamy do czynienia. Użytkownik naszej strony ma w zasięgu jednego kliknięcia miliony innych. Co zrobić by zatrzymać go choć na chwilę dłużej? Z pewnością treść.

A design? Może tylko pomóc. Weźmy na warsztat kompozycję strony. Choć w sieci, nasze płótno nie ma ściśle określonych wymiarów (różne rozdzielczości monitorów, proporcje ekranu itp.), warto  samemu zadbać o jego odpowiedni rozmiar. Z różnych przyczyn kultura przyniosła nam magiczne proporcje, które wydają się nam piękne. Weźmy na przykład kartki formatu A4. Albo format flag państwowych (powyżej).

Co prawda wysokość strony jest zwykle większa niż jej szerokość, ale zasada pozostaje ta sama. Resztę możemy odseparować wizualnie – linią poziomą, odstępem, odrębną kolorystyką itd.

Na rysunku powyżej, zaznaczyłem tzw. sweet spots, czyli punkty, w których krzyżują się linie pomocnicze. Wyznaczają one centrum zainteresowania czytelnika. Zobacz jak można je wykorzystać!

Symetryczna kompozycja strony internetowej

Symetryczna kompozycja strony internetowej

Wieje nudą? Strona jest pozbawiona dynamizmu. Uwaga czytelnika koncentruje się wyłącznie wokół grafiki. Słodkie punkty są zmarnowane. Pora na drugi przykład.

Dynamiczny layout strony internetowej

Dynamiczny layout strony internetowej

Każdy element strony zawiera sweet spot. Poza tym wykorzystanie pustego miejsca (white space) jest bardziej efektywne. Separuje treść od reszty. Zwróć uwagę, że ta kompozycja strony przypomina drukowane publikacje. Margines górny i lewy kierują skupienie czytelnika do centrum. Ostatecznie jego uwaga koncentruje się na tekście, leżącym w prawym, dolnym rogu. Dokładnie w ten sam sposób wędruje nasz wzrok, gdy czytamy książkę.

Słyszałeś o sweet spotach? Korzystasz z nich, czy ufasz swojemu wyczuciu? Napisz o tym w komentarzu!

 
 

XHTML – wykorzystanie semantyki

 

Semantyka xhtml, czyli jak zacząć pozycjonowanieProjektujesz, tworzysz strony, podstawy – xhtml i css nie są Ci obce. Ludzie wchodzą na Twoje strony, czytają je, wynoszą z nich jakąś wartość. Wynoszą dzięki temu, że słowa na nich zapisane mają określone znaczenie. Tym jest semantyka. Tym jest język.

Co to ma do xhtml-a? Spójrz na poniższy przykład.


<div class="header">
   Moje ulubione blogi o <span class="bold">web designie</span>:
</div>
<p class="item">seventhmodel.com/blog/</p>
<p class="item">designerblog.pl</p>
<p class="item">kissdesign.pl</p>
</div>

Taki kod popełnia chyba każdy, kto zaczyna obracać się w temacie. Teraz wersja bardziej pro:


<h1>Moje ulubione blogi o <strong>webdesignie</strong>:</h1>
<ul>
   <li>seventhmodel.com/blog/</li>
   <li>designerblog.pl</li>
   <li>kissdesign.pl</li>
</ul>

Jaka to różnica, skoro i jedno, i drugie za pomocą tych samych reguł w css może wyglądać identycznie?

W semantyce oczywiście! Dziś ma to największe znaczenie dla wyszukiwarek. Nie jest żadnym odkryciem, że frazy opisane przez nagłówki h1h6, czy podkreślone za pomocą strong i em, mają większe znaczenie na stronie. Idąc krok dalej, wyszukiwarki już niedługo będą rozkładały strony na czynniki pierwsze i wyjdą poza podział na ważne i nieistotne.

Google szukając dla użytkownika definicji jakiegoś terminu, zajrzy do stron, które zawierają szukaną frazę w tagu dt (definition title). Już teraz mamy wysyp różnych mikroformatów, które korzystają z ukrytej przed użytkownikiem semantyki xhtml-a.

Dlatego stosuj znaczniki, zgodnie z ich przeznaczeniem. Nie nadużywaj nic nie znaczących div-ów i span-ów. Korzystaj z bogactwa jakie daje xhtml. Jestem pewien, że takie podejście zaprocentuje już w niedalekiej przyszłości. A na pewno nie zaszkodzi ;]

Chcesz więcej?  Przyjrzyj się  użyciu specyficznych tagów xhtml opisanych przeze mnie.

Uważasz, że cała ta zabawa w semantykę to tylko dodatkowa czarna robota? A może na własnej skórze odczułeś wpływ semantyki na SEO? Napisz o tym w komentarzu!

 
 
następne wpisy »