Sova v síti - 1/30 - vydáno 12.11.2001

Dobrý den, končí pondělí a je zde 30. jubilejní Sova v síti :-)


OBSAH

-- Psychologie Webu
-- Jak na pozadí prvků v NN 4.x pomocí CSS
-- Novinky u Petra Kocny
-- Odpovídáme na dotazy čtenářů


PSYCHOLOGIE WEBU

Miroslav Hlavička

Nestává se příliš často, abychom navštívili nějaký web
a nenarazili přitom na jediný problém v navigaci nebo
na nejasnost v designu. Ale pokud se tak přesto stane, většinou
za tvorbou podobného webu stojí početný tým tvůrců. Velké
společnosti přinášejí rozsáhlé weby se složitou strukturou
a realizace takových projektů již není prací pro jednoho grafika
a jednoho kodéra HTML. Za takovými stránkami se skrývá práce
mnoha profesí a mnohaleté know-how nejen z oboru grafiky
a webdesignu.

Psychologové se v poslední době těší značné oblibě a využívání
jejich služeb mnohdy hraničí spíše s módními trendy než se
skutečnou potřebou. Nicméně právě webdesign (a obecně jakýkoliv
užitý design) si o práci zkušeného psychologa přímo říká. Tento
článek by měl ozřejmit, jaká je funkce psychologa při vývoji
webových stránek.

Webový psycholog může získat řadu užitečných vědomostí od svého
kolegy z oboru reklamy. Aniž si to spotřebitel uvědomuje, každý
billboard, každý dobrý reklamní spot, prochází rukou psychologů.
Ti již mnoho let zkoumají reakce člověka, který je působení
reklamy vystaven. Na základě svých zjištění dospěli reklamní
psychologové k řadě pravidel, která se po drobné úpravě dají
použít i na webu.

Můžeme začít například rozmístěním jednotlivých prvků na ploše
(ať už na billboardu, na televizní obrazovce nebo -- v případě
webdesignu -- na monitoru počítače). Základní pravidlo zní: velká
figura potlačuje své okolí. Pokud je na ploše výrazný prvek,
musíme okolo něj vytvořit vzdušnější prostor. Jakýkoliv další
důležitý prvek nesmí být umístěn v blízkosti toho
nejvýraznějšího, pak totiž zaniká a je snadno přehlédnutelný.

Další pravidlo: uvědomme si, jak spotřebitel čte. V naší kultuře
čteme texty zleva doprava a shora dolů. Proto nevědomky první
pohled na novou plochu patří levému hornímu rohu. Umístění loga
nebo menu do těchto míst má tedy své opodstatnění. Navigace
v levém horním rohu má účinnost až 90%, navigace v pravém horním
rohu okolo 75-80%. Ve webdesignu je účinné i horizontální menu
v horní části, ale to zejména díky zvyku (většina programů
na počítačích má takto řešené menu). Naopak, menu v pravém dolním
rohu je možná inovativní, ale jeho účinnost je pod 50% - lidé
od tohoto místa prostě neočekávají důležitý navigační prostor.
Samozřejmě, pokud jsou cílovou skupinou hebrejsky čtoucí
uživatelé, pak se řada parametrů mění.

Pokračovat budeme pravidlem, které je také velmi důležité: příliš
mnoho prvků je na závadu.

Je-li na ploše mnoho prvků, oko má problém si všechny jednoduše
zapamatovat. Proto je potřeba maximum prvků sdružovat do skupin
nebo je spojovat alespoň opticky. U webdesignu se to často dělá
rozdělením do sloupců a používáním boxů s odlišně barevným
pozadím. Člověk si musí po několika vteřinách zapamatovat, kde
jsou ovládací prvky, kde je logo serveru, kde se dá něco
stisknout a kde vyplnit. Teprve potom věnuje pozornost konkrétním
textům.

Pravidlem, které znají všichni dobří tvůrci reklam je: dbejme
na hierarchii prvků. Lidské oko si primárně všímá lidských postav
a jejich částí, pak zvířat a potom teprve věcí. Použití lidské
postavy v propagaci je tedy velmi ošidné -- lidé si budou všímat
sličné modelky a nepostřehnou drobný předmět, který drží
usmívající se kráska v ruce. Ostatně, sami si můžete všimnout,
jak na jakémkoli webu na vás zapůsobí banner či ikona s lidskou,
nejčastěji ženskou, postavou či obličejem. Stejný efekt mají
fotografie. Je-li na webové stránce fotografie, vždy upoutá
značnou pozornost a přebije vše ostatní.

