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

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

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

Пара слов о TalentForce

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

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

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

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

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

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

Единое окно для рекрутёров

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

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

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

Пример избыточно усложненного интерфейса.

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

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

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

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

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

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

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

Выкатили это единое окно для наших рекрутёров и начали собирать отзывы. В результате внесли такие изменения:

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

Было
Стало

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

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

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

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

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

Было
Стало

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

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

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

Теперь единое окно выглядит так:

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

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

{ "author_name": "Техносерв Консалтинг", "author_type": "editor", "tags": [], "comments": 7, "likes": 5, "favorites": 25, "is_advertisement": false, "subsite_label": "design", "id": 201857, "is_wide": false, "is_ugc": false, "date": "Mon, 01 Feb 2021 12:41:00 +0300", "is_special": false }
0
7 комментариев
Популярные
По порядку
Написать комментарий...
4

Ух стиль Windows 98.

P.S. А вот дизайн 2020 года))

Ответить
1

Ну, если смотреть на «было-стало»...

Ответить
3

Спасибо, что делитесь опытом👍😊

Ответить
1

На днях мелькал перевод о смене задач которые ставят перед UI.
У вас статья об удобном интерфейсе, как вы стараетесь. Для меня тема HR актуальна и я пошёл смотреть.
Пролистал лендинг на который ссылаетесь, решил посмотреть цены и упс...
Только форма для сбора данных с запросом демо....
Нет ли здесь противоречия?
На словах все доя пользователя а в продаже все средства хороши?
Или я не там смотрел?

Ответить
0

Вы правы, на сайте проекта цен нет, стоимость зависит от потребностей компании и рассчитывается индивидуально, с учетом выбранных модулей и прочих критериев. Будем рады подготовить для вас расчет и презентовать возможности системы лично. Пришлите, пожалуйста, ваши контакты для связи на почту talentforce@tsconsulting.com. Мы оперативно с вами свяжемся.

Ответить
0

Не о том речь.
Речь о противоречии.
Лично мне такая форма вместо цен, просто претит

Ответить
1

Главное, что рекрутёра остались довольны.

Ответить

Комментарий удален

Комментарии

null