Как быть, если у заказчика и исполнителя разные представления о том, что такое красивый веб-дизайн? Кто прав — клиент или техническая команда с большой экспертизой?
Правильный ответ — оба. Представление о красоте зависит от вкуса: одним нравится минимализм и функциональность, другим реалистичность и 3D, одним пастельная палитра, другим яркие цвета, одним статика, другим анимация. И определить, что из этого лучше, невозможно.
Однако качество веб-дизайна вполне реально оценить — но не с точки зрения «красиво / некрасиво», а по критерию осмысленности.
Вопросы для самопроверки
Сайт не создается просто так: он всегда призван решить конкретную задачу клиента. И именно на нее должны «работать» все его элементы, в том числе веб-дизайн. Простой пример: CTA должен привлекать внимание пользователя. Если провести A/B-тест с разным расположением кнопки с CTA, можно увидеть, что один вариант дает больше кликов, чем другой. А это уже вполне измеримый показатель качества.
В России сложилось представление о дизайне как о художестве, но изначально значение английского design ближе к проектированию — деятельности, которая решает конкретные задачи. Поэтому разработка дизайна сайта начинается с определения его целей и задач. Впоследствии к этой цели придется постоянно возвращаться, поскольку у нее есть свойство искажаться в процессе работы. Поэтому при проектировании любой страницы сайта или его функционала важно задавать вопросы: что мы хотим решить этим функционалом? Что хотим сказать? Каких действий пользователя стремимся добиться? Благодаря такому осмысленному подходу в финале дизайн сайта будет соответствовать своей изначальной задаче.
Соответствие цели
На картинке ниже — карточка товара, которую мы делали для группы компаний по производству кирпича и бетона «Браер».
Первый экран состоит из стандартных элементов: заголовок, фотографии, характеристики, стоимость и кнопка «в корзину». Мы сделали это намеренно: у пользователей есть устоявшиеся ожидания от функционала интернет-магазина, которые не стоит ломать. Мы уже рассказывали об этом в статье Топ неочевидных ошибок в UI/UX дизайне: ломая привычные паттерны поведения человека в онлайне, вы тем самым создаете ему неудобства.
Если пользователь уже знает, что хочет, ему хватит информации на первом экране, чтобы принять решение о покупке. Но если у него есть какие-то сомнения, он начинает изучать карточку подробнее — и мы постарались их развеять с помощью контента и веб-дизайна.
Для этого мы представили себе встречу встреча клиента с хорошим продавцом в салоне. Такой продавец не просто демонстрирует покупателю разные кирпичи: он дает их потрогать, показывает текстуру, технику кладки, в разговоре проявляет эмпатию и эмоции. Все это мы решили воплотить в дизайне товарной карточки: оформили ее в теплых тонах, разместили фотографии поверхности кирпича, дали возможность визуально сравнить разные типы кладки, показали фотографии домов, сделанных из этого материала. Иначе говоря, мы постарались, чтобы покупатель получил от страницы товара те же впечатления, которые ему дал бы разговор с высококлассным продавцом — а значит, с большей вероятностью купил бы продукт.
Сторителлинг в дизайне
Задача веб-дизайна сайта может решаться разными способами. Так, мы в Toimi часто обращаемся к приему сторителлинга, когда информация доставляется пользователю через какую-то историю. Эта история включает в себя не только текст: это и контент сайта, и его дизайн.
Если вернуться к нашему сайту для компании «Браер», в основу сторителлинга легла концепция дома.
Задумка была в том, чтобы сайт продавал не обычный кирпич, а мечту — свой дом. Какие образы возникают в воображении при словах «дом из кирпича»? Уют, тепло, безопасность, комфорт, надежность, возможно, семейные ужины в холодные зимние вечера — у каждого свои ассоциации, но мы постарались в дизайне воплотить общую идею. Так, на главной странице мы проводим пользователя по всем этапам создания собственного дома: от добычи сырья и производства до готовой постройки — покупатель как будто принимает участие в процессе строительства. Но чтобы добиться такого результата и не свернуть во вкусовщину, нужно постоянно «возвращать» клиента к проработке изначальной цели — то есть тому, для чего он вообще заказал дизайн сайта.
Фокус на юзабилити
Чтобы решать свою задачу, веб-дизайн должен отвечать принципам хорошего UI/UX, в первую очередь — не мешать юзабилити сайта. Если эти принципы нарушаются, дизайн начинает мешать конверсии. Речь о таких случаях, как высокий процент отказов на странице с тяжелой анимацией, мало кликов по незаметной кнопке CTA, небольшой объем заказов из-за неудобной навигации и так далее.
Так, на главной странице сайта «Браер» мы разместили довольно много информации, но для облегчения восприятия разбили ее на отдельные блоки, добавили иконки, выделили цветом текст, на котором нужно сфокусировать внимание пользователя, оставили много свободного пространства между элементами. Как следствие — хотя информации на странице действительно много, она изучается очень легко.
Ошибки в UI/UX-дизайне могут быть разными — самые неочевидные и частые из них мы собрали в статье для Brodude. Без них дизайн будет более удобным и понятным для пользователя — а значит, решит свою задачу. Именно эта практическая направленность и делает веб-дизайн осмысленным.