Как повысить доступность контента на сайте для программ чтения с экрана и голосовых помощников: чек-лист
Для чего это нужно
• По данным ВОЗ за 2019 год в мире 2,2 млрд человек с нарушениями зрения.
• 25% всех поисковых запросов в России — голосовые.
• 41% взрослых и 55% процентов подростков в США используют голосовых помощников.
Рекомендации
• Делайте текст проще: используйте более короткие предложения и маркированные списки.
• Проверяйте текст на грамматические ошибки — они вносят путаницу в смысл.
• Расшифровывайте аббревиатуры при первом вхождении в текст или ставьте точки между буквами аббревиатуры — «мсб» вместо «Эм-Эс-Бэ» вряд ли кто-то поймет.
• Используйте подзаголовки, а не полужирный шрифт. Внимательно следите за иерархией заголовков.
• Ставьте эмоджи только в конец предложения, они сбивают программы для чтения с экрана и разбивают предложения.
• Ставьте заглавные буквы в начале каждого нового слова внутри хэштегов.
• Не делайте ссылки вроде «нажмите здесь» — давайте более подробную информацию. Добавляйте в HTML-код описание графических элементов навигации — «Кнопка отправляет заполненную форму». Добавляйте тег «обязательно» к обязательным полям форм.
• Дублируйте текст с иллюстраций в описании или метатегах изображения.
• Добавляйте описание инфографики, чтобы человек мог услышать данные графиков и диаграмм.
• Все метатеги должны быть ясными и четкими, не засоряйте их списками ключевых слов.
По материалам статьи «Tips to Improve Website Content for Screen Readers», Lisa Dougherty из Content Marketing Institute.
@contentsense | #UX
Для чего это нужно
• По данным ВОЗ за 2019 год в мире 2,2 млрд человек с нарушениями зрения.
• 25% всех поисковых запросов в России — голосовые.
• 41% взрослых и 55% процентов подростков в США используют голосовых помощников.
Рекомендации
• Делайте текст проще: используйте более короткие предложения и маркированные списки.
• Проверяйте текст на грамматические ошибки — они вносят путаницу в смысл.
• Расшифровывайте аббревиатуры при первом вхождении в текст или ставьте точки между буквами аббревиатуры — «мсб» вместо «Эм-Эс-Бэ» вряд ли кто-то поймет.
• Используйте подзаголовки, а не полужирный шрифт. Внимательно следите за иерархией заголовков.
• Ставьте эмоджи только в конец предложения, они сбивают программы для чтения с экрана и разбивают предложения.
• Ставьте заглавные буквы в начале каждого нового слова внутри хэштегов.
• Не делайте ссылки вроде «нажмите здесь» — давайте более подробную информацию. Добавляйте в HTML-код описание графических элементов навигации — «Кнопка отправляет заполненную форму». Добавляйте тег «обязательно» к обязательным полям форм.
• Дублируйте текст с иллюстраций в описании или метатегах изображения.
• Добавляйте описание инфографики, чтобы человек мог услышать данные графиков и диаграмм.
• Все метатеги должны быть ясными и четкими, не засоряйте их списками ключевых слов.
По материалам статьи «Tips to Improve Website Content for Screen Readers», Lisa Dougherty из Content Marketing Institute.
@contentsense | #UX
Как выбрать формат контента для онбординга в мобильном приложении
📌 Пошаговые руководства и учебные пособия
Они бывают статическими и динамическими. Динамические знакомят пользователей с основными функциями, интегрируются в интерфейс приложения.
Статические — это слайд-шоу или набор инструкций, которые пользователь изучает перед началом работы. Чаще всего используют в категориях «Образование», «Общение», «Путешествия» и «Фотография».
📌 Визуальные советы и уведомления
Помогают пользователям лучше разобраться в интерфейсе продукта. Этот метод особенно актуален для приложений с множеством интерактивных объектов или сложной навигацией. Если их использовать бездумно и не к месту, пользователи еще сильнее запутаются в интерфейсе и функциях продукта.
📌 Пустые состояния и образцы данных
Этот метод подходит для продуктов с большим объемом пользовательского контента. Он имитирует взаимодействие с продуктом и вызывает ощущение, будто пользователь должен был создать какой-то контент или заполнить информацию о себе, но еще не сделал этого. Уместно показывать их после регистрации или удаления каких-то данных. Пустые состояния позволяют ненавязчиво подтолкнуть пользователей к нужным действиям. Подходят для продуктов из категорий «Продуктивность», «Социальные сети» и «Общение».
По материалам статьи «Онбординг в приложении как инструмент retention: основные принципы проектирования и механики».
@contentsense | #UX
📌 Пошаговые руководства и учебные пособия
Они бывают статическими и динамическими. Динамические знакомят пользователей с основными функциями, интегрируются в интерфейс приложения.
Статические — это слайд-шоу или набор инструкций, которые пользователь изучает перед началом работы. Чаще всего используют в категориях «Образование», «Общение», «Путешествия» и «Фотография».
📌 Визуальные советы и уведомления
Помогают пользователям лучше разобраться в интерфейсе продукта. Этот метод особенно актуален для приложений с множеством интерактивных объектов или сложной навигацией. Если их использовать бездумно и не к месту, пользователи еще сильнее запутаются в интерфейсе и функциях продукта.
📌 Пустые состояния и образцы данных
Этот метод подходит для продуктов с большим объемом пользовательского контента. Он имитирует взаимодействие с продуктом и вызывает ощущение, будто пользователь должен был создать какой-то контент или заполнить информацию о себе, но еще не сделал этого. Уместно показывать их после регистрации или удаления каких-то данных. Пустые состояния позволяют ненавязчиво подтолкнуть пользователей к нужным действиям. Подходят для продуктов из категорий «Продуктивность», «Социальные сети» и «Общение».
По материалам статьи «Онбординг в приложении как инструмент retention: основные принципы проектирования и механики».
@contentsense | #UX
Визуализированная карта сайта: зачем она нужна и как ее создать
Карта помогает визуализировать связи между разными страницами и разделами, чтобы сделать сайт удобным для поисковиков и пользователей. Еще это удобный инструмент планирования для редакторов, дизайнеров и UX-специалистов, которые хотят улучшить навигацию по сайту, понять объем работ и не упустить важные части архитектуры сайта, убрать лишние рубрики, настроить правильную вложенность разделов.
Пошаговый план создания карты сайта
1. Найти шаблон карты сайта — например, можно взять готовый в библиотеке шаблонов Miro.
2. Составить список основных страниц и разделов сайта. Например: «Быстрый старт», «Продукт», «Блог», «О компании». Один стикер — один раздел.
3. Составить список дополнительных страниц и разделов сайта. Эти страницы и разделы обычно вложены в основные разделы. Например: «Кейсы», «Словарь», «Исследования рынков» внутри основного раздела «Блог».
4. Организовать структуру страниц с помощью шаблона: визуализировать вложенность разделов в иерархическое «дерево».
5. Обсудить с командой и заинтересованными лицами. Если получилось 20 основных разделов — надо пересматривать иерархию и сокращать их. Взгляд со стороны и мнение членов команды помогут правильно расставить приоритеты.
6. Пофиксить ненужные основные и дополнительные разделы.
7. Ревью с командой. Еще раз проверить вместе с командой карту сайта и уточнить, все ли согласны с такой структурой.
8. Оставить свободное пространство для заметок и комментариев. Они пригодятся для обсуждения с дизайнерами и разработчиками, а также чтобы акцентировать внимание на каких-то важных деталях.
По материалам статьи Анны Савиной, Content Marketing Manager в Miro, «How to create a sitemap in 8 steps: Designing a better UX flow»
@contentsense | #UX
Карта помогает визуализировать связи между разными страницами и разделами, чтобы сделать сайт удобным для поисковиков и пользователей. Еще это удобный инструмент планирования для редакторов, дизайнеров и UX-специалистов, которые хотят улучшить навигацию по сайту, понять объем работ и не упустить важные части архитектуры сайта, убрать лишние рубрики, настроить правильную вложенность разделов.
Пошаговый план создания карты сайта
1. Найти шаблон карты сайта — например, можно взять готовый в библиотеке шаблонов Miro.
2. Составить список основных страниц и разделов сайта. Например: «Быстрый старт», «Продукт», «Блог», «О компании». Один стикер — один раздел.
3. Составить список дополнительных страниц и разделов сайта. Эти страницы и разделы обычно вложены в основные разделы. Например: «Кейсы», «Словарь», «Исследования рынков» внутри основного раздела «Блог».
4. Организовать структуру страниц с помощью шаблона: визуализировать вложенность разделов в иерархическое «дерево».
5. Обсудить с командой и заинтересованными лицами. Если получилось 20 основных разделов — надо пересматривать иерархию и сокращать их. Взгляд со стороны и мнение членов команды помогут правильно расставить приоритеты.
6. Пофиксить ненужные основные и дополнительные разделы.
7. Ревью с командой. Еще раз проверить вместе с командой карту сайта и уточнить, все ли согласны с такой структурой.
8. Оставить свободное пространство для заметок и комментариев. Они пригодятся для обсуждения с дизайнерами и разработчиками, а также чтобы акцентировать внимание на каких-то важных деталях.
По материалам статьи Анны Савиной, Content Marketing Manager в Miro, «How to create a sitemap in 8 steps: Designing a better UX flow»
@contentsense | #UX
Магия UX: как во Flo заменили гайд по приложению на анкету и вырастили конверсию вдвое
Flo — мобильное приложение для женского здоровья. В последний год благодаря оптимизации контента в онбординге команде удалось увеличить конверсию в два раза.
Условно можно выделить два типа онбординга:
Обучающий онбординг. Когда мы говорим пользователю: сейчас нажми вот эту кнопку, теперь сделай вот так. Но у него есть проблема: он не формирует у пользователя правильные ожидания от продукта и не персонален.
Вовлекающий онбординг. Когда мы пытаемся рассказать пользователю, что его ждет дальше — но не в лоб, а косвенно, давая возможность самостоятельно сделать выводы.
Существует серьезная проблема — многие пытаются мыслить слишком рационально: есть пользователь, есть воронка контента, нам необходимо провести пользователя по всей воронке с максимальной конверсией. И кажется, что лучший онбординг — это тот, которого нет: например, один стартовый экран.
На деле команда Flo увидела, что пользователей надо подогревать еще до использования приложения (в современном маркетинге эта концепция тоже есть — например, когда прямо из рекламного креатива человека отправляют в квиз).
За год во Flo провели больше 400 экспериментов. Сначала шли по рациональному пути: показывали пользователям, как устроено приложение, рисовали красивые и понятные анимации. На UX-тестах этот вариант работал отлично: участники разбирались в функциях, им нравилась графика. При этом в реальных условиях этот тип онбординга конверсию не повышал.
В ходе экспериментов выяснили — правильный вопрос во время онбординга настраивает пользователя на взаимодействие с приложением гораздо лучше туториала. И хотя на UX-тестах вариант с анкетой работал плохо, на практике он отлично повышал конверсию.
По материалам подкаста make sense с Андреем Михайлюком, VP of Product во Flo «Об экспериментах в онбординге, проверке гипотез и вовлечении пользователей»
@contentsense | #UX
Flo — мобильное приложение для женского здоровья. В последний год благодаря оптимизации контента в онбординге команде удалось увеличить конверсию в два раза.
Условно можно выделить два типа онбординга:
Обучающий онбординг. Когда мы говорим пользователю: сейчас нажми вот эту кнопку, теперь сделай вот так. Но у него есть проблема: он не формирует у пользователя правильные ожидания от продукта и не персонален.
Вовлекающий онбординг. Когда мы пытаемся рассказать пользователю, что его ждет дальше — но не в лоб, а косвенно, давая возможность самостоятельно сделать выводы.
Существует серьезная проблема — многие пытаются мыслить слишком рационально: есть пользователь, есть воронка контента, нам необходимо провести пользователя по всей воронке с максимальной конверсией. И кажется, что лучший онбординг — это тот, которого нет: например, один стартовый экран.
На деле команда Flo увидела, что пользователей надо подогревать еще до использования приложения (в современном маркетинге эта концепция тоже есть — например, когда прямо из рекламного креатива человека отправляют в квиз).
За год во Flo провели больше 400 экспериментов. Сначала шли по рациональному пути: показывали пользователям, как устроено приложение, рисовали красивые и понятные анимации. На UX-тестах этот вариант работал отлично: участники разбирались в функциях, им нравилась графика. При этом в реальных условиях этот тип онбординга конверсию не повышал.
В ходе экспериментов выяснили — правильный вопрос во время онбординга настраивает пользователя на взаимодействие с приложением гораздо лучше туториала. И хотя на UX-тестах вариант с анкетой работал плохо, на практике он отлично повышал конверсию.
По материалам подкаста make sense с Андреем Михайлюком, VP of Product во Flo «Об экспериментах в онбординге, проверке гипотез и вовлечении пользователей»
@contentsense | #UX
Навигация по каналу
Канал поможет разобраться, как сделать работу с контентом понятной и управляемой: что важно в коммуникации с пользователем продукта, как и зачем строить свой блог или рассылку, как посчитать затраты и настроить аналитику, где искать новые решения и как их тестировать.
Вас ждут посты о том, как создавать контент для пользы продукта и бизнеса, статьи от опытных специалистов, кейсы крупных компаний и анонсы наших проектов и мероприятий.
С чего начать — в нашем канале есть несколько постоянных рубрик:
#text
• Что изучить по сторителлингу в бизнесе
• Четыре выпуска подкаста make sense о медиа и контенте
#strategy
• Создаем позиционирование за 9 шагов: алгоритм
• Работа с контент-стратегией в Skyeng
#analytics
• На какие метрики в первую очередь смотреть в контентных проектах
#UX
• Как выбрать формат контента для онбординга в мобильном приложении
• Визуализированная карта сайта: зачем она нужна и как ее создать
#case
• Кейс: как с помощью нейминга услуги увеличить конверсию
• Продуктовый подход к контенту: как Zapier ежемесячно приводит на сайт около 4 млн посетителей с поиска
Послушать подкаст-сериал «Как сделать бренд-медиа с нуля» можно здесь.
Мы команда ProductSense, делаем конференции и подписку по менеджменту продуктов, контенту и стратегии, ведем подкаст make sense, блог и еще два телеграм-канала: make sense и Product Mindset.
Канал поможет разобраться, как сделать работу с контентом понятной и управляемой: что важно в коммуникации с пользователем продукта, как и зачем строить свой блог или рассылку, как посчитать затраты и настроить аналитику, где искать новые решения и как их тестировать.
Вас ждут посты о том, как создавать контент для пользы продукта и бизнеса, статьи от опытных специалистов, кейсы крупных компаний и анонсы наших проектов и мероприятий.
С чего начать — в нашем канале есть несколько постоянных рубрик:
#text
• Что изучить по сторителлингу в бизнесе
• Четыре выпуска подкаста make sense о медиа и контенте
#strategy
• Создаем позиционирование за 9 шагов: алгоритм
• Работа с контент-стратегией в Skyeng
#analytics
• На какие метрики в первую очередь смотреть в контентных проектах
#UX
• Как выбрать формат контента для онбординга в мобильном приложении
• Визуализированная карта сайта: зачем она нужна и как ее создать
#case
• Кейс: как с помощью нейминга услуги увеличить конверсию
• Продуктовый подход к контенту: как Zapier ежемесячно приводит на сайт около 4 млн посетителей с поиска
Послушать подкаст-сериал «Как сделать бренд-медиа с нуля» можно здесь.
Мы команда ProductSense, делаем конференции и подписку по менеджменту продуктов, контенту и стратегии, ведем подкаст make sense, блог и еще два телеграм-канала: make sense и Product Mindset.