UX-гайд

uxguide Like 0

Авторский канал о проектировании пользовательского опыта и интерактивном дизайне. Дочерний проект @slashdesigner.

Автор: Саша Окунев @okunev, старший дизайнер в Газпромбанке.
Channel's geo & Language
Russian, Russian
Category
Design


Contact author
Channel's geo
Russian
Channel language
Russian
Category
Design
Added to index
26.06.2018 20:27
Recent update
11.12.2018 21:27
1 124
subscribers
~0
avg post reach
~51
daily reach
N/A
posts per day
N/A
ERR %
0.89
citation index
Recent posts
Удалённые
С упоминаниями
Forwards
UX-гайд 22 Sep, 13:27
Не переоценивай пользователя

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

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

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

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


#для_профи #AB
UX-гайд 22 Sep, 13:27
Не переоценивай пользователя
UX-гайд 19 Jul, 09:39
#дизайн_паттерны №4: Встряска для багрепорта

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

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

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

К счастью, iOS и Android отлично различают тряску в кармане и тряску в руке, так что сделать это случайно довольно проблематично.
UX-гайд 19 Jul, 09:39
Shake to report
UX-гайд 26 Jun, 21:06
Эксперимент интерактивности

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

medium.com/sketchdesigner/interaction-experiment-fe6c2c21c76e

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

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

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


#первые_шаги — рубрика для начинающих
UX-гайд 26 Jun, 21:04
medium.com/sketchdesigner/interaction-experiment-fe6c2c21c76e
UX-гайд 25 Apr, 21:00
#дизайн_паттерны №3: Поле ввода карты

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

sketchdesigner.ru/design/patterns/field-card

Для запроса на списание с карты нужны 4 поля: номер карты, срок действия (месяц и год), проверочный код CVC. Задача — максимально легко принять эти данные.

Ошибки
- Заставлять вводить имя держателя карты. Всегда ставлю там две буквы и канает.
- Не использовать tabindex. Горячие клавиши это важно.
- Множить поля. Больше полей = больше возни.

Как надо
- Стремиться к минимализму и лаконичности
- Использовать маски ввода
- Позволять вставлять номер карты в поле
- Использовать хитрость с анимацией, о которой расскажу в статье.
UX-гайд 25 Apr, 20:59
sketchdesigner.ru/design/patterns/field-card
UX-гайд 25 Apr, 20:45
Forwarded from: /designer
sketchdesigner.ru/design/black-patterns/popup-chat
UX-гайд 25 Apr, 20:45
Forwarded from: /designer
#чёрные_паттерны №1: Всплывающий чат

Выпускаю первую статью про неэтичные дизайн-решения. О личном пространстве пользователя, агрессивных продажах и уровнях мультизадачности.

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

Вывод: Правильный чат доступен по кнопке «Чат» или «Задать вопрос в чате», а не всплывает в лицо пользователю, загораживая контент. Хорошо, когда чат открывается как одна из страниц сайта. В крайнем случае, можно раскрывать попап-чат по клику. Таким образом, мы проявляем уважение и бережём нервы пользователя.


#проектирование
#для_профи — рубрика для прожжённых
UX-гайд 25 Apr, 20:44
Forwarded from: /designer
#дизайн_паттерны №:2 Баннер

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

sketchdesigner.ru/design/patterns/banner/

Изначально задумывал как статью для начинающих, но она пригодится и тем, кто сделал в своей жизни не одну сотню баннеров. Дизайнеры делают одни и те же ошибки: не используют кнопку ключевого действия, скрывают её на определённых слайдах и идут на поводу у заказчика и маркетологов, чтобы сделать баннер более заметным.

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


Чтобы сделать эффективный баннер, нужно:

1. Выделить информацию в отдельный от окружающего пространства контрастный блок

2. Сделать в нём понятное конкретное предложение

3. Сделать призыв к действию

4. Показать баннер тому, кому он нужен. И всё.


Вопросы, на которые должен отвечать баннер:

1. Что рекламируют?

2. Что делать?

3. Опционально: Кто рекламирует?

Баннер портят: крик, шок-контент, кликбейт, плохой таргет, плохая адаптация, слишком много баннеров на одной странице, слишком много контента в баннере, увод вникуда.


#для_профи — рубрика для прожжённых
UX-гайд 25 Apr, 20:44
Forwarded from: /designer
sketchdesigner.ru/design/patterns/landing
UX-гайд 25 Apr, 20:44
Forwarded from: /designer
#дизайн_паттерны №1: Лендинг

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

sketchdesigner.ru/design/patterns/landing

1. Делать фокус на торговое предложение
Ограничить выбор и дать понятный коробочный продукт, не отягощая лендинг кучей настроек и калькуляторов.

2. Использовать полноэкранные фотографии
Использовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране.

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

4. Быть готовым к целевому действию
Ничто не убивает доверие пользователя так быстро, как безответственность и ложь. Отвечать на звонки и в чат.

5. Замерять конверсию
Это отношение количества посетителей к количеству совершённых целевых действий.


Ошибки

1. Чаты в углу экрана
Если используются неправильно, очень портят дизайн. Если в них сразу не отвечают консультанты, мгновенно злят пользователей.

2. Слайдер скрывает важное
Слайдеры хороши только для показа дополнительного контента, который можно безболезненно пропустить.

3. Перегруз информации
Много букв не прочитают. Контента должно быть ровно столько, чтобы продать.

4. Блок «Поделиться»
Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Безжалостно избавляйся от мусора.


#первые_шаги — рубрика для начинающих
UX-гайд 25 Apr, 20:44
Forwarded from: /designer
sketchdesigner.ru/design/patterns/banner/
UX-гайд 25 Apr, 20:40
Привет. Это авторский канал дизайнера Саши Окунева о UX-проектировании. Канал возник как дочерний проект канала @sketchdesigner.
UX-гайд 4 Apr, 12:20
#начало
UX-гайд 12 Feb, 14:52