10 распространенных ошибок, которые совершают веб-разработчики


Содержание материала:

10+ ошибок веб-разработчиков с примерами

Ошибки делают все — а расплачивается кто-то один.

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

В итоге: мало того, что сайт сдается с опозданием, так еще и продвижение затягивается. Всё из-за каких-то постоянных доработок.

Какой там выигрыш в конкурентной борьбе! — нужно хотя бы отыграть потраченные деньги.

А ведь этого можно избежать.

Эта презентация вооружит вас. В ней собрано 10 наиболее частых и наиболее болезненных ошибок разработчиков (а также «факультативные» ошибки, которых также стоит опасаться). Вы без труда найдете их и сможете исправить.

Как пользоваться презентацией:

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

Смотреть презентацию и не платите за ошибки!

Комментарии к “ 10+ ошибок веб-разработчиков с примерами ”

Женя, приложи, пожалуйста, ссылку на что-нибудь полноэкранное

можешь посоветовать сервис?

Думаю имеет смысл начать с поиска плагина для вордпресса, типа http://wordpress.org/extend/plugins/groupdocs-viewer/ (я не ставил, но описание вроде про то)

1. По какому принципу поисковая машина выбирает текст для сниппета? Как ей помочь «взять» нужный кусок текста в сниппет?

2. Какой из url лучше применять?
http://www.site.ru/kolbasa или http://www.site.ru/колбаса (который будет по факту кодом «%5%7%6%7…»)

Не важно какой урл. Хоть /index23.php. Название урла в результатах поиска возьмется из H1 и ссылки навигации, если структуру составить правильно. Для сео это уже не очень актуально, но, для удобства понимания пользователем куда он попадет, можно называть /kolbasa.

Поисковая машина выберет сниппет по принципу первого упоминания слова или фразы в нужном пассаже. Заголовок H1 никогда не будет показанным первым, так что в первом абзаце страницы, где содержится нужное слово нужно написать максимально полезный для пользователя текст, который и будет показываться в результатах поиска. Для главной страницы сейчас зачастую выводится текст из мета-тега description или из описания в Я.Каталоге.

10 самых распространенных ошибок веб-дизайна

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

1. Непродуманный макет

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

