{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Я не хочу думать. Часть 1

Привет! Я Наташа Ведерникова, UI-дизайнер в компании Level. Мы разрабатываем электронные курсы для обучения сотрудников других компаний. Изучаю пользовательский опыт и психологию человека, чтобы создавать продукт удобным и интересным для пользователя.

В IT-сфере существует огромное количество различных продуктов. И многие разработчики в своей работе сталкивался с главной проблемой — пользователь не использует ресурс так, как задумано.

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

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

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

Очевидность

Как правило, людям не нравится раздумывать над тем, как делать что-либо

Стив Круг, Юзабилити-консультант

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

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

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

«Довольствование» и закон Хика

«Оптимизация трудна и требует времени. «Довольствование» является более эффективным»

Гэри Клейн, Американский психолог

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

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

Упражнение на соответствие разбито на два слайда.
Порционность подачи задания позволила упростить восприятие контента.

Условности — ваши друзья

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

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

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

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

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

Упражнение на определение верной последовательности.

Небольшая помощь иногда полезна

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

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

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

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

0
Комментарии
-3 комментариев
Раскрывать всегда