Денис Брюхов

Для новой версии сайта туроператора BSI Group, в компании Телемарк создали дизайн-концепцию и более 10 шаблонов внутренних страниц. Я разрабатывал дизайн и вел проект.

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

Главная страница:

[Дальше-больше]

Золотистая гамма — довольно сложная штука. Также как и работа с розовым, к примеру.

Вот что получилось на главной сайта компании Эф-Ай-Ти.

К сожалению, рестайлинг коснулся пока только главной страницы.

Из приятных фишек можно отметить, слайдеры (большая витрина и блок «идеи путешествий») и карту. Карта компактно отображает страны по которым работает компании и фильтрует остальные (по клику на макрорегион).

Задача — создать сервис, с помощью которого, можно:

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

На данный момент это реализовано в альфа-версии социального путеводителя «Ойкумена».

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

Персональный профиль путешественника

Сюда мы попадаем, перейдя по ссылке «Мои путешествия». В персональном профиле пользователь может отметить все города и места которые он посетил, в том числе и их местонахождение на карте. По клику на название города в списке карта скроллируется, не изменяя масштаба, а при клике на место в городе, она масштабируется до уровня города. Таким образом решается проблема разделения маркеров городов и мест на одной карте: города показываются на уровне стран, а места на уровне городов.

Еще одна интересная задача, которую предстояло решить — это компактное размещение списка стран, городов и мест. В итоге получился сворачивающийся список, в котором страны отображаются в горизонтальном списке. Такой способ отображения позволяет удобно управлять отображением мест на карте, не прибегая к прокрутке. Его недостаток — «ненаглядность» в свернутом состоянии, но это легко исправить по умолчанию открывая родную страну пользователя.

Добавить новый город в список можно легко, прямо на этой странице. А для добавления мест и фотографий предусмотрены отдельные интерфейсы. [Дальше-больше]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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