Estetyka i percepcja – jak podejść do obrazowania doświadczenia użytkownika

Opublikowany: 2022-03-11

Jeśli chodzi o projektowanie UX i obrazy związane z doświadczeniami użytkownika, czy to na stronach internetowych, aplikacjach mobilnych, czy w jakimkolwiek innym produkcie cyfrowym, wielu projektantów wybiera obrazy, kierując się osobistym zmysłem estetycznym, łącząc je z mikrokopiowaniem i resztą interfejsu w sposób, który ma sens w związku z przeznaczeniem produktu i brandingiem.

Popularne powiedzenie „obraz wart jest tysiąca słów” dominuje od początku XIX wieku i jest ogólnie przypisywane Fredowi R. Barnardowi, który napisał to zdanie w artykule promującym użycie obrazów w reklamach pojawiających się na bokach tramwajów. W wielu kontekstach obrazy mają moc wywoływania emocjonalnej reakcji użytkownika; może to być cenne dla wyjaśnienia celu marki, wzmocnienia propozycji wartości produktu i zwiększenia atrakcyjności strony internetowej lub aplikacji mobilnej.

Obraz może natychmiast przekazać wiadomość, ponieważ mózg może ją zinterpretować szybciej niż tekst i nadać wiadomości głębię i kontekst, zapewniając bardziej wciągające wrażenia niż sam tekst. Kiedy projektanci wiedzą, jak pracować z obrazami, są w stanie lepiej manipulować emocjonalnymi reakcjami publiczności. Projekty produktów mogą pogorszyć się lub pogorszyć jakość obrazów związanych z ich doświadczeniem użytkownika — dlatego tak ważne jest, aby zrobić to dobrze.

Oprócz stron internetowych i aplikacji mobilnych, obrazy są ważne we wszelkiego rodzaju projektach produktów. Jak stwierdziła Rachel Krause (specjalista ds. doświadczeń użytkowników w Nielsen Norman Group) w 6 zasadach perswazyjnego opowiadania historii , obrazy można włączyć do odpowiednich studiów przypadków, wykresów i zdjęć z testów użyteczności, aby dać odbiorcom coś, z czym można się połączyć poza słowami .

Kim Flaherty (specjalista ds. UX w Nielsen Norman Group) stwierdziła również, że ostatnie badania wskazują, że odbiorcy biuletynów oczekują takich samych wysokiej jakości obrazów, jakie spotykają w sieci, zdecydowanie preferując obrazy, które można zobaczyć w większej skali i które bardzo wyraźnie pokazują szczegóły.

Dogłębne zrozumienie wykorzystania obrazów i ich psychologicznych implikacji dla percepcji użytkownika i doświadczenia użytkownika jest ważnym aspektem projektowania, którego projektanci UX nie powinni lekceważyć.

Sunkist wykorzystuje na swojej stronie internetowej wiele obrazów sensorycznych.
Witryna Sunkist wykorzystuje silne obrazy wizualne, które mogą również wyzwalać zmysły smaku i zapachu.

Obrazy sensoryczne w projektowaniu

W ostatnim czasie obszar marketingu sensorycznego przykuł uwagę świata korporacyjnego i akademickiego, głównie marketingu i psychologii. W książce Sensory Marketing: Research on the Sensuality of Products Aradhna Krishna definiuje marketing sensoryczny jako „podświadome wyzwalacze, które wpływają na to, jak ludzie podejmują decyzje dotyczące zakupów i konsumpcji”. To stwierdzenie ma zastosowanie zarówno w projektach projektowania produktów, jak iw marketingu.

Według autora obrazy sensoryczne mogą wpływać na projektowanie produktu poprzez:

  • zachęcanie do stymulacji umysłowej poprzez projektowanie wizualne
  • angażowanie ludzi marką
  • wpływ na ich postawy wobec marki
  • stymulowanie innych zmysłów (takich jak zapach) poprzez projektowanie wizualne

Wzmacnianie symulacji umysłowej poprzez obrazy

Marketerzy i projektanci od dawna zachęcają konsumentów do korzystania z wyobraźni hasłami takimi jak „Myśl inaczej” (Apple) i „Po prostu zrób to” (Nike). Te proste i chwytliwe frazy nie przekonują jednak automatycznie ludzi do wyobrażenia sobie korzystania z produktu bez wyraźnego poproszenia ich o to.

