18 января 2018

UX-кейс. Как раз и навсегда прибраться в технических разделах

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

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

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

Но если сервису уже несколько лет, и люди им пользуются, но в технических разделах все еще бардак – стоит ими заняться, потому, что пользователи неизбежно туда заходят и косячат.
Gmail
Насколько дружелюбными их делать – решать дизайнеру. Например товарищи из Gmail, как сделали страницу настроек лет десять назад, так и не трогают ее с тех пор. Лично у меня от нее дергается глаз – все слеплено, кривовато, а кнопку Save changes я через раз забываю нажать, потому что не вижу.
Странице настроек в сервисе Gmail
Convead, что было плохо
У нас в Convead долгое время руки не доходили до технических разделов, они выглядели разношерстно. Когда возникала необходимость сделать новую страницу, получалось так, что дизайн старых нельзя было переиспользовать, приходилось вводить новые элементы, добавлять уровни заголовков или изобретать новое расположение блоков.

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

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

Старая страница оплаты выглядела так:
Старая страница оплаты в Convead
Здесь все в одном месте – и описание тарифа, и интерфейс для его смены, и еще куча всего. Пользователи на ней терялись и не знали куда смотреть.

Новая страница с разделенными блоками выглядит так:
Новая страница оплаты в Convead
1
Страница стала легче восприниматься пользователями, потому, что в один момент времени они фокусируются только на одном блоке.
2
Ушел функционал по выбору тарифа – повесили его на кнопку.
3
В каждый момент времени пользователю видна только одна самая главная кнопка (CTA – call to action).
Это оказалось так удобно и понятно, что концепцию расширили, доработали и стали применять для прочих технических разделов.
Мастер установки Convead – выбор CMS системы
Блоки превратились в заголовки, которые в некоторых случаях умеют раскрываться и показывать дополнительный контент. Например, в мастере установки пока пользователь не пройдет очередной шаг, он не видит внутренность следующего.

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

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

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

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