UX-гайд

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

Shake to report

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

medium.com/sketchdesigner/interaction-experiment-fe6c2c21c76e

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

sketchdesigner.ru/design/patterns/field-card

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

#чёрные_паттерны №1: Всплывающий чатВыпускаю первую статью про неэтичные дизайн-решения. О личном пространстве пользователя, агрессивных продажах и уровнях мультизадачности.sketchdesigner.ru/design/black-patterns/popup-chatВывод: Правильный чат доступен по кнопке «Чат» или «Задать вопрос в чате», а не всплывает в лицо пользователю, загораживая контент. Хорошо, когда чат открывается как одна из страниц сайта. В крайнем случае, можно раскрывать попап-чат по клику. Таким образом, мы проявляем уважение и бережём нервы пользователя.—#проектирование#для_профи — рубрика для прожжённых

#дизайн_паттерны №:2 БаннерСегодня поговорим об одном из самых одиозных паттернов, который часто используют неправильно.sketchdesigner.ru/design/patterns/banner/Изначально задумывал как статью для начинающих, но она пригодится и тем, кто сделал в своей жизни не одну сотню баннеров. Дизайнеры делают одни и те же ошибки: не используют кнопку ключевого действия, скрывают её на определённых слайдах и идут на поводу у заказчика и маркетологов, чтобы сделать баннер более заметным.Проблема баннеров в том, что дизайнеры пытаются относиться к ним как к картинам и стремятся впихнуть в них как можно больше дизайна и элементов для привлечения внимания.Чтобы сделать эффективный баннер, нужно:1. Выделить информацию в отдельный от окружающего пространства контрастный блок2. Сделать в нём понятное конкретное предложение3. Сделать призыв к действию4. Показать баннер тому, кому он нужен. И всё.Вопросы, на которые должен отвечать баннер:1. Что рекламируют?2. Что делать? 3. Опционально: Кто рекламирует?Баннер портят: крик, шок-контент, кликбейт, плохой таргет, плохая адаптация, слишком много баннеров на одной странице, слишком много контента в баннере, увод вникуда.—#для_профи — рубрика для прожжённых

sketchdesigner.ru/design/patterns/landing

#дизайн_паттерны №1: ЛендингВыпускаю первую статью для библиотеки дизайн-паттернов Скетч-дизайнера. В ней анализирую, какую проблему решают, каков механизм их работы, рекомендации и ошибки.sketchdesigner.ru/design/patterns/landing1. Делать фокус на торговое предложениеОграничить выбор и дать понятный коробочный продукт, не отягощая лендинг кучей настроек и калькуляторов.2. Использовать полноэкранные фотографииИспользовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране.3. Сделать целевое действие очевидным и крупнымКогда пользователь решил сделать то что мы от него хотим, мы должны заткнуться и не мешать ему удобно пройти по сценарию продажи.4. Быть готовым к целевому действиюНичто не убивает доверие пользователя так быстро, как безответственность и ложь. Отвечать на звонки и в чат.5. Замерять конверсиюЭто отношение количества посетителей к количеству совершённых целевых действий. Ошибки1. Чаты в углу экранаЕсли используются неправильно, очень портят дизайн. Если в них сразу не отвечают консультанты, мгновенно злят пользователей.2. Слайдер скрывает важноеСлайдеры хороши только для показа дополнительного контента, который можно безболезненно пропустить.3. Перегруз информацииМного букв не прочитают. Контента должно быть ровно столько, чтобы продать.4. Блок «Поделиться»Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Безжалостно избавляйся от мусора.—#первые_шаги — рубрика для начинающих

sketchdesigner.ru/design/patterns/banner/

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

#начало

Channel created