Рекомендации по созданию удобного и понятного сайта

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

Рекомендация 1. "Делайте сайт для посетителей". Однажды я задумался, почему я не заказываю товары через сайты, хотя по работе мне часто необходимы разные товары? Да, неопытный посетитель может запутаться в многочисленных ссылках, рекламе и др., но специалисту, который разбирается в товаре, знает, как искать товар и работать с тем или иным сервисом на сайте совсем не трудно сделать заказ. В чем же дело? Над этой проблемой я думал до тех пор, пока не открыл пару наиболее нужных в работе сайтов, и сразу понял в чем дело! НЕУДОБНО! Неудобно сделан поиск товара, неудобно делать заказ, неудобно перемещаться по каталогу и просматривать информацию о товаре и т.д. А это что за "бегущая строка", а этот баннер зачем? Иной сайт выполнен профессионально - ничего не скажу, все вроде правильно, лишнего ничего нет, но НЕУДОБНО! Я понимаю, что понятие "удобство" для разных людей может быть различнымю Для специалиста, который привык по автоматизации процессов, удобство заключается в одном, а для обыкновенного посетителя подойдут и стандартные функции. Но представьте, что посетителю нужно заказать незнакомый ему товар, а поиска нет! И что, он должен просмотреть каждый из 10 разделов, в котором по 200 наименований продукции? Не думаю, что многие посетители знают, что информацию на странице можно найти с помощью диалога поиска браузера, а уж про Ctrl+F, так вообще можно и не спрашивать. Это ладно, так на многих сайтах нет еще и прайс-листа для загрузки. То, что сайты стали грамотнее - это заметно. Но с другой стороны у меня складывается впечатление, что во многих случаях компании слабо понимаю, зачем им сайт. Мне, например, кажется логичным наличие поиска для каталога товаров, можно найти и специалиста, который сможет сделать хоть какой-то стандартный поиск. А какой сервис предлагают некоторые производители товаров? НИКАКОЙ! Я знаком с компаниями, которые работают на рынке более 50-70 лет, так можно из этого времени существования затратить 3 месяца, найти 2-х специалистов и выделить 100 тыс. руб. в год на то, чтобы сделать на сайте описания и фотографии производимой продукции? Одно радует, при таком подходе к бизнесу еще лет 30-50 посетители будут покупать товар не у производителя, а у грамотного продавца-посредника. Да и разработчикам неплохо, сделал грамотный сайт и зарабатывай на чужом товаре!

Как раз сейчас я открыл сайт одной web-студии и вижу 5 главных правил, о которых там говорится:

Примерно так и звучит подход "сайт для заказчика". Только через некоторое время у заказчика, при просмотре анимационного ролика на главной странице своего сайта, возникает вопрос, а где собственно посетители и заказы?

Рекомендация 2. "Посмотри, как это сделали другие, и сделай не хуже!". В этой фразе заложено нечто большее, чем просто призыв. В ней содержится рациональный подход к любой разработке и, в частности, созданию сайта. Можно, конечно, действовать и "методом тыка", создать сначала один сайт, потом сделать другой, третий, учась на собственных ошибках, потом почитать литературу (собственно так я и начинал знакомство с web-программированием, когда делал странички для себя), но есть и второй способ - посмотреть несколько похожих по идее проектов, так сказать "вникнуть в область" увидеть плюсы и минусы разных идей и реализаций. Такой подход я применил для создания своего первого интернет-магазина, о чем хочу рассказать несколько подробнее.

