Кинерет Ифра написала о пустых состояниях.
— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.
In English. #empty_state #writing
— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.
In English. #empty_state #writing
www.uprock.ru
Пустые состояния: 7 типов и как использовать каждый из них — читайте на UPROCK
Как пустые состояния улучшают опыт взаимодействия.. читайте полезные статьи о дизайне в блоге UPROCK
✍43👍23❤6
Кира Калимулина написала о тексте для пустых состояний и ошибок.
— Пустое состояние отображается, когда на экране нет содержимого: 1) Пользователь не добавил или нужные данные ещё не накопились, 2) Он всё удалил, 3) Нулевые результаты поиска или фильтрации;
— Общие рекомендации: определите контекст появления такого состояния; в заголовке расскажите, что произошло; в подзаголовке подскажите, что делать дальше (иногда имеет смысл успокоить пользователя); в тексте кнопки направьте его к целевому действию;
— В статье Кинерет Ифры — более подробная классификация пустых состояний и отдельные рекомендации под каждое;
— Вместо пустого состояния можно показать видеоподсказку или инструкцию;
— Если поиск не нашёл то, что искал пользователь, можно показать что-то похожее. Но важно сообщить об этом;
— Можно показать демоверсию содержимого, например, если эту функциональность открывает премиальный тариф;
— Не стоит: рассказывать о других фичах (может запутать); шутить, когда появление такого состояния может разочаровать пользователя; драматизировать («Мы очень старались, но так ничего и не нашли! Простите нас, пожалуйста, мы обещаем исправиться!»);
— В сообщениях об ошибках превращайте негатив в позитив, если это не искажает смысл. Например: «Эти товары недоступны для юридических лиц» → «Эти товары доступны только для физических лиц»;
— Если есть возможность, к сообщениям об ошибке добавляйте полезные ссылки. Например, на чат с поддержкой;
— Не пишите «Упс» или «Ой» — становится похоже, будто вы не контролируете, что происходит с вашим сервисом;
— Единственная ошибка, в тексте которой можно шутить, — 404.
#empty_state #error #writing
— Пустое состояние отображается, когда на экране нет содержимого: 1) Пользователь не добавил или нужные данные ещё не накопились, 2) Он всё удалил, 3) Нулевые результаты поиска или фильтрации;
— Общие рекомендации: определите контекст появления такого состояния; в заголовке расскажите, что произошло; в подзаголовке подскажите, что делать дальше (иногда имеет смысл успокоить пользователя); в тексте кнопки направьте его к целевому действию;
— В статье Кинерет Ифры — более подробная классификация пустых состояний и отдельные рекомендации под каждое;
— Вместо пустого состояния можно показать видеоподсказку или инструкцию;
— Если поиск не нашёл то, что искал пользователь, можно показать что-то похожее. Но важно сообщить об этом;
— Можно показать демоверсию содержимого, например, если эту функциональность открывает премиальный тариф;
— Не стоит: рассказывать о других фичах (может запутать); шутить, когда появление такого состояния может разочаровать пользователя; драматизировать («Мы очень старались, но так ничего и не нашли! Простите нас, пожалуйста, мы обещаем исправиться!»);
— В сообщениях об ошибках превращайте негатив в позитив, если это не искажает смысл. Например: «Эти товары недоступны для юридических лиц» → «Эти товары доступны только для физических лиц»;
— Если есть возможность, к сообщениям об ошибке добавляйте полезные ссылки. Например, на чат с поддержкой;
— Не пишите «Упс» или «Ой» — становится похоже, будто вы не контролируете, что происходит с вашим сервисом;
— Единственная ошибка, в тексте которой можно шутить, — 404.
#empty_state #error #writing
Хабр
Дорогая, что-то пошло не так. Гид по пустым состояниям и ошибкам + шаблоны на все случаи
Всем привет! Меня зовут Кира Калимулина, я руководитель группы UX-редактуры в Ozon. Я занимаюсь всеми интерфейсными текстами в приложении и на сайте. UX-тексты сильно отличаются от маркетинговых...
👍28🔥10❤4👏4
Кинерет Ифра написала о пустых состояниях.
— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.
In English. #empty_state #writing
— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.
In English. #empty_state #writing
www.uprock.ru
Пустые состояния: 7 типов и как использовать каждый из них — читайте на UPROCK
Как пустые состояния улучшают опыт взаимодействия.. читайте полезные статьи о дизайне в блоге UPROCK
👍26❤1
Соня Соуза написала о странице с нулевыми результатами поиска в интернет-магазине.
— В нулевых результатах поиска пользователи редко обращают внимание на советы вроде «Проверьте поисковый запрос на ошибки или попробуйте использовать более общие слова», так как непонятно, какое слово написано неправильно, и какие альтернативные формулировки подойдут;
— Покажите одну или несколько категорий, связанных с поисковым запросом. Если «Красные зимние куртки» не найдены, покажите ссылку на более широкую категорию «Куртки». В идеале — с применённым фильтром «Зима»;
— Предложите ввести похожий поисковый запрос, по которому есть ненулевые результаты. Например: исходный запрос без какого-то одного слова или его более простая формулировка;
— Если есть только один такой похожий запрос, можно сразу применить его, уведомив, что по исходному запросу ничего не найдено;
— Можно предложить товары, основываясь на пользовательской истории просмотров или персональных рекомендациях;
— Покажите контактные данные и ссылку на чат или справочные ресурсы;
— Покажите ссылки на популярные категории товаров, а также список популярных товаров, чтобы переключить внимание с неудачи на возможность новых открытий. Если подписать «Сейчас в тренде» или «Бестселлеры», это выступит социальным доказательством.
In English. #search #empty_state
— В нулевых результатах поиска пользователи редко обращают внимание на советы вроде «Проверьте поисковый запрос на ошибки или попробуйте использовать более общие слова», так как непонятно, какое слово написано неправильно, и какие альтернативные формулировки подойдут;
— Покажите одну или несколько категорий, связанных с поисковым запросом. Если «Красные зимние куртки» не найдены, покажите ссылку на более широкую категорию «Куртки». В идеале — с применённым фильтром «Зима»;
— Предложите ввести похожий поисковый запрос, по которому есть ненулевые результаты. Например: исходный запрос без какого-то одного слова или его более простая формулировка;
— Если есть только один такой похожий запрос, можно сразу применить его, уведомив, что по исходному запросу ничего не найдено;
— Можно предложить товары, основываясь на пользовательской истории просмотров или персональных рекомендациях;
— Покажите контактные данные и ссылку на чат или справочные ресурсы;
— Покажите ссылки на популярные категории товаров, а также список популярных товаров, чтобы переключить внимание с неудачи на возможность новых открытий. Если подписать «Сейчас в тренде» или «Бестселлеры», это выступит социальным доказательством.
In English. #search #empty_state
uprock.webflow.io
Ничего не найдено: как правильно проектировать «тупиковые» страницы — читайте на UPROCK
Сегодня мы рассмотрим 5 эффективных стратегий, которые помогут сохранить вовлеченность пользователей и вернуть их к выполнению основной задачи после неудачного поиска.. читайте полезные статьи о дизайне в блоге UPROCK
❤10👍6
Илья Бирман написал о кнопке «На главную» в пустом состоянии списка.
— К списку актов (и другим подобным разделам) пользователь переходит с помощью обычной навигации приложения;
— Она включает возможность перехода на главный экран и в другие разделы;
— Неправильно менять привычный навигационный паттерн из-за содержания конкретного экрана. Кнопка «На главную» не нужна;
— Если пустой список актов отображается из-за какой-то проблемы, то этот экран фактически — сообщение об ошибке;
— Хорошее сообщение об ошибке должно помогать её решить. В данном случае была бы уместна кнопка «Обновить» или «Запросить заново».
#error #empty_state
— К списку актов (и другим подобным разделам) пользователь переходит с помощью обычной навигации приложения;
— Она включает возможность перехода на главный экран и в другие разделы;
— Неправильно менять привычный навигационный паттерн из-за содержания конкретного экрана. Кнопка «На главную» не нужна;
— Если пустой список актов отображается из-за какой-то проблемы, то этот экран фактически — сообщение об ошибке;
— Хорошее сообщение об ошибке должно помогать её решить. В данном случае была бы уместна кнопка «Обновить» или «Запросить заново».
#error #empty_state
Бюро Горбунова
Кнопка‑заглушка
В чём различие этих двух экранов? Почему один плохой, а другой хороший? Почему один — имитация заботы, а второй — реальная забота о пользователе?
❤19👍4🙏1