Этап I. Предпроектный анализ

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

Проще говоря нужно понять, что же все-таки требуется сделать. Причем понять не только разработчику, но и самому инициатору проекта. Часто идея звучит достаточно обще. А когда дело доходит до объяснения того что же все-таки нужно делать — сказать никто не может.

Также составляется первоначальная карта сайта (набор форм приложения), которая показывает примерную структуру будущей системы. На написание и утверждение этих базовых документов обычно уходит около 3 дней, после чего мы планируем остальные работы и даем точную оценку сроков и стоимости их выполнения. Поэтому удобнее вести предпроектный анализ по отдельному договору — сложно получить точную оценку двухмесячной работы без предварительного исследования.

 

Этап II. Сбор требований

На следующем этапе мы готовим подробный перечень функциональности (user stories).

Он позволяет учесть все функциональные требования и лучше понять особенности будущей системы. На его основе мы делаем вывод, какие из функций требуют отдельной страницы/формы, а каким будет достаточно простой кнопки. Ориентируясь на составленных ранее персонажей, мы обновляем карту сайта и составляем схему навигации (меню программы). После этого рисуются диаграммы переходов между страницами (подойдёт диаграмма состояний) — они объединяют страницы системы в рамках конкретных процессов. Теперь мы знаем, как пользователи будут работать с продуктом в целом и как именно выполнять конкретные задачи. Этап длится около 4 дней.

После этого можно уже достаточно точно оценить и спланировать работы. Часто оценку дают без предварительного анализа. А потом нервы и заказчика, и разработчика сжигаются быстрее чем калории на велотренажере. Если проект долгосрочный, запускать его стоит в несколько этапов. Это нужно предусмотреть и при проектировании интерфейса — будет ли целостным продукт, если работает только половина его возможностей?

 

Этап III. Проектирование интерфейса

Теперь мы начинаем непосредственно проектирование. Основной документ, который получается в итоге этого процесса — детальные схемы (wireframes) страниц сайта или форм программы, которые показывают, какая информация и элементы управления должны располагаться на страницах системы. Это еще не дизайн, но уже основа для него — wireframes являются техническим заданием для дизайнера. Общение с клиентом на этом этапе достаточно плотное — уточне ние вопросов и утверждение чертежей идет по нескольку раз в день. Но и результатов хватает — в зависимости от сложности проекта выходит от нескольких десятков до пары сотен схем страниц. Длительность этапа — от одной до нескольких недель.

 

Этап IV. Дизайн интерфейса

Завершающим этапом становится визуальный дизайн интерфейса. Сперва на основе пары ключевых страниц мы отрабатываем креативную концепцию. После того как общая стилистика одобрена клиентом, отрисовываются дизайн-макеты ключевых страниц системы. На этом этапе продукт обретает внешний вид — до этого мы занимались его сутью и принципами работы. Для проектов, которые планируют активно развиваться, мы также готовим руководство по стилю интерфейса (style guide). Он описывает принципы визуального оформления продукта и позволит сохранить его целостность в процессе доработок. Работы по этому этапу продолжаются 1–2 недели.

 

Этап V. Подготовка спецификации

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

 

Финальный этап. Приемка

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

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

 

Примеры неудачного дизайна