Дизайн сайта и его функциональность — есть ли связь?

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

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

Компания, осознавшая потребность в сайте, должна понимать, как ей стоит позиционировать себя в сети, и это позиционирование напрямую зависит от представления в офлайне и от того, как компания общается с клиентами вне digital-пространства. Даже крутая подача сайта, удобство, скорость использования не помогут, если при офлайн-контакте клиент столкнулся с безразличием. Поэтому всегда нужно анализировать CX.

Эти опыты могут отличаться, и проблематика и плоскость решений зависят как от UX, так и от СX. Задача, которую ставит перед собой клиент, осознавший потребность в сайте, может не лежать в плоскости создания сайта, и тогда ресурс не будет работать или будет, но для решения других задач. А возможно, сайт вообще окажется не нужен.

Один из наших клиентов хотел создать интернет-магазин / витрину элитных товаров. На пресейле и в начале работы над проектом мы постоянно обсуждали с контактным лицом функциональность сайта, определяли целевую аудиторию и CJM. Но во время защиты дизайн-концепции руководство компании клиента стало давать нам правки, никак не связанные ни с образами, ни со структурой интернет-магазина. Мы обсудили вопросы позиционирования бренда в сети, узнали мнение руководства компании, ознакомились с миссией и философией бренда. Оказалось, что сайт должен был повысить узнаваемость бренда в онлайне, а задача увеличить продажи через интернет перед ним не стояла.

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

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

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

UI (User Interface, пользовательский интерфейс) — это визуальная система, которая определяет, как выглядят те или иные элементы (цвета, форма кнопок, анимация переходов и многое другое, что видит пользователь на экране). Такая система создает образы и визуальный язык, на котором сайт общается с пользователем, и определяет внешний вид ресурса.

Очень условно можно выделить несколько крупных категорий сайтов.

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

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

Информационный портал — новостной сайт, сайт-агрегатор или тематический сайт, например, посвященный спорту.

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

Лендинг / посадочная страница — одностраничный сайт, созданный под конкретное событие, акцию или товар. Такие сайты призваны подтолкнуть пользователя к какому-то действию: заказать, купить или оставить информацию. У лендинга может быть очень высокая конверсия по сравнению с другими типами сайтов, однако он ограничен в своих инструментах и возможностях.

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

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

Но нужно понимать, что каждая категория нацелена на решение определенных типов задач, и самая большая ошибка — смешивать форму и содержание, то есть дизайн сайта и его категорию. Например, крупной логистической компании не стоит копировать необычный дизайн сайта какого-нибудь digital-агентства, которое использует сайт как портфолио и с его помощью показывает свои возможности. Логисту гораздо важнее сделать удобную сервисную страницу, чтобы посетитель смог быстро разобраться, по какой цене он отправит груз из точки А в точку Б. А если компании нужно как можно быстрее продать свой товар, ей стоит посмотреть в сторону яркого лендинга, который захватит внимание аудитории и завирусится в сети.

Один из наших клиентов занимается продажей букетов. К тому моменту, когда он обратился к нам, у него уже был разработан свой собственный фирменный стиль, который позволял компании отстроиться от конкурентов. Клиент хотел занять премиум или luxury-сегмент, но при этом поставил перед нами задачу разработать стандартный маркетплейс с характерными блоками. Из-за смешения стилистик изначальный графический язык стал противоречить внутреннему содержанию, пропала исключительность и ощущение избранности. Более того: из-за мрачной гаммы, использования текстур мрамора и прочих подобных элементов сайт стал напоминать ресурс ритуального агентства.

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

Одному из своих клиентов агентство betaagency.ru разработало оригинальный сайт с афишей, которая повторяет физическую киноафишу на уличной тумбе: https://vimeo.com/346389050. Горизонтальный скролл позволят «ходить» вокруг тумбы и рассматривать объявления. Физическая метафора переходит в UI. Нестандартный пользовательский паттерн здесь — хорошее дополнение, он усиливает связь между digital и физическим миром.

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

Теперь, когда мы разобрались с типологией дизайна, можно перейти к самому главному: выбору команды исполнителя.

Разработкой сайта исполнитель и заказчик должны заниматься вместе. Клиент, который решил просто поставить задачу и ждать результата, не участвуя в процессе разработки, этот результат не получит — будет или плохо, или не то, что нужно. Другой подход, когда клиент не дает обратную связь или давит на исполнителя без какой-либо конструктивной критики (например, исключительно с помощью фраз типа «не то!», «вы не угадали мою мысль» или «я не должен вам объяснять, что здесь не так, вы же профессионалы!»), тоже не поможет добиться желаемого. Так же неверно заниматься отрисовкой дизайна руками исполнителя.

Клиент всегда должен доверять исполнителю: компании должны стать равными партнерами на пути к достижению цели, общаться на уровне экспертов, а любая критика должна быть конструктивной.

Сайт производителя сладостей. В какой-то момент клиент решил рисовать руками дизайнеров, и дизайн-концепция ушла далеко от первоначальной. В результате нарушились стандарты UI, структура и весь графический стиль, а готовый сайт не отвечает ни правилам usability, ни современным нормам эстетики.

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

Но на деле ситуация иная: дорогостоящий заказ подразумевал создание сложного ресурса и его поддержку в течение 4 лет. Предоставленный же программистами бесплатный сайт был разовой работой, более того — необходимого функционала на нем не было.

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

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

Что является поводом не сотрудничать с исполнителем, несмотря на его послужной список? Например, если результат нужен через месяц, а исполнитель готов предоставить сайт не раньше, чем через 4 месяца; если цена, которую попросил исполнитель, оказалась настолько высокой, что приходится затягивать пояс уже после первого расчета. Вопрос цены особенно актуален, ведь по ходу работы могут возникнуть дополнительные расходы, как с ремонтом. Уточним, что важно понимать два момента: сколько будет стоить результат, из чего эта цена складывается.

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

Стоит отметить, что, если бы изначально было выделено суммарно то же количество времени и ресурсов, что и на все итерации вместе взятые, то результат был бы в разы лучше сразу.

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

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

Темная тема сайта на дизайне требует значительно меньше времени, чем ее реализация на верстке. Но при этом она полезна пользователям, которые смотрят сайт в темное время суток.

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

https://gfycat.com/zigzagwavyalligatorgar. Придумать и нарисовать такую анимацию значительно проще, чем ее воплотить в рабочем варианте.

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

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

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

Стоит помнить эти, казалось бы, простые истины, и работать над сайтом будет значительно проще.

Авторы статьи:

Вадим Ойкин — ведущий дизайнер ITECH
Александр Карагодин — директор департамента разработки ITECH