Web Pages That Suck, или Познайте свой сайт

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

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

Иногда, однако, легче бывает уговорить заказчика сменить дизайнера — достаточно лишь сайту попасть в рубрику The Daily Sucker сайта, посвященного собственно отстойным сайтам и отстойным практикам сайтостроительства.

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

Так или иначе, у Тёмы есть «Бизнес-линч» и «Ководство», у Винса — его The Daily Sucker и, самое главное, чеклист номер раз и чеклист номер два. Все правильные ребята, владеющие вебом или заявляющие, что они им владеют, должны ходить по этим адресам и сравнивать. Сравнивать до посинения. До того момента, когда все пункты перекочуют на подкорковый уровень и начнут применяться на автомате.

А вот для «тру» я приведу, пожалуй, перевод.

Чеклист номер раз

ОТВЕТ. Если хотя бы одно утверждение применимо к вашему сайту, этот ваш сайт — дерьмо. Точка.

Первое впечатление

1. Наш сайт разрабатывался с мыслью о потребностях нашей организации (увеличения взносов/продаж), а не с мыслью о наших посетителях.
2. Наш сайт пытается рассказать вам о том, какая у нас хорошая компания, но не о том, как мы будем решать ваши проблемы.
3. Марсианину(*) нужно более четырех секунд, чтобы понять, о чем сайт.
4. Марсианин не в состоянии быстро найти точку фокуса на главной странице.
5. Марсианин не в состоянии быстро найти точку фокуса на текущей странице.
6. Наш сайт не изображает нас заслуживающими доверия профессионалами.
7. Наш сайт не дает посетителю повода доверять нам.
8. Наша домашняя страница — да и любая другая страница — грузится дольше четырех секунд (ну, я бы все же сделал поправку на диалап и кривые роутеры, встречающиеся по дороге — и все-таки. — Прим. переводчика)
9. Взгляд на страницу по диагонали практически ничего не говорит о ее целях.
10. Мы располагаем элементы дизайна не там, где их ожидают увидеть посетители.
11. На страницах остались лишние элементы дизайна.
12. Мы не знаем, какие элементы дизайна не нужны.
13. Если у посетителя отключен Javascript, сайт ломается.
14. Сайт ломается из-за ошибок на стороне сервера.
15. У нас на главной написано «Добро пожаловать на...»
16. Основа нашего сайта — Flash (а для тех, у кого Flash нет, сайт выглядит совсем по-другому).
17. Навигация нашего сайта основана на Flash.
18. Наш сайт использует заставку (если это не сайт об алкогольных напитках, порнухе, азартных играх, табаке, прочей клубничке или же это не многоязычно-многонациональный сайт).
19. У нас на сайте всегда положено регистрироваться перед входом.
20. Заставки на нашем сайте в количестве двух или больше.
21. Тэг TITLE нашего сайта — это что-то навроде «Новый документ», «Index» и т. п., а не название нашей компании или что-нибудь дружественное к поисковикам.
22. У нас на сайте при загрузке автоматически проигрывается фоновая музыка, но при этом мы не звукозаписывающая компания и не музыканты.
23. Я не знаю, одинаково ли выглядит сайт в популярных браузерах.
24. Наш сайт в разных браузерах выглядит по-разному.
25. То, что на самом деле важно, не помещается в первом экране.
26. Слишком много или слишком мало незаполненного пространства.
27. Мы используем на сайте всплывающие окна.
28. Наш сайт требует от посетителей установки каких-то непонятных плагинов.
29. На нашем сайте есть текст или кнопочка «Скачать новейший браузер».
30. На нашем сайте видным текстом написано, какое железо и ПО использовалось для создания сайта.
31. Мы «одолжили» дизайн у другого сайта.
32. У нас на сайте не разъяснено по-человечески, как покупать товар, как заполнять формы и так далее.
33. Наш сайт выключает правую кнопку мышки, потому что мы достаточно скудоумны для мысли о том, что наше содержимое стоит того, чтобы его украли, и что наши пользователи слишком тупые, чтобы этот код обойти.
34. Наш сайт основывается на перегруженном ужасным кодом шаблоне, который сложно поддерживать и который, если честно, поломан.
35. Мы не обозначаем PDF-файлы иконкой.
36. Мы не смотрим свои лог-файлы.
37. Мы никогда не делаем тестов использования.

