Содержание

Как проанализировать юзабилити текстов на сайте

6914

How-to – Читать 9 минут

Прочитать позже

ЧЕК-ЛИСТ: ЮЗАБИЛИТИ

Инструкцию одобрила
SEO Team Lead в Nimax

Анна Сергеева

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

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

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

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

Основные характеристики качественного контента

#1

Уникальность

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

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

Один из таких сервисов — Copyscape. Он бесплатен и не требует регистрации. Вы просто переходите по ссылке, указываете адрес страницы, которую необходимо проверить, и запускаете анализ одним кликом, как изображено на скриншоте.

После окончания анализа сервис покажет список страниц с похожим контентом.

Проверка уникальности сейчас — обычное дело, поэтому на просторах интернета вы можете найти и более удобные для себя инструменты (Text.ru, Антиплагиат и многие другие).

#2

Соответствие целевой аудитории

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

Вы должны готовить содержание контента под своего клиента, которому вы предлагаете услуги, товары и прочее. Главное — помните, что текст должен быть интересен клиенту с первых строк, а не с середины, потому что пользователь смотрит всего на пару строк и сразу принимает решение, читать ему дальше или искать кого-то получше вас.

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

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

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

Важно выяснить: насколько быстро становится понятно о чем идет речь, чего не хватает, что нужно убрать, а что добавить. Мнение со стороны крайне важно. Обычно достаточно опросить трех-четырех человек, и вы увидите, что у ваших потенциальных клиентов похожее мнение и видение.

#3

