На что обратить внимание при дизайне интерфейсов.
Создавая интерфейсы, дизайнерам приходится отстаивать свою точку зрения перед командой и заказчиками. Но это должен быть не просто личный взгляд, а аргументированное мнение, которое основано на мнениях экспертов и исследованиях. В этой статье мы приведем несколько основных принципов UI/UX дизайна, которые основаны на лучших практиках. Эти принципы помогут вам избежать грубых ошибок при дизайне и создавать чистые и дружелюбные интерфейсы.
Акценты
Пользователь, попадая на экран сайта или приложения, должен сразу понять, что здесь важное, а что второстепенное. Если акценты расставлены правильно, он сразу понимает, куда нажимать и что необходимо сделать. Когда элементы имеют равный вес, внимание рассеивается. Следует избегать этого.
Поэтому важно создавать иерархию элементов и не добавлять более одной точки фокусировки на экране.
В статье “Design Principles: Dominance, Focal Points And Hierarchy” автор приводит основные характеристики объектов, которые помогают создать акценты:
- размер;
- форма;
- цвет;
- вес;
- глубина;
- текстура;
- окружающее белое пространство.
Типографика
Текст на экране должен быть оптимизирован. Сочетайте в композиции разные размеры текста, разделители, порядок и другие элементы — это создаст приятное впечатление для пользователя и сделает лучше опыт взаимодействия с интерфейсом.
Размер текста. Используйте разные размеры текста для разных типов заголовков, это сформирует структуру на странице. Но не забывайте, что стилей текстов не должно быть слишком много и одинаковые элементы должны иметь одинаковые стили, чтобы не создавать хаос. Помните о минимальных размерах. Удобство чтения с экрана сайта серьезно падает при размере текста ниже 16 px для основного текста.
Выравнивание текста. В статье “Why You Should Never Center Align Paragraph Text” в деталях объясняется, какой тип выравнивания при каких условиях стоит использоват. Автор говорит о том, что самый удобный для чтения вариант — это выравнивание текста по левому краю. Выравнивание по центру подходит только для заголовков и коротких строк текста. Это происходит из-за того, что при выравнивании по центру или правому краю, начало каждой строки смещается. Без прямой вертикальной линии слева пользователю приходится постоянно искать глазами, с какого места продолжить чтение.
Выравнивание и организация элементов
Организовывайте элементы на экране правильно. Одинаковые типы элементов должны иметь одинаковый размер и выравнивание. Пользователь должен понимать, какая информация сгруппирована и к какому объекту относится.
Для правильной работы этого принципа большое значение имеет белое пространство. Чтобы отделить объекты и группы объектов, важно помнить о правиле внутреннего и внешнего — внутренние расстояние должно быть меньше внешнего (подробнее в нашей статье “Типографика и вертска”).
Навигация
Чтобы взаимодействовать с интерфейсом было легко, дизайн должен быть аккуратным и понятным. Пользователь необходимо понимать, где он находится, что ему следует сделать и что повлечет за собой его действие. Поэтому навигацию должна быть стандартной и привычной, чтобы не вводить пользователей в заблуждение.
Гамбургер меню широко распространены сейчас, но по-прежнему остаются не самым лучшим выбором Стоит помнить, что у пользователей на одном экране должно быть не более пяти вариантов взаимодействия с приложением. Иначе внимание рассеивается и сложнее совершить действие. Используя гамбургер меню, это правило легко нарушить, ведь велик соблазн спрятать за иконкой большое количество функций.
Нужно быть осторожными со слайдерами изображений. Они плохо справляются со своей задачей, так как люди часто их пропускают, что приводит к путанице и непониманию.
Располагайте формы в логическом порядке. Это создаст естественный поток диалога с пользователем в вашем мобильном приложении. Группируйте информацию. Существует тенденция, особенно в англоязычных приложениях, начинать все слова в названиях полей с прописной. Это помогает пользователю быстрее просканировать текст и уловить суть. Но не стоит писать полностью все прописными — это затруднит восприятие контента.
Проектирование и дизайн форм — не самая простая задача, существует много исследований и статей, более подробно об этой теме можно прочитать в статье Extensive Guide Web Form Usability
Не забывайте давать обратную связь. Показывайте состояния и результаты действий, чтобы пользователь понимал, что происходит в приложении или на странице сайта. Микровзаимодействия и анимации здорово помогут справится с этой задачей и спроектировать дружелюбный интерфейс.
В заключение
Будьте четкими. Проектируйте ясные и дружелюбные интерфейсы. Убедитесь, что у каждого элемента на экране есть цель, и что она понятна для пользователя.
А в качестве вдохновения мы можем предложить одно из наших любимых приложений - Guardian Glass expert
