#дизайн_паттерны №: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. Горячие клавиши это важно.
- Множить поля. Больше полей = больше возни.

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

Эксперимент интерактивности

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

medium.com/sketchdesigner/interaction-experiment-fe6c2c21c76e

Этот базовый эксперимент позволяет продемонстрировать, как человек может контролировать интерфейс при помощи индикаторов и достигать поставленной задачи, либо терять контроль.

Разбираю возможные сценарии и привожу примеры из жизни.

#проектирование

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

Shake to report

#дизайн_паттерны №4: Встряска для багрепорта

В приложении vc.ru для Андроида обнаружил удачный паттерн: если человек злится на неработающий телефон, он трясёт его. Приложение спрашивает: что-то не так? Может, сообщим о проблеме?

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

Здесь смешок вызывает сама формулировка: «в фрустрации». Слишком напоминает плохой перевод с английского.

К счастью, iOS и Android отлично различают тряску в кармане и тряску в руке, так что сделать это случайно довольно проблематично.

Не переоценивай пользователя

Интерфейс, которым пользуются миллионы людей, должен быть максимально лобовым. Паттерны, скрывающие контент, понижают его понимание.

Представим банкомат. В его интерфейсе можно менять, с какой картой работает человек.

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

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

—
#для_профи #AB

Хороший перевод Брэда Фроста о формах входа

habr.com/ru/post/440948/

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

Да
1. В виде отдельной страницы со всеми полями
2. Просто, лаконично и предсказуемо
3. Прикрутите Google Sign-In

В оригинале на английском.

—
#для_профи #проектирование

PDF | О книге

О навигации на сайтах

Ответил на вопрос на Яндекс Знатоках:

Стоит ли делать вертикальное или горизонтальное меню на сайте?

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

Три основные вида навигации: горизонтальная, вертикальная скрытая и вертикальная явная. Примеры в полном ответе.

—
#первые_шаги #навигация