Zgodnie z badaniami nad poznaniem i percepcją (wspomnianymi powyżej) stwierdzono, że sama zmiana sposobu wizualnej prezentacji produktu zachęca ludzi do wyobrażenia sobie interakcji z produktem, a w konsekwencji zwiększa możliwość zakupu.

Zdjęcia związane z wrażeniami użytkownika.
Blue Sky Fibres wykorzystuje w nagłówku obrazy, które mogą wywoływać zmysł dotyku, zachęcając użytkowników do wyobrażenia sobie, że trzymają produkt.

Starannie dobrane obrazy mogą znacząco wpłynąć na postrzeganie produktu przez ludzi, skutecznie zwiększając bliskość marki lub mieć negatywny wpływ w sytuacjach, gdy ludzie napotykają obrazy, które do nich nie pasują.

Na przykład, jeśli witryna z nieruchomościami jest skierowana do klientów z klasy średniej i wykorzystuje następujący przykład wyraźnie bardzo ekskluzywnej, drogiej willi jako tła, może to potencjalnie wpłynąć na połączenie między docelowymi użytkownikami a firmą. Tworzy to przepaść między marką a tym, jak postrzegają ją użytkownicy.

Obrazy UX.
Obrazy przesyłają wiadomości szybciej niż tekst, ale gdy obraz nie pasuje do marki, może to zniechęcać użytkowników.

Uwaga, odczucia i percepcja

Punktem wyjścia do zrozumienia, w jaki sposób ludzie odnoszą się do rzeczywistości, są psychologiczne procesy uwagi, odczuwania i percepcji.

Uwaga to proces mentalny, który wybiera określone bodźce, na których należy się skoncentrować i ustanawia między nimi relacje. Gdy są mądrze używane, bodźce te są rozmieszczone strategicznie, aby zwrócić uwagę obserwatora na określone informacje. Wybór obrazów zapewniających jak najlepsze wrażenia użytkownika jest niezbędny, ponieważ każdego dnia ludzie przyciągają dziesiątki reklam i witryn, a tylko kilka z nich przyciągnie ich uwagę.

Lew Semenowicz Wygotski, psycholog sowiecki, twierdzi, że psychika ludzka posiada wrażenia jako proces, który oddziałuje bezpośrednio na subiektywne kształtowanie rzeczywistości, na którą narażony jest podmiot, i odgrywa ważną rolę w relacjach ludzi ze światem. Dodatkowo istnieją wrażenia synestetyczne, które charakteryzują się, gdy dwa lub więcej wrażeń doświadczanych jest razem, na ogół wytwarzając skojarzenia między przedmiotami i doznaniami. Na przykład czerwony jest często postrzegany jako „namiętny” kolor, a Coca-Cola szeroko używa go w swoim brandingu.

Estetyka UX w projektowaniu UX z wykorzystaniem obrazów sensorycznych.
Coca-Cola używa koloru czerwonego, aby zwiększyć wartość propozycji marki i bliskość marki.

Ludzka percepcja odnosi się do funkcji mózgu zdolnej do wybierania i przypisywania znaczenia informacjom uchwyconym przez doznania wywołane przez skojarzenia z doświadczeniami, z którymi dana osoba już się spotkała. Można to również nazwać modelem mentalnym.

Niezbędne jest zrozumienie, że grupy ludzi nie zawsze myślą tak samo, zwłaszcza jeśli weźmie się pod uwagę różne kultury, klasy społeczne i grupy wiekowe. Poniższy obraz może być świetnym przykładem przedstawiającym zabawę i przygodę, o ile publiczność to młodzi ludzie, którzy uwielbiają podróżować – może nie tak bardzo, jeśli są rodzicami, którzy doświadczyli stresu związanego z podróżowaniem z dziećmi i wszystkim, co się z tym wiąże. W tym przypadku szczegółowe badania użytkowników zapewniłyby spostrzeżenia, które pomogłyby projektantom wybrać najlepszy rodzaj obrazów do wykorzystania dla określonej grupy odbiorców.

Obrazy UX w projektowaniu UX.
Jednym z najlepszych sposobów na znalezienie idealnego obrazu jest głębokie zrozumienie docelowych użytkowników.

Obrazowanie doświadczeń użytkownika jako narzędzie zwiększające użyteczność

