Задача:
Результат:
Детальный прототип интерфейса с графическим оформлением на 67 страниц. Достаточно взглянуть на него, чтобы оценить глубину проработки.
![Основной экран со списком задач. Группировка помогает акцентировать внимание на задачах, требующий действий пользователя](https://userhouse.ru/i/project/result/images/Ultima_task_result_1_hr.jpg)
Основной экран со списком задач. Группировка помогает акцентировать внимание на задачах, требующий действий пользователя
![Так как одна задача часто порождает другие задачи, они имеют не линейную, а иерархическую структуру и, соответственно, могут быть выведены в виде дерева](https://userhouse.ru/i/project/result/images/Ultima_task_result_2_hr.jpg)
Так как одна задача часто порождает другие задачи, они имеют не линейную, а иерархическую структуру и, соответственно, могут быть выведены в виде дерева
![Страница задачи: в левой части собрана общая информация по задаче, в правой самая суть — текст и древовидные комментарии](https://userhouse.ru/i/project/result/images/Ultima_task_result_3_hr.jpg)
Страница задачи: в левой части собрана общая информация по задаче, в правой самая суть — текст и древовидные комментарии
![Самый красивый экран — инфографика по задаче с отображением всех этапов, статусов, ответственных и затраченного времени](https://userhouse.ru/i/project/result/images/Ultima_task_result_4_hr.jpg)
Самый красивый экран — инфографика по задаче с отображением всех этапов, статусов, ответственных и затраченного времени
Процесс:
Главной для всех пользователей системы является страница с задачами. Она имеет три вида: списком, деревом и историей. Список — похож на таблицу с задачами, где настраиваются колонки и сортируются данные. В этом виде легко сделать общую оценку о состоянии дел.
![](/i/ultima/1.png)
Дерево задач отражает иерархию. Такой вид позволяет выделять общие и частные задачи. А также оценивать процент выполнения общей задачи по количеству выполненных подзадач.
![](/i/ultima/2.png)
История задач — это страница в форме уведомлений на временной ленте. Здесь можно отследить смену статусов задач и динамику их выполнения. И очень удобно работать с обновлениями с момента последнего посещения страницы.
![](/i/ultima/3.png)
Таким образом, в соотвествии с целями можно менять вид представленной страницы. Однако, в течение времени пользователь может столкнуться с тем, что задач станет так много, что анализировать информацию станет затруднительно.
Поэтому для этой страницы разработан механизм сортировки (фильтрации) отображаемых данных и возможность сохранения настроек.
![](/i/ultima/4.png)
![](/i/ultima/5.png)
Возможность анализа и оценки состояния всех акутальных задач — одна из основных функций этого сервиса. Но помимо этого он должен обеспечивать удобную работу с каждой конкретной задачей.
Страница с описанием задачи претерпела самое большое число изменений. Основная сложность состояла в понятной компоновке большого количества информации на ней.
![](/i/ultima/6.png)
Для каждой роли пользователя таск-менеджера был проработан блок со статусом задачи и соотвествующими кнопками-действиями.
![](/i/ultima/7-17.png)
Cтраница с описанием задачи по сути является протоколом: кто, что и когда. Она дает представление о задаче здесь и сейчас. Тогда как вкладка «История задачи» позволяет увидеть динамику: сроки согласования и утверждения, время выполнения задачи, крайние сроки. И все это отображается не только в таблице, но и визуально — на временной ленте.
![](/i/ultima/18.png)
Поэтапно отрисовано, как меняется лента в ходе работы над задачей.
![](/i/ultima/19.png)
![](/i/ultima/20.png)
И отрисованы ленты с всевозможными временными периодами.
![](/i/ultima/21.png)
Здесь был описан только один из разделов сервиса. В действительности их больше. И они отличаются у разных типов пользователей, в соответствии с зоной их отвественности. Не только наличие разделов отличает разных типов пользователей, но и возможность редактирования данных, создания задач и проектов. Поэтому проект потребовал разработки не одного интерфейса, а нескольких. Именно этим и был интересен для нас этот проект.
Поделиться в соцсетях
Другие проекты по проектированию интерфейсов
![Маркет Красок](https://userhouse.ru/i/client/logos/_Market_Krasok_2_hr.png)
![Mail.ru Group](https://userhouse.ru/i/client/logos/_Mail_2_hr.png)
![Happy Bottle](https://userhouse.ru/i/client/logos/_hb_2.png)
![Yota](https://userhouse.ru/i/client/logos/_Yota_2_hr.png)
![Forex Club](https://userhouse.ru/i/client/logos/_ForexClub_2_hr.png)
![ILP Agency](https://userhouse.ru/i/client/logos/_ILP_2_1_hr.png)
![VVP Group](https://userhouse.ru/i/client/logos/_VVP_2_1_hr.png)
![ТрансКонтейнер](https://userhouse.ru/i/client/logos/_TK_2_hr.png)
![Резонит](https://userhouse.ru/i/client/logos/_Rezonit_2_hr1.png)