Чтобы основные ошибки веб-дизайна не попали на ваш следующий макет:

    Всегда используйте сетку (gr >

2. Неудобная навигация

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

Помните о следующем:

  1. Пользователь ожидает, что горизонтальная навигация будет располагаться вверху, а вертикальная — слева.
  2. Если разделов немного, не используйте выпадающие меню.
  3. Больше всего внимания привлекают пункты, которые идут вначале и в конце. Поэтому размещайте все самое важное вначале, а последним пунктом пусть будут данные для связи.

3. Непоследовательность в дизайне страниц

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

Чтобы дизайн был консистентным:

  1. Используйте на всех страницах одну и ту же цветовую схему.
  2. Следите за тем, чтобы расстояния по вертикали и горизонтали между элементами макета везде были одинаковыми.
  3. Заголовки на разных страницах должны быть одинакового размера.
  4. Не меняйте расположение навигации на разных страницах.
  5. Придерживайтесь единого оформления ссылок.
  6. Используйте иконки, выполненные в одном стиле.
  7. Обеспечьте единство оформления форм.

4. Неудачная цветовая схема

Цвета, которые не подходят под тематику или резонируют с ней, повлияют на восприятие сайта. Используя сливающиеся цвета, вы рискуете потерять посетителя в первые же секунды:

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

  1. Имеются ли у компании корпоративные цвета. Если да, то их следует использовать при создании дизайна для сайта.
  2. Какая у сайта цель. Теория цвета говорит, что красный — это цвет страсти и воодушевления, он привлекает внимание и побуждает к действию, в то время как синий — цвет спокойствия и уверенности, он говорит о надежности и вызывает чувство доверия к бренду. Если вы свободны в выборе цветов, уделите время тому, чтобы подобрать те, которые максимально соответствуют цели сайта.
  3. Существуют ли изображения и фотографии, которые требуется использовать. В таком случае вам понадобиться использовать цвета, которые будут хорошо с ними сочетаться.
  4. Используйте 3 разных цвета. При этом рекомендуемое соотношение составляет 60%, 30% и 10%. Помните, что чем больше цветов вы используете, тем тяжелее будет создать гармоничную и сбалансированную страницу.

5. Дизайн выглядит плохо на некоторых разрешениях экрана

Этот недостаток также входит в топ-10 ошибок веб-дизайна и может проявляться по-разному: например, у пользователей с меньшим разрешением экрана появляется горизонтальная прокрутка.

Чтобы дизайн выглядел хорошо на большинстве разрешений:

  1. Самые важные блоки должны находиться верху страницы, чтобы пользователям не приходилось много скроллить.
  2. Проверьте, удобно ли читать текст в разных колонках, учитывая их ширину.
  3. Убедитесь, что все ли элементы остаются на нужных местах и ничего не съезжает.

Проверьте, верно ли это для разных разрешений экрана в диапазоне от 800 x 600 до 1280 x 1024. Кроме того, вы можете предложить клиенту создать адаптивный сайт, чтобы эти ошибки веб-дизайна больше не беспокоили клиентов, которые заходят на сайт.

6. Отсутствие свободного пространства

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

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

  1. Улучшить читаемость и общее восприятие текста.
  2. Привлечь внимание к тексту, просто окружив его пустым пространством.
  3. Создать ощущение элегантности и открытости.

7. Слишком сложные формы регистрации

Дни, когда пользователям приходилось заполнять множество полей и по несколько раз вводить данные в поля с валидацией, давно прошли:

Делайте формы максимально простыми — дополнительные данные всегда можно запросить позже, не раздражая пользователя:

8. Неразумное использование изображений

Слишком большое количество изображений может пагубно сказаться на впечатлении от сайта, однако это не повод от них отказываться:

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

  1. У изображения должна быть цель: подкрепить идеи из текста, вызвать эмоции, объяснить принцип использования продукта и т. д.
  2. Используйте изображения с реальными людьми, а не стоковые фотографии.
  3. Оптимизируйте размер изображений, чтобы они загружались не слишком долго.

9. Незаметные контактные данные

Это особенно критично для магазинов — контактная информация должна быть доступна на каждой странице сайта и быть достаточно заметной:

10. Отсутствие поиска

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

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

Записки Web-разработчика

Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.

Зачем проверять код?

Если сайт выглядит отлично в браузере, то зачем проверять код? Типичный вопрос, который задается перед проверкой кода. Но ведь сайт не ограничивается только тем, что видно пользователю. Страницы HTML предназначены для представления данных, а не графических эффектов. Данные должны быть доступными для чтения для всего огромного сообщества людей, которое использует интернет. И читатели могут использовать совсем другие технологии для получения информации, представленной на вашем сайте — например, они могут использовать программу для воспроизведения данных голосом и просто слушать, что написано на вашей странице.

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

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

Общие ошибки

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

Не указан тип документа

Самая плохая ошибка — не использовать Doctype! Отсутствие тега Doctype означает, что браузер будет «догадываться», какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы.

Не закрыт элемент

» src=»https://ruseller.com/lessons/les812/img_812_3.png» alt=»Не закрыт элемент

Если вы открыли тег где-то в вашем документе HTML, его нужно закрыть в соответствующем месте. Забывчивость в данном вопросе не только приводит к ошибкам при проверке кода, но и может вызвать серьезные проблемы с шаблоном. На рисунке представлена ситуация, когда автор забыл закрыть тег

Опускается символ / в самозакрывающихся элементах

Большинство элементов HTML имеет отдельные закрывающие теги, например:

Не произведена конвертация специальных символов

Амперсанд, а также двойные кавычки, которые копируются из Word, являются самыми распространенными причинами данной ошибки. Нужно всегда проверять код на наличие таких символов и конвертировать & в соответствующий код HTML & , Также надо поступать и с другими специальными символами.

Неконвертированные символы в URL

В соответствии с предыдущим пунктом, специальные символы, особенно амперсанд, должны быть кодированы в строках URL. Ссылки на сайты, построенные с использованием PHP, часто содержат переменные с использованием символа & , их нужно писать с использованием кода HTML & .

Блочные элементы внутри строчных

Одно из основных правил HTML заключается в том, что блочные элементы НИКОГДА не должны находиться внутри строчных элементов.

Популярный пример ошибки — использование ссылки в заголовке:

bananas

— блочный элемент, поэтому он должен оборачиваться вокруг ссылки (строчный элемент):

bananas

Отсутствует атрибут alt у изображения

Каждое изображение в документе HTML должно иметь атрибут alt с описанием содержания картинки. Даже если картинка служит для дизайнерских целей, она должна иметь атрибут alt , но в данном случае его надо оставить пустым, например, alt=»» . В другом случае нужно представить описание содержание изображения.

Использование атрибутов подобных width и height

Вероятно, такое положение является обратной стороной широкого использования редакторов WYSIWYG, которые имеют тенденцию вставлять излишний код HTML. Атрибуты width и height определяются в переходных стандартах типах документа, но если вы задаетесь целью четко следовать стандартам, то наверняка знаете, что все атрибуты, отвечающие за представление элементов на страницах, должны быть перенесены в таблицу стилей CSS, для разделения содержания и дизайна.

Имя класса или >

Имя класса, ID или имя атрибута не может начинаться с цифры. Они могут включать цифры, но не в начале слова.

А какова ситуация с проверкой CSS кода?

В отличие от HTML, CSS используется для визуального представления страницы. Таким образом, вопрос “Если страница выглядит хорошо, то зачем проверять код?” в данном случае звучит более убедительно. Неправильный код CSS не оказывает такого влияния на веб страницы, как неправильный код HTML. Однако проверку стоит проводить на предмет обнаружения опечаток и ошибок в коде. Если вы используете новые свойства CSS3, они сделают ваш документ не прошедшим проверку, так как еще не включены в спецификацию, но если вы уверенны, что все правильно, то на такие ошибки можно не обращать внимание.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: line25.com/articles/10-common-validation-errors-and-how-to-fix-them


Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Основные ошибки в дизайне сайтов

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

Ошибка 1. Устаревшие эффекты

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

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

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

Решение проблемы

Сделать редизайн сайта у профессионалов. О том, как сделать редизайн и не потерять клиентов мы писали в этой статье.

Ошибка 2. Отсутствие адаптивности

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

А вот его мобильная версия:

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

Решение проблемы

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

Ошибка 3. Некачественный контент

Что еще отталкивает пользователей и понижает уровень доверия к сайту? Как правило, присутствие на сайте некачественного контента значительно уменьшает конверсию. Что подразумевается под «некачественным» контентом:

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

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

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

Решение проблемы

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

Ошибка 4. Неудачная цветовая гамма

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

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

Решение проблемы

Правильно подобрать цветовую гамму, не использовать больше 2-3 цветов. Так можно создать стильное решение, расставить нужные акценты (как правило, кнопки и формы делают яркими и более заметными для привлечения внимания). Для проверки сочетания цветов между собой можно использовать различные цветовые круги, например, круг Иттена.

Ошибка 5. Нет акцентов

Иногда сайт выглядит не как пестрая ткань с различными яркими цветами, а однотонным полотном, где взгляду не за что зацепиться. Как в этом примере:

Топ-пост этого месяца:  Обратный порядок элементов с помощью CSS Flexbox

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

Решение проблемы

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

Ошибка 6. Нет четкой композиции

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

Решение проблемы

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

Ошибка 7. Отсутствие хорошей навигации

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

Решение проблемы

Определить насколько навигация отвечает требованиям пользователя можно по следующим параметрам:

  1. Посмотреть структуру сайта. Логично ли расположена продукция, присутствуют ли лишние разделы, которые можно объединить с другими.
  2. Продумать расположение основных блоков на странице. Легко ли пользователю отличать одно от другого, заметны ли основные предложения.
  3. Продумать расположение целевых действий на сайте. Проверить, привлекают ли они внимание пользователей, посмотреть, как можно улучшить.
  4. Проверить наличие основных элементов навигации: хорошо сформированного меню, подвала сайта, поля поиска, иконок для основных действий (вход в личный кабинет, избранное и прочее).

Более подробно о навигации на сайте можно узнать в этой статье.

Ошибка 8. Креативность, а не юзабилити

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

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

Решение проблемы

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

Ошибка 9. Много анимации

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

Решение проблемы

Лучше ограничиться несколькими динамическими эффектами, которые будут выглядеть как дополнительный инструмент привлечения внимания.

Ошибка 10. Нет связи с фирменным стилем

Фирменный стиль должен прослеживаться не только в дизайне футболок и буклетов. Сайт — визитная карточка компании в интернете и пользователь должен легко идентифицировать бренд. Если же фирменный стиль в оффлайне отличается от представления компании в сети, у пользователя снижается уровень доверия к компании, бренд не будет узнаваем в интернете. Например, компания имеет фирменные цвета: черный и желтый, однако, на сайте не используется ни цветовая гамма, ни другие элементы айдентики:

Решение проблемы

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

Ошибка 11. Неудачная типографика

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

Решение проблемы

Уделить внимание типографике на сайте. Использовать 2-3 шрифта на сайте или одно семейство с различными начертаниями. Настроить интервалы: кернинг и интерлиньяж. Подобрать цвет текста под цветовую гамму сайта. Больше об использовании типографике на сайте можно прочитать в этой статье.

Посетитель сайта формирует свое представление о компании в первые же секунды. Первое впечатление значительно влияет на его дальнейшие действия: уйдет ли он с сайта к конкурентам или продолжит искать нужный товар. Добиться положительного впечатления в значительной степени можно с помощью дизайна, так как большинство пользователей — визуалы. По результатам исследования Instant shift 94% клиентов не доверяют компании, если сталкиваются с неудачным дизайном.

Чтобы этого не случилось и сайт отвечал всем требованиям пользователей, предпринимателям следует обращаться к профессиональным дизайнерам, которые не допускают вышеперечисленные ошибки. Студия дизайна IDBI занимается разработкой дизайна сайтов и помогает предпринимателям увеличивать продажи. Мы не совершаем ошибок, стараемся следить за трендами, учитываем юзабилити сайта и в то же время предлагаем креативные решения. Больше работ можно увидеть в разделе «Портфолио».

ТОП-10 ошибок начинающих верстальщиков

Друзья, здесь, опять же, неполный список всех ошибок. Но тех ошибок, которые я лично сам видел, которые даже когда-то совершал. Поехали!

    Верстка сайта таблицами.Нет, ну ведь уже 2020 год..таблицами давным-давно не принято верстать. Можно еще сделать какую-то часть таблицы (особенно если в макете это и есть таблица), но весь сайт — совсем неверно.

используется на странице ОДИН раз.
Очень часто вижу, как тег

используется 2-3 раза на странице. Но это семантически неверно. Для этого и придумали теги h1,h2,h3,h4 — чтоб использовать их иерархически.
Нельзя называть классы и идентификаторы, начиная с цифр, или же называть их русскими буквами.
Называть классы можно только латиницей, и только по смыслу! Ни в коем случае нельзя писать >Это был небольшой, но важный список ошибок начинающего верстальщика. Никогда не допускайте таких ошибок, ибо это весьма критично.

Спасибо всем за внимание, пишите свое мнение об ошибках! До скорых встреч!

Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/

Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика 🙂

9 типичных SEO-ошибок, которые до сих пор совершают разработчики сайтов — часть 3

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

Итог — целый букет простых, но досадных ляпов. Уберечься от них легко, а вот их исправление стоит дорого: это месяцы потерянного SEO-трафика, повторные переделки сайта и т.п. Вот 9 главных ошибок такого рода.

1. Контент подгружается динамически

Почему это плохо

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

Решение

Лучше вообще не делать динамического контента, а решать задачу как-то иначе. Если вам остро необходима динамика, нужно настроить схему индексации и кэширования AJAX-контента: делаются статические HTML-снимки, которые отдаются с сервера при видоизменении адреса страниц. Подробности — в инструкции Яндекса.

2. Красивые страницы без контента

Почему это плохо

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

Решение

Все участники процесса — и заказчик, и разработчики — должны понимать, что контент надо готовить как можно раньше, а не откладывать на вырост. Такой подход позволит вам получить удобный сайт быстрее, а SEO-трафик вы приобретете как приятный бонус. При этом не надо писать тексты-простыни и думать о количестве вхождений — алгоритмы давно ушли вперед, теперь достаточно небольшого текста с добавками фото, видео и т.п. Желательно также использовать заголовки и списки — так вы повысите читаемость материала, а вместе с этим улучшатся и поведенческие метрики вашей страницы (снизятся отказы, повысится до разумного предела время на странице и т.п.)

3. Мобильная версия потом

Почему это плохо

См. раздел «Адаптив/мобайл». Мобильный трафик растет, десктопный стоит на месте или падает. Кроме того, мобильная версия — один из важных факторов ранжирования, поэтому и с точки зрения SEO упускать этот момент нельзя.

Решение

Пора менять приоритеты и либо начинать с версии под малые экраны, либо включать адаптивную версию в первый же вариант сайта. Учитывайте, что для того, чтобы получить SEO-бонус за мобильную версию, ее нужно дополнительно настраивать — подробности в инструкции Google.

4. Закроем сайт, откроем новый на новом домене

Почему это плохо

Непонятно почему, но эта идея приходит в голову каждому второму владельцу сайта — старый сайт устарел-надоел, давайте сделаем современный на новом домене. Это опасный бред в духе «новых детей нарожаем или этих отмоем». Бросив старый домен, вы потеряете:

  • Драгоценную историю домена в теме. Статические факторы ранжирования, в том числе возраст домена — это роскошь, от которой нельзя отказываться. Даже если домен под санкциями, проще его вывести, чем двигать с нуля.
  • Прямой трафик с визиток, закладок, старых email-ов и бог еще знает откуда, т.е. вы сделаете старым клиентам неудобно. Не надо так обращаться со старыми клиентами.

Чаще всего «брошенный» сайт еще и не закрывают от индексации, в результате чего он начинает конкурировать в поиске с новым и часто побеждает — просто за счет возраста домена. Вместо обновления вы получите кашу из двух доменов. Старый потеряет позиции, новый не получит, а по бренд-запросам будет выше ранжироваться старый сайт.

Решение


Подумайте десять раз, надо ли менять домен. Смена ради смены — это точно ерунда. Но, предположим, это неизбежно — у вас ребрендинг и без смены домена не обойтись. В этом случае вам нужно выполнить аккуратный перенос:

5. Смена структуры без учета старых результатов

Почему это плохо

Еще одна беда — бездумная смена структуры, которая приводит к потере результатов SEO. Обычно это приходит вместе со сменой CMS. Разработчики из лучших побуждений предлагают, скажем, сменить самописную поделку на универсальное решение вроде Битрикса. Естественно, логика URL у Битрикса отличается от старой CMS. В результате переезда все страницы вроде бы на месте, но по новым адресам. Если сайт обновлялся более радикально — у вас вообще новые страницы на новых адресах.

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

Решение

Структуру можно и нужно менять — смотрите раздел «Семантическое ядро». Но делать это следует аккуратно. Вы должны отчетливо понимать, что смена структуры делается для увеличения SEO-охвата, а не просто ради новой CMS. Обязательно настройте 301 редирект со старых страниц на новые.

6. Не закрывается от индексации тестовая версия

Почему это плохо

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

Решение

Нужно закрыть отладочный домен от индексации в файле robots.txt. Там должно быть всего две строчки:

Если вы отлаживаете новый сайт на основном домене, не забудьте открыть его для индексации после запуска. «Забыли открыть роботс» — первый ответ на вопрос, почему новый сайт работает, но не индексируется.

7. Не устранены типичные проблемы Битрикса

Почему это плохо

Битрикс не случайно стал ведущей CMS на российском рынке. Он гибок, для него есть масса шаблонов и готовых решений. Он хорошо интегрируется с 1С. Однако, как и у любого старого универсального продукта, в коде и логике Битрикса скопилась масса костылей. Эти заплатки мешают жить как разработчикам, так и seoшникам. Проблемы Битрикса с точки зрения технического специалиста хорошо описаны тут. А SEO-отрасль должна быть благодарна Битриксу, баги которого обеспечили искусственно созданной работой не одну сотню человек

Решение

Битрикс из коробки плохо подходит и для SEO. Нужно как можно быстрее устранить несколько главных багов, связанных с дублированием контента:

  • Аккуратно настроить SEO-модуль, чтобы можно было задавать уникальные мета-данные и делать шаблонизацию. По умолчанию все метаданные внутри разделов дублируются.
  • В интернет-магазинах нужно устранить еще одну ошибку дублирования: на страницах пагинации разделов текстовые блоки с описаниями по умолчанию дублируются.
  • Настроить ответы сервера, так как из коробки добавление любого параметра в URL отдает ответ «200 ОК», из-за чего поисковый робот может проиндексировать большое количество дублированных страниц.

В зависимости от версии Битрикса и/или использованного вами шаблона может потребоваться исправление и других SEO-ошибок, это только основные.

8. Ошибки в верстке: использование заголовков

Почему это плохо

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

Решение

Решение: заголовки h1-h6 можно использовать только в контентной части страниц или при обозначении заголовков типовых элементов (отзывов, комментариев, рекомендованных товаров и т.д.)

9. Ошибка: сайт после выкатки доступен по нескольким адресам

Почему это плохо

Если не подумать об этом специально, после публикации сайта вы получите набор конкурирующих между собой копий (зеркал). Версии сайта — с www и без, по протоколу http и https, site.ru и site.nichost.ru — лежат на одном хостинге, но будут индексироваться независимо. Если вы купили несколько доменов для одного сайт, к примеру, ru и .рф, умножьте ад дублирования версий на количество доменных зон. Конечно, проиндексированная таким образом каша из недосайтов получит плохие позиции.

Решение

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

Удачи при разработке новых сайтов! Если вы еще не видели первые две части этого материала, посмотрите на них:

10 самых распространенных ошибок в интернет-маркетинге, которые вам не следует повторять

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

Посмотрим правде в глаза – интернет-реклама является, возможно, самым высокоэффективным способом донести ваше предложение для узкотаргетированной аудитории в строго определенное время, причем для начала такой кампании вам не потребуется много знаний и доступа к секретным «ноу-хау».

Самая общая формула интернет-маркетинга звучит примерно так:

Немного денег и несколько правильных ключевых слов – и вы вне конкуренции!

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

  • заметного увеличения окупаемости инвестиций (ROI, Return on Investment);
  • прироста конверсии без расширения рекламного бюджета.

Как вы увидите из приведенного ниже материала, рекламная кампания в Интернете не представляет собой ничего сверхъестественно сложного – достаточно предпринять несколько мер:

  • использовать различные рекламные каналы для продвижения вашего объявления;
  • направлять полученный трафик на специально созданную целевую страницу;
  • постоянно тестировать варианты целевых страниц для их оптимизации;
  • отслеживать все действия пользователей;
  • не пускать рекламную кампанию «на самотек», внимательно отслеживая все происходящие в ее ходе изменения.

Итак, вот 10 типичных ошибок начинающих веб-маркетологов.

1. Ваша рекламная кампания основана только на одном источнике трафика.

Проще всего начать с размещения ваших коммерческих предложений в системах AdWords и Yandex, в сетях Facebook и Vkontakte и в других автоматизированных рекламных сетях, работающих по схемам PPC (плата за клик) и CPA (плата за действие).

Благодаря хорошо сконструированной «системе самообслуживания», применяющейся на ресурсах AdWords, Yandex, Vkontakte и Facebook, вы без особого труда сумеете самостоятельно настроить вашу рекламную кампанию и «нацеливать» свои объявления на выдачу в поиске или в контекстной сети по ключевым словам, a в социальных сетях – на целевую группу с общими интересами и схожими демографическими показателями.

Если ваш рекламный бюджет начинается скажем, со 100 долларов в месяц – следовательно, размещение объявлений в AdWords, Yandex или Facebook представляется самым разумным решением.
Для того, чтобы ваших 100 долларов хватило на максимальный отрезок времени, мы напоминаем вам небольшую хитрость:

Используйте ключевые слова только [точного] и «фразового» соответствий, а в социальных сетях «нацеливайтесь» на узкотаргетированные сегменты пользователей.

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

Как известно, в социальных сетях стоимость клика/показа (CPC/CPM) на порядок ниже, чем в поисковых машинах.

2. Вы никогда не тестируете и не оптимизируете вашу рекламную кампанию по совокупности трех факторов: таргетинг, креатив и цена.

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

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

Эта мысль в равной степени и относится к агентствам контекстной рекламы, которые любят оперировать таким понятием как CTR (кликабельность) и оценивать эффективность работы по количеству трафика и цене клика. Но ведь самое главное для бизнеса это — продажи.

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

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

Тонко настроив таргетирование, вы смените целевую аудиторию, которой будет показано ваше объявление/баннер; изменив «творческую часть» вашего объявления (контент и дизайн), вы сможете усилить воздействие на вашу «прицельную группу» (target group) потенциальных клиентов; манипулируя с ценой (BID, англ. «предлагаемая цена»), вы выбираете, на каком канале интернет-рекламы в течение какого времени будет показано ваше объявление. Проверьте все эти три элемента в совокупности, чтобы найти по самой низкой цене нужную вам аудиторию, способную максимально заинтересоваться вашим объявлением.

  • таргетирование – действуйте по принципу «чем уже, тем лучше»: никаких общих ключевых слов, никаких общих демографических показателей, всегда строго определенный сегмент целевой аудитории;
  • креатив – примените сплит-тестирование рекламных объявлений или баннеров, чтобы добиться точного вхождения заголовков по схеме: ключевое слово – объявление – целевая страница;
  • цена – всегда начинайте с большей ставки (BID) за ключевое слово, чем ваши конкуренты, при увеличении CTR постепенно снижайте сначала предлагаемую цену (BID), а уже затем и рекламный бюджет.

3. Вы не отслеживаете ROI вашей кампании.

К сожалению, многие владельцы бизнеса при анализе эффективности рекламной кампании не используют столь важный критерий как окупаемость инвестиций (ROI, Return on Investment).

Вычисление ROI – это первое, что вы должны сделать, оценивая эффективность выбранной вами стратегии веб-маркетинга.

Предположим, вы оптимизируете PPC- рекламу, и вам удается повысить ее кликабельность (CTR). На первый взгляд, это свидетельствует о переменах к лучшему. Однако, может случиться так, что повышение CTR не приводит к конверсии на целевой странице/сайте, «все клики потрачены впустую», а если нет конверсии – нет и продаж.

Топ-пост этого месяца:  Отложенная загрузка изображений. 5 техник ленивой загрузки изображений для повышения

Точную объективную картину происходящего можно узнать, вычислив ROI как соотношение всей прибыли, полученной за период проведения кампании к величине затрат на собственно кампанию.

4. Ваш дизайн собран «на коленке».

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

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

Для пользователей платформы LPgenerator дело обстоит проще – в нашей галерее представлены многочисленные шаблоны, предназначенные для создания качественных целевых веб-страниц, фан-страниц Facebook и мобильных целевых страниц.

Желаете получить уникальную и качественную landing page? Отлично, вы можете заказать дизайн целевых страниц у нас.

5. Вы не масштабируете успешные рекламные кампании.

Вот еще два довода, чтобы протестировать и оптимизировать проводимую вами кампанию.

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

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

И не стоит останавливаться на достигнутом: предположим, ваша кампания после оптимизации достигала желаемого вами уровня ROI, например, сейчас коэффициент окупаемости равен 1,25.

Вы тратите 100 долларов в месяц, что приносит вам 125 долларов, и вы считаете, что для вас это – хорошая рентабельность. Однако чистая прибыль составляет всего 25 долларов. Почему бы вам не попробовать «скормить» вашей кампании 500 долларов в месяц? При существующей рентабельности вы сможете получить 625 долларов в месяц, что составит 125 долларов чистой прибыли.

Попробуйте увеличить свои инвестиции в эффективную рекламную кампанию – скорее всего, это приведет к пропорциональному увеличению доходов.

6. Вы не используете целевую страницу.

Худшее, что вы можете сделать с пользователем, заинтересовавшимся вашим объявлением – отправить его на главную страницу вашего сайта. Там ваш покупатель, скорее всего, «потеряется» среди элементов навигации и ссылок на другие страницы сайта, и уйдет прочь, не совершив действия, предложенного рекламным объявлением.

Мы не раз упоминали о том, что «целевые страницы умеют делать только одно дело, но делают его наилучшим образом».

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

Если вы почувствовали необходимость создать одну или несколько целевых страниц, знайте – вы уже пришли по нужному адресу: lpgenerator.ru. 😉

7. Ваши целевые страницы недостаточно хороши (и вы их никогда не оптимизировали).

Построение и оптимизация целевых страниц – ничуть не менее важная задача, чем оптимизация рекламного объявления.

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

Мы надеемся, что теперь вам понятна необходимость оптимизации целевой страницы, которая на практике сводится к проведению А/Б-тестирования. Механизм такого теста мы неоднократно описывали на страницах нашего блога.

Еще одно (не очень хорошо известное широкой публике) преимущество, связанное с применением целевых страниц – увеличение вашего показателя качества (Quality Score) AdWords. Напоминаем, что этот критерий оценки ваших страниц является одним из важнейших факторов, использующихся AdWords при принятии решения о том, следует ли показывать ваше объявление (и сколько это будет стоить).

Оптимизации конверсии в нашем блоге посвящен отдельный раздел с массой интересных и полезных материалов.

8. Вы не покупаете рекламу напрямую.

При построении стратегии продвижения вашего продукта или услуги, вы, конечно, сразу же думаете о таких платформах, как Google AdWords, Yandex Direct, Vkontakte, Begun или Facebook Ads, отдавая предпочтение наиболее популярным рекламным сетям.

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

9. Вы не используете e-mail-маркетинг.

Если вы еще не используете e-mail-маркетинг, знайте – вы упускаете отличный способ привлечь личное внимание каждого из потенциальных клиентов и совершить еще больше продаж.

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

Рассылки – это, пожалуй, самый высококонвертируемый источник трафика. Однако e-mail-маркетинг – это целая наука. Если вы не знаете, как сделать рассылки эффективным орудием продаж, то мы советуем вам обратиться к профессионалам, поверьте – отдача будет фантастическая.

10. Вы еще не пробовали применить ремаркетинг!

Новая прогрессивная технология ремаркетинга, которой мы недавно посвятили большую подробную статью «Ремаркетинг – революционная PPC-стратегия», буквально в одночасье покорила сердца многих рекламодателей. Причин тому несколько: не требуются большие расходы на кампанию, легкие настройки, высочайшая эффективность и конверсия.


Вкратце напомним, как работает ремаркетинг. Пользователь посещает вашу целевую страницу/сайт, на которой предварительно настроен механизм запуска ремаркетинговой кампании. После посещения на компьютере посетителя сохраняется безобидный cookie-файл («кука»), позволяющий роботам контекстно-медийной сети Google определять пользователя как «человека, который посетил вашу целевую страницу, по ссылке с вашего объявления, рекламирующего некий конкретный товар».

Теперь при посещении пользователем сайтов в контекстно-медийной сети Google, услужливый робот будет демонстрировать ему ваши рекламные объявления. Вам остается только ждать повторного визита вашего посетителя.

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

Вместо заключения.

Ищите свои пути в интернет-маркетинге, но не повторяйте чужих ошибок.
Покажите покупателям, почему ваш сервис/продукт особенный!

И напоследок, три простых совета, которые помогут вам не потратить впустую ваш рекламный бюджет:

  • Тестируйте, оптимизируйте, а затем тестируйте снова. Вы всегда должны знать, что вся ваша «рекламная механика» настроена наилучшими образом.
  • Не забудьте попробовать различные каналы продвижения: Facebook, AdWords, Yandex, Vkontakte, e-mail-маркетинг.
  • Всегда будьте в курсе, каков ваш коэффициент возврата инвестиций (ROI) – это самый беспристрастный и точный показатель успеха/неуспеха вашей рекламной кампании.

10 распространенных ошибок UX копирайтинга

Люди читают в Интернете, несмотря на популярную догму. Представьте себе цифровой продукт без слов – все будут спрашивать: «Что делает эта кнопка?» и «Как, черт возьми, я найду то, что ищу?»

Пример: Facebook без слов

Вы можете случайно купить 10 000 пар старых носков или удалить всю базу данных критически важной информации о здоровье!

Правда, зачастую роль UX копирайтера – помочь пользователям читать как можно меньше. Хуже отсутствия слов, только плохо написанный UX текст. Он вводит в заблуждение и создает для пользователя абсурдные трудности.

Хороший микротекст понятен, лаконичен и полезен. Важно быть экономным, но вам все еще нужны слова.

Еще не так давно не существовало такой специальности, как UX копирайтер, вместо этого инженеры сами писали текст в последний момент.

Так еще бывает во многих начинающих стартапах, которым не хватает ресурсов на команду по разработке стратегии контента. Я уверен, что где-то есть программист с навыками и желанием создавать как Javascript, так и микротекст, но я еще не встречал такого.

В результате многие продуктовые и дизайнерские команды наследуют массу хорошо продуманного (но ужасно написанного) UX текста. Ошибки, влияющие на бизнес, сохраняются на протяжении многих лет итераций продукта. Почему? Потому что требуется много времени для пересмотра текста, а в сочетании с желанием провести A / B тест каждого изменения получаем торможение прогресса, когда компании вырастут настолько, чтобы сделать работу правильно.

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

1. Кнопки, которые воруют ваши деньги

Как правило, для совершения покупки или оформления платной подписки требуется несколько этапов. Большинство приложений и веб-сайтов используют одну и ту же кнопку призыва к действию на каждом этапе. Например, «Продолжить», а не «Завершить покупку». Это может привести к увеличению требований возврата денежных средств, поскольку пользователи не понимают, что слово «Продолжить» или «Далее» означает, что с их карты будут списаны средства, как только они нажмут на кнопку.

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

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

2. Попытка пристыдить пользователя

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

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

3. Разрыв строк

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

Если по какой-то причине вы не можете применить гибкие стили, соблюдайте лимит символов, которые будут помещаться на одной строке независимо от экрана. Знаю, это раздражает. Но это работа UX копирайтера! Лучше отредактировать и упростить текст, чем рисковать потерять его привлекательность.

4. Агрессивные заголовки с % скидок

Так много цифр!! Это скидка 50%, 30%, 20% или 10 долларов? Никто не знает.

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

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

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

5. Жаргон, жаргон, жаргон

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

Среднестатистический пользователь не собирается узнавать, что это значит, поэтому это сообщение ему не поможет. Плюс — это сообщение не говорит, как решить эту проблему. Результат? Расстройство !!

UX копирайтинг должен быть настолько простым, чтобы его мог понять и ребенок. Никаких технических терминов.

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

6. В поисках №1

Даже очень хорошие продукты могут пострадать от плохого UX текста. Называть что-то «№ 1» не помогает продукту и не является оригинальным. Где голос бренда? Мы все № 1 в глазах наших мам – лучше передать конкретную ценность пользователю, чем полагаться на общие маркетинговые заголовки.

Естественно, что существует здоровое напряжение между маркетингом и целями продукта, когда дело доходит до UX копирайтинга. Структура стимулов для каждой команды иногда разнится, потому что успех измеряется разными метриками.

Чтобы получить очень упрощенное представление, это типы точек данных, которым каждый тип команды имеет тенденцию уделять первоочередное внимание:

  • Маркетинговые метрики = конверсия
  • Метрики продукта = взаимодействие

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

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

7. Отсутствие контекста

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

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

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

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

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

8. Общий текст

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

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

Вот некоторые рекомендации по использованию индивидуальности бренда в микротексте от Билла Бёрда из Smashing Magazine.

Избегайте индивидуальности бренда в тексте:

  • Навигации,
  • Форм и ярлыков полей,
  • инструкций,
  • критерия выбора (выпадающие меню, радио-кнопки), кнопок.

Рассмотрите возможность добавления индивидуальности вашего бренда в:

  • сообщения подтверждения,
  • предупреждения (значки, восклицательные знаки),
  • страницы 404,
  • ошибки сервера,
  • сообщения об ошибках.

9. Слишком странный текст

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

Ссылка на поп-культуру не имеет ничего общего с их брендом или продуктом. Это немного раздражает. Мы не встречались с Turbo, у нас никогда не будет романтических отношений с налоговым программным обеспечением, а сравнение с Бранджелиной – просто бред.

Этот текст пересек черту, он слишком странный.

10. Непонятное сообщение об ошибке

Пожалуйста, скажите мне, в чем проблема! Я не могу исправить ошибку, если не знаю, что это за ошибка. Что-то пошло не так, может означать буквально все. Я мог надеть свою рубашку наизнанку. Кто знает!

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

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

Итог…

Любое взаимодействие с пользователем – это возможность.

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

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

Это нормально совершать ошибки – вам нужно пробовать сумасшедшие идеи, чтобы сделать прорыв. Если вы будете ставить на первое место потребности пользователей, вы добьетесь успеха.

Теперь иди и напиши восхитительный текст!

Real Big Words создает контент, который работает. Смотрите больше в Instagram или подписывайтесь на их блог The Saurus.

Автор статьи Melissa Mapes – основатель Real Big Words

Хотите больше подобных статей? Ставьте лайк!

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

5 самых распространенных ошибок в айдентике

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

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

Наш совет таков: инвестируйте в айдентику вашего бренда. Но сначала сосредоточимся на том, чего делать нельзя.

5 самых распространенных ошибок визуального брендинга

Создание надежного визуального бренда — важный шаг в развитии вашего бизнеса, каким бы он ни был. Так что примите к сведению эти распространенные ошибки, и советы, как их избежать.

01. Несоответствие дизайна

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

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

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

02. Копирование

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

С миллионами компаний и логотипов в мире, конечно, есть шанс, что вы столкнетесь с чем-то похожим на вас, но вам просто нужно постоянно подталкивать себя к тому, чтобы быть оригинальным и думать о том, что вы можете сделать, чтобы выделиться.

После успеха логотипа City of Melbourne от Landor появилось много его имитаций по всему миру.

03. Попытка обратиться к каждому

Поначалу отсутствие определенной ЦА может показаться отличной идеей для вашего бренда. Идея в том, что если вы можете обратиться ко всем, то у вас больше шансов увеличить свои продажи. На самом деле очень мало компаний, которые успешно продают всем без разбора.

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


04. Неуместные визуальные эффекты

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

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

Взгляните на приведенный выше бренд зоопарка Сан-Диего от Landor. Это включает забавные фотографии и органическую типографику, идеально подходящую для его ЦА — детей и семей. Всегда важно учитывать вашу аудиторию и то, что будет для них подходящим.

05. Преклонение перед логотипом

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

Топ-пост этого месяца:  Yii2 Assets. Подключение JS и CSS из папки web

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

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

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

Руководство по созданию вашей айдентики

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

01. Исследования

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

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

02. Цели общения

Теперь вам нужно объединить все результаты ваших исследований в четкий план, который определит стратегию вашего бренда. Учитывайте особенности вашей ЦА, ценности и атрибуты вашего бренда, а также любые преимущества, которые вы имеете над своими конкурентами. На этом этапе вам нужно будет четко определить свои коммуникационные цели.

Ваши коммуникационные цели — это сообщение, которое вы хотите донести до целевой аудитории.

03. Стратегический дизайн

Это шаг, с которого все начинается. На этом этапе вы объедините свои исследования и стратегию для создания айдентики.

Выберите цвета и шрифты, которые, по вашему мнению, будут соответствовать вашему бренду.

04. Надежные и последовательные визуальные образы

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

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

05. Разработка брендбука

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

Заключение

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

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

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

10 распространенных ошибок, которые совершают веб-разработчики

10 главных ошибок в Web-дизайне

По материалам исследований Якова Нильсена,
(http://www.useit.com), май 1996 — май 1999.

10 главных ошибок в web-дизайне. Год 1996

В мае 1996 года Яков Нильсен опубликовал статью, сразу же ставшую классикой – “10 главных ошибок в web-дизайне”. Вот их список:

  • Использование фреймов
  • Бездумное использование новейших технологий
  • Прокручивающийся текст, динамическая анимация
  • Сложные URL
  • Исчезнувшие страницы (ошибка 404)
  • Слишком длинные страницы
  • Плохая навигация по сайту
  • Нестандартные цвета ссылок
  • Устаревшая информация
  • Чересчур долгое время загрузки

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

10 главных ошибок в web-дизайне. Год 1999

“В мае этого года я понял, что моя первая статья на удивление актуальна сегодня, три года спустя. Об этом говорит 400 000 посещений ее на моем сайте. В среднем ее читают 17 000 раз в месяц. Даже если некоторые читают эту статью несколько раз подряд, все равно получается, что мои “10 ошибок” прочли около 10% людей, чьими усилиями в мире появились 5 миллионов сайтов” — говорит Нильсен.

Большинство ошибок, которые он описал в первой статье, до сих пор встречаются так часто, что стоило бы настоятельно рекомендовать всем новичкам в web-дизайне ознакомиться с этим материалом трехлетней давности. Так как же обстоит дело с этими ошибками в наши дни?

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

Ошибка

Современный анализ

Серьезность проблемы 1. Фреймы Фреймы уже не такая серьезная проблема, которой они были году в 1995 или в 1996 – улучшились технологии броузеров. В 3-ей версии Нетскейп зафиксировал кнопку Back (Назад), а так как никто больше не пользуется 1-ой и 2-ой версиями, то значит, пользователь может осуществлять навигацию по сайтам с фреймами без особых помех. В 4-ой версии решили проблему с распечаткой фрейма (хотя еще нередко пользователи получают распечатку совсем не того вида, какого ожидали). 5-ый Интернет Эксплорер наконец-то решил проблему с закладками на страницах с фреймами. Однако фреймы мешают воспользоваться функцией Send URL (Отправить URL) и делают страницу более громоздкой и неудобной. Средняя 2. Использование новейших технологий Пользователь, столкнувшись с примитивной ошибкой JavaScript, покинет ваш сайт немедленно. Стоит ли ему ломать голову над тем, как это работает, если есть еще 5 миллионов других сайтов? Поэтому прежде, чем использовать новые технологии в web-дизайне, подумайте – как воспримет их пользователь, и насколько они необходимы на вашем ресурсе. Простая погоня за модой и нововведениями не имеет смысла. Очень серьезная проблема 3. Прокрутка текста и усложненная анимация С 1996 года этот недостаток лишь усугубился. Пользователи отождествляют такой дизайн с рекламой, которую они уже научились автоматически игнорировать. Очень важно делать любые элементы навигации и содержания непохожими на тот рекламный дизайн, который преобладает сейчас в Интернете. Пользователи прекрасно распознают все, что не связано напрямую с темой ресурса, и заставить их прийти на ваш сайт вторично будет уже гораздо сложнее. Очень серьезная проблема 4. Сложные адреса (URL) Сегодня люди уделяют Интернет-адресам меньше внимания, нежели три года назад. Большинство сайтов сейчас имеют хорошую навигационную поддержку, и пользователи полагаются при определении тематики сайта именно на нее, а не на адрес. Тем не менее, все каталоги (directories) и названия страниц должны быть связаны с тематикой и понятно названы, чтобы пользователь мог рассматривать сам URL как дополнительную помощь в навигации. Серьезная проблема 5. Исчезнувшие (ошибка 404) страницы Скорее всего, посетители сайта не застрянут на такой странице, так как большинство уже знает, что нужно просто “отсечь” конец адреса – и попадешь на главную страницу сервера.

Правда, этот способ не всегда известен неопытным пользователям и раздражает опытных. Средняя 6. Прокрутка навигационного блока 90% пользователей не прокручивают навигационный блок, а выбирают несколько из видимых на первом экране опций. Это правило сейчас меняется, так как пользователи уже знают, что страницы можно прокручивать, и что важная информация может находиться также “под” первой видимой на экране частью сайта. Однако на всех сайтах наиболее часто используются те элементы навигации, которые расположены на первой странице. Особенно это заметно, если первые несколько ссылок навигационного блока описывают главную тематику сайта – пользователь, как правило, стремится найти нужную информацию, а не изучать оставшиеся ссылки, поэтому на остальные элементы навигации может даже не обратить внимания. Несущественная проблема 7. Малопонятная навигация по сайту Встречается это не так уж часто, но если есть, становится серьезной проблемой. Люди уже привыкли к определенным канонам в дизайне и навигации: логотип, он же ссылка на начальную страницу, слева вверху; ясное указание на то, к какой части сайта относится данная страница и наличие ссылки на главную страницу этого раздела, т.д. Если такие базовые элементы навигации отсутствуют, пользователь может просто “заблудиться”. Серьезная проблема 8. Нестандартные цвета ссылок Продолжает оставаться проблемой, поскольку пользователи полагаются на цвета ссылок, чтобы понять, какие страницы сайта они уже посетили. Опять же, когда игнорируются стандартные цвета ссылок, пользователь начинает автоматически щелкать мышкой на всех подчеркнутых словах в тексте, которые далеко не всегда являются ссылками. Серьезная проблема 9. Устаревшая информация Чем дальше, тем хуже, так как множество сайтов тематикой сходной с вашим продолжают постоянно обновляться и развиваться. Сейчас же, с развитием электронной торговли особенно важно не потерять доверия посетителей, а показать им устаревшую информацию – верный способ дать понять, чего стоит ваш сайт и ваши услуги. Обратите внимание, что архивы и информация о старом товаре или продукте – как раз достоинство сайта, а не недостаток, и они очень сильно отличаются от устаревшей информации. Очень серьезная проблема 10. Медленная загрузка страницы Несмотря на обещания многих гуру от Интернет-технологий, эта проблема так пока и не решена. По моему мнению, ее нельзя будет решить до 2003 года, когда в нашем распоряжении будут высокопропускные каналы связи. Конечным пользователям придется ждать этого еще лет 5, то есть, приблизительно, до 2008 года. Очень серьезная проблема

Таким образом, можно сделать заключение, что

  • Все ошибки web-дизайна 1996 года можно назвать ошибками 1999 года
  • Девять из десяти ошибок причиняют серьезные неудобства пользователям. Их нужно обязательно избегать при создании своего web-ресурса
  • Прокрутку навигации можно уже даже не считать ошибкой, если только навигация сделана с правильным продуманным дизайном. Тем не менее, в любом случае, когда длина навигационного блока больше одного экрана, можно рекомендовать создателям сайта тест на удобство его использования.

10 новых ошибок в web-дизайне

Те десять ошибок, которые Нильсен впервые описал в 1996 году, остаются, как мы видим, практически неизменными на большинстве сайтов и в 1999-ом. К сожалению, за эти три года число популярных ошибок только увеличилось – новые web-технологии и программные разработки принесли с собой немало новых огрехов в создании удобных, правильно оформленных web-ресурсов. Ниже перечислены наихудшие:

1. Сбой или замедление работы кнопки Back (“Назад”)

Для пользователя кнопка Back (“Назад”) – жизненно необходимый элемент навигации и, кстати, второй по частоте использования( на первом месте гиперссылки). Пользователь уверен, что куда бы он не забрел в поисках информации кнопка Back всегда поможет ему вернуться на известную территорию или просто на пару страниц назад.

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

  • Появление нового окна браузера (см. Ошибку N2)
  • Использование моментального перенаправления запроса — каждый раз, когда пользователь нажимает на Back, он попадает на страницу, с которой его в ту же секунду пересылают на страницу, с которой он пытается уйти.
  • Запрещение кэширования – каждый раз при при нажатии на кнопку Back происходит новый запрос сервера, что усложняет навигацию по сайту и увеличивает время ожидания.

2. Появление новых окон браузера

“Когда на экране появляются новые окна, которых я не просил открывать, мне сразу приходит в голову продавец пылесосов, который, войдя в дом, вываливает на ковер пепельницу, а потом успешно убирает мусор. Так вот – не надо засорять мне экран, особенно учитывая то, как убого управляется с окнами самая популярная операционная система! Если мне нужно будет новое окно браузера, я сам его открою” – пишет Нильсен.

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

3. Нестандартное использование графических элементов управления

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

Чем полнее оправдываются ожидания пользователя, тем лучше. Он будет чувствовать себя уверенней, и ваш сайт понравится ему еще больше. С другой стороны, необычно работающая система внушает пользователю страх и неуверенность. Вот я сейчас отпущу это яблоко, а оно превратится в апельсин и улетит в небеса!

Постоянство действий еще одна причина, по которой не стоит открывать новые окна в браузере. Стандартное следствие нажатия на гиперссылку – появление новой страницы в том же окне браузера. Любой другой результат не оправдывает ожиданий пользователя, а значит заставляет его усомниться в своей способности работать на web’е.

В настоящий момент больше всего закон постоянства любят нарушать в использовании графических элементов управления – например, кнопок-селекторов и флажков (radio buttons и checkboxes). Правильная работа этих элементов описана в Стандартах пользовательского интерфейса (Windows UI Standard, Macintosh UI Standard, Java UI Standard). Каким из трех основных трех стандартов воспользуетесь вы, зависит от того, какая операционная система является основной для большинства ваших пользователей. Скорее всего, это Windows. Впрочем, больших различий между ними, по крайней мере, в работе основных элементов интерфейса, нет.

Например, по правилам действия кнопок-селекторов (radio-buttons), нужно выбрать одну из нескольких предложенных опций, однако никаких изменений не происходит, пока пользователь не нажмет кнопку ОК, подтверждая свой выбор. К сожалению, я нередко встречал сайты, на которых это базовое правило нарушалось – действие происходило сразу после выбора опции. При всей своей кажущейся незначительности именно такие нарушения правил работы элементов пользовательского интерфейса затрудняют работу с Интернетом.

4. Скудность сведений об авторах

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

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

Также плохо, когда вместо ссылок на работы и биографию имя автора становится ссылкой на его, автора, электронную почту (mailto:).

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

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

5. Отсутствие архивов

Старая информация – не значит плохая. Читателям она может оказаться полезной. Даже если новая информация оказывается гораздо полезней, у старой информации тоже найдется свой потребитель. Я подсчитал, что поддержка архивных данных на сервере увеличивает расходы по поддержке сервера приблизительно на 10%, а полезность и посещаемость ресурса возрастает при этом на все 50%.

Архивы помогают также избежать появления на сервере ошибки 404, дают преимущество при создании ссылок на ваш ресурс на других серверах.

6. Переадресовка страниц

Каждый раз, перемещая страницу на новый адрес, вы рискуете потерять ссылки на ваш сервер, сделанные на других ресурсах. К чему терять посетителей, которые приходят к вам от них?

7. Заголовки, не связанные с контекстом

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

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

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

8. Последний писк Интернет-моды

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

Push-каналы, создание community сайта, chat, ,бесплатный e-mail, трехмерные карты сайта, аукционы – список можно было бы продолжить.

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

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

9. Слишком долгое время ответа сервера

Это – наихудший и наивреднейший из огрехов. В предыдущих исследованиях я выяснил, что около 84% всех сайтов нарушают лимит по времени на загрузку сервера.

Изначально основной причиной медленной загрузки страниц было чрезмерное увлечение графикой. Многие сайты перегружены графикой и приложениями (апплетами), тогда как те же самые эффекты могли быть достигнуты при помощи DHTML или даже простого HTML. Именно поэтому я продолжаю повторять всем – уменьшайте время загрузки сервера.

С увеличением количества разнообразных программных приложений, основанных на web-технологиях, развитием электронной коммерции и т.п. возникла необходимость настраивать каждую страницу сервера под запрос каждого пользователя. В результате длительная загрузка сервера может объясняться не только пропускными способностями канала, но и тем, как именно он реализован. Иногда конструкция страницы предусматривает обращения к базе данных, находящейся на удаленном сервере или к back-end фреймам, что дополнительно увеличивает время загрузки.

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

10. Все, что напоминает рекламу

В Интернете основным является так называемое выборочное внимание. Все меньше внимания уделяют пользователи разнообразным рекламным объявлениям, CTR (Click Trough Rate) баннеров упал в Америке по сравнению с прошлым годом почти на 50%, а реклама в Интернете работает из рук вон плохо.

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

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

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