43 распространенные ошибки в веб дизайне

43 распространенные ошибки в веб дизайне

В интернете существует не так много списков с наиболее распространенными ошибками допущенными при разработке веб страницы. Каждый раз, читая эти списки, думал про себя: «Не помешало бы добавить еще с десяток, а то и больше ошибок…». Тогда я решил записать все ошибки веб-дизайна, которые приходят мне в голову. После поисков в сети, этот список вырос до 43 пунктов.
Следующим шагом было написать краткое описание для каждого из них, и в результате вы видите коллекцию ошибок, представленную ниже. Большинство из ошибок относятся к любому веб сайту вне зависимости от тематики.

1. За первые пару секунд пользователь должен знать о чём сайт : Внимание является самой ценной валютой в Интернете. Если посетитель не может понять, чему ваш сайт посвящен за несколько секунд, то он, вероятнее всего, переходит на другой. Ваш сайт должен указывать пользователю для чего он на него зашел и БЫСТРО!

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

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

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

5. Не открывать новые окна браузера : я так делал, на своих первых сайтах. Логика была проста, если я открываю новые окна браузера для внешних ссылок то пользователь никогда не уходит с моего сайта. НЕПРАВИЛЬНО! Позвольте пользователю решать где открывать ссылки. Для возврата на ваш сайт, на всех браузерах есть огромная кнопка «Назад». Не волнуйтесь об отправке посетителей на другой сайт, он обязательно вернется обратно, если захочет.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23. Не путайте посетителей со многими версиями : не смущайте посетителей слишком многими версиями вашего сайта. Какую скорость вы предпочитаете? 56 Кбит/с? 128 Кбит/с? Flash или HTML? Слышь друг, просто дай мне прочитать содержимое и всё!

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

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

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

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

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

29. Убедитесь в том, что вы включаете якорный текст по ссылкам : Легче всего создать ссылку с якорем «нажмите здесь». Но это не эффективно. При добавлении ссылки, убедитесь в том что вы правильно указали анкор для неё. Ведь в противном случае пользователь просто не будет знать куда ведет та или иная ссылка. Также правильные анкоры для ссылок увеличивают вес этой ссылки, что увеличивает SEO выгоду для внешней оптимизации сайта.

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

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

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

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

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

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

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

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

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

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

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

41. Откажитесь от горизонтальной прокрутки : В то время как допускается вертикальная прокрутка, нельзя сказать то же самое о горизонтальной прокрутки. Наиболее распространенное разрешение мониторов в данное время 1024 x 768 пикселей, поэтому убедитесь, что ваш сайт соответствует данному критерию.

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

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

Ещё несколько полезных советов:

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

— Не используйте скрытый текст

— Не ссылайтесь на блокированные или недействующие сайты. Google и Яша это не одобрят.

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

— Регистрируйтесь в различных каталогах, таких как Яндекс, Рамблер, DMoz и др.

— Используй различные системы для продвижения сайта (единственный минус – они платные)

— Выбери одну тематику в одном блоге. Если постоянно перепрыгивать с одной темы на другую, выбирай другой сайт.

— Добавляй хотя бы одну качественную статью раз в два дня.

Понравилась статья? Поделиться с друзьями:
Гарош - блог адского программиста