W artykule badawczym „ Projektowanie interfejsów mobilnych dla nowicjuszy i użytkowników o niskim poziomie alfabetyzacji ” autorzy stwierdzają, że obrazy wspierają również osoby o niskim poziomie umiejętności, zwiększając użyteczność produktu i poprawiając wrażenia użytkownika jako całość. Ponieważ analfabetyzm często wiąże się z ubóstwem, niepiśmienni użytkownicy inaczej skanują interfejsy, opierając się głównie na elementach wizualnych i skupiając się na mechanice.

Badania przeprowadzone przez Andrew Thatchera dotyczyły zachowań osób piśmiennych i półpiśmiennych podczas korzystania z bankomatów oraz alternatywnego interfejsu bankomatu opartego na ikonach i mowie. Według autora, ludzie wykazywali tendencję do przedkładania interfejsu ATM opartego na ikonach nad innymi opcjami. Może to nie korelować konkretnie z obrazami, ale stanowi przykład, że elementy wizualne są lepiej rozumiane niż interfejsy tekstowe.

Chociaż badanie to było skierowane konkretnie do użytkowników o niskim poziomie umiejętności czytania, ważne jest, aby zrozumieć, że obrazy i interfejsy wizualne mają pozytywny wpływ na ogół użytkowników, a nie tylko na osoby, które mają problemy z czytaniem. Na przykład dobrze dobrane zdjęcia mogą umożliwić użytkownikom szybsze skanowanie i przyswajanie informacji, pozwalając im szybciej zrozumieć przeznaczenie produktu. Doskonałym sposobem sprawdzenia tego jest zastosowanie metody znanej jako Five Second Testing.

Estetyka UX - jak korzystać z obrazowania.
Znaki drogowe od dawna wykorzystują ikony i obrazy, aby szybko przekazać znaczenie kierowcom, niezależnie od ich poziomu alfabetyzacji (lub prędkości jazdy).

Głębsze zrozumienie psychologii stosowanej w estetyce produktu

Ponieważ projekty atrakcyjne wizualnie są postrzegane jako łatwiejsze w użyciu, jako projektant ważne jest, aby tworzyć jako takie. Również projekty estetyczne są chętniej akceptowane, częściej stosowane i promują kreatywne myślenie i rozwiązywanie problemów. Zgodnie z Universal Principles of Design, estetyczne projekty sprzyjają również pozytywnym relacjom z użytkownikami, czyniąc ich bardziej tolerancyjnymi na problemy z użytecznością w projekcie.

Efekt estetyczno-użytkowy

Zazwyczaj projekty estetyczne mają większe prawdopodobieństwo zaangażowania. Obrazy mają wiele wspólnego z atrakcyjnością wizualną, bezpośrednio wpływając na percepcję użytkownika. Gdy produkt jest bardziej użyteczny, ale mniej atrakcyjny wizualnie, może cierpieć z powodu braku akceptacji, co sprawia, że ​​problemy z użytecznością stają się dyskusyjne.

Zgodnie z tym zjawiskiem psychologicznym, projekty atrakcyjne pod względem estetycznym są na ogół bardziej intuicyjne niż te mniej atrakcyjne, a dotyczy to zwłaszcza użytkowników z bardziej ograniczonym zapleczem technicznym. Ponadto, gdy estetyczne projekty nie działają poprawnie, użytkownicy mają tendencję do obwiniania siebie, zamiast obwiniania produktu.

W tym sensie wyjątkowe zdjęcie lub film zachwyca użytkownika. Ta pozytywna reakcja emocjonalna dodatkowo wzmacnia interakcje użytkownika z produktem i relację z samą marką, jednocześnie kompensując wszelkie wady użyteczności i czyniąc użytkownika bardziej tolerancyjnym.

W artykule dla Nielsen Norman Group Kate Moran zacytowała Kurosu i Kashimurę, którzy doszli do wniosku, że użytkownicy są pod silnym wpływem estetyki dowolnego interfejsu, nawet jeśli oceniają podstawową funkcjonalność systemu.

Weźmy na przykład stronę FitBit. Moran poinformował, że podczas testów użyteczności jeden użytkownik napotkał wiele problemów podczas robienia zakupów w witrynie, od drobnych niedogodności w projekcie interakcji po poważne błędy w nawigacji. Użytkownik był w stanie wykonać zadanie z pewnym trudem.

