Так что без бумажки все равно не обойдешься на ранней стадии, но для презентаций проектов, когда еще даже к тз не приступали, не говоря про код и дизайн — используем Balsamiq Mockups! Он работает на AIR, поэтому одинаково хорошо пойдет на маках и писи.

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

Словом, есть такая профессия — дизайнер взаимодействия. Взаимодействия человека и машины. Все, кому интересна эта материя, могут купить книгу в формате PDF.

pmarketfm.pdf (732 Кб)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Реализация Tiscover AG, Австрия. Пока единственный, если так можно выразиться, производитель симпатичных туристических сайтов. Из известных мне, разумеется.