Magazín

Zpět na všechny články Magazínu

Přesvědčte se, jak mocnou zbraní je fotografie na webu. Když ji umíte správně použít!

Martin Držka | 30. 10. 2012

Přesvědčte se, jak mocnou zbraní je fotografie na webu. Když ji umíte správně použít!

minulém článku jsme se dozvěděli, jak jsou fotky pro web důležité a že levné „naleštěné” obrázky z fotobank mohou sice na první pohled vypadat sexy, ale přirozenou autentičnost vašeho produktu nebo služby ne vždy zcela zachytí.

Předpokládejme, že vás článek přesvědčil, a posuňme se o kousek dál. (Ne)zanedbatelná investice do profi nafocení byla schválena, probíhají poslední postprodukční úpravy a vy už se těšíte, jak nasázíte na nový web várku koláží a obrázků. Z vlastní zkušenosti webdesignera mohu říci, že v této chvíli někdy končí racionální uvažování nad obrazovým materiálem jako nad obsahem a z fotky se mnohdy stává ilustrativní prvek. „Máme přeci fotky od profi fotografa. To musí fungovat…," slýchám často od klientů. Může a nemusí.

Několik kapek designerské teorie

Jared Spool, známý UX designer, rozděluje obrazové materiály do 3 kategorií:

1. Navigační grafika pomáhá uživateli webu najít informaci, která se v textové podobě interpretuje hůře nebo vůbec (rozcestník s produkty, pomocné infografiky a schémata apod. )

2. Obsahová grafika je to, pro co uživatel na web přišel, co na webu hledá (fotka produktů v eshopu)

3. Dekorace - ilustrativní fotky, ozdobné prvky, textury, apod.

Už z příkladů je zřejmé, že pro uspokojení návštěvníka našeho webu musíme pracovat s prvními dvěma skupinami. Dekorační „ozdoby" sotva pomohou návštěvníkovi webu najít ten správný produkt, rozhodnout se pro jeho variantu. Sami ostatně z vlastní zkušenosti víte, že ilustrativní fotka v článku zpravodajského portálu vás těžko zaujme tolik, jako reálná fotka reálné situace.

Pokud budeme nad obrazovým materiálem uvažovat jako nad obsahem webu, musíme si být schopni odpovědět kladně na elementární otázky:

  • Vyjadřuje fotka opravdu sdělení, které chceme návštěvníkovi předat?
  • Pomáhá uživateli při průchodu webem k cílové stránce?
  • Má použitý obrázek pozitivní (nejen emoční) efekt, který pomůže zapamatovat si produkt nebo značku tak, abyste dokázali návštěvníka na web dostat opakovaně?

Dost bylo teorie. Pojďme si na několika příkladech ukázat, jak mocný nástroj v rukou doopravdy máme.

Fotky jako součást příběhu

Lidé milují příběhy odpradávna. Vhodně zvolené fotky nebo ilustrace pomohou návštěvníkovi vcítit se do rolí příběhu. Zeptejte se sami sebe, jak rádi jste v dětství četli pohádky bez jediného obrázku či ilustrace.

I samotná fotka může vyprávět příběh. Square.com je platební terminál využívající mobilní telefony. Návštěvník je precizní grafikou a fotkami „vtažen do akce,” navíc ihned pozná, jak lze produkt použít a o čem celý web je.

Samotná fotka může vyprávět příběh

Usměrňujte fotkami pozornost uživatelů

Záznamy z oční kamery dokazují, že obličeje lidí na fotce je první místo, na které zaměřujeme pozornost. A nejen to. Uživatel podvědomě obrací pozornost směrem, kterým se dívá osoba na fotce. Dejte do jejího zorného pole text, který chcete, aby si uživatel přečetl, nebo tlačítko, na které chcete, aby uživatel klikl. Uvidíte, jak výrazně to napomůže tomu, aby návštěvníci vašeho webu udělali to, co po nich chcete.

Heatmapy směřování oka uživatele. V prvním případě se dítě kouká přímo na nás, ve druhém na nadpis a text vedle.

Heatmapy směřování oka uživatele. V prvním případě se dítě kouká přímo na nás, ve druhém na nadpis a text vedle.