Existuje pravidlo, které se týká především televizních spotů, ale
v podstatě se dá použít i na složitější flashovou animaci
(ve smyslu animovaného filmu, nikoli poletujících nápisů): Každý
ksicht potřebuje dvě vteřiny. Pokud v našem filmečku vystupují
lidské postavy, první záběr na každou z nich by měl trval alespoň
dvě vteřiny (v případě hromadných záběrů pak dvě vteřiny
na rozkoukání a jeden a půl vteřiny na každou osobu). Pak máme
jistotu, že divák při dalších záběrech pozná, že jde o tutéž
postavu. Uvedené časy platí pro video s živými osobami. U animací
se často setkáme s výrazně zkarikovanými postavami, z nichž každá
má nějaký výrazný prvek a časy proto mohou být kratší.

Asociujte, asociujte, asociujte. Využívejte známých nebo již
existujících skutečností k vytvoření asociací. Velkou chybu
například dělal portál Quick.cz, když na svém webu nevyužíval
prvky z televizní reklamy (nebuď šnek…). Přestože televizní
reklama nepropagovala portál, ale připojení k internetu, lidé
se na tomto portálu divili, že po šnecích tam není ani stopa
-- adresu quick.cz prostě měli spojenou s modrým supermanem
a pomalými šneky. Až nedávno se tento slogan na portál vrátil
v podobě malého banneru a je to dobře -- lidé si vzpomenou
na reklamu, lépe si stránky Quicku zapamatují a reklama, která
propagovala jinou službu, tak hezky poslouží i samotnému portálu.

Typografové nám potvrdí, že už od dob Guttenberga platí pravidlo:
"Tři různé fonty a dost." Skutečně, různými druhy písma se musí
šetřit. V případě okrasných písem používáme jen jedno na jedné
stránce, snažíme se nemíchat v jednom řádku dva různé fonty
(zvýraznění kurzívou nebo tučně postačí), neplácáme na každý
nápis tunu stínů a efektů. Jinak náš web bude vypadat jako letáky
na výprodeje, které nalézáme ve svých schránkách a které jsou
často přímo učebnicovým příkladem špatné grafiky a typografie.
Psycholog šmrncnutý optikem by k tomu ještě dodal, že mnoho
okrasných písem se špatně čte a vysázet celou webovou stránku
moderní napodobeninou gotických písem je střemhlavým skokem do
Macochy.

Textový obsah je nedílnou součástí každé stránky (s výjimkou
těch, na které návštěvníci chodí pouze za fotkami Christine
Applegate). Webový psycholog ve spolupráci s copywriterem
(textařem) pak radí: "Pozor na slova -- wording je důležitý!"
Wordingem myslíme zejména nápisy v menu, na tlačítkách,
v navigaci a v titulcích. Není nutné být za každou cenu
originální a vymýšlet novotvary, je lepší sázet na osvědčená
slova a sousloví. Je potřeba být výstižný a stručný, použitá
slova mají být jasná a jednoznačná. Jistě, alternativa ke slovu
"download" není jednoduchá. Časté "stáhněte si" ve mě evokuje
pokračování "a polibte si". Zkušený textař s velkou slovní
zásobou ale dokáže vymyslet opravdu dobré alternativní texty. Jen
ho musíme hlídat, aby ve své kreativitě nešel příliš daleko.
Dbejme také na jazykovou správnost a čistotu. Nemíchejme anglické
a české termíny na jedné stránce (resp. v jednom menu).

To je několik základních pravidel, která se často při tvorbě webů
opomíjejí. Velká webová studia si mohou dovolit najímat
psychology, drobní tvůrci, kterých je mezi čtenáři Sovy mnoho
snad ocení a využijí tento malý kousek know-how k tomu, aby
jejich práce působila profesionálněji a dospěleji.

(c) 2001  Miroslav Hlavička, mailto:scalex@scalex.cz


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Internet a podnikání * Začínáme podnikat * Účtujeme směnky
Připravujeme investiční záměr * Provokativní strategie úspěchu
Vyjde v Sově v podnikání 19.11.01 - http://www.sovavpodnikani.cz/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


JAK NA POZADÍ PRVKŮ V NN 4.X POMOCÍ CSS

