Взгляд рекламщика на веб-дизайн: основы создания нетипичного дизайна для типичного сайта

в 16:54, , рубрики: веб-дизайн, Веб-разработка, дизайн сайта, дизайнеру, метки: ,
Введение

«Нужно больше золота»
Непризнанный экономический гений

Всё началось с вот этого разговора в комментах. Если вкратце, содержание можно свести к следующему: заказчик хочет «красиво», дизайнер хочет сделать красиво (без кавычек); заказчик фонтанирует идеями, зачастую вредными для юзабилити и продаж, дизайнер знает, как действовать в рамках типовых решений по юзабилити и стилю.

И тут на сцене появляется рекламщик/продажник. У него тоже есть свое мнение. И мнение это такое: к лешему красоту истинную и крикливый кич, выбросите на помойку споры по поводу идей; сайт должен работать, приносить прибыль: инициировать продажи, служить для брендинга, привлекать звонки — то, что требуется заказчику. Нужно исследовать целевую аудиторию — и выяснить, какой дизайн поможет добиться от неё нужной реакции. И создать с нуля именно то, что требуется для достижения цели. Типовые решения не годятся — они не продуманы для конкретного сочетания заказчик/целевуха. Хуже того, они примелькались.

«Хорошо», — согласятся с ним. Даже здорово. Но как сделать оригинальное решение там, где оригинальности быть в принципе не может (приведу пример из той дискуссии — «интернет-магазин по продаже букетов для новобрачных»)? И как понять, что именно хочет аудитория?

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

Предупреждение. Под катом — длинный текст без картинок.
Предупреждение 2. Честно говоря, автор не подозревал, что это — не прописные истины. Поэтому не надейтесь найти что-то новое в тексте.

Что такое нетипичный дизайн и зачем он нужен

«Think different»
Надпись на стене психиатрической палаты

Для начала коротко разберемся с вордингом, чтобы не возникло непонимания. Чем не является нетипичный дизайн:

  1. Это не красивый концепт, понятный только дизайнеру и двум его друзьям: дизайном пользуются люди и он должен выделяться именно тем, что сделан для них;
  2. Это не обязательно удобный дизайн: понятие удобства может противоречить поставленной задаче. Например, если задача — брендинг, для которого требуется удержание пользователя на сайте, то мгновенное нахождение им нужной информации и последующее закрытие страницы — ошибка, а не победа;
  3. Это не красивый дизайн: это такой дизайн, который приятно видеть пользователям из ЦА (а у них совершенно необязательно есть вкус).

Чем нетипичный дизайн является? Это дизайн, созданный для конкретной целевой аудитории в соответствии с возможностями и целями конкретного заказчика и в точности соответствующий контенту, созданному по тому же принципу (желательно — одними и теми же людьми).

Конечная цель может разниться — улучшение имиджа, продажи, привлечение клиентуры… В любом случае, говоря о коммерческом сегменте, можно сказать, что любая цель сводится к прибыли в той или иной форме. Все остальное — ее производные. Именно исходя из них следует создавать конкретный дизайн, но и об обобщении забывать никогда нельзя.

Перед началом работы или что вам точно не понадобится

«Скрипач — не нужен»
Один металлист

1) Мнение заказчика (или «большого начальника»). Да, это самое сложное. Многие начинающие привыкли, что заказчик контролирует практически каждый этап разработки дизайна сайта. И заказчики тоже к этому привыкли. Проблема в одном — заказчик зачастую не профессионал в области продаж. Более того — он не разбирается в Интернете на нужном уровне.

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

Можно успокоить заказчика тем, что на финальном этапе ему будет предоставлено несколько вариантов дизайна. Что он сможет обговорить, что хочет изменить в их рамках — и ему скажут, возможно это или нет;

2) Ваши представления о прекрасном. Вкус — не абсолютная величина. Ваше мнение скорее всего не совпадает с мнением целевой аудитории будущего сайта, если только вы сами к ней не относитесь. Возможно, вам придется делать ужасные вещи — только чтобы пользователю было комфортно. Смиритесь;

3) Ваши догадки о целевой аудитории, ее вкусах и представлениях. Догадки — ничто. Вам понадобятся факты, иначе вы будете как тот заказчик из первого пункта — и ваш дизайн не выстрелит;

4) И еще — на первых этапах работы вам не понадобится профессиональный софт. Только браузер, текстовый редактор и папка для скриншотов.

Первичный анализ

«В России на каждой кухне сидит как минимум один выдающийся бизнесмен, политик и воевода в одном лице»
Некий политик, бизнесмен и стратег в одном лице

Итак, пришло время попробовать себя в непривычном амплуа — маркетолога. Всех рецептов в одной статье не упомянешь, даже основных — и то… Желающих узнать все необходимые действия автор отсылает к литературе по психологии, статистике и, собственно, маркетингу. Здесь же перечислим несколько приемов, составив впечатление о которых можно рассуждать и подбирать новые методы уже самостоятельно по аналогии.

