5 принципов качественного UI

Всем привет! Статья скорее всего будет интересна новичкам, кто, как и я в начале своего пути.

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

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

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

2. Системы. Будь это сетка, или система отступов. Все элементы должны быть там, где мы ожидаем их увидеть, отсутствие системы рождает хаос. Хаос сложней сканировать, он напрягает, а нам не надо напрягаться, надо радоваться.

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

Юзабилити относится не только к UX, но и к визуальной составляющей проекта. Его легко испортить рядом дизайнерских элементов, которые усложняют восприятие, к ним относятся:

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

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

3. Бесполезный декор и ограничители. Если геометрия, иллюстрации, сложные фоны, не решают никакую задачу, от них смело можно избавляться, лишний шум замедляет сканирование. Так же и дивайдеры (ограничители), если свободного пространства достаточно, чтобы оценить иерархию, то их стоит убрать. Меньше = больше.

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

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

Если брать UI, то под дружелюбием здесь я подразумеваю:

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

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

3. Фидбэк. Реакции на действия пользователя -отображение различных процессов и состояний. От состояний кнопок и форм, до отображения скелета страницы и страницы 404.

Спасибо тем, кто прочитал.

Кому интересно - мой инстаграм

А для работодателей - мое портфолио