#дизайн_паттерны №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 | О книге

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

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

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

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

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

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