Návrh UX/UI: Efekt nadřazenosti obrazu. Nebo proč jsou obrázky a fotografie lepší než text (vědecky)

Článek pro začínající designéry, výzkumníky a analytiky UX/UI. Tento článek vysvětluje důležitost obrázků a způsoby, jak je nejlépe použít při návrhu webových stránek.

Kanadský profesor psychologie Allan Urho Paivio již více než 40 let zkoumá, jak lidský mozek zpracovává a zapamatuje informace, o kterých napsal 5 knih. Profesor Paivio je nejlépe známý tím, že v roce 1971 navrhl teorii dvojího kódování, ve které navrhl, aby si člověk pamatoval vizuální a slovní (slovní nebo textové) informace různými způsoby. Například textový popisek „pes“ a fotografie psa jsou ukládány a načítány mozkem různými způsoby. Aby tuto teorii dokázal, provedl Allan Paivio sérii experimentů, v nichž jednomu ukázal subjektům rychlou sekvenci obrázků i rychlou sekvenci slov. Poté požádal subjekty, aby si vybavily slova a obrázky v jakémkoli pořadí. Ukázalo se, že účastníci experimentu si pamatovali obrázky mnohem lépe než slova. Paivio to vysvětluje skutečností, že kódování textu je obtížnější než obrázků. Takže malé dítě, které stále neumí číst, nerozumí nápisu „pes“, ale snadno pozná psa na fotografii nebo kresbě. Paivio nazval tento efekt efektem nadřazenosti obrázků.

Efekt nadřazenosti obrázků v designu webových stránek

Později účinek nadřazenosti obrazu prokázali další vědci v různých oblastech: vzdělávání, komunikace, zdraví, reklama a design. Podívejme se na poslední bod podrobněji. V roce 1997 provedli profesoři Larry Percy, John Rossiter a Robert Donovan studii, ve které zjistili, že obrazy jsou základním stavebním kamenem při navrhování reklam na časopisy, jako jsou každodenní publikace (B2C). A korporátní (B2B). Vizuálně navržené zprávy byly efektivnější než jen textové zprávy. Ale co je důležitější, grafické reklamy byly efektivnější, když publikum bylo méně motivované a méně schopné sémanticky zpracovávat informace. Jinými slovy, grafická reklama přitahovala pozornost a byla si lépe pamatována, dokonce i díky rychlému převrácení stránky a letmému pohledu na časopisy. Níže uvádíme několik příkladů toho, jak si obrázky nejen lépe pamatují, ale také usnadňují uživatelské prostředí.

1. Obrázky na stránce produktu

Během vysoce kvalitního stolního testování produktových stránek webu Leroy Merlin vyšlo najevo, jak důležité jsou fotografie produktů pro uživatele. Testování zjistilo, že 64% subjektů si při procházení na stránku produktu nejprve prohlédlo fotografie, než aby četlo názvy, popisy nebo posouvání dolů, aby získali úplnější přehled. To naznačuje, že uživatelé často spoléhají na fotografie produktů jako výchozí bod pro prozkoumání produktů. Někteří uživatelé navíc vytvořili svůj první dojem ze zboží pouze z fotografie produktu, nikoli z textového popisu. A někteří dokonce opustili produktovou stránku, na které nebyly žádné fotografie zajímavého produktu. V průběhu výzkumu jsme také zavolali několik online obchodů se stavebními materiály, v jednom z nich chyběly fotografie některých produktů. Jedna z otázek, které jsme položili, zněla takto:

„Můžete mi prosím říct, co je to za šroub 3.5? Na webu není žádná fotka. “

Na kterou jsme obdrželi následující odpověď:

„ No, na co se dívat, jednoduchý šroub, viděli jste to mnohokrát. „

Problém je v tom, že i ty nejjednodušší (na první pohled) výrobky mohou mít mnoho různých parametrů, například stejný samořezný šroub má:

  • 6 typů/typů samořezných šroubů (na dřevo, na kov, na beton, na sádrokarton, na sádrovec, střešní krytinu);
  • 3 materiály pro výrobu (uhlíková ocel, nerezová ocel, mosaz);
  • 12 velikosti (délka šroubu, výška a průměr hlavy, stoupání závitu, hloubka drážky a další);
  • 14 typů hlav (pravidelné, kuželové, otevřené, ploché, s lisovací podložkou, zapuštěné, poloviční zapuštěné, smyčkované a další);
  • 15 typů drážek (vybrání na hlavě nástroje: křížový, přímý, šestihranný a další);
  • 4 typy závitů (neúplné, se zářezy, frézou, s drážkou);
  • 3 barvy (černá, bílá, žlutá).

A mnoho dalších parametrů (výstupky, lisovací podložky atd.). Takto jsme získali 60 parametrů pro „jednoduchý“ šroub. Nyní si představte, zda je produkt něčím velkým a nákladným a skládá se ze stovek těchto šroubů.

