- UI/UX
- 5 мин на чтение
- 10986
8 рекомендаций по визуальному дизайну для UX дизайнеров
UX-индустрия уделяет большое внимание юзабилити. Пользовательские истории, ваерфрэймы, карты сайта и юзабилити — тестирование получает все внимание, тогда как визуальный дизайн просто исчезает в безвестности. Тем не менее, по моему личному опыту, эстетика играет очень важную роль в опыте практически каждого пользователя.
Как UX-дизайнер, моя работа заключается в том, чтобы сделать достаточно сложную науку простой для визуализации и понимания. Тогда как наша команда занимается различными функциональными сторонами дизайна, я одержим визуальными деталями, в том числе тем, как они могут улучшить данные функциональные аспекты.
И это не просто личная одержимость. Свежие исследования доказали, что красота способна менять как наше мышление, так и поведение. Привлекательность внушает нам положительные эмоции, увеличивает счастье и создает удовольствие. Люди всегда воспринимают красивые вещи, как лучше работающие, в независимости от того так это или же нет.
Это считается основным преимуществом дизайнеров, так как может как усилить простоту и удобство использования качественных продуктов, так и восполнить компромиссы или недостатки в недостаточно хорошо спланированных опытах.
«Красота меняет наше поведение и мышление»
Гештальтпсихология предлагает следующее объяснение: люди часто воспринимают полноту определенной вещи, прежде чем они видят какие-то ее отдельные части. В связи с этим, прежде чем они вникнут в детали того, что эта форма просит или что эта кнопка делает, они получают какое-то общее эстетическое впечатление. И если страничка привлекательна, то впечатление будет положительным.
Помня это, вот восемь принципов гештальтпсихологии, которые используются для того, чтобы улучшить простоту и удобство использования благодаря лучшему визуальному дизайну.
1. Применяйте систему сетки
Принцип близости говорит, что мы воспринимаем объекты, которые расположены рядом друг с другом как единое целое. И нет более лучшего способа контролировать горизонтальную близость, нежели при помощи качественной системы сетки.
Я люблю сетки из двенадцати колонок, которые идут в комплекте с Bootstrap. Их можно легко настроить и просто воспроизвести в Photoshop. Также вы можете исследовать разнообразные сетки из PureCSS, Foundation или даже сетки, не привязанные к формам.
2. Используйте преимущества дизайнерских шаблонов
Принцип схожести говорит, что мы очень склонны группировать те объекты, которые имеют схожие тени, формы и цвета. Это дает нам хороший повод превратить все эти сходные компоненты в их личные шаблоны проектирования.
Один из наиболее популярных шаблонов дизайна, который легко использовать — это карточка. Определите основной элемент в вашем приложении, а потом представьте его в форме карточки. Когда пользователь увидит данную форму и стиль во второй, третий, четвертый раз, ему станет проще его узнавать.
Вам необходимо представить проект в вашей программе? Воспользуйтесь карточкой. Можете представить ее в форме обычной папки с файлами.
Нужно представить фото? Воспользуйтесь карточкой, даже сделайте ее похожей на винтажный Polaroid.
Вся сила шаблонов проектирования в том, что они уменьшают нагрузку на память при помощи мгновенного распознавания. Вначале, карточные дизайнерские шаблоны кажутся просто визуальными украшениями. Однако из принципа подобия, мы начинаем понимать, что они также очень эффективно связывают разные группы данных.
«Вся сила шаблонов проектирования в том, что они уменьшают нагрузку на память при помощи мгновенного распознавания.»
3. Работайте с изгибом
Принцип завершенности утверждает, что люди воспринимают объекты как целые, даже когда они незавершенные, что довольно удобно, если вы работаете с изгибом странички.
В случае если ваш контент проходит под «изгибом странички» не стоит волноваться, если он выглядит достаточно урезанным. Когда пользователи видят какое-то урезанное содержание, они, разумеется, прокручивают вниз для того, чтобы завершить форму, созданную в их сознании. Безусловно, вам нужно убедиться в том, что контент, который вы урезаете, полностью соответствует конкретной форме (как, бокс, либо блок текста), чтобы пользователи знали, чего стоит ожидать.
Принцип завершенности говорит, что нам не нужно показывать всю информацию. Лучше дайте глазу пользователя возможность заполнить остаток, приведите их к дальнейшему изучению.
4. Сбалансируйте разметку
Принцип симметрии утверждает, что пользователям нравиться разделять объекты на четное количество симметричных частей. Я люблю данную концепцию, поскольку это и просто, и очень полезно.
Недавно я создал экран управления с небольшим контентом, в итоге получил обилие обычного белого пространства. Вместо того, чтобы разместить контент в середине экрана, я его сдвинул влево и сбалансировал специальным справочным текстом справа. Так как глаза человека естественно ищут баланс, то принцип симметрии может нам помочь общаться более последовательными, стабильными и гармоничными способами.
5. Анимируйте
Принцип общей судьбы говорит, что мы воспринимаем все объекты как линии, движущиеся в одном направлении. Это главная причина, по которой добавление в дизайн анимации может принести большую выгоду.
Меню, которое выскальзывает сбоку странички, показывает взаимосвязь между ссылками в данном меню посредством их синхронного движения. Принцип общей судьбы дает пользователям возможность соединять разные элементы вашего дизайна.
6. Применяйте тонкие линии для соединения элементов
Принцип непрерывности утверждает, что люди считают объекты сгруппированными, когда они совмещены в пределах какого-то одного объекта.
Бывает так, что несколько элементов могут растягиваться по всей ширине дисплея. Их связь, на первый взгляд, может не быть очевидной, даже когда они идеально выровнены. Чтобы сделать ее очевидной, необходимо соединить их линией, чтобы привлечь пользовательское внимание. Принцип непрерывности дает дизайну возможность читаться так же легко, как и строки из абзаца текста.
7. Применяйте плоскостность, а не лоск
Принцип хорошей формы гласит, что мы предпочитаем чистые, простые, упорядоченные вещи. И, следовательно, качественный и плоский дизайн.
Плоский дизайн никак не зависит от экстремальных градиентов, тяжелых теней или же сложных световых эффектов, которые вполне могут отвлекать пользователя от его цели.
Вместо того чтобы подумать, к чему приведет нажатие определенной кнопки, они могут начать думать о таких несущественных моментах. Из какого материала выполнена кнопка, это металл или стекло? Сколько на нее светит света и с какого направления он светит? Полностью ли соответствует тень углу света?
Вышеописанный принцип поможет дизайнам более продуктивно общаться через простоту.
«Мы предпочитаем чистые, простые и упорядоченные вещи.»
8. Будьте последовательны
Принцип прошлого опыта гласит, что компоненты, которые были вместе сгруппированы в прошлом, будут видеться такими же и в будущем. Это объясняет значение последовательности в современном дизайне.
Например, вы поместите кнопки «Отменить» и «Дальше» в конкретной области диалогового окна. В случае если их положение на дисплее меняется (к примеру, он перевернут), то пользователь может сделать неправильное действие (к примеру, закрыть документ без сохранения). Люди пользуются полученными знаниями, чтобы понять настоящее.
Применение вышеописанного принципа вознаграждает пользователя меньшим числом ошибок.
Красота — это юзабилити
Следуя основополагающим принципам гештальта, можно лучше понять, что делает некоторые дизайны настолько эффективными и приятными. Я считаю обнадеживающим то, что каждый человек способен идентифицировать отличный опыт и великолепный дизайн. Наша главная работа, как дизайнеров — подключиться к такой способности. И хотя юзабилити считается очень важным, оно, однако, является лишь частью уравнения.
Источник: blog.jazov.com
