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

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

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

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

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

Главная страница имеет такой вид:

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

Неверное использование уточняющих слов «наше», «наши», «наше»

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

Неверное использование заглавных букв

В заголовках второе слово написано с заглавной буквы. Это не соответствует правилам грамматики.

Цветовое оформление

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

Иконки

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

Одинаковое оформление заголовков и других элементов сайта

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

Текст заголовка выполнен картинкой

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

• Веб типографика и шрифты.
• sIFR | Scalable Inman Flash Replacement.
• Как и когда использовать sIFR
• Описание работы с sIFR (в картинках)
• sIFR | Пошаговая установка
• sIFR примеры | Русские сайты
• sIFR | Полезные ссылки

Итоги

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

p.s. Если Вы являетесь владельцем некоммерческого сайта, мы готовы провести экспресс-аудит Вашего сайта совершенно бесплатно. Заявки на аудит принимаются в комментариях к этому посту. Если же Вам необходим комплексный аудит с детальным отчетом о всех проблемах Вашего сайта и рекомендациями по их устранению – ждем Вашу заявку на почту admin@bontonweb.com
Все детали можете уточнить и при личном общении в ICQ 254533158.

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

Фавикон отображается в:
- адресной строке браузера;
- панели закладок;
- в результатах поиска.
Именно по фавикону пользователь может легко найти сайт в закладках.

При взгляде на фавикон сайта блогион у меня возникло чувство, что где-то это я уже видел. Вспомнил – открываем Photoshop – Shape – Load Shapes – Animals.
10 секунд, 4 клика и фавикон готов!

Рекомендуем разработать уникальный графический элемент для фавикона, максимально соответствующий тематики сайта и его дизайну.

2. На сайте одновременно используется 4 варианта названия сервиса:
- blogion.ru
- blogion
- Блогион
- «Блогион»

Рекомендуем определиться с единым вариантом написания названия сервиса.

3. Логотип должен быть уникальным, запоминающимся, максимально соответствовать тематике сайта. В нашем случае используется обычный текст Verdana 28 px.

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

4. Слоган «Наверное, самый классный сервис интернет-дневников… Добро пожаловать!» вызывает целую гамму противоречивых чувств.

5. С помощью главного меню невозможно определить, где находиться посетитель сайта в данный момент.

Рекомендуем выделять в главном меню пункт текущего раздела сайта.

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

7. Неправильно используются кавычки. Одновременно применяются несколько вариантов написания кавычек.

Рекомендуем ознакомиться с правилами использования кавычек, например в «Ководстве» Лебедева.

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

9. При работе с сайтом я обратил внимание на скорость загрузки страниц. Она оказалась достаточно низкой. Причина – большой размер кода страницы (около 700 кбайт).

Откуда такой большой объем кода для обычной текстовой страницы? Посмотрим исходный код. В блоке синдикации постов с сайта Aruna.Christie @diary.ru в title ссылок подгружается полное содержимое публикации.

Рекомендуем использовать title по назначению и размещать в нем текст размером не более 75 символов.

10. Количество счетчиков и систем статистики выходит за разумные пределы. Это сильно замедляет работу сайта.

Рекомендуем использовать для сбора и анализа статистики сайта Google Analytics, либо анализировать при помощи соответствующего ПО логи сервера.

Рассмотрим страницу http://jamber.info/registration.php. Тестирование проводим при разрешении 1024х768. Все элементы сайта должны корректно отображаться при таком размере экрана.

1. Шрифты в полях ввода и в выпадающих списках смотрятся в разных браузерах по-разному. Если в IE ситуация более-менее нормальная, то в Firefox в полях формы используется 6 разновидностей написания текста:

Рекомендуем привести оформление шрифтов к единому стилю.

2. При заполнении формы совершенно не ясно, какие поля являются обязательными для заполнения, а какие нет.

Рекомендуем явно указать на необходимость заполнения всех полей формы с помощью пояснительного текста.

