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

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

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

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

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

Но если сервису уже несколько лет, и люди им пользуются, но в технических разделах все еще бардак – стоит ими заняться, потому, что пользователи неизбежно туда заходят и косячат.

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

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

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

С масштабированием тоже были проблемы. Например, изначально форма настроек онлайн-консультанта состояла из 5-6 полей, а через год уже занимала два экрана и найти в ней что-то было проблематично:

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

Старая страница оплаты выглядела так:

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

Новая страница с разделенными блоками выглядит так:

Это оказалось так удобно и понятно, что концепцию расширили, доработали и стали применять для прочих технических разделов.

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

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

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

До каких-то разделов, конечно все еще не дошли руки, но со временем их тоже подчистим и переведем в новый дизайн.

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

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

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