UX Notes
24.8K subscribers
59 photos
3 videos
1 file
1.17K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes
Чат читателей: @uxnoteschat
О карьере в UX-дизайне и вакансии: @uxwork

Рекламодателям: uxnotes.ru/ads · В перечне РКН: gosuslugi.ru/snet/67a9a56970de7b4d761a81ae

Est. 2016 · Автор: @zGrav
Download Telegram
Имран Парвез написал о проектировании настроек.

— Если пользователи часто что-то меняют при использовании продукта, не убирайте соответствующий переключатель в настройки;
— Если определённое поведение продукта подходит 80% пользователей и не вредит остальным 20%, заточите продукт под большинство и уберите настройку этого поведения;
— Если остальным 20% вредит (или вы не уверены), оставьте настройку;
— Добавьте в раздел с настройками поиск;
— Сгруппируйте настройки по частоте использования (основные настройки и дополнительные), по типам (общие, безопасность, приватность и так далее);
— Добавьте вспомогательный текст для всех неочевидных настроек;
— Предложите пользователю сделать ключевые настройки при первом запуске продукта.

https://ux-journal.ru/proektiruem-nastrojki.html
Михаил Хананашвили написал о терминах в сфере UX-дизайна.

Споры о терминах замедляют внедрение соответствующих ценностей в компаниях. Возникает противостояние между CX-, Service- и UX-дизайнерами.

Дональд Норман: UX-специалист — специалист, который не только работает с пользователем, но и способен менять процессы под пользовательский путь.

Он работает:
— Над бизнесом и процессами. Той частью, которая напрямую или косвенно влияет на пользовательский опыт;
— Взаимодействием с пользователем (интерактивный дизайн). Классические измерения интерактивного дизайна: текст, визуальное представление, физические объекты, контекст, время, поведение;
— Продуктом. Всё, что с ним связано, включая конкурентов и стратегию развития;
— Пользовательским интерфейсом (UI).

Из-за неправильного понимания термина:
— В отдельных сферах деятельности (будь то дизайн или маркетинг) UX-дизайн называют своей частью, что ограничивает его полезность;
— UX-дизайнерами называют необученных графических дизайнеров (даёт +25% к зарплате);
— Появляется стремление разделить, например, дизайн и исследования как взаимоисключающие навыки. С другой стороны в одном человеке пытаются объединить несколько ролей;
— Ошибочно считают, что UX-дизайн — это дизайн исключительно взаимодействия с пользователем, так называемых тачпоинтов (точек касания).

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

https://habr.com/ru/post/528720/
Гаррет Кролл написал, какие вопросы может задать дизайнер, чтобы сделать свою работу лучше.

Из интересных и не самых очевидных:

1. На первой встрече с заказчиком:
— Почему ваш продукт важен вашим клиентам? Почему им не всё равно?
— Чем мы лучше конкурентов?
— Есть ли какая-нибудь значимая документация (персоны, User Flow и так далее)?

2. В разговоре с заинтересованными лицами:
— Что в продукте самое важное? Что нужно сделать классно, чтобы игра вообще стоила свеч?
— Из того, что вы пробовали, что сработало и нет?
— Что вас беспокоит в этом проекте?

3. Во время пользовательского исследования:
— Вы пробовали искать обходные пути, столкнувшись проблемой (задачей), которую мы пытаемся решить?
— Что самое неприятное в этой проблеме (задаче)?

4. Во время тестирования и итогового обсуждения впечатлений:
— Какой была ваша первая реакция на продукт?
— Будь у вас волшебная палочка, что бы вы поменяли?

https://ux-journal.ru/100-questions-ux-analysis-html.html
Опубликованы видео с World Usability Day 2020 (секция UsabilityLab):

1. Наталья Спрогис, Mail.ru Group — UX-культура в компании. Как сделать так, чтобы результаты исследований применялись
youtube.com/watch?v=O2Oyq4E-4uQ

2. Алина Ермакова, Сбер — Новые способы взаимодействия устройств и людей: новые вызовы для UX
youtube.com/watch?v=gYc1tOuSxDQ

3. Татьяна Чернявская, UsabilityLab — Зачем исследователю или аналитику изучать Figma: топ-3 фишек программы
youtube.com/watch?v=pdNB7Gifj8U

4. Дарья Хлопова, Сбер — Количественная валидация проблем из юзабилити-тестов
youtube.com/watch?v=7ksDufHNybE

5. Вячеслав Степанов, UXCrowd — Особенности юзабилити-тестирования прототипов. Проблемы и решения
youtube.com/watch?v=xO7uUTo6N8o

