Часто творчество мешает сделать интерфейс понятным. Дизайнеры (и их можно понять), пытаются вложить максимум фантазии в разработку, чтобы сделать проект индивидуальным, но это не всегда идет на пользу продукту. Мы школа веб-дизайна Yudaev School, и сегодня хотим поделиться частью накопленных знаний на тему создания простого и понятного интерфейса.
- Исследуйте свою целевую аудиторию
Это истина, которой надо придерживаться при создании любого продукта. Восхитительный пример неправильной работы с ЦА от Вкусвилла, которые хотели усидеть на двух стульях, но у них так и не получилось.
Что вам нужно знать о своей ЦА?
- Социально-демографический портрет: пол, возраст, уровень дохода, статус, семейное положение, профессия;
- Какую «боль» клиента решит товар?
- Какие эмоции человек испытает после получения услуги или товара? Он станет богаче, счастливей, отдохнет или станет более здоровым
- В чем главное преимущество компании перед конкурентами?
Вот как может выглядеть примерный портрет потенциального клиента для школы дизайна:
Студенты в возрасте от 18 до 25 лет, уровень дохода — до 30 тыс. в месяц, но хочется больше. Главная цель — поиск работы или новой профессии. Характеристика обучения — можно отучиться быстро и заниматься по свободному графику.
Где взять всю эту информацию?
Часть предоставит клиент, потому что уж он-то должен понимать, на кого рассчитан лендинг. Плюс, вы можете посмотреть сайты конкурентов или воспользоваться открытыми источниками с опросами:
От проведенного исследования будут зависеть болевые точки, в которые вы будете бить дизайном. Например, на стартовой странице будет информация по длительности курса, поскольку для клиента важно получить профессию быстро, а в углу экрана появится оповещение «купить в рассрочку».
2. Идея
Не стоит забывать, что люди очень ленивые и разбираться в чем-то принципиально новом они просто не захотят и закроют сайт.
Вам нужно определиться с главами героями. Что именно вы продаете: эмоции, товар или результат? В примере сайта ниже пользователю продается результат, который он получит по окончанию курса.
После определения главного героя надо продумать остальные элементы дизайна. Тут есть небольшая подсказка — разделить историю на три нити повествования: функциональную, социальную и эмоциональную. То есть ни один элемент не должен быть с бухты барахты.
3. Правила создания макета
Ниже собраны правила, которые помогут в создании интерфейса.
Правило третей
Экран делится двумя горизонтальными и двумя вертикальными полосами на одинаковые 9 частей. Именно в месте пересечений этих линий будет останавливаться взгляд пользователя. Здесь мы размещаем самую важную информацию.
Направление взгляда пользователя
Считается, что люди просматривают сайты двумя разными способами: по принципу Z (нет, не той Z) и F.
При просмотре страницы человек пробегает глазами слева направо, далее по диагонали вниз и еще раз слева направо. Второй вариант: сначала сверху вниз, потом дважды слева направо.
Понимание этого принципа поможет вам разместить важную информацию в наиболее просматриваемых зонах, то есть разбросать ее по углам лендинга.
Взаимное расположение объектов и кнопок
Исследования доказали, что конверсия магическим образом повышается, если последняя точка клика и кнопка действия находятся рядом. Представьте, что пользователь зашел в раздел и начать листать страницу, кнопку «купить» нужно расположить в месте примерного расположения курсора, чтобы человек быстрее на нее нажал.
То же самое, кстати, работает в обратном порядке. Если есть нежелательная кнопка (например, «удалить»), ее можно расположить в максимальном удалении от места последнего клика.
Еще одна магия психологии
Самые важные кнопки лучше располагать в углу страницы. Это связано ограничением пространства: чем меньше шансов промахнуться, тем больше вероятности, что на кнопку нажмут.
Если такое расположение не подходит по задумке дизайна, то кнопку можно выделить с помощью цвета или увеличить ее размер. Принцип тот же: чем больше выделяется кнопка, тем быстрее на нее нажмут.
Сложно не значит хорошо
Дизайн не должен отбирать слишком много внимания. Например, иконки лучше делать максимально простыми, чтобы человек не тратил время на понимание их значений.
Графический ритм
Ритм — это чередование акцентов и пауз. При выявлении каких-то закономерностей наш мозг получается удовольствие, поэтому нам приятно смотреть за ритмически одинаковой графикой.
Конечно, правил создания сайта гораздо больше, даже библиотека вашего дедушки нервно курит в сторонке по сравнению с бесконечным количеством учебных пособий по дизайну. Мы хотим лишь донести, что проще = лучше, потому что понятней.
Главная ошибка дизайнеров — отожествление себя и целевой аудитории. Увы, но люди, которые будут пользоваться вашими сайтами вероятнее всего даже на 50% не разбираются в дизайне также хорошо как вы. Наша с вами задача — объяснить все еще до того, как возникнут вопросы.