WebPagesThatSuck.com — тесты на отстойность, часть 2

    Вторая часть перевода теста на отстойность сайта. Первая часть доступна здесь. Сегодня разговор пойдет о тексте, ссылках, а также графике, видео и аудио.

    Начнем.

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

    • На нашем сайте тексты написаны шрифтами разных размеров.
    • На нашем сайте тексты написаны шрифтами разных цветов.
    • Чтобы почитать текст на нашем сайте, людям требуется скачать какой-нибудь необычный шрифт.
    • Посетителям трудно читать наши тексты, поскольку шрифт ну очень мелкий
    • На нашем сайте СЛИШКОМ МНОГО ЗАГЛАВНЫХ БУКВ.
    • Тексты на нашем сайте мелькают, мигают и движутся.
    • Анализатор контраста считает, что текст, ссылки и фон на нашем сайте недостаточно контрастируют.
    • AccessColor считает, что цветовая гамма нашего сайта с трудом воспринимается посетителями.
    • На нашем сайте центрированный текст используется не только в заголовках.
    • Текст на нашем сайте выронен по ширине.
    • Мы используем тэги, специфичные для конкретных браузеров, например, <MARQUEE> (узнал я, что это за тэг – ужас!, прим.пер.)
    • Мы используем шрифты, которые не соответствуют аудитории сайта – типа Comic Sans на сайте городской мэрии.
    • Мы, с помощью JavaScript, прокручиваем в статус-баре различные тексты.
    • На страницах нашего сайта слишком много/мало текста.
    • Мы используем подчеркнутый текст на нашем сайте (кроме как для выделения ссылок).
    • На нашем сайте есть вертикальные или по-другому развернутые тексты.
    • Посещенные ссылки на нашем сайте не меняют цвет. (всё! 90% сайтов – отстой :), прим.пер.)
    • Ссылки на сайте выделены неявно.
    • В некоторых областях страниц сайта слишком много ссылок.
    • На нашем сайте вообще слишком много ссылок.
    • У нас на сайте есть битые ссылки.
    • У нас на сайте есть битые ссылки и/или отсутствует страница с 404-й ошибкой.
    • На нашем сайте много сложных URL-ов (это каких? прим.пер.)
    • Ссылки на нашем сайте состоят их 10-20 слов (ага, типа http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html :), прим.пер.)
    • Адреса страниц на нашем сайте не достаточно информативны.
    Графика, Видео и Аудио
    • Логотип нашего сайта сделан непрофессионально.
    • Логотип на сайте – всего лишь некачественный скан нашей визитки.
    • Логотип находится не над… (Logo is not above the fold – кто скажет, что в данном контексте значит fold, тому буду очень благодарен, прим.пер.)
    • Логотип не присутствует в топе всех страниц нашего сайта, и не всегда ведет на главную страницу.
    • Держите собственные графические элементы подальше от рекламных баннеров (тем более, если они расположены в топе). Посетители часто игнорируют баннеры, а заодно могут проигнорировать и вашу графику.
    • На нашем сайте используются дешевые клипарты вместо высококачественной графики.
    • На нашем сайте есть горизонтальные разделительные блоки.
    • На сайте мы используем большие, полноразмерные картинки.
    • Графика на нашем сайте отвлекает внимание от, собственно, страниц.
    • Наш сайт автоматом грузит видео-файлы, вместо того, чтобы начинать загрузку после щелчка пользователя.
    • На нашем сайте используется trailing-курсор (что за trailing cursor? прим.пер.)
    • Наш сайт использует IE page transitions (что за «переходы страниц», «переходы по страницам»? прим.пер.)
    • На нашем сайте есть значки типа «Находится в разработке»
    • Размещая графику на сайте, мы не уменьшаем картинки с помощью графического редактора. Вместо этого, мы берем полноразмерную картинку 1200х800 точек, и меняем её размер с помощью атрибутов тэга IMG.
    • Наш сайт использует графику для оформления текста.
    • На нашем сайте уродливая цветовая схема (например, красный и зеленый). (ХА! www.artlebedev.ru/kovodstvo/130/#06, прим.пер.)
    • Графические иконки на сайте не логичны. Наша корзина покупателя не похожа на корзину покупателя.
    • Вместо того, чтобы назвать её корзиной, мы придумываем какой-нибудь другой дурацкий термин, типа «корзинка», «ящик». (Вообще-то в англ. есть спец. термин – «shopping card», и ему автор противопоставляет «basket». Для России этот конкретный совет неактуален, но, думаю, принцип ясен. Прим.пер.)
    • На нашем сайте необоснованно много анимации.
    • На сайте куча анимированных GIF-ов.
    • На сайте мы используем 3-D графику.
    • На сайте мы используем изображения с градиентами (хм…, прим.пер.)
    • На сайте мы используем утопленные или приподнятые (beveled) изображения.
    • На сайте мы используем изображения с тенями (хммм…, прим.пер.).
    • На сайте есть анимированная графика, от мелькания которой у посетителей начинаются припадки.
    • В качестве background-а сайта используется изображение, которое начинает дублироваться на больших экранах.
    • Изображение, лежащее в background-е недостаточно контрастирует с текстом, и его трудно читать.
    • Рисунки на нашем сайте не имеют заполненного текстом атрибута ALT, а если текст не требуется, атрибут не содержит ''.
    • Рисунки на сайте похожи на баннерную рекламу.
    • На сайте используются движущиеся графические элементы – типа снежинок, птичек, и прочей DHTML-лабуды.
    • Мы не используем цвет текста для усиления смысла – например, красный цвет говорит «это важно».
    • Никто не задумывался над тем, не настраивает ли цветовая гамма сайта посетителей других национальностей против нас.
    • Страницы нашего сайта имеют множество разноцветных областей.
    • На нашем сайте есть рядом лежащие блоки не сочетаемых цветов (типа красного и зеленого).
    • Страницы нашего сайта представляют собой одну большую карту-изображение (для тех, что не знает, это изображение с активными областями, которые, чаще всего, являются ссылками, прим.пер.).
    • На сайте есть изображения, страдающие «halo-эффектом» — уродливым размытым ореолом вокруг изображения.
    На сегодня всё. Чую эта часть содержит еще больше спорных моментов. Однако, полно и таких, которые, думаю, стоит зазубрить наизусть, особенно начинающим дизайнерам, приходящим в восторг от анимации, DHTML и JavaScript.

    Третья часть теста доступна всем желающим.
    Поделиться публикацией

    Комментарии 71

    • НЛО прилетело и опубликовало эту надпись здесь
        0
        довольно многое можно применить действительно красиво, а не по уродски. тот же halo, тени у изображения, даже bevelled картинки и 3D-анимацию, которая вообще непонятно, каким боком здесь.

        Согласен на 100%
          0
          Думаю, автор просто говорит исключительно о юзабилити, а не о дизайне в целом, тогда это объясняет пункты про сочетания цветов...
          С Темой согласен на Ромой согласен на 100% !
        0
        Вывод из прочитанного: web2.0-style сайты — отстой. Пользуемся академическим стилем.
        • НЛО прилетело и опубликовало эту надпись здесь
            • НЛО прилетело и опубликовало эту надпись здесь
              0
              "Плавная", мягкая, если угодно разноцветность Хабра визуально помогает разделить разные по смыслу направления.
              Это очень удобно.
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  Возьмем данную страницу:
                  1. Фон под ссылкой "Написать" и цвета фонов под ссылками "Коллектиные" и "Персональные" имеют разный фон, что помогает визуально разделить их.
                  2. Про плавность. Фактически на сайте используются 3 группы цветов и их оттенки (шутки типа, красный, зеленый и синий не принимаеются! :), первая группа: розовый/фиолетовый/красный/оранжевый, вторая: зеленый/салатный, третья: синий/серый/т.п. Все очень плавно, различия в глаза не бросаются. Грамотно.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      ничего не понял, они разделяются или нет? :)

                      C разным фоном, думаю понятно... (надеюсь по крайней мере, что тут непонятного? :)

                      По поводу плавности. Цитата из данного хабратопика:
                      На нашем сайте уродливая цветовая схема (например, красный и зеленый). (ХА! http://www.artlebedev.ru/kovodstvo/130/#…, прим.пер.)

                      Тут Vincent Flanders хотел сказать именно о юзабилити, а не о дизайне в целом.
                      Сами по себе цвета ярко, а не "плавно" бросаются в глаза, чего нет на Хабре, т.е. тут яркое различие используется в абсолютно обоснованных случаях, к примеру, для оценки комментария, яркое различие: плохо - красный, хорошо - зеленый.
                      А для выделения заголовков, используются плавно-различные фоны: серо-розовый, серо-голубой, серо-зеленый. Есть что-то общее (серая составляющая цвета) и в тоже время они разные.
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          про остальные цвета. ты мне так и не рассказал схожесть вышеприведенных двух пунктов и то, ради чего в один из них пихнули анимированный gif.
                          и не описал всю [немалую] палитру используемых на сайте цветов.

                          Это я уже прокомментировал, см. выше: надо этот гиф, по-хорошему, удалять по-скорее...

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

                          Странно, у меня все ОК. Не придвигаюсь к монитору, все хорошо, четко видно.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              ДА! :)
                              Но в данном случае, опять же, это обосновано:
                              Главное в "Прямом эфире" к какому хабратопику был оставлен комментарий, а потом уже кем.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Кому как :)
                        0
                        этот ужасный анигиф у популярных

                        Вот под этим подпишусь! Согласен на 100%, надо его поскорее удалить :), не серьезно как-то...
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Да, мне эта хабрашестеренка сразу глаза мозолить начала.
                            Напоминает сайт на Народе: картиночки мигающие, полосочки, и т.д.
                0
                Это точно, потому что
                "В некоторых областях страниц сайта слишком много ссылок" Сайты с облаками тегов вообще не прокатывают, судя по статье.
                  0
                  Думаю не стоит все воспринимать буквально. Облака тегов можно рассматривать как графичекий элемент навигации, очень удобно и стильно.
                    0
                    Это я просто смайл не поставил.
                0
                Все эте рекомендации, как подметил flint, для дизайнов в стиле 1.0, что на данный момент полнейший отстой.
                  0
                  Ну, во-первых не все, а во-вторых - что-значит дизайн в стиле 1.0, и в чем его отстойность?
                    0
                    Не все конечно, а про то в чем его отстойность обьяснить в комменте трудно, также как и обьяснить что такое веб 2.0, почитайте статью на которую я дал ссылку ниже.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Это вы к чему?
                      • НЛО прилетело и опубликовало эту надпись здесь
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        Согласен :)
                        А еще бывает удобный для использования или неудобный.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            хм. т.е. дизайнер типа нарисовал, а потом спец по юзабилити "как-то там" придумывает, как бы удобным этот дизайн сделать. или наоборот, "юзабилист" придумал, как будет удобно, а дизайнер потом "удобно" нарисовал?
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                В целом, согласен, что так часто бывает, вот только не соглашусь, что так должно быть. Я именно такую ситуацию наблюдаю, выступая в данном контексте в роли юзабилиста, и, често говоря, считаю, что делаю работу дизайнера за него самого. Если я дизайнеру ставлю задачу сделать промо-сайт, пожалуйста, пусть даст волю своей фантазии, а вот если я говорю, что сайт должен быть удобным, дизайнер в первую очередь должен кинуться почитать что такое юзабилити, и как это применять. Вот именно в этом случае получится и удобный и красивый сайт.
                                  0
                                  +1 поддерживаю. Я занимаюсь, тем что формирую структуру сайта, которую потом можно отдать дизайнеру и он с соблюдением всей моей структуры ее красиво оформит. А вот найти человека, который сразу бы делал юзабельную структуру и при этом красивую практически невозможно :(
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Нет. Я не согласен, что нужно брать макет от дизайнера, а потом ему говорить, что изменить. Нужно сразу показать скелет сайта и попросить ему мясо и кожу наростить.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Не согласен. Дизайн - это очень обширное понятие, которое включает в себя и юзабилити. Юзабилити - часть дизайна.
                                      Вы путаете работу дизайнера с работой художника. Это разные вещи.
                                      На 100% согласен с Алексеем Дружининым (интервью с ним), вот что он говорит:
                                      «В Лондоне некоторое время назад проводился конкурс среди дизайнеров на редизайн одной из улиц этого города. Приглашено было большое количество и дизайнеров, и художников, и просто около-творческих людей. Задача на первый взгляд простая – сделать редизайн одной из старейших улиц Лондона. После нескольких месяцев работы на суд было предоставлено несколько работ. Среди них было много граффити, много предложений во что можно раскрасить дома, дорогу и магазины с киосками – вообщем много очень интересных, но именно художественных проектов. Выиграла женщина, Дизайнер, которая вместо того чтобы заниматься украшательством улицы и домов, сначала прошлась по ней, поговорила с людьми, расспросила их о сути проблемы. Она вышла защищать свой проект не с кучей бордов и красивыми картинками, а рассказала комиссии, что на этой улице, в рамках выделенного бюджета, можно сделать единственную правильную с точки зрения дизайнера вещь – положить на дороге новый асфальт, потому как старый совсем уже плох. Вот это – я считаю работой профессионального зрелого Дизайнера с большой буквы. Она победила в конкурсе».
                                      Хочется только прокомментировать это:
                                      Дизайнер сделала работу исключительно по юзабилити и в данном конкретном случае, именно это и требовалось.
                                      Юзабилити - часть дизайна!
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          У вас врожденный порок не соглашаться?
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            Это не менеджмент, а грамотная работа дизайнера.
                                            Аналогия не обоснована, т.к. уверен в том, что бюджет был более чем солидный, а предложение положить новый асфальт было выдвинуто совсем не в целях экономии, скорее всего был предложен асфальт высокого качества + качественная работа по его укладке, т.е. тут нет никакой экономии: хороший бюджет - хорошая работа.
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                0
                                                Раз организовали конкурс - то победить должен был тот, кто предложит лучший решение.
                                                Она это сделала.
                                                Работа эта должна была быть и была ее.
                                                Все.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    Что она и сделала: осталась думающим дизайнером, а не художником.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        0
                                                        Вы рассуждаете в отрыве от реальности, рассматриваете идеальный случай.
                                                        А в реальности все бывает далеко не так, как хотелось бы.
                                                        Конечно, логичнее было бы сначала задуматься о людях (властям!), проживающих в этом районе, а потом уже об эстетический стороне этого вопроса, об украшательствах.
                                                        Но в этом то и дело, что дизайнер исправила ошибку властей, когда занялась тем, что нужно в первую очередь, на то она и Дизайнер с большой буквы!
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                            0
                                                            Это неправильно.
                                                            Нужно смотреть как есть, и уж только потом, стараться сделать так, как должно быть.
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Дизайнер не может и не должен отстраняться от действительности.
                                                                Теперь понятно?
                                                  0
                                                  дизайнер высчитал стоимость укладки асфальта и выбрал самый лучший для него материал :D
                                                  не смеши меня.

                                                  Я имел ввиду совершенно не это, Вы это прекрасно понимаете, не надо писать ерунду.
                                0
                                Хабра - дизайн в стиле 2.0
                                Вебпланет - дизайн в стиле 1.0
                                руководство по дизайну Веб 2.0 - почитайте, думаю найдете отличия от 1.0 и 2.0. Лично мне эта статья очень сильно помогла.

                                А 2.0 это не толькоя аякс, тэги, социальность, это скорее стиль сайтостроения и дизайн неотемлемая часть :)
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    ух ты. социальность и тэги - признак w2.0 ? ;)
                                    раньше этих вещей не было?

                                    Я вроде уже написал, что это стиль сайтостроения. Аякс, теги и социальность - это компоненты, которые в себя вобрал в2.0

                                    назови мне четкую границу — где кончается 1 и начинается 2. смогешь? :)

                                    Да без проблем, граница в том месте, гда заканчивается пафос и творчество сливается с прагматизмом :)))
                                    0
                                    Почитал. Спасибо за ссылку - действительно хорошая статья! Только я бы не сказал, что "дизайн в стиле веб 2,0" - лучше. Он отличается, и он сейчас в моде, но, думаю, вы согласитесь, что полно сайтов "в стиле 1,0", которые очень удобны и красивы.
                                      0
                                      Ага, как есть и в стиле 2.0, но очень страшные и неюзабельные :)
                                    0
                                    +1!
                                  0
                                  много размытых объяснений и спорных моментов.
                                  Буржуйские статьи — в топку. Даешь рашн артиклс!
                                    0
                                    Согласен, очень много недосказанности и внутренних противоречий. Хотя, это один отдельно взятый человек, да еще приводящий вопросы в форме теста.
                                      0
                                      У этого человека довольно-таки странные взгляды на дизайн. Которые, к тому же, остались на уровне конца 90-х. По-моему, последние лет 7-8 он не был в Интернете.

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

                                      Мое мнение: либо эта статья — стеб, либо автор просто мудак, простите за выражение.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      +1
                                      (Logo is not above the fold – кто скажет, что в данном контексте значит fold, тому буду очень благодарен, прим.пер.)
                                      скорее всего имеет ввиду перевод как лацкан. В роли лацкана здесь выступает та часть содеражательная страницы, ради собственно которой траница и создается, по научному не интересовался как называется.

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

                                      На нашем сайте много сложных URL-ов (это каких? прим.пер.)
                                      например таких, просто пример кликать не надо http://www.search.com/click?sl,marin.1.118.1554.1.3.%25D0%25BA%25D1%2583%25D0%25BA%25D0%25BA%25D0%25BF.0,http%3A%2F%2Fwww%2Eradarr%2Ekiev%2Eua%2Fforums%2Flofiversion%2Findex%2Ephp%2Ft14229%2Ehtml

                                      (что за «переходы страниц», «переходы по страницам»? прим.пер.)
                                      симпатичная штука, когда ипользуется различные эффекты затенения и тому подобное при переходе страниц, работает только из под IE, но при этом ужасно тормозит маломощные машинки. Всего около 25 различных эффектов. На сегодняшний день проще сделать это на ява скрипте.

                                      (всё! 90% сайтов – отстой :), прим.пер.)
                                      и с точки зрения стиля и сточки зрения наполнения полностью согласен, смайлик можно стереть =)
                                        0
                                        Благодарю за пояснения! :)
                                        0
                                        above the fold - на первом экране (то, что видно без прокрутки)

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                        Самое читаемое