Во-первых, дизайнер должен выбить из заказчика один простой ответ — какую именно цель преследует сайт? Брендинг, продажи, привлечение новой клиентуры, удержание старой? Скорей всего заказчик скажет: «всё и побольше». Объясните, что «master of everything is master of nothing». Это, конечно, не всегда так, но в большинстве случаев создание многопрофильного сайта требует усилий спаянной единой команды, включающей в себя и дизайнера, и кодера, и копирайтера (притом желательно, чтобы каждый обладал навыками во всех трех сферах), разбирающейся в маркетинге, и огромного бюджета.

Второе. Дизайнер должен знать, на что может рассчитывать. Есть ли у заказчика визуальный материал и в каком количестве и качестве? Какого рода контент собираются публиковать на сайте и как часто (этот вопрос, кстати, надо решать «в связке» с контентописателем — иначе выйдут рак, лебедь и щука). Что вообще представляет собой заказчик, в чем его сильные и слабые стороны как компании (например, можно ли подчеркнуть страну-производитель в дизайне сайта компании, продающей потребительские товары)?

Третье. Переходим к анализу рынка. Следует отыскать наиболее популярные сайты по тематике и с аналогичной целью как в рунете, так и в зарубежных сегментах. Сравнить их дизайн. Возможно, некие факторы в дизайне влияют позитивно на ЦА. Задача дизайнера — подметить общие черты и тенденции, которых нет на сайтах «обычных». Хорошим вариантом будет анализ сайтов со значительным числом негативных отзывов о работе компании — такие отзывы означают, что работает на привлечение клиентуры сайт, а не компания.

Внимание! Не обязательно зарубежные решения прокатят для русскоязычного пользователя. Они могут и оттолкнуть.

Подмечайте так же все неудобства, нелогичности и то, чего не хватает на этих сайтах. Это может пригодиться.

Четвертое. Необходимо оценить ЦА. Для начала хорошо найти профильные форумы/сообщества и повариться в них хотя бы несколько дней. На что обращать внимание:

  • лексикон укажет общий интеллектуальный уровень и психологический профиль аудитории, а так же приятное им словоупотребление (это пригодится и автору контента!);
  • графические материалы, их характер, частота и реакция на них, позволят сделать некоторые выводы о том, насколько смещены приоритеты «текст/графика» у ЦА, а так же о том, какие цветовые схемы, концепции построения рисунков и темы приятны аудитории; каковы ее «художественные вкусы», так сказать;
  • интерфейс наиболее популярных сообществ подскажет, насколько сложным интерфейс для этой ЦА может быть вообще — впрочем, учтите, что многие форумы живут «по инерции», за счет сообщества со времен веб 1.0, так что они не показательны;
  • делайте выводы, исходя из косвенных данных. ЦА сентиментальная и «от печки» скорей всего будет склонна к кичу совершенно определенного характера. Для подростковой аудитории агрессивность и понт дороже денег — и так далее;
  • обращайте внимание на критику сайтов тематики, аналогичной вашей, представителями ЦА. Кому знать, как не им?
  • Попробуйте заметить, есть ли у ЦА любовь к, условно говоря, «рюшечкам», вау-фактору — например, ЦА с таким синдромом очень положительно отнесется к двигающимся элементам, слайдерам и каруселям в дизайне, в то время как «суровые мужики» могут этого и не понять.

Пятое. Необходимо понять комплексы целевой аудитории — и как на них можно сыграть. Простейший пример — ЦА «толстяки». Комплекс неполноценности во все поля. Как на нем играем? Надо понять, как относятся к своему комплексу толстяки, какими они хотят себя видеть и как это будет сочетаться с характером сайта. Понятно, что многие хотели бы видеть себя атлетами, этакими русскими богатырями.

Но если ваш сайт будет специализироваться, скажем, на одежде для них, использовать в элементах дизайна изображения этих самых богатырей — лишний раз бередить рану ЦА, напоминая об их несоответствии образу. Зато веселый и солидный джон-буллистый, черчиллеобразный джентльмен — самое то.

Читателю может показаться, что с толстяками легко, но какие комплексы у людей нормальных? Помните — комплексы есть у всех, кроме святых старцев, и те в своей святости не уверены.

Любая женщина хочет быть любима и привлекательна. Любой мужчина — умен и силен. Строитель — быть Творцом, а не Равшаном, покупатель — «всегда правым», а не лохом — «не халявщик, а партнер», помните?

Это — очень важная задача. Нужно читать специальную литературу, учиться сопереживать, чувствовать себя частью ЦА — и в то же время смотреть на нее снаружи. Но если этому научиться — созданные вами элементы дизайна реально будут более действенны, чем сам текст сайта.

Проникнувшись целевухой, еще раз обратите внимание на конкурентов. Что у них не так с этой точки зрения?