Текст и ссылки

1. На нашем сайте используется каша из шрифтов разного размера в пределах одной страницы.
2. На нашем сайте используется каша из разноцветного текста в пределах одной страницы.
3. Наш сайт требует от пользователя установки особенных шрифтов для корректного просмотра текста.
4. Посетители не могут прочесть текст на наших страницах, шрифт слишком мелок.
5. На нашем САЙТЕ МНОГО СЛОВ НАПИСАНО ПРОПИСНЫМИ БУКВАМИ.
6. На нашем сайте используется самопрокручиваемый, мигающий, гаснущий или движущийся текст.
7. Анализатор контрастности говорит, что между текстами/ссылками и фоном недостаточно контраста.
8. AccessColor говорит, что в стилях недостаточно контраста.
9. Мы используем центрированный текст не только в заголовках.
10. Мы используем выравнивание по обоим краям. (Hint: нечего пробовать, пока браузеры не научатся переносить текст.)
11. Мы используем специфичные для браузера тэги, например, <MARQUEE>.
12. Мы используем начертания шрифта, неподходящие целевой аудитории — например, Comic Sans на сайте для респектабельных граждан среднего и пожилого возраста.
13. Мы ставим в строку статуса движущийся текст.
14. У нас на страницах текста либо слишком мало, либо слишком много.
15. Наш сайт использует подчеркнутый текст (подчеркивать нужно только ссылки).
16. У нас на сайте используется повернутый/перевернутый текст.
17. Посещенные ссылки не изменяют свой цвет.
18. Ссылки не до конца понятно подписаны.
19. Слишком много ссылок на единицу экранной площади.
20. Слишком много ссылок вообще.
21. На нашем сайте много мертвых ссылок.
22. На нашем сайте много мертвых ссылок и совсем нет страниц 404.
23. На нашем сайте много сложных URL.
24. На нашем сайте ссылки подчас состоят из 10–20 слов.
25. Наши ссылки неинформативны.

Графика, видео, звук

1. Наш логотип выглядит непрофессионально.
2. Наш логотип — плохо отсканированное изображение с визитки.
3. Наш логотип прячется под фоном страницы (да, такое бывает).
4. Наш логотип не размещен сверху каждой страницы и щелканье на нем не ведет на домашнюю.
5. Если на вашем сайте есть баннерная реклама, в особенности близко к верху сайта, держите графику собственно сайта подальше от нее. Люди обычно игнорируют баннеры и так же точно будут игнорировать и вашу графику.
6. Сайт использует дешевый клипарт вместо высококачественной графики.
7. Сайт использует графические разделительные линии (особенно гламурненько-анимированненькие).
8. Наш сайт использует графику в больших по размеру файлах.
9. Наш сайт использует графику, отвлекающую от смысла.
10. Сайт загружает видео сразу, в отличие от YouTube, которое загружает видео только после клика на нем.
11. Наш сайт использует след от курсора (когда не просят).
12. Наш сайт использует переходы страниц IE.
13. Наш сайт использует картинки «Under construction».
14. На нашем сайте нет картинок, уменьшенных с помощью Photoshop или сходной программы — мы используем одну и ту же картинку 1280×800 пикселей и выставляем HEIGHT и WIDTH элемента IMG.
15. Наш сайт использует графику вместо текста.
16. У нашего сайта отвратная цветовая схема (ярко-красный и ядовито-зеленый, скажем).
17. Символика на сайте не совпадает с логикой. Значок корзины для покупок похож на все, кроме этой самой корзины.
18. Вместо называть ее «корзиной», мы придумываем какой-то термин поглупее, например, «блокнот».
19. Наш сайт щедр на всевозможные анимации.
20. На нашем сайте используются анимированные GIF’ы.
21. На нашем сайте используется трехмерная графика (без надобности).
22. На нашем сайте используются градиентные изображения.
23. На нашем сайте используются рельефные изображения.
24. На нашем сайте используются изображения с тенями.
25. На нашем сайте используется яркая мигающая графика, от которой может начаться эпилептический припадок.
26. На нашем сайте используется фоновый рисунок, который повторяется на большом экране.
27. Фон не совсем контрастен с текстом, отчего текст трудно читать.
28. Наша графика либо не использует атрибут ALT, либо не использует значение «" для декоративной графики.
29. На нашем сайте графика запутывающая — она выглядит как реклама.
30. Наш сайт использует движущуюся графику — снежинки, птички — и прочую отрисовываемую через DHTML тупую дребедень.
31. Сайт не использует цвет для передачи смысла — красный цвет означает «это важно!».
32. Никто и минуты не уделил посмотреть, а не оттолкнет ли цветовая схема пользователей из-за рубежа.
33. На нашем сайте много цветных областей на одной странице.
34. На нашем сайте содержатся блоки отвратного цвета друг рядом с дружкой.
35. Каждая страница нашего сайта — один большой image map.
36. У нас на сайте используется страдающая от «эффекта нимба» графика — когда в результате дизеринга остается отвратительное пятно-нимб вокруг объекта или изображения.

