Анализ

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

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

Сбор требований (requirements gathering). Выясняется:

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

Выяснение целей заказываемого сайта. Поиск ответов на вопросы:

Очень четко следует выявить целевую группу сайта, кто будет его посещать/использовать. Постарайтесь найти ответы на вопросы:

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

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

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

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

Когда спецификация согласована с заказчиком, начинается дизайнерский этап.

Дизайн

Прежде всего стоит продумать структуру страницы, как организовать содержание. Все согласованные с клиентом компоненты и содержание страницы делится на категории, составляется иерархия.

Группа развития выбирает исходя из спецификации наиболее подходящие для достижения цели технологии.

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

Рис.1: Пример того, как выглядит эскиз страницы.

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

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

Создание прототипов

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

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

Обычно для иллюстрации дизайна используются следующие типы моделей:

Сюжетная доска (storyboard)

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

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

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

Рис.2: Типичная сюжетная доска.

Карта содержания (site map)

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

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

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

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

Рис. 3: Типичная карта содержания сайта.

Каркасная модель (wireframe)

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

При общении с клиентом каркасные модели позволяют сосредоточить внимание клиента на строении страницы (layout), оставляя в стороне дизайнерские тонкости (картинки, шрифты и т.д.).

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

Рис. 4: Типичная каркасная модель сайта.

Сценарий (scenario)

Словесный прототип, который описывает строение создаваемого сайта. В него входят так же история пользователя (user story) – словесное описание действий, выборов и результатов.

Визуальный дизайн

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

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

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

Детальный прототип

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

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

Прототип оценивается вместе с клиентом и после одобрения начинается процесс разработки. 

Разработка

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

Одна из наиважнейших вещей во время всего процесса разработка сосредоточиться на потребностях клиента и пользователей!!!

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

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

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

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

Внедрение

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

После процесса разработки начинается тестирование и доработка (refinement), что тоже является итеративным процессом. В ходе этого ищутся и исправляются технические ошибки, ошибки «пригодности» к использованию (usability), тестируется время открытия и при необходимости приложение оптимизируется.

Процесс тестирования включает в себя различные аспекты оценивания, например:

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

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

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

При необходимости следует сделать дополнительные изменения и только после этого, если клиент тоже одобрил, результат публикуется для открытого пользования.

Веб-сайт готов. Чаще всего на этом этапе жизненный цикл прерывается!

Оценивание

Стадия оценивания – это то, что происходит после готовности и публикации сайта. В ходе оценивания происходит формальное оценивание «пригодности» к использованию (formal usability studies) – процесс, в ходе которого анализируются реальные данные совместной работы машины и человека. Самыми обычными источниками данных являются журналы веб-серверов, анализаторы использования веб-сайтов (например Google Analytics). Такое оценивание можно провести только через открытую публикацию или во время тестирования на тестовом сервере и оно может быть очень дорогостоящим. Хорошо то, что не надо искать тестовых пользователей и экспертов, можно использовать данные реальных ежедневных посетителей сайта.

На стадии оценивание большой интерес проявляется к обратной связи пользователей, исследуется удовлетворенность сайтом.

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

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

Veebirakenduste disain Microsoft Silverlight tehnoloogia alusel. Microsoft Veebistuudium 2010.

Перевод Татьяны Тамбовцевой.