43 ошибки веб-дизайна

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

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

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

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

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

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

5. Не открывайте новые окна браузера. Позвольте пользователю контролировать способ открытия ссылок. Огромная кнопка «Назад» придумана не случайно. Боитесь отправлять гостей ресурса на другой сервис? Помните, если они захотят, то обязательно вернутся.

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

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

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

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

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

11. Если воспроизвести аудиофайл НЕОБХОДИМО, пусть его запустит пользователь. Иногда может потребоваться аудиозапись (необходимость выступить с речью для пользователя, справочное пособие, имеющее формат аудиофайла). Это нормально. Главное здесь – возможность контролировать время запуска аудиофрагмента.

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

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

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

15. Никогда не отключайте кнопку «Назад». Это – базовый принцип юзабилити. Открытие новых окон браузера и некоторые ссылки Javascript могут привести к разрыву кнопки «Назад».

16. Уберите мигающий текст. Если только посетители не попадают на сайт прямо из 1996 года.

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

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

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

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

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

22. Предоставляя ссылку на PDF файлы, информируйте об этом. Убедитесь, что точные ссылки указывают на файлы PDF. Тогда пользователи правильно обработают файл.

23. Не сбивайте посетителя с толку разнообразными версиями сайта. Просто дайте людям полезный и ценный контент.

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

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

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

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

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

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

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

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

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

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

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

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

36. Грамотно выбирайте цвета. Если у пользователя появляется головная боль после посещения сайта в течение 10 минут, пора задуматься о смене цветовой гаммы.

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

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

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

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

41. Горизонтальная прокрутка недопустима. Иногда вертикальная прокрутка допустима, чего нельзя сказать о горизонтальной прокрутке. Наиболее часто используемое разрешение экрана составляет 1024 x 768 пикселей, поэтому убедитесь, что сайт оптимизирован под все размеры экранов мобильных устройств.

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

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