Тексты как инструмент обеспечения удобства веб-сайтов

Тексты — это, наверное, один из ключевых способов сделать сайт более или менее удобным. Они являются неотъемлемой составляющей не только содержательной, но и функциональной части страницы.

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

Поэтому дизайнерам приходится иногда брать на себя задачу копирайтера. Но это не единственная причина, почему им полезно понимать, как следует подходить к текстам для веб-сайтов. Именно дизайнер видит, как подготовленные тексты выглядят в реальном макете.

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

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

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

Стратегии взаимодействия текста с дизайном

Существуют две основные стратегии взаимодействия текста с дизайном:

  • Дизайн, ориентированный на содержание
  • Содержание, ориентированное на дизайн

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

Познакомимся с ними поближе!

Дизайн, ориентированный на содержание

В дизайне, ориентированном на содержание, главным является содержание. Это означает, что какой бы ни была длина заголовка, каким бы ни был абзац, какими бы ни были изображения — дизайн все равно должен восприниматься гармонично.

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

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

Эта стратегия используется и для проектирования интернет-магазинов, блогов и, часто, онлайн-сервисов.

Конечно, даже в случае применения этой стратегии дизайнеры и контент-менеджеры часто пытаются обеспечить эстетичность готового проекту. Но это требует дополнительных усилий.

Например, сервис shafa.ua, на котором пользователи могут размещать объявления о продаже одежды и аксессуаров, непосредственно в редакторе прописывает подсказки и требования к фотографиям и описанию товаров.

Содержание, ориентированное на дизайн

В этой стратегии содержание сайта подстраивается под его композицию. Заголовки должны быть конкретного размера, изображение — оформлены определенным образом, количество символов в абзаце определяется тем, сколько символов позволяет применить данная композиция.

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

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

Ключевые требования к текстам в интернете

Тексты должны быть осмысленными

Прежде чем создавать и тем более верстать текст (на посадочной странице или в форме), его важно осмыслить и обработать, желательно — с участием редактора. Ключевая ошибка многих разработчиков веб-сайтов — пренебрежение восприятием текстов и формальный подход к ним. Для дизайнеров это нормально — безо всякого анализа копировать присланный текст и вставлять его в макет или на уже готовый сайт.

Это неправильный подход. Первое, что должен делать дизайнер при верстке любого элемента, который содержит текст, — читать его, анализировать.

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

В текстах должна легко считываться иерархия содержания

Второе важное требование к тексту — соблюдение иерархии содержания. Мы подробно описывали, как она устроена в графическом дизайне. В веб-дизайне иерархия работает аналогично: вы должны четко передавать ощущение того, какой элемент является первичным, какой вторичным, и кто кому подчиняется.

Тексты в вебе должны быть лаконичными

Особенность текстов для веба заключается в том, что они тяготеют к компактной форме. Это связано, в частности, с тем, что значительная часть посетителей веб-сайтов просматривает их со смартфонов в вертикальной ориентации. Вот почему пространные и длинные формулировки не смогут полноценно разместиться в пределах одного экрана, это нарушит закон целостности, о котором мы писали в предыдущем материале.

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

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

Тексты должны быть понятными и быстро восприниматься

Тексты для веб-сайтов должны быть не только лаконичными, но и максимально понятными.

Стандартное время пребывания пользователя на сайте, как правило, не превышает 2 минут. Поэтому важно, чтобы тот текст, который вы используете, быстро усваивался.

Понятность не всегда легко оценить самостоятельно, поэтому полезно показывать интерфейс и тексты тестировщикам или даже небольшой фокус-группе.

Стиль повествования должен быть адаптирован под целевую аудиторию

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

Например, в формах в таком случае допустимо обращение на «ты», а в уведомлениях — шутки о котиках или сленг. Впрочем, даже у такого серьезного направления, как онлайн-банкинг, такая манера общения встречается. Например, аудитории приложения Monobank, очевидно, неформальный стиль общения в нем нравится.

Тексты должны быть грамотными

Здесь нам нечего добавить. Когда работаете с текстами — не жалейте бюджет на работу редактора. Все мы ошибаемся, это нормально. Но неправильно оставлять эти ошибки в вашей работе.

Теперь, когда мы познакомились с общими принципами подготовки текстов для веба, рассмотрим отдельные рекомендации для различных текстовых элементов.

Рекомендации по заголовкам в веб-дизайне

Разбивайте большие тексты подзаголовками

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

Делайте заголовки короткими (и осмысленными)

Мы уже отмечали, что в вебе надписи должны быть лаконичными. И особенно важно это в контексте заголовков.

Если конкретно: лучшая длина заголовка — до 5 слов, включая предлоги. В исключительных случаях — 7 слов. Но в погоне за лаконичностью не теряйте осмысленности. Лучше, когда заголовок — это полноценная мысль, которая резюмирует смысл статьи или секции, к которой он принадлежит.

Подчеркивайте иерархию начертанием

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

Помните о цветовых контрастах

Старайтесь делать цвет заголовков более насыщенным, чем цвет основного текста. Часто насыщенный текст большого размера может терять свой иерархический вес из-за того, что он намного бледнее или светлее, чем основной текст.

Рекомендации по абзацам

