| Каким должен быть дизайн сайтов, чтобы нравиться людям. | |
| | Тренды на цвета и элементы дизайна приходят и уходят, а правила остаются навсегда еще со времени web 1.0. Арт-директор веб-направления Сергей Борцов рассказал, как сделать сайт, который понравится пользователям.
| |
| | Первым делом надо определиться и понять, зачем вы делаете сайт: продажи, развлечение, информирование или предоставление услуги. Сайт — это инструмент для общения бренда с аудиторией. То, каким он будет и какие решит задачи, зависит от целей вашего бизнеса и стратегии соответственно. Обычно за это отвечает стратег, маркетолог или арт-директор, в идеале — все вместе, потому что важно правильно определить и сформулировать задачи. | |
| | Пришел как-то раз в агентство мужик и говорит: «Хочу сайт, чтоб обувью торговать». А его спрашивают: какая задача стоит перед сайтом, есть ли бизнес-стратегия, сформирован ли бренд и его позиционирование, какой tone of voice и кто ЦА продукта. Но клиент не смог ответить ничего вразумительного, потому что не до конца понимает свой продукт.
В такой ситуации нужно отправить заказчика делать «домашнее задание», чтобы появилось четкое понимание, чего он хочет от бизнеса и зачем нужен сайт. Возможно, ему на самом деле вообще понадобится три сайта: два лендинга под самые продаваемые модели обуви и отдельное продвижение для каждой, а также основной сайт с информацией о бизнесе и других товарах.
| |
| | Решили бизнес-задачи и поняли, чего хотите от веба? Отлично! Теперь можно перейти к разработке. Вот план, что делать дальше. | |
| - Формируем mindmap одного или нескольких сайтов: какая информация и где должна быть.
- Расписываем пользовательские сценарии (особенно если это большой проект): как будет вести себя пользователь и с чем ему предстоит взаимодействовать.
- Определяем call to action (CTA), если он вообще нужен: где и как разместить кнопки «купить», «заказать», «оставить заявку» и так далее. Продумайте, куда они будут вести — на другие страницы/разделы или акционное предложение. Расставьте четкие и понятные CTA, чтобы помочь человеку быстрее добраться из точки A в точку B, параллельно зацепив еще продукты из точки С.
- Строим архитектуру — «скелет» сайта: как с ним будет взаимодействовать пользователь, где располагаются основные и второстепенные блоки и так далее. Это помогает посмотреть на будущий проект целиком и понять, что куда и зачем идет.
- Проверяем и упрощаем путь пользователя: что надо сделать юзеру и за сколько шагов, чтобы совершить нужное для вас действие (покупка, информирование, контакты)
| |
| | В результате у вас получится схематичный дизайн-прототип будущего сайта. | |
| | Когда вы поймете все шаги и действия пользователя, сделайте логичную и удобную навигацию по сайту. Подумайте, как еще можно сократить путь до цели. Цель любого проектирования — помочь пользователю найти то, что он ищет, и в стиле follow me провести его за ручку к нужной кнопке. Независимо от того, зачем вы делаете сайт, у посетителя вся важная информация должна быть как на блюдечке. | |
| | Агентство сделало мужику с обувью архитектуру сайта и начало работать над дизайн-концепцией, даже заложило некоторые детали в будущую верстку. Но тут клиенту пришла гениальная мысль: добавить еще несколько продуктов, которые раньше вообще не обсуждали. Теперь к пяти моделям обуви добавилось еще 60 вариантов для взрослых, несколько удобных ботинок для пенсионеров и валенки Off-White для детей.
Но даже из такой ситуации есть выход. Добавим несколько подкатегорий, которые облегчат покупателю выбор, а также сортировку и фильтрацию по бренду, возрасту, полу и все такое. В верхнее меню (хедер) добавим строку для поиска, а в нижнее (футер) — информацию о доставке и возврате, контакты, часто задаваемые вопросы, условия покупки и ссылки на соцсети. Это классический набор для любой e-commerce.
| |
| | Мобильные устройства в приоритете | |
| Навигация, авторизация, меню, изображения — все это было на сайтах прошлого века. С тех пор обязательные элементы сайта не изменились, но теперь их нужно адаптировать для смартфонов и планшетов. По данным исследования GfK, доля пользователей мобильного интернета среди россиян — 61%, а тех, кто пользуется только им, — 35%. | |
| | Клиент сказал, что мобильная версия не нужна? Расскажите ему, сколько он потеряет, когда пользователь откроет сайт со смартфона и не найдет нужную кнопку, не привыкнет к огромной махине на маленьком экране, посмотрит на это безобразие и уйдет к конкурентам. | |
| | Сейчас десктопная версия — дополнение к мобильной, а не наоборот, как было раньше. К тому же намного проще развернуть маленький экран смартфона на большой десктоп. Такой подход помогает сразу убрать компоненты, которые будут криво работать на мобилах. | |
| | Доступность — один из критериев хорошего дизайна. Лучшие сайты делаются для пользователей, а не для дизайнеров или разработчиков. Сайт должен отлично работать на всех браузерах и устройствах, а не только на iMac самого умного на свете арт-директора. | |
| | Еще круто учитывать возможности (или их отсутствие) пожилых и людей с ограниченными возможностями, если они входят в аудиторию сайта. В идеальном мире у сайтов есть версия для слабовидящих или сценарий голосового управления. | |
| | Визуальная часть — это поиск баланса между креативным, фантастическим, интересным дизайном и удобством пользователя. Дизайн должен учитывать tone of voice бренда, а также фото и видеоконтент, но при этом не перегружать внимание пользователя. Креатив — всего лишь помощник для достижения бизнес-целей. | |
| | Продолжаем пилить сайт по продаже обуви. Интерфейс делаем максимально простым, чтобы не отвлекать внимание от товаров и не раздражать людей яркими цветами. Но валенки Off-White — это эксклюзив, поэтому решили сделать под них промостраницу и вести на нее отдельный трафик. Чтобы привлечь внимание и заинтересовать людей, добавили 3D-обзор, AR-примерку и конструктор с выбором расцветки. Получилось «вау», но при этом основная версия сайта осталась лаконичной. | |
| | Внешний вид надо обновлять каждые несколько лет. Крупные компании часто экспериментируют с дизайном, и нужно соответствовать этим трендам, чтобы не похоронить свой сайт на кладбище забытых веб-проектов. Еще вчера все угорали по минимализму, а сегодня применяют градиенты и юзают 3D-объекты. А вот расположение элементов и архитектуру можно оставить прежними, так как за годы пользователи к ним привыкают. | |
| | Если пользователь не найдет нужную информацию, он уйдет с сайта и что-то купит у других ребят. Когда вы разрабатываете сайт, убедитесь, что он не просто красивый, а еще и информативный: включите полезные ссылки и пояснения. | |
| | Люди знают, что имеют право вернуть товар в магазин, если он им не понравился или не подошел. А в интернет-магазине риск купить что-то не то еще выше. Поэтому не мучьте людей и дайте нормальный ответ на все волнующие вопросы на отдельной странице. | |
| | Сложные пути пользователя | |
| | Фильтры, справочники, конструкторы товара или даже тесты, которые помогут подобрать пользователю что-то индивидуальное, — прекрасные маркетинговые приемы, но они не должны стать основой сайта. Вы же помните, что наша задача — помочь клиенту? | |
| | Чтобы упростить покупку в интернет-магазинах, многие сайты убрали предварительную авторизацию. Указать номер телефона или почту намного проще, чем заполнять огромную анкету с вопросами о жизни, кличке первого питомца или девичьей фамилии троюродной тети. | |
| | Низкая скорость работы сайта | |
| | У вас есть две-три секунды, чтобы у пользователя загрузилась страница. После этого процент отказа стремительно растет. Чаще всего сайт нагружают плохая оптимизация, обилие анимации, а также несжатые изображения и видео. Откажитесь в мобильной версии от тяжелых элементов в пользу скорости и при необходимости сделайте это в десктоп-версии. | |
| Памятка при работе с сайтом - Максимально сжимайте размеры фото- и видеоконтента.
- Используйте максимально оптимизируемые форматы (например, соберите PNG-секвенцию вместо GIF-анимации).
- Проверяйте и тестируйте рабочий продукт, хотя бы через PageSpeed Insights от Google.
| |
| | Некоторые компании жертвуют простотой использования ради украшательств, 3D-анимаций и сложных дизайн-приемов, потому что все типа хотят быть модными, а немодными быть не хотят. Однако такая роскошь не для всех. Это сгодится для фестивальной работы или привлечения внимания к рекламной кампании. Но в таком случае всегда должен быть обычный сайт. И дизайнеру стоит понимать, когда можно пожертвовать удобной навигацией в пользу вау-эффектов, а когда нет. | |
| | Основной сайт Gucci — это классика e-commerce с привычной навигацией. Но под новые коллекции или коллаборации компания делает отдельные имиджевые сайты, чтобы создать вау-эффект и привлечь внимание к покупке на официальном сайте или же у реселлеров. | |
| | Это хороший инструмент, чтобы расставить акценты и направить пользователя на путь истинный. Но если переборщить с ними, человек может нервничать, ничего не понять и уйти, не добравшись до нужной вам цели. Не зря на игровых консолях пишут предупреждение об эпилепсии: некоторые имиджевые сайты могут и у здорового человека вызвать как минимум головную боль из-за мигающих и прыгающих разноцветных анимаций. | |
| | Неправильное использование отработанных годами механик пользовательского взаимодействия | |
| | Одна из таких механик — бесконечный скролл. Она оправданна в Instagram или Tumblr, где все на это заточено. Но на обычном сайте она вываливает на пользователя тонну информации, которую тот не в состоянии переварить. В результате внимание рассеивается и человек не доходит до целевого действия. Исключение — промо и имиджевые сайты. | |
| | Правильная работа с основами композиции, с ритмом, с цветом, с макетной сеткой, с типографикой, а также понимание нужд и целей сайта поможет сформировать «скелет» сайта (UX), на который вешается внешнее «мясо» (UI), а также дизайн-эффекты и анимации без вреда для пользователя. | |
| | Веб-дизайн пришел к нам из графического (а последний — из многовековой истории искусств), но со своими нюансами и причудами. Однако никто не отменял законы композиции и графического ритма, а взаимодействие цветов и понимание работы с типографикой остались неизменными. К этой компании еще добавились работа с анимациями, пространственное мышление, психология, социология, маркетинг и прочая черная магия. Эти основы нужно знать, чтобы решать задачи для бизнеса, создавать новые продукты, а главное — развиваться в своем деле. | |
| | О чем надо всегда помнить
| |
| Заставьте клиента заполнить бриф на веб-разработку (как его составить, читайте тут) или сделайте это вместе. Это помогает любому структурировать знания о его товаре или услуге. Вы должны получить максимум информации о продукте, бренде, специфике деятельности, а также понимать, как, когда и через какие каналы на сайт пойдет трафик. | |
| | Погружайтесь в продукт клиента, изучайте нишу и его пожелания. Не делайте «лишь бы сделать». Так вы ни хороший кейс в портфолио не получите, ни бизнесу не поможете. | |
| | Предлагайте свои решения для задач клиента, опираясь на опыт и практику: пока еще не все заказчики понимают, что будет лучше для их продукта. Возможно, лендинг на Tilda под один продукт будет лучше огромного интернет-магазина. | |
| | Используйте аргументы, объясняя, почему ваше решение лучше, чем идея клиента «а давайте сделаем пять уровней меню и чтоб мигало, а еще чат для быстрой связи поставим». Опирайтесь на проверенные теории веба (например, 20-летний опыт топового спеца по интерфейсам Стива Круга), отработанные механики и привычные паттерны поведения пользователя на сайте. Всегда учитывайте метрики и статистику сайта, если взялись за его переработку. | |
| | До встречи в следующей рассылке. | |
| | | Ты всегда можешь отписаться здесь. Но помни: каждый раз, когда ты об этом думаешь, в мире грустит одна редакция. 2020 © ООО «СЕТТЕРС» | |
| |
