Киннерет Ифра написала о тексте в диалоговых окнах подтверждения.
Они появляются, когда пользователь пытается выполнить важное действие, и помогают ещё раз подумать, хочет ли он его выполнить и осознаёт ли последствия. Это помеха во благо.
Если пользователь скорее всего знает, что делает, можно не показывать диалог, но дать возможность отменить действие.
Решая, показывать диалог или нет, учтите:
— Обратимость действия;
— Важность последствий;
— Сложность отмены. Например, действие приведёт к изменению настроек других устройств;
— Частотность действия. Постоянное подтверждение становится пользовательской привычкой и перестаёт работать.
Заголовок:
— В заголовке сообщите о действии, которое надо подтвердить. «Вы уверены?» → «Удалить проект?»;
— Сделайте его вопросом, на который можно дать 2 взаимоисключающих ответа;
— Удалите лишние вступления: «Вы уверены…», «Это действие приведет к…», «Вы действительно…»;
— Особое внимание обратите на диалоги, связанные с отменой чего-либо. Примеров таких диалогов с кнопками «Отменить · Отмена» много, ещё один будет лишним.
Пояснение (текст под заголовком):
— Если к заголовку добавить нечего, текст пояснения не нужен;
— Добавьте его, если действие влияет на связанные элементы и настройки, другие учётные записи и устройства. Чем важнее действие и сложнее отмена, тем нужнее пояснение;
— Если опасаетесь, что пользователь пропустит пояснение, вынесите важные детали в заголовок: «Удалить папку и всё её содержимое?»;
— Сообщите, если действие необратимо: «Удалить папку и всё её содержимое без возможности восстановления?»;
— Если кроме удаления есть другое решение проблемы, расскажите о нём в пояснении.
Кнопки:
— Можно добавить название действия в надписи на кнопках: «Да, отправить», «Всё равно выйти»;
— Используйте в заголовке и на кнопках одни и те же слова: «Деактивировать ключ лицензии? · Да, деактивировать · Отмена».
https://habr.com/ru/company/directum/blog/530770/
Они появляются, когда пользователь пытается выполнить важное действие, и помогают ещё раз подумать, хочет ли он его выполнить и осознаёт ли последствия. Это помеха во благо.
Если пользователь скорее всего знает, что делает, можно не показывать диалог, но дать возможность отменить действие.
Решая, показывать диалог или нет, учтите:
— Обратимость действия;
— Важность последствий;
— Сложность отмены. Например, действие приведёт к изменению настроек других устройств;
— Частотность действия. Постоянное подтверждение становится пользовательской привычкой и перестаёт работать.
Заголовок:
— В заголовке сообщите о действии, которое надо подтвердить. «Вы уверены?» → «Удалить проект?»;
— Сделайте его вопросом, на который можно дать 2 взаимоисключающих ответа;
— Удалите лишние вступления: «Вы уверены…», «Это действие приведет к…», «Вы действительно…»;
— Особое внимание обратите на диалоги, связанные с отменой чего-либо. Примеров таких диалогов с кнопками «Отменить · Отмена» много, ещё один будет лишним.
Пояснение (текст под заголовком):
— Если к заголовку добавить нечего, текст пояснения не нужен;
— Добавьте его, если действие влияет на связанные элементы и настройки, другие учётные записи и устройства. Чем важнее действие и сложнее отмена, тем нужнее пояснение;
— Если опасаетесь, что пользователь пропустит пояснение, вынесите важные детали в заголовок: «Удалить папку и всё её содержимое?»;
— Сообщите, если действие необратимо: «Удалить папку и всё её содержимое без возможности восстановления?»;
— Если кроме удаления есть другое решение проблемы, расскажите о нём в пояснении.
Кнопки:
— Можно добавить название действия в надписи на кнопках: «Да, отправить», «Всё равно выйти»;
— Используйте в заголовке и на кнопках одни и те же слова: «Деактивировать ключ лицензии? · Да, деактивировать · Отмена».
https://habr.com/ru/company/directum/blog/530770/
Хабр
Диалоги подтверждения: советы зарубежных коллег и собственный опыт
Изображение из блога компании Miro Киннерет Ифра, эксперт в разработке микротекстов для UI и автор книги «Microcopy: The Complete Guide», в своей статье даёт р...
Константин Ефимов написал об ошибках при проведении глубинного интервью. Например:
Принятие декларативных ответов за реальные:
— Исследователь фокусируется на представлениях респондента о продукте и отношении к нему, игнорирует реальный опыт, не исследует ситуации использования продукта;
— Не уточняет, насколько реалистично, что респондент будет пользоваться функциональностью, которую тот просит добавить в продукт;
— Не вычленяет социально желательные ответы, не проверяет декларации на реалистичность.
Процедурные нарушения:
— Исследователь не делает заметки, не ведёт запись;
— Опаздывает на интервью, не соблюдает временные рамки;
— Не отключает звук на своём телефоне;
— Отвлекается на телефон или ноутбук, переписывается параллельно с интервью;
— Не называет код тестируемого образца (создаёт проблемы при анализе результатов).
https://vc.ru/marketing/178315
Принятие декларативных ответов за реальные:
— Исследователь фокусируется на представлениях респондента о продукте и отношении к нему, игнорирует реальный опыт, не исследует ситуации использования продукта;
— Не уточняет, насколько реалистично, что респондент будет пользоваться функциональностью, которую тот просит добавить в продукт;
— Не вычленяет социально желательные ответы, не проверяет декларации на реалистичность.
Процедурные нарушения:
— Исследователь не делает заметки, не ведёт запись;
— Опаздывает на интервью, не соблюдает временные рамки;
— Не отключает звук на своём телефоне;
— Отвлекается на телефон или ноутбук, переписывается параллельно с интервью;
— Не называет код тестируемого образца (создаёт проблемы при анализе результатов).
https://vc.ru/marketing/178315
vc.ru
Восемь типов ошибок в глубинном интервью — Маркетинг на vc.ru
И о том, как их избежать.
Эдуард Христусь написал об объектно-ориентированном дизайне.
ООД помогает:
1. Понять, с чего начать. Если проектируете приложение для заказа котиков с доставкой, в нём наверняка будут сущности: «пользователь», «заказ» и «котик». С ними будут связаны определённые параметры и способы взаимодействия;
2. Сэкономить. Прототипирование — дорогой и сложный подпроцесс проектирования. Генерировать и отметать идеи в прототипе не эффективно;
3. Создать MVP;
4. Всей команде равномерно двигаться при декомпозиции проекта. Сначала объекты, потом способы взаимодействия с ними.
Процесс:
1. Выявите все объекты системы. Помогут пользовательские истории;
2. Определите параметры объектов и их связи. Помогут: брейншторм внутри команды и с заказчиком, профили пользователей (их сценарии и цели). Надо понять, чего от объекта хотел бы пользователь: какую информацию узнать, какие действия совершить;
3. Определите способы взаимодействия с объектами (функции);
4. Укажите свойства параметров. Например: автоматический параметр (проставляется системой автоматически), фильтруемый (используется для фильтрации списка объектов), ручной (задаётся вручную пользователем или администратором) и так далее;
5. Укажите свойства функций. Например: доступные без ограничений, доступные с ограничениями;
6. Покажите наборы параметров и функций для разных состояний объекта. Например: закрытую вакансию можно только посмотреть.
Не стоит применять ООД для небольших корпоративных сайтов из нескольких страниц.
#ooux
ООД помогает:
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/
Покажите искусственный прогресс, когда пользователь только начал, но уже прошёл видимую часть пути.
Например:
— На карточке накопления 10 штампов для получения бесплатной услуги 2 штампа поставлены по умолчанию;
— Пользователь только зарегистрировался, но уже на 20% заполнил свой профиль.
Эффекты:
— Человек понимает, что начал выполнять задачу, и мысленно возвращается к ней, пока не завершит её (эффект Зейгарник);
— Чем человек ближе к цели, тем больше он хочет её достичь (эффект градиента цели);
— Визуальное представление цели и оставшегося пути помогает в её достижении (эффект визуализации цели).
https://ux.pub/kak-motivirovat-polzovatelya-zakonchit-progress-effekt-obespechennogo-progressa/
UXPUB 🇺🇦 Дизайн-спільнота
Как мотивировать пользователя закончить прогресс? -Эффект обеспеченного прогресса
Идея заключается в том, что, если вы предоставите людям искусственный прогресс в достижении цели, у них будет больше мотивации для выполнения этой задачи
Джон Сайто написал о метафорах в интерфейсе.
Метафора — употребление слова или выражения в переносном смысле на основе аналогии, сходства или сравнения.
Шестерёнка — метафора настроек. Продуктовая корзина — метафора заказа. В сравнении сайтов с книгами работают метафоры «Добавить в закладки», «Опубликовать», в сравнении с домами — «Войти как гость», «Домашняя страница». Уже сложился набор понятных всем метафор для взаимодействия в интернете.
Есть необычные метафоры. Например, на Медиуме статьи сравнивают с шоу: читатели реагируют на статьи аплодисментами и хлопками, у авторов появляются фанаты.
Хорошо, если при выборе метафоры можно провести параллели с реальным миром. Чем метафора абстрактнее, тем сложнее её понять.
Есть тяжёлые метафоры, когда за одним элементом скрывается много разных смыслов. Например, кнопка Share в iOS.
При выборе метафоры кроме поиска по библиотекам иконок могут пригодиться словари синонимов, фразеологизмов и контекстно близких слов.
https://ux-journal.ru/metafory-i-analogii-v-produktovom-dizajne.html
Метафора — употребление слова или выражения в переносном смысле на основе аналогии, сходства или сравнения.
Шестерёнка — метафора настроек. Продуктовая корзина — метафора заказа. В сравнении сайтов с книгами работают метафоры «Добавить в закладки», «Опубликовать», в сравнении с домами — «Войти как гость», «Домашняя страница». Уже сложился набор понятных всем метафор для взаимодействия в интернете.
Есть необычные метафоры. Например, на Медиуме статьи сравнивают с шоу: читатели реагируют на статьи аплодисментами и хлопками, у авторов появляются фанаты.
Хорошо, если при выборе метафоры можно провести параллели с реальным миром. Чем метафора абстрактнее, тем сложнее её понять.
Есть тяжёлые метафоры, когда за одним элементом скрывается много разных смыслов. Например, кнопка Share в iOS.
При выборе метафоры кроме поиска по библиотекам иконок могут пригодиться словари синонимов, фразеологизмов и контекстно близких слов.
https://ux-journal.ru/metafory-i-analogii-v-produktovom-dizajne.html
Продуктовый дизайн (UX/UI), брендинг и аналитика
Метафоры и аналогии в продуктовом дизайне - Продуктовый дизайн (UX/UI), брендинг и аналитика
Руководство по применению метафор в интерфейсах. Читайте, внедряйте!
Олег Биргер написал о развитии клиентского опыта (на примере «Газпромнефти»).
«У нас есть постоянные клиенты, они каждый день ездят на работу и через день заправляются: им так удобно. И наша задача — не продавать этим людям топливо, а помогать им добираться. Фокус с количества проданного топлива должен сдвигаться на то, скольким людям в этом месяце мы помогли доехать до работы. Потому что проданное топливо — это следствие ежедневного физического передвижения людей.
Мы должны сопровождать перемещение клиентов любыми способами, тогда они будут больше у нас покупать. Мы должны визуализировать процесс того, как человек выходит из дома, заводит машину, едет на работу, отвозит детей в школу. Если у него машина не заведётся, то он не заправится у нас. Если у него страховки нет, и его увезли на штрафстоянку, то он не заправится. Если шины не поменял и в аварию попал, то он не заправится. Мы должны сопровождать клиентов максимально подробно на всех этапах, где только можем, и делать это нужно с выгодой для бизнеса».
https://habr.com/ru/company/gazpromneft/blog/531232/
«У нас есть постоянные клиенты, они каждый день ездят на работу и через день заправляются: им так удобно. И наша задача — не продавать этим людям топливо, а помогать им добираться. Фокус с количества проданного топлива должен сдвигаться на то, скольким людям в этом месяце мы помогли доехать до работы. Потому что проданное топливо — это следствие ежедневного физического передвижения людей.
Мы должны сопровождать перемещение клиентов любыми способами, тогда они будут больше у нас покупать. Мы должны визуализировать процесс того, как человек выходит из дома, заводит машину, едет на работу, отвозит детей в школу. Если у него машина не заведётся, то он не заправится у нас. Если у него страховки нет, и его увезли на штрафстоянку, то он не заправится. Если шины не поменял и в аварию попал, то он не заправится. Мы должны сопровождать клиентов максимально подробно на всех этапах, где только можем, и делать это нужно с выгодой для бизнеса».
https://habr.com/ru/company/gazpromneft/blog/531232/
Хабр
Про клиентский опыт и оторванность от реальности
NB: Мы не претендуем на идеальность, и не принуждаем всех следовать этим путем, мы только рассказываем про опыт внутри нашей компании. Я Олег Биргер, руководитель центра развития клиентского...
Максим Жуков написал о фильтрации в интернет-магазинах.
— Предложите пользователю выбрать категорию, а уже потом фильтровать. Список категорий может располагаться над фильтрами или над списком товаров;
— Предоставьте уникальный набор фильтров для выбранной категории. Пользователей обычно интересуют уникальные параметры: для телевизоров — диагональ, для гидрокостюмов — толщина неопрена;
— Если параметр товара настолько важен, что отображается в списке товаров, дайте возможность по нему фильтровать;
— Добавьте тематические фильтры. Например: по стилю, времени года и так далее. Потребуется дополнительная разметка товаров, но покупатели это оценят;
— Добавьте параметр совместимости товаров (особенно в сегменте электроники и бытовой техники). Выбор таких товаров как запчасти, расходные материалы и аксессуары определяется совместимостью;
— Не показывайте длинные списки из параметров фильтрации. Покажите самые популярные, а остальные отображайте после нажатия на специальный контрол;
— Добавьте поиск в длинный список значений параметра фильтрации;
— Отобразите значения применённых параметров фильтрации. Дайте возможность их быстро удалить;
— Добавьте подсказки к значениям параметров фильтрации;
— Если пользователь настроил фильтры так, что ни один из товаров не подходит, не показывайте нулевые результаты фильтрации. Исключите последний применённый параметр фильтрации или отобразите соответствующие значения в фильтре неактивными.
#filter
— Предложите пользователю выбрать категорию, а уже потом фильтровать. Список категорий может располагаться над фильтрами или над списком товаров;
— Предоставьте уникальный набор фильтров для выбранной категории. Пользователей обычно интересуют уникальные параметры: для телевизоров — диагональ, для гидрокостюмов — толщина неопрена;
— Если параметр товара настолько важен, что отображается в списке товаров, дайте возможность по нему фильтровать;
— Добавьте тематические фильтры. Например: по стилю, времени года и так далее. Потребуется дополнительная разметка товаров, но покупатели это оценят;
— Добавьте параметр совместимости товаров (особенно в сегменте электроники и бытовой техники). Выбор таких товаров как запчасти, расходные материалы и аксессуары определяется совместимостью;
— Не показывайте длинные списки из параметров фильтрации. Покажите самые популярные, а остальные отображайте после нажатия на специальный контрол;
— Добавьте поиск в длинный список значений параметра фильтрации;
— Отобразите значения применённых параметров фильтрации. Дайте возможность их быстро удалить;
— Добавьте подсказки к значениям параметров фильтрации;
— Если пользователь настроил фильтры так, что ни один из товаров не подходит, не показывайте нулевые результаты фильтрации. Исключите последний применённый параметр фильтрации или отобразите соответствующие значения в фильтре неактивными.
#filter
vc.ru
18 решений для фильтрации и сортировки товаров в интернет-магазине, которые упростят выбор и повысят конверсию — Дизайн на vc.ru
Приветствую. Меня зовут Максим Жуков, я из KISLOROD. Специализируемся на разработке и развитии e-commerce проектов.
Екатерина Авакова написала, что делать в сложных ситуациях на глубинном интервью.
1. Респондент говорит обо всём, кроме того, что нужно;
2. Респондент отвечает односложно, не раскрывая подробностей;
3. В рассказе постепенно появляются детали, в которых теряется и интервьюер, и респондент;
4. Придуманный на ходу вопрос уводит обсуждение в сторону;
5. Структура вопросника задаёт рамки беседы, которые мешают рассуждениям респондента.
Пример третьей ситуации: вы ищете барьеры, возникающие при оформлении ипотеки. Респондент рассказывает о своём опыте и всех, с кем он контактировал. Чтобы сохранять контекст, приходится удерживать в голове длинные цепочки размышлений. Вы хотите узнать о барьерах в каждой точке контакта и просите повторить рассказ.
Респондент может:
— Решить, что вы невнимательны, и потерять интерес к интервью;
— Запутаться в должностях, компаниях и продуктах, и вы придёте к неправильным выводам при разборе интервью.
Что делать: упростить обмен информацией. Изобразите на бумаге всех менеджеров, названия компаний и продуктов, которые важны для рассказа. Попросите респондента показывать, о ком или о чём он говорит. У вас появится артефакт, к которому можно обращаться после интервью.
https://medium.com/userhouse/e72ec6a64b1d
1. Респондент говорит обо всём, кроме того, что нужно;
2. Респондент отвечает односложно, не раскрывая подробностей;
3. В рассказе постепенно появляются детали, в которых теряется и интервьюер, и респондент;
4. Придуманный на ходу вопрос уводит обсуждение в сторону;
5. Структура вопросника задаёт рамки беседы, которые мешают рассуждениям респондента.
Пример третьей ситуации: вы ищете барьеры, возникающие при оформлении ипотеки. Респондент рассказывает о своём опыте и всех, с кем он контактировал. Чтобы сохранять контекст, приходится удерживать в голове длинные цепочки размышлений. Вы хотите узнать о барьерах в каждой точке контакта и просите повторить рассказ.
Респондент может:
— Решить, что вы невнимательны, и потерять интерес к интервью;
— Запутаться в должностях, компаниях и продуктах, и вы придёте к неправильным выводам при разборе интервью.
Что делать: упростить обмен информацией. Изобразите на бумаге всех менеджеров, названия компаний и продуктов, которые важны для рассказа. Попросите респондента показывать, о ком или о чём он говорит. У вас появится артефакт, к которому можно обращаться после интервью.
https://medium.com/userhouse/e72ec6a64b1d
Medium
Как проводить результативные глубинные интервью, когда не всё идет по плану
Мы уже писали об основных принципах проведения результативного глубинного интервью. Да и не только мы — о подготовке и проведении интервью…
Собрал самые популярные публикации UX Notes по числу лайков и репостов в ВК за прошедший год.
В топ-20 попали:
— 8 подборок записей докладов с мероприятий: UX-марафон, World Usability Day, митап «Инклюзивный дизайн», митап «Гибридный дизайнер», G8, ProfsoUX, митап «Сила взаимодействия;
— 6 переводов статей: Майтрик Катария, Дэнни Сапио, Тарас Бакусевич, Гаррет Кролл, Том Кенни, Джордж Кейв;
— 5 оригинальных статей: Павел Шерер, Павел Голюдов, Евгений Игнашов, Максим Жуков, Дарья Дундукова;
— 1 видео: Пабло Стэнли.
Спасибо, что читаете и рекомендуете @uxnotes знакомым дизайнерам и проектировщикам. Спасибо авторам полезных и интересных материалов.
https://vandergrav.ru/popular-ux-notes-2020/
В топ-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
К 2050 году каждый 6-й человек в мире будет старше 65 лет. Да и все мы когда-нибудь состаримся. С какими проблемами сталкиваются пожилые:
1. Мелкий текст. Используйте кегль от 14 pt, гарнитуры с крупными буквами (14 кегль Futura PT выглядит как 10 кегль Roboto), позвольте регулировать размер текста; избегайте шрифтов с необычным начертанием.
2. Низкая контрастность. Размещайте текст на чистом фоне без изображений; проверяйте контрастность и сохраняйте её на высоком уровне; вместо серого текста на сером фоне ищите другие способы управлять пользовательским вниманием.
3. Непонятные иконки. Добавляйте текстовые метки, которые видны без наведения курсора; их дизайн должен быть простым и схематичным; тестируйте иконки на узнаваемость и запоминаемость.
4. Отсутствие гибкости: поля, принимающие данные только в определённом формате; неспособность распознавать опечатки.
5. Непонятные формулировки.
Отдельные рекомендации:
— Делайте область нажатия больше самой кнопки или ссылки;
— Старайтесь не разделять задачи на несколько экранов, если пользователю придётся запоминать предыдущие действия;
— Для длительных задач давайте чёткую обратную связь о прогрессе.
#old
vc.ru
Доступный дизайн: как сделать интерфейс удобным для пожилых — Дизайн на vc.ru
Мы в Mojo решили напомнить, что дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.
Игорь Штанг написал о выравнивании текста и размере полей.
Выравнивание текста по левому краю лучше сочетается с узкими полями — ровный край как бы примагничивается к границе формата. Широкие поля приводят к противоречию: текст стремится к центру, но его несимметричная форма сопротивляется центрированию.
Выравнивание текста по центру лучше сочетается с широкими полями — рваному краю надо больше воздуха.
https://nobelfaik.livejournal.com/220315.html
Выравнивание текста по левому краю лучше сочетается с узкими полями — ровный край как бы примагничивается к границе формата. Широкие поля приводят к противоречию: текст стремится к центру, но его несимметричная форма сопротивляется центрированию.
Выравнивание текста по центру лучше сочетается с широкими полями — рваному краю надо больше воздуха.
https://nobelfaik.livejournal.com/220315.html
Livejournal
Связь выключки и полей
Текст, выключенный по левому краю, лучше сочетается с узкими полями, ровный край как бы примагничивается к границе формата. Слишком широкие поля приводят к противоречию: текст стремится к центру, но его несимметричная форма сопротивляется центрированию. И…
Борис Юзефпольский написал об особенностях пользовательских интервью онлайн.
1. Нет живого контакта с респондентом, иногда нет изображения. Зато в интервью может участвовать вся команда.
Чтобы респондента не смущала толпа людей, камеру и микрофон включают только интервьюеры (не больше 2 человек). Если кто-то из команды хочет задать вопрос, он пишет его во внутренний чат (интервьюер вопрос видит и задаёт в удобный момент) или озвучивает в конце беседы, когда интервьюер передаёт слово.
2. Между «договориться об интервью» и «провести интервью» — пропасть. Люди забывают, им сложно планировать.
Настроили систему напоминаний. Но несмотря на напоминания, выбор удобного времени и вознаграждение, 10% респондентов не подключаются из-за технических проблем, а 20−30% не приходят вовсе.
3. У респондентов разные технические условия. Первые минуты интервью приходится тратить на технические неполадки.
Написали подробные и понятные инструкции. Неполадки помогли увидеть барьеры в использовании продукта (настройка техники, загрузка, первые действия) и понять, почему пользователям трудно в некоторых ситуациях.
4. Сложно проводить большие фокус-группы.
В спорах и дискуссиях внутри фокус-групп исследователи обычно находят много полезного. Онлайн приходится жертвовать этим в угоду порядку и чётким правилам взаимодействия. Зато можно услышать мнения всех респондентов.
5. Детям сложно раскрыться в онлайн-интервью. Зато они уверенно чувствуют себя в юзабилити-тестах.
https://vc.ru/uchi.ru/192356
1. Нет живого контакта с респондентом, иногда нет изображения. Зато в интервью может участвовать вся команда.
Чтобы респондента не смущала толпа людей, камеру и микрофон включают только интервьюеры (не больше 2 человек). Если кто-то из команды хочет задать вопрос, он пишет его во внутренний чат (интервьюер вопрос видит и задаёт в удобный момент) или озвучивает в конце беседы, когда интервьюер передаёт слово.
2. Между «договориться об интервью» и «провести интервью» — пропасть. Люди забывают, им сложно планировать.
Настроили систему напоминаний. Но несмотря на напоминания, выбор удобного времени и вознаграждение, 10% респондентов не подключаются из-за технических проблем, а 20−30% не приходят вовсе.
3. У респондентов разные технические условия. Первые минуты интервью приходится тратить на технические неполадки.
Написали подробные и понятные инструкции. Неполадки помогли увидеть барьеры в использовании продукта (настройка техники, загрузка, первые действия) и понять, почему пользователям трудно в некоторых ситуациях.
4. Сложно проводить большие фокус-группы.
В спорах и дискуссиях внутри фокус-групп исследователи обычно находят много полезного. Онлайн приходится жертвовать этим в угоду порядку и чётким правилам взаимодействия. Зато можно услышать мнения всех респондентов.
5. Детям сложно раскрыться в онлайн-интервью. Зато они уверенно чувствуют себя в юзабилити-тестах.
https://vc.ru/uchi.ru/192356
vc.ru
Как мы прокачали пользовательские интервью на удалёнке — Учи.ру на vc.ru
Оказалось, что отсутствие зрительного контакта и эмоциональной связи с респондентами — не проблема.
Опубликованы видео с Avito Design Talk:
1. Настя Ларкина, Авито — Точки роста для дизайнера в крупной компании
youtube.com/watch?v=4qBiY4XkPmE
2. Алексей Кандауров, Циан — Значимость дизайнера на разных скоростях разработки
youtube.com/watch?v=1YjKkbaMekU
3. Владимир Погорелов, Тинькофф — Дизайн в краудсорсинге и краудсорсинг в дизайне
youtube.com/watch?v=wpol2li9NPM
4. Круглый стол «Личные проекты дизайнеров»
youtube.com/watch?v=Da76M0gkUM0
— Все видео и презентации: habr.com/ru/company/avito/blog/533620/
— Все видео в альбоме ВК: vk.com/videos-50773057?section=album_45
1. Настя Ларкина, Авито — Точки роста для дизайнера в крупной компании
youtube.com/watch?v=4qBiY4XkPmE
2. Алексей Кандауров, Циан — Значимость дизайнера на разных скоростях разработки
youtube.com/watch?v=1YjKkbaMekU
3. Владимир Погорелов, Тинькофф — Дизайн в краудсорсинге и краудсорсинг в дизайне
youtube.com/watch?v=wpol2li9NPM
4. Круглый стол «Личные проекты дизайнеров»
youtube.com/watch?v=Da76M0gkUM0
— Все видео и презентации: habr.com/ru/company/avito/blog/533620/
— Все видео в альбоме ВК: vk.com/videos-50773057?section=album_45
YouTube
Точки роста для дизайнера в крупной компании | Настя Ларкина, Авито | Avito Design Talk
Работа дизайнера — намного больше, чем красивые картинки и кнопочки. Настя рассказала, как она участвовала в запуске чат-бота Авито Работы на всех его этапах: формирования consumer journey map, исследований, общения с разработчиками, редакторами и в чём от…
Павел Шерер написал об этапах создания информационной архитектуры.
ИА — это описание связи всего со всем. Это совокупность данных об информационной структуре цифрового продукта, способствующая его правильной работе, выполнению задач и интуитивному доступу к содержимому.
Основные этапы создания:
1. Подготовка. Определение высокоуровневых границ проекта, формирование базового понимания его функциональности.
2. Декомпозиция. Разделение проекта на отдельные информационные сущности со своими свойствами. Сущности могут быть вложенными.
3. Классификация пользовательских потребностей (задач) и информационных сущностей. Позволяет понять, как именно следует связать сущности, как они будут друг к другу относиться.
4. Выявление связей. От одного ко многим, от многих ко многим, плоские, иерархические и так далее.
5. Фиксация свойств сущностей.
6. Составление предметных и навигационных схем продукта. Самый сложный этап: фиксация сложившейся картинки кажется второстепенной задачей, но без грамотного отчуждения вся остальная работа станет бесполезной.
#information_architecture
ИА — это описание связи всего со всем. Это совокупность данных об информационной структуре цифрового продукта, способствующая его правильной работе, выполнению задач и интуитивному доступу к содержимому.
Основные этапы создания:
1. Подготовка. Определение высокоуровневых границ проекта, формирование базового понимания его функциональности.
2. Декомпозиция. Разделение проекта на отдельные информационные сущности со своими свойствами. Сущности могут быть вложенными.
3. Классификация пользовательских потребностей (задач) и информационных сущностей. Позволяет понять, как именно следует связать сущности, как они будут друг к другу относиться.
4. Выявление связей. От одного ко многим, от многих ко многим, плоские, иерархические и так далее.
5. Фиксация свойств сущностей.
6. Составление предметных и навигационных схем продукта. Самый сложный этап: фиксация сложившейся картинки кажется второстепенной задачей, но без грамотного отчуждения вся остальная работа станет бесполезной.
#information_architecture
Павел Шерер
Информационная архитектура: краткий экскурс — Павел Шерер
Короткая статья про основы информационной архитектуры: трамплин для погружения в область.
Максим Жуков написал, как упростить аутентификацию и регистрацию в интернет-магазине.
Аутентификация:
— Разместите кнопку входа в привычном месте (правый верхний угол);
— Если пользователь неправильно ввёл логин или пароль, сообщите, в чём именно ошибка;
— Если пользователь вошёл, запомните его (до 7 дней). Для безопасности можно спросить пароль потом при выполнении значимого действия;
— Внедрите вход по номеру телефона. Так можно не запоминать пароль и входить по коду из смс. Люди всё реже пользуются почтой;
— После того как пользователь вошёл, система должна возвращать его на страницу, с которой он перешёл к форме входа.
Регистрация:
— Сделайте её необязательной;
— Расскажите о преимуществах регистрации;
— Наградите пользователя за регистрацию: скидкой, подарком, бесплатной доставкой, участием в розыгрыше призов;
— Чтобы было больше причин регистрироваться, добавьте программу лояльности или накопительную систему скидок;
— Вместо логина спросите адрес электронной почты (если ваша аудитория ей пользуется);
— В форме регистрации отметьте обязательные и необязательные поля;
— Не требуйте ввести очень сложный пароль. Сообщите требования к нему в форме регистрации сразу;
— Зарегистрируйте покупателя автоматически: отправьте письмо с регистрационными данными на почту после заказа;
— Не требуйте активации учётной записи (подтверждения адреса электронной почты);
— Упростите поиск приветственного письма. В качестве отправителя укажите название магазина, в теме что-то вроде «Данные учётной записи в интернет-магазине Название».
https://vc.ru/design/195503
Аутентификация:
— Разместите кнопку входа в привычном месте (правый верхний угол);
— Если пользователь неправильно ввёл логин или пароль, сообщите, в чём именно ошибка;
— Если пользователь вошёл, запомните его (до 7 дней). Для безопасности можно спросить пароль потом при выполнении значимого действия;
— Внедрите вход по номеру телефона. Так можно не запоминать пароль и входить по коду из смс. Люди всё реже пользуются почтой;
— После того как пользователь вошёл, система должна возвращать его на страницу, с которой он перешёл к форме входа.
Регистрация:
— Сделайте её необязательной;
— Расскажите о преимуществах регистрации;
— Наградите пользователя за регистрацию: скидкой, подарком, бесплатной доставкой, участием в розыгрыше призов;
— Чтобы было больше причин регистрироваться, добавьте программу лояльности или накопительную систему скидок;
— Вместо логина спросите адрес электронной почты (если ваша аудитория ей пользуется);
— В форме регистрации отметьте обязательные и необязательные поля;
— Не требуйте ввести очень сложный пароль. Сообщите требования к нему в форме регистрации сразу;
— Зарегистрируйте покупателя автоматически: отправьте письмо с регистрационными данными на почту после заказа;
— Не требуйте активации учётной записи (подтверждения адреса электронной почты);
— Упростите поиск приветственного письма. В качестве отправителя укажите название магазина, в теме что-то вроде «Данные учётной записи в интернет-магазине Название».
https://vc.ru/design/195503
vc.ru
Авторизация и регистрация в интернет-магазине: 5 решений для удобства авторизации и 16 решений для удобства регистрации — Дизайн…
На связи Максим Жуков из KISLOROD. Мы специализируемся на разработке и развитии ecommerce-проектов. Делимся экспертизой в этом блоге и телеграм-канале. Подписывайтесь, чтобы не пропускать материалы о точечном увеличении конверсий в клиентских проектах, исследованиях…
Ахнаф Кунакулов и Антон Илларионов написали, как обсуждать с заказчиком промежуточные артефакты проектирования.
На этапе сбора требований и определения функциональности стоит обсуждать только список пользовательских сценариев.
При создании первых концептов (на бумаге, маркерной доске или в Фигме) надо обсуждать:
— Связность показанной истории;
— Отвечает ли она портретам целевой аудитории;
— Детали истории;
— Стартовые точки ключевых сценариев;
— Чем пожертвовали в концепте.
На этапе детализации создают высокодетализированный прототип, чтобы проверить, отвечает ли интерфейс всем требованиям. Заказчик:
— Следит, чтобы были проработаны все ситуации;
— Просит объяснить принятые решения;
— Обсуждает отклонения от базовых сценариев.
На этапе проработки UI подбирают подходящие паттерны, компонуют элементов интерфейса. Важно обсуждать, насколько паттерны эффективны и подходят задаче и целевой аудитории (особенно для профессиональных интерфейсов).
Быть заказчиком — это тоже работа.
https://vc.ru/design/197039
На этапе сбора требований и определения функциональности стоит обсуждать только список пользовательских сценариев.
При создании первых концептов (на бумаге, маркерной доске или в Фигме) надо обсуждать:
— Связность показанной истории;
— Отвечает ли она портретам целевой аудитории;
— Детали истории;
— Стартовые точки ключевых сценариев;
— Чем пожертвовали в концепте.
На этапе детализации создают высокодетализированный прототип, чтобы проверить, отвечает ли интерфейс всем требованиям. Заказчик:
— Следит, чтобы были проработаны все ситуации;
— Просит объяснить принятые решения;
— Обсуждает отклонения от базовых сценариев.
На этапе проработки UI подбирают подходящие паттерны, компонуют элементов интерфейса. Важно обсуждать, насколько паттерны эффективны и подходят задаче и целевой аудитории (особенно для профессиональных интерфейсов).
Быть заказчиком — это тоже работа.
https://vc.ru/design/197039
vc.ru
Четыре фазы разработки интерфейса: что обсуждать с заказчиком, когда нет даже картинок? — Дизайн на vc.ru
Мы делаем дизайн интерфейсов. Заказчик приходит к нам за дизайном и в основном готов обсуждать только его. То есть картинки. Но разработка интерфейса — долгий процесс, и в нем есть много промежуточных документов. Да и сами дизайн-макеты не сразу приобретают…
Опубликованы видео с Fintech Design Conf 2020:
1. Команда Райффайзенбанка — Общая дизайн- и бренд-стратегия, устройство дизайн-команды и дизайн-системы, история работы над гайдлайнами
youtube.com/watch?v=4Hni1ySWLXQ
2. Команда Тинькофф Инвестиций — История создания мобильного приложения, соцсети Пульс для инвесторов, профессионального терминала
youtube.com/watch?v=0cL1KebEi4Y
3. Команда Home Credit Bank — Баланс навыков продуктового дизайнера, унификация дизайна, лучшие практики обработки ошибок и краевых состояний, профессионально-эмоциональная гигиена дизайнера
youtube.com/watch?v=mPi8Y0uL47E
4. Валерия Курмак из Сбера и Евгений Кузнецов из AIC — Обзор проблем поддержки инклюзивного дизайна в банковских продуктах
youtube.com/watch?v=pq9dYUGl2EA
5. Команда Открытие Брокера — Специфика работы инвесторов и трейдеров, структура и формат работы дизайн-команды, история изменений интерфейса, формат съёмок обучающих видео
youtube.com/watch?v=_uq0ZX9mg4c
6. Команда N26 — Работа бренд- и дизайн-команды в общем и на примере проекта по стандартизации цветовой палитры
youtube.com/watch?v=ptrnV4nCrxE
7. Лена Махно и Эмилия Городовых, Контур — Работа команды UX-исследователей
youtube.com/watch?v=Pfh9QyJ-TNc
8. Ирина Волошина и Виталий Шитов, Альфа-Банк — Работа бренд-команды
youtube.com/watch?v=UuOU_dI0Ne0
9. Команды БКС и AIC — Свежий редизайн и ребрендинг
youtube.com/watch?v=fd2ziu307HU
Все видео в одном месте: jvetrau.com/fintechdesign-2020/
1. Команда Райффайзенбанка — Общая дизайн- и бренд-стратегия, устройство дизайн-команды и дизайн-системы, история работы над гайдлайнами
youtube.com/watch?v=4Hni1ySWLXQ
2. Команда Тинькофф Инвестиций — История создания мобильного приложения, соцсети Пульс для инвесторов, профессионального терминала
youtube.com/watch?v=0cL1KebEi4Y
3. Команда Home Credit Bank — Баланс навыков продуктового дизайнера, унификация дизайна, лучшие практики обработки ошибок и краевых состояний, профессионально-эмоциональная гигиена дизайнера
youtube.com/watch?v=mPi8Y0uL47E
4. Валерия Курмак из Сбера и Евгений Кузнецов из AIC — Обзор проблем поддержки инклюзивного дизайна в банковских продуктах
youtube.com/watch?v=pq9dYUGl2EA
5. Команда Открытие Брокера — Специфика работы инвесторов и трейдеров, структура и формат работы дизайн-команды, история изменений интерфейса, формат съёмок обучающих видео
youtube.com/watch?v=_uq0ZX9mg4c
6. Команда N26 — Работа бренд- и дизайн-команды в общем и на примере проекта по стандартизации цветовой палитры
youtube.com/watch?v=ptrnV4nCrxE
7. Лена Махно и Эмилия Городовых, Контур — Работа команды UX-исследователей
youtube.com/watch?v=Pfh9QyJ-TNc
8. Ирина Волошина и Виталий Шитов, Альфа-Банк — Работа бренд-команды
youtube.com/watch?v=UuOU_dI0Ne0
9. Команды БКС и AIC — Свежий редизайн и ребрендинг
youtube.com/watch?v=fd2ziu307HU
Все видео в одном месте: jvetrau.com/fintechdesign-2020/
YouTube
Бренд- и дизайн-команда Райффайзенбанка
Юрий Ветров, Лена Куликова, Марина Гореликова, Дима Мясников и Вика Дубровская рассказали о разных аспектах работы: общая дизайн- и бренд-стратегия, как устроены дизайн-команда и дизайн-система, а также история работы над текущими цифровыми гайдлайнами.
…
…
Михаил Ярошук написал, как Booking.com манипулирует пользователями.
Эффект дефицита:
— Сайт показывает в результатах поиска недоступные варианты с надписью «Вы не успели»;
— Что таких номеров осталось мало (1−2);
— Сколько раз номер бронировали за последние 12 часов;
— Процент (количество) отелей в этом городе (похожих отелей в городе), в которых уже нет свободных номеров;
— Сколько людей просматривают страницу номера прямо сейчас;
— Сколько часов назад было последнее бронирование номера;
— Текст «Вам улыбнулась удача — здесь обычно нет мест!».
Жадность:
— Бесплатное повышение категории номера;
— Скидки на бронирование автомобиля или самого номера.
Эффект социального одобрения:
— «Хороший вариант для пар — они оценили удобства для поездки вдвоем на 9,1»;
— «Этот вариант оправдал или превысил ожидания 97% гостей, оставивших отзыв»;
— «Хит продаж в городе Неаполь!».
Боязнь ошибиться в выборе:
— Бесплатная отмена бронирования;
— Возможность оформить бронь без кредитной карты.
https://vc.ru/marketing/89272
Эффект дефицита:
— Сайт показывает в результатах поиска недоступные варианты с надписью «Вы не успели»;
— Что таких номеров осталось мало (1−2);
— Сколько раз номер бронировали за последние 12 часов;
— Процент (количество) отелей в этом городе (похожих отелей в городе), в которых уже нет свободных номеров;
— Сколько людей просматривают страницу номера прямо сейчас;
— Сколько часов назад было последнее бронирование номера;
— Текст «Вам улыбнулась удача — здесь обычно нет мест!».
Жадность:
— Бесплатное повышение категории номера;
— Скидки на бронирование автомобиля или самого номера.
Эффект социального одобрения:
— «Хороший вариант для пар — они оценили удобства для поездки вдвоем на 9,1»;
— «Этот вариант оправдал или превысил ожидания 97% гостей, оставивших отзыв»;
— «Хит продаж в городе Неаполь!».
Боязнь ошибиться в выборе:
— Бесплатная отмена бронирования;
— Возможность оформить бронь без кредитной карты.
https://vc.ru/marketing/89272
vc.ru
Как Booking.com «взламывает» пользователей, используя когнитивные искажения — Маркетинг на vc.ru
Когда вы последний раз искали жильё на сайте Booking.com? Вспомните ваши ощущения. Испытывали ли вы стресс? Если да, вы попались на когнитивные уловки.
Станислав Хрусталёв написал об ошибках при сборе обратной связи. Некоторые из них:
Получение приглашения пройти опрос:
— Действия компании не согласованы: клиент обратился с претензией и при этом получил приглашение оценить качество товара;
— Приглашение отправлено от имени специалиста, которого надо оценить;
— Клиент не подготовлен к опросу заранее. После продажи можно сказать, что через неделю он получит приглашение дать обратную связь.
Знакомство с приглашением:
— Непонятно, какую транзакцию (например, поездку на такси) надо оценить. Актуально, если у клиента их много. При этом если вы часто собираете фидбек, лучше интегрировать это в сам продукт;
— Не указано время, необходимое для прохождения опроса;
— Первый вопрос не внедрён в приглашение.
Переход к опросу:
— Срок действия приглашения ограничен;
— Терминал для оценки находится рядом со специалистом, которого надо оценить.
Прохождение опроса:
— Опрос собирает контактные данные. Это значит, что он не персонализирован;
— На уточняющий вопрос можно ответить только в свободной форме. Узнавая о причине негатива, выделите ключевые факторы и добавьте поле для свободного ввода;
— Все вопросы обязательные. Если клиент не захочет отвечать на конкретный вопрос, он закроет опрос;
— Не используется ветвление. Если клиент в первом ответе низко оценил сервис, на втором вопросе можно написать «Очень сожалеем, что огорчили вас. Что мы могли бы исправить?».
https://hardclient.com/feedback-acquisition-pitfalls
Получение приглашения пройти опрос:
— Действия компании не согласованы: клиент обратился с претензией и при этом получил приглашение оценить качество товара;
— Приглашение отправлено от имени специалиста, которого надо оценить;
— Клиент не подготовлен к опросу заранее. После продажи можно сказать, что через неделю он получит приглашение дать обратную связь.
Знакомство с приглашением:
— Непонятно, какую транзакцию (например, поездку на такси) надо оценить. Актуально, если у клиента их много. При этом если вы часто собираете фидбек, лучше интегрировать это в сам продукт;
— Не указано время, необходимое для прохождения опроса;
— Первый вопрос не внедрён в приглашение.
Переход к опросу:
— Срок действия приглашения ограничен;
— Терминал для оценки находится рядом со специалистом, которого надо оценить.
Прохождение опроса:
— Опрос собирает контактные данные. Это значит, что он не персонализирован;
— На уточняющий вопрос можно ответить только в свободной форме. Узнавая о причине негатива, выделите ключевые факторы и добавьте поле для свободного ввода;
— Все вопросы обязательные. Если клиент не захочет отвечать на конкретный вопрос, он закроет опрос;
— Не используется ветвление. Если клиент в первом ответе низко оценил сервис, на втором вопросе можно написать «Очень сожалеем, что огорчили вас. Что мы могли бы исправить?».
https://hardclient.com/feedback-acquisition-pitfalls
Hardclient
40+ Ошибок при Сборе Фидбэка
И как не наломать дров, запуская опрос удовлетворенности клиентов