Основные аспекты разработки web-сайта

Дизайн страниц

Этот аспект подразумевает разработку оригинального стиля сайта и его эстетически грамотное построение.

Безупречная техническая реализация

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

Удобство пользования (юзабилити)

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

Важные параметры сайта

Время

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

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

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

Размер

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

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

3. Основы построения гипертекста. Формы оформления гиперссылок.

· Структура гиперссылки

У гиперссылки два конца — страница, на которой она находится и страница, на которую она приводит. Чтобы улучшить удобство использования, необходимо следовать двум принципам:

 Риторика ухода. Четко объясните почему они должны уйти с текущей страницы и что они смогут найти там, куда ведет ссылка.

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

· Категории гиперссылок

 Структурные (навигационные) ссылки. По ним пользователи переходят к другим разделам сайта. (кнопка возврата на главную страницу).

 Перекрестные ссылки. Чаще всего это подчеркнутые слова в тексте (хотя могут быть и изображения).

 Ассоциативные ссылки — ссылки типа «смотрите также».

· Формы гиперссылок

 Текстовые ссылки

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

 Аннотированные текстовые ссылки

 Графические текстовые ссылки

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

 Кнопки

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

 Пиктограммы

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

 Карты изображений

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

 Баннеры

 Элементы GUI

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

Выпадающие меню позволяют экономить полезное пространство на странице, однако обладают рядом недостатков:

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

— Затрудненность просмотра. Разработчики не могут регулировать шрифт, пробелы и другие параметры форматирования списка меню, чтобы сделать его более удобным для чтения

Стандартные элементы графического интерфейса Windows, как правило, не вписываются в стиль сайта.

· Дизайн гиперссылок

 Классический вариант

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

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

 Смена курсора

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

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

 Ролловеры

Ссылка-ролловер — это ссылка, изменяющая свой внешний вид при наведении на нее указателя мыши. Ролловеры добавляют странице интерактивность и довольно часто используются в web. Графические ролловеры обычно создаются с помощью JavaScript.

· Принципы юзабилити

 Не следует создавать новые окна при открытии ссылки.

При необходимости пользователь легко может создать такое окно сам. Не стоит забывать, что в новом окне не работает кнопка «назад».

 Если ссылка ведет вглубь той же страницы, это должно быть понятно.

В противном случае пользователь может запутаться, нажав на кнопку «назад» и обнаружив, что она работает не так, как ожидалось. Он также может открыть страницу в новом окне и получить две копии, даже есть это ему не нужно.

 Не стоит явно отображать адрес, куда ведет гиперссылка.

Это совершенно лишняя информация, которая будет загромождать страницу и сбивать пользователя с толку.

 Почтовые ссылки разумно оформлять особо. Лучше всего в виде значков.

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

4. Понятие и роль навигации на сайте. Глобальная навигация. Современные тенденции в оформлении глобальной навигации.

Есть встроенная навигация на сайте, она бывает трех типов. — глобальная навигация — локальная навигация — контекстная навигация.

Навигация по сайту, говоря простым языком - это способы перемещения по нему посетителей.