Денис Брюхов

Дизайн-концепцию для Market.FM на основе моих прототипов нарисовал Женя Лучинин, а я разработал макеты более 50 внутренних страниц, фактически все экраны. Как выяснилось, в проекте не было мелочей, которыми можно было пренебречь и сделать непродуманно. Вот один из экранов, наверное, самый сложный.

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

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

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

Итак, задача — разработать систему управления проектами по созданию и поддержке веб-сайтов со следующими возможностями:

• возможность раздельного отображения входящих и исходящих (поставленных пользователем) задач;
• возможность назначать задачам типы работ с определенной тарификацией и объединять задачи по проектам;
• возможность легко отмечать небольшие отрезки времени затраченного на задачу в течении дня, сразу же по завершении этого отрезка работы. Это актуально для менеджеров проектов и технической поддержки, которые тратят по 10 раз по 20-40 минут в день на проект, а проектов одновременно от 5 до 10;
• возможность участия клиентов в качестве пользователей (экстранет);
• возможность получения отчетов по загрузке сотрудников и биллинговой информации по выполненной работе для клиентов. Соответственно возможность установки различных тарифов на разные виды работ.

На экране входящих задач, с которого начинает работу пользователь, мы видим поставленные пользователю задачи. Зеленым выделены новые (в статусе «Регистрация»), оранжевым просроченные. Флажками отмечены задачи с высоким приоритетом. Всплывающий слой рядом с «плюсиком» позволяет не открывая карточку задачи добавить затраченное только что время.

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

Карточка задачи в общем обычная для таких систем. Цветом разделено содержание и свойства задачи. Набор доступных опций для редактирования свойств разный для каждой роли пользователя. Из приятного — выделены ключевые параметры задачи: дедлайн и приоритет. Приоритет снимается и назначается одним кликом по иконке флажка.

На экране добавления/редактирования проекта можно сразу установить доступ к проекту. В компании относительно небольшой штат и нет необходимости разделять доступ к проектам между сотрудниками. Поэтому по умолчанию проект сразу доступен всем сотрудникам компании, а сотрудников компаний-клиентов можно добавлять отдельно.

Cистема дистанционного тестирования предназначена для подготовки к сдаче квалификационных экзаменов на курсах специалистов финансового рынка и курсах подготовки специалистов по связям с инвесторами.

Локальная задача: разработать удобный интерфейс для сдачи экзамена на время при условии, что за 2 часа нужно ответить на 60-80 вопросов по 3-5 вариантов ответа в каждом.

Особенности: нужно предусмотреть возможность пропустить сложный вопрос и затем легко к нему вернуться, когда останется время (таймер).

Изначально заказчик ориентировался на следующий пример:

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

Решение очевидно — поэкранное отображение вопросов. С возможностью выделения цветом тех вопросов, на которые дан ответ. Таймер выделить, чтобы экзаменующийся чувствовал себя спокойно :)

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

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