17 декабрЯ 2021

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


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

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

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

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

Очевидность

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

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

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

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

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

При работе с интерфейсом также стоит не забывать про закон Хика — время, необходимое для принятия решения, увеличивается с учетом количества и сложности доступных вариантов. Чем сложнее будет интерфейс, чем больше в нем будет элементов — тем сложнее будет пользователю обработать контент.
Новые знания прямо на почту
Подпишитесь на e-mail рассылку, чтобы одним из первых получать анонсы статей наших экспертов. Также в письмах рассказываем, как работают электронные курсы или бизнес-симуляции для конкретных задач. Присылаем письма 2 раза в месяц.
Ваш e-mail адрес — это персональные данные, которые мы обрабатываем. Когда вы подписываетесь на рассылку, то соглашаетесь с политикой конфиденциальности.

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

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

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

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

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

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

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

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

Интересное по теме