Устроить себе небольшую проверку по знанию базовых моментов или нюансов в типографике — это отлично. Решили еще поделиться с вами некоторыми рекомендациями💡

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

На что обратить внимание при работе с текстом для мобильных приложений или адаптивной верстки🔽

Не забывайте про официальные руководства по дизайну для конкретной платформы. Поэтому для начала следует изучить соответствующие разделы гайдлайнов для IOS и Android.

📌Используйте достаточно крупный шрифт основного текста (от 14 до 17 пунктов) для комфортного чтения без необходимости увеличивать текст. Помните, что размер подбирается индивидуально под каждый выбранный шрифт, потому что один и тот же кегль у разных шрифтов будет иметь разную высоту.

📌Избегайте слишком тонких начертаний шрифтов — Thin, ExtraLight, Light. Они трудно различимы на мобильных устройствах.

📌Поддерживайте хорошую контрастность между текстом и фоном. Общие рекомендуемые значения контрастности: для основного текста не менее, чем 7:1 и 4,5:1 для заголовков или крупного текста. Чтобы проверить контрастность, воспользуйтесь онлайн-сервисами, например, Webaim.

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

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

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

📌Используйте выравнивание по левому краю для основного текста. Ровный край делает текст аккуратнее и проще для чтения. Для оформления небольших объемов текста в 2–3 строки можно использовать выравнивание по центру.

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

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

Источники:
— Простые правила мобильной типографики
— Справочное руководство по типографике в мобильном веб‑дизайне
— Contrast Checker
— Самый полный гайд по контрастности в интерфейсах
— Мобильная типографика
— 15 лучших практик по типографике в мобильном дизайне
— Webaim

Казалось бы, CPM-система должна повышать эффективность работы, а не тратить лишнее время пользователей👀

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

Эвристики Якоба Нильсена

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

Эвристика представляет собой рекомендацию, правило или суждение эксперта, которое принято считать верным. Эвристики Якоба Нильсена — не единственный набор таких правил. Свои эвристики есть у Дональда Нормана, Бена Шнейдермана, Вайншенка и Баркера, а также Иэна Коннелла. Но все они повествуют примерно об одном и том же.

Вот что писал Якоб Нильсен:

«Первоначально я разработал принципы для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году. Четыре года спустя уточнил эвристики на основе факторного анализа 249 проблем юзабилити, чтобы вывести набор эвристик с максимальной объяснительной силой, в результате чего появился этот пересмотренный набор эвристик.

В 2020 году мы обновили эту статью, добавив дополнительные пояснения, примеры и ссылки. Хотя мы немного изменили язык определений, сами 10 эвристик остаются актуальными и неизменными с 1994 года. Если что-то остается верным на протяжении 26 лет, это, скорее всего, будет применимо и к будущим поколениям пользовательских интерфейсов».

Первая из десяти эвристик — видимость состояния системы (Visibility of System Status). Она касается гораздо большего, чем просто дизайн пользовательского интерфейса. По сути, речь идет об общении и прозрачности, которые имеют решающее значение для многих аспектов жизни. Люди стремятся к предсказуемости и контролю. Как правило, больший объем информации приводит к более эффективному принятию решений.

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

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

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

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

Источники:
— Jacob Nielsen. How I Developed the 10 Usability Heuristics [2024’s update]
— Jacob Nielsen. 10 Usability Heuristics for User Interface Design
— Aurora Harley. Visibility of System Status
— Nielsen’s Heuristic Evaluation: Limitations in Principles and Practice

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

📍Меню-гамбургер
Меню-гамбургер, или навигационное меню — распространенный значок с 3 горизонтальными линиями. Пользователь нажимает на значок, и открывается меню. За счет этого меню-гамбургер экономит место на экране.

Преимущества:
— Упрощает компоновку экрана
— Обеспечивает прямой доступ к навигации
— Идеально подходит для вторичного доступа
— Легко распознать

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

Преимущества:
— Занимает мало места
— Легко распознать

📍 Навигация на основе жестов

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

Преимущества:
— Более быстрая, естественная и эргономичная схема навигации
— Простая в использовании
— Используется уникальный шаблон дизайна пользовательского интерфейса
— Улучшает пользовательский опыт

📍Подменю навигации
Этот тип шаблона навигации обеспечивает несколько уровней иерархии в приложении. Один из лучших примеров — приложение Амазон.

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

Преимущества:
— Простой в использовании
— Упорядочивает содержимое приложения
— Помогает легко перемещаться между страницами
— Легко распознать

📍Полноэкранная навигация

Полноэкранный навигационный шаблон занимает все пространство экрана навигации. Ключевые особенности:
— Простота. У каждой страницы – простая навигационная структура, которая обеспечивает удобство работы пользователя.
— Наглядность. Структура полноэкранного навигационного меню понятна и не требует пояснений.
— Согласованность. Пользователи должны понимать, где они находятся и как быстро вернуться к страницам приложения, которые смотрели ранее.
— Ориентация на пользователя. Хорошо продуманное навигационное меню имеет одинаковый дизайн для всех страниц приложения без исключений.

Преимущества:
— Улучшает пользовательский опыт
— Лучше всего подходит для достижения согласованности и простоты
— Отличная ориентация на пользователя
— Шаблон имеет последовательную и понятную структуру

📍Навигация по вкладкам

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

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

Преимущества:
— Легко распознать
— Улучшает пользовательский опыт

📍Навигация по боковой панели

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

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

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

Источники:
— Mobile App Navigation| Patterns and Examples.
— Mobile Navigation Guide: Basic Patterns & Examples
— Basic Mobile Navigation Patterns
— Navigation guides users through different parts of your app.

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

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

Самые распространенные ошибки в применении модальных окон:
🛠Размещать перед загрузкой содержимого страницы
🛠 Отображать сразу после авторизации пользователя
🛠 Запрашивать данные, например, электронную почту, еще до того, как пользователь начал взаимодействовать с сайтом
🛠Запрашивать обратную связь до того, как пользователь завершил действие
🛠Отображать несколько модальных окон, которые наслаиваются друг на друга
🛠 Показывать окно перед переходом пользователя на другой сайт
🛠 Отображать сообщение перехода с сайта на мобильное приложение
🛠 Размещать обширный объем информации, который не помещается в 2 скрола

Прежде чем применять модальные окна, подумайте об альтернативных решениях. Чтобы сообщить пользователю об ошибке, ожидании, успешном действии, можно использовать компоненты Tooltips или Lightbox, а для больших форм подойдет Sidepage или Drawer.

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

Источники:
— Nielsen Norman Group. «Popup Problems»
— Контур.Гайды. «Модальные окна»