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

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

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

Сегодня, 13 ноября – Всемирный День Юзабилити. Он празднуется с 2005 года каждый второй четверг ноября. Не очень соответствующая правилам юзабилити традиция . Нет, чтоб назначить конкретную дату.

Понятие «юзабилити» (удобство) в данном контексте не означает лишь юзабилити сайтов. Речь и дет о так называемой «эргономичности» всего. Предметов быта, транспорта и т.д. Все должно идти по пути упрощения.

Так ли это хорошо? Не знаю. Но то. что это безусловно востребован мире, где все вечно спешат и нет времени ни на одно лишнее движение или мысль – ДА. Выигрывает тот, кто экономит своему клиенту движения и мысли. Принесет ли это все в итоге пользу мыслетельным навыкам клиента – другая история. Про общество потребления написан уже не один талмуд и целью данного поста не является их разбирать.

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

Сейчас мы видим немного обратный процесс – все так увлеклись этим вот «юзабилити», что любую дурость принимают за него. За новый маркетинговый ход. А ни один ход не должен выходить за рамки логической схемы. Если брать те же палочки – спичка + вата. Объединили – замечательно. Добавили по голубой ленточке на каждую палочку – лишнее совсем. Хотя, вроде, красиво. А мне не нужна Ваша красота. Я просто хочу поковыряться в ушах. а ленточка наоборот мешает и щекочет. Ну и так далее.

На самом деле экспертом юзабилити быть очень легко. Надо лишь пару раз сделать то. что Вы хотите, чтобы сделал Ваш клиент с Вашим товаром. Да, маленькая деталь – сделать это и ПОДУМАТЬ, Немного.
То же самое касается и юзабилити сайтов. Главное – решение задачи (я кажется стала цитировать Лебедева). А будет у вас сайт в цветочках или крокодильчиках -неважно. Неважно, только если это НЕ влияет на решение поставленной задачи. Сайт – не игра в квест. Пользователь идет за чем-то. дайте ему ЭТО причем прямо в руки. Без упаковок, без пойдите в те двери. потом три раза направо и т.д.

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

Всем желаю успеха в бизнесе и жизни.

Так поднимем же кужку пенного пива за Юзабилити и здоровье Якоба Нильсена.

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

Итоги

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

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

Ранне, мы уже рассказывали о том, что делаем аудиты сайтов – анализ дизайна, верстки, юзабилити и т.д.

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

• Оцениваются внутренние и внешние факторы продвижения сайта;
• даются рекомендации по семантическому ядру сайта;
• оценивается контент сайта (плотность ключевиков, верстка контента);
• анализируется позиции сайта по ключевым запросам (от 5 до 20 штук) в Яндексе, Рамблере, Google;
• оценивается общие показатели конкурентов, а также из позиции по данным запросам (по просьбе клиента).

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

Сейчас мне хотелось бы привести несколько наиболее распространенных ошибок (недочетов), которые встречаются мне в процессе составления аудита.

1. Полное пренебрежение к тегу Title и метатегам (keywords, description)

Это встречается не так редко. как можно было бы подумать. У 60% сайтов. которые а анализировала тег Title либо был прописан только на первой странице, либо состоял только из названия фирмы, либо был идентичным на всех страницах, либо все три фактора были вместе.

Про keywords и description вообще молчу. Да. мне могут возразить, что поисковые системы перестали обращать на эти метатеги особое внимание. НО. Именно снипет (description) выводится в описании к сайту в выдаче поисковой системы. Аkeywords? если не выведут в топ, то, по крайней мере, позволят структурировать контент, помогут «обогнать» ближайших конкурентов по поисковой выдаче.

Также наблюдается практически полное игнорирование правил написания тегов и мета тегов (оптимальная длина, количество повторений ключевиков – НЕ БОЛЬШЕ 3, стиль).

Если хотите узнать об этом более подробно – читайте статью:
Мета теги Description, Keywords, тег Title и их значение для оптимизации сайта.

А я продолжу про SEO-аудиты.

2. Семантическое ядро.

Очень мало заказчиков выводят 5-10 запросов, по которым хоятт продвинутся и узнать позиции. недавно мне пришлось анализировать сайт по 35 (!) запросам. Мне кажется, такое количество запросов, особенно для новичков – нецелесообразно. Это распыление, разбрасывание, я молчу о бюджете. Гораздо лучше будет выделить 5-10 (МАКСИМУМ) основных запросов – чередуя высокочастотные, средне частотные и низкочастотные, с разным уровнем конкуренции и сосредоточится на них. Достигнув опреденных успехов по этим запросам- расширяться.

Более подробно о классификации поисковых запросов читайте в моей статье:
Полная классификация типов поисковых запросов и виды поисковой выдачи

3. Структуризация контента.

Имеется в виду использование тегов <h1-h6>, <b>, <u>, прописывание тега <Alt> к картинкам, использование атрибута title в теге <а>.

Кроме этого, часто встречается непонимание важности показателя плотности ключевых слов. Как правило, он «крутится» возле отметки 3% (оптимальная – 5%), или зашкаливает за 10%, причем для абсолютно НЕ ключевых слов, типа «проекты», «2007″, «предлагаем» и т.д.

Вот такие вот, рабочие будни аудитора

Сегодня рассмотрим построение главного навигационного меню сайта агенства недвижимости.

1. Пользователь сайта может эффективно воспринимать не более 7 разделов главного меню. В данный момент на сайте расположено меню, содержащее 20 разделов сайта. Это очень сильно затрудняет работу с навигацией.

Необходимо сократить основное меню до 5-7 основных разделов. Дополнительную информацию можно выводить при помощи выпадающего меню.

2. В главном меню не никак не выделяется текущий раздел сайта. Посетителю тяжело идентифицировать свое местоположение на сайте в конкретный момент времени.

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

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

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. все скриншоты и примеры взяты с реальных действующих сайтов, адреса которых не разглашаются.

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