UX/UI дизайн сайта

UX/UI дизайн сайта: что это для малого бизнеса

UX/UI дизайн сайта звучит как что-то из мира больших IT-компаний, но для малого бизнеса он ещё важнее. У большой компании есть бренд, и люди готовы потерпеть неудобный сайт. У небольшой фирмы такого запаса нет: если человек не нашёл цену за десять секунд, он вернётся в Google и откроет следующий результат.

UX (user experience, опыт пользователя) отвечает на вопрос, как человек проходит по сайту. Что он видит первым? Понимает ли, куда нажать? Где сомневается и уходит? UI (user interface, интерфейс) отвечает за то, как всё это выглядит: кнопки, шрифты, цвета, отступы. Хороший сайт получается, когда сначала продуман путь, а потом нарисован интерфейс.

С чего я начинаю

Начинаю я с ваших клиентов. На созвоне выясняю: кто приходит на сайт, откуда (Google, Карты, реклама, Instagram, рекомендация), что они хотят узнать в первую очередь и что их обычно останавливает. Ремонтной фирме, например, важно, чтобы человек сразу увидел район работы, цену «от» и фото реальных объектов. Клинике важно расписание и запись. Ресторану меню и доставка.

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

Прототип: дешёвые правки

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

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

Визуальный дизайн с задачей

Когда структура утверждена, начинается UI. Здесь у каждого решения тоже есть задача:

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

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

Доступность закладываю сразу

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

Частые ошибки в интерфейсах

Вот что я чаще всего вижу на сайтах малого бизнеса в Польше:

1. меню из десятка пунктов, где нужная услуга спрятана во вложенном списке;
2. слайдер на первом экране, который сменяет картинки быстрее, чем их можно прочитать;
3. серый мелкий текст на белом фоне, который трудно читать на улице;
4. кнопки, которые не выглядят как кнопки;
5. форма с обязательными полями, которые не нужны для ответа.

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

Цена

UX/UI дизайн входит в каждый мой сайт: лендинг от 400 €, сайт компании от 700 €, большой сайт на своей CMS от 2400 €. Если нынешний сайт неудобен, логичен редизайн от 400 €. Если хотите сначала понять, где сайт теряет людей, подойдёт аудит и стратегия за 450 € или бесплатный аудит для первого взгляда. Цены в евро, окончательные после созвона.