UX-гайд

О навигации на сайтах Ответил на вопрос на Яндекс Знатоках: Стоит ли делать вертикальное или горизонтальное меню на сайте? Кратко: это зависит от назначения сайта. Бывают информирующие и продающие, а бывают сервисные. Для первых больше подходит горизонтальная навигация, для вторых вертикальная, хотя есть оговорки. Три основные вида навигации: горизонтальная, вертикальная скрытая и вертикальная явная. Примеры в полном ответе. — #первые_шаги #навигация

PDF | О книге

Хороший перевод Брэда Фроста о формах входа habr.com/ru/post/440948/ Нет 1. Не помещать авторизацию в модальное окно, потому что нет прямой ссылки 2. Не скрывать поля, потому что автозаполнение паролей на них споткнётся 3. Не надо магических ссылок на почту, большая когнитивная нагрузка и не работает с менеджерами паролей 4. Нет смысла разделять форму входа на несколько страниц. Да 1. В виде отдельной страницы со всеми полями 2. Просто, лаконично и предсказуемо 3. Прикрутите Google Sign-In В оригинале на английском. — #для_профи #проектирование

Не переоценивай пользователя Интерфейс, которым пользуются миллионы людей, должен быть максимально лобовым. Паттерны, скрывающие контент, понижают его понимание. Представим банкомат. В его интерфейсе можно менять, с какой картой работает человек. В дизайне банкоматов Тинька есть красивое решение с выпадающим меню карт, А. Я от него был в восторге, ведь это так изящно. Однако, наши тесты на живых пользователях показали, что они просто не понимают, что в таком дизайне можно менять карты. Явная кнопка Сменить карту работает лучше, B. — #для_профи #AB

#дизайн_паттерны №4: Встряска для багрепорта В приложении vc.ru для Андроида обнаружил удачный паттерн: если человек злится на неработающий телефон, он трясёт его. Приложение спрашивает: что-то не так? Может, сообщим о проблеме? Целенаправленная тряска телефона — редкое поведение пользователя, как и ситуация, когда отправляешь репорт. В то же время, оно должно быть очень близко в интерфейсе, когда нужно сообщить что-то разработчикам, не переключая контекста. Близко настолько, что ничего не надо нажимать. Если человек знает о такой возможности, будет пользоваться. Здесь смешок вызывает сама формулировка: «в фрустрации». Слишком напоминает плохой перевод с английского. К счастью, iOS и Android отлично различают тряску в кармане и тряску в руке, так что сделать это случайно довольно проблематично.

Shake to report

Эксперимент интерактивности Смысл интерактивного дизайна в создании таких интерфейсов, которые эффективно решают задачи наших пользователей. medium.com/sketchdesigner/interaction-experiment-fe6c2c21c76e Этот базовый эксперимент позволяет продемонстрировать, как человек может контролировать интерфейс при помощи индикаторов и достигать поставленной задачи, либо терять контроль. Разбираю возможные сценарии и привожу примеры из жизни. #проектирование — #первые_шаги — рубрика для начинающих

#дизайн_паттерны №3: Поле ввода карты Одна из самых болезненных вещей в интернете, которую приходится делать пользователям — ввод номера карты. В этой статье мы проанализируем ошибки других дизайнеров и спроектируем хорошее поле ввода. sketchdesigner.ru/design/patterns/field-card Для запроса на списание с карты нужны 4 поля: номер карты, срок действия (месяц и год), проверочный код CVC. Задача — максимально легко принять эти данные. Ошибки - Заставлять вводить имя держателя карты. Всегда ставлю там две буквы и канает. - Не использовать tabindex. Горячие клавиши это важно. - Множить поля. Больше полей = больше возни. Как надо - Стремиться к минимализму и лаконичности - Использовать маски ввода - Позволять вставлять номер карты в поле - Использовать хитрость с анимацией, о которой расскажу в статье.