5.Проверка качества и тестирование. Когда узел готов, прежде чем запустить его в Интернет, неплохо провести окончательную доводку: тщательно отладить программный код, ссылки, правописание и т.п. Нужно проследить, чтобы сайт работал в различных обозревателях.
2.Схема Web-сайта
Многие сразу приступают к созданию сайта, не продумав даже наброска его схемы. Но затратив немного времени на создание схемы, можно сберечь массу времени и усилий при его непосредственной реализации.
| Web-страница |
| Шаблон А | Шаблон В | Шаблон С |
| Сетевая база данных |
База данных и несколько шаблонов позволяют создать в краткие сроки сотни страниц.
1)Построение структуры
Структуру можно построить следующим образом.
1. Составьте список содержимого сайта. Это делается на стадии формирования концепции.
2. Сгруппируйте элементы списка. Разбейте содержимое списка на логические группы.
3. Создайте категории. После разделения содержимого на группы станет просматриваться некая схема. Отдельные группы будут похожи, их следует объединить в категории. По возможности число категорий должно быть минимальным.
4. Постройте структуру. Категории представляют собой первый уровень, группы – второй, подгруппы – третий.
Примером может послужить содержание данного реферата:
I.Построение сайта________категория
1. Схема сайта___________группа
· Построение структуры
· Преобразование структуры в диаграмму _______содержимое
Структура, созданная на основе хорошо организованного списка содержимого сайта.
Лучше иметь 5-7 основных категорий, в каждой из которых содержится не более двух уровней подкатегорий.
2) Преобразование структуры в диаграмму
Структура – средство, необходимое для создания диаграммы Web-узла, которая, в свою очередь, ляжет в основу его карты. Создать диаграмму просто. Каждую страницу сайта нарисуйте в виде прямоугольника. В верхней части поместите домашнюю страницу, под ней по горизонтали – основные разделы сайта. Под каждом разделом нарисуйте прямоугольники, соответствующие подразделам структуры. Построив диаграмму, можно приступать к созданию схемы навигации. Можно разделить и содержимое другой страницы. При добавлении такой детализации диаграмма увеличится на один уровень.
Пример:
| Домашняя страница |
| Юзабилити | Построение сайта | Визуальный интерфейс | Навигация |
| Основной принцип юзабилити | Хронология создания | Создание страниц для просмотра, а не для чтения | Назначение навигации |
| Использование Интернета | Схема сайта 1. Построение структуры 2.Диаграмма | Цвет, шрифты и графика | Постоянная навигация |
| Текст для Web | Начальная страница |
Диаграмма узла служит эскизом его карты
Созданная диаграмма – лишь основа карты узла. На следующем уровне создания карты сайта необходимо добавить в диаграмму линии со стрелками, обозначающие связи между страницами.
V. Визуальный интерфейс Web-страниц
1. Создание страниц для просмотра, а не для чтения
Чтобы добиться лучшего понимания сайта:
· Создайте ясную визуальную иерархию на каждой странице
· Используйте обычаи и условности
· Разбейте страницы на четко разделенные области
· Покажите ясно то, по чему можно щелкать мышью
· Уменьшите визуальный шум
1. Ясная визуальная иерархия
Нужно организовать внешний вид элементов страницы (визуальных подсказок) таким образом, чтобы они ясно и четко подсказывали отношения между этими элементами – какие элементы связаны между собой, какие являются частями других.
· Чем более важный элемент, тем более он заметен на странице.
Наименее важный
При создании Web-страницы разделите ее на три части: большую – для самой важной информации, среднюю – для менее значимой информации, и малую – для наименее важной информации. Это стратегия «большой, малый, средний». Она не позволяет находиться на странице двум элементам с одинаковым приоритетом и таким образом облегчает ее чтение и перемещение по сайту.
· Элементы, логически связанные между собой, должны быть связаны и визуально.
Например, вы можете показать, что какие-то элементы равнозначны, сгруппировав их под одним заголовком, либо применив к ним одинаковый стиль, либо поместив их в одну четко отделенную область страницы.
| Книги Музыка Спорт Путешествия Увлечения |
· Элементы представляются в виде вложений, если они являются частями друг друга.
Например, название раздела «Книги по программированию» будет находиться над заголовком какой-то конкретной книги по этой теме, включая в себя все содержимое части страницы (эта книга является частью данного раздела). Под заголовком этой книги, в свою очередь, будет включено ее описание.
Мы каждый день сталкиваемся с визуальными иерархиями – будь это на бумаге или в Интернете. Но обычно мы воспринимаем их так быстро, что не успеваем это осознать, и начинаем смутно догадываться об их существовании, только когда нам не удается провести их быстрый анализ, т.е. когда их визуальные подсказки (или их отсутствие вынуждают нас задумываться.
Хорошая визуальная иерархия всегда экономит наши усилия по начальному восприятию страницы и помогает организовать и систематизировать содержание таким образом, чтобы мы могли почти мгновенно понять его в целом.
2. Используйте обычаи и условности
Каждая газета или журнал имеют свои условности. Например, фраза, набранная очень крупным шрифтом, - это обычно заголовок, который обобщает содержание находящейся под ним статьи. Текст под фотографией – это подпись, в которой дается описание или комментарий к ней, а если этот текст набран очень мелким шрифтом, то это имя фотографа. В Интернете также используются условности, большинство из которых были взяты из газет и журналов.
· Они очень полезны
Как правило, условности становятся общепринятыми, только если они работают. Когда они правильно и к месту применяются, то помогают пользователям легко переходить от одного сайта к другому, не задумываясь о том, как все работает.
· Дизайнеры зачастую с неохотой применяют условности
Вместо того, чтобы использовать их, они часто стремятся выдумать колесо заново. Если вы не хотите использовать некую общепринятую Web-условность, то убедитесь сначала, что то, чем вы собираетесь ее заменить, либо является достаточно ясным, понятным и не требующим усилий для изучения, либо настолько полезным, что это компенсирует необходимость некоторого усилия. Не игнорируйте обычаи и условности.
2. Разбейте страницы на четко разделенные области
Разделение страницы на области важно потому, что это позволяет пользователям быстро понять, какие области их интересуют больше, а какие они могут пропустить. Кроме того, нужно четко разделить области навигации и содержание страницы.
3. Покажите ясно, по чему можно щелкать мышью
Большая часть времени у пользователей Интернета уходит на поиски тех мест, по которым можно щелкнуть, поэтому очень важно ясно показать, по чему именно можно щелкнуть мышью, а по чему нельзя. Кнопка должна выглядеть, как кнопка, желательно, чтобы здесь же располагалась небольшая треугольная стрелка, известная как условный указатель «Нажать здесь».
Кнопки надо сделать узнаваемыми. Этого можно достичь, используя следующие методы:
· Элемент навигации должен выглядеть, как привычный предмет (например, как закладки в блокноте)
· Элементы должны выделяться на странице (например, объемным видом)
· Сгруппируйте подобные элементы в один графический блок. Группировка подразумевает две функции:
1. Группировка подразумевает интерактивность. Сочетание нескольких текстовых или графических элементов создает впечатление единого целого и привлекает внимание.
2. Группировка элементов подразумевает подобные функции. Внешне подобные элементы должны выполнять подобные функции. Например, все основные кнопки навигации на странице должны быть похожими и находиться в одной части экрана. Если на странице есть дополнительные ссылки, их также можно сделать подобными, но разместить в другой части экрана.
Дизайнер должен сразу же выделить интерактивные элементы, сделать их отличными от обычных графических элементов. Пусть они бросаются в глаза, привлекают внимание. Для этого можно использовать следующие приемы: наложение теней, размывание краев, придание объектам выпуклости. Но необходимо убедиться, что оформление обычных графических элементов не введет пользователя в заблуждение. Непоследовательность в использовании эффектов собьет пользователя с толку. Всего лишь наложите тени на обычное графическое изображение – и пользователь будет в замешательстве. Подумав, что это кнопка, пользователь попытается щелкнуть по картинке. А после неудачи будет игнорировать настоящие кнопки на странице.