Chytré použití na stránkách Nike.com. Oči atletky zaměří naši pozornost na popis produktu.

Chytré použití na stránkách Nike.com. Oči atletky zaměří naši pozornost na popis produktu.

Pomozte uživateli fotkou učit se

Vícekrokové pokyny zaměstnávají krátkodobou paměť uživatele a v textové podobě je samotný proces učení složitější. Fotky nebo vhodné schéma tento proces ulehčí.

Pomocné obrázky k manuálu pro výměnu duše u kola.

Pomocné obrázky k manuálu pro výměnu duše u kola.

Stimulujte návštěvníka

Lidé jsou líní a čtou, jen když je dokážeme zaujmout. Přinutit návštěvníka číst takové otravné věci, jako je například vyúčtování služeb, představuje doslova nadlidský úkol. Vhodně použitá fotka či pomocná grafika však dokáže i takové zdánlivě nestravitelné sousto pro uživatele alespoň „předžvýkat.“

Interaktivní pomocník O2.

Interaktivní pomocník O2.

Pomozte v rozhodování

Skenovat fotky je mnohem jednodušší než samotný text. Šikovně nafocené produktové obrázky zdůrazní hlavní přednosti produktu a pomohou návštěvníkovi rozhodnout se, zda je produkt pro něj vhodný nebo ne.

Minimalistický design a velké fotky jsou typické pro eshop Made.com, jeden z mála eshopů, kde samotné fotky prodávají.

Minimalistický design a velké fotky jsou typické pro eshop Made.com, jeden z mála eshopů, kde samotné fotky prodávají.

Pracujte s emocemi

Sebelepší práce textaře nedokáže zasáhnout návštěvníka webu rychleji než spontánní fotka. Vyvolaná pozitivní nálada a emoce může mít vliv na rozhodování návštěvníka webu. Highrisehq.com použili na svou cílovou stránku fotky spokojených zákazníků společně s jejich ohlasy na službu . Kombinace se ukázala jako mimořádně efektivní. Kratší stránka s rozzářenými obličeji a registrační výzvou k akci kupodivu vykazovala lepší výsledky než původní upovídaný design.

Překvapivý výsledek A/B testování Highrisehq.com.

Překvapivý výsledek A/B testování Highrisehq.com.

Několik tipů závěrem

  • V delším článku rozložte fotografie přímo v textu a neschovávejte si je do fotogalerie pod článkem. Podobně jako strukturovaný text a mezinadpisy, i fotky pomáhají členit text a usnadňují čtenáři konzumaci obsahu.
  • Vyhněte se malým fotkám, lidé preferují velké. Pokud nabídnete proklik na větší obrázek, zajistěte, ať je dostatečně velký.
  • Nepodceňujte datový objem grafiky a přístupnost grafických dat (alternativní obsah a popisky obrázků). Můžete mít ten nejdokonalejší design  na světě, ale pokud vám návštěvník uteče ještě před načtením stránky a informace z použité infografiky vůbec nedozví, nákladná investice přišla vniveč.
Martin Držka

Martin Držka

Vedoucí Grafického a kodérského oddělení

Martin je od roku 2006 vedoucím Grafického a kodérského oddělení eBRÁNA, kromě toho je produktovým manažerm eBRÁNA webu. Moderní webové technologie, User Experience a použitelnost webových rozhraní jsou jeho prací a velkým koníčkem zároveň.

Další články autora:


Martin Držka

Martin Držka

Vedoucí Grafického a kodérského oddělení

Martin je od roku 2006 vedoucím Grafického a kodérského oddělení eBRÁNA, kromě toho je produktovým manažerm eBRÁNA webu. Moderní webové technologie, User Experience a použitelnost webových rozhraní jsou jeho prací a velkým koníčkem zároveň.


© 2016, eBRÁNA s.r.o. – všechna práva vyhrazena

Prohlášení o přístupnosti | Podmínky užití | Ochrana osobních údajů | Mapa stránek

Webové stránky vytvořila eBRÁNA s.r.o. | Vytvořeno na CMS WebArchitect | SEO a internetový marketing | XHTML 1.0 | CSS 3

Nahoru ↑