В 2002 году сайт компании, где я работал, выглядел так: главная страница, о компании, контакты и статичные страницы с прайс-листом. В то время я занимался автоматизацией 1С, и Интернет с модемным подключением не особенно интересовал меня до тех пор, пока однажды я не услышал от сотрудника как и сколько времени у него уходит на обновление одного раздела прайс-листа на сайте - 2 часа! Такой бессмысленный и неэффективный труд не мог не заинтересовать меня, и я решил автоматизировать этот процесс. Но с чего начать? Сайты конкурентов представляли такой же набор статичных страниц и обновлялись раза 2 в год с такими же, если не большими трудностями. Тогда мне в голову пришла мысль - отталкиваться не от Web, а от традиционного программирования, тем более, что похожий опыт уже имелся (когда подсматривал интересные идеи в 3D-редакторах, офисных пакетах и др. и адаптировал их для работы с базами данных). Применение алгоритмов традиционного программирования позволяет получить свободу при разработке, поскольку нет ограничений в технологиях по сравнению с Web, но моя ошибка как разработчика была в том, что мне хотелось сделать интернет-магазин таким же быстрым, удобными и функциональным, как и Windows-приложение. И это получилось, но как отдельный сервис, поскольку кроме браузера IE, все остальные браузеры напрочь отказывались понимать программный код, а адаптировать тысячи строк под другие браузеры не было возможности, да и руководство не особенно было в восторге от самой идеи. Но в результате "сотрудничества Windows и Web" получилось достаточно быстрое и эффективное на тот момент решение, которое вывело сайт компании на хороший уровень и позволило заключить целый ряд важнейших сделок с иностранными покупателями.

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

Рекомендация 3. "Придерживайтесь соглашений и традиций ". Эта рекомендация особенно полезна web-дизайнерам, которые в порыве поиска "креатива" зачастую совсем забывают о них. Мне часто приходилось слышать мнение: "Ваши сайты очень похожи один на другой - шапка вверху страницы с поиском, навигация слева, информация на белом фоне справа". Но почему тогда они не говорят того же самого о приложениях, хотя в каждом из них традиционно есть главное меню, подменю, рабочее поле, да и большинство элементов управления однотипные с традиционными пиктограммами? Взять хотя бы офисный пакет. Это происходит по той причине, что посетители изначально хотят и воспринимают web-среду как множество индивидуальных графических проектов, которые визуально должны отличаться друг от друга. Но стоит им только начать работу с web-страницей, то оказывается, что навигация в виде закрученных по спирали ссылок трудно читаема, а плавающая панель отвлекает от чтения информации. А где же поле поиска товара? Так разработчик посчитал, что оно "портит дизайн" шапки и убрал его. А где же область навигации, которая должна быть слева? Очень просто - она находится справа, чтобы отличаться от других сайтов. Вы же этого хотели, нет? Всегда надо помнить, что человеку все интересно и красиво до тех пор, пока он смотрит, как только он начинает этим пользоваться и пользоваться постоянно, то восторженные возгласы очень быстро пропадают, поскольку он сталкивается с реальностями неудобной работы.

Рекомендация 4. "Постоянно спрашивайте себя - что это, для чего это нужно, почему это должно быть здесь". Когда разработчик приступает к созданию сайта, что очень часто возникает вопрос, а чем наполнить его страницы? Это происходит по нескольким причинам:

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

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

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

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

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

Рекомендация 5. "Ставьте себя на место посетителя и наблюдайте за работой посетителей". Первую рекомендацию выполнить порой просто невозможно, поскольку разработчик знает о механизмах работы сайта почти все, а посетитель - почти ничего, поэтому разработчик выполняет "правильные" действия, а посетитель - "как получится". Наблюдение за работой посетителей - крайне важный момент, который также очень непросто реализовать, а получить при этом объективные результаты - это сверхзадача.

