Создание интернет сайта (Модель)
Автор: Жданов М.М.
ВВЕДЕНИЕ
Целью данной работы является выделение элементов, необходимых для формирования позитивного впечатления о сайте у пользователя.
Технические вопросы в данной работе не затрагивались, если только они не являются составной/неотъемлемой частью ключевого элемента.
Для овладения изложенными в данной работе принципами, изучающий должен владеть компьютером на уровне продвинутого пользователя и владеть какой-либо программой создания web-страниц (предпочтительнее всего - Macromedia Dreamweaver 4).
ХОД РАБОТ
Для полноты картины, исследовательская работа велась в трех направлениях.
1) С одной стороны, был проведен анализ существующих сайтов. Для анализа выбирались сайты, пользующиеся популярностью. Выбор сайтов был произведен с помощью системы TOP 100 на Rambler.ru. Из рассмотрения были исключены "порталы" в силу специфики их деятельности, накладывающий отпечаток и на дизайн. Также не рассматривались интернет-магазины и службы знакомств по той же причине. Таким образом, областью рассмотрения были информационные сайты и личные странички. Общее число проанализированных страничек превысило 20, а число бегло просмотренных ресурсов превысило 50. При анализе считалось, что для того, чтобы элемент считался важным/существенным, он должен присутствовать не менее чем в 50% случаев. Если элемент встречается более чем в 66% случаев, он точно является ключевым. В целях экономии ресурсов, к данной работе не прилагаются изображения сайтов, использованных для анализа.
2) В то же время был проведен опрос пользователей, которые высказывали свое мнение относительно конкретного сайта, а также отвечали на вопрос "Каким должен быть "хороший" интернет-сайт, что должно на нем быть?". Ответы систематизированы и приведены в таблице далее. Редко встречающиеся аспекты признаны несущественными и не приводятся.
3) Также, был проведен анализ литературы, посвященной web-дизайну и web-программированию, чтобы учесть профессиональный подход и выделить, то, что считается "хорошим стилем". Поскольку мнение профессионалов/теоретиков не всегда совпадает с мнением большинства web-дизайнеров и уж тем более пользователей, то самостоятельного значения это исследование не имело, но мнения, совпадающие с полученными в первых двух пунктах, добавляют им вес.
Некоторые аспекты пока не удалось формализовать в силу большого разброса примеров/мнений, или ответов вроде: "не могу сказать как именно, но чувствую как красиво…". Таким является вопрос о сочетаемости цветов. В этом случае, рекомендуется следовать мнению профессионалов и общепринятым нормам. Работа в данном направлении продолжается, но на момент написания проекта она не закончена.
Полученные данные систематизировались следующим образом: выделенные с помощью анализа ресурсов элементы, были предложены пользователям для определения степени важности каждого из параметров. Также, пользователь мог указать свой параметр, который считал необходимым. Затем, все параметры, не достигшие критической отметки 50% упоминаемости или 66% встречаемости, были отсеяны. Оставшиеся параметры, для удобства, разбиты на группы и заново проанализированы на уже существующих сайтах более тщательно для составления рекомендаций.
ПРОЦЕСС ПРОЕКТИРОВАНИЯ САЙТА
(МОДЕЛЬ ВСТРАИВАНИЯ)
При создании интернет-сайта самое трудное - начать. Непонятно что делать сначала, что потом. Чтобы уменьшить трудности при конструировании Web-сайтов, следует принять модель процесса, которая описывала бы различные фазы процесса разработки. Затем каждый шаг должен быть аккуратно выполнен разработчиком с использованием руководящих принципов и документации, которые будут указывать ему, как именно необходимо осуществлять те или иные действия и подтверждать, что каждая стадия процесса проходит правильно.
Предложенная в данной работе модель начинается с общей картины, а затем сужается до конкретных элементов, необходимых для завершения сайта.
Шаг 1. Определение целей
Необходимо с самого начала точно представлять себе цель создаваемого сайта. Цель должна быть реальной, конкретной и позитивно сформулированной. Например: "Продавать с помощью сайта 10 программ в месяц". Или: "Обеспечить дополнительную рекламу фирме и привлечь 10 дополнительных покупателей". Или: "Обеспечить техническую поддержку продукции и уменьшить нагрузку информационной службы по телефону на 30%"… Заметьте, что во всех приведенных примерах имеются конкретные измеряемые критерии определения успешной работы сайта.
Шаг 2. Определение аудитории
Когда цель определена, полезно представлять себе круг людей, на которых рассчитан будущий сайт. При определении посетителей, можно ответить на следующие вопросы:
* Каков их возраст?
* Какого они пола?
* Каков уровень их технической подготовки?
* Какой тип соединения они используют?
* Какова конфигурация их компьютеров?
* Каким браузером они пользуются?
Далее, стоит подумать о том, что пользователи будут делать, попав на сайт.
* Как они попадут на сайт?
* Что они хотят получить от сайта?
* Как долго будет продолжаться каждое посещение?
* Насколько часто они будут посещать сайт (если будут еще раз)
Исходя из полученной таким образом информации, формируются сценарии поведения посетителя на сайте.
Шаг 3. Определение содержимого
Пора определить, что именно будет размещено на сайте. Нужно определиться с черновым списком всех текстов, изображений и других материалов, необходимых для сайта. Уточнить их форму. Оптимальным вариантом будет, если уже на этом этапе удастся достать все необходимые материалы, а не искать их потом по ходу работы, возможно перекраивая уже сделанное.
Рекомендации по содержимому сайта приведены далее. (См. Содержание)
Шаг 4. Определение технологий
На этом этапе нужно решить, какие технологии предполагается использовать при реализации сайта. (Например JavaScript) Технологические требования должны напрямую соответствовать возможностям пользователей.
Шаг 5. Определение структуры сайта
Теперь, нужно начертить блок схему, подробно отражающую структуру различных частей сайта. Наиболее распространенной структурой является "дерево". Наименования для соответствующих частей сайта и общие идеи по каждой из частей разрабатываются на основе различных сценариев поведения пользователей, определенных ранее.
Рекомендации по структуре приведены далее. (См Структура)
Шаг 6. Создание блоковой композиции главной страницы
Дизайн должен проходить строго в направлении сверху вниз. В первую очередь рассматривается то, как пользователь попадает на сайт, и в последнюю - как он его покинет. Это означает, что первой создается начальная страница, затем страницы всевозможных разделов и подразделов, и, наконец, страницы с содержимым или какими-либо формами.
Для начала, сделайте макет страницы на бумаге в виде композиции из разных блоков. (Как показано в Примере)
Как только составлена блоковая композиция главной страницы, аналогичным образом выполните схемы остальных типов страниц сайта. Когда полный сценарий абстрактно детализирован, убедитесь, что переходы между отдельными блоками выглядят достаточно логично. Определяется это самостоятельно и субъективно.
Шаг 7. Создание композиции главной страницы
Теперь пора создать прототип на бумаге или на экране. Создается картинка, которая представляет собой более детализованный пример типичной страницы сайта. При этом следует помнить о необходимости учитывать размеры экрана и параметры окна браузера, а также, технические возможности потенциальных посетителей.
Начертите всевозможные кнопки, заголовки, опции страницы. Обязательно укажите, где будет расположен текст, либо применив его имитацию, либо разместив реальный текст. Второй вариант предпочтительнее, поскольку тогда можно учитывать и реальный размер текста.
Помните, что цели, концепция и аудитория сайта были определены раньше и периодически проверяйте соответствие результата, с сформулированными выше требованиями. Проверка осуществляется самостоятельно и субъективно.
Рекомендации по внешнему виду сайта приведены далее. (См. Внешний вид).
Шаг 8. Тестирование пользователями
Спросите нескольких (5-9) своих знакомых (желательно подходящих под потенциальных посетителей) об их субъективном мнении о макете. Насколько ясно какие части страницы являются ссылками и как они повели бы себя на сайте. Внимательно отнеситесь ко всем замечаниям и при необходимости повторите шаги с 5-го.
Шаг 9. Создание композиции страниц подразделов
После создания макета главной страницы, можно перейти к макету страниц подразделов и т.д. В остальном, действия на этом этапе аналогичны действиям на шагах 7 и 8.
Шаг 10. Создание фиктивного сайта
Пришла пора воплотить свое творение в HTML. Однако, сейчас самое важное - определить работоспособность переходов и уточнить связанность страниц сайта. Пока нет смысла помещать на сайт реальный текст и все картинки.
Создав фиктивный сайт, попробуйте порешать на нем фиктивные задачи, попереходить с одного места на другое. После того, как закончите самостоятельное тестирование, попросите кого-нибудь сделать то же самое.
Шаг 11. Создание бета-сайта
Если все технические элементы работают корректно, то пора разместить на сайте реальный материал и все картинки. Короче - реализовать его максимально полно и точно. Затем - тестировать. Тестирование должно производиться как можно большим числом людей. Когда они тестируют сайт, важно не вмешиваться в их работу и не подсказывать где что находиться, чтобы иметь возможность исследовать реальное поведение пользователя на сайте. Следите за тем, чтобы все было понятно посетителю. Внимательно отлавливайте орфографические ошибки, вычищайте некорректные ссылки и т.д.
Протестируйте сайт с различными браузерами, цветовыми настройками мониторами, различными разрешениями и размерами экрана. Посмотрите, как сайт будет выглядеть на другой платформе. Все ли в порядке с кодировкой шрифтов. По возможности, протестируйте различные способы доступа к сайту.
Внимательно выслушайте все мнения тестирующих о сайте и исправьте недоработки.
Шаг 12. Публикация сайта
Разместите сайт на сервере, откуда он будет доступен всем. Обратите внимание, что сервер поддерживает все необходимые вам технические и технологические возможности, а также удовлетворяет требованиям пропускной способности. (Если вы ожидаете тысячи пользователей, то было бы странно разместить сайт на сервере, с медленным каналом связи!)
Шаг 13. Тестирование
Последний шаг, в полном смысле шагом не является, поскольку тестирование так или иначе должно проводится на протяжении всего времени существования сайта. Особое внимание обращайте на внешние ссылки, поскольку именно они являются самым изменчивым аспектом корректной работы вашего сайта.
РЕКОМЕНДАЦИИ ПО СОЗДАНИЮ WEB-СТРАНИЦ
Рекомендации делались в расчете на пользователя подключенного через телефонную линию с помощью модема 28Кбит/сек, с 15" монитором разрешением 800х600, использующего Internet Explorer.
Параметры, формирующие мнение пользователя о Web-ресурсе
Наименование параметра Условный вес
1. Внешний вид
1.1 Скорость загрузки
100+50
1.2 Цветовое оформление
50+50
1.3 Интерфейс и расположение "кнопок" навигации
60
1.4 Удобочитаемость текста
55
1.5 Внешний вид "кнопок" и интерфейса. Украшения.
25
1.6 Сохраняемость интерфейса от страницы к странице
10
2. Структура
2.1 Точность и простота
100+50
2.2 "Глубина" расположения информации
80
2.3 Возможность поиска
50+50
2.4 Возможность сделать закладку
15+50
3. Содержание
3.1 Соответствие заголовку
100+50
3.2 Количество информации
95
3.3 Дополнительная информация
70
3.4 Ссылки
40
3.5 Новости
5+50
3.6 Обратная связь. Информация о себе
5
* Условный вес равен числу процентов пользователей, указавших на данный параметр в качестве существенного. Наличие этого параметра в литературе, посвященной web-дизайну, добавляет ему + 50 единиц что отражено в таблице отдельно.
* * Некоторые параметры не достигают 50% упоминаемости, но присутствуют более чем на 66% популярных сайтов, что говорит об их неосознаваемой пользователем важности.
1. ВНЕШНИЙ ВИД
Согласно опросу, мнение о сайте у пользователя формируется в течение первых нескольких минут исключительно внешним видом ресурса. Однако в дальнейшем на первый план выходит содержание сайта. Более того, опрос пользователей показал, что 80% (16 из 20) при повторном посещении сайта "не замечали" внешнего оформления, быстро продвигаясь по изученной структуре непосредственно к интересующему их содержимому. И все же именно на первые несколько минут приходится очень много уходов с сайта.
Так что же делать, чтобы пользователь положительно оценил оформление?
1.1 Скорость загрузки
Основным параметром, безусловно, является скорость загрузки. Опрос показал, что никто из пользователей не станет ждать загрузки страницы более 30 секунд. Оптимальным считается время равное 10 секундам. В профессиональной литературе встречается рекомендация не делать объем страницы более 50 Кб. И действительно, размер почти всех рассмотренных страниц находится в диапазоне от 30 до 70 Кб. При расчете времени загрузки страницы следует ориентироваться на среднего пользователя с доступом в интернет через модем скоростью 28,8 Кбит/сек. Таким образом, в лучшем случае, скорость загрузки будет не более 3,5 Кбайт /сек.
В дополнение к небольшому объему, имеет смысл сделать так, чтобы при загрузке страницы сначала появлялся текст, а затем только постепенно дозагружались бы картинки. Это позволяет отвлечь пользователя на содержание страницы и выиграть время для полной загрузки. В таком случае, полное время загрузки может достигать минуты.
* Делайте время загрузки сайта в пределах 10 секунд.
* Оптимальный размер странички - 50КБ.
* Сделайте так, чтобы сначала загружался текст, а затем - картинки
Чтобы ощутить влияние времени загрузки, посмотрите приведенный пример - страницу электронного журнала "64". За счет большого количества маленьких картинок, страница грузится действительно долго. А, учитывая невразумительность (и некорректность) навигации, ожидание становится невыносимым. Следует также отметить, что размер страницы составляет более 250 КБ!, и это - главная, титульная страница с которой должно начинаться посещение. Сайт пользуется большой нелюбовью пользователей и так делать не нужно.
Еще одна большая страница - каталог книг на сайте chessassistant. Его размер просто огромен, а время загрузки пугает. Однако, в его защиту можно сказать, что текст грузится раньше изображения, и, пока вы читаете информацию наверху, нижняя часть дозагружается.
1.2 Цветовое оформление
Следующее, на что обращает внимание зашедший на страницу пользователь - цветовое оформление. К сожалению, этому вопросу мало уделено внимания в литературе, и никто из опрошенных не смог сформулировать свой взгляд на проблему. Однако, к счастью, во многих программах по созданию web-страниц, например в Macromedia Dreamweaver есть готовые шаблоны цветового оформления страницы. Всегда можно воспользоваться ими и не прогадать.
В общих чертах можно выделить основные черты этих шаблонов.
1) Находящиеся рядом цвета "сочетаются". То есть, расположенные рядом, они субъективно приятны посетителю. Например, белый и синий. Соответственно не встречаются "несочетаемые" цвета. Например, зеленый и оранжевый
2) Подбор цветов обеспечивает контрастность фона относительно текста. Это обеспечивает удобочитаемость текста.
3) Готовые шаблоны придерживаются негласных соглашений, принятых в интернете. Например, ссылки, встречающиеся в тексте, принято выделять синим цветом, отмеченные ссылки - фиолетовым. Более того, можно рекомендовать придерживаться этих соглашений, чтобы не заставлять пользователя угадывать.
При работе с цветом следует иметь в виду и технический аспект: пользоваться можно далеко не всеми цветами!
В основном это связано с различием в настройках мониторов пользователей. Однако, существует "безопасный" набор цветов. "Безопасных" цветов всего порядка 220 и такие инструменты как Macromedia Dreamweaver, обеспечивают проверку используемых цветов на "безопасность". Для наилучшего результата при оформлении рекомендуется использовать цвета именно из этого набора. В ходе анализа, сайты были просмотрены при альтернативных цветовых настройках монитора, и некоторые сайты стали выглядеть откровенно плохо. Конечно, большинство пользователей ничего не заметят, даже если будут использованы "небезопасные" цвета, но зачем рисковать?
* Используйте цветовое сочетание, предложенное профессионалами
* Придерживайтесь негласных соглашений об использовании цветов
* Используйте "безопасные цвета"
Вот примеры использования "небезопасных" цветов, когда при настройке монитора 256 цветов, изображение выглядит некорректно, а это - недопустимо. Пример 1. Пример 2.
1.3 Интерфейс и расположение "кнопок" навигации
При выборе месторасположения заголовка и кнопок навигации следует иметь в виду "зонность" распределения внимания по экрану. Если мысленно разделить экран на три части, то самая "активная" зона будет находиться на в нижней части верхней трети экрана. (Пример). Для простоты, просто обратите внимание, где находится строка поиска на Yandex.ru или прочих крупных порталах. Кстати, на Яндексе баннеры так бросаются в глаза именно потому, что находятся предельно близко к "активной" зоне.
Почти настолько же "активная" зона - левая треть экрана.
Именно поэтому, выбирая место для расположения кнопок навигации, чаще всего (почти всегда) их помещают сверху и слева.
Кстати, если на странице находится много текста и приходится прокручивать экран вниз, то имеет смысл продублировать кнопки навигации внизу, после текста. Для этой роли идеально подойдут простые текстовые ссылки. За такое усовершенствование высказалось 60% (12 из 20) респондентов.
* Располагайте кнопки навигации в левой или верхней части экрана
* При необходимости "прокручивать" страницу, продублируйте кнопки навигации внизу страницы
Расположение кнопок навигации слева, можно увидеть практически везде. Например, в прилагаемом сайте. Однако, можно ухитриться раположить кнопки слева, но не в активной зоне, как например это сделано здесь. Кнопки сильно завышены и это вызывает нарекания.
Пример расположения навигации справа здесь. Выглядит это даже непло хоть и несколько непривычно и неудобно. Однако, помимо внешнего вида здесь скрыты и подводные камни. Посмотрите эту страничку на 17" (а лучше, на 19"!) мониторе с большим разрешением. Поскольку кнопки навигации привязаны к правой границе окна, то они поедут вслед за ним уж слишком далеко.
Расположение дублирующих текстовых кнопок навигации в нижней части страницы, сделано здесь.
1.4 Удобочитаемость текста
Еще один чрезвычайно важный пункт внешнего вида. Если не обратить на него внимание, то даже самая замечательная с остальных точек зрения работа пойдет прахом.
Удобочитаемость складывается из двух основных аспектов:
1) Контрастность текста и фона, на котором он расположен.
2) Непосредственно текстовые параметры.
Поскольку первый аспект был рассмотрен выше, обратим больше внимания на второй. Ничто не наводит на пользователя большую скуку и отчаяние, чем большое количество неформатированного текста. В связи с этим наиболее популярными рекомендациями и решениями являются следующие:
* Ясно выделять заголовки, отделять смысловые блоки друг от друга
* Использовать, как минимум, полуторный интервал
* Излагать материал в максимально лаконичной форме
* Используйте размер шрифта от 14 до 18
В данном случае нужно иметь ввиду несколько чисто технических аспектов. Пользователи имеют разный размер мониторов. Даже при одинаковом размере монитора, они могут использовать разное разрешение экрана. Даже при одинаковом разрешении экрана, пользователи могут просматривать страницу в окнах разного размера. Даже если и окна одинакового размера, то в настройках браузера могут быть выставлены разные значения для размера просматриваемого текста, от самого мелкого до самого крупного. Отсюда вытекает важный вывод:
Бесполезно привязывать текст к размерам экрана и другим элементам - при любом несоответствии настроек браузера пользователя и дизайнера, текст поползет в неизвестном направлении, портя все впечатление.
Выход тут практически один:
* Использовать строгую привязку всех объектов и рассчитывать на наиболее часто встречающееся разрешение 800х600 на 15'' мониторе. Если у пользователя монитор большего размера и/или разрешения, то пустое пространство просто заливается цветом фона. Ориентироваться на большее разрешение не стоит, поскольку тогда вы рискуете слишком сузить аудиторию, которая сможет посмотреть ваш сайт без проблем, а постоянный скроллинг раздражает и может явиться причиной быстрого ухода, что подтвердили 90% (18 из 20) опрошенных.
Потери впечатления при таком подходе минимальны. Правда, при этом подходе не решается вопрос о размере шрифта. Тем более, что в вопросе со шрифтами мы сталкиваемся с еще одним чисто техническим вопросом: стандартом www поддерживается лишь Очень ограниченное число шрифтов и простора для творчества практически нет. А иногда так хочется… Ответом на эти вопросы может быть хитрый прием, которым иногда пользуются, и который пользователи признали оптимальным.
* Превратить форматированный текст в картинку!
Только убедитесь, что размеры заданы абсолютно, а не относительно и картинка не поползет вместе с размером окна, претерпевая недопустимые искажения.
Однако, пользоваться этим приемом нужно очень аккуратно. Во-первых, нужно следить, чтобы размер графического файла не был слишком большим. Кстати, это требование хорошо согласуется с принципом лаконичности. Во-вторых, нужно позаботиться о том, чтобы эта картинка не загружалась методом последовательного приближения "черезполосицей". Выглядит это ужасно.
Еще одна проблема может возникнуть, если размещенный материал большой или превращен в изображение, а пользователю он может понадобиться на его компьютере, в текстовом виде. В таком случае часто:
* создается отдельный файл, в котором та же самая информация находится в простом текстовом виде, возможно, без форматирования, а на странице дается ссылка "версия файла для печати", которую пользователь может скачать себе на компьютер.
Пример преобразования текста в картинку приведен на примерном сайте. В данном случае, текст был набран нестандартным шрифтом и подвергнут дополнительному форматированию. Чтобы сохранить все эффекты, он был переведен в форму изображения. Заметьте, что это практически не сказалось на размере сайта и, следовательно, на скорости загрузки.
Проблемы с удобочитаемость видны здесь. За счет очень низкой контрастности, текст справа практически нечитаем. Еще большее число проблем можно увидеть на другом сайте. Помимо неудачного расположения текста и нечитаемых кнопок, сайт очень долго грузит приложение, место которого пустует и производит негативное впечатление.
1.5 Внешний вид "кнопок" и интерфейса. Украшения.
Следует еще раз напомнить, что в данной работе не идет речь о креативном дизайне.
Большинство опрошенных высказались за принцип "чем проще тем лучше" и анализ сайтов подтвердил это мнение. Помните, что пользователь пришел на ваш сайт за информацией, и нет никакого смысла пытаться запутать его или пытаться произвести впечатление. Считается, что качественная система навигации просто незаметна. Т.е. дайте пользователю то, к чему он привык! Чем стандартнее и узнаваемее будет кнопка, тем лучше.
Следует иметь ввиду, что
* кнопка должна иметь как минимум два положения: неактивно и нажато.
Это облегчает пользователю ориентацию на сайте, поскольку он всегда знает, где находится в данный момент. Данная система поддерживается на 70% рассмотренных сайтах.
Теперь к вопросу об "украшениях". Помните, что с точки зрения пользователя чем скорее, тем лучше, а на "навороты" он, скорее всего просто не обратит внимание. Все пользователи это подтвердили. Так что, если нет необходимости (например, вы создаете специализированный развлекательный сайт, или сайт посвященный "наворотам") имеет смысл свести украшательство к минимуму. Помните, что средний пользователь использует модем 28 Кбит/сек и каждая дополнительная картинка стоит ему драгоценных секунд.
Примеры со скоростью мы уже видели. Просто ужасные кнопки посмотрели только что, теперь, рассмотрим пример с непонятными кнопками. Вот он. Кнопки навигации в верхней части экрана заставили многих пользователей растеряться. Непонятно, что конкретно означает каждая из кнопок, а разбираться методом "научного тыка", не хочется.
Простые и ясные кнопки можно найти, например, на уже рассмотренном сайте.
1.6 Сохраняемость интерфейса от страницы к странице
Практически никто из пользователей не обратил на это внимание, а тем не менее, это встречается практически на всех сайтах. Значит, это должно быть.
* Оставляйте внешний вид кнопок и расположение навигации неизменными внутри сайта от страницы к странице.
Во-первых, это поможет сформировать более целостное впечатление от сайта. Во-вторых, это поможет пользователю быстрее ориентироваться и не тратить время на нахождение кнопок заново.
Помимо сохраняемости месторасположения кнопок, значение имеет и общий внешний вид. Посмотрите последовательно на страницу 1 и страницу 2. Вы можете сказать, что они принадлежат одному сайту?
Примеры хорошей сохраняемости можно найти практически везде. Например вот страница новостей и страница с публикациями.
2. СТРУКТУРА
Под структурой понимается логическое разбиение материала и его размещение на разных страницах.
После того, как пользователь осмотрелся на сайте и обнаружил кнопки, он начнет на них нажимать. Вот тут на первый план выходит структура сайта. Сейчас решится вопрос: попадет пользователь, куда хотел, или нет.
Строго говоря, существует много типов структур, но, поскольку на всех рассмотренных сайтах была структура "дерево", то на ней мы и остановимся.
2.1 Точность и простота
В данном вопросе пользователи были единодушны. Ссылки должны быть короткими (одно, максимум два слова), по ним должно быть точно понятно куда именно попадешь, и, что немаловажно, пользователь должен попасть именно туда, куда хотел и ожидал.
В плане логического разбиения сайта тоже лучше не изобретать велосипед. Существует довольно стандартный набор рубрик:
* О нас (краткая информация о владельце сайта или организации)
* Новости (что произошло за последнее время в организации или на сайте)
* Продукты/услуги (в общем, то, чем занимаетесь вы или организация)
* Библиотека/поддержка (дополнительная информация, о ней речь дальше)
* Ссылки (интернет-адреса сайтов сходной направленности)
Такая рубрикация привычна, и пользователь максимально быстро сориентируется.
* Всегда проверяйте корректность ваших ссылок!
Как показал опрос, мнение пользователя о сайте резко падает, если в ответ на щелчок по ссылке он попадает на несуществующую страницу (известная ошибка 404). Для автоматической проверки можно использовать программу Linkbot.
Картинка с изображением ошибки 404 уже всем набила оскомину, и здесь мы ее приводить не будем, хотя, для собственного удовольствия, можете щелкнуть на любую кнопку в приведенный примерах, находясь в режиме offline. Посмотрите.
Гораздо интереснее посмотреть невразумительные ссылки, не говорящие пользователю абсолютно ничего о том, что за ними скрывается. Догадываться, людям хочется редко…
2.2 "Глубина" расположения информации
Под глубиной понимается количество щелчков мыши, требуемое для того, чтобы достичь места назначения. Чтобы было яснее, сравните два пути:
Каталог/Компьютеры/аксессуары/мыши/Genius/NetScroll+ Eye Blue
Каталог/Компьютерные аксессуары/мыши/NetScroll+ Eye Blue
(Курсивом выделен ресурс, который искал пользователь)
Этот параметр сформулирован пользователями, и, согласно их мнению, * число щелчков не должно быть больше трех.
Анализ популярных сайтов показал, что это правило соблюдается!
2.3 Возможность поиска
Половина опрошенных высказали пожелание, чтобы на сайте присутствовала строка поиска ключевого слова. Аналогичное пожелание встречается и в литературе. Большинство "хороших" сайтов имеют такую строку по крайней мере на стартовой страничке, а у некоторых эта строка имеется на всех страничках сайта. В этом случае, разумеется, она находится всегда в одном и том же месте.
Строку поиска можно увидеть, например, здесь… Или здесь…
2.4 Возможность сделать закладку
Многие пользователи даже не задумываются о том, что может быть иначе! Они и представить себе не могут страницу, на которой нельзя сделать закладку для последующего возвращения. Однако, такие случаи есть. И, когда пользователь с ними сталкивается, возмущению его нет предела.
Вновь вопрос чисто технический.
Невозможность поставить закладку (точнее, некорректная закладка) может возникнуть при использовании фреймов. В этом случае все переходы внутри страницы имеют один и тот же адрес! Если поставить закладку, то при ее активизации пользователь попадет на стартовую страницу и ему придется искать все заново.
Вывод отсюда простой:
* не использовать фреймы.
Да, хочется ускорить загрузку новой информации за счет того, что не нужно перезагружать заново часть экрана. Но, как показывает практика, для этого вполне достаточно использовать ссылки на одни и те же файлы заголовков, навигации и прочее от страницы к странице. Все равно они сохраняются в буфере браузера и не загружаются заново.
* Оставляйте посетителю сделать закладку в том месте, котором он хочет.
Вот редкий случай невозможности сделать закладку. Видите, вся информация размещена внутри фрейма, по центру страницы. Сделав там закладку, вы все равно начнете в следующий раз навигацию с самого начала.
3. СОДЕРЖАНИЕ
Сколь бы ни был красивым сайт, какой бы ни была удобной на нем навигация, но пользователь приходит на него за информацией. Окончательное мнение о сайте будет зависеть от того, что найдет пользователь на ваших страницах.
3.1 Соответствие заголовку
Все опрошенные подтвердили, что хотели бы найти на странице именно ту информацию, которая была анонсирована в заголовке или в ссылке. Будьте честными, не гонитесь за лишними посещениями. Гораздо лучше, если пользователь заранее поймет, что на сайте не то, что он ищет, чем он придет привлеченный громким заголовком, не соответствующим действительности. Обманутый пользователь, скорее всего, больше никогда к вам не придет. Так поступило бы 80% (16 из 20) опрошенных. С другой стороны, если пользователь будет точно знать, что находится на вашем сайте, то он это может запомнить, и, когда ему понадобится другая информация, он придет к вам.
Примеров такого рода в интернете довольно много, но ярче всего они на порно сайтах. Попробуйте, например побродить по сайту Stickyhole, щелкая на ссылки, и на ссылки внутри страниц, на которые попадете, короче - исследуйте и наслаждайтесь Когда вы уже раза два пробежите по кругу и поймете, что чаще всего попадаете все равно не туда, куда анонсирует заголовок - вы будете знать, что такое нечестные ссылки.
3.2 Количество информации
Как быть честным и привлечь максимальное число пользователей?
* Разместить как можно больше информации!
Абсолютное большинство опрошенных предпочли бы, чтобы вся информация находилась в одном месте. В этом случае, они готовы даже закрыть глаза на недостатки внешнего оформления и навигации. За примерами ходить далеко не надо, вспомните библиотеку Максима Мошкова - на ней вообще нет никакого оформления! А ведь один из самых популярных ресурсов интернета. Берет качественным содержанием.
Таким образом, соберите как можно больше информации по тематике, которой посвящен ваш сайт. Если сайт посвящен, например, шахматам, то не поленитесь, соберите последние новости, регулярно их обновляйте, собирайте их со всего мира! (Кстати, для этого тоже есть специальные программы) Кроме новостей, пусть будут анонсы ближайших турниров, причем не только проходящих в вашем городе, но и в соседних городах. Поставьте себя на место пользователя и спросите себя, что было бы интересно узнать. Предоставьте эту информацию. Если выбранная вами область достаточно специфична, то, будьте уверены, что хороших ресурсов на эту тему единицы. Кстати, в той же области шахмат, хороших российских ресурсов едва ли наберется пять штук.
3.3 Дополнительная информация
Помимо узко специализированной информации, пользователи хотели бы видеть и дополнительную информацию. Опять же, в случае с шахматами, имеет смысл выложить на сайт классические книги, собрать с разных источников интернета прокомментированные партии последних крупнейших мировых турниров, познакомить пользователей со значительными новинками в области теории и т.д. Чем больше, тем лучше. Пообщайтесь с людьми, спросите, что хотели бы они видеть на сайте. Ваши усилия будут быстро вознаграждены.
* Размещайте на сайте дополнительную информацию.
Например, посмотрите на сайт федерации шахмат Поволжья. Помимо информации о турнирах и новостях, на сайте размещена недавно изданная книга по шахматной стратегии. Она в разделе обучение.
3.4 Ссылки
Казалось бы, страничка со ссылками не более чем просто традиция, и не требует особого внимания. Пользователи с этим не согласны, 40% (8 из 20) посещают некоторые сайты только по той причине, что там хорошо сделана страничка со ссылками, и можно легко найти нужный ресурс и быстро на него попасть. Хороший продавец, если у него нет того товара, что ищет покупатель, всегда подскажет где искать и направит его. Люди это помнят и ценят. Так будьте хорошим продавцом!
Чисто технических советов по ссылкам может быть несколько.
* Посмотрите сайты конкурентов и сайты по смежной тематике.
Из анализа первых вы поймете, что нужно добавить на ваш сайт, а посмотрев вторые, вы будете знать что есть еще хорошего. Часть можно разместить у себя, а на часть сделать ссылки.
* Делайте ссылки точно на нужное место (а не на стартовую страничку), и снабжайте их четкими и точными комментариями.
Однако помните, что внешние ссылки требуют повышенного внимания. Регулярно их проверяйте на соответствие. Информация на другом сайте может поменяться, а вы все еще отсылаете людей в никуда.
* Группируйте ссылки в группы. Число ссылок в группе должно лежать в пределах 7+/- 2. Число групп также стоит выбрать в пределах 7 +/- 2.
Этот совет связан с особенностями человеческой психики. На самом деле, причина, быть может, совсем другая, но на всех ресурсах, на которых, по утверждению пользователей, ссылки сделаны хорошо, это правило соблюдается.
Вот пример хорошей странички со ссылками. Многие люди хвалят этот сайт именно за ссылки.
3.5 Новости
В данном случае, новости понимаются иначе, чем в разделе 3.2. Количество информации. Здесь, новости - информация о последних изменениях на сайте. Лишь 5% (1 из 20) высказались в пользу этой информации. Но, этот раздел присутствует на многих сайтах, и его рекомендуют в литературе. А потому - стоит сделать этот раздел.
3.6 Обратная связь. Информация о себе
С одной стороны, информация, безусловно, полезная. Всегда полезно дать пользователю возможность связаться с вами. Он может что-то заказать, что-то предложить, высказать свое мнение о сайте, наконец. Поэтому эта информация есть на всех сайтах. Но пользователи крайне редко обращают внимание на этот раздел.
ПРИМЕНЕНИЕ ИЗЛОЖЕННЫХ ПРИНЦИПОВ
Для иллюстрации большинства приведенных в данной работе советов, был создан примерный сайт. Он посвящен гипотетическому шахматному центру. Ввиду технических сложностей, он сделан на английском языке. Ввиду недостатка времени, на момент сдачи проекта, готовы только главная страничка и страничка "Продукция/книги". Однако и на этих страничках можно увидеть многое из вышеизложенного.
Примерный сайт Главная страница
Примерный сайт Страница Продукция