Как цвет влияет на UX и поведение пользователей
Опубликовано: 2016-12-24Цвет: когда дизайн сделан правильно, вы, вероятно, никогда этого не заметите, но когда он ошибается? Неважно, будет ли это слишком яркий, бросающийся в глаза фон или черный текст на темно -сером фоне, некачественный выбор цвета может испортить даже самое функциональное приложение. Как и другие аспекты дизайна, цвет нужен не только для того, чтобы оживить приложение. Цвет может быть таким же инструментом, как и любая другая функция взаимодействия с пользователем.
Философия графического дизайна, используемая для разработки приложения — от размера каждого элемента до того, как он скользит по пользовательскому интерфейсу, и да, до цвета — влияет на поведение пользователя. В конце концов, есть веская причина, по которой дизайнеры часто проводят первые месяцы проекта, мучаясь с цветовыми палитрами, а не с вайрфреймами.
Выбор идеальной палитры может быть разницей между разработкой приложения для медитации, которое действительно помогает пользователям расслабиться, и приложением, которое заставляет их хотеть бросить свой телефон в стену. В этом разница между банковским приложением, которое заставляет вас нервничать при проверке баланса, и приложением, которое может успокоить ваше беспокойство о том, когда придет следующая зарплата.
Так как же сделать это правильно — и что вы можете сделать, чтобы овладеть цветом в своем дизайне?
Философия графического дизайна: теория цвета
Прежде чем погрузиться в философию графического дизайна (и психологию!), важно понять некоторые основные принципы цвета и дизайна. Хотя цвет может показаться не слишком сложным предметом, есть веская причина, по которой каждый урок рисования начинается не только с урока о том, как использовать цвет, но и о том, как его создавать .
Основы — как объясняется цветовым кругом — просты: основные цвета (красный, желтый и синий) можно комбинировать для создания вторичных цветов (зеленого, фиолетового и оранжевого). Точно так же различные фракции белого могут быть добавлены к цвету для создания оттенков, а черный может быть добавлен для создания теней.
Цвета, противоположные друг другу (например, красный и зеленый или синий и оранжевый), считаются дополнительными. Эти цвета сильно контрастируют, что выделяет их, когда они находятся рядом (или поверх) друг друга.
Цвета, расположенные рядом друг с другом, считаются аналогичными. Эти цвета имеют гораздо более низкий контраст, а это означает, что они, как правило, не выделяются так сильно, когда находятся близко друг к другу.
Нет ничего изначально «правильного» или «неправильного» в цветах с высокой или низкой контрастностью. Иногда приложение требует ярких цветов, резко контрастирующих друг с другом. В других случаях вам понадобится что-то более мягкое. Как правило, чем больше вы хотите, чтобы что-то выделялось, тем больше вы должны полагаться на контрастные цвета.
Лучший способ почувствовать, как цвета сочетаются (и не сочетаются), — это поиграть с ними. Даже если вы сейчас не работаете над проектом, быстрое вращение цветового круга Adobe может заставить вас задуматься о цвете по-новому.
Образцы эмоций: цвет и психология
Когда вы укрепляете философию графического дизайна, стоящую за вашим приложением, вы не можете просто думать о том, как вещи выглядят — вы должны думать о том, как они ощущаются. Мы не говорим о тактильной обратной связи. С тех пор, как Иоганн Вольфганг Гете изучил физиологические эффекты цвета, мы были одержимы использованием цвета для создания физических и эмоциональных эффектов.
Даже сегодня цвет занимает центральное место в философии дизайна многих брендов. Здравоохранение, бизнес и правительство склонны использовать синий цвет, поскольку он вызывает чувство доверия и профессионализма. Зеленый считается молодым цветом, полным энергии и, конечно же, отражает чувство защиты окружающей среды и близость к природе. Красный энергичен и импульсивен, производит впечатление скорости, эффективности и силы. Каждый цвет, который мы видим (и, конечно же, каждый цвет, который мы неразрывно связываем с определенными брендами), прямо или косвенно подразумевает что-то, что помогает управлять нашим восприятием отдельных брендов.
Подумайте о брендах и символах, которые вы считаете очень ориентированными на цвет. Apple, Wikipedia и The New York Times используют оттенки серого, символизирующие спокойную надежность. Эти бренды считаются сбалансированными и надежными. Whole Foods, John Deere и Starbucks используют зеленые оттенки в своих логотипах, связывая природу и полезность с их брендом и их продуктами.
Некоторые цвета даже выходят за рамки своих брендов, определяя целые отрасли. Подумайте, например, сколько сетей быстрого питания или ресторанов используют красные или желтые цветовые схемы. Эти цвета помогают нам мысленно срабатывать, помещая нас в определенное психологическое состояние, которое побуждает нас купить какой-либо продукт.
Хотя это давно поняли маркетологи, наука оправдывает многие наши взаимные чувства по поводу цвета. Например, было обнаружено, что красный цвет заставляет некоторых людей быстрее и сильнее реагировать на определенные раздражители. Это также может пугать: исследователи обнаружили, что когда испытуемые видели красный цвет, их результаты ухудшались.
Даже незнакомец? Цвет таблетки слабо влияет на ее действие. Синие таблетки лучше всего действуют как седативные средства, желтые лучше всего работают как антидепрессанты, и во всех случаях лучше всего работают яркие цвета. Хотя это, вероятно, просто эффект плацебо, усиливающий нашу реакцию на активные лекарства, эффект достаточно силен, чтобы компании учитывали его при производстве новых фармацевтических препаратов.
Мы не говорим, что использование желтой цветовой схемы в вашем приложении для отслеживания настроения сделает его эффективным антидепрессантом, но выбранная вами цветовая палитра может разумно повлиять на настроение пользователя — так что выбирайте с умом.
Рекомендуется для вас:
Как Metaverse изменит индийскую автомобильную промышленность
Что означает положение о борьбе со спекуляцией для индийских стартапов?
Как стартапы Edtech помогают повысить квалификацию рабочей силы Индии и стать готовыми к будущему ...
Технологические акции нового века на этой неделе: проблемы Zomato продолжаются, EaseMyTrip публикует...
Индийские стартапы срезают путь в погоне за финансированием
Цифровая маркетинговая платформа Logicserve Bags Финансирование 80 CR INR, ребрендинг как LS Dig...
Цвет и удобство использования
Дизайн — это не просто красивый внешний вид — это функциональность и удобство использования, два принципа, которые, возможно, являются наиболее важными для любого UX-дизайнера. Если UX не является гладким, не имеет значения, насколько красива выбранная вами цветовая палитра или насколько потрясающий ваш пользовательский интерфейс. Если пользователь не может эффективно прокручивать его, у него не будет никакой выносливости.
Но какое отношение ко всему этому имеет цвет?
Все просто: цвет — это инструмент, который помогает направлять взгляд . Если вы можете эффективно использовать цвет, вы сможете провести нового пользователя через ваше приложение без длинного руководства, серии сложных видео или даже одного слова. Интуитивно понятный пользовательский интерфейс использует цвет, чтобы направлять не только внимание пользователя, но и его взаимодействие со всем опытом.
Представьте на секунду, что вы разрабатываете приложение для кейтеринговой компании, которое помогает крупным организациям легко настраивать заказы на еду. Потенциальный клиент впервые загружает ваше приложение и открывает его. Что они видят?
В приложении большинство элементов меню, включая фон и любые информационные поля, окрашены в приглушенную, тусклую палитру оттенков серого. Единственным исключением является оранжево-красное поле с надписью «приказ». Как дизайнер, вы знаете, что первое, что пользователи хотят сделать, когда они используют ваше приложение, — это безболезненно настроить свой заказ еды. Вместо того, чтобы скрывать эту функцию глубоко в приложении или требовать, чтобы они прокручивали страницу за страницей, чтобы добраться до нее, вы помещаете ее на передний план. Мало того, вы сразу же обращаете на это внимание. Цвет помогает выделиться и показывает новым пользователям, куда именно им нужно идти.
Точно так же мы ежедневно по-разному взаимодействуем с цветом и создаем в уме определенные социальные ассоциации. Возьмем, к примеру, светофор: зеленый означает движение, красный означает остановку, а желтый означает снижение скорости (или предупреждает нас о чем-то впереди). Выделив важное предупреждение желтым цветом или выделив что-то красным, вы можете эффективно передать сообщение, которое подготовит пользователя к его вводу.
Однако ту же логику можно использовать не только для экранов предупреждений. Изменение цвета кнопки в вашем приложении, которая ведет к покупкам в приложении, может значительно повлиять на коэффициент конверсии.
Хотя это не было внутри приложения, HubSpot обнаружил, что они могут увеличить коэффициент конверсии на 21%, просто сделав кнопку красной, а не зеленой. Это не означает, что вы должны сделать каждую кнопку покупки в приложении ярко-малиновой, но здесь можно привести аргумент, что цвет не может быть просто частью вашей философии дизайна: он должен занимать центральное место. всю вашу философию разработки приложений.
Разумное использование цвета: философия дизайна и доступности
В Proto.io доступность всегда находится на переднем крае нашей философии дизайна. Проще говоря, доступность — это то, что должно быть встроено в хороший дизайн. Если его нет, то дизайн просто не очень хорош.
Около 8% мужчин и 0,5% женщин имеют ту или иную форму дальтонизма. Вопреки распространенному мнению, не существует какого-то одного вида дальтонизма, но чаще всего встречается дальтонизм на красный/зеленый цвета. Люди, страдающие от этой формы дальтонизма, как правило, не видят вариаций красного и зеленого цветов. Хотя тяжесть этой формы дальтонизма сильно различается, даже легкая степень дальтонизма на красный/зеленый цвет может сделать использование многих приложений практически невозможным.
Помимо дальтонизма, близорукие пользователи часто с трудом читают текст с низкой контрастностью, если только они не приближают экран к лицу — что потенциально может нарушить удобство использования многих приложений.
Решение обеих этих проблем довольно простое: избегайте использования неконтрастных цветов при отображении текста на фоне . Хотя вы не можете гарантировать, что все смогут увидеть ваше приложение так, как вы хотите, если вы используете контрастные цвета, вы, по крайней мере, дадите людям приложение, которым они смогут пользоваться. Точно так же использование высококонтрастных цветов облегчит чтение текста для всех, даже если у них нет проблем со зрением.
Еще один способ повысить доступность — предложить сменные цветовые палитры в вашем приложении. Хотя это не вариант для всех, он может значительно повысить доступность вашего приложения. Вы также можете разрешить пользователям изменять цвет определенных функций. Например, у вас может быть опция, которая меняет цвет акцента вашего приложения или цвет текста во всем приложении. Хотя оба эти варианта могут лишить вас некоторого контроля, они обеспечат доступность вашего приложения для более широкой аудитории.
Если вы все еще пытаетесь понять, как интегрировать цвет в свою философию дизайна таким образом, чтобы не повредить доступности вашего приложения, мы предлагаем проверить библиотеку дизайна материалов Google.
Выбор идеальной палитры: закрепление философии дизайна
Несмотря на то, что должно быть ясно, что есть некоторые правила, которым нужно следовать, когда дело доходит до цвета, это также не обязательно наука. Цвет часто связан с более абстрактными вещами, такими как ощущение. Даже если ваше приложение не пытается вызвать какие-то эмоции у пользователя, это не значит, что оно этого не сделает. Хотя поиск идеальной палитры — это не черно-белое занятие, мы рекомендуем начать с чего-нибудь в градациях серого .
Создайте плоский прототип своего приложения с градиентом оттенков серого и используйте его в качестве основы. Обратите внимание на то, как он выглядит и ощущается: передайте его своей команде контроля качества и посмотрите, что они скажут. Ваш процесс адаптации мутный и бесцветный? Вы привлекаете внимание к неправильным частям вашего приложения? С учетом этого отзыва спроектируйте еще несколько прототипов, на этот раз в цвете. Не полагайтесь на одну палитру. Вместо этого возьмите пример с веб-сайта Google по дизайну материалов и поэкспериментируйте с несколькими их образцами.
Отправьте эти изменения также в QA. Не бойтесь проводить A/B-тестирование их друг с другом (и с исходной версией в градациях серого). Убедитесь, что вы задаете несколько сложных вопросов о цветах, которые вы вносите в бой. Используете ли вы цвет, чтобы направлять взгляд пользователя в приложении? Вы просто бросаете цвет на экран, чтобы добавить искры? Отвлекает ли цвет пользователя от достижения цели?
Не забывайте о психологии пользователя или доступности. Если вы создаете приложение для путешествий, вы действительно хотите, чтобы все было ярко-красным? Если вы создаете приложение для здравоохранения, должен ли ваш фон быть зеленым? Достаточно ли контрастны ваши цвета, чтобы текст можно было прочитать?
Хороший UX-дизайн учитывает все эти вопросы — в конце концов, цвет оказывает решающее влияние на поведение и удовольствие пользователя. Если ваша философия дизайна не принимает это во внимание, вы можете создавать приложение, которое не так доступно или удобно, как вы думаете. Убедитесь, что вы создаете прототип своего дизайна на каждом этапе и не слишком зацикливаетесь на одном или двух цветах.
Экспериментируйте, выбирайте другой цвет и продолжайте пересматривать, пока не найдете палитру, которая идеально вам подходит.