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

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

pmarketfm.pdf (732 Кб)

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

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

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

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

Поиск туров:

Индивидуальное обслуживание:

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

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

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

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

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

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

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

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

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

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

Фотографии пользователя

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

Карточка города

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это филиппинское приветствие. По аналогичному доменному имени mabuhay.ru, скоро будет открыт сайт Департамента Туризма Филиппин.

Сайт создается в компании Телемарк, я занимался разработкой информационной структуры, дизайна и ведением проекта. Так будет выглядеть главная страница сайта.

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

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

Итак, по хронологии, в порядке убывания.

Сайт компании Телемарк

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

Сайт турагентства Марина Клаб

Помнится, в начале века были очень популярны фактурные дизайны. Особенно в Великом Новгороде, там редкий сайт обходился без бересты :) Да и неподражаемый Тема Лебедев делал барочные сайты, взять хотя бы сайт Старого Мельника

Вот камбэк из деревянной серии собственного производства — сайт агентства «Марина Клаб».

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

… и внутренняя (на примере описания страны)

Сайт компании География здоровья

Проект включает в себя 3 сайта и сплэш-страничку. Классные флешки делал Влад Вовк.

Один из сайтов:

Сайт магазина эко-продуктов Bio Gourmet

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

Ну и хватит пожалуй для одной записи. Более ранние работы выложу как-нибудь потом.

Выход в использовании программ для прототипирования. Долго расписывать не буду: пробовал визио – как всегда куча инструментов для кого угодно и в итоге много лишнего. Axure RP Pro — специально предназначена для веб-интерфейсов. Проектровать в нем — одно удовольствие!