6. Катерина Умнова — Проектирование игры для корейских подростков
youtube.com/watch?v=h7X75wWGgOY

7. Алексей Черношейкин, UsabilityLab — Как общаться с респондентами
youtube.com/watch?v=tJVKCyeWNJI

8. Руслан Саввотин, Ostrovok.ru — Особенности исследования B2B-продуктов. Отличия от B2C и интересные приёмы
youtube.com/watch?v=a9FdrLaP2-k

9. Анна Минаева, UsabilityLab — Доступность банковских приложений: проблемные кейсы и удачные решения
youtube.com/watch?v=_owjWTMVxnM

10. Элли Пономарева, JetBrains — Этика в UX-исследованиях: основные гайдлайны и лучшие практики
youtube.com/watch?v=GdDSUx4QnOc

11. Наталья Кох, Тинькофф Банк — Как UX-дизайн заменить опросами и аналитикой или есть ли в этом плюсы?
youtube.com/watch?v=QZuZS5IREsA

12. Ольга Алтабаева, UsabilityLab — Быстрые методы исследований
youtube.com/watch?v=SO1GkypqXYI

Все видео в одном:
— Плейлисте YouTube: youtube.com/playlist?list=PLBo8MRRVVqLPiPxP-UE4AnXGsjaNbbD5L
— Альбоме ВК: vk.com/videos-50773057?section=album_43
Максим Панфилов написал о нестандартных функциях в корзине и при оформлении заказа в интернет-магазинах.

1. Создание дополнительных корзин. Если пользователь нашёл идеальный подарок, а Новый год ещё далеко, можно добавить его в новогоднюю корзину. Подойдёт магазинам с широким ассортиментом.

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

3. Изменение характеристик выбранного товара прямо в корзине.

4. Получение товара со склада с дополнительной скидкой. Подойдёт тем, у кого есть офлайновые магазины.

5. Заказ доставки на такси. Подойдёт для негабаритных товаров.

https://vc.ru/design/173125
👍1
Брайан Ловин написал, как защитить пользователя от ошибки.

1. Автоматически сохраняйте введённые им данные. Добавьте возможность создания черновиков.

2. Предупреждайте, если пользовательское действие приведёт к потере данных. Запрашивайте подтверждение этого действия.

3. Давайте возможность отменить только что совершённое действие. Например, с помощью кнопки «Отменить», появляющейся на время. Невозвратные действия тоже можно отменять, если предусмотреть для них отложенное выполнение. Пример: отмена отправки письма в Gmail.

4. Анализируйте пользовательский контент. Gmail отображает предупреждение, если пользователь написал о прикреплённых файлах, но ничего не прикрепил перед отправкой письма. Проверяйте, есть ли в публикуемых данных что-то потенциально непубличное вроде паролей и ключей API.

5. Предупреждайте о высоком уровне громкости, возрастных и прочих ограничениях перед отображением содержимого.

6. Предупреждайте пользователя перед публикацией потенциально ложной информации (см. Твиттер) или токсичных комментариев (см. Инстаграм).

https://ux.pub/dizayn-prizvannyy-zaschitit-lyudey-ot-samih-sebya/
Игорь Штанг написал о стыковке плашек и линеек (с примерами).

1. Если две линейки оказались рядом, можно превратить их в одну. Даже если это часть стиля, стоит подумать о сокращении количества линеек.

2. Если встретились линейка и плашка, линейка должна исчезнуть, ведь у плашки есть своя граница.

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

4. Плашки разного цвета или фактуры стыкуются вплотную.

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

6. Если блоки должны выглядеть самостоятельными и не хочется ставить их близко, появляется пустой этаж. На него можно добавить дополнительный элемент — прослойку. Это может быть полноценный блок или заголовок нижнего этажа над плашкой.

https://awdee.ru/matching-rulers-and-dies/
👍1
Опубликованы видео с World Usability Day 2020 (секция Альфа-Банка):

1. Якоб Нильсен, Nielsen Norman Group — UX 2050
worldusabilityday.ru/alfabank/ (2-е видео в плеере)

2. Джордж Хелд, Билайн — Как AI/UX спасает физическую жизнь
youtube.com/watch?v=G7Dg5pGkd2Q

3. Юрий Ветров, Райффайзенбанк — Связь бренда с интерфейсом
youtube.com/watch?v=l_utXHNr3Wc

4. Алексей Овчаров, Sense Machine — Измерение эмоционального отклика на интерфейс или как узнать, пахнет ли ваше приложение булочками с корицей
youtube.com/watch?v=tkh5l_iTxdM

