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

Я работаю в Illumina, компании, занимающейся естественными науками, в Сан-Диего, штат Калифорния. Мы выполняем миссию по улучшению здоровья человека, раскрывая силу генома. Как дизайнер UX, моя работа состоит в том, чтобы сделать сложную науку простой для понимания и визуализации. В то время как наша команда работает с функциональными аспектами дизайна, я одержим визуальными деталями, в частности тем, как они могут улучшить эти функциональные элементы.

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

 

«Красота меняет наше мышление и поведение»

 

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

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

 

1. Используйте систему сетки

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

Лично я люблю сетки из 12 колонок, идущих в комплекте с Bootstrap. Их легко настроить и легко воспроизвести в Photoshop. Вы также можете исследовать сетки из Foundation, PureCSS или даже сетки, которые не привязаны к формам, такие, как на 1140px.com

2. Воспользуйтесь преимуществами дизайнерских шаблонов

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

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

Вам нужно представить проект в вашем приложении? Используйте карточку. Можете представить ее в виде папки с файлами. Хотите представить фото?? Используйте карточку, даже сделайте ее похожей на старый Polaroid.

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

«Сила шаблонов проектирования в том, что они снижают нагрузку на память посредством мгновенного распознавания.»

 

3. Работайте с изгибом

Принцип завершенности говорит нам, что мы воспринимаем объекты как целые, даже если они незавершенные, что очень удобно, когда вы работаете с изгибом страницы.

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

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

 

4. Сбалансируйте разметку

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

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

 

5. Анимируйте

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

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

 

6. Используйте тонкие линии для соединения компонентов

Принцип непрерывности гласит, что мы считаем объекты сгруппированными, если они совмещены в пределах объекта.

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

7. Используйте плоскостность, а не лоск

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

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

 

«Мы предпочитаем простые, чистые и упорядоченные вещи.»

 

8. Будьте последовательны

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

Допустим, вы поместите ваши кнопки «Дальше» и «Отменить» в определенной области диалогового окна. Если их положение на экране меняется (например, он перевернут), пользователь может выполнить неправильное действие (например, закрыть документ без сохранения). Люди используют полученные знания, что бы понять настоящее. Овладение принципом прошлого опыта вознаграждает пользователей, меньшим количеством ошибок и путаницы.

 

Красота — это юзабилити

 

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