Pokud chcete "obarvit" pozadí určitého prvku, např. odstavce, či
nadpisu, učiníte tak pomocí CSS nejspíše takto:

p {
  background: #ffffcc none;
}

Je to zcela podle standardu a vše se zdá být v pořádku až
do chvíle, kdy se na stránku podíváte v Netscape Navigatoru
verze 4.x. V tom případě zjistíte, že na rozdíl od všech
ostatních prohlížečů (IE 4+, NN 6, Opera) je barevné pozadí
*pouze pod textem* a nevyplňuje celou pravoúhlou plochu boxu
prvku.

Existuje ale trik, kterým přinutíte i NN 4, aby se choval
rozumněji. Stačí okolo prvku doplnit ještě jednopixelový rámeček
o stejné barvě, jako má pozadí. Definice CSS pak vypadá takto:

p {
  background: #ffffcc none;
  border: 1px #ffffcc;
}

Protože se NN 4.x někdy chová opravdu jankovitě, nespoléhejte
na tuto radu automaticky a vždy si výsledek pečlivě zkontrolujte.
Uvedený trik např. nemusí fungovat u nadpisů (značky <h1> až
<h6>) v tabulkách, někdy je potřeba selektor rozšířit o třídu
(např. p.spozadim), někdy i o pravidlo "width:100%" (ovšem pozor,
to někdy zobrazení ještě více naruší).

NN 4.x se prostě v různém kontextu chová vždy trochu jinak
a mnohem lepší je ho od stylů zcela "odstřihnout", jak jsme
to udělali na stránkách Sovy v síti. Někdy si to však nemůžete
dovolit a pak se vám tento trik může hodit.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Doporučte sovu v síti vašim přátelům. Přepošlete jim toto číslo,
nebo použijte formulář na http://www.sovavsiti.cz/recommend.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


NOVINKY U PETRA KOCNY K 11.11.2001

... v katalgu katalogů http://www.lf1.cuni.cz/~kocna/kam-www.htm
a vyhledávačů http://www.lf1.cuni.cz/~kocna/roboti.htm

Přidány další nové odkazy -- celkem již 176.

ProZdraví -- portál -- Centrum celostní medicíny, zaměřený
na medicínu, především alternativní, má kategorii odkazů,
zařazení + emailové potvrzení slibují správci do 3 dnů --
požadavek z 5.11., zatím čekám na odezvu.

URL: http://katalog.prozdravi.cz/
URL pro vložení odkazu: http://katalog.prozdravi.cz/pridej.php

CoverSite -- další nový český portál + katalog stránek, kategorií
má sice 26, ale odkazů dohromady 27, zařazení za 5 dní,
prohledávání je jen přes popis a titulek, neprohledává URL.

URL: http://coversite.3web.cz/
URL formuláře pro vkládání odkazů:
http://coversite.3web.cz/links.php?op=Add

Změna URL -- hledání v seznamu Klikni. Idnes.Cz.
http://klikni.idnes.cz/Hledej.asp?qu=kocna

Boskovan -- nabídnuté odkazy vloženy, bez emailového potvrzení,
prohledávání funguje jen přes titulek + popis, ne přes URL.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Starší čísla naleznete na http://www.sovavsiti.cz/archiv.html
Více odkazů pro webmastery na http://www.sovavsiti.cz/odkazy.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


ODPOVÍDÁME NA DOTAZY ČTENÁŘŮ

Dotaz:

Jaky mate nazor na registrační programy na vyhledávačích? Submit
Wolf, AddWeb, Submission Wiz, Active Web Traffic, Web Possition
Gold atd.? Nevite kterej je fakt dobrej, nektery slibujou tisice
vyhledavacu, ale pak Vas zaregistrujou do spousty FFF sites
a jenom par vyhledavacu.

Odpověď:

Můj osobní názor (odpovídá Marek Prokop) na programy tohoto typu
je spíše negativní. Většinu návštěvníků totiž posílá sotva 20
nejznámějších katalogů a vyhledávačů a do těch je třeba se
zaregistrovat velmi pečlivě, to znamená ručně. Všechny ty stovky
ostatních se na návštěvnosti projeví zcela zanedbatelně.

Dnes již ani neplatí, že počet libovolných externích odkazů (tzv.
link popularity) vylepšuje hodnocení v některých vyhledávačích.
Nejedná-li se o relevantní (tj. opět ručně vybrané) odkazy, je
jedno, jestli jich je deset, nebo tisíc.