Избегайте слишком длинных абзацев

Лаконичность в вебе уместна не только для функциональных элементов, но и для текстовых массивов. Старайтесь, по возможности, делать описательные абзацы короткими. Пять-семь строк — хороший размер абзаца.

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

Иллюстрируйте содержание при каждом удобном случае

Текст — это один из способов описать определенный смысл. Но не единственный и не всегда оптимальный. Помните? В вебе важно создавать такое содержание, которое обеспечит быстрое восприятие информации. А хорошо известно, что часто лучше один раз увидеть, чем несколько раз услышать (или в случае текстов — прочитать).

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

Да, конечно, дополнительная графика обременит бюджет проекта, но в большинстве случаев такие дополнительные инвестиции себя оправдают.

Рекомендации по ссылкам

Делайте ссылки понятными и удобными

В вебе любой текст можно делать ссылкой. Но при этом лучше избегать надписей вроде «тут» и слишком коротких текстов («1», «2», «3» и так далее).

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

Соответствующее семантике оформление

Если определенный элемент в тексте является ссылкой, это следует подчеркнуть с помощью соответствующего графического оформления. Быстрее передает идею ссылки подчеркнутый текст, но допустимо использовать просто другой цвет для текста, который является ссылкой.

Рекомендации по формам

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

Выбирайте понятное название формы

У каждой формы обязательно должно быть название. Причем желательно, чтобы он был не формальным, а максимально четко раскрывал суть последствий заполнения формы. Например, лучше написать «Заказ книги “Красота”», чем просто «Оформление покупки».

Подписывайте поля соответствующими названиями

У каждого поля, как и формы, есть собственное название. Название поля (элемент label) пишется, как правило, существительным. Поэтому лучше не писать «Введите ваше имя». Достаточно просто «Ваше имя». Так лаконичнее.

Не дублируйте в тексте-заполнителе название поля

Текст-заполнитель (placeholder) способствует более корректному заполнению формы. Поэтому не стоит в нем дублировать название. Используйте этот элемент как дополнительную подсказку. Например, названием поля может быть «Имя», а текст-заполнитель поможет объяснить, что вы просите заполнить именно полное имя.

Дополняйте поля полезными всплывающими подсказками

Иногда текста-заполнителя недостаточно, чтобы предупредить обо всех требованиях к данному полю. В таких случаях полезно использовать всплывающие подсказки. Они могут иметь произвольный размер и передавать больше полезной информации об особенностях и ограничениях данного поля.

Сообщайте об ошибках сразу

Если пользователь заполнил какие-то поля неверно — лучше об этом сообщать, как только ошибка произошла. И, если возможно, указывать, что именно не так. Для этого поле меняет оформление, как правило, на красноватое, а рядом с формой (лучше под ней) появляется текст с разъяснением ошибки и рекомендацией, как ее исправить.

Создавайте состояние отправленной формы

Не забывайте о состоянии успешной отправки формы. Часто дизайнеры оформляют только саму форму, и разработчики создают это состояние по своему усмотрению. Чтобы такого не произошло, надо сделать состояние отправки формы и описать в нем, что должно произойти дальше. Например, известить пользователя, что теперь ему на почту придет письмо с дальнейшими инструкциями, а если письмо не пришло — надо проверить папку «спам».

Готовьте оформления автоматических писем

Часто формы, содержащие поле «электронная почта», отправляют на нее автоматизированные письма. И об оформлении этих писем также часто забывают, из-за чего пользователи могут получить письмо с совершенно неприемлемой версткой. Чтобы этого не произошло, дизайнер во время проектирования формы должен проверить все в соответствии с ТЗ: должна ли она отправлять пользователю письмо после заполнения, и если да — сделать для этого письма соответствующее оформление.

Рекомендации по кнопкам

Последняя группа элементов, в которой часто встречаются тексты — это кнопки. В отношении них также существует ряд полезных рекомендаций.

Используйте глаголы (когда это целесообразно)

Кнопка — это элемент, который приводит к действию. И, соответственно, надписи на кнопках должны передавать смысл определенного действия. А для этого полезно использовать глаголы. Например, «Искать» для поля поиска или «Отправить» для отправки письма или сообщения в чате.

Ищите короткую форму надписей

Впрочем, часто в украинском языке глаголы органично воспринимаются в сочетании с существительными. И форма надписи на кнопке «Перейти на следующую страницу», согласитесь, слишком длинная. Помните, что на первом месте в выборе слов для сайта все же стоят ясность и лаконичность. Поэтому если всю эту длинную фразу можно легко заменить на слово «Далее» или даже на символ стрелки «→», так и следует делать.

Дополняйте важные кнопки иконками

Поскольку для веб-сайтов важна скорость восприятия информации, кнопки полезно дополнять иконками.

Для примера: просто посмотрите на контекстное меню действий с файлом в сервисе Google Drive. С иконками и без них.

Это, кстати, полезно еще и потому, что в мобильной версии сайта достаточно часто вид кнопки минимизируют, и наличие иконки позволяет уменьшить кнопку до, собственно, размера этой иконки.

·
817
·
goodsuper 4
Наступна стаття
Цвет как средство обеспечения удобства веб-сайта
0
Головна