Текст должен продавать

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

    Подчеркните, что вы знаете проблему, с которой клиент пришел на сайт, и решаете ее: «Сломался кран? Купите новый….». Можно долго описывать достоинства всех кранов из вашего каталога, но клиенту это вряд ли нужно, его интересует решение проблемы. Озвучьте его.

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

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

    Используйте статистические данные и добавьте цифры. Например: «Мы продали 28 987 кранов за этот год». Конкретика — наше все.

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

    #4

    Структурированные блоки и читабельность

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

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

    Поэтапно ведя его к покупке:

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

    #5

    Список преимуществ

    Расскажите клиенту о своих преимуществах. Информацию такого рода удобнее воспринимать небольшими графическими блоками:

    Разбейте посадочные страницы на отдельные блоки, каждый из которых отвечает за конкретное направление. Например: отзывы, клиенты, тарифы, услуги, акции и так далее.

    #6

    Используйте меньше текста

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

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

    Сервис проанализирует конкурентов по фразе из топ-15, покажет минимальную, максимальную и ожидаемую длину текста, а также даст рекомендации по распределению ключевых слов в Title, h2 и Body.

    #7

    SEO-оптимизация текста

    Обратите внимание на следующие параметры текста, которые оказывают существенное влияние на позиции в органической выдаче:

    • корректно заполненные Title, Description, h2 — H6 для каждой страницы;

    • настроенная внутренняя перелинковка;
    • оптимизированные изображения;

    • контроль показателей заспамленности, тошноты, воды.

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

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

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

    #8

    Формы связи и прочие фишки

    Формы обратной связи — must have в большинстве сфер бизнеса. Дайте возможность клиенту заказать звонок прямо на сайте. Помните, что форма должна быть простой и не запрашивать лишнюю информацию.

    Обязательные к заполнению поля «Имя», «Фамилия», «Отчество», «Адрес», «Телефон» и прочие могут отпугнуть клиента. Кто захочет делиться своими данными с неизвестной компанией? В специфической нише — например, интим-товары — это будет особенно актуально.

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

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

    Заключение

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

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

    Не используйте сплошной текст и определите рамки по количеству символов — в этом может помочь «Текстовая аналитика» Serpstat.

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

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

    » title = «Как провести анализ юзабилити текстов 16261788198861» />

    «Список задач» — готовый to-do лист, который поможет вести учет
    о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.

    Начать работу со «Списком задач»

    Serpstat — набор инструментов для поискового маркетинга!

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

    Набор инструментов для экономии времени на выполнение SEO-задач.

    Получить бесплатный доступ на 7 дней

    Оцените статью по 5-бальной шкале

    4.8 из 5 на основе 5 оценок

    Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

    Рекомендуемые статьи

    How-to

    Denys Kondak

    Как проверить нагрузоустойчивость сайта

    How-to

    Denys Kondak

    Как добавить виджет комментариев на сайт

    How-to

    Denys Kondak

    Как проанализировать анкор-лист

    Кейсы, лайфхаки, исследования и полезные статьи

    Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

    Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

    Поделитесь статьей с вашими друзьями

    Вы уверены?

    Спасибо, мы сохранили ваши новые настройки рассылок.

    Сообщить об ошибке

    Отменить

    Юзабилити онлайновых текстов — Энциклопедия переводчика

    Содержание

    • Юзабилити онлайновых текстов

      • I. Чем чтение бумажной книги отличается от чтения веб-страницы?

      • II. Принципы написания онлайновых текстов

      • 1. Простой стиль изложения

      • 2. Четкая структура

      • 3. Краткость изложения

      • 4. Принцип перевернутой пирамиды

      • 5. Связь с личным опытом читателя

      • 6. Не опускаться под «сгиб»

      • 7. Ключевые слова

    Искать и отбирать нужную информацию в сети совсем не то, что рыться в её поисках в-бумажных источниках. Это хорошо известно веб-дизайнерам, у которых имеются свои чёткие правила, как сделать страницы сайтов простыми и удобными в использовании. Эти правила они называют юзабилити. Впервые об этой проблеме стал говорить ещё в 1997 г. Якоб Нильсен, которого в шутку теперь называют «отцом юзабилити».

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

    Заботиться не только об информативности своих текстов, но и их юзабилити полезно и авторам статей онлайновой энциклопедии «Города переводчиков» (даже если, в силу особенностей жанра, им не всегда будет удаваться эти правила соблюсти).

    I. Чем чтение бумажной книги отличается от чтения веб-страницы?

    • Интернет содержит совершенно неохватный объем информации. Всё это невозможно переварить.

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

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

    II. Принципы написания онлайновых текстов

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

    1. простым;

    2. структурированным;

    3. кратким;

    4. составлен по принципу «перевёрнутой пирамиды»;

    5. соотноситься с личным опытом читателя;

    6. не уходить под «сгиб»;

    7. содержать важные для читателя ключевые слова и фразы.

    Рассмотрим немного подробнее каждый из этих шести принципов.

    1. Простой стиль изложения

    Простота изложения улучшает восприятие и запоминание текста. Поэтому:

    • Один текст — одна тема. Не пытайтесь рассказать обо всем сразу.

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

    • Предпочтительно использовать понятные пользователям слова, даже если это жаргон (только если это широко известный среди целевой аудитории жаргон).

    2. Четкая структура

    Структурированность ускоряет время «сканирования» текста взглядом. Отсюда следующие правила:

    • Один абзац — одна мысль. Эту мысль лучше изложить в самом начале абзаца. Разделяйте текст абзацами в 2–5 предложений, несущих одну законченную мысль. Это сделает текст менее монотонным и подчеркнет его основные идеи.

    • Большие тексты необходимо разделять подзаголовками. Заголовки и подзаголовки должны быть информативными, не слишком заумными, без глубоких скрытых смыслов: посетителям сайта, ищущим конкретную информацию, некогда разгадывать загадки.

    • Простой текст плохо пригоден для «сканирования», поэтому списки всегда лучше абзацев, таблицы лучше списков, инфографика лучше таблиц.

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

    • Начинайте статью с анонса. При относительно небольшом объёме (1–2 абзаца) анонс должен обладать максимальной информативностью, такой же, какой обычно обладает раздел «Выводы и заключения».

    3. Краткость изложения

    Лаконичность поможет читателю благополучно дочитать текст до конца.

    • Чем короче текст, тем лучше он воспринимается с монитора. Идеальным с точки зрения человеческого восприятия считается экранный текст в 500–700 знаков (более короткие тексты могут быть недостаточно информативными).

    • За один «подход» к такому тексту читатель способен воспринять и «переварить» примерно 50% его объёма.

    • Полноценная статья в 2500–3500 знаков прочитывается лишь на 20–30%. Вот почему так важен «цепляющий» анонс в начале статьи.

    • Ну а тексты свыше 3500 знаков уже «на любителя». Дочитать их до конца отваживаются лишь те, кому действительно нужна данная информация.

    4. Принцип перевернутой пирамиды

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

    5. Связь с личным опытом читателя

    Этот принцип значительно улучшает связь между автором и читателем. Мы всегда лучше запоминаем то, что связано с нашим опытом, чем то, что нас никогда не касалось.

    Имена персонажей, факты, истории — излагая их, старайтесь по возможности проводить параллели с личным опытом читателя.

    6. Не опускаться под «сгиб»

    «Сгибом» (англ. fold) условно называют нижнюю линию окна браузера. Простыми словами: текст, по возможности, должен умещаться целиком на экране, чтобы его не надо было прокручивать.

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

    7. Ключевые слова

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

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

    • Ключевые слова. Их количество будет зависть от длины текста, конечно, но в любом случае не меньше 3–4 на страницу.

    • Ключевые фразы. Ключевая фраза — это ключевые слова в нужном порядке (например, «межкомнатные двери»). В тексте страницы несколько раз должна встречаться не только ключевая фраза целиком (условно: 6 раз), но и составляющие ее слова поодиночке (условно: межкомнатные — ещё 4 раза и двери — ещё 3 раза).

    • Одна страница — одна ключевая фраза. На каждой странице должна быть, по возможности, только одна ключевая фраза, типичная только для данной страницы. Можно подобрать 2–3 родственные фразы.

    • Плотность ключевых слов. Оптимальная плотность — 5–7%, то есть 5–7 ключевых слов на каждые 100. Если плотность ключевых слов слишком низкая, поисковая система не будет считать эту страницу релевантной. Если плотность ключевых слов слишком большая — поисковая система расценит это как некорректную попытку искусственно поднять рейтинг страницы и включит спам-фильтр.

    • Место ключевых слов и фраз на странице и их оформление.

      • Чем ближе ключевые слова стоят к началу документа, тем лучше их воспринимает поисковая система.

      • Включайте ключевые слова в заголовки и подзаголовки.

      • Выделяйте ключевые слова жирным текстом (если не все, то хотя бы половину).

    • Ключевые слова и фразы на главной странице сайта. В тексте этой страницы должны содержаться наиболее важные ключевые слова, до 30–40% от общего поискового трафика.

    • Ключевые слова в навигационном меню. По возможности должны присутствовать.

    Составитель: Виктория Максимова

    Категория: Процесс перевода

    Специально для «Энциклопедии переводчика» в «Городе переводчиков».

    За исключением случаев, когда указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Noncommercial-Share Alike 3.0 Unported

    12 рекомендаций по типографике для удобства использования веб-сайта

    Алисса Кларк

    Улучшение вашего веб-сайта удобства использования

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

    Элементы и назначение

    Типографика

    Более 90% информации в Интернете представлено в письменной форме. Это неизбежно увеличивает потребность в правильной укладке. Типографика может быть определена как « искусство и техника аранжировки шрифта для того, чтобы сделать язык видимым » (Источник: Википедия). Проще говоря, типографика предназначена для улучшения стиля отображения этой информации. Однако практическая реализация типографика не так однозначна, поскольку доказано, что типографика влияет на разборчивость и читаемость любого текста.

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

    Разборчивость и читабельность веб-сайта

    Удобство использования

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

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

    Юзабилити Фактор Типографика

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

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

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

    Типографика Рекомендации для веб-сайта Удобство использования

    Ниже приведен список из 12 практических типографика рекомендации, которые помогут вам улучшить общее удобство использования вашего веб-сайта:

    1. Сведите количество используемых шрифтов к минимуму: Использование большого количества шрифтов (более 3 разных шрифтов) придает веб-сайту вид неструктурированный и непрофессиональный
    2. Используйте шрифты без засечек вместо шрифтов с засечками для содержимого: Шрифты без засечек больше подходят для экрана, чем шрифты с засечками, которые лучше подходят для заголовков и печати
    3. Убедитесь, что используется правильный текст и размер текста: Рекомендуется, чтобы шрифты Arial Trebuchet и Georgia были размером 10 пунктов+, Times New Roman — 12 пунктов+, а шрифты Comic Sans и Impact не использовались
    4. В содержимом должны использоваться смешанные заглавные буквы: Если весь текст написан заглавными или маленькими заглавными буквами, пользователю будет трудно его читать и просматривать. Текст, написанный заглавными буквами, делает веб-сайт непрофессиональным и ненадежным
    5. Используйте стандартные шрифты для шрифтов веб-сайта: Пользователи лучше знакомы со стандартными шрифтами и поэтому могут быстрее их читать
    6. Расстояние между символами не должно быть сведено к минимуму: Изменение расстояния между символами для увеличения объема текста делает его более плотным и трудным для сканирования
    7. Ограничение использования разных цветов для шрифтов: Когда текст переработан, это влияет на его смысл. Кроме того, пользователи могут принять за рекламу переработанный текст. Таким образом, для раскрашивания текста рекомендуется использовать 4 разных цвета или меньше.
    8. Не используйте синий цвет для контента: Пользователи ассоциируют синий текст со ссылками и поэтому могут попытаться нажать на него
    9. Избегайте окрашивания текста в красный или зеленый цвет: Поскольку дальтонизм является распространенным заболеванием, особенно среди мужчин (8% мужчин дальтоники), рекомендуется всегда использовать другие признаки в дополнение к цвету, чтобы различать важный текст. Также рекомендуется избегать использования красного и зеленого цветов, поскольку дальтонизм на красный и зеленый цвета является наиболее распространенной формой дальтонизма
      10. .
    10. Не используйте одинаковые или похожие цвета для текста и фона: Чем лучше виден текст, тем быстрее пользователи смогут его сканировать и читать
    11. Номера, состоящие из 5 или более цифр, должны иметь разделитель тысяч: Разделитель тысяч облегчает пользователям быстрое сканирование и интерпретацию чисел
    12. Не использовать движущийся или мигающий текст: Хотя технологии, с помощью которых они реализованы, изменились, эти методы, которые были с нами с первых дней существования Интернета, все еще можно найти на некоторых веб-сайтах. Их цель все та же — привлечь внимание пользователей. Однако они создают непрофессиональный образ и могут привести к тому, что пользователи покинут веб-сайт.

    Хотите узнать больше?

    Если вас интересует пересечение UX и дизайна пользовательского интерфейса, рассмотрите возможность пройти онлайн-курс «Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения» или «Дизайн-мышление: руководство для начинающих». Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс User Experience (или другую тему дизайна). Удачи на вашем пути обучения!

    (Главное изображение: wilhei через Pixabay)

    Рубрики: Руководство по пользовательскому интерфейсу С тегами: Интерфейс и навигация, Удобство использования, Руководство по удобству использования, Написание для Интернета

    Об Алиссе Кларк

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

    10 принципов удобочитаемости и веб-типографики — Smashing Magazine

    • Чтение: 14 мин.
    • Витрины, Типография, Дизайн, Читабельность
    • Поделиться в Twitter, LinkedIn
    Об авторе

    Мэтт Кронин — заядлый графический дизайнер, веб-дизайнер/разработчик, программист Cocoa, фотограф, цифровой художник и тому подобное. Он также любит писать и делает… Больше о Мэтт ↬

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

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

    В этом посте мы объясним некоторые термины веб-типографики и то, как они влияют на удобочитаемость ; мы предоставим множество советов, которые помогут улучшить читабельность вашего контента; и мы покажем очень читаемые веб-сайты, макеты и статьи.

    Дополнительная литература на SmashingMag:

    • 8 простых способов улучшить типографику в ваших проектах
    • Использование пробелов для удобства чтения в HTML и CSS
    • Применение макротипографики для более читаемой веб-страницы
      • CSS
    • Техники, вдохновленные Photoshop, на 100%

    Термины и их значение для удобочитаемости

    На удобочитаемость текста влияет множество факторов. Есть также ряд терминов, и все они очень важны. Вот несколько наиболее распространенных терминов веб-типографики и объяснение того, как каждый термин влияет на удобочитаемость.

    Больше после прыжка! Продолжить чтение ниже ↓

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

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

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

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

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

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

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

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

    Ключи к удобочитаемой типографике

    Добиться удобочитаемости относительно легко; все, что нужно, это следовать нескольким ключевым практикам. Удобочитаемая веб-страница может иметь большое значение для ваших пользователей, а удобочитаемость оказывает огромное влияние на их опыт. Дизайн для Интернета заключается в том, чтобы сделать работу пользователя максимально приятной. Вот 9 советов, которые помогут вам добиться удобочитаемости.

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

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

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

    2. Сканируемый текст Я уже много раз упоминал «сканируемый» текст, и вы наверняка слышали его где-то еще. Сканируемый текст идет рука об руку с читаемым текстом. Чтобы сделать копию доступной для сканирования, нужно правильно использовать заголовки, иерархию и точки фокусировки, чтобы направлять пользователя по контенту.

    Итак, что делает копию сканируемой? Ну, есть много факторов, большинство из которых уже упоминалось. Размер и положение заголовка, размер основного текста, высота строки текста, контрастность текста и способ различения точек фокусировки все влияет на возможность сканирования копии.

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

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

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

    4. Консистенция Согласованность часто рассматривается как важная техника для удобства использования, но она также применима и к удобочитаемости. Согласованность в иерархии важна для удобного макета. Это означает, что все заголовки одинаковой важности в иерархии должны быть одного размера, цвета и шрифта. Например, все заголовки

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

    5. Плотность текста Плотность текста относится к количеству слов, которые вы размещаете в одной области. Плотность контента оказывает большое влияние на читабельность вашего контента. На плотность влияют параметры интервала, такие как высота строки, расстояние между буквами и размер текста. Если вы найдете баланс между всем этим, чтобы содержимое не было ни слишком компактным, ни слишком большим, у вас будет идеальная плотность, которая одновременно читается и сканируется.

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

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

    На фото ниже статья из UXBooth. В этой статье жирным шрифтом и курсивом выделяется важная информация в статье. Это очень удобочитаемая статья, и в ней очень легко сканировать информацию.

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

    8. Чистая графическая реализация Каждое текстовое тело нуждается в какой-то визуальной поддержке, будь то изображение, значок, график или иллюстрация. Размещение графики в статье может быть сложной задачей. Между графикой и текстом должно быть достаточно места.

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

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

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

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

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

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

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

    В приведенном ниже макете на основе сетки поля и только поля используются для разделения текста. В результате получается чистая, четкая и лаконичная страница.

    Эффекты, придающие типографике изюминку

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

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

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

    Стиль фона Добавление красивого фона может быть столь же эффективным, как и стилизация текста. Украшая фон основного текста, вы стилизуете текст. Стилизация фона может быть визуально красивой, но также может ухудшить разборчивость. Это потенциально большая проблема, но ее легко избежать.

    Сохраняйте контраст Прежде всего, важно поддерживать контрастность в пределах читаемого диапазона. Для фона используйте цвета, которые намного тоньше и тусклее, чем цвета текста. Это позволит глазу пользователя сосредоточиться на тексте и не отвлекаться на фон.

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

    Вот темный веб-сайт с хорошим типографским стилем. Типографика имеет декоративный фон, но контраст все равно хорошо работает. Сам текст не имеет стиля, но его компенсирует фон.

    Это еще одна отличная текстура, поддерживающая типографику. Текстура фона напоминает холст, а типографика выполнена в виде акварели.

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

    Витрина с элементами справки

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

    Статьи блога Удобочитаемость особенно важна для статей в блогах. Вот несколько отличных примеров.

    PSD.TUTSPLUS и каждый блог Envato имеют очень читабельный контент. Этот конкретный пример демонстрирует хорошее использование заголовков в хорошо структурированной иерархии.

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

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

    Учебник9 Обратите внимание на то, как эта статья на Tutorial9 обеспечивает хорошее количество интервалов и красивую рамку вокруг изображений. Текст течет, и изображение не отвлекает от текста.

    Подпитка вашего творчества В статьях о подпитке вашего творчества очень продуманные интервалы между заголовками и подзаголовками. Пустое пространство поддерживает текст.

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

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

    Пиксельматор Макет этой страницы идеально расположен. Текст движется вокруг изображения.

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

    Высотное Читаемый и сканируемый макет, который упаковывает большой объем информации в чистый макет. Они также используют большие значки в качестве точек фокусировки.

    Как новый Это красивый сайт со всех сторон. Он использует значительное количество пустого пространства, пунктирные разделительные линии и большие визуальные эффекты.

    Купферверк Хорошие изображения между абзацами и хорошие границы вокруг изображений.

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

    Стильная типографика

    В следующих примерах показано творческое использование типографики.

    ИААХ Причудливый текст заголовка и хороший фон выделяют здесь основной текст.

    ОуксДизайн Хороший контраст типографики и цвета делает веб-сайт ярким.

    Космическая машина Пример высокой печати, соответствующей стилю сайта.

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

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

    Дигимурай Вот пример стилизованной типографики с хорошей иерархической структурой за пределами статьи.

    Планировщик продукции Этот заголовок имеет чистый градиент, который хорошо контрастирует с темным фоном.

    Парамор Редд Более простые, но красивые текстовые эффекты.

    Эффект Дао Красивый и удобный для сканирования макет с иконками и различными стилями текста, чтобы разбить статью.

    Прогуляйтесь Читаемый, но сильно текстурированный текст.

    Саммит Flash Gaming Хорошая окраска и идеальная иерархия.

    Бринн Шеперд Иерархия заголовков похожа на ту, что вы найдете в макете для печати, но здесь она плавно перетекает.

    Норттемпл Использование изображений для текста — еще один отличный метод.

    Майлз Доусетт Чрезвычайно красивая типографика с приятным фоном, хорошей цветовой палитрой и множеством точек фокусировки.

    No related posts.