Привет. Это авторский канал дизайнера Саши Окунева о UX-проектировании. Канал возник как дочерний проект канала @sketchdesigner.

#дизайн_паттерны №1: Лендинг

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

sketchdesigner.ru/design/patterns/landing

1. Делать фокус на торговое предложение
Ограничить выбор и дать понятный коробочный продукт, не отягощая лендинг кучей настроек и калькуляторов.

2. Использовать полноэкранные фотографии
Использовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране.

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

4. Быть готовым к целевому действию
Ничто не убивает доверие пользователя так быстро, как безответственность и ложь. Отвечать на звонки и в чат.

5. Замерять конверсию
Это отношение количества посетителей к количеству совершённых целевых действий.


Ошибки

1. Чаты в углу экрана
Если используются неправильно, очень портят дизайн. Если в них сразу не отвечают консультанты, мгновенно злят пользователей.

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

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

4. Блок «Поделиться»
Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Безжалостно избавляйся от мусора.

—
#первые_шаги — рубрика для начинающих

#дизайн_паттерны №:2 Баннер

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

sketchdesigner.ru/design/patterns/banner/

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

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


Чтобы сделать эффективный баннер, нужно:

1. Выделить информацию в отдельный от окружающего пространства контрастный блок

2. Сделать в нём понятное конкретное предложение

3. Сделать призыв к действию

4. Показать баннер тому, кому он нужен. И всё.


Вопросы, на которые должен отвечать баннер:

1. Что рекламируют?

2. Что делать?

3. Опционально: Кто рекламирует?

Баннер портят: крик, шок-контент, кликбейт, плохой таргет, плохая адаптация, слишком много баннеров на одной странице, слишком много контента в баннере, увод вникуда.

—
#для_профи — рубрика для прожжённых

#чёрные_паттерны №1: Всплывающий чат

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

sketchdesigner.ru/design/black-patterns/popup-chat

Вывод: Правильный чат доступен по кнопке «Чат» или «Задать вопрос в чате», а не всплывает в лицо пользователю, загораживая контент. Хорошо, когда чат открывается как одна из страниц сайта. В крайнем случае, можно раскрывать попап-чат по клику. Таким образом, мы проявляем уважение и бережём нервы пользователя.

—
#проектирование
#для_профи — рубрика для прожжённых

#дизайн_паттерны №3: Поле ввода карты

Одна из самых болезненных вещей в интернете, которую приходится делать пользователям — ввод номера карты. В этой статье мы проанализируем ошибки других дизайнеров и спроектируем хорошее поле ввода.

sketchdesigner.ru/design/patterns/field-card

Для запроса на списание с карты нужны 4 поля: номер карты, срок действия (месяц и год), проверочный код CVC. Задача — максимально легко принять эти данные.

Ошибки
- Заставлять вводить имя держателя карты. Всегда ставлю там две буквы и канает.
- Не использовать tabindex. Горячие клавиши это важно.
- Множить поля. Больше полей = больше возни.

Как надо
- Стремиться к минимализму и лаконичности
- Использовать маски ввода
- Позволять вставлять номер карты в поле
- Использовать хитрость с анимацией, о которой расскажу в статье.