A každý z těchto parametrů může u uživatelů ze série „Vyhovuje mi to, kvůli mým parametrům?“ Způsobit pochybnosti a pochybnosti. Proto se, jak se říká: je lepší jednou vidět než stokrát slyšet. A pokud vložíte fotografii samořezného šroubu, bude odstraněna většina z těchto otázek. Uživatel nemusí zdlouhavě číst všechny podrobnosti v popisu nebo vyžadovat vysvětlení. Bez fotografie je pravděpodobnější, že uživatel opustí web při hledání vizuálního online obchodu s fotografiemi. Totéž platí pro ostatní, relativně jednoduché a levné zboží. Nemluvě o složitějších a dražších produktech se spoustou variabilních vlastností. To znamená, že kromě lepší zapamatovatelnosti obrázky produktů zvyšují viditelnost, odstraňují otázky a prodávají se lépe než text.

2. Grafika na obrázku

Kromě jednoduché fotografie můžete do obrázků přidat grafiku, která vám umožní ukázat něco, co je obtížné popsat pomocí textu, nebo zobrazit na fotografii bez grafiky. Grafika na fotografiích usnadňuje přenos složitých funkcí. Vezměme si například vyhřívanou bundu s vodoodpudivým potahem. Je těžké vysvětlit tyto technologie pomocí textového popisu, protože většina uživatelů se s nimi dosud nesetkala. Je také obtížné to ukázat jednoduchou fotografií bundy. Pokud ale přidáte grafiku ve formě červených pruhů, teploměru a kapek, pak to během několika sekund ukáže funkčnost a výhody takové bundy, a to i bez čtení textového popisu. Níže je uveden příklad takové nadřazenosti obrázků.

3. Obrázky v navigační nabídce

Podobně jako v předchozím bodě jsou obrázky důležité i v jiných částech webu. Například nabídka bude vizuálnější a srozumitelnější, pokud použijete nejen textové názvy sekcí, ale také je doprovázíte obrázky. Níže je uveden příklad domovské stránky webu online obchodu s nábytkem, který je na prvním místě ve výsledcích vyhledávání mnoha dotazů v Kazani.

A naopak, pokud provádíte textové názvy částí nabídky s obrázky, bude pro uživatele snazší navigovat, najít a zapamatovat si zajímavé sekce, i když je název sekce uživateli stále neznámý. Takto je implementováno na webových stránkách online obchodu s nábytkem IKEA.

Pokud je velikost zobrazené oblasti omezena, například na obrazovkách mobilních zařízení, můžete použít malé tematické ikony. Tyto vizuály fungovaly dobře v našich testech kvality kabinetu. Ikony, stejně jako obrázky, jsou lépe čitelné a zapamatovatelné než jen textový název sekcí.

4. Obrázky v bannerových reklamách

Efekt nadřazenosti obrázků lze aplikovat také na design bannerových reklam na webových stránkách, podobně jako reklamní stránky v časopise z experimentu Percyho, Rossitera a Donovana (výše). Pro srovnání níže uvádíme reklamní banner kazet pro internetový obchod pleer.ru, protože zde vidíte pouze text, který je méně čitelný a méně zapamatovatelný.

Zde je další příklad bannerové reklamy na webu HP (Hewlett Packard). Jak vidíte, obrázek již existuje a takový banner je lépe čitelný, a to i letmým pohledem. Tento banner je navíc lépe zapamatovatelný kvůli efektu nadřazenosti obrázků Paivio.

5. Obrázky na stránkách webu

Podobně jako u bannerových reklam lze efekt nadřazenosti obrázků použít na design dalších prvků na webu. V níže uvedeném příkladu je na webu Ruské standardní banky odkaz na mobilní aplikaci uveden ve formě textu. Takový text je jemný a ztratí se vedle dalších textových prvků na stránce. Mezitím je mobilní aplikace pro banku velmi důležitým nástrojem, který zvyšuje pohodlí zákazníků s bankou. Jsou známy případy, kdy lidé změnili banku kvůli nedostatku nebo nepohodlí bankovní aplikace.

Nyní to porovnejte s tím, jak je odkaz na mobilní aplikaci označen na webu SovComBank. Zde je kromě textu velký a krásný obrázek smartphonu s rozhraním mobilní banky, díky kterému můžete okamžitě pochopit, že mluvíme o mobilní aplikaci banky, a to i letmým pohledem. A text také naznačuje výhody a QR kód pro rychlé a snadné stahování.

Tento článek velmi stručně popisuje pouze jeden způsobem, jak zlepšit uživatelskou zkušenost. Pokud se chcete dozvědět více o designu UX založeném na behaviorální ekonomii, inženýrské psychologii a výzkumu UX, pak jsme speciálně pro vás sestavili elektronickou učebnici „Převod na steroidy“, která obsahuje několik stovek podobných růstových bodů přeměny v podobě největší kurz designu UX.

Přijďte si zdokonalit své designérské dovednosti a vytvořit přesvědčivé argumenty, které ospravedlní vaše rozhodnutí o designu.

#UX

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.