Что такое удобный для посетителей сайт

Ранее мы выяснили, что посетителю удобно то, что привычно - то, что он наиболее часто видит и чем привык пользоваться. Логично предположить, что в деле формирования "стандартов" определенную роль играют популярные сайты в сети, которые участвуют в формировании взглядов посетителей на то, как страницы "должны" выглядеть и функционировать на других сайтах. То есть, ведущие сайты в той или иной области формируют общее представление посетителей о сайтах в данной области, в результате чего происходит группировка сайтов, которые придерживаются той или иной разметки страницы, подачи информации, функциональности и др. Очень часто какие-то идеи в оформлении или функционале просто копируются с ведущих сайтов, в надежде, что раз это работает у них, то это должно работать и у нас.

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

Область повышенного внимания - область верхнего левого угла страницы. Это связано в частности с тем, что мы привыкли читать текст слева-направо и сверху-вниз (вспомните, как мы читаем книги), а левые верхний угол - точка привязки.

По этой причине логотип, который размещается в левом верхнем углу виден посетителю сразу, как и начало горизонтальной навигации и начало навигации слева. Различные исследования показывают, что наиболее часто логотип размещают в левом верхнем углу, а навигацию слева. Мы получили стандартную Г-образную навигационную разметку, которая используется в большинстве windows-приложений, где в верхней части окна расположены главное меню и панели инструментов, а слева обычно размещается панель инструментов для редактирования (в графических программах) или инспектор свойств объектов (в визуальных средах программирования). Почему это удобно? Давайте посмотрим на следующий рисунок.

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

Итак - левая область web-страницы удобнее для взаимодействия и соответственно важнее правой. Почему тогда на некоторых сайтах навигация расположена справа, а информация слева? Это делается для того, чтобы дать возможность посетителю полностью сосредоточить свое внимание на информации. Когда посетитель читает текст на web-странице, то в случае левосторонней навигации при переходе на новую строку текста его взгляд постоянно "натыкается" на навигационную область. Возможно, для кого-то это покажется несущественным в случае web-страницы, но все будет зависеть от того, как оформлена эта навигация. Например в книге такие "врезки" очень отвлекают внимание и очень трудно попасть в начало предложения, потому что взгляд все время пытается "зацепить" текст врезки. Конечно, со временем посетитель производит коректировку перемещения взгляда, но все равно остается ощущение, что что-то слева есть. Если же навигация расположена справа, а текст начинается сразу с левого края страницы, то процесс перехода на новую строку при чтении происходит намного спокойнее. Я не изучал детали чтения человека, но можно сделать предположение, что начало строки - своего рода отправная точка при чтении строки, к которой человек старается как можно быстрее перейти, после чтения предыдущей строки, чтобы "не потерять" предложение. С этой точки зрения "ощущение" навигации справа от текста воспринимается читателем спокойнее, хотя опять таки в случае чтения книги взгляд продолжает движение и опять попадает на текст врезки, особенно в том случае, когда она выделена фоном.

Вопросы разметки страницы подробно рассматриваются в разделе DHTML. Но стоит обратить внимание на следующий момент. Одна из проблем раннего интернета - аппаратные ограничения и в частности - невысокое разрешение экрана. Лет 5 назад разрешение экрана монитора у большинства посетителей было 800х600, что являлось существенным ограничением для размещения информации по горизонтали. Если ширина области навигации выбиралась 180-200px, то без учета полей для информации отводилось 560-580 px. Эти экранные размеры достаточно близки к размерам обычной книжной страницы, что очень удобно и привычно для посетителя при чтении информации с экрана.

А ведь еще умудрялись справа делать панель сервисов шириной 160-180 px. В результате информация на некоторых сайтах была "зажата" между этими двумя областями, хотя это было характерно в большей части для главных страниц,

Сейчас же стандартное разрешение 17' ЖК-мониторов - 1024х768, а для 19' - 1280х1024. В последнем случае область страницы по горизонтали увеличилась в 1,5 раза по сравнения с 800 px! И теперь мы видим другую проблему - на web-странице получается слишком много места. Что с ним делать? Некоторые web-разработчики оставили "жесткую" верстку без изменений - 760-780 px по горизонтали и производят выравнивание страниц сайта по центру. Но при этом пропадает много полезного места - порядка 280-500 px - более 1/3 пространства только на одном экране! То есть, используя всю площадь страницы, можно сократить количество экранов для нее с 4 до 3. Если это не критично, то существенно. "Резиновая" верстка лучше использует площадь страницы, но здесь важно не переборщить с объемом информации, особенно на главной странице. Поскольку длинные строки ухудшают восприятие текста, то приходится думать над сокращением текстового поля по горизонтали и как вариант - большое пустое поле справа. Либо приходится увеличивать по горизонтали область навигации слева. Решений может быть много, вплоть до размещения в свободной области сервисов, что вызовет одобрение у программистов или рекламные блоки и анимацию, что весьма порадует web-дизайнеров. Но вот добавит ли это удобства посетителям - большой вопрос.

Я думаю, что на сегодняшний момент наиболее удобна "резиновая" разметка, с базовой шириной web-страницы порядка 1000 px. Тогда при горизонтальном разрешении 1024 px посетитель увидит "жесткий" дизайн без горизонтальной полосы прокрутки, а при разрешении 1280 px страница немного растянется, что позволит информации занять больше места на странице.

 

 

Давайте рассмотрим понятие "удобный сайт", но уже с точки зрения удобства решения задач с помощью него. Другими словами, может ли сайт быть настолько удобен, чтобы отказаться от использования windows-приложений при решении определенных задач? Я специально подчеркнул слово "определенных задач", поскольку есть области, где современные web-технологии никак не могут соперничать с приложениями, взять к примеру, графические редакторы. Вопрос "windows или web" интересует многих уже давно. Но этот спор во многом бессмысленный, потому что в windows - локальные технологии, а web-сетевые. И они сильны каждый в своей области: windows - скорость и функциональность, а Web - информационность и доступность.

Давайте рассмотрим один из самых актуальных вопросов в настоящее время - электронный заказ товаров. Нам потребуется база данных для хранения информации о товаре и программный интерфейс, с помощью которого пользователь может осуществить саму процедуру заказа товара. Механизм заказа товара можно реализолвать двумя способами: с помощью web-сайта или лиентской программы.

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

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

Для сравнения ниже показана таблица действий, которые нужно совершить пользователю для заказа товара

Мы видим, что перед использованием приложения для заказа товаров его нужно установить и настроить. Вопрос, если человеку нужно заказать книгу или телевизор, то какой вариант он выберет? Первый, потому что в первом случае он сразу может начать поиск и заказ товара - быстрый старт, а во втором случае ему нужно разбираться с какой-то программой заказа. Свобода выбора заключается в том, что посетитель может быстро переходить из одного Интернет-магазина в другой. Информационность - возможность быстро увидеть большое количество различных предложений. Все это отсутствует во втором варианте. Действительно, споиск, скачивание, установку и настройку программы никак нельзя назвать быстрым стартом. Свобода выбора отсутствует, как и информационность, поскольку пользователь работает только с предложением одной компании. Кроме этого нужно будет продумать обновление самой программы и данных. Автоматическое обновление данных реализовать нетрудно, а вот обновление самой программы опять ложится на плечи пользователя.

Очевидно, что Интернет-магазин имеет существенные преимущества перед программой заказа, но, по сравнению с другими способами заказа товара (по телефону, по факсу или e-mail), Интернет-магазины все еще проигрывают.