Bubble-Ishikawa diagramm (RUS)

Dmitriy Sarychev
tesselogy
Published in
4 min readNov 21, 2016

Последние несколько месяцев я принимаю участие в небольшом, но очень интересном проекте. Для HR портала потребовалось сделать инструмент по подбору профессий. Человек заходит посмотреть вакансии, а ему предлагают профессии, которые могут быть ему интересны. Не секрет, что около 70% людей недовольны своей работой. Но если попросит назвать хотя бы 10 интересных профессий (актуальных разумеется) или например чем им не подходит текущая — то ответ удивит их самих

Инструмент состоит из опроса, математики, психологии и базы данных с профессиями. Человек тратит не более 5 минут и получает персональный список. Все предельно просто

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

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

Говорить простыми словами сложные вещи — великое искусство. Иметь возможность показать без слов — бесценно

Инфографика, 3D визуализация, интерактивные диаграммы дают современному человеку гораздо больше информации за единицу времени. Издательства Guardian and NY Times визуализируют результаты выборов в США, распределение бюджетов и прочую информацию в реальном времени уже сейчас

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

А делать наглядным было что. У нас получались 4 независимые группы характеристик, в каждой из которых выделялись главные и второстепенные. Заранее было не известно сколько будет тех и других. И не смотря на то, что группы были независимы, в процесс подбора профессии они вносили разный “вклад” и это тоже нужно отобразить

Визуализации профиля человека в бизнес стиле

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

Еще одна попытка пояснить характеристики графикой

Попытка распределять вклад каждой характеристики в общий профиль человека оказалось такой же бессмысленной затеей. Получалось, что вы на 30% интеллектуал, поэтому все оставшиеся ваши качества нужно впихнуть в 70%…А, как я уже говорил, сами группы между собой независимы

Для себя мы решили что человек одновременно должен видеть:

  1. Все свои характеристики
  2. Разделение и ранжирование на главные и второстепенные
  3. Насколько ему подходит та, или иная профессия

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

Отличная идея, по размеру пузыря видно насколько характеристика важна. А вписывание каждой профессии в рамки характеристик человека можно еще и в динамике продемонстрировать. Вполне конкретная аллюзия к наполнению профессией.

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

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

Вариация на тему диаграммы Исикавы

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

А еще мы однозначно определим что вверху будут главные, а внизу второстепенные характеристики. Каору Сан тоже делил на правые и левые, так что мы вполне адекватны

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

Эволюция диаграммы от эскиза до реализации в WEB

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

Лайк, если статья была интересной и подписка если используете d3.js :)

--

--