 |
Этапы разработки веб-сайта
|
|
|
|
Лекция 5 Науменко О.М.
Методы веб-дизайна. Два подхода к построению информационных средств в Сети Интернет. Оптимизация структуры веб-страниц. Этапы разработки веб-сайта.
Применительно к Веб-дизайну перевод с английского языка слова “Design” может иметь два смысловых значения:
• оформление;
• конструирование, проектирование.
Эти два разных по смыслу перевода как раз и обозначают соответственно два принципиально отличающихся метода Веб-дизайна, два подхода к построению информационных средств в Сети Интернет.
Значение “Оформление” относится, в первую очередь, к виду Веб-страницы на экране монитора, то есть к ее внешнему визуальному оформлению как главному и достаточному предназначению Веб-дизайна.
Такой метод дизайна обычно именуют артистическим, он зачастую является лишь средством самовыражения дизайнера, информационные и функциональные качества сайта как бы выносятся при этом методе за пределы Веб-дизайна, рассматриваются как вторичные.
Значения “Конструирование” и “Проектирование” относят уже к функционально полному Веб-изделию, если хотите к Интернет-проекту в целом, то есть, речь здесь идет о Веб-дизайне как об инструменте для построения средств Веб-информационной технологии, таких как сайты, сайты-каталоги и т.п., эффективно решающих информационные, маркетинговые, коммерческие, рекламные и иные задачи.
Этот метод дизайна называют конструктивным или tехническим.
Конструктивный технический дизайн вовсе не исключает применения элементов художественного оформления, но только в тех случаях, когда это соответствует задачам сайта и способствует их решению.
Метод конструктивного дизайна является следствием технической политики Компании, которая выражается в этой части следующими положениями:
• сайт – инструмент информационного маркетинга;
• информационное содержание – основной смысл существования сайта;
• главная задача сайта – целевое продвижение информации.
|
|
|
Принцип, положенный в основу Метода, формулируется следующим образом:
• цели, поставленные задачи и информационное содержание сайта являются главными аргументами при выборе и формировании любых других его характеристик, в том числе визуальных.
Технические характеристики сайтов, созданных этим Методом определяется следующими приоритетами:
• эффективная архитектура информационного содержания;
• адекватная задачам сайта структура страниц и ссылок;
• простая и доступная система навигации;
• высокая скорость загрузки страниц.
Оптимальное сочетание вышеуказанных методов (в зависимости от специфики задачи) позволяет получить адекватное Решение для Интернет-проекта любой сложности, независимо от его типа, преследуемых целей и поставленных задач.
При разработке любой веб-страницы важно правильно задать её структуру.
Cтруктура любой веб-страницы подразделяется на части:
Функциональная часть
Это то, ради чего страница вообще была создана. Например, если речь идёт о "Яндексе", функциональная часть страницы - это поле для ввода запроса, кнопка "Найти" и список результатов поиска. Для страницы калькулятора ссуд на банковском сайте функциональной частью является собственно калькулятор + краткая инструкция по работе с ним. Для страницы со статьёй на сайте журнала - текст статьи. Для страницы товара в интернет-магазине - описание товара, ярлычок с ценой и кнопка "Заказать". И т.д. и т.п. Страница без функциональной части - это "пустышка", не имеющая права на жизнь.
Иногда помимо основной функции у страницы есть также функция второстепенная. Например, страница на сайте магазина может не только описывать товар, но и рекомендовать другие товары, страница "Яндекса" помимо результатов поиска показывает ещё и платную рекламу - это тоже функциональная часть страницы.
|
|
|
С точки зрения дизайна функциональная часть должна занимать главенствующее положение на странице. Она должна быть на виду, на неё должно отводиться столько места, сколько ей нужно, и остальные элементы страницы не должны "забивать" функциональную часть - теснить её или отвлекать от неё внимание посетителя.
Описательная часть
Это текст (или сочетание текста и картинок), объясняющая посетителю страницы, куда, собственно, он попал. Якоб Нильсен, один из теоретиков веб-дизайна, писал: "Веб-сайт подобен дому с тысячью дверей: главный вход - это лишь один из множества способов попасть внутрь сайта". Посетитель часто заходит сразу внутрь Вашего сайта, минуя главную страницу. Поэтому каждая (sic!) страница сайта должна быть устроена так, чтобы посетитель понял, куда он попал и что он тут может найти (прочитать, сделать). Для этого может использоваться шапка страницы, её заголовок и/или текст в начале страницы.
Для тех, кто занимается сайтостроительством, добавлю, что тэг "title" и мета-тэг "description" также относятся к описательной части страницы
Например, для страницы с калькулятором ссуд описательная часть - это текст о том, что-де перед Вами калькулятор ссуд от банка "ЗагреБанк", который позволит Вам проверить, сколько денег, на какой срок и под какой процент банк готов ссудить Вам, а также рассчитать величину ежемесячного платежа в зависимости от суммы и срока ссуды. Обратите внимание - это не инструкция по пользованию калькулятором, а лишь его краткое описание.
Что касается размещения на странице - описательная часть должна быть на виду. Это должно быть если не первое, то максимум второе, на что упадёт взгляд посетителя страницы. Однако она не должна занимать слишком много места - грубо говоря, табличка с названием картины и именем автора не должна быть больше и ярче самой картины:)
Система навигации
Это механизм, который даёт посетителю страницы ответы на три вопроса: "В какой части большого сайта я нахожусь?", "Что ещё есть на этом сайте?" и "Как мне туда попасть?" Сайты (а тем более коммерческие) крайне редко состоят из одной-единственной страницы. Поэтому важно предоставить человеку способ комфортно перемещаться между страницами. Для этого используются разные механизмы - ссылки, меню, поиск, карты сайта, "хлебные крошки" и т.п. - но задача у них одна.
|
|
|
Поскольку навигационная система - элемент важный, но вспомогательный, который нужен посетителю лишь тогда, когда он хочет покинуть страницу, не стоит делать её слишком уж выделяющейся или отводить на неё много места. Принцип прост: система навигации должна быть достаточно заметной, чтобы Вы, задавшися вопросом вроде "А как бы мне перейти к списку статей?" или "Где найти телефон фирмы?", сразу же обнаружили способ это сделать - но при этом она не должна сама бросаться в глаза.
Элементы дизайна
Это все те вещи, без которых функционально можно было бы обойтись, но с ними страница выглядит лучше и работать с ней удобнее. В принципе, выделение элементов дизайна в самостоятельную категорию - довольно скользкий вопрос. Ведь и функциональная часть, и описание, и навигация тоже являются частью дизайна страницы. Однако есть такие элементы оформления страницы, которые нужны только и исключительно для того, чтобы "сделать красиво". Вот их-то я и имею в виду, когда говорю об элементах дизайна.
Если рассматривать с той же точки зрения автомобиль, то лобовое стекло в первую очередь вещь функциональная, хотя и прошло через руки дизайнера - а вот фигурка на капоте является элементом дизайна в чистом виде
Однако не всё, что сделано "для красоты", на самом деле нужно на странице. Дизайн сайта (а тем более коммерческого) должен преследовать две основные цели:
- Лучшее структурирование веб-страницы, чтобы с ней было удобнее работать
- Создание у посетителя нужного Вам настроения, ощущения или стиля
Структурирование - это размещение и выделение элементов страницы так, чтобы посетителю было легче воспримать информацию, понятнее, что где лежит и что к чему относится. В качестве маленького примера я взял фрагмент газетной статьи и выложил его в двух вариантах: слева неструктурированный, а справа - структурированный. Сравните, какой из них удобнее читать, какой приятнее для глаза, какой лучше воспринимается:
|
|
|
| Вчера вечером в пресс-центре "Выборы-2003", созданном при агентстве "Росбалт", состоялся круглый стол под названием "Пенсионная реформа: шаг вперед или два шага назад?". Участники мероприятия разошлись в ответах на этот вопрос. Разобраться в деталях дискуссии попыталась журналистка Кира Лебедева. В результате проведения начатой правительством России пенсионной реформы пенсия граждан РФ будет состоять из трех частей: базовой (она одинакова для всех), страховой (зависит от стажа работника) и накопительной (сейчас это 2% от фонда оплаты труда). Поводом для организации круглого стола послужило начало рассылки Пенсионным фондом России (ПФР) всем работающим гражданам страны извещений о состоянии их личного пенсионного счета. | Вчера вечером в пресс-центре «Выборы-2003», созданном при агентстве «Росбалт», состоялся круглый стол под названием «Пенсионная реформа: шаг вперед или два шага назад?». Участники мероприятия разошлись в ответах на этот вопрос. Разобраться в деталях дискуссии попыталась журналистка Кира Лебедева. В результате проведения начатой правительством России пенсионной реформы пенсия граждан РФ будет состоять из трех частей:
|
Как видите, хотя сам текст не изменился, в структурированном виде он стал и удобнее, и доходчивее. Для структурирования содержимого страницы сайта обычно используются такие элементы, как поля, пробелы, линии, рамки, таблицы, цветной фон или фоновый рисунок и т.п.
Вторая функция дизайна - создание у посетителя таких ощущений, которые соответствовали бы цели этой страницы. Например, для сайта банка или страховой компании важно, чтобы он создавал ощущение солидности и надёжности. Для сайта, продающего игрушки - ощущение веселья, детского праздника. И т.д. и т.п. Для работы с ощущениями обычно используется цветовая гамма, рисунки/фотографии и особые шрифты. Взгляните, как это сделано на сайтах магазина игрушек, адвокатской конторы, магазина в стиле Дикого Запада и суши-бара. Дизайн этих сайтов не идеален, но позволяет понять принцип, о котором идёт речь.
|
|
|
Если же какой-то элемент страницы ни одну из этих задач не решает, а вставлен туда для "красоты ради красоты" - это уже от лукавого. И, скорее всего, это не элемент дизайна, а...
Мусор
Всё, что не относится ни к одной из предыдущих категорий, обычно является мусором и лишь захламляет страницу. Мусор мешает посетителям, отвлекает их от важных для Вас вещей. К тому же избыток мусора на страницах замедляет их загрузку и делает их "малосъедобными" для поисковых машин. Однако тут есть один нюанс, который часто сбивает с толку начинающих сайтостроителей. Нельзя заранее сказать, что какой-то элемент страницы заведомо является мусором, а какой-то - нет. Принадлежность к мусору определяется не тем, хорош или плох объект "вообще", а тем, уместен ли он на данной конкретной странице. Веб-дизайнеры нередко заимствуют приглянувшиеся им решения с других сайтов - и попадают в ловушку. Какой-то элемент может быть уместным и полезным для другого сайта, даже для другой страницы этого же сайта. Но если на данной конкретной странице он не подходит ни под одну из четырёх предыдущих категорий, выбора нет - это мусор.
Например, некоторые вывешивают у себя чужие ленты новостей, таблички с курсом доллара и евро, прогнозы погоды, счётчики "Сейчас на сайте... посетителей" и прочие подобные навороты. К примеру, индикатор курса доллара придётся ко двору на сайте фирмы, чьи услуги оплачиваются в долларах - скажем, туроператора или брокера. А прогноз погоды вполне уместен на страничке пейнтбольного полигона или на сайте для рыбаков. Остальные заимствования обычно малооправданы
Этапы разработки веб-сайта
1) Этап планирования и оценки
- Собрание участников проекта
- Анализ контекста использования
- ISO 13407: Human centred design processes for interactive systems
- Usability Planning
- Анализ конкурентов
Цель данного этапа обеспечить эффективное использование методов в процессе дизайна и разработки, обеспечить постоянное влияние этих методов с самой ранней стадии проекта.
На данном этапе рекомендуется:
- Начать с собрания участников проекта.
- Проанализировать контекст использования будущего продукта.
- Создать план обеспечения юзабилити на основе стандарта ISO 13407.
- Проанализировать конкурентов и выявить сильные и слабые стороны их продуктов.
* * *
|
|
|
