Карта сайта Поиск

Проектирование и дизайн интерфейсов

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

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

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

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

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

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

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

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

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

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

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

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

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

Как идет процесс создания интерактивных прототипов?

Сбор требований

  • Видение проекта (vision)

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

  • Описание целевой аудитории (персонажи)

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

  • Сценарии взаимодействия, краткие и подробные

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

  • Перечень функциональности (user stories)

    Подробный список того что пользователь может делать в системе. Вся функциональность будущего продукта разбивается на простейшие возможности в виде «<кто> <что делает> <с чем>». Каждая из функций имеет приоритет, определяющий важность для общего успеха продукта.

Проектирование интерфейса

  • Карта сайта и схема навигации

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

  • Диаграммы взаимодействия

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

  • Структурные схемы страниц (wireframes)

    Основной результат работ по проектированию. Они в деталях показывают, какая информация и элементы управления должны выводиться на каждой странице системы. А также описывают поведение динамических и AJAX-элементов страниц.

Дизайн

  • Дизайн-макеты страниц

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

  • Руководство по стилю интерфейса

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

У вас есть вопросы или предложения?

Вы легко можете связаться с нами

У вас есть вопросы или предложения?

Вы легко можете связаться с нами
* звездочкой отмечены обязательные поля
*
*