Правила веб дизайна или как избежать эти 43 ошибки

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

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

Каждый раз, перечитывая этот список, ловил себя на мысли: «да ладно! Ну не должно в нем быть 10 ошибок». И тогда я решил доработать этот список мыслями, которые приходили ко мне в голову, и в результате за более чем полчаса получилось набрать более 30 пунктов. После этого я провел еще одно небольшое исследование и в итоге перед вами готовый образец 43 типичных ошибок.

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

1. Пользователь должен узнать о вашем сайте за считанные секунды: внимание одна из основных валют в интернете. Если посетитель не поймет о чем ваш сайт за считанные секунды, он с большей долей вероятности просто покинет его. Ваш сайт должен донести информацию почему мне следует здесь остаться, причем быстро.
2. Сделайте содержание сайта развернутым: это интернет, а не книга, поэтому навсегда забудьте про большие блоки текста. Наверняка я буду посещать сайт, параллельно занимаясь другими делами, так что позаботьтесь о том, чтобы я без проблем просканировал текст. Снабдите текст буллитами, списками, заголовками, подзаголовками, важные мысли выделите жирным шрифтом.
3. Используйте нормальные шрифты, вместо нечитаемых: уверен, что есть множество шрифтов, которые придадут шарм и красоту вашему сайту. Но будет ли он читаться? Если ваша главная цель доставить сообщение и привлечь посетителя, читающего ваш материал, тогда вам просто необходимо позаботиться об удобстве для них.
4. Не используйте слишком маленькие шрифты: настройте шрифты так, чтобы было удобно именно для читателя. Мой браузер Firefox имеет функцию масштабирования, но если мне нужно использовать ее на сайте, то это последний мой заход на этот сайт.
5. Не допускайте «многооконности» на сайте: раньше я использовал этот механизм на своих первых сайтах. Логика был проста, если я открываю новые окна браузер по внешним ссылкам, то пользователь никогда не покинет мой сайт. Это НЕПРАВИЛЬНО! Дайте возможность пользователю самому контролировать процесс, где он хочет открывать ссылки. По этой причине у всех браузеров есть огромная кнопка «Назад». Не беспокойтесь если пользователь перейдет на другой сайт. Он всегда вернется назад, если материал ему интересен.
6. Не изменяйте настройки окон браузера для посетителей: пользователь сам должен контролировать размеры окон. Если такое произойдет, то вы рискуете потерять своего подписчика и, соответственно, его доверие к вам.
7. Не требуйте регистрации, если это не является необходимостью: пользователю не должно доставлять не удобства тот факт, что он нашел нужную информацию, а его принуждают зарегистрироваться и оставить адрес электронной почты. Используйте форму регистрации только тогда, когда это необходимо.
8. Никогда не подписывайте посетителей на что-то без их согласия: используйте добровольный email маркетинг. Отправка нежелательных сообщений, без ведома человека, не самый лучший способ подружиться, особенно если речь идет о каких то долгосрочных партнерских отношениях.
9. Не злоупотребляйте технологией Flash: кроме увеличения времени загрузки страницы, чрезмерное использование эффектов раздражает глаз и отталкивает посетителей. Используйте его только тогда, когда вы предлагаете функции, которые не поддерживают статические страницы.
10. Не проигрывайте музыку на сайте: еще в ранние годы веб разработчики всегда пытались интегрировать музыку в свои сайты. И надо полагать, что эта затея с треском провалилась. Используйте ее там, где она уместна.
11. Если вам просто надо проигрывать аудио файлы на сайте, позвольте пользователям самим запустить его: в некоторых ситуациях возможны запросы аудио файлов. Возможно, вам придется выступить с речью к вашей аудитории или провести своеобразную аудио экскурсию по вашему сайту. Это абсолютно нормально. Просто убедитесь, что пользователь находится под контролем и в любой момент может сам нажать кнопку «проиграть», в отличие от испуга на его лице, когда музыка просто врывается при заходе на ваш сайт.
12. Не загромождайте ваш сайт различными значками и маленькими картинками: значки социальных сетей и сообществ уместны естественным образом, а если их количество разбросано по всему сайту, то это выглядит несколько не профессионально. Лучше создайте под это дополнительную страницу, например «О нас» или «Наши Заслуги».
13. Не используйте главную страницу как «настоящую» для всего сайта: лучше позаботьтесь, чтоб содержание вашего сайта было структурировано, и пользователь в несколько щелчков мыши мог найти нужную информацию.
14. Не забудьте указать контактную информацию: нет ничего хуже, чем веб сайт, который не имеет контактных данных. Ведь в интернете проще оставаться анонимом, но ведь люди хотят знать, кто стоит за тем или иным сайтом. Поэтому очень важно не потерять обратную связь на этом пути.
15. Не пренебрегайте кнопкой «Назад»: всегда помните про основной принцип юзабилити – не допускать загруженности окнами браузера, пусть ссылки открываются в текущем окне.
16. Не используйте мигающий текст на сайте: вы ведь не казино или ночной клуб. Позаботьтесь о качестве текстов, а не об их эффектах.
17. Избегайте сложных структур URL адресов: простые, основанные на ключевых словах, url ссылки не только улучшат рейтинг в выдаче поисковых систем, но и облегчат задачу поиска контента для читателя. Для блогов на вордпресс рекомендую использовать плагин коротких урлов.
18. Используйте СSS над HTML таблицами: HTML таблицы были использованы для создания макетов страниц. С появлением CSS отпала возможность придерживаться строго к HTML. Внедрение каскадных таблиц стилей заметно убыстряет работу сайта и делает его более привлекательным. Меньше движений мышью, больше функционала на сайте.
19. Убедитесь, что на вашем сайте есть навигация или «поиск по сайту»: современные поисковики просто взорвали интернет, произвели в нем революцию, поскольку облегчают задачу поиска среди миллионов самых разнообразных страниц. Сделайте удобным поиск контента на своем сайте и читатели отблагодарят вас и будут рекомендовать.
20. Избегайте выпадающего меню: пользователь должен увидеть всю навигацию целиком по ссылкам. Использование выпадающего меню может запутать и скрыть некоторую информацию для читателя, которую он ищет.
21. Используйте навигацию по тексту: навигация по тексту не только быстрее, но и надежнее. Например, некоторые пользователи просматривают сайты с выключенными картинками.
22. Аккуратно ссылайтесь на PDF файлы: возможна ситуация, когда вы нажимаете на файл pdf, а в этот момент запускается Acrobat Reader, и браузер как бы «замораживается». Это раздражает людей, поэтому предупредите, что файл откроется в новом окне.
23. Не путайте посетителей версиями вашего сайта: избегайте запутывания посетителей большим количеством версий вашего сайта. Не спрашивайте меня, какой пропускной способностью пользоваться? 56 кбит/с? 128 кбит/с или широкополосный доступ? Версия Flash или HTML? Люди! Мне просто нужен контент, дайте мне его и точка.
24. Чрезмерное смешивание рекламы с контентом на сайте: вставка adsense блоков в текст это, конечно же, хорошо в краткосрочной перспективе, но в долгосрочной вы рискуете потерять читателя. Да, вы получите свои пару десятков долларов в начале, а что дальше? Вашему читателю это надоест и он просто может навсегда покинуть сайт, так что пишите и не перебарщивайте с рекламой. Деньги свои вы заработаете.
25. Используйте простую структуру навигации: иногда лучше меньше, да лучше. Ваш сайт должен иметь четкую иерархичную структуру, чтобы пользователь добрался до нужной статьи максимум в 3 клика, но не более.
26. Избегайте «интро»: не настаивайте на том, чтобы пользователь просмотрел или прочитал что-то прежде, чем он получит доступ к содержанию. Это просто выводит и раздражает посетителей, если информация действительно интересная, он и так останется на вашем сайте.
27. Не используйте Front Page: это также распространяется на другие дешевые HTML редакторы. Появление их на сцене делает процесс создания сайта проще, а на выходе получается куча ненужного кода, несовместимого с различными браузерами и много различных ошибок при индексации. Помните это.
28. Убедитесь, чтобы ваш веб сайт был совместим с различными типами браузеров: после создания сайта проверьте, чтобы CSS, скрипты и прочие блоки ваших страниц корректно отображались во всех современных браузерах.
29. Не забудьте включить анкорный текст в ссылках: признаюсь, я делал такую ошибку некоторое время назад. Конечно проще сказать людям «скачать здесь». Но это будет неэффективно. Гораздо эффективнее включить подходящий анкорный текст в ваши ссылки. Это будет гарантировать читателю, что при нажатии на ссылку он попадет на нужную страницу, а для поисковика этот сайт будет ранжироваться выше в seo выдаче.
30. Не скрывайте ссылки: кроме имеющихся на сайте «чистых» ссылок с анкорами, пользователь должен в состоянии увидеть, куда указывает ссылка в адресной строке браузера. Если вы скрываете свои ссылки (если они партнерские, или по другой причине), ваш сайт потеряет авторитет.
31. Сделайте ваши ссылки заметными: пользователь должен иметь возможность обнаружить, что на сайте является интерактивным, а что нет. Убедитесь, что ваши ссылки имеют контрастный цвет (стандартный синий является оптимальным в большинстве случаев). Возможно, также сделать их подчеркнутыми.
32. Не подчеркивайте обычный текст без необходимости: подобно тому, как пользователи совершенно без проблем признают ссылки на сайте, у них не должно возникнуть мысли, что что-то еще является интерактивным, хотя в действительности таковым не является.
33. Измените цвет ссылки после нажатия по ним: этот момент очень важен для юзабилити вашего сайта. Изменение цвета ссылок даст пользователю представление, что он посмотрел на сайте, а что еще нужно изучить, чтобы не рассеять его внимание.
34. Не используйте анимированные GIF файлы: такие сайты выглядят совершенно непрофессионально и только отвлекают внимание читателя от содержания.
35. Убедитесь, что вы используете ALT и TITLE атрибуты для изображений: кроме имеющихся SEO преимуществ ALT и TITLE атрибуты для картинок будут играть важную роль для слабовидящих пользователей.
36. Не используйте агрессивные цвета: не мучайте зрение ваших посетителей, улучшайте цветовую гамму, сосредоточьтесь на «мягких», ровных тонах, фокусируя внимание на информационной составляющей вашего проекта.
37. Не используйте всплывающие окна на сайте: этот совет относится к всплывающим окнам любого рода. Хотя сейчас существует устойчивая тенденция повсеместного использования pop-up окон для привлечения подписчиков. Это не запрещено, но просто дайте людям возможность немного посидеть, полистать ваш сайт, а уже потом предложите подписаться на рассылку через некоторое время, например через 2 минуты. Это касается блогов на WordPress и, в частности, использование плагина Popup Domination.
38. Остерегайтесь использования яваскрипт ссылок: эти ссылки исполняют различные сценарии на странице, когда пользователь кликает по ним. Держитесь подальше от них, так как часто они создают проблемы для посетителей.
39. Используйте функциональные ссылки в футере: у людей есть привычка прокручивать сайт до самого низу в поиске самой нужной информации, если они не найдут ее в начале. Допустимо использовать ссылку на главную страницу, или на раздел «контакты», или «карта сайта».
40. Избегайте длинных страниц: если посетитель всегда будет прокручивать скролл, чтобы добраться до содержимого, то просто уйдет. В этом случае сделайте текст покороче, в среднем, чтобы было порядка 2000 знаков с пробелами, улучшите структуру навигации, сделайте сайт покомпактнее.
41. Нет горизонтальной прокрутки: если использование вертикальной прокрутки это терпимо, чего не скажешь о горизонтальной. Наиболее часто используемое разрешение экрана на сегодняшний день является 1024 x 768 пикселей , поэтому удостоверьтесь внутри вашего сайта есть горизонтальная прокрутка.
42. Не проверки правописания или орфографические ошибки: это не ошибка веб дизайна, но также один из важнейших факторов, влияющих на общее качество сайта. Перед тем как публиковать статью или пост, проверьте их на наличие ошибок и исправьте в срочном порядке, не портите себе карму.
43. Если вы используете защитную КАПЧУ, то убедитесь что буквы читаемы: многие сайты используют капча фильтры, как метод уменьшающий спам в комментариях или в регистрационных формах.

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

Вот такой обширный пост получился товарищи. Еще раз больно по лицу не бейте, пытался перевести литературно, вставляя свои авторские ремарки. Оригинал статьи можете взять здесь [urlspan]43 Web Design Mistakes You Should Avoid[/urlspan]. Спасибо за внимание.