Как хороший UX может помочь вам стать президентом

Эта статья-перевод посвящена анализу визуального представления кандидатов в президенты и того, как это влияет на их победу.

Детальный разбор предвыборных материалов двух кандидатов и «работа над ошибками» в статье ниже.

Всем привет! Эта статья будет посвящена президентским выборам в Польше. Время выборов всегда было невероятно интересным и захватывающим процессом, но нас оно будет интересовать не с точки зрения политики. Сегодня мы будем анализировать и наблюдать за тем, как кандидаты представлены визуально в свой предвыборной кампании и у кого из них больше шансов стать новым президентом.

Сразу хочется начать с того, что в последнее время практически во всех случаях видна огромная пропасть в качестве контента между кандидатами. Когда мы видим предвыборную кампанию кандидатов мы знаем, что за ней следит большая группа людей. Большой коллектив людей, которые несут ответственность за все эти плакаты, рекламные щиты, веб-сайты и социальные сети. И осознание этого заставляет меня снова и снова задаваться одним простым вопросом — «почему»?

Почему эти люди плевать хотели на качество? Почему они нанимают явно некомпетентных людей? Почему они не задумываются о том, что от их работы зависит представление о человеке?

Предположим, у нас есть кандидат, которого нужно продвигать. Мы делаем всё, чтобы человек выглядел привлекательно. Начиная с одежды, волос, обуви, диеты и заканчивая тем, что они говорят и как себя ведут. Думаю, что все согласны с тем, что визуальное сопровождение в данной ситуации чрезвычайно важно, не так ли?

Далее вы распечатываете предвыборные материалы, разрабатываете веб-сайт и собственное приложение. И… они похожи на мусор. Что это говорит о вашем кандидате? Он тоже мусор? Всё это является визитной карточкой вашего кандидата. Вы хотите, чтобы он хорошо выглядел? Так почему всё это похоже на мусор?

Прежде чем мы двинемся дальше, хочется сделать важное замечание: хоть дальше в статье будут представлены два соперствующих кандидата, она никоим образом НЕ ЯВЛЯЕТСЯ политическим агитированием или отражением каких-либо политических взглядов. В данной статье мы сосредоточимся только на качестве дизайна и способах его улучшения.

Сейчас мы проанализируем предвыборные материалы двух кандидатов в президенты, которые прошли во второй тур выборов.

Посмотрите ниже. Какой из двух дизайнов привлекает ваше внимание больше? Вы видите, что именно тут не так?

Рекламный щит слева принадлежит Анджею. Он смотрит на нас и слегка улыбается. Мы автоматически устанавливаем с ним зрительный контакт — здесь есть эмоциональная связь, что является очень важным фактором. К слову, мы с большей вероятностью запомним лица, с которыми у нас был установлен длительный зрительный контакт.

Цвета здесь сильные. Контраст между элементами на билборде высок — мы легко можем отличить кандидата от фона. Сам по себе фон не отвлекает внимание от особы и слогана.

Рекламный щит справа принадлежит Рафаэлю. Он не смотрит на нас, соответственно нет никакой эмоциональной связи со зрителем. Мы видим только половину его лица. Контраст между кандидатом и фоном слишком низкий — очень сложно сосредоточиться на чем-либо. Польский акцент (красно-белый флаг) едва заметен.

Рекламный щит Рафаэля из-за плохих визуальных решений заставляет его выглядеть смущенным, запуганным и нерешительным. Из-за отсутствия контраста и эмоциональной связи, рекламный щит не привлекает внимание зрителя.

Прежде чем мы начнем анализировать веб-сайты двух кандидатов, давайте посмотрим, что происходит, когда мы пересылаем ссылку на сайт (например, коллеге). Какой из «героев» кажется вам более привлекательным?

Рафаэль (справа), имеет низкоконтрастное, вырванное из контекста изображение. Ни зрительного контакта, ни имени кандидата. На его место можно поставить кого угодно угодно и результат останется тот-же.

И напротив, изображение Анджея (слева) — последовательно и привлекает внимание. Зрительный контакт (✓). Хорошая контрастность (✓). Имя кандидата (✓). Короткое, обнадеживающее «приглашение» на сайт (✓). Общая чёткость дизайна (✓).

Это мелочи, но нет ничего важнее мелочей…

Переходим к сайтам и скажу сразу, здесь начнутся настоящие проблемы.

Слева сайт Анджея.