5. Алена Свергуненко, Альфа-Банк — UX-технологии в пути клиента
youtube.com/watch?v=YWItYKH055s

6. Анна Пилютик, Альфа-Банк — Тренды в UX
youtube.com/watch?v=ALP3r0SrJuU

7. Дмитрий Соловьев, Qiwi — Как на интервью говорить про деньги: практические приёмы
youtube.com/watch?v=fj_6amKqJ-A

8. Алексей Копылов — Обработка финальной CJM в Airtable
youtube.com/watch?v=AXymzHWS5Sk

9. Роман Черных, РШСД — Сервисный UXD: дорожная карта изучения
youtube.com/watch?v=vkBwvpP73yQ

Все видео на одном сайте: worldusabilityday.ru/alfabank/

Видео без Якоба Нильсена:
— В плейлисте YouTube: youtube.com/playlist?list=PLBo8MRRVVqLPiPxP-UE4AnXGsjaNbbD5L
— Альбоме ВК: vk.com/videos-50773057?section=album_44
Киннерет Ифра написала о тексте в диалоговых окнах подтверждения.

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

Если пользователь скорее всего знает, что делает, можно не показывать диалог, но дать возможность отменить действие.

Решая, показывать диалог или нет, учтите:
— Обратимость действия;
— Важность последствий;
— Сложность отмены. Например, действие приведёт к изменению настроек других устройств;
— Частотность действия. Постоянное подтверждение становится пользовательской привычкой и перестаёт работать.

Заголовок:
— В заголовке сообщите о действии, которое надо подтвердить. «Вы уверены?» → «Удалить проект?»;
— Сделайте его вопросом, на который можно дать 2 взаимоисключающих ответа;
— Удалите лишние вступления: «Вы уверены…», «Это действие приведет к…», «Вы действительно…»;
— Особое внимание обратите на диалоги, связанные с отменой чего-либо. Примеров таких диалогов с кнопками «Отменить · Отмена» много, ещё один будет лишним.

Пояснение (текст под заголовком):
— Если к заголовку добавить нечего, текст пояснения не нужен;
— Добавьте его, если действие влияет на связанные элементы и настройки, другие учётные записи и устройства. Чем важнее действие и сложнее отмена, тем нужнее пояснение;
— Если опасаетесь, что пользователь пропустит пояснение, вынесите важные детали в заголовок: «Удалить папку и всё её содержимое?»;
— Сообщите, если действие необратимо: «Удалить папку и всё её содержимое без возможности восстановления?»;
— Если кроме удаления есть другое решение проблемы, расскажите о нём в пояснении.

Кнопки:
— Можно добавить название действия в надписи на кнопках: «Да, отправить», «Всё равно выйти»;
— Используйте в заголовке и на кнопках одни и те же слова: «Деактивировать ключ лицензии? · Да, деактивировать · Отмена».

https://habr.com/ru/company/directum/blog/530770/
Константин Ефимов написал об ошибках при проведении глубинного интервью. Например:

Принятие декларативных ответов за реальные:
— Исследователь фокусируется на представлениях респондента о продукте и отношении к нему, игнорирует реальный опыт, не исследует ситуации использования продукта;
— Не уточняет, насколько реалистично, что респондент будет пользоваться функциональностью, которую тот просит добавить в продукт;
— Не вычленяет социально желательные ответы, не проверяет декларации на реалистичность.

Процедурные нарушения:
— Исследователь не делает заметки, не ведёт запись;
— Опаздывает на интервью, не соблюдает временные рамки;
— Не отключает звук на своём телефоне;
— Отвлекается на телефон или ноутбук, переписывается параллельно с интервью;
— Не называет код тестируемого образца (создаёт проблемы при анализе результатов).

https://vc.ru/marketing/178315
Эдуард Христусь написал об объектно-ориентированном дизайне.

ООД помогает:
1. Понять, с чего начать. Если проектируете приложение для заказа котиков с доставкой, в нём наверняка будут сущности: «пользователь», «заказ» и «котик». С ними будут связаны определённые параметры и способы взаимодействия;
2. Сэкономить. Прототипирование — дорогой и сложный подпроцесс проектирования. Генерировать и отметать идеи в прототипе не эффективно;
3. Создать MVP;
4. Всей команде равномерно двигаться при декомпозиции проекта. Сначала объекты, потом способы взаимодействия с ними.

