Дизайн интерфейсов. Введение в специальность. В рамках проекта Академия.

Конспект 2-ой недели (начало)

Тематика второй недели курса охватывает два раздела:

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

Объем информации большой, поэтому я разделила его на 2 поста.
**

Психология восприятия

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

Управление вниманием — одна из главных задач дизайнера интерфейсов.

иллюстрация

Как работает внимание

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

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

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

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

Как привлечь внимание пользователя

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

На основании этой теории можно выделить ряд важных инструментов привлечения внимания.

1. Выскакивание, так назвала это Трейсман.

В качестве примера можно рассмотреть множество букв
OOOOOOOO
OOQOOOOO
OOOOOOOO
Здесь буква Q сразу бросается в глаза, потому что у нее есть ключевой отличающийся элемент - дополнительная черточка. Именно он выделяет объект в данной визуальной среде.

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

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

2. Движение также имеет значение для привлечения внимания.

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

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

Использование изображения лиц в интерфейсе

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

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

Законы восприятия, которые нужно знать дизайнеру

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

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

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

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

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

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

Ментальные модели

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

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

Ментальные модели бывают

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

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

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

Какие при этом могут возникнуть трудности?

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

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

Как исследовать ментальные модели пользователей?

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

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

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

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