30.01.2008 → Статьи, Юзабилити
ТОП-10 юзабилити-ошибок рунета
Материал основан на 11 тестированиях сайтов в рамках проекта «Час юзабилити» и на личном опыте автора.
1. Плохой текст.
Вне всякого сомнения самая распространенная проблема.
Примеры (откроются в новом окне):
Чаще всего:
- Текст не адаптирован для Сети (слишком большие абзацы, много воды, не расставлены нужные ссылки, возможно текст в конкретном месте вообще не нужен как таковой).
- Шрифт слишком маленький для комфортного чтения (даже для людей с идеальным зрением).
- Цвет текста не контрастный на своем фоне.
- Между-строчное расстояние слишком маленькое (об этом забывает 90% дизайнеров, часто даже хороших).
- Текст растягивается в слишком длинные строки (не указано max-width).
- Текст плохо иллюстрирован там, где это бы сильно помогло его восприятию.
- Текст сложно воспринимать, потому что элементы графического оформления страницы его подавляют (даже тогда, когда текст — главное на странице).
- Заголовки не отличаются по размеру от текста (в основном проблема встречается на «попсовых» CMS типа Битрикса).
- Ссылки плохо отличимы от текста (некоторые дизайнеры уверены в том, что это абсолютно нормально, и их уже не переубедить).
- Не используется логическое форматирование (списки, код, цитаты).
- Текст безграмотный и грамматически, и в пунктуации (тире, отступы, кавычки — очень редко хорошие).
2. Лишние вещи и боязнь пустоты.
Лишние графические элементы есть практически на каждом сайте. Они не несут никакого, даже часто атмосферного, позитивного эффекта, но отвлекают пользователей от главного.
Сюда же можно отнести желание дизайнера заполнить каждый сантиметр пользовательского экрана, чего бы это не стоило.
Примеры:
Чаще всего ситуация возникает, когда все нужное на странице уже размещено, а дизайн все еще смотрится «блекло». В результате на страницу добавляется группа совершенно лишних там элементов (декоративных, текстов, элементов управления), негативное влияние которых на уже размещенные, действительно важные вещи, игнорируется.
3. Отсутствие единого стиля и стандартов оформления.
Грешат почти все. Например, часто бывает что при оформлении заказа в интернет-магазине в несколько шагов кнопки «Вперед» и «Назад» в каждом окне выглядят по разному, расположены в разных местах, и даже называются по разному («Продолжить», «Дальше»). В результате единый процесс оформления товара разбивается на несколько независимых этапов.
Также очень редко администраторам сайтов удается выдержать оформление текста в одном стиле. Например, в одном месте используются списки, в другом — нет. В одном месте ссылки синие, в другом, такие же ссылки — темно-синие.
4. Плохая мета-информация (URL, title, favicon).
Очень редкий сайт не имеет проблем в этой области.
Примеры c URL:
http://site.ru/nav/id23567/
http://www.site.ru/1/7/ssylka-primer1245.html
http://www.site.ru/2008/01/02/ssylka-primer.html
Чаще всего:
- URL не «читается».
- Нет единства системы ссылок, контент доступен на разных доменах, с разными префиксами и суфиксами, перенаправление не настроено.
- Транслит используется там, где он совершенно не нужен.
- Расширение документов показывается даже тогда, когда оно совершенно не нужно.
- Шаблон не подходит типу размещаемых документов, например в нем используется текущая дата, когда материал абсолютно статичного характера.
Сюда же можно отнести в основном две вещи: ориентация исключительно на интересы SEO при задании заголовков (title) страницы (встречается очень часто) и отсутствие либо плохое качество мини-иконки (favicon).
5. Плохая 404-страница.
404-страница, как таковая, встречается почти всегда, но оформлена правильно крайне редко.
Примеры:
Чаще всего:
- Страница оформлена в обычном шаблоне системы, факт ошибки плохо определяется пользователем.
- Не указаны возможные причины случившегося.
- Не предложен список ссылок, по которым можно перейти.
- Не дан контактный адрес администрации.
6. Текущее положение пользователя на сайте указано плохо.
На большинстве сайтов текущее положение (в пунктах меню, в иерархии сайта) не указано вообще, либо указано очень плохо.
Примеры:
7. Сайт заточен только под конкретную платформу.
Мелочи в этой сфере есть у всех, но и крупные недоработки встречаются довольно часто.
Что удивительнее всего, заточенность сайта под альтернативные браузеры (Firefox, Opera) встречается довольно часто, хотя и уступает, конечно, концентрации разработчиков только на IE. Сюда же можно отнести концентрацию только на одном разрешении экрана — сейчас это обычно 1280*1024. На существование Mac и Linux мало кто вообще обращает внимание.
В результате страдают пользователи с настройками отличными от настроек заказчика сайта (у него то работает все хорошо, а что бывают и другие параметры, заказчики знают редко).
8. Нет возможности подписки на обновления.
Здесь все просто: наличие на сайте постоянно обновляемого раздела выглядит просто смешно, если у пользователя нет никакой возможности подписаться на новые записи в разделе — ни RSS, ни подписки по почте. Обычно этим грешат корпоративные сайты в разделе своих новостей.
Пример:
9. Применение технологии Flash неуместно.
Самый яркий пример последнего месяца — уже фактически классика жанра top4top.
Пример полной уместности Flash в качестве контрпримера — bonga.net
10. Не прописаны «юзабилити-атрибуты» (title, alt, теги label, width и height у картинок, …).
На элементах навигации, ссылках, картинках — даже тогда, когда это очень бы помогло и сделало сайт доступнее. К сожалению, до таких мелочей дело обычно не доходит, потому что редкий заказчик способен понять их значение.
Проголосовать за статью можно здесь:
http://news2.ru/story/81892/
Как и на этой странице ;-)
http://blog.perfectomania.com/usability/top-10-yuzabiliti-oshibok-runeta/
http://blog.perfectomania.com/404/
Как и на этой странице ;-)
Здесь картинки (в новом окне (?) или хотя бы предупредить, что откроется в этом). Это и к вопросу
ЗЫ. Спасибо за статью ;-)))))
Вот честно, проголосовал бы где угодно, если бы не требовали регистрацию…
Достало уже заполнять формы и подтверждать по e-mail…
Где у нас тут проходят анти-… движения? Зарегистрируюсь %-)
By the way…
А вот здесь в комментариях кавычки так и должны быть на белом фоне или таки глюк? ИМХО прозрачные смотрелось бы лучше…
Как раз неудивительно, что значительное количество сайтов затачивается в первую очередь под FF и Opera. Как правило именно этими браузерами пользуются верстальщики и веб-программисты.
Сергей Савостин, спасибо, поправлю! Только, ИМХО, транслит у меня как раз уместен.
Алексей Д., а как же заказчик его примет? :)
А сайты обычно делаются для верстальщиков и веб-программистов?
Тогда неудачный пример в статье. Где транслит неуместен?
Сергей Савостин, транслит неуместен, если уже что-то показывает на русский язык статьи (.ru) — это раз. И два — когда аудитория и так знает английский.
Я для себя исходил из первой позиции, у меня .com. А так моя аудитория вся знает английский.
Я опять не понял. Если аудитория знает английский, то зачем транслит? Может тогда логичнее top-10-usability-errors-of-runet типа? И почему тогда название раздела usability, а статьи yuzabiliti?
By the away, кинь ссылку на статью, которая на твой взгляд наиболее понятно объясняет нафига эти понятные урлы нужны людям? Про поисковики понятно. Но не думаю, что транслит поможет правильно проиндексировать эту статью…
Кстати, а почему не .ru? Раз такая позиция… Я б уже давно сменил ориентацию доменов с территориальной на языковую…
http://www.artlebedev.ru/kovodstvo/paragraphs/48/ ? :)
А на самом деле я знаю, выбрал себе шаблон немного неправильно. Как только появится время — потестирую перенаправление и изменю. .ru — я не хочу, это связано с планами на будущее блога и домена :)
У Лебедева ни слова про транслит, разве что
т.е. фигня малятки с yuzabiliti ;-)
Все равно не вижу целесообразности транслита…
P.S. очень нравится фича WordPress по подбору урлов при ошибках набора, думаю это покрывает неудобства и разночтения транслита.
1. Так ли нужна подписка по РСС для корпоративных сайтов? Да и кто будет следить за этими новостями он-лайн? это никому не нужно и очень редко кто вообще в этом разбирается. Человек (бизнес-мен какой-то или клиент) зашел на сайт, посмотрел новости бегло, может нашел что-то для себя интересное.
2. Картинки в текущем окне это зло, та и popup по моему как-то приятнее, не нужно никуда переключаться.
Tod, 1 — для многих компаний это важно. Если ты тесно работаешь с каким-то сервисом (например хостингом регистратором) — то знать о их акциях и отключениях очень полезно.
2 — исправил.
Тогда и новости убираем…
Мне кажется чаще не используют RSS из жадности на посетителей - рейтинг (счетчики, баннеры и пр. циферки) падают - я по RSS “посещаю” по 100 сайтов в день, только они не в курсе…
Мне все равно как задумал открывать картинки автор, лишь бы я об этом узнал до того, как кликну на ссылку…
Сергей Савостин, я там предупредил, что будет в новом.
Раз пошла такая пьянка, Рома:
Конечно, лебедевское (наверное) “электропочта” оно классно, но отчего required по-ихнему?
да тут уже не об этой странице я так понимаю, а о “вообще” разговор пошёл…
Сергей Савостин, исправил required :)
Может лучше вот так:
Электропочта (не будет опубликовано)*
все давно уже знают что звездочка возле поля = обязательно
И еще одно, подойди к постам в ЖЖ более человечно, почему б не делать кросспост самому, а то перепечатка вордпресса смотрится убого.
И убери галочку “Подписаться на комментарии”, ИМХО это навязывание
А в “час юзабилити” уажи хотя б какую тему вордпресса взяли, и укажи что это вордпресс вообще, поддержи разработчиков, не будь жлобом.
Nicholass, поддержу обязательно, сейчас как раз думаю менять тему.
А что не так в ЖЖ?
Ну, это кому как. Я подобную самодеятельность терпеть не могу. Сам в состоянии решить, в каком окне открывать.
По новостям. РСС это удобно чисто для тебя и на определенных сайтах. Но понятие “корпоративного сайта” несколько иное в моем понимании:) Поэтому отказываться от новостей, как предлагает Сергей Савостин, не стоит. Самсунг - корпоративный сайт, есть новости без РСС и, думаю, это правильное оптимальное решение.
Артём Сапегин, в данном посте картинки большие, поэтому все нормально. Но я говорил “в общем”, когда фотка 400*400 открывается в новой закладке - это жесть. Лучше использовать простой popup.
«Междострочный» пишется слитно.
Транслит у вас не уместен.
Особенно, чудно слово «юзабилити» выглядит. =)
А статья ни о чем. Все то же писалось пять лет назад другими авторами про интернет в целом.
Статья хорошая, но примеры не очень наглядные. также хотелосьбы увидеть примеры где это сделано хорошо.
по RSS. Мне кажется это стоит отнести больше к заботе о посетителе и отсутствие оного не относить к недостаткам…
Куча иконок в конце статьи наглядно демонстрирует ошибку №2 :)
Убрал значки :)
И если кто не заметил, в статье говорится не только о RSS, а вообще о подписке, всеми способами.
Почитал, спасибо!
Понял, что стоит и сейчас изменить на своём сайте:
* Поменьше транслита в названиях статей
* Ссылка на контакты на 404-странице
* max-wight указать
* Прописывать высоту и ширину картинок в статьях
А так, всё хорошо =)
- Так ли нужна подписка по РСС для корпоративных сайтов?
- Тогда и новости убираем…
why?!! где логика?
рсс и новости не обязаны ходить строем
а так интересно :) про урлы правда так и не понял почему приведённые примеры кажутся автору неуместными
Отсутствие ленты RSS в новостях вынуждает меня занести сайт в букмарки, запомнить насколько он мне интересен и периодически вспоминать о нем и заходить проверяя “а не добавил ли автор какую новость?” Более того в силу природного склероза и лени могу на такие сайты не заходить месяцами, а то и вообще не вспомнить о них. Лично у меня желание делать столько телодвижений ради сомнительного удовольствия в виде возможности узнать какие-то новости очень мало. Да и зачем мне это? Пусть за меня это делает ридер.
Если автор не потрудился ради моего удобства, то зачем ему (да и мне) этот сайт?
Еще к вопросу о uzabiliti ;-)
Как подписаться на получение комментариев к статье, не оставляя комментарий? RSS комментариев видел, но опять же в силу своей лени заносить эту ленту в и так разбухший от не обновляемых лент ридер не хочется - потом точно не удалю. Да и сайту наверное через неделю не нужно будет ежечасное обращение к RSS, который не обновляется…
сори, торможу, нашел.
Не, торможу, что торможу. Вопрос остался ;-)
Сори за “засраные каменты”
[...] Настенко, скорее всего, “за” Нильсена. Потому что его Топ-10 юзабилити-ошибок рунета во многом повторяют правила юзабилити, высказанные [...]
Ну ещё, частенько, нет версии для печати.
А иногда ой как надо, вот я хотел-бы себе распечатать, без хэдера, футера и правой колонки, а никак - ручками допиливать придёться =)
боязнь пустоты вызвана тем что клиент не оценит эту пустоту.
Некоторые делают это средствами css, но отдельной ссылки не ставят.
Согласен, что делают далеко не все…
9. Применение технологии Flash неуместно.
Самый яркий пример последнего месяца — уже фактически класика жанра top4top.
—-
чтобы не быть голословным. Чем он там неуместен? Если быть более конкретным, высказывания “Применение технологии Flash неуместно” мне кажется высоко непрофессиональным. Он всегда неуместен или частично, в зависимости от фаз луны?
Сергей Савостин, я знаю проблему с подпиской. Это глюки моего хостинга, а я в них не спец. Но я уже нашел проблему, нужно собраться и исправить (php-программирование вспомнить).
andry, Flash уместен тогда, когда оформление важнее информации. Презентации всякие, креативщики, художники. На информационных сайтах — только в виде вставок в нужных местах.
Интернет тяжело болен. Пока вы читали эту статью, появилась 1000 новых отвратительных и ненужных сайтов.
Я не знаю, что с этим делать. Впрочем, эта проблема решится сама по себе: человечество самоуничтожится вместе с плохими сайтами. Осталось лишь немного потерпеть. Америка следует по пути Атлантиды…
поп-апы - это зло!
и картинки в новом окне - тоже.
потому что это ПРИНУЖДЕНИЕ!
если кратинка (ссылка) открывается в текущем окне. то я могу открыть ее в текущем одним кликом мыши, и в новом - двумя (правой и в выползшем меню в опциях).
зато, если прописано открываться в новом окне - я уже никак не смогу открыть ее в текущем. (ну может разве в каком-то специфическо браузере или навесив плагинов (если такие существуют))
Шрифт на скринах - ничить не меньше шрифта в комментариях на вот этой странице.
во-первых - на любителя.
во-вторых - он должен быть не большой и не маленький, а ПРОПОРЦИОНАЛЬНЫЙ - меньше шрифт меньше отступ.
и в-третьих - уж лучше маленький чем как в статье выше - везде разный. ;)
Учитывая возможности яваскрипта и яваскриптовых фреймворков - флеш практически вообще не уместен… :)
Ну тут однобоко как-то…
“Голым” или с “дырками” сайт тоже не должен быть.
Все хорошо в меру… :)
Спасибо.
Хоть и не дизайнер я, темки иногда приходица переделывать
просто спасибо за хорошую подборку, освежил память ;Ы
Ну чЬто же Вы, Роман (”р” грассированное, французское) пишите
а сами с ошиПками пишите - в слове “классика” два Ка - стыдитесь :-)
короче, как всегда - ругаем других, не видя своих ошибок ;)
хороший, полезный материал :-)
Мда, писать умный текст об оформлении сайтов и при этом сохранять скриншоты в jpg! Уму непостижимо. Стыдно.
“На информационных сайтах — только в виде вставок в нужных местах.”
Это в библии написано?! =)
Почему нет? я знаю две причины:
1. Поисковики (тоже решаемо, гугль скоро обещает совместимость)
2. Скорость загрузки (во всех развитых странах это уже не проблема, видео грузят пол мира, что уж там флеш)
Вы знаете еще что-то объективное?
Господа, да, что вы на него накинулись. Обычный блог 15 летнего мальчика. Все гавно один я в белом.
Автор, посмотри сначала на дизайн своего блога, а потом ищи недостатки у других. У тебя на все 10 пунктов есть и ещё на 50 найдётся.
А про флеш я вообще молчу. Ну, сделали люди сайт во флеше, целиком, ну и что, что он поисковиками не ищется, они по-другому его раскручивают. Если такой умный сделайте лучше.
Пригодилось!
[...] Link Diagnosis Tool - инструмент для анализа внешних ссылок, ТОП-10 юзабилити-ошибок рунета, Копирайт - дело тонкое, 10 аспектов внутренней [...]
На счёт пятого пункта :)
Можно для примера было дать линки на страницу ошибок яндекса и сайта тёмы :)
Кстати,
на счёт чёрного властелина, раз уж здесь упомянули его.
Ещё в сентябре (25 числа) писал хабракоманде и в личном блоге о глюке с ифреймом и к чему может это привести. Пофиксили частично, но не полностью :)
Скажу так. Сейчас очень много горе-дизайнеров появляется и будут появляться, потому как эта ниша приносит деньги тому, кто хотя бы получил прибыль с первого своего “мега-проекта” на 2 страницы убогого дизайна. Есть дураки-заказчики, которым пофиг - лишь бы в интернете было, есть аналогичные новички-дизайнеры, у которых зашкаливает самооценка после первой работы. В интернете подобных в статье недочетов море.
Пройдет немало времени, когда пользователь вырастет и будет знать что такое качество, и что его за $50 не купишь. Остальное - интернет-помойка.
Кстати чтобы избавиться от этих недочетов, нужно вешать на сайте типа “Книга жалоб и предложений”. Книга только для разработчиков, чтобы имели обратную связь с клиентами. Это подойдет больше большим сайтам как Розетка, потому как бюджет на это тоже нужно учитывать.
Лишние вещи и боязнь пустоты - помоему эо просто жадность, зачем быть пустоте если её место прекрасно займет реклама
Даа,таких сайтов сейчас море,в частности почти все фрихосты ucoz,narod и др. да и на платных хостах такое можно увидеть
Больше всего бесят плохо сверстанные шаблоны, иной раз зайдешь на сайт и в мозиле невесть что отображается.
Спасибо, буду пытаться не делать таких же ошибок ;-)
Самое ужасное то, что некоторые веб-мастеры не стремятся признать собственные ошибки.
>Самое ужасное то, что некоторые веб-мастеры не стремятся признать собственные ошибки.
Это вечная проблема, зачастую просто из-за лени )
Ошибок в рунете бла куча и ещё растёт при этом эта куча т.к.их никто не спешит исправлять их исправлением зачастую занимаются определённые люди которые типа исправляют их ну и добовляют им за это платя вот они и на живаются на этом. Такшто ошибки были и будут!
Спасибо за статью, есть о чём подумать и так много поправить в своих сайтах.
Пойду править свои сайты))
Спасибо… ты открыл новый взгляд на создание сайтов..
Есть коммерческие сайты, у которых есть явные проблемы по всем 10 пунктам и тем не менее эти сайты работают и приносят их владельцам прибыль. Кое-что вообще не фиксится годами. Даже если знают, что есть такие проблемы, у народа просто времени нет или пофиксить кучу мелочей не является для них приоритетной задачей.
Удобно собрал в одном месте самые частые глюки, спсб.
Хороший и полезный список! Особенно понравилось про 404 ошибку.
[...] ТОП-10 юзабилити-ошибок рунета [...]
[...] избегать (пишет Роман Настенко из блога вебмастеров) ТОП-10 юзабилити-ошибок рунета (пишет Роман Настенко из блога [...]
Данная страница тоже отличается безграмотностью. Даже статья
ею грешит. То, что при написании комментария текст уходит за
границу рамки, уже совсем ни в какие ворота не лезет.
Сама статься весьма кстати. Уже надоела безалаберность.
[...] ТОП-10 юзабилити-ошибок рунета Можно распечатывать и вывешивать перед собой на стену. Кратко, информативно, ни единая строчка не ставится под сомнение. Базовая основа любого интернет-магазина и остальных видов веб-сайтов. Попадаются толковые сообщения, автор неплохо разбирается в юзабилити, о чем свидетельствуют его отчеты. Не мега-профи, но и цена соответствующая, всего 60$. Рекомендую как толкового специалиста, который способен значительно увеличить прибыль с вашего ресурса за минимальные деньги. [...]