На что обратить внимание при дизайне интерфейсов.

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

Акценты

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

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

В статье “Design Principles: Dominance, Focal Points And Hierarchy” автор приводит основные характеристики объектов, которые помогают создать акценты:

  • размер;
  • форма;
  • цвет;
  • вес;
  • глубина;
  • текстура;
  • окружающее белое пространство.

Как расставить акценты в дизайне приложения

Типографика

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

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

Выравнивание текста. В статье “Why You Should Never Center Align Paragraph Text” в деталях объясняется, какой тип выравнивания при каких условиях стоит использоват. Автор говорит о том, что самый удобный для чтения вариант — это выравнивание текста по левому краю. Выравнивание по центру подходит только для заголовков и коротких строк текста. Это происходит из-за того, что при выравнивании по центру или правому краю, начало каждой строки смещается. Без прямой вертикальной линии слева пользователю приходится постоянно искать глазами, с какого места продолжить чтение.

Работа с текстом в дизайне интерфейсов

Выравнивание и организация элементов

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

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

Как выровнять текст и эелемнты на экране

Навигация

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

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

Гамбургер меню и что с этим делать

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

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

Проектирование и дизайн форм — не самая простая задача, существует много исследований и статей, более подробно об этой теме можно прочитать в статье Extensive Guide Web Form Usability

Как сделать правильные и удобные формы

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

В заключение

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