Полезное

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11. Если вам НЕОБХОДИМО воспроизвести аудиофайл, позвольте пользователю запустить его. Вам может потребоваться выступить с речью, или ваш гид может иметь определенный аудио-компонент. Это нормально. Просто убедитесь, что все под контролем пользователя, позвольте ему нажать кнопку «Воспроизвести», а не обрушить на него музыку сразу после того, как он заходит на веб-сайт.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28. Обязательно включите якорный текст в ссылки. Конечно, проще сказать людям «нажать здесь»… но это неэффективно. Обязательно включите соответствующий якорный текст в свои ссылки. Это гарантирует, что читатель будет знать, куда он направляется, если он нажмет на ссылку, а также создаст преимущества SEO для внешнего сайта, на который указывает ссылка.

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

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

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

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

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

34. Обязательно используйте атрибуты ALT и TITLE для изображений: помимо преимуществ SEO, атрибуты ALT и TITLE для изображений будут играть важную роль для слабо видящих пользователей.

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

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

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

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

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

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

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

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

Всем успешной работы и творчества!

Источник

 

  • 700