Jednak użytkownik bardzo wysoko ocenił witrynę pod względem łatwości obsługi, twierdząc, że witryna wygląda jak ocean (bardzo spokojna), ze świetnymi kolorami i doskonałymi zdjęciami. Pozytywna reakcja emocjonalna wywołana estetycznym wyglądem strony pomogła ukryć jej problemy z użytecznością.

Obrazy sensoryczne
Strona główna FitBit, która wykorzystuje świetne kolory i zabawną fotografię, która daje poczucie ruchu.

Efekt torowania

Wybór odpowiednich obrazów do interfejsu wykracza poza estetykę. Wybrane obrazy muszą przekazywać właściwy przekaz i wartości. Ponieważ ludzki mózg cały czas zajmuje się skojarzeniami, obrazy mogą być używane jako potężne narzędzie do pracy ze skojarzeniami. W książce Thinking, Fast and Slow Daniel Kahneman podał przekonujący przykład tego, jak umysł podświadomie tworzy skojarzenia. Poprosił czytelnika o przyjrzenie się następującym dwóm słowom:

Bananowe wymioty

Kiedy ludzie patrzyli na te słowa, doznawali nieprzyjemnych skojarzeń. Ich twarze wykrzywiły się lekko w wyrazie obrzydzenia, przyspieszyło bicie serca, a włosy na ramionach trochę się podniosły. Krótko mówiąc, reagowali na „wymioty” osłabioną wersją tego, jak zareagują na rzeczywiste wydarzenie, wszystko automatycznie, poza kontrolą osoby – wyłącznie poprzez skojarzenie idei. Ale wpływ może wykraczać poza to, ponieważ ludzie kojarzą słowo „banan” z negatywnymi konotacjami „wymiotów”.

Priming to ukryty efekt pamięciowy, w którym ekspozycja na bodziec wpływa na odpowiedź na bodziec późniejszy. Projektanci mogą również pracować z obrazami, nie tylko myśląc o tym, jak interfejs byłby atrakcyjny wizualnie, ale pod względem transmisji wiadomości, percepcji użytkownika, zaangażowania użytkownika i manipulacji jego pomysłami za pomocą dobrze skonstruowanych skojarzeń.

W Priming and User Interfaces z Nielsen Norman Group autor stwierdza, że ​​„obrazy i zawartość strony skłaniają ludzi do kształtowania oczekiwań wobec witryny. Jeśli te założenia potwierdzą się dalej, ogólne wrażenia są płynne i przyjemne. Jednak gdy założenia okażą się błędne, ludzie często dostrzegają, że witryna ma słabą użyteczność”.

W artykule zaprezentowano również następujący przykład, pokazujący stronę domową szkoły prywatnej, na której wyświetlane są zdjęcia małych dzieci, sprawiające wrażenie, że szkoła jest przedszkolem lub tylko dla pierwszych klas podstawowych. W rzeczywistości szkoła obejmuje do 8 klasy.

Estetyczny efekt dzięki obrazom związanym z wrażeniami użytkownika.
Zdjęcia małych dzieci na stronie internetowej Challenger School wprowadzają użytkowników w błąd, że nie są one przeznaczone dla starszych uczniów.

Streszczenie

Obrazy mogą być potężnym narzędziem, gdy są używane do wpływania na postrzeganie ludzi i wrażenia użytkownika. Wybranie skutecznego obrazu do projektu może zwiększyć atrakcyjność produktu, wzmocnić wartość biznesową, zwiększyć sprzedaż i generowanie leadów, przyspieszyć skanowanie interfejsu i informacji, zachwycić odbiorców i poprawić empatię między konsumentami a marką.

Gdy projektanci lepiej zrozumieją najważniejsze zjawiska psychologiczne i sposób, w jaki działają ludzkie umysły, mogą tworzyć lepsze produkty, które naprawdę mają sens dla ludzi, a jednocześnie pozytywnie wpływają na sam biznes.

• • •

Dalsza lektura na blogu Toptal Design:

  • Ilustracja marki 101: Wizualizacja narracji
  • Psychologia projektowania i neuronauka niesamowitego UX
  • Projekt perswazyjny: efektywne wykorzystanie zaawansowanej psychologii
  • Przewodnik krok po kroku dotyczący projektowania niestandardowych ilustracji bez umiejętności rysowania
  • Wpływ na projektowanie – przewodnik po kolorze i emocjach