Процесс:
1. Выявите все объекты системы. Помогут пользовательские истории;
2. Определите параметры объектов и их связи. Помогут: брейншторм внутри команды и с заказчиком, профили пользователей (их сценарии и цели). Надо понять, чего от объекта хотел бы пользователь: какую информацию узнать, какие действия совершить;
3. Определите способы взаимодействия с объектами (функции);
4. Укажите свойства параметров. Например: автоматический параметр (проставляется системой автоматически), фильтруемый (используется для фильтрации списка объектов), ручной (задаётся вручную пользователем или администратором) и так далее;
5. Укажите свойства функций. Например: доступные без ограничений, доступные с ограничениями;
6. Покажите наборы параметров и функций для разных состояний объекта. Например: закрытую вакансию можно только посмотреть.

Не стоит применять ООД для небольших корпоративных сайтов из нескольких страниц.

#ooux
В Canvs Editorial написали, как мотивировать пользователя завершить начатое.

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

Например:
— На карточке накопления 10 штампов для получения бесплатной услуги 2 штампа поставлены по умолчанию;
— Пользователь только зарегистрировался, но уже на 20% заполнил свой профиль.

Эффекты:
— Человек понимает, что начал выполнять задачу, и мысленно возвращается к ней, пока не завершит её (эффект Зейгарник);
— Чем человек ближе к цели, тем больше он хочет её достичь (эффект градиента цели);
— Визуальное представление цели и оставшегося пути помогает в её достижении (эффект визуализации цели).

https://ux.pub/kak-motivirovat-polzovatelya-zakonchit-progress-effekt-obespechennogo-progressa/
Джон Сайто написал о метафорах в интерфейсе.

Метафора — употребление слова или выражения в переносном смысле на основе аналогии, сходства или сравнения.

Шестерёнка — метафора настроек. Продуктовая корзина — метафора заказа. В сравнении сайтов с книгами работают метафоры «Добавить в закладки», «Опубликовать», в сравнении с домами — «Войти как гость», «Домашняя страница». Уже сложился набор понятных всем метафор для взаимодействия в интернете.

Есть необычные метафоры. Например, на Медиуме статьи сравнивают с шоу: читатели реагируют на статьи аплодисментами и хлопками, у авторов появляются фанаты.

Хорошо, если при выборе метафоры можно провести параллели с реальным миром. Чем метафора абстрактнее, тем сложнее её понять.

Есть тяжёлые метафоры, когда за одним элементом скрывается много разных смыслов. Например, кнопка Share в iOS.

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

https://ux-journal.ru/metafory-i-analogii-v-produktovom-dizajne.html
Олег Биргер написал о развитии клиентского опыта (на примере «Газпромнефти»).

«У нас есть постоянные клиенты, они каждый день ездят на работу и через день заправляются: им так удобно. И наша задача — не продавать этим людям топливо, а помогать им добираться. Фокус с количества проданного топлива должен сдвигаться на то, скольким людям в этом месяце мы помогли доехать до работы. Потому что проданное топливо — это следствие ежедневного физического передвижения людей.

Мы должны сопровождать перемещение клиентов любыми способами, тогда они будут больше у нас покупать. Мы должны визуализировать процесс того, как человек выходит из дома, заводит машину, едет на работу, отвозит детей в школу. Если у него машина не заведётся, то он не заправится у нас. Если у него страховки нет, и его увезли на штрафстоянку, то он не заправится. Если шины не поменял и в аварию попал, то он не заправится. Мы должны сопровождать клиентов максимально подробно на всех этапах, где только можем, и делать это нужно с выгодой для бизнеса».

https://habr.com/ru/company/gazpromneft/blog/531232/
Максим Жуков написал о фильтрации в интернет-магазинах.

— Предложите пользователю выбрать категорию, а уже потом фильтровать. Список категорий может располагаться над фильтрами или над списком товаров;
— Предоставьте уникальный набор фильтров для выбранной категории. Пользователей обычно интересуют уникальные параметры: для телевизоров — диагональ, для гидрокостюмов — толщина неопрена;
— Если параметр товара настолько важен, что отображается в списке товаров, дайте возможность по нему фильтровать;
— Добавьте тематические фильтры. Например: по стилю, времени года и так далее. Потребуется дополнительная разметка товаров, но покупатели это оценят;
— Добавьте параметр совместимости товаров (особенно в сегменте электроники и бытовой техники). Выбор таких товаров как запчасти, расходные материалы и аксессуары определяется совместимостью;
— Не показывайте длинные списки из параметров фильтрации. Покажите самые популярные, а остальные отображайте после нажатия на специальный контрол;
— Добавьте поиск в длинный список значений параметра фильтрации;
— Отобразите значения применённых параметров фильтрации. Дайте возможность их быстро удалить;
— Добавьте подсказки к значениям параметров фильтрации;
— Если пользователь настроил фильтры так, что ни один из товаров не подходит, не показывайте нулевые результаты фильтрации. Исключите последний применённый параметр фильтрации или отобразите соответствующие значения в фильтре неактивными.