Шестое. Проверка поисковых запросов на том же Яндекс.Директе даст большее представление о желаниях и чаяниях ЦА. Пример — ищет большинство полезный продукт (тот, что производит клиент), вкусный или натуральный? Кого из конкурентов заказчика ищут и чем из этих трех факторов продукт-конкурент знаменит? Можно ли сказать то, что ищет большинство, о продукте заказчика?

Как это использовать? Например, картинка-бэкграунд может создавать совершенно разное впечатление. Дальнейшие рассуждения на эту тему автор оставит за читателем.

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

Что делать: рассуждения и инструменты

«Если человека долго бить по голове, что-нибудь непременно получится»
Грабли

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

Во-первых, определитесь (вместе с тем, кто будет создавать тексты), какова именно цель сайта в переложении для вас. Это определит как путь посетителя по сайту, так и ваши действия.

Брендинг означает — задержать на сайте, показать максимум, запомниться, но не задолбать — то бишь заинтересовать. Увеличение продаж — дать возможность найти товар и оформить заказ за минимум кликов. Привлечь в оффлайн-магазин или спровоцировать телефонный звонок — показать на одной странице все необходимое, мотивировать с первого взгляда. И так далее, и тому подобное…

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

Область пересечения этих множеств — и есть ваша задача.

Правда, скорее всего она выйдет несколько расплывчатой, а идеи — противоречащими друг другу. На этом этапе есть несколько инструментов. Если бюджет позволяет ими воспользоваться — вам повезло.

1) Создайте несколько мелких промо-сайтов в соответствии с разными идеями. Простеньких, без широкого функционала и контента. Воспользуйтесь контекстной рекламой. Посмотрите на пользовательское поведение;

2) Предыдущий пункт чересчур дорог. Решение проще: попробуйте найти среди знакомых кого-то, соответствующего ЦА. Если отношение к дизайну нормальное — ок. Потом — не соответствующего. Если реакция отрицательная — вы все сделали верно;

3) На этапе редактирования после выкладки сайта могут помочь скрипты, отслеживающие пользовательское поведение на странице. Сейчас появились довольно сложные системы, позволяющие отслеживать чуть ли не положение курсора. Обращайте внимание, куда на странице кликают чаще всего — вполне возможно, именно эта зона видна наилучшим образом и туда надо засовывать самые важные ссылки и кнопки.

В любом случае, создавая дизайн, помните несколько общих правил:

1) Если верить британским ученым, хиромантам и лошадиным барышникам, большинство людей — визуалы. Ergo, картинки бьют текст. Тезисы бьют стены текста. Это верно для любой аудитории;

2) Попытайтесь влезть в шкуру посетителя — вы же над этим работали, верно? Исходите из этого даже при построении не несущих информационной нагрузки элементов. Например, строители и вояки — ребята конкретные. Четкость форм, аккуратность — это для них. «Ванильным» девушкам, напротив, нравятся скругленные углы, палевые тона… И так далее;

3) Не пренебрегайте вау-фактором, если только ЦА это позволяет. Нечто бросающееся в глаза, обращающее внимание на то, что вам нужно — и не встречающееся у конкурентов — дорогого стоит. Это может быть, например, слайдер с редким визуальным эффектом или какой-либо иной не примелькавшийся способ завоевать интерес посетителя;

4) Посетителю в большинстве случаев неинтересна рожа директора, фото здания компании или что-то еще. Ему интересно, какую услугу ему окажут. Вспомните сайт гугла — все по делу. Ergo, на сайте медицинской клиники на страницах фото врачей менее полезно, чем, скажем, фото какой-нибудь красиво светящейся, но безобидной «научной штуковины». Впрочем, если речь идет о хирурге или стоматологе, безобидная (!) физиономия может оказаться на пользу;

5) Повторюсь, ведь это уже было сказано в начале статьи: не перебарщивайте с оригинальностью, интерфейс должен быть понятен;

5) Если вы выполнили все вышеописанное и дизайн вышел все равно типичный, попробуйте еще раз просмотреть сайты-конкуренты с точки зрения ЦА. Наверняка есть какой-то момент, который мешает и который можно заменить, улучшить, а то и создать нечто новое. Момент, характерный для конкретной фирмы, города, времени года, задачи, целевухи — вам нужно лишь его уловить.

Заключение

«Строили-строили… не построили»
Девиз дорожных работников

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

Автору кажется, что немаловажным будет отметить неизбежный вывод из этой статьи — все, работающие над сайтом, должны действовать вместе, если необходим по-настоящему действенный результат. Вариант «дизайнер отсылает картинку верстальщику, тот верстает и выкладывает, девочка-секретарша забивает какую-то инфу внутрь» не работает, если необходимо добиться действительно качественного результата.

Надеюсь, что информация была кому-то полезной.

Автор: Los_Pochtovyi

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js