Навигация

1. Навигационная система соответствует нашим потребностям, а не наших посетителей.
2. Раз мы понимаем, как у нас работает навигация — должны понимать и остальные.
3. У нас есть отдельная страница или окошко, объясняющие, как пользоваться навигацией.
4. Навигация сайта должна сказать, где вы, как и куда можно пройти и как вернуться обратно домой. Нашего сайта это не касается.
5. Наш сайт использует навигацию имени таинственного мяса. (**)
6. Навигационная система нашего сайта построена на Flash.
7. Принципы навигации по нашему сайту непонятны марсианину с первого раза.
8. Людям лениво изучать новую навигационную систему сайта. Но мы все равно сделали по-своему.
9. Для навигации мы используем Javascript. Так вот, когда Javascript отключен, навигация отваливается насовсем и безальтернативно.
10. Навигационное меню сайта повернуто под углом.
11. У нас используются идиотские термины типа «stuff» для навигационных ссылок или «Beginning» вместо «Home».
12. С главной страницы никак сразу не попасть к популярному содержимому.
13. Навигация сайта не вверху страницы.
14. Навигационная система нашего сайта, вместо предсказуемости, изобилует непоследовательностью.
15. Навигация нашего сайта непредсказуема — на разных страницах она в разных местах.
16. Содержимое сайта не разбито на логичные категории и подкатегории.
17. Названия категорий и подкатегорий неясны и взаимоисключающи.
18. Ссылки подписаны туманно и не объясняют, куда вы попадете.
19. Ссылки подписаны туманно, не объясняют, куда вы попадете, а еще на них написано «Нажмите сюда».
20. Некоторые (или все) наши страницы требуют от пользователя использовать горизонтальную прокрутку.
21. Навигация нашего сайта сделана на Java.
22. Навигационная графика нашего сайта не выдержана в одинаковом размере/цвете.
23. На нашем сайте нужно кликать подчас по четыре раза, чтобы добраться до нужной информации.
24. Мы не даем людям подписаться на дорогие конференции. (#)

Содержимое

1. Мы не знаем, какое содержимое популярно.
2. Наше содержимое не организовано с мыслью о потребностях наших посетителей.
3. Наше содержимое не разбито на логичные категории.
4. Содержимое не поддается человеческому пониманию и наполнено жаргоном маркетологов, технарей и необъясненными аббревиатурами.
5. Содержимое неинтересно, не относится к сути, неточно или же лицеприятно.
6. На самом деле содержимое не подходит нашей целевой аудитории.
7. Мы не обозначаем содержимое в форматах, отличных от HTML, таких как PowerPoint и Excel.
8. Содержимое сайта писалось не для веба, а для печатного (или другого) носителя, а мы просто перенесли его один-в-один на веб.
9. Наши страницы слишком длинны. Мы всё забываем, что люди обычно смотрят бегло.
10. Содержимое нашего сайта требует для прочтения большего либо меньшего, чем у наших посетителей, уровня знаний.
11. У нас на сайте совершенно отсутствует героин.
12. Некоторое содержимое нашего сайта — графика либо текст — считается оскорбительным (для целевой аудитории) (***)
13. Мы не нанимали редактора для вычитки содержимого с точки зрения грамматики.
14. Мы не проверили, убран ли весь «Lorem ipsum» и другой рыбный текст и графика из сайта — в особенности же в заголовках документов.
15. На нашем сайте используется содержимое, о котором посетителям лучше не знать.
16. На нашем сайте размещена конфиденциальная информация, о которой публике и конкурентам лучше не знать.
17. На главной странице сайта размещен манифест его миссии или ссылка на него (не касается неприбыльных и общественных организаций).
18. На сайте есть разделы на стадии разработки, доступные публике.
19. На разных страницах и разделах наш сайт выглядит совершенно по-разному.
20. На сайте не размещена политика использования и приватности.
21. Содержимое нашего сайта написано в Microsoft Word, Powerpoint и т. д., после чего сконвертировано в HTML.
22. У нас на сайте устаревшая календарная информация.
23. На нашем сайте слишком длинные строчки, что трудно читать.
24. На нашем сайте слишком короткие строчки, что утомительно читать.

Чеклист номер два

Главное — не расслабляться.

1. Сайт недоступен инвалидам (по зрению, слуху, моторике)
2. Наш сайт не использует для фона белый либо схожий с белым цвет.
3. Наш сайт не использует черный цвет.
4. Наш сайт использует фреймы.
5. У нашего сайта не тот DOCTYPE.
6. Наш сайт не использует CSS.
7. Наш сайт использует CSS, но это встроенный CSS.
8. Логотип нашего сайта не в верхнем левом углу.
9. У нашего сайта отсутствует механизм поиска.
10. Форма для нашего поиска не в правом верхнем углу.
11. Поле ввода для поиска недостаточно длинно, чтобы в нем было видно, что набираешь.
12. Форма для поиска есть, но не на каждой странице.
13. Текст подчеркнут, но это не ссылки.
14. Сайт использует несуществующие в стандарте HTML атрибуты (marginwidth и им подобные).
15. В качестве ссылок используется графика.
16. Мы не проверяли валидатором наш HTML.
17. Мы не проверяли валидатором наш CSS.
18. Мы не проверяли целость и сохранность ссылок на нашем сайте.
19. У нас используются устаревшие тэги (как-то CENTER).
20. На сайте нет переключалки стилей.
21. Мы не проверяли, как сайт будет выглядеть в градациях серого.
22. Мы не проверяли сайт расширением «Web Developer» для Firefox.
23. Мы не проверяли сайт с помощью «The Web Page Analyzer».
24. Наш сайт использует CSS-атрибут hover на обычном тексте.
25. Мы не оптимизируем HTML и CSS нашего сайта.
26. Финансовые данные в таблицах не выровнены по десятичной запятой.
27. Логотип сайта непропорционален верхней части экрана.
28. Корпоративный логотип находится не вверху слева.
29. Логотип на подчиненных страницах ссылается на главную (вообще-то, это бы и должно так быть. — Прим. переводчика.).
30. На домашнюю страницу ссылаются все страницы, кроме домашней (Это, вообще-то, тоже правильно. — Прим. переводчика).
31. Даты на нерегулярно обновляемых материалах.
32. Наш сайт полон технического/внутреннего жаргона.
33. Наш сайт полон акронимов.
34. Мы непоследовательны в использовании сокращений на сайте.
35. Мы непоследовательны в тоне повествования. То он разговорный, то наукообразный и так по всему тексту.
36. Шрифты на нашем сайте фиксированного размера и это никак не изменить.
37. У нас по нескольку мыслей в одном абзаце.
38. Наш сайт полон акронимов.
39. Неуказание цвета фона.
40. Повсюдное использование <div> и/или <span> (а вы слышали о том, что в HTML есть множество полезных, несущих семантическую нагрузку элементов?).
41. Счетчики посещений.
42. Отсутствие или недоступность контактной информации.
43. Сайт не указывает хотя бы нескольких разных способов сконтактироваться (форма обратной связи, номер телефона, адрес, email и т. д.).
44. Даты и времена на сайте, который с датами и временем не связан.
45. На сайте имеются скучные фотографии управляющего состава.
46. Мало того, что на сайте есть скучные фотографии управляющего состава, при клике на них вы имеете возможность рассмотреть их поближе и в подробностях (think pr0n. — Прим. переводчика).
47. Некоторые фотографии не первой свежести — имеются фото сотрудников 20-летней давности.
48. Наш сайт использует изображения JPG, когда надо GIF, и наоборот.
49. Мы используем формат SVG — потому что умеем.
50. Мы переоптимизируем изображения на сайте.
51. На нашем сайте есть элементы, похожие на ссылки, но таковыми не являющиеся.
52. Мы не тратим времени посмотреть, а не грязным ли сканером мы сканируем картинки.
53. Проверяйте на внешней машине, грузится ли фактически графика на вашем сайте.
54. Изображение глобуса нафиг не нужно, мы просекли фишку о вашей глобальности.
55. Наш сайт использует препаршивое фоновое изображение.
56. У нас навигация на динамическом HTML.
57. У нас нет карты сайта.
58. Карта сайта есть, но она графическая.
59. У нашего сайта «резиновый» дизайн.
60. У нашего сайта фиксированная ширина (хех. У вас нет шансов! «Резиновый» дизайн проигрывает на широких мониторах, где строчки столь широки, что их трудно читать — и наоборот).
61. Мы используем рамки для таблиц, не имеющих отношения к бухгалтерии.
62. НАШИ ЗАГОЛОВКИ ПЕЧАТАЮТСЯ БОЛЬШИМИ БУКВАМИ.
63. У нас в текстах полно превозношений к небесам навроде «Этот продукт разрешит все проблемы, которые у вас могут возникнуть».
64. В наших абзацах очень много текста (как будто бы пользователи привыкли внимательно изучать тексты на вебе. Щас.).
65. Очень много жирного текста.
66. Непомерно много курсива.
67. Наш сайт использует три или более начертаний шрифта на одной странице.
68. У нас нету CSS-файла со стилями для печати.
69. Мы не используем логичных названий для документов и графики.
70. Графика на страницах не несет дополнительной информативной нагрузки.
71. Графика не подходит к тексту.
72. Некоторые наши документы разбиты на несколько страниц, но мы и не думаем предоставлять возможность просмотреть их полностью на одной странице.
73. Кнопка «Back» не работает — мы ее отключили.
74. Никакой обратной связи с сайта.
75. На формах — мешанина радиокнопок и чекбоксов.
76. На нашем сайте используются выпадающие меню.
77. Мы чураемся списков для структурирования информации.
78. Мы не проверяем вручную правописание в атрибутах TITLE, ALT и т. п. (спеллчекеры их обычно не проверяют).
79. Наше содержимое не успевает за временем.
80. Содержимое нашего сайта не обновляется регулярно.
81. Наш сайт не отделяет стиль от содержимого.

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

http#По ссылке находится иллюстративное видео. Сайт рекламирует дорогие семинары, но любая попытка зарегистрироваться дает ошибку 401. Как получить имя и пароль, чтобы зарегистрироваться — никто не знает.

http***В оригинале были пункты также о расизме и политической корректности. На мой взгляд, они не соответствуют цели, преследуемой остальными пунктами. Мы обсуждаем технические критерии неправильного дизайна, а не смысловые. Технически возможен сайт с пропагандой хоть бы и зоофилии среди умственно отсталых азиатских террористок, сделанный безупречно с точки зрения дизайна. Осуждать же содержимое по морально-этическим критериям — не дело веб-разработчика.

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU