it Новости Как устроен дизайн? UX шаблоны, на которых держится всё
Как устроен дизайн? UX шаблоны, на которых держится всё

Как устроен дизайн? UX шаблоны, на которых держится всё

1 573
13 февраля 2019 в 16:58
Как и почему вы воспринимаем все именно так? Мы расскажем вам про дизайн и про главные шаблоны UX, на которых построено все что нас окружает в цифровом мире.

Если подумать, то за последние 30 лет мы сделали невозможное. Мы смогли оцифровать почти все аспекты своей жизни, включая взаимодействие друг с другом и с осязаемым миром.


Для этого нам пришлось развить и адаптировать наше восприятие технологий: прикосновение, голос, звук… вкус? Мы научились передавать невероятно сложную информацию всевозможными способами за предельно короткое время. И получился хаос! По крайней мере, он точно появится, если не будем применять гештальт-психологию в наш опыт взаимодействия.


Давайте посмотрим на этот изысканный десерт.


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


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


Это и есть основа гештальт-психологии.

Гештальт

Гештальт-психология зародилась в 1920 году, а к «видимому миру» стала применяться лишь в 30-х и 40-х годах XX века. Гештальт-психологи ставили перед собой целью понять, каким образом люди получают, воспринимают и сохраняют информацию в этом хаотичном мире. То есть это наука о шаблонах восприятия: как мы осознанно и неосознанно группируем информацию для получения дополнительных сведений, как мы распознаем шаблоны и упрощаем сложное.


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


Теперь самое время поговорить о том, как использование принципов гештальт-психологии позволяет создавать качественный пользовательский опыт.

Принципы

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


Близость и общий фон

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




Схожесть

Объекты с одинаковыми визуальными параметрами (размер, цвет, текстура, форма, расположение, ориентация) мы воспринимаем как схожие. Таким объектам не обязательно находиться рядом или примыкать друг к другу. Тем не менее, они должны обладать одной или несколькими общими чертами, которые выделят их из групп других объектов. То есть, когда мы смотрим на объекты, похожие друг на друга, но подсознательно начинаем их группировать.





Схожесть в гештальт-психологии – дублирование навигации, выравнивание


Фигура-фон

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





Фигура и фон в гештальт-психологии – наложение слоев


Симметрия

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





Симметрия в гештальт-психологии – унификация


Замкнутость

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




Непрерывность

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





Непрерывность в гештальт-психологии – графики с прокруткой по оси Х.


Общая судьба

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





Фактор «общей судьбы» в гештальт-психологии – motion-тренды в графиках.


Периодичность

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



Применение гештальт-психологии в UX-дизайне

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


Гипотезы восприятия – это эмпирические предположения, которыми мы пользуемся для обработки сенсорной информации (зрительной, слуховой и тактильной).


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


Вот несколько полезных подсказок по UX:

  1. Перестройте основу восприятия пользователей. Как эмпирический опыт пользователей и знакомые им приложения могут повлиять на их взаимодействие с вашим продуктом? Какие шаблоны взаимодействия им уже знакомы? А с какими шаблонами только предстоит познакомиться?
  2. Остерегайтесь неопределенности фигуры/фона. При создании сложного интерфейса с множеством слоев позаботьтесь о том, чтобы органично расположить эти слои в логической последовательности. Убедитесь, что пользователи не путают содержимое переднего плана с фоном.
  3. Не бойтесь добавлять «слишком много» полей и отступов. Не скупитесь на выравнивании, однообразии шаблона и отступах. Намного проще подсократить поля и отступы, чем добавить новые.
  4. Удалите лишние детали, оцените общую картину. Изучите свой интерфейс с расстояния в 3 метра. Проверьте связанность объектов и шаблоны. Оцените общий дизайн. Смогли ли вы интуитивно сгруппировать нужные элементы и опции?

Главный вывод

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


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




Исходник -> Доработанная версия


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

Больше интересных новостей

Комментарии для сайта Cackle