Blog společnosti webProgress s.r.o.

Návrh webu - hlavní zásady

06. května 2010 | Autor: Martin | komentáře

Nenuťme uživatele přemýšlet, je heslo, se kterým se každý z nás již nejednou setkal. Úplně vidím sebe i většinu z vás, jak při tomto výroku svorně pokyvuje hlavou na znamení souhlasu, ale ruku na srdce, kdo pro jeho naplnění udělal více, než jen přitakal? Lehce se souhlasí, hůře se naplňuje.
Když nemáme uživatele nutit přemýšlet, kdo tedy má přemýšlet?

Proveďte uživatele vašim webem

V počátku masového využívání internetu, sahajícího do poloviny devadesátých let minulého století, si většina uživatelů brouzdání „řádně užívala“. Neexistovali fulltextové vyhledavače a k informacím jsme se většinou nedostali jinak, než klikáním. Internet přímo nutil klikat zleva doprava, a pokud jsme chtěli něco relevantního najít, vláčel nás po stránkách celé hodiny, nutil nás skákat z jednoho odkazu na druhý, ze stránky na stránku. Nutno podotknout, že to bylo nové a zábavné, dá se říct, že tenkrát byl internet pro mnohé uživatele cílem.
Dnes je trend zcela opačný. Uživatel očekává, že ho naším webem provedeme, připravíme pro něho jasnou, rychlou a srozumitelnou cestu k potřebným informacím či k dokončení objednávky.

Jak na to

Navrhujme strukturu webu a webové rozhraní, které bude intuitivní, snadno použitelné. Takové rozhraní, ve kterém vše jednoduše nalezneme, případně se ho snadno a intuitivně naučíme ovládat.
Mechanismus ovládání a jednotlivé funkce musí být předvídatelné. V opačném případě dochází na straně uživatele webu k frustraci.

Konzistence znamená stabilitu

Dávejme uživateli informaci o tom, kde se právě nachází, ať se jedná o strukturu webu či jednotlivé kroky v nákupním procesu. Není nic horšího, než se na webu ztratit. Snažme se uživatele zasadit do kontextu celého webu.

Logické objekty

Uspořádejme informace na stránce do souvislostí a snažme se tvořit vizuální hierarchii, která odpovídá potřebám uživatele, vždyť rozložení stránky je klíčovým bodem úspěchu a to ať se jedná o eshop či informační web.
Sestavujme jednotlivé funkce (např. výběr velikosti, barvy, tlačítko koupit) do logických celků a nenuťme uživatele přeskakovat z různých částí stránky s cílem provést konkrétní úkol.
Nejdůležitější informace a funkce na stránce zvýrazněte graficky – barvou, velikostí či tvarem.

Maximální počet funkcí a fičur

Odstraňme z webu všechny funkce a fičury, co tam nepatří a nemají na něm své opodstatnění. „Má to každý eshop“ není argument pro dobré fungování nově vznikajícího díla.
Má význam řadit výrobky v kategorii dle názvu, ceny, výrobce…, když kategorie obsahuje 10 položek? Nemá. To, že tyto funkce nabízejí ostatní eshopy, neznamená, že to funguje, nebo že je funkce využívána. Našim cílem není přeci ukázat, kolik jsme schopni vymyslet a naprogramovat funkcí.

Závěr

Věřím, že se mi podařilo u vás vyvolat otázky nad malými, „nepostradatelnými“ funkcemi vašich webů či eshopů. Není nutné dělat věci složitější, než ve skutečnosti jsou.
Podařenou ukázkou může být jednoduchý a přehledný web, který jsme nedávno spustili pro službu MediaPost, či netradičně pojatý eshop s nafukovacími čluny GUMOTEX.

Validace

14. dubna 2010 | Autor: Vlastimil | komentáře

