{"id":13660,"url":"\/distributions\/13660\/click?bit=1&hash=829c3f4bd5611858ea9456b55832e0254413f056f0bd8b6fa3b9fccae541092c","title":"\u041b\u0438\u0434\u0435\u0440\u044b \u0440\u044b\u043d\u043a\u0430 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u043a\u0430\u043a \u0431\u044b\u0442\u044c \u043b\u0438\u0434\u0435\u0440\u0430\u043c\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c \u0433\u0434\u0435","imageUuid":"b21a2e96-c2cd-51bd-a6d9-39deeed48e3c","isPaidAndBannersEnabled":false}
Дизайн
Glory Mlory

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

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

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

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

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

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

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

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

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

Приступим

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

Рекламные щиты / наружный дизайн

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

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

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

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

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

Веб-дизайн

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

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

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

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

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

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

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

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

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

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

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

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

Редизайн

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

Так что именно было изменено?

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

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

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

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

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

0
6 комментариев
Написать комментарий...
Ig Rm

"Детальный разбор предвыборных материалов двух кандидатов и «работа над ошибками» в статье ниже."
На мой взгляд, предложенные автором концепции не улучшили текущее положение дел. Видимо Trazaskowski всеми силами хотел показать близость к населению, хотя и в ущерб контрастности, но динамика присутствует, за счет векторных элементов и подложек под текстом.
Что произошло после редизана? Контраст между человеком и фоном увеличился, хоть и не сильно. Общая динамика ушла, макет "успокоился". Фото в золотистом/медном(?) напоминает, простите, некролог. С упоминанием былых достижений. Еще фото его в белой рубашке с подписью...) Мне кажется не лучшие ассоциации для предвыборной компании... 

Ответить
Развернуть ветку
Виталик Лузан

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

Ответить
Развернуть ветку
Ig Rm

Я бы еще к этому добавил тезис, что если поставить рядом сайт Дуды и редизайненный сайт Тразасковски(?) получится +/- одинаковый дизайн главной, человек на фоне польского флага. Если раньше было четкое противопоставление красное против синего, то сейчас эта цветовая идентичность теряется. Более того, если предположить, что такой редизайн будет произведен в середине промо-компании, то это будет на руку Дуде, т.к. у людей уже сложилась эта цветовая ассоциация и в какой-то момент, количество синих макетов в рекламе сокращается и создается ощущение полного доминирования 1 кандидата.

Ответить
Развернуть ветку
Fed Fomi

Интересно !
Кстати, есть страны (не буду говорить что название на букву "бе") где кандидату можно вообще не париться по всем этим вопросам (всё равно его выберут)
Но, например в США где всегда примерно поровну голосов наверное более серьёзный подход.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Андреянов

Подход сделать фото в пол оборота устанавливающего "контакт" с аудиторией замусорено до дыр. Сразу вспоминаю видос "Миша, если ты так будешь говорить- тебе денег никто не даст". С тех пор 15 лет прошло, а подходы все те же.
Из реального это непонятный щит с телефоном у кандидата справа и приятный блок видео+твиттер у кандидата слева.

Ответить
Развернуть ветку
Читать все 6 комментариев
null