CC BY
151
Анализ этапов
проектирования
сайтов
К.М. Ротина,
магистрант кафедры ИВТиАМ
Введение
Около 5 лет назад многие компании не имели четкой структуры написания задания. На сегодняшний день поисковая программа Google по запросу «проектирование сайта» выдает около 40 000 000 результатов. О качестве контента такого количества выводов можно лишь предполагать, но выделить суть и разобраться в вопросе сможет любой заинтересовавшийся. Данные результата показывают нам консенсус в отрасли - проектирование сайтов необходимо.
Прежде чем начинать анализ, следует обратиться к определению проектирования: «Проектирование - деятельность человека или организации по созданию проекта, то есть прототипа, прообраза предполагаемого или возможного объекта, состояния; комплекта документации, предназначенной для создания определенного объекта, его эксплуатации, ремонта и ликвидации, а также для проверки или воспроизведения промежуточных и конечных решений, на основе которых был разработан данный объект» [1].
Если попробовать создать общую картину проектирования процесса, он будет в меньшей или большей степени иметь черты рис. 1.
Рис. 1. Схематичное представление процесса проектирования
111
На первый взгляд кажется, что основные контрольные точки -промежуточные и конечные данные и документы: результат сбора и обработки информации о таргетной аудитории, результаты исследования конкурентов, концепция, проектное задание, технические требования, эскизы, прототип и так далее.
Но давайте рассмотрим с другой стороны представленную схему и возьмем за контрольные точки стрелки перехода/передачи информации от одного этапа к другому.
За основу будет взята реальная усредненная модель работы при создании сайта от желания Заказчика до этапа рабочего процесса команды Исполнителя.
Процесс проектирования
Процесс создания сайта занимает не один месяц работы команды профессионалов, в которую входят:
1. Руководитель проекта.
2. Технический директор.
3. Арт-директор.
4. Дизайнер(-ы).
5. Технолог(-и).
6. Программист(-ы).
7. Менеджер.
При разработке сайта команда Заказчика может сократить путь - сэкономить на этапе проектирования и перейти к техническим работам. Чем чревато такое поведение:
1. Плохой брифинг отнимет время и будущих клиентов.
Тайминг-план сильно пострадает, если при встрече с клиентом
вы будете задавать вопросы, которые никак не помогут в дальнейшем с первого раза решить задачу. Переделывание макетов, верстки не только заберет время и оплаченные деньги у Заказчика, но и оставит отпечаток непрофессионализма в глазах существующего и будущих клиентов. Какой бы мир не был большим, дурная слава распространяется быстро.
2. Не все правда, что говорит клиент.
На этапе чтения Задания Заказчик может со всем согласиться, но когда он увидит с помощью скольких блогов/какого функционала отображен элемент на странице сайта, он сам себе может начать противоречить. Это поможет избежать правильно составленное задание и прототипы.
Пример из жизни: Клиент внимательно ознакомился с пунктом Задания, который гласил «на главной странице сайта размещен блок, содержащий не более 5 промо-баннеров с автоматической ротацией <...>. На главной странице размещен блок с отображением акционных товаров. Параметры данного блока доступны редактору в режиме редактирования через панель администрирования сайта». Клиент полностью согласен с данными блоками.
112
На этапе проектирования Исполнитель понимает, что места для двух блоков недостаточно на главной странице и логично будет объединить эти два блока в промо-блок, содержащий баннеры с акционны-ми новостями/баннеры с новинками/другие виды баннеров. Данный блок может настраиваться полностью вручную редактором сайта и после этого иметь автоматическую ротацию на сайте.
На этапе проектирования логика блоков утверждается Заказчиком. И на следующем этапе - отрисовке макетов, Заказчик будет обращать внимание только на дизайн.
3. Исполнитель может выявить недостатки идей.
Пример из жизни: проектируя карточку продукта в интернет-магазине, можно забыть включить функцию выбора разных модификаций одного товара. Работа магазина не сломается, но покупателю будет неудобно пользоваться магазином. Для этого проектировщик воссоздает сценарий, цель которого - купить модель «X»: зайти на главную страницу, выбрать раздел каталога, выбрать нужный товар, выбрать модификацию «X», далее проектировщик понимает, что шаг в Задании пропущен и нет возможности выбрать модификацию, ее нужно доработать.
4. Оценить логику и проверить ее на альтернативность.
При проектировании наглядно можно видеть, необходим ли
блок на конкретной странице, следует ли его продублировать в другой части сайта. Это максимально сократит доработку дизайн-макетов сайта.
5. Проект сохранит прибыль.
Проектирование - процесс менее затратный по времени и по сложности выполнения, нежели отрисовка дизайн-макетов сайта. Исправить страницу, повернув/удалив/добавив блок в виде геометрического очертания легче, чем перерисовать данный блок в Photoshop.
Чтобы команда не потратила 7 месяцев вместо запланированных 3-х на создание сайта, не следует недооценивать этап проектирования. Причем к данному этапу надо подходить осознанно. Ниже приведен порядок работы, который позволяет решить как минимум 5 острых проблем при разработке сайта. Представленная логика была собрана мною на основе личного опыта и опыта ведущих специалистов в области разработки сайтов. Рассмотрим полную картину работы: от брифинга, до непосредственной разработки.
Логика проектирования
При проектировании следует придерживаться 3-х составляющих:
1. Целеполагание.
2. Создание концепции.
3. Моделирование.
113
Целеполагание
Целеполагание необходимо для определения, зачем делается сайт и каких именно результатов желает достичь Заказчик. Это служит ориентиром для дальнейшей работы: чтобы Исполнители ни делали - моделирование, создание интерфейсов, добавление новых функций или изменение старых - все это должно соответствовать целям.
В будущем четко составленная цель позволяет оценить, насколько успешно был реализован проект и насколько он отвечает поставленным ранее требованиям.
Первый шаг в целеполагании сделан в видении проекта. На этапе же проектирования цели формулируются более точно и подробно, а также определяются задачи сайта, выполнение которых будет работать на достижение каждой цели.
Создание концепции
Концепция позволяет создать прочную оболочку вокруг основной цели. Концепция описывает основные черты разрабатываемого продукта, каким путем пойдет будущая разработка сайта:
• что и для кого мы делаем - общая идея и целевая аудитория;
• как сайт будет работать и какую информацию содержать;
• как сайт будет зарабатывать (если это проект с прямой монетизацией);
• каковы будут отличительные особенности сайта (от конкурентов), как он будет позиционироваться;
• какие функциональные возможности будут на сайте.
Первые две составляющие определяются на практике на этапе брифа и первой встречи с Заказчиком.К тому времени Заказчик имеет самое общее представление, зачаток своего будущего сайта. Задача Исполнителя: на основе заполненного брифа получить максимальное количество информации о сайте. Кажется, что можно узнать за несколько часов о проекте, если не задавать конкретные вопросы. Но Заказчик в последнюю очередь думает о функциональности будущего сайта. Чтобы сократить расходы компании на технологов, программистов, тестировщиков, менеджеров в десятки раз, следует отталкиваться от цели сайта.
Сами требования раскрываются из цели(-ей) сайта. Допустим это интернет-магазин. Основная цель - прибыльная продажа товара через новый канал сбыта. Средства достижения цели будут происходить через онлайн каталог товаров, функционал для заказа по телефону, функционал покупки через Интернет, функционал сравнения товаров и так далее. Для промо-сайта основная цель - презентация нового продукта. В таком случае функционал будет уходить на второй план, а на передний выйдет дизайн и нестандартные решения front-end1.
1 Front-end - это интерфейс между пользователем и программистом.
114
В зависимости от уровня сложности интерфейсных компонентов сайта, Исполнитель может определить количество обрабатываемой на сайте информации (это достаточно грубая параллельно, но применимая к большинству разрабатываемых сайтов). От этого зависит тип системы администрирования сайтом. Например, сайт домашнего питомца сможет выдержать несложная CMS с минимальным набором возможностей (добавить/удалить/изменить). Онлайн магазин товаров для дома потребует постоянное и автоматическое обновление каталога, загрузка/выгрузка принятых заказов, база для ведения учетных записей пользователей и многое другое. Сайт такого вида потребует систему администрирования с широкой функциональностью (Bitrix) или создание собственной CMS на основе фреймворка (Symphony).
Чем четче будут определены функциональные возможности сайта, тем легче будет Исполнителю перейти к последней составляющей.
Ниже представлены некоторые вопросы, которе помогут Исполнителю:
1. Цель сайта (промосайт/корпоративный сайт/онлайн-ка-талог/развлекательный портал).
2. Что пользователь сможет сделать на вашем сайте?
2.1. Основной упор на качество фотографий и креативной идее - промосайт.
2.2. Определение требований к выгрузкам (.xlsx), способам выгрузки (Bfl/e-mail/Bfl+e-mail), частоты обновления товаров (определяется логика разбиения данных) - интернет-магазин.
2.3. Задействование анимации, разработка игр (способ написания javascript/flash) - развлекательный портал.
Моделирование сайта
Моделирование - это создание модели сайта, которая описывает функциональные возможности и информационную структуру [2].
В функциональной части модели мы описываем возможности, которые сайт предоставляет своим пользователям: например, выкладывать, группировать и комментировать фотографии (социальная сеть) или заказывать и оплачивать товар (интернет-магазин). Важно понимать, что возможности являются инструментами решения задач. Если придуманная возможность не решает ни одну из задач - это может означать, что она лишняя. В проектном задании мы описываем возможности на достаточно высоком уровне абстракции - не так детально, как мы сделаем это в «Техническом задании на программирование», поскольку это на данном этапе не требуется.
Информационная структура - это схема, показывающая, из каких разделов состоит сайт, какие задачи он решает, и как пользователь будет перемещаться по сайту (схема навигации).
115
С этого этапа начинаются основные работы. После проведения встречи и выяснения дизайнерского и технического направлений проекта, Исполнитель может приступать к написанию Задания.
Есть множество вариантов написания Задания для проектирования сайта. Я предложу вариант на основе анализа некоторых работ и книг. Его основной каркас состоит из нижеперечисленных пунктов:
• Общая информация:
цель сайта целевая аудитория
• Дизайн-концепция
• Технические требования:
cms
минимальный набор браузеров хранение/обработка видео
• Архитектура сайта:
структура сайта
описание уникальных страниц
интерактивные элементы/формы
• Требования к переносу на хостинг Заказчика.
Хотелось бы уделить особое внимание пункту «Архитектура сайта». На любом сайте есть как минимум несколько страниц, которые выглядят уникально. Их количество будет варьировать в зависимости от фантазии и денежных возможностей Заказчика. Обычно это 5-15 страниц сайта. Чтобы создать 15 таких уникальных страниц, нужно подробно описать функционал, который будет находиться на данной странице, путь каждого элемента.
После того, как составлено грамотное Задание, все уникальные страницы прототипируются.
Прототипирование (англ. prototyping) - быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом [1].
Этот этап может решить основной вопрос - как представляет сайт Заказчик. На прототипе страницы все изображено схематично, но одновременно с этим решаются многие вопросы:
• каким путем/какими элементами сайт будет взаимодействовать с клиентом;
• удобен и понятен функционал на странице в целом;
• какой функционал наиболее важный, а какой нет.
Прототипирование еще позволяет сделать шаг назад и исправить набор интерфейсных решений, также прототипирование позволяет устранить несколько итераций по переделка дизайн-макетов страниц. Для заказчика переход от устного описания сайта до просмот-
116
ра дизайн-макетов - пропасть. Прототипирование позволяется сразу выявить некорректность или ненужность применения какого-либо функционала, демонстрирует его избыточность/недостаточность, дает Заказчику шанс проверить собственые пожелания по функционалу.
Ниже приведен пример прототипа. Разрабатывался он для корпоративного сайта юридической компании. Основная цель - редизайн существующего сайта и привлечение клиентов.
Как можно увидеть, на прототипе показано процентное соотношение основных зон сайта, продемонстрирован основной функционал сайт (поиск, регистрация, форма обратной связи).
Визуализация занимает особое место в процессе согласования. Увидев один раз, Заказчик сразу вам точно скажет, где, как и что неверно по его мнению.
На сегодняшний день прототипирование занимает активную позицию в разработке сайта. Ниже представлен список наиболее популярных (для удобной отрисовки) прототипов страниц:
117
Назаа ние инстру мента Описание Платформа/ Цена/ Производитель Ссылка
Axure RP Pro Инструмент, ориентированный на создание грототипов вебсайтов, Генерирует кликабельный HTML и документацию в формате Word, Поддерживает комплексное взаимодействие, Windows / $ 589 / Axure www.axurft.rnm/nl 01 R.asnx
Balsami q Mockup s Позволяет очень быстро создавать макеты вашего ПО. Сгенерированное содержимое выглядит как скетчи, что поможет не вводить в заблуждение тех, кто может подумать, что программа уже готова. Веб / $ 79/ Balsamig www.balRamio.com
CogTool Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность, Предсказывает, сколько времени опытному пользователю понадобится для выполнения той или иной задачи, Кроссплатформенный / Бесплатный / Bonnie E. John roatool.hrli.rR.rmu. edu
Coutlin e* Веб-приложение для создания и просмотра интерактивных прототипов, Включает в себя функции по управлению проектом и участию контролирующей группы. Веб /7 / Coutline www.rrnjtline.rom www.usahilitv.hv/ro Litllne
Dream weaver Используйте визуальную часть Dreamweaver для перетаскивания и размещения элементов дизайна с помощью drag-and-drop, добавления элементов интерактивности, и погружайтесь в код для более комплексного прототипирования. Кроссплатформенный / S 339 / Adobe www.adobe.com/or oducts/dreamweave г
Рис. 3. Список наиболее популярных программ по прототипированию сайтов
Вывод
Если Исполнитель будет придерживаться данной логики, то процесс создания сайта сократится примерно в 1,5 раза. Эта схема не гарантирует легкой работы и получения запланированной прибыли. Но однозначно бережет время и нервы высокооплачиваемых специалистов, а значит, время и нервы Исполнителя и Заказчика. Данная схема принесет следующие плюсы:
1. Сильно повысит гарантию достижения результата.
Только четко сформулировав задачи, определив целевую
аудиторию сайта и ее потребности, смоделировав взаимодействие сайта и его пользователей, можно быть уверенным - получится то, что нужно.
2. Экономит время и деньги.
Исправить ошибку на этапе проектирования довольно просто: меняем несколько кусков текста и схем. Сделать это на этапе разработки дизайна или верстки будет уже дороже. Если ошибка обнаруживается на этапе программирования, ее исправление может стоить многие тысячи (десятки, сотни тысяч) рублей и занять месяцы, а то и годы.
3. Позволит эффективно разделять работу.
Проектное задание - это вполне самодостаточный документ. Получив его, клиент может сделать сайт своими силами или нанять другую команду, которая, по его мнению, лучше справится непосредственно с разработкой.
118
Библиографический список
1. Лебедев А. // Ководство, 2007. - Издательство Студии Артемия Лебедева.
2. ЛансЛавдей/ЛавдейЛанс, НихаусСандра// Проектирование прибыльных веб-сайтов, 2011. - Издательство : Манн, Иванов и Фербер.
3. РойсУ. Управление проектами по созданию программного обеспечения / У. Ройс. - М. : Лори, 2007. - 448 с.
4. Эриксон Н. Управление проектом по созданию интернетсайта / Н. Эриксон. - М. : Альпина Паблишер, 2007.
5. Якоб Нильсен. Web-дизайн. Удобство использования Web-сайтов / Нильсен Якоб, Лоранжер Хоа. - М. : Вильямс, 2007.
6. Свободная энциклопедия - www.wikipedia.org , 26.10.13
7. Бесплатный сервис детального анализа сайтов. [Электронный ресурс]. URL:http://www.seobuilding.ru/, (Дата обращения: 20.10.2013).
119
