Универсальное окно: как мы делали интерфейс для нашей CRM

Меня зовут Оля Миронова, я руководитель проекта в «Техносерв Консалтинг». Сегодня я расскажу о нашем опыте создания инструмента для рекрутёров, который встроен в HR-CRM TalentForce. И самое важное в нём — интерфейс.

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

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

● выставлять параметры подбора кандидатов для автоматического поиска во внутренней базе кандидатов;

● одним кликом подгружать данные из внешних источников;

● создавать задания на поиск нужных специалистов;

● оценивать соискателей и вести всю историю работы с ними;

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

TalentForce полезен для тех рекрутёров, которые ищут кандидатов на открытые вакансии и проводят собеседования. Поэтому при разработке интерфейса мы ориентировались именно на их потребности, а также на общепринятые правила интерфейсостроения:

- придерживались принципа единого окна, где можно увидеть всю необходимую информацию по кандидатам, чтобы рекрутёры реже обращались к другим вкладкам, окнам или приложениям;

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

В-четвёртых, мы хотели сделать интерфейс красивым. Есть такое явление, как Aesthetic-usability effect: красивый дизайн часто воспринимается более удобным. Это следствие подсознательного психологического ожидания: красивое приложение должно хорошо работать.

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

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

Продумывая размещение и размер элементов, мы держали в голове закон Фиттса. Чтобы пользователям было проще и быстрее наводить курсор, мы делали важные элементы больше, а плотность размещения уменьшали.

Сначала у нас получился такой вариант интерфейса:

Справа располагался список текущих вакансий. Среднюю часть окна занимали карточки кандидатов с подробной информацией. Слева была выезжающая панель с дополнительными функциями. А сверху мы разместили линейку кнопок-фильтров, позволяющих в один клик выбирать кандидатов по различным статусам: «Добавлен», «Телефонное интервью», «Назначено интервью» и т. д.

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

● в название вакансии добавили «хлебные крошки» и возможность перейти в карточку вакансии. Теперь рекрутёры могут гораздо быстрее освежить в памяти требования по вакансии;

● пересмотрели состав и расположение информации в карточке кандидата;

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

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

● заменили отображение этапа у кандидата и изменили кнопку для смены этапа. Опять же, для лёгкости визуального восприятия и логичности.

● убрали с главного экрана элементы с редко используемыми функциями. Спрятали их в контекстные меню;

● выезжающую панель перенесли на правую часть окна;

● увеличили размер карточек кандидатов;по просьбе рекрутёров добавили возможность по одному клику перейти в WhatsApp-чат с кандидатом.

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

После запуска второй версии рекрутёры всей командой полностью перешли на TalentForce. Актуальная статистика показывает рост продуктивности на 25%. А руководители других отделов компании, узнавшие о новинке, попросили сделать для них подобное окно, где они могут отслеживать подбор кандидатов и скорость закрытия вакансии.