Привет. Это авторский канал дизайнера Саши Окунева о UX-проектировании. Канал возник как дочерний проект канала @sketchdesigner.
Forwarded from /designer
#дизайн_паттерны №1: Лендинг
Выпускаю первую статью для библиотеки дизайн-паттернов Скетч-дизайнера. В ней анализирую, какую проблему решают, каков механизм их работы, рекомендации и ошибки.
sketchdesigner.ru/design/patterns/landing
1. Делать фокус на торговое предложение
Ограничить выбор и дать понятный коробочный продукт, не отягощая лендинг кучей настроек и калькуляторов.
2. Использовать полноэкранные фотографии
Использовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране.
3. Сделать целевое действие очевидным и крупным
Когда пользователь решил сделать то что мы от него хотим, мы должны заткнуться и не мешать ему удобно пройти по сценарию продажи.
4. Быть готовым к целевому действию
Ничто не убивает доверие пользователя так быстро, как безответственность и ложь. Отвечать на звонки и в чат.
5. Замерять конверсию
Это отношение количества посетителей к количеству совершённых целевых действий.
Ошибки
1. Чаты в углу экрана
Если используются неправильно, очень портят дизайн. Если в них сразу не отвечают консультанты, мгновенно злят пользователей.
2. Слайдер скрывает важное
Слайдеры хороши только для показа дополнительного контента, который можно безболезненно пропустить.
3. Перегруз информации
Много букв не прочитают. Контента должно быть ровно столько, чтобы продать.
4. Блок «Поделиться»
Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Безжалостно избавляйся от мусора.
—
#первые_шаги — рубрика для начинающих
Выпускаю первую статью для библиотеки дизайн-паттернов Скетч-дизайнера. В ней анализирую, какую проблему решают, каков механизм их работы, рекомендации и ошибки.
sketchdesigner.ru/design/patterns/landing
1. Делать фокус на торговое предложение
Ограничить выбор и дать понятный коробочный продукт, не отягощая лендинг кучей настроек и калькуляторов.
2. Использовать полноэкранные фотографии
Использовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране.
3. Сделать целевое действие очевидным и крупным
Когда пользователь решил сделать то что мы от него хотим, мы должны заткнуться и не мешать ему удобно пройти по сценарию продажи.
4. Быть готовым к целевому действию
Ничто не убивает доверие пользователя так быстро, как безответственность и ложь. Отвечать на звонки и в чат.
5. Замерять конверсию
Это отношение количества посетителей к количеству совершённых целевых действий.
Ошибки
1. Чаты в углу экрана
Если используются неправильно, очень портят дизайн. Если в них сразу не отвечают консультанты, мгновенно злят пользователей.
2. Слайдер скрывает важное
Слайдеры хороши только для показа дополнительного контента, который можно безболезненно пропустить.
3. Перегруз информации
Много букв не прочитают. Контента должно быть ровно столько, чтобы продать.
4. Блок «Поделиться»
Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Безжалостно избавляйся от мусора.
—
#первые_шаги — рубрика для начинающих
Forwarded from /designer
#дизайн_паттерны №:2 Баннер
Сегодня поговорим об одном из самых одиозных паттернов, который часто используют неправильно.
sketchdesigner.ru/design/patterns/banner/
Изначально задумывал как статью для начинающих, но она пригодится и тем, кто сделал в своей жизни не одну сотню баннеров. Дизайнеры делают одни и те же ошибки: не используют кнопку ключевого действия, скрывают её на определённых слайдах и идут на поводу у заказчика и маркетологов, чтобы сделать баннер более заметным.
Проблема баннеров в том, что дизайнеры пытаются относиться к ним как к картинам и стремятся впихнуть в них как можно больше дизайна и элементов для привлечения внимания.
Чтобы сделать эффективный баннер, нужно:
1. Выделить информацию в отдельный от окружающего пространства контрастный блок
2. Сделать в нём понятное конкретное предложение
3. Сделать призыв к действию
4. Показать баннер тому, кому он нужен. И всё.
Вопросы, на которые должен отвечать баннер:
1. Что рекламируют?
2. Что делать?
3. Опционально: Кто рекламирует?
Баннер портят: крик, шок-контент, кликбейт, плохой таргет, плохая адаптация, слишком много баннеров на одной странице, слишком много контента в баннере, увод вникуда.
—
#для_профи — рубрика для прожжённых
Сегодня поговорим об одном из самых одиозных паттернов, который часто используют неправильно.
sketchdesigner.ru/design/patterns/banner/
Изначально задумывал как статью для начинающих, но она пригодится и тем, кто сделал в своей жизни не одну сотню баннеров. Дизайнеры делают одни и те же ошибки: не используют кнопку ключевого действия, скрывают её на определённых слайдах и идут на поводу у заказчика и маркетологов, чтобы сделать баннер более заметным.
Проблема баннеров в том, что дизайнеры пытаются относиться к ним как к картинам и стремятся впихнуть в них как можно больше дизайна и элементов для привлечения внимания.
Чтобы сделать эффективный баннер, нужно:
1. Выделить информацию в отдельный от окружающего пространства контрастный блок
2. Сделать в нём понятное конкретное предложение
3. Сделать призыв к действию
4. Показать баннер тому, кому он нужен. И всё.
Вопросы, на которые должен отвечать баннер:
1. Что рекламируют?
2. Что делать?
3. Опционально: Кто рекламирует?
Баннер портят: крик, шок-контент, кликбейт, плохой таргет, плохая адаптация, слишком много баннеров на одной странице, слишком много контента в баннере, увод вникуда.
—
#для_профи — рубрика для прожжённых
Forwarded from /designer
#чёрные_паттерны №1: Всплывающий чат
Выпускаю первую статью про неэтичные дизайн-решения. О личном пространстве пользователя, агрессивных продажах и уровнях мультизадачности.
sketchdesigner.ru/design/black-patterns/popup-chat
Вывод: Правильный чат доступен по кнопке «Чат» или «Задать вопрос в чате», а не всплывает в лицо пользователю, загораживая контент. Хорошо, когда чат открывается как одна из страниц сайта. В крайнем случае, можно раскрывать попап-чат по клику. Таким образом, мы проявляем уважение и бережём нервы пользователя.
—
#проектирование
#для_профи — рубрика для прожжённых
Выпускаю первую статью про неэтичные дизайн-решения. О личном пространстве пользователя, агрессивных продажах и уровнях мультизадачности.
sketchdesigner.ru/design/black-patterns/popup-chat
Вывод: Правильный чат доступен по кнопке «Чат» или «Задать вопрос в чате», а не всплывает в лицо пользователю, загораживая контент. Хорошо, когда чат открывается как одна из страниц сайта. В крайнем случае, можно раскрывать попап-чат по клику. Таким образом, мы проявляем уважение и бережём нервы пользователя.
—
#проектирование
#для_профи — рубрика для прожжённых
#дизайн_паттерны №3: Поле ввода карты
Одна из самых болезненных вещей в интернете, которую приходится делать пользователям — ввод номера карты. В этой статье мы проанализируем ошибки других дизайнеров и спроектируем хорошее поле ввода.
sketchdesigner.ru/design/patterns/field-card
Для запроса на списание с карты нужны 4 поля: номер карты, срок действия (месяц и год), проверочный код CVC. Задача — максимально легко принять эти данные.
Ошибки
- Заставлять вводить имя держателя карты. Всегда ставлю там две буквы и канает.
- Не использовать tabindex. Горячие клавиши это важно.
- Множить поля. Больше полей = больше возни.
Как надо
- Стремиться к минимализму и лаконичности
- Использовать маски ввода
- Позволять вставлять номер карты в поле
- Использовать хитрость с анимацией, о которой расскажу в статье.
Одна из самых болезненных вещей в интернете, которую приходится делать пользователям — ввод номера карты. В этой статье мы проанализируем ошибки других дизайнеров и спроектируем хорошее поле ввода.
sketchdesigner.ru/design/patterns/field-card
Для запроса на списание с карты нужны 4 поля: номер карты, срок действия (месяц и год), проверочный код CVC. Задача — максимально легко принять эти данные.
Ошибки
- Заставлять вводить имя держателя карты. Всегда ставлю там две буквы и канает.
- Не использовать tabindex. Горячие клавиши это важно.
- Множить поля. Больше полей = больше возни.
Как надо
- Стремиться к минимализму и лаконичности
- Использовать маски ввода
- Позволять вставлять номер карты в поле
- Использовать хитрость с анимацией, о которой расскажу в статье.
Эксперимент интерактивности
Смысл интерактивного дизайна в создании таких интерфейсов, которые эффективно решают задачи наших пользователей.
medium.com/sketchdesigner/interaction-experiment-fe6c2c21c76e
Этот базовый эксперимент позволяет продемонстрировать, как человек может контролировать интерфейс при помощи индикаторов и достигать поставленной задачи, либо терять контроль.
Разбираю возможные сценарии и привожу примеры из жизни.
#проектирование
—
#первые_шаги — рубрика для начинающих
Смысл интерактивного дизайна в создании таких интерфейсов, которые эффективно решают задачи наших пользователей.
medium.com/sketchdesigner/interaction-experiment-fe6c2c21c76e
Этот базовый эксперимент позволяет продемонстрировать, как человек может контролировать интерфейс при помощи индикаторов и достигать поставленной задачи, либо терять контроль.
Разбираю возможные сценарии и привожу примеры из жизни.
#проектирование
—
#первые_шаги — рубрика для начинающих
Medium
Эксперимент интерактивности
Смысл интерактивного дизайна в создании таких интерфейсов, которые эффективно решают задачи человека.
#дизайн_паттерны №4: Встряска для багрепорта
В приложении vc.ru для Андроида обнаружил удачный паттерн: если человек злится на неработающий телефон, он трясёт его. Приложение спрашивает: что-то не так? Может, сообщим о проблеме?
Целенаправленная тряска телефона — редкое поведение пользователя, как и ситуация, когда отправляешь репорт. В то же время, оно должно быть очень близко в интерфейсе, когда нужно сообщить что-то разработчикам, не переключая контекста. Близко настолько, что ничего не надо нажимать. Если человек знает о такой возможности, будет пользоваться.
Здесь смешок вызывает сама формулировка: «в фрустрации». Слишком напоминает плохой перевод с английского.
К счастью, iOS и Android отлично различают тряску в кармане и тряску в руке, так что сделать это случайно довольно проблематично.
В приложении vc.ru для Андроида обнаружил удачный паттерн: если человек злится на неработающий телефон, он трясёт его. Приложение спрашивает: что-то не так? Может, сообщим о проблеме?
Целенаправленная тряска телефона — редкое поведение пользователя, как и ситуация, когда отправляешь репорт. В то же время, оно должно быть очень близко в интерфейсе, когда нужно сообщить что-то разработчикам, не переключая контекста. Близко настолько, что ничего не надо нажимать. Если человек знает о такой возможности, будет пользоваться.
Здесь смешок вызывает сама формулировка: «в фрустрации». Слишком напоминает плохой перевод с английского.
К счастью, iOS и Android отлично различают тряску в кармане и тряску в руке, так что сделать это случайно довольно проблематично.
Не переоценивай пользователя
Интерфейс, которым пользуются миллионы людей, должен быть максимально лобовым. Паттерны, скрывающие контент, понижают его понимание.
Представим банкомат. В его интерфейсе можно менять, с какой картой работает человек.
В дизайне банкоматов Тинька есть красивое решение с выпадающим меню карт, А. Я от него был в восторге, ведь это так изящно.
Однако, наши тесты на живых пользователях показали, что они просто не понимают, что в таком дизайне можно менять карты. Явная кнопка Сменить карту работает лучше, B.
—
#для_профи #AB
Интерфейс, которым пользуются миллионы людей, должен быть максимально лобовым. Паттерны, скрывающие контент, понижают его понимание.
Представим банкомат. В его интерфейсе можно менять, с какой картой работает человек.
В дизайне банкоматов Тинька есть красивое решение с выпадающим меню карт, А. Я от него был в восторге, ведь это так изящно.
Однако, наши тесты на живых пользователях показали, что они просто не понимают, что в таком дизайне можно менять карты. Явная кнопка Сменить карту работает лучше, B.
—
#для_профи #AB
Хороший перевод Брэда Фроста о формах входа
habr.com/ru/post/440948/
Нет
1. Не помещать авторизацию в модальное окно, потому что нет прямой ссылки
2. Не скрывать поля, потому что автозаполнение паролей на них споткнётся
3. Не надо магических ссылок на почту, большая когнитивная нагрузка и не работает с менеджерами паролей
4. Нет смысла разделять форму входа на несколько страниц.
Да
1. В виде отдельной страницы со всеми полями
2. Просто, лаконично и предсказуемо
3. Прикрутите Google Sign-In
В оригинале на английском.
—
#для_профи #проектирование
habr.com/ru/post/440948/
Нет
1. Не помещать авторизацию в модальное окно, потому что нет прямой ссылки
2. Не скрывать поля, потому что автозаполнение паролей на них споткнётся
3. Не надо магических ссылок на почту, большая когнитивная нагрузка и не работает с менеджерами паролей
4. Нет смысла разделять форму входа на несколько страниц.
Да
1. В виде отдельной страницы со всеми полями
2. Просто, лаконично и предсказуемо
3. Прикрутите Google Sign-In
В оригинале на английском.
—
#для_профи #проектирование
Хабр
Не умничайте с формами для входа
В последнее время меня начинает сильно раздражать авторизация на сайтах. Поскольку менеджеры паролей становятся более популярными, такие как 1Password (который я...
О навигации на сайтах
Ответил на вопрос на Яндекс Знатоках:
Стоит ли делать вертикальное или горизонтальное меню на сайте?
Кратко: это зависит от назначения сайта. Бывают информирующие и продающие, а бывают сервисные. Для первых больше подходит горизонтальная навигация, для вторых вертикальная, хотя есть оговорки.
Три основные вида навигации: горизонтальная, вертикальная скрытая и вертикальная явная. Примеры в полном ответе.
—
#первые_шаги #навигация
Ответил на вопрос на Яндекс Знатоках:
Стоит ли делать вертикальное или горизонтальное меню на сайте?
Кратко: это зависит от назначения сайта. Бывают информирующие и продающие, а бывают сервисные. Для первых больше подходит горизонтальная навигация, для вторых вертикальная, хотя есть оговорки.
Три основные вида навигации: горизонтальная, вертикальная скрытая и вертикальная явная. Примеры в полном ответе.
—
#первые_шаги #навигация