Удобочитаемость — это та легкость, с которой пользователь может не только читать текст, но и понимать его. В своем опыте дизайнера UX я видел его как наиболее упущенную часть пользовательского опыта. Много раз я участвовал в тестах юзабилити, проверяя, легко ли найти какую-то информацию в приложении или щелкнуть по некоторым элементам на веб-сайте, но вряд ли когда-либо фокусировался на проверке, помогает ли выбор типографики мешать пользователям потреблять контент. Очень жаль, поэтому для того, чтобы расширить возможности пользователей по чтению, я собрал эту простую практическую статью, прочитав которую, вы сможете запустить свой первый тест на удобочитаемость сегодня.
В этом уроке я буду Сосредоточьтесь на том, чтобы научить вас проверять удобочитаемость вашего дизайна среди пользователей, в основном для случаев использования в цифровой среде (например, при разработке приложения или веб-сайта). Однако, если вы создаете дизайн для печати — эта статья также будет полезна для вас. Если вам нужны какие-то конкретные советы по организации теста разборчивости дизайна печати — просто оставьте комментарий ниже.
Этот метод очень полезен для групп, которые создают продукты, пользователи которых в основном взаимодействуют с ними, а не щелкая или нажимая на кнопку. интерфейс, но чтение текста. Вот несколько примеров:
- блоги
- целевые страницы
- сайты цифровых СМИ (газеты, журналы и т. П.)
- покупатель сайты по уходу, такие как часто задаваемые вопросы
- страницы отзывов клиентов
- страницы продукта с описанием продукта, например:
- как что-то работает: (как использовать продукт, например, лекарство Pharma, кто является продуктом в косметическом бизнесе, как собрать предмет мебели, спецификацию продукта в электронике, как изменить подписку в телекоммуникационной и абонентской службах).
Как вы можете видеть использование тестирования читабельности довольно обширно, и большинство цифровых продуктов, веб-сайтов и приложений имеют некоторые из них в своем контенте.
Уже с изобретения писателей люди пытаются создать эти золотые правила. текста, которые делают его наиболее читабельным. На протяжении веков авторы сценариев, а затем создатели печатных изданий и, наконец, веб-дизайнеры старались установить золотое соотношение размера текста к высоте строки и длине столбца. Дизайнер шрифтов приложил огромные усилия, чтобы оптимизировать кернинг до высоты x и счетчика для создания наиболее читаемых шрифтов.
Однако с современным количеством размеров и соотношений устройств не существует такой вещи, как универсальное правило типографских пропорций, которое обеспечить идеальную читаемость.
В моей практике оказывается более практичным (и более быстрым) тестирование того, насколько читаемым является конкретный шрифт, который соответствует бренду того бренда, для которого вы разрабатываете, и появляется на данном экране.
Помимо выбора шрифта, существует несколько факторов, которые могут улучшить или уменьшить читабельность. Среди них в первую очередь:
- вес шрифта
- размер шрифта
- ведущий (то, что также называется высотой строки)
- ширина линии
- выравнивание
- цвет текста
- использование регистра (заглавные или строчные буквы)
Конечно, кроме упомянутых элементов, само содержание влияет на читабельность тоже. К сожалению, как дизайнер я не эксперт в этом, и в этой статье я не собираюсь углубляться в эту область специально. Исследование этого вопроса было предметом научного исследования с 1880 года и является скорее областью знаний лингвистических профессионалов, чем дизайнеров.
Возвращаясь к дизайну, когда вы собираетесь проверить читабельность вашего дизайна, вы вероятно, есть пара идей или версий, как текст должен отображаться. Чтобы выполнить тест, подготовьте текст того же типа в том же макете, но в версиях, которые отличаются друг от друга только одной переменной.
Пример:
Вы разрабатываете целевую страницу для буткемпа кодирования. Вы хотели бы видеть, читается ли описание загрузочного лагеря в первом сгибе для пользователей. Вы хотите проверить, лучше ли использовать шрифт Roboto с обычным или средним весом или полностью изменить внешний вид и вместо Roboto использовать шрифт Montserrat с легким или средним весом.
Затем подготовьтесь к тесту четыре варианта макета — одна с описанием буткемпа в Roboto Regular, одна в Roboto Medium, одна в Montserrat Light и одна в Montserrat Medium. Сохраняйте все в дизайне точно так же, как и шрифт, чтобы другие факторы не влияли на то, как люди будут воспринимать ваш дизайн.
То, что текст читабелен, доказывает тот факт, что люди сообщение ясно. Определите, какое сообщение в тексте необходимо понять пользователям, чтобы оценить текст как читаемый — это могут быть конкретные ключевые слова, которые создают основное сообщение абзацев, которые вы отображаете в тексте для пользователей.
Пример:
Вступительный абзац в первом сгибе целевой страницы буткемпа: «Ваши занятия не дают вам достаточно практических знаний? Ваша текущая работа не приносит вам удовлетворения, и вы хотели бы сделать свои первые шаги в мир IT? Зарегистрируйтесь на Native Mobile Bootcamp — шестинедельный программный загрузочный лагерь в University of X совершенно бесплатно. Вы узнаете, как кодировать собственные мобильные приложения в iOS и Android от экспертов из компаний Forbes 500, которые являются нашими выпускниками »
Ключевые сообщения, которые, как ожидается, люди поймут из текста:
— что загрузочный лагерь посвящен разработке собственных приложений для iOS и Android
— что загрузочный лагерь называется Native Mobile Bootcamp
— что он длится шесть недель
— что это бесплатно
Поэтому вы можете выбрать следующие ключевые слова:
— программирование / разработка приложений
— iOS
— Android
— родной
— шесть недель
— бесплатно
— Native Mobile Bootcamp
Предложенный метод является модифицированной версией 5-секундного теста. Это простой метод юзабилити, который позволяет вспомнить первые впечатления, полученные пользователями за 5 секунд взаимодействия с дизайном. 5 секунд, как правило, слишком мало, чтобы прочитать короткий абзац, поэтому я рекомендую увеличить его до 10 секунд.
Это означает, что когда вы проводите тестирование с пользователем, вы отображаете ему или ей спроектируйте в течение 10 секунд, а затем задайте вопросы, предназначенные для проверки того, сколько он или она может вспомнить.
В качестве вступления полезно дать пользователю некоторые общие инструкции о том, что произойдет без использования слова, которые появляются в тексте, например: «Сегодня я тестирую дизайн фрагмента веб-сайта, над которым я работаю. Я бы попросил вас взглянуть на этот дизайн, а позже я задам пару вопросов ».
Пример:
После того, как вы показав пользователю первый сгиб целевой страницы загрузочного лагеря в версии A (Roboto Regular — отправная точка вашего дизайна) в течение 10 секунд, вы можете задать следующие вопросы:
1. Чему вы можете научиться во время курса?
2. Как называется курс
3. Сколько времени это займет?
4. Вам нужно что-то платить за курс?
Вы можете изменить эти вопросы, и они хороши, если они не дают явного намека (Можете ли вы научиться кодировать мобильные приложения для Android во время буткемпа?). Я бы также как можно больше воздерживался от закрытых вопросов, чтобы дать пользователям возможность сформулировать ответы своими словами вместо того, чтобы просто сказать «да» или «нет». Однако с некоторыми ключевыми словами, такими как «бесплатный» в нашем примере, трудно создать вопрос без подсказок, который также оставляет место для более сложного ответа. В этом случае ситуация черно-белая — вы спрашиваете, нужно ли платить за курс, и вы получаете ответ «нет» — тогда это точка для вас и вашего дизайна. Вы получите ответ «нет, это бесплатно» — это даже лучше. Вы получите ответ «Я не знаю / он ничего не говорит о цене» — тогда вам ничего не начисляют, и дизайн идет на раунд редизайна.
Количество выбранных вами ключевых слов создает Полный балл тестер может получить в тесте, как балл за одно ключевое слово. Тем не менее, тестеры могут использовать синонимы в своих ответах. Например, вместо ответа «Курс бесплатен» они могут сказать: «За загрузочный лагерь плата не взимается». Затем для синонимичных фраз вы также назначаете точку.
Пример:
Вы показали дизайн на 10 секунд первому пользователю и задали вопросы. Ответы, которые вы получили:
1. «Вы можете научиться кодировать приложения» (2 балла из 5 — ничего не сказано о iOS, Android и нативном)
2. «Native Mobile Bootcamp: (1 балл — тестер правильно запомнил полное имя)
3. Шесть недель (1 балл)
4. Я не знаю (0 баллов)
Полный балл — 4 из 8, что не является великолепным.
Начальная цель теста в примере было проверить, какая из 4 концепций форматирования текста является лучшей. В одном тесте вы можете протестировать две версии одна за другой, которые отличаются одним фактором, например ,. вес шрифта Чтобы получить более точные результаты, измените порядок, в котором вы показываете версии для тестеров — второе чтение будет легче в любом случае, потому что пользователи знают, на какие вопросы они не ответили, и они уже читают текст.
Конечно, вы можете также тестировать эти проекты на совершенно разных группах пользователей, однако тогда аспект индивидуальных различий пользователей или контекст теста также играют роль (например, в первом тесте все в тестер был до обеда, и они вообще не заботились о вашем тесте, а во второй группе они были более сосредоточены, так как уже поели и не спешили). Постарайтесь свести к минимуму эти факторы, например, стараясь изо всех сил поддерживать условия теста как можно более похожими (то же место, время суток и т. Д.).
Пример:
Вы хотите прежде всего проверить, лучше ли Робото, чем Готэм, или наоборот. В этом случае следующая версия, которую вы показываете пользователям, может быть тем же текстом в Gotham. Или в Roboto Medium, если ваша цель состоит в том, чтобы увидеть, станет ли немного более тяжелый шрифт более читабельным.
Чтобы сделать его стройным, во время повседневной работы я бы рекомендовал не переусердствовать с формальным набором большие группы участников, так как это может вообще помешать вам выполнить любой тест. Количество участников, наиболее часто используемых в юзабилити-тестировании, равно 5, и это идеально подходит и для этого случая.
В тестах на читаемость вы хотите узнать, облегчает ли чтение текста текст людьми , Бывает, что чтение — это навык, который довольно распространен в современном обществе, поэтому набор участников для такого рода текстов не является большой суетой. Демография не является определяющей в этих тестах, поэтому очень легко набрать участников, которые соответствуют критериям для этого конкретного теста. Я бы предпочел не обращаться за помощью к вашему 97-летнему дедушке или 5-летнему ребенку, поскольку чтение может быть немного проблематичным для людей определенного возраста, но пока ваши участники уже научились читать и не имеют недостатки зрения, они подходят. Я бы также воздержался от набора людей, которые работают с вами над одним и тем же проектом, потому что они уже знают, о чем он.
Бывает, что концепции шрифтов или форматирования текста не дают вам идеальных результатов в Тест на читаемость. Тогда хорошо поэкспериментировать с другими факторами, которые влияют на это, ключевыми из которых являются высота строки и длина столбца.
Конечно, для больших проектов вы также можете проверить читабельность с помощью более формальных инструментов. Этот метод является быстрым методом сбора отзывов пользователей без больших усилий, времени и денег, которые, с моей точки зрения, являются наиболее популярными причинами отсутствия каких-либо тестов юзабилити, особенно в больших организациях (где управление всей установкой может быть довольно проблематичным из-за их масштаб) и в стартапах и агентствах (где ограниченные ресурсы могут быть настоящим блокирующим).
Этот метод идеально подходит для встраивания в гибкие процессы и разработки спринтов.
Hit от души, если вам это нравится, и оставьте комментарий, если вы хотите получить больше советов или поделиться своими мыслями.
Отнесите этот метод в свой офис и наслаждайтесь его использованием ежедневно!