Jednou z důležitých podmínek pro úspěšný provoz internetových stránek je jejich tzv. „validita“. Zjednodušeně se dá napsat, že se jedná o dodržení standardů napsaného programového kódu stránek tak, aby tento zápis odpovídal předpisům mezinárodního konsorcia firem W3C, tj. konsorcia významých softwarových a hardwarových firem, mezi které patří také výrobci internetových prohlížečů. Pro laiky tuto větu zjednoduším: Validace je kontrola programového kódu stránek podle předepsané normy.

Programový kód stránek se např. v Internet Exploreru zobrazí po stisku pravého tlačítka myši na stránce a vybrání volby „Zobrazit zdrojový kód“

Kontrolu validity může provádět i laik a to díky tzv. validátorům. Validátor je dostupný na internetu a jednoduše do něj zadáte internetovou adresu kontrolované stránky. Následně validátor zobrazí výsledek, který obsahuje buď sdělení, že je stránka validní, a nebo seznam připomínek a chyb, které je potřeba opravit.

ukázka validní stránky z validátoru: http://validator.w3.org/

Aby to nebylo tak jednoduché, tak každá stránka může být psaná v různé verzi HTML a k tomu ještě dle různého předpisu tzv. DTD (Document Type Definition), který prohlížeči říká, jaký programový kód může očekávat. Nejnovější používaná verze HTML je XHTML 1.0 s typy DTD (Strict, Transational a Frameset). Laik může verzi HTML ve kterém jsou stránky psány zjistit ze zdrojového kódu stránek. Bývá uveden na prvních řádcích.

Ukázka definice typu HTML stránky

Popis verzí HTML jsem se snažil co nejvíce zjednodušit, takže pokud vás zajímají podrobnější a přesnější informace, můžete se podívat na wikipedii (HTML, XHTML).

Obecně se dá říci, že pokud je stránka napsaná validně dle posledních standardů, měla by se správně zobrazit ve většině známých internetových prohlížečích (Internet Explorer, Mozilla, Opera, Safari)

A co si ještě odnést?

• Validita je podmínka nutná, nikoliv dostačující
  Při stavbě kvalitních internetových stránek je potřeba se také zaměřit na správnou volbu struktury stránek, na správné rozmístění prvků na titulní stránce a podstránkách, na přehledném grafickém ztvárnění stránky, vhodné volbě ergonomie ovládání stránek a v neposlední v řadě se zaměřit na kvalitní a nejlépe jedinečný obsah.
• Pokud stránka validní není, tak lze očekávat:
  • Chybné zobrazení v různých prohlížečích
  • Špatnou indexaci ve vyhledávačích
  • Pomalé zobrazování stránek
  • Chybné zobrazení v budoucích verzích prohlížečů
  • Pomalou údržbu pro programátora stránek
• Validátor
  • Validátor HTML
  • Vylidátor stylu CSS
    

Supermarket vs. Eshop

09. dubna 2010 | Autor: Richard | komentáře

Brouzdám si s nákupním košíkem mezi regály. Tady máme ovoce a zeleninku - šup s ní do košíku, který v zápětí strhávám doprava mezi regály s makrelami a sardinkami. Další zatáčka je stoosmdesátka levotočivá, beru jeden olej, jeden ocet a šup pravotočivá, těsně míjím ostrůvkové regály se zbožím v akci… Už doma si píšu seznam tak, abych měl jednotlivé položky rozepsané podle toho, jak budu míjet regály v obchodě. Šetří mi to čas i nervy. Pokud ale nejde o plný žaludek, nýbrž třeba o elektroniku, nejezdím ji nakupovat do supermarketu, kupuji ji na internetu. Člověk rád ušetří čas, a když nakoupí u důvěryhodného internetového obchodníka, tak si stále častěji ušetří i nervy (při koupi i v případě pozdějších reklamací).

Posledně jsem přes internet kupoval fotoaparát. Věděl jsem zhruba i značku, kterou jsem chtěl. Do vyhledavače jsem zadal "fotoaparát Nikon" a proklikával se výsledky.