3.Для выбора пола более логично использовать чекбоксы, а не выпадающий список, т.к. вариантов всего два.

4. Список стран избыточен. Вряд ли целевая аудитория сайта находиться в Монголии или Непале. А вот для того, чтобы выбрать Россию или Украину, приходиться прокручивать список почти до самого низа.

Рекомендуем максимально сократить список стран.

5. В IE невозможно полностью прочитать контрольный вопрос.

6. Перепутаны местами кнопки «Следующий шаг» и «Очистить форму». Они ассоциируются с направлением движения (вперед-назад).

Рекомендуем поменять кнопки местами.

7. Сообщения об ошибках выводятся в виде всплывающего сообщения. Его дизайн выглядит неаккуратно. Посетитель вряд ли дочитает это сообщение до конца.

Рекомендуем использовать подсветку цветом неверно заполненных полей и выполнять динамическую проверку с помощью ajax.

Я со своим высшим электротехническим образованием так и не смог в течении 20 минут понять, как мне найти бойлер на 100 литров мощностью 2 кВт. Но разработчики сайта позаботились о таких недогадливых посетителях и разместили исчерпывающую инструкцию, как правильно пользоваться данной формой поиска:

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

Продолжение следует …

Итак, поехали!

p.s. все скриншоты и примеры взяты с реальных действующих сайтов, адреса которых не разглашаются.

Интересно, сколько пользователей кликнет по ссылке ?

1.Много полей. Слишком много.
Если Ваш сайт не занимается оформлением загран паспортов он-лайн – зачем Вам знать все подробности из жизни Ваших посетителей? Школа, Девичьи фамилии всех родственников женского пола, уровень образования?
- Для восстановления пароля? – Не смешите меня. Вы думаете, юзер запоминает все тем десятки секретных вопросов в различных регистрационных формах? Единственное, что нужно ему и вам- это его е-мейл. ВСЕ.
- Боитесь спамеров? – Ну не настолько же, чтобы отпугивать реального потенциального посетителя.
- Для статистики? Другой разговор. Но мне кажется, целесообразнее просто выделить отдельно модуль голосования, бок дополнительных вопросов – по желанию, чем потерять потенциального обратившегося.
В общем, перефразируя товарища Льва Толстого – если вы можете не спрашивать о чем-то юзера – не спрашивайте, а спрашивайте лишь тогда, когда не спрость не можете.

2. Рябит в глазах от красных мух.
Давайте все наши 55 полей регистрационной формы пометим красными звездочками – чтоб и не думали ничего пропустить… Если у вас все поля обязательны для заполнения – так и напишите об этом в начале. Юзеры – не так тупы, как кажется. И не надо рябить красными звездочками. Другое дело, когда из 5 полей лишь 2 являются обязательными. Тогда смело ставьте звездочки и не забудьте в сноске указать, что красная звездочка обозначает обязательность заполения, а не дизайнерский элемент или еще что.

3. Не указаны обязательные поля.
Обратное от предыдущего пункта – нет ни слова о том, какие поля обязательны. если все- напишите – ВСЕ. Если не все- выделите обязательные звездочками и укажите, что звездочки это обязательность. А то сидишь, полчаса форму заполняешь – а потом тебе выдает – а имя козы троюродной бабушки вы не указали! Блин!

4. Необратимость.
Заполнил форму. Нажал на «Отправить»или «Запрос» или что там еще. И оно тебе пишет – извините, вы там что-то недоуказали илу указали неправильно. И – бац. Выбрасывает тебя опять в ПУСТУЮ ФОРМУ! Что, нельзя оставить правильное заполненное? Экономьте время зера. Он – рабочий человек, у него дома жена – дети, муж-коты-собака, начальник идиот и все такое.
Уберите неверные поля – или красными буквами покажите, что ай-ай-ай! Но не вытирайте всю вбитую информацию. Это реально очень сильно раздражает.

