Возможности мозга по обработке информации не безграничны, в соответствии с результатами исследования Джорджа Миллера кратковременная память может одновременно содержать от 5 до 9 сущностей. Этот факт часто используется при обосновании необходимости сократить количество элементов в навигационных меню до 7, что вызывает горячие дебаты , поскольку не совсем ясно, как это правило должно применяться в веб. [Miller’s studies ]

Правило 2-х секунд

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

Правило 3-х кликов

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

Правило 80/20 (Принцип Парето)

Заключается в том, что 80% эффекта получается в результате 20% действий. В бизнесе это правило часто применяется в виде: «80% продаж приходится на 20% клиентов». В веб-дизайне и юзабилити это правило работает не менее эффективно. К примеру, значительно улучшить отдачу сайта можно определив 20% пользователей, заказчиков, действий, продуктов или процессов которые дают 80% прибыли и обратив на них особое внимание при разработке.

Восемь золотых правил для разработчиков интерфейсов

В результате исследований взаимодействия человека и компьютера Бен Шнейдерман составил набор правил, которые могут быть использованы при разработке многих типов интерфейсов. Эти принципы актуальны как для разработчиков интерфейсов, так и для веб-дизайнеров.

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

Правило Фиттса

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

Перевернутая пирамида

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

Удовлетворенность

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

Психология в юзабилити

Синдром утенка (Baby-Duck-Syndrome)

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

Баннерная слепота

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

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

The Law of Prägnanz утверждает, что один и тот же объект может играть важную роль в одном визуальном поле и быть частью фона в другом.

Закон симметрии утверждает, что мы склонны воспринимать симметричные объекты как один объект.

Утверждает, что люди склонны объединять объекты, которые на самом деле едиными не являются.

The Self-Reference Effect

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

Термины и концепции

Отслеживание взгляда (Eye-Tracking)

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

Сгиб (Fold)

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

Подсказки (Gloss)

Graceful Degradation, Fault-tolerance

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

Granularity

Степень разделения большого объема сложных данных на небольшие модули.

Hotspot

Кликабельная область сайта, меняющая свое оформление после клика на нее. Это характерно для:focus-эффектов после клика на ссылку или другой элемент сайта.

Разборчивость (Legibility)

Визуальная разборчивость текста.

Minesweeping

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

Мистическая навигация (Mystery-Meat Navigation, MMN)

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

Логичность (Physical consistency)

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

Прогрессивное улучшение (Progressive Enhancement, PE)

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

Читабельность (Readability)

Обозначает уровень понятности смысла текста, зависит от сложности предложений и используемых терминов. Обычно измеряется уровнем образования: необходимого читателю, чтобы понять текст. Читабельность и разборчивость - понятия разные. [Usability Glossary ]

Дизайн ориентированный на пользователя (User-centered design, UCD)

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

Бдительность (Vigilance, sustained attention)

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

Walk-Up-And-Use Design

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

Скелет сайта, который отражает идеи концепции и структуру будущего сайта. Может быть представлен в виде презентации, демонстрирующей заказчикам, особенности компоновки и функциональности сайта, а также возможные сценарии выполнения пользователями их задач. Обычно скелет не содержит визуальных элементов или готовой разметки сайта, но, возможно, в него будут включены черновики или скетчи.Пример . [Glossary , Wikipedia: Wireframes ]

Факультет психологии МГУ

Коллективное, сознательное

Как создать идеальный интерфейс

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

Так можно графически представить себе метод Usability

Sheep"R"Us / Flickr

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

Usability и UX

Для начало посмотрим на общие стандартные принципы проектирования интерфейса. Немаловажным фактором в разработке веб-дизайна является учет исследований психологии восприятия информации. Частично это осуществляется с помощью методов Usability (юзабилити) и User Experience , или UX (пользовательский опыт).

Нам понадобится выявить наиболее характерные черты UX и их содержательную составляющую. Но сперва необходимо разделить понятия Usability и User Experience и соотнести полученную информацию с данными о психологии восприятия гипертекста.

Юзабилити чаще всего используется для повышения привычности и удобства использования интерфейса, увеличения скорости выполнения задачи и т.д. Другими словами, метод юзабилити исходит из вопроса: «Насколько легко пользователь решает задачу?» А его главная цель - удержать клиента на сайте или в приложении.

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

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