Первая мысль — выглядит очень уютно. Здесь есть всё, что должно быть: фотография кандидата, зрительный контакт, элегантная, а главное четкая типографика, высокая контрастность, соответствующие пропорции между используемыми цветами, ощущение ясности и современности. Сразу можно сказать, что тут работал профессионал. Кое-что можно улучшить, но общее впечатление остаётся очень положительным.

О, а справа сайт Рафаэля или нет?

Так сразу и не ответишь, а всё потому что там нет даже его изображения. И это действительно беспокоит. Трудно представить, кто принял решение опубликовать сайт в таком виде. Практически каждая ошибка, которая могла быть здесь сделана — была сделана (это касается как UX, так и маркетинга). Нет фотографии кандидата, вместо неё представлена просто обложка его программы (книги). Но дело в том, что и она почти не видна, а все потому что обложка имеет тот же градиент, что и фон (здорово, правда?).

Но вернемся чуточку назад. Зачем прятать парня?

Рассуждая объективно, он весьма неплохо выглядит. Конечно, вы голосуете в основном за его программу и это не конкурс красоты, но все же неплохо было бы увидеть человека на его собственном сайте. В нашем же случае, здесь ничего не привлекает внимание!

Контрастность — плохая. Какая-то обложка книги и парящий в случайных местах старый смартфон выглядят нелепо. Красный CTA на синем фоне попросту режет глаз. Типографика — хуже быть не может (возможно это Comic Sans). Поля — не существует (да кому они вообще нужны, да?). Общее впечатление — ужасное. Похоже, это делал новичок без всякого опыта. Либо дизайн, либо реализация (а возможно и то и другое) выполнены отвратительно. Но мы ведь с вами настоящие герои в области дизайна, поэтому я думаю, что мы можем немного помочь Рафаэлю.

Ниже представлено несколько быстрых улучшений, которые, как я полагаю, окажут сильное и положительное влияние на сайт (эти изменения могут также применяться и ко всем остальным материалам, в том числе и к всякого рода плакатам).

• Мы можем видеть лицо Рафаэля перед собой, он смотрит на нас, улыбается и устанавливает эту важную «эмоциональную связь с помощью зрительного контакта», которая так необходима. Благодаря этому весь сайт выглядит «очень гостеприимным». Кажется, будто он говорит вам: «Привет, я рад, что вы посетили мой сайт, вот он я!».
• Подпись: я считаю, что она добавляет приятный штрих. Это заставляет меня поверить, что Рафаэль подписал и одобрил свой сайт сам.
• Контраст — мы видим некоторый контраст и можем отличить кандидата от фона. Нам не обязательно использовать столько синего цвета (я понимаю использование синего на выборах в США, но на польском флаге нет этого оттенка). Красный, золотой и белый прекрасно справятся с поставленной задачей и будут выглядеть очень «лёгкими» и «элегантными». Такое обилие цветов может сделать сайт слишком детским.
• Имя занимает немалую часть сайта и работает как логотип. Это помогает узнать, для кого был сделан веб-сайт и за кого мы будем голосовать.
• Его программа (обложка книги, приложение) теперь находится в одном доступном месте, но в то же время она не выступает на второй план. Если кому то интересно, на сайте присутствуют кнопки для скачивания .pdf / скачивания приложения.

• Раздел под CTA — новости. Я хотел создать здесь элегантный, немного винтажный «дневник». Фотографии могут стать цветными, при наведении курсора. Очень важно побуждать людей делиться сайтом и мы можем сделать это с помощью цвета CTA.
• Типографика — это смесь шрифтов с засечками (используется для заголовков и хедера) и без засечек (текст меньшего размера). Создаёт элегантное, профессиональное впечатление.
  
• Наконец-то у нас есть поля и много пробелов (хотя композиция может показаться немного нестандартной, всё выровнено по макету сетки).
  

Это был пример процесса под названием speed-design. Хотелось показать, как легко можно исправить некоторые серьёзные ошибки. Очень классно выполнять подобные упражнения. У меня ещё никогда не было возможности создать веб-сайт для президента — по крайней мере, я могу делать это для развлечения.

Если вы когда-нибудь увидите цифровой продукт, который можно улучшить, всегда пользуйтесь шансом и попробуйте ускорить его разработку, чтобы отточить свои навыки.

Спасибо за чтение!

Больше интересных разборов ищите в нашем блоге и телеграм-канале.