5. Границы формы ввода данных.
В некоторых формах они конкретно невидимы. Ну нет прямоугольника. Не видно его. Написано – Ваше имя – пустое место, потом – Ваша фамилия – пустое место…
Где мне надо это вводить? Сбоку? Под низом? Я вижу плохо – нарисуйте мне серный прямоугольничек, вы же не распечатывать страницу собираетесь, чтобы картридж экономить-то.

6. Что хотите, то пишите.
Ну ставьте какие-то фильтры, что-ли. А то бывает, развлекаешься и вбиваешь – Ваш телефон – rytuert, Ваше имя – 1234, ваш горд – Ы.
Поставьте фильтр на буквы-цифры, примерное количество знаков (ведь ясно же, что поле адреса электронной почты должно содержать знак «@», а номер телефон не может состоять менее, чем 6 знаков.
А если не ставите – не жалуйтесь на спамеров.

8. Кнопка, ты где?
Я не верстальщик, но думаю, специалисты поймут, что я имею в виду. Бывает, кнопку «регистрация» (например) – не привязывают к форме, а привязывают к странице в целом. На маленьком мониторчике смотрится нормально. А на большом кнопка уплыывает или жутко вбок, или прячется в футер. Неудобно.

9. Дурацкая капча.
Я не против капчи. Но капча что-то вроде – «сколько будет 347+568-453″ – меня, мягко говоря, напрягает. У нас что – экзамен по устному счету? Проще, товарищи, проще.И не надо слишком замалевывать фон. Я вижу плохо – а вы мне абракадабру и каракули посовываете. А потом я ввожу неправильно, вы мне говорите- а не правильно – и ваще все данные в форме вытираете… АААААААААА!!!!!!!!. Не буду я вообще ничего у вас заполнять, раз вы такие вредные.

Вот такие вот аспекты. Опять таки, писалось больше со стороны пользователя, а не создателя 9сама не создаю – токмо критикую .

Но может, это поможет кому-то избежать ошибок…

Успехов всем!

1. Естественно, флэш-реклама!

Слаба, Богу, всякие дополнения к Мозилле Фаерфоксовне теперь позволяют от нее не страдать. Но раньше – это же было просто мучение! Открываешь сайт и прямо на том месте, на котором тебе надо срочно кликнуть мышью или прочесть что-нибудь – выплывает ЭТО. И еще попробуй, найди «хрестик» чтоб его закрыть! А то еще крестик какое-то время – активен – типа зеленого цвета. А то неактивен. А вот поди угадай, когда он таки закроет эту гадость, а когда гадость взорвется буйными цветами радуги. Какие-то время я просто на нее щелкала, чтоб отвязались и изучала нужную мне страницу дальше. Но эта гадость, бывало, открывалась не в новом окне, а прямо в этом. Жмешь кнопку «назад» – и пред тобой опять то же самое… Горе, в общем

2. Ссылки непонятного вида.

То есть, когда вообще непонятно, что это ссылка. Она не подчеркнута, не выделена другим цветом, не меняется от наведения курсора, сам курсор остается «стрелочкой», не превращаясь в «ручку». Вот откуда я знаю, что мне надо сюда нажать? Что сюда можно нажимать? Нет, я конечно, могу потыкать по всему тексту сайта, но мне? извините, впадло.

3. Отсутствие элементарной логики.

В силу своей работы, я часто ищу-брожу по сайтам с целью найти партнера, рекламные площадки и так далее. так никаких же слов нет! Ходишь-смотришь-видишь – «Наши партнеры » – боковой список на главной странице. Все красиво. Внизу лозунг – «Стань нашим партнером!» – или что-то в таком роде. И все. Эта фраза – не ссылка, не намек на ссылку. НИЧЕГО Потом оказывается, что надо пройтись по всему сайту, заглянуть в раздел «Услуги», там – в «Дополнительные предложения» и там указан адрес – если хотите стать партнером – пишите… на деревню дедушке. Так может надо было просто «Стать партнером» сделать ссылкой на страничку с условиями партнерства, размещениями рекламы… Потому что попробуйте-ка кому-то напишите про предложение о размещении рекламы – сейчас все стали такие умные. Понаставляют спам-фльтров. И ждут рекламный предложений… Долго будут ждать. Особенно с таким вот их представлением на сайте.

4. Большие шапки.

Открываешь сайтик – а там на 2/3 экрана – шапка со слоганом «Наши окна – лучшие в мире». Да мне плевать. Вы мне докажите, что они лучше для меня. А красная полоса с белыми буквами, вещающими про «лучшие в мире» меня как-то не возбуждает. А вас?

5. Спец эффекты для курсора

Ну это вообще классика. Все эти звездочки, кошки, собачки, выпадающие из курсора. Ну на кой?

6. Не грузящиеся картинки.

То ли они большие, то ли их там нет уже давно – но такой вот квадртик и усьо. Ну и зачем он мне? Даже еще и не подписанный (ну не любили создатели тега ALT).

7. Кислотные цвета и не контрастный текст.

Лично меня- раздражает. Особенно, как человека, львиную долю времени проводящего у компьютера. Пожалейте мои глаза! Самый блеск, если о цветах – недавно попался сайт. Черный фон и мелкие буквочки серого и темно-синего цвета. Они что – идиоты? Я даже если захочу – такого не прочитаю. Или светло-розовый шрифтец на белом фоне – ну просто блеск! Товарищи – контрастнее. Буквочки темнее – фон светлее. Вы сами сначала попробуйте почитать, чего понаписывали.

8. Поганая навигация.

Режет без ножа. Я параноик! Я люблю знать, как мне вернуться обратно! Я не закрываю за собой дверь в незнакомое помещение, если иду туда в первый раз. А если закрываю – четко должна знать, где эта дверь – чтобы выскочить. А бывают не сайты – а лабиринты мнотавра. Попасть снова на главную страницу, блуждая, можно только случайно. Ну на крайний случай (вообще, так принято, но вдруг у вас нет) – ну сделайте вы логотип или название – ссылкой на главную. Пожалейте нас, параноиков. Опять таки – ну выделите вы ссылки, по которым я уже ходила. Чтобы я не тратила свое время. У меня его итак мало. Чтоб еще запоминать, щелкала я сюда или нет. особенно это раздражает, когда приводят, например, список статей, и тебе их надро пересмотреть. так после 10 – уже теряешься и то и дело начинаешь повторно клацать. Если вот такого выделения нет.

9. Музыка, которую нельзя выключить.

Я вообще не сторонник музыки на сайтах. А с моей любовью открывать по 40 окон сразу – можете представить, себе, как я мучаюсь, когда в каком-нибудь из них начинает играть музыка. Я должна найти сайт, на котором она играет. И потом на этом сайте- задача посложнее- найти, где эту долбанную музыку отключить! так ведь на 50% сайтов эта возможность вообще не предусмотрена! Умоляю – можете без музыки – будте без нее! Не можете – большими буквами напишите- ВЫКЛ. музыку, или изображения динамика с красным крестиком…

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

Бонус по поводу Пункта 9.

Как-то, когда я еще работала на работе, в смысле в офисе, мне приятель прислал по аське ссылку- я ее открыла. Тут зашла директор. Нет-нет, не протирайте руки, я сидела так, что монитор мой она видеть не могла, да и сайтик был не порно. Я обычно, на той работе, часто слушала музыку. Естественно, говоря скем-то, я ее выключала. Видя директрису, а поставила на паузу Winamp. Но на весь офис во всю громкость продолжало звучать «Привет, сегодня дождь и скверно…». Я в недоумении Winamp вообще закрыла. Потом проверила процессы. Музыка продолжала звучать. Закончилось тем, что я просто выключила колонки. Только потом до меня дошло – что музыка-то звучала с сайта, адресок на который мне скинул знакомый. Хорошо, я тогда работала 1 в кабинете да и отношение ко мне было хорошее. То есть директрисса просто посмеялась… Вот так то… не люблю, в общем, музыку на сайтах.