Данная статья является переводом статьи из англоязычного блога dailyblogtips.com .

43 ошибки веб-дизайна, которых следует избегать

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

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

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

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

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

5. Не открывайте новых окон браузера: я делал так на своём первом сайте. Логика проста - если я открываю новые окна браузера для внешних ссылок, пользователь никогда не покинет мой сайт. Но это ошибка! Пусть лучше сам пользователь контролирует, где он хочет открывать ссылки. Это причина того, почему браузер имеет большую кнопку "назад". Не беспокойтесь, когда посылаете пользователя на другой сайт, если он захочет, он вернётся (в последнее время даже порносайты стали придерживаться данного принципа...).

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

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

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

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

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

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

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

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

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

15. Не выключайте кнопку "назад": Это очень важный принцип юзабилити. Не выключайте конпку "назад" никоим образом. Открытие нового окна браузера, например, нарушает работу этой кнопки, также некоторые ссылки через javascript могут её нарушать.

16. Не используйте мигающий текст: если только пользователи не приходят на ваш сайта прямо из 1996 года...

17. Избегайте сложной структуры URL: простая, основанная на ключевых словах, структура URL не только улучшит ранжирование вашего сайта в поисковиках, но и облегчит для ваших пользователей идентификацию контента страницы ещё до перехода на неё.

18. Используйте CSS вместо HTML-таблиц: изначально HTML-таблицы использовались при вёрстке страниц. С пришествием CSS, однако, нет причин придерживаться этого метода. CSS быстрее, более надёжен и предлагает значительно больше возможностей.

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

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

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

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

23. Не запутывайте пользователя множеством версий: избегайте запутывать пользователя множеством версий вашего веб-сайта. Какую скорость я предпочитаю? 56 Кбит/с? 128 Кбит/с? Флэш или html? Парень, просто дай мне контент!

24. Не размещайте рекламу внутри контента: перемешивание рекламных объявлений, таких, как блоки адсенсе, с контентом, может увеличить CTR на котроткое время. Но в перспективе, однако, это уменьшит число ваших читателей. Раздражённый пользователь - это потерянный пользователь.

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

26. Избегайте "введений": не вынуждайте пользователя ждать или читать что-либо, прежде чем он сможет получить доступ к настоящему контенту. Это, без сомнения, раздражает, и он останется только в том случае, если то, что вы предлагаете, действительно уникально.

27. Не используйте FrontPage: этот пункт относится и к другим некачественным html-редакторам. Хотя они появились, чтобы сделать веб-дизайн проще, в результате они выдают плохой запутанный код, несовместимый с различными браузерами и содержащий разные баги.

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

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

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

31. Делайте ссылки видимыми: пользователь должен иметь возможность легко распознать, на что можно кликнуть, а на что - нет. Убедитесь, что ссылки имеют контрастный цвет (стандартный синий цвет оптимален в большинстве случаев). По возможности также делайте их подчёркнутыми.

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

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

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

35. Убедитесь, что вы прописали атрибуты ALT и TITLE для картинок: не говоря уже о том, что они дают SEO-эффект, эти атрибуты играют важную роль для слабовидящих пользователей.

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

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

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

39. Помещайте функциональные ссылки в футер (подвал): люди проматывают страницу вниз до подвала сайта, если они не нашли специфическую информацию. Как минимум, стоит поместить туда ссылку на главную и, возможно, ссылку на страницу "контакты".

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

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

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

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

Вам всё ещё непонятно, как избегать ошибок в веб-дизайне? Задайте вопрос на форуме.