Рекомендация 6. "Постоянная работа над сайтом". Очень часто заказчик не понимает одну простую вещь - сайт - продукт, пусть и электронный (информационный). Тогда почему производители на протяжении многих лет ищут новые технологии для того, чтобы улучшить качество и удобство пользования своей продукции (по крайней мере так должно быть), а сайт каким был 10 лет назад, таким и остался сейчас? Поддержка и наполнение сайта лишь частично влияют на удобством работы с ним. Например, более удобно работать с сайтом, на котором есть все фотографии и описания товара, по сравнению с тем, где на 100 товаров приходится 10 сделанных кое-как фотографий. Но поддержка и наполнение не могут повлиять на механизмы работы сайта, например, поиска - если неудобно производить поиск среди 1000 наименований, то неудобно будет производить поиск и среди 10000 наименований. Более того, изменение количественной составляющей объекта может потребовать изменения самих механизмов работы, поскольку, например, хранение и поиск информации о товаре в 1000 записях можно легко выполнить с использованием массива на Javascript, а для 10000 записей придется использовать уже базу данных. Хорошо, а почему тогда сразу не взять "правильные технологии с запасом", чтобы при любых обстоятельствах все работало быстро и удобно? Эта концепция сайтов с системой управления, когда разработчики предлагают типовую оболочку, на базе которой можно построить тот или иной тип сайта. Иногда это работает, но универсальность и эффективность - не одно и тоже. Типичный пример - "1С:Торговля и склад". На этой платформе можно сделать много различных и полезных приложений, но качественно улучшить удобство работы ее механизмов не получится, при том, что во многих случаях удобство работы важнее функциональности. Я подчеркнул этот момент неслучайно, поскольку постоянная работа над чем-то не всегда приводит к положительным результатам и новая реализация не всегда лучше старой. Достаточно вспомнить несколько версий какой-нибудь компьютерной игры или приложение. Это говорит о том, что разработчики "перегорели идеями" стремясь выдать что-то новое, принципиально отличающееся от предыдущего, в результате чего получается непонятно что. Они продолжают копать и копать вглубь, "заряжая" программы новой функциональностью, не понимая, что 90% пользователей предпочтут лишь заглянуть в "туннель функциональности", и только 10% попробуют войти в него. Я думаю, что у каждого разработчика наступает момент, когда он впадает в своего рода "эйфорию" и чувствует, что вот она - его суперпрограмма и забывает о том, что кроме него самого этой программой будут пользоваться и другие люди, для которых собственно она и создавалась! Это относится и к web-сайтам.

Рекомендация 7. "Уделяйте внимание мелочам". Эта рекомендация появилась в моем арсенале после того, как по работе мне пришлось столкнуться с созданием форм для макросов на VisualBasic. Мое личное мнение - по сравнению с работой в Delphi VisualBasic - очень неудобно. На создание простой формы с 3 кнопками, 3 текстовыми полями и программированием простейших действий у меня ушло минут 20, хотя все было понятно - вот объекты, вот свойства, вот форма, вот файл модуля. Все дело оказалось в мелочах - где-то фокус работал неудобно, где-то объекты как-то странно вели себя, в тексте модуля неудобно было переходить между обработчиками событий и т.д. Кому-то эти мелочи могут показаться несущественными и к ним можно привыкнуть, но зачем учиться работать мышью левой рукой, когда можно легко и быстро работать натренированной правой? "Но web-сайт - это не VisualBasic", - кто-то заметит. Да, это так, но давайте в качестве примера возьмем таблицу с товарными записями, где посетитель должен в поля "Количество" вводить количества заказываемого товара. Пусть ему необходимо заказать 30 наименований. Типичная последовательность действий будет такой:

Поверьте - это очень утомительное занятие. Для ее упрощения достаточно запрограммировать нажатия курсорных клавиш "Стрелка вверх" и "Стрелка вниз" так, чтобы при их нажатии фокус перемещался на соседнее поле, относительно текущего. Тогда последовательность ввода количества будет такой:

Можете проверить, это намного проще, удобнее и быстрее. "Но перемещаться между полями можно с помощью клавиши табуляции" - скажет иной разработчик. Это более или менее удобно для движения вниз по записям, но что удобнее нажать клавишу "Стрелка вверх" для перехода к предыдущей записи или сочетание "Shift+Tab"? Кроме того, смена фокуса клавишей Tab приводит к перемещению фокуса на следующий элемент (на который можно установить фокус) в структуре таблице, который может находиться между предыдущим полем ввода и следующим, например, минифотография товара. В этом случае при нажатии на клавишу Tab мы не попадаем в следующее поле ввода. А курсорные клавиши программируются только для перемещения по полям ввода. Кроме того, очень удобно ориентироваться по направлению стрелок на курсорных клавишах - "Стрелка вверх" - перемещаемся в поле ввода, расположенное выше текущего, "Cтрелка вниз" - перемещаемся в поле ниже текущего.

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