Web postaven na content focus 

Jak to udělat, aby uživatel neodešel z webu dřív, než ho stihnete zaujmout? Vytvořit poutavý web není takový problém.

V předchozím článku jsem Vám vysvětlil, co to znamená “mobile first“. Dnes se koukneme na to, jak neztratit uživatele. Content focus je jednoduše zaměření na obsah. Důležité je, aby uživatel nebyl rušen a nelákalo ho překlikávat na jiné podstránky či dokonce odejít z webu. Šanci na to zaujmout máte jen jednu a trvá asi 5 sekund.

Content focus v praxi

Když se podíváte na produktovou stránku Apple iPhone 6, tak si pravděpodobně ani nevšimnete menu. Nejsou tam žádné postranní panely, barevné menu, různé upoutávky – prostě čistý obsah. Menu tedy není vůbec výrazné. Co ale upoutá Vaši pozornost, je ten telefon. Cíl této stránky je upoutat na produkt a prodat ho. Jediné, čeho si všimnete, je modré tlačítko – koupit.

Pruduktová stránka iPhone 6 na apple.com
Produktová stránka iPhone 6 na apple.com (zobrazit)

Jako kontrast k tomuto příkladu skvělého designu mám stránku stejného produktu na českém eshopu Datart. Trochu se v té barevné mozaice ztrácí to hlavní, ten produkt. Tlačítka, platební metody, ikonky, vše na sebe zbytečně upoutává pozornost. V prvním dojmu ani nevím, kde je tlačítko koupit, kde jsou nějaké specifikace. Stránka je hrozně přeplácená zbytečnými informacemi.

Produktová stránka iPhone 6 na datart.cz
Produktová stránka iPhone 6 na datart.cz (zobrazit)

Z těchto dvou příkladů plyne, že content focus staví na jednoduché poučce:

“Čím méně, tím lépe.”

Princip “Mobile first”

Poslední dobou hodně řeším na webech takovou věc, které se v Google Analytics říká: “míra okamžitého opuštění stránky” a “průměrná doba trvání návštěvy“.

Tyto dva údaje se v Google Analytics počítají podle nějakého algoritmu, který se dá v nastavení samozřejmě změnit a lezou Vám pak dost jiné hodnoty. Tuším, že v default to funguje tak, že pokud člověk otevře stránku a je na ní pod 15 s, pak odejde z webu, tak se to bere jako okamžité opuštění.

Co ale tyhle dva údaje říkají (je v celku jedno, jestli je to po 5 nebo 30 sekundách) je, jak se Vaše stránka líbí a jak dlouho máte na to, tam něco prodat.

Problém jak všech wordpress webovek, tak vlastně komplet webů je, že uživatel je pořád rušen nějakými elementy na stránce, které s obsahem nemají nic společného. Jsou to třeba velké slidery/fotky v hlavičce, kde až pod nimi je ten text a informace, co hledám. Nebo různé postranní boxíky, které mají reklamu, citáty, kalendáře atd. To uživatele většinou vyruší od textu, který si chtěl přečíst a stane se tak pro něj ten tok informací, které mu chcete dát, NEPŘEHLEDNÝ.

Postranní panel a miniaplikace
Postranní panel a miniaplikace
na mobilenet.cz

Jak to udělat, aby člověk neutekl z webu?

Musí dostat přehledné a konzistentní informace, které jsou strukturované do nějakého proudu od začátku až do konce. Dole pak nějaká konverze, akce na prodej atd.

V praxi samozřejmě není problém něco takového udělat, protože nakonec skončíte na tom, jak vypadá tento blog, mínus levé menu. Takže tam místo článku není nic, což je vlastně to, co chcete. Soustředit se na obsah a nerušit uživatele. Není to ale jen o blogu, ale klidně i prodejním webu.

Mobile first je princip, kdy se web začíná dělat pro mobil a až poté pro počítač. A pro ten počítač se dělá vlastně ve stejném duchu jako pro mobil. Obecně online prodej roste třikrát rychleji na mobilech než na PC. Cca 60% návštěv webů je pak z mobilu. Takže doba, kdy web je jen pro počítač, je pryč.

Výhoda konceptu mobile first je ta, že na obrazovce mobilu je prostě málo místa a prostor pro velké fotky v hlavičce či boxíky po stranách prostě není. Soustředíte se na samé jádro webu, tzn. na informace, které tam jsou. Když pak se stejnou myšlenkou děláte web pro PC, je jednoduše dáno, že bude úspěšný.

Dva takové známe weby v České republice jsou super.cz a www.sport.cz.

mobile first koncept na super.cz
Mobile first koncept na super.cz

Co si o tomto principu myslíte? Má smysl? – Napište do komentářů! :)

Ruzickajan.cz je na Twenty Fifteen

Hlavním důvodem proč jsem migroval celý svůj web, který jsem napsal před několika lety (už tomu je skoro 7 let), byla právě možnost snadno vytvářen nový frontend webu (design webu). Migroval jsem tedy na WordPress, který je zdarma, používám ho i na komerční projekty a podle mě je to prostě řešení, které dává hlavu a patu. Mnoho lidí si myslí o WordPressu svoje a sestavuje různou černou magii svůj vlastní CMS (redakční systém webu). Toto řešení jsem také zkoušel, bylo mi 16 a naučil jsem se na něm php/MySQL, ale není to věc, na které bych chtěl mít můj blog s více než 170 stránkami. :D

Tak tedy nová šablona ruzickajan.cz webu je Twenty Fifteen. Je zdarma, je hezká a během hoďky jsem byl hotov s nastavením. Šablona je podle mě úplně skvělá, mohu jen doporučit. Základní barva je bílá, já zvolil modrou, ten kdo sleduje moji práci ať už na superwebcode.com nebo na linkedin ví, že modrá je má top barva. :)