Nicméně, Miroslav Hlavička, autor dnešního hlavního článku, se
nedávno nechal slyšet, že jeden z těchto programů s úspěchem
používá. Pokusím se ho tedy přemluvit, aby o něm do Sovy něco
napsal :-)


Dotaz:

Mohl byste mi prosím poradit (případně tento dotaz s odpovědí
zveřejnit - alespoň částečně), jestli se u webových stránek
v provedení s rámy dávají klíčová slova pro vyhledávače pouze
do souboru index.htm, kde jsou vlastně pouze definované rámy,
nebo jestli se umísťují do všech stránek.

Dále by mě zajímalo, jak zadávat klíčová slova u vícejazyčných
stránek a jestli používat diakritiku u českých slov či ne, když
je počet klíčových slov omezený a nejde tedy obsáhnou všechny
potřebné tvary a současně jednotlivé jazyky.

Čím to je, že někde se píše o klíčových slovek jako základu
pro vyhledávače a jinde zase uvádějí, že je to již přežitek
a že prohledávací roboty je příliš nebrou v úvahu.

Odpověď:

Jedná se vlastně o tři dotazy, takže po pořádku:

1) O rámech jsme již v Sově psali v článku "Výhody a nevýhody
rámců", který najdete na http://www.sovavsiti.cz/c01052.html
Mimo jiné se v něm dočtete, že stránky s rámy se velmi obtížně
propagují a špatně optimalizují pro vyhledávače. Proto se snažte
použití rámů vyhnout.

Pokud to však z nějakého důvodu není možné, řešení existuje. Je
třeba optimalizovat stránku obsahující frameset. Pro tuto stránku
zvolte vhodný titul (<title>), metatagy "keywords" a
"description" a hlavně na ni do prvku <noframe> umístěte
optimalizovaný text.

2) V případě vícejazyčných stránek je třeba mít klíčová slova
(ale i další metainformace, především <title>) v každém jazyce
zvlášť. Samozřejmě předpokládám, že máte pro každý jazyk
samostatné stránky, tj. že nemícháte více jazyků na jediné
stránce.

3) Klíčová slova samozřejmě představují jedno z hlavních kritérií
relevance. Ovšem pozor, nejedná se zdaleka jen o klíčová slova v
metatagu "keywords". Mnohem důležitější počet a umístění
klíčových slov ve vlastním textu dokumentu.

Moderní vyhledávače už nepočítají klíčová slova mechanicky. Místo
toho se snaží sofistikovanou analýzou odhalit skutečné téma
stránky a podle toho pak určují relevanci.

Zároveň ale relevance není jediným kritériem. Čím dál větší váhu
získává hodnota obsahu. Tu určují vyhledávače např. z kvality
HTML kódu, poměru textu k ostatním prvkům, množstvím relevantních
zpětných odkazů, atd.


A to je pro dnešek vše. Omlouváme se tazatelům, na které se dnes
nedostalo a těšíme se na shledanou příští pondělí, kdy v čísle 31
naleznete:

-- Jak na vyšší účinnost odkazů -- Má být text odkazů dlouhý,
nebo krátký a kolik odkazů má být na stránce? Marek Prokop hledá
odpovědi ve svých experimentech i v různých studiích.

-- Co je eye-tracking vám vysvětlí Miroslav Hlavička.

-- Odpovědi na vaše dotazy, zajímavé odkazy, novinky v katalogu
katalogů a vyhledávačů Petra Kocny, atd.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Nechcete, nebo naopak chcete dostávat Sovu v síti?
Odběr lze odhlásit odesláním zprávy na unsubscribe@sovavsiti.cz.
Přihlásit se lze odesláním zprávy na subscribe@sovavsiti.cz, nebo
formulářem na adrese http://www.sovavsiti.cz/.
Chcete nám cokoli sdělit? Uvítáme vaše náměty, připomínky,
kritiku, atd. na adrese mailto:redakce@sovavsiti.cz.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Není-li v konkrétním případě uvedeno jinak, je autorem všech
publikovaných článků Marek Prokop. Tento ezin, nebo jeho
libovolnou část můžete volně šířit dále, pokud současně uvedete
zdroj následujícím způsobem:
_________________________________________________________________
Sova v síti -- (c) 2001 Marek Prokop -- http://www.sovavsiti.cz/