Логическое проектирование дизайна сайта
Логическое проектирование включает организацию информации на сайте, построение его структуры и навигации по разделам. На этом этапе следует описать следующее:
1. Тип структуры сайта (линейная, иерархическая, контекстная, другая).
2. Названия разделов.
3. Что будет содержать в себе каждый раздел.
4. Организация и связь разделов между собой.
5. Какая информация будет размещена на определенных страницах сайта.
При логическом проектировании информационного наполнения сайта и средств навигации следует придерживаться четырех базовых принципов, которые основаны на восприятии информации человеком.
1. Использование обозначений.
Применяйте слова и термины, которые являются устоявшимися и понятными большинству посетителей сайта. В этом смысле не очень удачным является применение пиктограмм, которые могут быть поняты посетителями сайта неправильно.
2. Уместность
Разделы сайта должны содержать информацию и элементы, которые соответствуют данной части или фрагменту сайта. Элементы, которые не отвечают данному принципу, должны быть перенесены в другое место или удалены.
3. Единообразие
Использование единой навигации по и единого стиля оформления. Так, одинаковые элементы на страницах должны иметь один и тот же размер и находиться в одном и том же месте. Если страницы, по какой-либо причине имеют отличия, пользователь должен четко понимать, чем они обусловлены.
4. Разделение на части
Человек не в состоянии воспринимать одновременно большой объем информации. Как правило, люди способны воспринимать информацию, содержащую от четырех до шести различных элементов. Поэтому, посетители сайта лучше ориентируются и быстрее находят нужные им материалы, когда они разделены на группы, содержащие от четырех до шести элементов.
Организация данных в виде упорядоченной структуры должна сообщать посетителю, какую информацию он может обнаружить на сайте и где ее искать. Структура сайта напоминает оглавление книги; если оно хорошо написано, становится понятно, что ожидать от книги, еще не прочтя ее. Информация должна быть организована таким образом, чтобы посетитель знал, что его ждет на следующей странице уже по названию ссылки, на которую он нажимает.
Организация информации на сайте может быть:
Линейная структура
Наиболее простой способ организации данных. Представляет собой набор следующих друг за другом веб-страниц.
Иерархическая структура
Самый распространенный вариант размещения информации. Предусматривает применение главной страницы, на которой размещается меню со ссылками на разделы сайта, расположенные на следующих страницах. Разделы могут содержать в себе подразделы и другую детальную информацию.
Контекстно-зависимая структура
В подобной структуре ссылки на другие разделы сайта формируются в зависимости от определенных действий пользователя. К примерам такой структуры относятся элементы интернет-магазинов, поиск по ключевым словам.
Комбинированная структура
Представляет собой сочетание нескольких предыдущих структур. Например, на сайте может быть предусмотрена иерархическая структура, которая в некотором месте может содержать выполнение пошаговых действий (линейную структуру).
Навигация характеризует удобство перемещения между разделами сайта, возможность быстро переходить на нужную страницу. Продуманная навигация сайта должна отвечать на вопросы посетителя: где я нахожусь, какие страницы я уже посетил, какие разделы еще могу посетить.
Необходимо показать посетителю, в каком месте он находится относительно самого сайта. HTML позволяет использовать разные цвета для посещенных и не посещенных ссылок, чтобы разница между ними была заметна. Ссылки на разделы сайта должны быть на каждой его странице, включая и повторяющуюся от страницы к странице навигацию.
Главная страница сайта
Главная страница является самой важной страницей любого веб-сайта. Большинство пользователей приходят на нее. Главная страница должна содержать приветствие, из которого посетитель может понять что это за сайт, и что на нем есть. На главной странице должны быть ссылки на разделы сайта.
Главная страница дает представление обо всем сайте - о его содержимом, дизайне, навигационной системе, структуре. Поэтому ее дизайн должен быть эргономичным. Например, назначение начальной страницы коммерческого или корпоративного сайта заключается в том, чтобы дать представление пользователям о данной компании, о товарах и услугах, предлагаемых компанией о преимуществах перед другими компаниями.
На главной странице сайта могут быть разделы: Статьи. В разделе можно почитать материалы по теме. Новости. Несут ту же функцию, что и статьи, только постоянно обновляются. Магазин или раздел с описанием услуг. Рядом со статьями или новостями могут отображаться товары и услуги. Блог. Блог можно сделать как альтернативу новостному разделу. Форум. Нужен для оказания технической поддержки и для общения посетителей.
FAQ. Часто задаваемые вопросы и ответы. В этом разделе можно описать вопросы и ответы в подддержку товаров. Эти страницы генерируют также поисковый трафик. Файловый архив. Это документация, программное обеспечение, фотографии. Портфолио. Нужно для студий Веб-дизайна, фрилансеров, разработчиков ПО. Своего рода витрина, на которой представлены лучшие образцы работ. Обратная связь. Форма обратной связи или данные для связи с менеджером, администратором должна быть на любом сайте.
Рассылка. Она необходима, чтобы иметь контакт с посетителями. Поиск. Если у Вас есть все, что описано выше, то поиск просто необходим. Информеры: погода, курсы валют, календарь. Регистрация/Авторизация на сайте проводится в случае, если предполагается предоставление некоторых дополнительных услуг
Оформление главной страницы должно отличать ее от остальных страниц сайта. Для этого применяется либо слегка измененный дизайн, которыйсогласуется с оформлением и стилем всего сайта. К проблемам дизайна главной страницы отнесем следующие вопросы и разделы:
Назначение сайта: Название или логотип компании должны иметь подходящий размер и располагаться в заметном месте страницы. Обычно это верхний левый угол. Нельзя перегружать эту область визуальными эффектами. Количество ключевых задач должно быть небольшим, а область страницы вокруг нее - незаполненной.
Информация о компании: Кроме названия и назначения компании к странице часто добавляется рекламный лозунг(слоган), который бы четко характеризовал деятельность компании. Лозунг должен быть коротким и метким. Так, например, лозунг комании Яндекс "Найдется все" (еще один - “Мы обуем всю Россию”). От лозунгов можно отказаться, если в имени компании раскрывается ее назначение или если компания известна как Microsoft.
Стиль содержимого сайта:
Выбирая слова, следует ориентироваться на язык пользователей, а не компании. Строго следите за применением прописных букв и соблюдением текстового стиля. Формулируя задания для пользователей сайта, используйте повелительное наклонение, например "Введите название города". Избегайте восклицательных знаков.
Использование примеров для краткого обзора содержимого сайта: Каждый пример должен сопровождаться ссылкой на подробное описание данного продукта и фотографии.
Ссылки: Ссылки подчеркиваются и выделяются голубым цветом. Цвета просмотренных и непросмотренных ссылок должны различаться. Если функция ссылки отличается от обыкновенного перехода на другую страницу и состоит в загрузке PDF-файла, отправке электронного сообщения, запуске аудио- или видеопроигрывателя об этом должно быть сказано явно.
Навигация:
Главная панель навигации должна находиться в заметном месте страницы, предпочтительно рядом с ее основной частью. Не следует размещать верхнюю горизонтальную панель навигации над графическими элементами наподобие горизонтальных границ или баннеров. Страница не должна содержать активной ссылки на саму себя.
Поиск:Главная страница должна содержать непосредственно поле для ввода поисковых запросов.
Ссылки на службу сайта:Не добавляйте на сайт службы, не имеющие отношения к его основной тематике. Например, не обязательно добавлять ссылку на прогноз погоды, если никакого отношения к погоде этот сайт не имеет.
Графика и анимация: Позвольте пользователю самому решать, хочет ли он видеть анимированную заставку к сайту - не запускайте ее по умолчанию или обеспечьте легкий и понятный способ ее отключения.
Графическое оформление:
Постарайтесь обойтись без горизонтальной полосы прокрутки. Все главные элементы главной страницы по возможности должны находиться (выше линии сгиба) (в первом экране страницы, доступном без вертикальной прокрутки) для наиболее распространенного разрешения экрана. Используйте гибкую структуру главной страницы, чтобы ее размер мог автоматически приспосабливаться к различным разрешениям экрана.
Раскрывающиеся окна и промежуточные страницы: Пользователи, набравшие в адресной строке обозревателя главный URL Вашего сайта либо пришедшие на него по ссылке, должны попадать сразу на настоящую главную страницу. Откажитесь от раскрывающихся окон.
Рекламные объявления: Рекламные баннеры других компаний следует вынести на периферию страницы.
Большинство сайтов применяют стандартную компоновку главной страницы. Вверху слева помещается название и логотип компании. Затем может идти раздел "Новости", потом - раздел с названием "О компании", содержащий историю фирмы. Далее идет раздел "Услуги". На главной странице торгового сайта можно также разместить раздел "Статьи", содержащий статьи о товарах и услугах и, например, "Полезное". В последнем можно предоставить ссылки на бесплатное скачивание и руководство по настройке и использованию программ, используемых в Интернет. Последним разделом, который обязательно должен присутствовать на главной странице Интернет-магазина и не только, является раздел с названием "Контакты". Здесь нужно разместить не только телефон, и Skype компании, но и фактический адрес. В этом разделе может быть представлена точная схема проезда. Естественно, на главной странице торгового сайта обязательно должны быть приведены картинки и фото предлагаемого товара, ведь благодаря им посетитель сможет быстрее и лучше понять суть вашего бизнеса.
Самые лучшие главные страницы не только информативны, просты и понятны. Они еще должны быть адресованными лично посетителю. Персонализация главной страницы очень важна.
Приведем еще раз несколько рекомендаций для повышения эффективности сайта.
1. Посетитель должен с первого взгляда понять, куда он попал и что он может найти на сайте. На главной странице сайта должно быть 2-3 абзаца с описанием основных услуг компании.
2. Основные услуги должны иметь ссылки с главной страницы сайта.
3. Навигация – интуитивно понятна, любой раздел должен быть достижим за 2-3 клика мышью.
4. Желательно иметь диалоговую форму для отправки заявок
5. На сайте с разветвленной структурой должны быть были дополнительные навигационные элементы (навигационная строка «хлебные крошки») и дополнительные дублирующие меню.
6. Контакты должны быть на видном месте. Это телефон или адрес электронной почты.
7. Дизайн главной страницы может отличаться от дизайна внутренних страниц сайта, но внутренние и главная страницы должны быть выполнены в едином стиле.
8. В человеке - 80% воды, в Интернете - 99%. Пользователя следует защищать от больших объемов информации, упорядочивая информацию, делая работу с ней понятной и удобной.
9. Люди не читают веб-страницы, а просматривают. Они задерживаются на словах и выражениях, которые привлекают внимание.
10. Пользователи избегают медленно загружающихся сайтов.
11. Трудности чтения с экрана монитора. Для большинства пользователей читать с листа бумаги легче и быстрее, нежели, чем с экрана монитора.
Внутренние страницы сайта
Если главная страница содержит крупные изображения по теме сайта, пользователь вынужден загружать определенный объем, что увеличивает время загрузки. Пользователя заставляют посмотреть рекламную вступительную часть сайта. Это, как правило, соответствует цели выделить сайт на фоне других. Нет смысла преследовать те же цели на внутренних страницах. Внутренние страницы сайта должны в первую очередь предоставлять запрашиваемую информацию и только затем следовать общему стилю и художественным изыскам. Исходя из всех этих соображений, стараются не перегружать внутренние страницы новыми графическими объектами, и по возможности использовать уже примененные на главной странице. Это позволяет осуществлять более быструю загрузку страницы, т.к. эти объекты уже загружались из сети и они теперь есть в кэш-директории браузера. В этих же целях названия разделов целесообразнее делать с использованием системных шрифтов. При этом теряется неповторимость их написания, но зато все пользователи быстро и правильно увидят навигацию и доступ к другим разделам.
Примерно та же ситуация и с самой текстовой информацией раздела. Для пользователя будет наиболее удобно и универсально, если это будет системный шрифт (что бы не пришлось что-то дополнительно устанавливать). Размер шрифта, по возможности, должен остаться не жестко фиксированным, что бы была возможность увеличить или уменьшить шрифт в зависимости от размера и разрешения экрана. Так же удобнее будет, если страница будет масштабируемой, что позволит пользователю настроить параметры восприятия страницы так, как ему удобнее и как это позволяет его компьютер и монитор.
Информация на внутренних страницах сайта может быть следующей:
Название или логотип сайта (может быть уменьшенный), навигация по всем разделам первого уровня, название раздела, в котором находится пользователь, собственно информация - тексты, иллюстрации и т.п., возврат на главную.