А так выглядел бы метод UX

Thank you for visiting my page / Flickr

Для наглядности сравним два этих метода на примере выбора маршрута: чем отличаются движение по бетонной магистрали (юзабилити) и езда по горной извилистой дороге (пользовательский опыт, UX)? Добираясь до пункта назначения по магистрали, вы, не прикладывая никаких дополнительных усилий, едете по прямой дороге на максимально установленной скорости. Юзабилити добивается того же эффекта - направить пользователя к конечной цели наиболее легким и удобным маршрутом. А вот горная дорога извилиста, и на ее преодоление уйдет больше времени, но зато ехать по ней намного интереснее и приятнее благодаря пейзажам и горному воздуху. Концепция пользовательского опыта учитывает именно те факторы, которые способны доставить удовольствие.

Эмоциональный интерфейс

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

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

старайтесь использовать не более трех цветов;
создавайте контраст между фоном и воспринимаемой информацией;
используйте гармоничные сочетания оттенков.

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

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

Удобный интерфейс

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

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

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

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

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

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

Виктория Баскакова

Анастасия Маринчева

Castelhano M. S., Mack M. L., Henderson J. M. Viewing task influences eye movement control during active scene perception //Journal of Vision. – 2009. – V. 9, 3. – P. 6-6.

Gregory R. L. Knowledge in perception and illusion //Philosophical Transactions of the Royal Society B: Biological Sciences. – 1997. – V. 352, 1358. – P. 1121-1127.

Hassenzahl M., Diefenbach S., Göritz A. Needs, affect, and interactive products–Facets of user experience //Interacting with computers. – 2010. – V. 22, 5. – P. 353-362.

Hassenzahl M., Tractinsky N. User experience-a research agenda //Behaviour & information technology. – 2006. – V. 25, 2. – P. 91–97.

Larson K., Picard R. The aesthetics of reading //Appears in Human-Computer Interaction Consortium Conference, Snow Mountain Ranch, Fraser, Colorado. – 2005.

Saariluoma P., Jokinen J. P. P. Emotional dimensions of user experience: a user psychological analysis //International Journal of Human-Computer Interaction. – 2014. – V. 30, 4. – P. 303-320.

Sanocki T., Sulman N. Color harmony increases the capacity of visual short term memory //Journal of Vision. – 2009. – V. 9, 8. – P. 322-322.

Tong F. et al. Binocular rivalry and visual awareness in human extrastriate cortex //Neuron. – 1998. – V. 21, 4. – P. 753-759.

12 мая 2011 в 17:03

Психология юзабилити: влияние пользовательских установок на восприятие интерфейса

Блог компании ALEE Software

Споры рационалистов и эмпириков об источнике человеческого знания являются одной из интереснейших страниц в истории философии и психологии. В наше время открытия в области частных наук (нейрофизиологии, когнитивной психологии, лингвистики, исследований искусственного интеллекта и т. п.) заставляют вновь обратиться к данным дискуссиями и посмотреть на традиционные проблемы с неожиданной стороны.
Под эмпиризмом понимается позиция, согласно которой ключевым источником человеческого знания является чувственный опыт. По выражению английского философа 18 века Джона Локка, одного из самых известных приверженцев эмпиризма в философии и психологии, человеческое сознание представляет собой «чистую доску» (tabula rasa), на которую наносятся метки чувственных впечатлений. Интеллект не оказывает никакого влияния на чувственное восприятие; его функции сводятся лишь к обобщению полученных в чувственном опыте данных.
В противоположность эмпиризму рационализм основным источником познания полагает разум. Философы и психологи, стоящие на позициях рационализма, считают, что человеческий разум вовсе не является «чистой доской»: на наше восприятие вещей могут оказывать влияние как врожденные компоненты, так и предшествующий опыт. Экспериментальная психология ХХ века показала, что наше чувственное познание всегда определенным образом ориентировано. Воспринимая новые вещи, мы всегда интерпретируем их на основе целой системы предрассудков и предмнений. Для иллюстрации высказанных тезисов можно, например, сравнить, как одно и то же событие освещается в выпусках новостей на разных телеканалах: на один и тот же визуальный ряд накладываются различные тексты, создающие у зрителей установку, на основе которой осуществляется интерпретация видимого.

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