Eshop nemá "hlavní vchod"

První, velmi podstatný, rozdíl mezi supermarketem (kamenným obchodem) a eshopem tkví v tom, že kamenné obchody mají pouze jeden vchod, zatímco eshop má přesně tolik vchodů, kolik má zaindexovaných stránek ve vyhledavači. Mnoho lidí zde asi překvapí, že na okřídlené "Vítejte v našem super eshopu" většina zákazníků nenarazí.

Faktem je, že většina klientů stráví 80 % času připomínkováním a úpravami úvodní stránky eshopu a ostatním stránkám už tolik pozornosti nevěnují. A to i přesto, že pro uživatele elektronického obchodu je velmi důležitá právě ta stránka, na kterou jej vyhledavač přenese (tzv. landing page) což je u eshopu velmi často seznam produktů nebo přímo stránka s konkrétním produktem.

Důležitá je dobrá navigace mezi skutečnými i virtuálními regály

Když se dostanu do neznámého supermarketu a mám koupit konkrétní věc, stoupnu si do uličky a hledám pomocí cedulek ten "správný regál", když to nezabere, ptám se prodavače (pokud tam nějakého najdu), protože mi nic jiného nezbývá. Neodcházím, další kamenný obchod je totiž většinou v nedohlednu.

Na internetu je tomu jinak. Vyhledavač ve výsledcích vyhledávání ukáže hned několik obchodů a po kliknutí na kterýkoliv z výsledků nás (většinou) zavede k požadovanému "regálu" nebo přímo na konkrétní produkt. Takže pokud se jako zákazník v eshopu „ztratím“ nebo nemůžu něco najít, nezavolám si prodavače, aby mi poradil, ale prostě jen zavřu okno prohlížeče a jdu ke konkurenci.

V každém eshopu je důležité, aby zákazník věděl:
1. kde se v eshopu právě nachází (drobečková navigace, menu)
2. jak se dostane k jinému regálu (například k další značce) nebo k pokladně
3. kde je nákupní košík a jak vyřídí svůj nákup

Děkuji, zaplatím

Jsem v supermarketu a stojím ve frontě u pokladny. Čím delší fronta a čím víc dětí, tím víc peněz mě nákup stojí. Ilustruji to na následujícím rozhovoru s dcerami:
"Tatí, můžu si koupit tady to lízátko? Prosím, prosím."
"Ne!"
... 2 minuty v podobném duchu…
"Tatí, tak aspoň tady ty žvýkačky…“
"Ach jo, no co s tebou…“
"No tak já chci taky ty žvýkačky tatí, když může Bára."

Takhle pěkně to funguje v kamenných obchodech, ale ne na internetu.
Pokud se před posledním krokem a kliknutím na "Potvrdit objednávku" (třeba s tím Fotoaparátem Nikon) z pravé reklamní lišty dozvím, že eshop nabízí velmi výhodně Fotoaparát Olympus, který je o 3000,- Kč levnější a velmi podobný tomu co mám zrovna v košíku, prostě nákupní proces přeruším a kliknu na tento produkt. Je to škoda, protože nákup už mezitím mohl být dokončen.

Když zákazník klikne na tlačítko "Do košíku" nebo "K pokladně" není vhodné jej rozptylovat zbytečnými informacemi, které s procesem „dokončení objednávky“ nesouvisí! Můžeme ho totiž lehce ztratit.

Pod čarou

Zásadní rozdíl mezi stylem nakupování žen a mužů tkví v tom, že většina mužů ví, proč do kamenného obchodu míří, co tam chce koupit a přemýšlí, jak na to, aby co nejrychleji vypadl. Zatímco ženy rády prochází obchody a přestože chtějí koupit konkrétní věc, jsou schopny strávit v obchodě několikrát více času prohlížením dalšího zboží.

Největším objevem pro mě bylo, když jsem zjistil, že (některé?) ženy takto nakupují i na internetu… :)