Jak kolor wpływa na UX i zachowanie użytkownika?
Opublikowany: 2016-12-24Kolor: gdy projekt zrobi to dobrze, prawdopodobnie nigdy tego nie zauważysz — ale gdy zrobi się źle? Nie ma znaczenia, czy jest to zbyt jasne, piekące dla oczu tło, czy czarny tekst na ciemnoszarym tle, wybór kolorów może zrujnować nawet najbardziej funkcjonalną aplikację. Podobnie jak inne aspekty projektowania, kolor służy nie tylko do urozmaicenia aplikacji. Kolor może być narzędziem, tak jak każda inna cecha doświadczenia użytkownika.
Filozofia projektowania graficznego zastosowana do projektowania aplikacji — od rozmiaru każdego elementu, przez sposób przesuwania się po interfejsie użytkownika, po tak, kolor — wpływa na zachowanie użytkownika. Jest dobry powód, dla którego projektanci często spędzają pierwsze miesiące nad projektem męcząc się nad paletami kolorów, a nie modelami.
Wybór idealnej palety może być różnicą między zaprojektowaniem aplikacji do medytacji, która faktycznie pomaga użytkownikom się zrelaksować, a taką, która powoduje, że chcą rzucić telefonem o ścianę. To różnica między aplikacją bankową, która denerwuje Cię przed sprawdzaniem salda, a taką, która może ukoić Twoje obawy związane z nadchodzącą kolejną wypłatą.
Jak więc zrobić to dobrze — i co możesz zrobić, aby opanować kolor w swoim projekcie?
Filozofia projektowania graficznego: teoria koloru
Zanim zagłębisz się w filozofię projektowania graficznego (i psychologię!), ważne jest, aby zrozumieć kilka podstawowych zasad dotyczących koloru i projektowania. Chociaż kolor może nie wydawać się zbyt skomplikowanym tematem, istnieje dobry powód, dla którego każda lekcja sztuki zaczyna się nie tylko od lekcji na temat używania koloru, ale także tworzenia koloru.
Podstawy — jak wyjaśnia koło kolorów — są proste: kolory podstawowe (czerwony, żółty i niebieski) można łączyć, tworząc kolory drugorzędne (zielony, fioletowy i pomarańczowy). Podobnie różne frakcje bieli można dodać do koloru, aby uzyskać odcienie, a czerń można dodać, aby uzyskać odcienie.
Kolory naprzeciw siebie (takie jak czerwony i zielony lub niebieski i pomarańczowy) są uważane za komplementarne. Kolory te silnie kontrastują, dzięki czemu wyróżniają się obok siebie (lub na sobie).
Kolory znajdujące się obok siebie są uważane za analogiczne. Kolory te mają znacznie mniejszy kontrast, co oznacza, że nie wyróżniają się tak bardzo, gdy są blisko siebie.
Nie ma nic z natury „właściwego” lub „niewłaściwego” w kolorach o wysokim lub niskim kontraście. Czasami aplikacja wymaga jasnych kolorów, które wyraźnie kontrastują ze sobą. Innym razem będziesz chciał czegoś delikatniejszego. Generalnie im bardziej chcesz, aby coś się wyróżniało, tym bardziej powinieneś polegać na kontrastowych kolorach.
Najlepszym sposobem na zorientowanie się, jak kolory idą (a nie idą) do siebie, jest zabawa z nimi. Nawet jeśli nie pracujesz teraz nad projektem, szybkie zakręcenie kołem kolorów Adobe może sprawić, że Twój umysł zacznie myśleć o kolorze w nowy sposób.
Próbki emocji: kolor i psychologia
Kiedy utrwalasz filozofię projektowania graficznego stojącą za twoją aplikacją, nie możesz tylko myśleć o tym, jak rzeczy wyglądają — musisz pomyśleć o tym, jak się czują. Nie mówimy też o haptycznej informacji zwrotnej. Odkąd Johann Wolfgang Goethe badał fizjologiczne efekty koloru, mamy obsesję na punkcie używania koloru do wywoływania fizycznych i emocjonalnych efektów.
Nawet dzisiaj kolor zajmuje centralne miejsce w filozofii projektowania wielu marek. Opieka zdrowotna, biznes i rząd mają tendencję do używania koloru niebieskiego, ponieważ daje poczucie zaufania i profesjonalizmu. Zielony jest postrzegany jako młodzieńczy kolor pełen energii – i oczywiście odzwierciedla poczucie ekologii i bliskości z naturą. Czerwony jest energiczny i impulsywny, sprawia wrażenie szybkości, wydajności i mocy. Każdy kolor, który widzimy (a na pewno każdy kolor, który nieodłącznie kojarzymy z pewnymi markami) implikuje coś, bezpośrednio lub pośrednio, co pomaga kierować naszym postrzeganiem poszczególnych marek.
Pomyśl o markach i symbolach, które rozpoznajesz jako bardzo zorientowane na kolory. Apple, Wikipedia i The New York Times mają kolory w skali szarości, symbolizując spokojną wiarygodność. Marki te są postrzegane jako zrównoważone i niezawodne. Whole Foods, John Deere i Starbucks mają w swoich logo zielone odcienie, łącząc naturę i zdrowotność z ich marką i produktami.
Niektóre kolory wykraczają nawet poza ich marki, definiując całe branże. Zastanów się, ile sieci fast foodów lub restauracji używa na przykład czerwonej lub żółtej kolorystyki. Te kolory pomagają nam pobudzić umysł, umieszczając nas w pewnym psychologicznym miejscu, które przygotowuje nas do zakupu jakiegoś produktu.
Chociaż jest to coś, co marketerzy odkryli dawno temu, nauka uzasadnia wiele naszych wzajemnych odczuć dotyczących koloru. Stwierdzono na przykład, że kolor czerwony sprawia, że niektórzy ludzie szybciej i silniej reagują na określone bodźce. Może również zastraszyć: naukowcy odkryli, że gdy badani zobaczyli kolor czerwony, ich wyniki były gorsze.
Jeszcze dziwniejszy? Kolor pigułki ma łagodny wpływ na jej działanie. Niebieskie tabletki działają najlepiej jako środki uspokajające, żółte działają najlepiej jako antydepresant, a we wszystkich przypadkach najlepiej działają jasne kolory. Chociaż jest to prawdopodobnie tylko efekt placebo, który zwiększa nasze reakcje na aktywne leki, efekt jest wystarczająco silny, aby firmy rozważyły go podczas produkcji nowych leków.
Nie mówimy, że użycie schematu kolorów opartego na żółtym kolorze w aplikacji do śledzenia nastroju sprawi, że będzie ona skuteczna jako środek przeciwdepresyjny, ale wybrana paleta kolorów może mieć rozsądny wpływ na nastrój użytkownika — więc wybieraj mądrze.
Polecany dla Ciebie:
Jak Metaverse zmieni indyjski przemysł motoryzacyjny?
Co oznacza przepis anty-profitowy dla indyjskich startupów?
W jaki sposób start-upy Edtech pomagają indyjskim pracownikom podnosić umiejętności i być gotowym na przyszłość...
Akcje New Age Tech w tym tygodniu: Kłopoty Zomato nadal, EaseMyTrip publikuje Stro...
Indyjskie startupy idą na skróty w pogoni za finansowaniem
Digital Marketing Platform Logicserve Bags Finansowanie INR 80 Cr, zmienia nazwę na LS Dig...
Kolor i użyteczność
Design to nie tylko ładny wygląd — to funkcjonalność i użyteczność, dwie zasady, które są prawdopodobnie najważniejsze dla każdego projektanta UX. Jeśli UX nie jest płynny, nie ma znaczenia, jak piękna jest wybrana przez Ciebie paleta kolorów ani jak oszałamiający jest Twój interfejs użytkownika. Jeśli użytkownik nie może sprawnie go przeglądać, nie będzie miał żadnej mocy przetrwania.
Ale co z tym wszystkim ma kolor?
Proste: kolor to narzędzie, które może pomóc kierować wzrokiem . Jeśli potrafisz efektywnie używać kolorów, możesz poprowadzić nowego użytkownika przez aplikację bez długiego samouczka, serii skomplikowanych filmów czy nawet jednego słowa. Intuicyjny interfejs użytkownika wykorzystuje kolor nie tylko do kierowania uwagi użytkownika, ale także do jego interakcji z całym doświadczeniem.
Wyobraź sobie przez chwilę, że tworzysz aplikację dla firmy cateringowej, która pomaga dużym organizacjom w łatwym dostosowywaniu zamówień żywności. Potencjalny klient po raz pierwszy pobiera Twoją aplikację i otwiera ją. Co widzą?
W aplikacji większość elementów menu — w tym tło i wszelkie pola informacyjne — jest pokolorowana stonowaną, przytłumioną paletą kolorów w skali szarości. Jedynym wyjątkiem jest pomarańczowo-czerwone pudełko z napisem „zamówienie”. Jako projektant wiesz, że najważniejszą rzeczą, jaką użytkownicy chcą robić podczas korzystania z Twojej aplikacji, jest bezbolesne konfigurowanie zamówienia na jedzenie. Zamiast ukrywać tę funkcję głęboko w aplikacji lub wymagać od nich przewijania strony po stronie, aby się do niej dostać, umieszczasz ją na samym środku. Nie tylko to, ale od razu przyciągasz ich uwagę. Kolor pomaga mu się wyróżniać i pokazuje nowym użytkownikom dokładnie, gdzie muszą się udać.
Podobnie każdego dnia na różne sposoby wchodzimy w interakcję z kolorami i budujemy w naszych umysłach pewne skojarzenia społeczne. Weźmy na przykład światło stopu: zielony oznacza jazdę, czerwony oznacza zatrzymanie, a żółty oznacza zwolnienie (lub ostrzega nas o czymś przed nami). Umieszczając ważne ostrzeżenie na żółto lub używając czerwonego do podświetlenia czegoś, możesz skutecznie przekazać wiadomość, która skłania użytkownika do wprowadzenia danych.
Ta sama logika może być jednak używana nie tylko do wyświetlania ekranów ostrzegawczych. Zmiana koloru przycisku w aplikacji, który prowadzi do zakupów w aplikacji, może znacząco wpłynąć na współczynniki konwersji.
Chociaż nie było to w aplikacji, HubSpot odkrył, że mogą zwiększyć współczynnik konwersji o 21%, po prostu zmieniając przycisk na czerwony zamiast na zielony. Nie oznacza to, że powinieneś zmienić każdy przycisk zakupu w aplikacji na jasny szkarłat, ale należy tu przedstawić argument, że kolor nie może być tylko częścią Twojej filozofii projektowania: musi być kluczowy dla całą filozofię tworzenia aplikacji.
Mądre używanie kolorów: filozofia projektowania i dostępności
W Proto.io dostępność jest zawsze na czele naszej filozofii projektowania. Aby być szczerym, dostępność to coś, co musi być upieczone w dobrym projekcie. Jeśli go tam nie ma, projekt po prostu nie jest zbyt dobry.
Około 8% mężczyzn i 0,5% kobiet cierpi na jakąś formę ślepoty barw. Wbrew powszechnemu mniemaniu, nie istnieje pojedynczy rodzaj ślepoty barwnej, ale ślepota na kolory czerwony/zielony wydaje się być najczęstsza. Osoba cierpiąca na tę formę ślepoty barw zazwyczaj ma problemy z dostrzeganiem wariacji zarówno na czerwono, jak i na zielono. Chociaż nasilenie tej formy ślepoty barw jest dość różne, nawet łagodna ślepota na kolory czerwony/zielony może sprawić, że korzystanie z wielu aplikacji będzie praktycznie niemożliwe.
Poza ślepotą barw krótkowzroczni użytkownicy często mają trudności z czytaniem tekstu o niskim kontraście, chyba że zbliżą ekran do twarzy – co może potencjalnie zakłócić użyteczność wielu aplikacji.
Rozwiązanie obu tych problemów jest dość proste: unikaj używania niekontrastowych kolorów podczas wyświetlania tekstu na tle . Chociaż nie możesz zagwarantować, że wszyscy będą mogli zobaczyć Twoją aplikację w sposób, w jaki zamierzasz, jeśli używasz kontrastujących kolorów, przynajmniej dasz ludziom aplikację, z której będą mogli korzystać. Podobnie użycie kolorów o wysokim kontraście sprawi, że tekst będzie łatwiejszy do odczytania dla wszystkich — nawet jeśli nie mają problemów ze wzrokiem.
Inną opcją zwiększenia dostępności jest zaoferowanie w aplikacji wymiennych palet kolorów. Chociaż nie jest to opcja dla wszystkich, może znacznie zwiększyć dostępność Twojej aplikacji. Możesz także zezwolić użytkownikom na zmianę koloru określonych funkcji. Na przykład możesz mieć opcję, która zmienia kolor akcentu aplikacji lub kolor tekstu w całej aplikacji. Chociaż obie te opcje mogą pozbawić Cię kontroli, zapewnią, że Twoja aplikacja będzie dostępna dla szerszego grona odbiorców.
Jeśli nadal nie wiesz, jak zintegrować kolor z filozofią projektowania w sposób, który nie zaszkodzi dostępności Twojej aplikacji, zalecamy zapoznanie się z biblioteką projektowania materiałów Google.
Wybór idealnej palety: utrwalenie filozofii projektowania
Chociaż powinno być jasne, że istnieją pewne zasady, których należy przestrzegać, jeśli chodzi o kolor, niekoniecznie jest to nauka. Kolor często dotyczy bardziej abstrakcyjnych rzeczy, takich jak dotyk. Nawet jeśli Twoja aplikacja nie próbuje zamanifestować jakiejś emocji u użytkownika, nie oznacza to, że tego nie zrobi. Chociaż znalezienie idealnej palety nie jest czarno-białym przedsięwzięciem, sugerujemy zacząć od czegoś w skali szarości .
Zbuduj płaski prototyp swojej aplikacji w gradiencie w skali szarości i użyj go jako swojej linii bazowej. Zwróć uwagę na to, jak wygląda i działa: przekaż to zespołowi ds. kontroli jakości i zobacz, co mają do powiedzenia. Czy Twój proces wprowadzania jest mętny bez koloru? Czy zwracasz uwagę na niewłaściwe części swojej aplikacji? Dzięki tym informacjom zaprojektuj jeszcze kilka prototypów, tym razem w kolorze. Nie polegaj na jednej palecie. Zamiast tego weź wskazówkę ze strony Google do projektowania materiałów i pobaw się kilkoma ich próbkami.
Wyślij te poprawki również do kontroli jakości. Nie bój się testować A/B ich ze sobą (i z oryginalną wersją w skali szarości). Upewnij się, że zadajesz trudne pytania dotyczące kolorów, które wprowadzasz do walki. Czy używasz koloru do kierowania wzrokiem użytkownika w aplikacji? Czy rzucasz kolorami na ekran tylko po to, by dodać iskry? Czy kolor przeszkadza użytkownikowi w dotarciu do celu?
Nie zapomnij o psychologii użytkownika lub dostępności. Jeśli tworzysz aplikację podróżniczą, czy naprawdę chcesz, aby wszystko było jaskrawoczerwone? Jeśli tworzysz aplikację opieki zdrowotnej, czy Twoje tło powinno być naprawdę zielone? Czy Twoje kolory wystarczająco kontrastują, aby tekst był czytelny?
Dobry projekt UX uwzględnia wszystkie te pytania — w końcu kolor ma decydujący wpływ na zachowanie i zadowolenie użytkownika. Jeśli Twoja filozofia projektowania nie bierze tego pod uwagę, możesz tworzyć aplikację, która nie jest tak dostępna lub użyteczna, jak myślisz. Upewnij się, że tworzysz prototypy swojego projektu na każdym kroku i nie przywiązuj się zbytnio do jednego lub dwóch kolorów.
Eksperymentuj, wybierz inny kolor i kontynuuj poprawianie, aż znajdziesz paletę, która jest dla Ciebie idealna.