#filter
Екатерина Авакова написала, что делать в сложных ситуациях на глубинном интервью.

1. Респондент говорит обо всём, кроме того, что нужно;
2. Респондент отвечает односложно, не раскрывая подробностей;
3. В рассказе постепенно появляются детали, в которых теряется и интервьюер, и респондент;
4. Придуманный на ходу вопрос уводит обсуждение в сторону;
5. Структура вопросника задаёт рамки беседы, которые мешают рассуждениям респондента.

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

Респондент может:
— Решить, что вы невнимательны, и потерять интерес к интервью;
— Запутаться в должностях, компаниях и продуктах, и вы придёте к неправильным выводам при разборе интервью.

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

https://medium.com/userhouse/e72ec6a64b1d
Собрал самые популярные публикации UX Notes по числу лайков и репостов в ВК за прошедший год.

В топ-20 попали:
— 8 подборок записей докладов с мероприятий: UX-марафон, World Usability Day, митап «Инклюзивный дизайн», митап «Гибридный дизайнер», G8, ProfsoUX, митап «Сила взаимодействия;
— 6 переводов статей: Майтрик Катария, Дэнни Сапио, Тарас Бакусевич, Гаррет Кролл, Том Кенни, Джордж Кейв;
— 5 оригинальных статей: Павел Шерер, Павел Голюдов, Евгений Игнашов, Максим Жуков, Дарья Дундукова;
— 1 видео: Пабло Стэнли.

Спасибо, что читаете и рекомендуете @uxnotes знакомым дизайнерам и проектировщикам. Спасибо авторам полезных и интересных материалов.

https://vandergrav.ru/popular-ux-notes-2020/
В Mojo написали, как сделать удобный интерфейс для пожилых.

К 2050 году каждый 6-й человек в мире будет старше 65 лет. Да и все мы когда-нибудь состаримся. С какими проблемами сталкиваются пожилые:

1. Мелкий текст. Используйте кегль от 14 pt, гарнитуры с крупными буквами (14 кегль Futura PT выглядит как 10 кегль Roboto), позвольте регулировать размер текста; избегайте шрифтов с необычным начертанием.

2. Низкая контрастность. Размещайте текст на чистом фоне без изображений; проверяйте контрастность и сохраняйте её на высоком уровне; вместо серого текста на сером фоне ищите другие способы управлять пользовательским вниманием.

3. Непонятные иконки. Добавляйте текстовые метки, которые видны без наведения курсора; их дизайн должен быть простым и схематичным; тестируйте иконки на узнаваемость и запоминаемость.

4. Отсутствие гибкости: поля, принимающие данные только в определённом формате; неспособность распознавать опечатки.

5. Непонятные формулировки.

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

#old
Игорь Штанг написал о выравнивании текста и размере полей.

Выравнивание текста по левому краю лучше сочетается с узкими полями — ровный край как бы примагничивается к границе формата. Широкие поля приводят к противоречию: текст стремится к центру, но его несимметричная форма сопротивляется центрированию.

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

https://nobelfaik.livejournal.com/220315.html
Борис Юзефпольский написал об особенностях пользовательских интервью онлайн.

1. Нет живого контакта с респондентом, иногда нет изображения. Зато в интервью может участвовать вся команда.

Чтобы респондента не смущала толпа людей, камеру и микрофон включают только интервьюеры (не больше 2 человек). Если кто-то из команды хочет задать вопрос, он пишет его во внутренний чат (интервьюер вопрос видит и задаёт в удобный момент) или озвучивает в конце беседы, когда интервьюер передаёт слово.

2. Между «договориться об интервью» и «провести интервью» — пропасть. Люди забывают, им сложно планировать.

Настроили систему напоминаний. Но несмотря на напоминания, выбор удобного времени и вознаграждение, 10% респондентов не подключаются из-за технических проблем, а 20−30% не приходят вовсе.

3. У респондентов разные технические условия. Первые минуты интервью приходится тратить на технические неполадки.

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

4. Сложно проводить большие фокус-группы.

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

5. Детям сложно раскрыться в онлайн-интервью. Зато они уверенно чувствуют себя в юзабилити-тестах.

https://vc.ru/uchi.ru/192356