Принципы дизайна

Mobile First проектирование

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

В случае с Личным кабинетом B2B основной канал взаимодействия – десктоп, эти интерфейсы проектируем, начиная с него.

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

Устойчивость к изменениям контента

При проектировании мы не забываем проверить, как макет выдержит испытание реальным контентом. У статьи может быть название из одного короткого слова, а может – из пяти длинных, есть короткие имена и фамилии, а есть всеми любимый «Константин Константинопольский». В интернет-магазине есть товары по разным ценам, цены с дробной частью, у некоторых товаров не могут быть не загружены картинки. У пользователей может не быть аватарки, а только default picture на ее месте. Наконец, в Личном кабинете пользователя могут быть доступны шесть функций, а может – лишь одна.

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

Глубина интерфейса следует глубине информации

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

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

Итерационность

Если пользователь не решил задачу с первого раза, возможность продолжить заново с этого же места без необходимости возврата назад.

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

Обработка промежуточных и конечных точек пользовательских сценариев

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

А значит, требуется позитивная эмоциональная поддержка на всех этапах его прохождения в формате «поощрения» или «вознаграждения». Особенно это касается поощрения по итогам успешного прохождения сценария для решения своих задач.

В проектировании подобной обработки может помочь такой инструмент как CJM в любом его виде.

Онбординг

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

Косвенно онбординг должен присутствовать во всех цифровых интерфейсах. На любой страницы пользователь должен без труда ответить себе на два вопроса: «Где я нахожусь?» и «Что я могу здесь сделать?». В процессе проектирования дизайнер определяет, какие элементы интерфейса помогут с ответом на эти два вопроса.

Потоковое состояние

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

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

Растворение личного кабинета

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

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