Какой должен быть дизайн сайта? На что обратить внимание в прототипе и в макете в цвете?

Текст

Легко ли он читается, не перегружена ли им страница, не делает ли обилие информации сайт похожим на газету.

Содержание

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

Шрифт

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

Меню

Все ли необходимые пункты меню на месте? Спросите возможно ли добавить еще пару пунктов и как это скажется на общем виде? Как открывается меню? Сколько строк максимально помещается в “выпадашке”? Уместно ли это выглядит?

Поиск

Обращайте внимание заметен ли он. Это полезный инструмент для Вашего клиента, позволяющий не шерстить меню, а сразу ввести ключевой запрос. И то, насколько интуитивно понятен и заметен поиск – оценивается его функциональность с точки зрения реализации дизайна. Другими словами, какой толк в “поиске”, если вы не можете его найти?

Корзина

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

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

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

Форма регистрации

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

Контакты

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

Формы захвата

Хорошо, если вы ненавязчиво напомните клиенту, что Вы открыты к вопросам, даете бесплатно первую консультацию и вообще всячески приветствуется обращение к себе. Оцените все ли поля в формах действительно нужны? Вам правда требуется и почта и телефон сразу? Поставьте себя на место клиента и оставьте только самое важное. Посмотрите, что увидит клиент при отправке запроса. Просто “спасибо, мы с Вами свяжемся?” Вроде бы клиент услышан и мы достигли цели, получили лид, но клиент в то же время оказывается в ситуации, когда он вроде бы все сделал и Ваш сайт его больше не держит. Да, и пока вы звоните он отправится дальше, искать того, кто перезвонит сразу, пока “горячо”. Возможно, у вас пока нет ресурсов, чтобы перезванивать сразу. Но “Спасибо, наш менеджер свяжется с Вами в течении 10 минут” уже “заставит” клиента ждать Вас и не закрывать страницу сайта.

Внимание пользователя

Несмотря на то, что прототип выполнен в черно-белом цвете, дизайнер уже на этом шаге расставляет акценты. Максимально темные объекты – то, на что потенциальный клиент обращает внимание прежде всего. Чтобы в дальнейшем не было расхождений, отметьте что дизайнер учел все верно: самые заметные элементы те, что заставляют клиента обратиться к Вам (формы, кнопки), все что светлее – менее значимо и нацелено подчеркнуть ключевую информацию.
Если меню темнее кнопок на данном этапе – обсудите с дизайнером, почему так. Возможно его видение просто не совпало с Вашим.

Команда (О нас)

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

Карточка товара

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

Другими словами, если Вы заходите в карточку товара и теряетесь в информации – блок нужно доработать. Не требуйте от дизайнера уместить “все и сразу” на первом же экране, подумайте и обсудите какие свойства действительно первостепенны для конкретно Вашего товара, а какие можно скрыть, в пользу увеличения конверсии.

Часто Задаваемые вопросы (FAQ)

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

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

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

Галерея

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

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

Отзывы

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

Футер

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

Адаптивность

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

Изображения в комплексе

Изображения – то, что привлекает основное внимание потенциального клиента. Сначала оцениваем их комплексно. Попросите дизайнера или сами выстроите все изображения сайта рядом друг с другом и посмотрите на них вне сайта. Если Вам хочется сыграть в “найди лишнего”, значит единый стиль оформления не выдержан.
Это уместно, если предполагается концепцией (о которой, кстати, дизайнер должен был сказать вначале). В противном случае, картинки стоит доработать.

Изображение по смыслу

Что это значит? Читаем текст, смотрим на картинку рядом. Они связаны? Картинка передает содержание текста или она просто красивая?
Изображение – такая же важная и информативная часть сайта, как и блок меню, футер или кнопки.
Помните, что ничего не должно быть на сайте “просто так”. Каждый элемент должен быть продуман и сделан с какой-либо целью. Иначе сайт рискует превратиться в свалку красивых, но бестолковых дизайнерских идей.

Иконки

По хорошему, иконка способна полностью заменить текст, не должна нуждаться в пояснении, даже наоборот в общем то и создана для того, чтобы упростить восприятие текста.
Согласитесь, странно видеть крестик и рядом подпись “Закрыть”. Зачем, если это уже и так очевидно?
Или зачем иконка, смысл который становится понятен только после ее тщательного рассмотрения?

– Убираем текст там, где он дублирует смысл иконки
– Избегаем иконок с чрезмерным количеством элементов. Здесь работает правило: чем проще, тем лучше.

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