Сложно представить себе сайт или приложение без текста. В сочетании с визуальными элементами текстовый контент помогает пользователям ориентироваться, выполнять задачи и передаёт сообщения в удобной для чтения и визуально приятной композиции.
Очень важно начать продумывать текстовые блоки уже на этапе создания вайрфреймов, как можно раньше заменяя «Lorem ipsum» на реальный текст. Это позволит дизайнерам и другим членам команды лучше представить организацию, функциональность и приоритетность контента на страницах и сформировать более качественные требования.
Текстовые блоки (Text blocks)
Текстовый контент — важная часть любого продукта. На ранних этапах разработки, когда у вас ещё нет готового текста, можно использовать текстовые блоки — контейнеры или условные «каракули». С их помощью можно задать размеры текстовых контейнеров, определить заголовки и продемонстрировать общую логику организации контента на странице.
Текст-заполнитель (Dummy text)
Каждый дизайнер хотя бы раз в своей карьере использовал «Lorem ipsum». Текст-заполнитель — это комбинация модифицированных латинских слов, которые служат временной заменой реальному тексту. Положительный момент в том, что такой текст бывает полезен на начальных этапах планирования и генерации идей.
С другой стороны, текст-заполнитель не предоставляет достаточно информации и может привести к многочисленным корректировкам в будущем.
Совет! Если у вас ещё нет готового контента, используйте текст примерно такой же длины и стилистики или заимствуйте похожий по стилю контент с сайтов конкурентов.
Реальный текст и подсчёт символов
Текст-заполнитель нужно использовать только столько, сколько это действительно необходимо, и желательно как можно скорее переходить к реальному тексту. Например, во время пользовательского тестирования или презентации клиентам вайрфреймы с реальным текстом позволяют всем участникам лучше увидеть картину целиком, оценить контент в его реальном контексте и более точно почувствовать будущий продукт. Кроме того, это обеспечивает получение более развёрнутой обратной связи.
Дополнительно инструмент Balsamiq позволяет видеть фактическое количество символов, если пространство для текстовых блоков ограничено. Так ваши копирайтеры и разработчики смогут увидеть лимит, чтобы, соответственно, написать и выровнять контент.
Перенос текста (Text wrapping)
Проектируя интерфейсы для мобильных устройств и веба, убедитесь, что ваши вайрфреймы показывают, как текст будет адаптивно отображаться на разных устройствах. Здесь есть несколько моментов, которые нужно учитывать, например: подходящий размер шрифта для основного текста, длина строки и межстрочный интервал. Самое важное на этапе создания вайрфреймов — это правильный перенос текста и сохранение визуальной иерархии.
- Заголовки: используйте сокращение текста с многоточием (…), убедившись, что пользователи могут увидеть полный текст при наведении или через всплывающие подсказки. В сокращённом тексте должно оставаться как минимум 4 символа без сокращения.
- Текстовые блоки: используйте сокращение текста и кнопку «Показать больше», чтобы пользователи могли увидеть скрытый текст ниже границы экрана или на отдельной странице.
Совет! Применяйте сокращение текста также для хлебных крошек (breadcrumbs), пагинации и длинных URL-ссылок.
Локализация (Localization)
Когда продукт или сервис планируется запускать на глобальном рынке, необходимо провести локализацию. В идеале локализация — это больше, чем просто перевод, она подразумевает адаптацию текста с учётом особенностей культуры, вкусов и стилей конкретной страны. Этап создания вайрфреймов позволяет дизайнерам заранее предусмотреть и решить технические проблемы локализации.
- Визуальная композиция (Layout): Если ваш продукт предназначен для стран, где используются языки с письмом справа налево, это нужно отразить в вайрфреймах. Иначе пользователи, не читающие в традиционных шаблонах (например, F- или Z-образных), сочтут ваш сайт неудобным.
- Пространство: Некоторым языкам, таким как немецкий или русский, требуется больше пространства, чем английскому.
- Разные форматы: Не секрет, что разные страны и культуры используют различные форматы написания дат, валют, телефонных номеров и других данных. Например, американцы пишут даты в формате MM-DD-YYYY, европейцы — DD-MM-YYYY, а китайцы — YYYY-MM-DD.
Краевые случаи (Edge cases)
Работая над тем, как органично вписать контент и избежать переполнения текстом или наложения элементов, думайте нестандартно и учитывайте краевые случаи (edge cases). Проще говоря, краевые случаи — это всё, что может пойти не так в процессе презентации продукта, пользовательского тестирования или на последующих этапах разработки.
- Тексты ошибок: Ошибки неизбежны, поэтому необходимо заранее продумать, где появится уведомление или сообщение о неверно заполненных полях.
- Количество символов: Учитывайте сценарии, при которых текстовые блоки могут быть пустыми, содержать слишком мало или слишком много текста.
- Доступность (Accessibility): Убедитесь, что продукт доступен всем пользователям, и в ваших вайрфреймах предусмотрены альтернативные тексты (alt text) для изображений, ссылок и кнопок.