«Я знаю, где это должно находиться»

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

Поле для ввода логина и пароля в правом верхнем углу на сайте Mint.Com.

«Я знаю, как это должно выглядеть»

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

«Я знаю, как это должно работать»

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

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

«Я знаю, как это должно называться»

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

На сайте Techi.Com, публикующем новости мира высоких технологий, ссылка Contact us (Свяжитесь с нами) присутствует внизу каждой страницы.

Рекомендация : Обращайтесь к пользователям на понятном им языке. Интерфейс должен быть понятным и прозрачным для аудитории сайта. Избегайте оригинальности ради оригинальности и не давайте вычурных имен типовым элементам интерфейса.

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

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

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

Для еще одной иллюстрации процесса, взгляните на GIF-файл ниже:

Вы наверняка видите бегущую собаку. Возможно, даже узнали ее породу:) Но на самом деле, это не более чем ряд движущихся точек. Данные несложные примеры прекрасно демонстрируют особенности нашего мозга, который все время пытается структурировать окружающий мир. Этот феномен известен как гештальт-принцип зрительного восприятия, объясняющий процесс, через который наш мозг «по умолчанию» формирует жесткую структуру из всей поступающей информации. Но почему это важно для маркетологов и веб-дизайнеров?

Почему дизайнерам важно учитывать гештальт-принципы?

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

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

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

2. Данные принципы влияют на наше визуальное восприятие, что позволяет дизайнерам направлять внимание на определенные участки макета, мотивируя нас к целевым действиям, а также корректируя наше поведение.

3. Наконец, наивысший уровень. Гештальт-принципы позволят разработать продукт, решающий проблемы и удовлетворяющий потребности клиентов, притом делающий это красивым, приятным и интуитивно-понятным образом.

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

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

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

«Эта детерминанта действует быстро и подсознательно в большинстве случаев. Фигура-фон позволяет понять, на что обратить внимание, а что можно проигнорировать в композиции», Стивен Брэдли (Steven Bradley), веб-дизайнер.

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

Примеры

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

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

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

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

Примеры

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

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

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

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

Обратите внимание на изображение выше. Относительная близость объектов играет большую роль, нежели цвет и схожая форма.

Примеры

Близко расположенные объекты с соответствующими подписями в каталоге интернет-магазина сообщают нам, что элементы объединены.

Vice также использует принцип для сортировки изображений, заголовков и подписей к каждой из своих историй.

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

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

Примеры

В дизайне Pinterest принцип общей области использован для разделения каждого «пина»: фото, название, описание, авторство и прочие детали объединены вместе и отделены от аналогичных деталей в других карточках.

Facebook также применяет принцип, дабы донести, что комментарии, лайки и репосты относятся именно к этому конкретному посту, а не к другим окружающим его элементам — комментариям и т. д.

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

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

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

Примеры

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

Sprig применяет принцип, чтобы прояснить трехшаговый процесс использования приложения.

А Credit Karma пользуется принципом для иллюстрации преимуществ своих услуг.

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

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

Примеры

Принцип широко используется в дизайне логотипов различных компаний, включая IBM, NBC, Zendesk и Funding Circle.

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

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

Примеры

Twilio использует принцип для привлечения внимания к СТА-элементам.

Instacart сочетает принцип координационного центра с принципом фигуры-фона, обращая ваше внимание сперва на белый первый план, а затем на зеленую кнопку «find stores».

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

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

Принципы юзабилити интерфейсов

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

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

Принцип 1. Навигация. Горизонтальное и вертикальное меню.

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

JavaScript. Быстрый старт

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

Принцип 2. Отсутствие ошибок.

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

Принцип 3. Правильное оформление шапки сайта.

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

Принцип 4. Свободное пространство.

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

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

Принцип 5. Качественный текст.

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

наличие заголовков и подзаголовков;

выделение ключевых слов и важной информации (жирным шрифтом, сносками, маркерами и т. д.);

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

использование нумерованных и маркированных списков;

разбивка текста на абзацы, состоящие из 3-4 предложений.

Принцип 6. Поиск по сайту.

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

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

Принцип 7. Скорость загрузки.

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

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