СсылкиКолонка автораСтатьиОбзоры программ и сайтовПримеры удачных решенийПримеры неудачных решенийЦентр Практичных Программ

10 главных ошибок в Web-дизайне

Александра Максимова

По материалам исследований Якова Нильсена,
(http://www.useit.com), май 1996 - май 1999.

10 главных ошибок в web-дизайне. Год 1996

В мае 1996 года Яков Нильсен опубликовал статью, сразу же ставшую классикой – “10 главных ошибок в web-дизайне”. Вот их список:

  • Использование фреймов
  • Бездумное использование новейших технологий
  • Прокручивающийся текст, динамическая анимация
  • Сложные URL
  • Исчезнувшие страницы (ошибка 404)
  • Слишком длинные страницы
  • Плохая навигация по сайту
  • Нестандартные цвета ссылок
  • Устаревшая информация
  • Чересчур долгое время загрузки

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

10 главных ошибок в web-дизайне. Год 1999

“В мае этого года я понял, что моя первая статья на удивление актуальна сегодня, три года спустя. Об этом говорит 400 000 посещений ее на моем сайте. В среднем ее читают 17 000 раз в месяц. Даже если некоторые читают эту статью несколько раз подряд, все равно получается, что мои “10 ошибок” прочли около 10% людей, чьими усилиями в мире появились 5 миллионов сайтов” - говорит Нильсен.

Большинство ошибок, которые он описал в первой статье, до сих пор встречаются так часто, что стоило бы настоятельно рекомендовать всем новичкам в web-дизайне ознакомиться с этим материалом трехлетней давности. Так как же обстоит дело с этими ошибками в наши дни?

В таблице показаны, как сегодня влияют на удобство пользования сайтом все 10 ошибок, перечисленные Нильсеном в 1996.

Ошибка

Современный анализ

Серьезность проблемы

1. Фреймы Фреймы уже не такая серьезная проблема, которой они были году в 1995 или в 1996 – улучшились технологии броузеров. В 3-ей версии Нетскейп зафиксировал кнопку Back (Назад), а так как никто больше не пользуется 1-ой и 2-ой версиями, то значит, пользователь может осуществлять навигацию по сайтам с фреймами без особых помех. В 4-ой версии решили проблему с распечаткой фрейма (хотя еще нередко пользователи получают распечатку совсем не того вида, какого ожидали). 5-ый Интернет Эксплорер наконец-то решил проблему с закладками на страницах с фреймами. Однако фреймы мешают воспользоваться функцией Send URL (Отправить URL) и делают страницу более громоздкой и неудобной. Средняя
2. Использование новейших технологий Пользователь, столкнувшись с примитивной ошибкой JavaScript, покинет ваш сайт немедленно. Стоит ли ему ломать голову над тем, как это работает, если есть еще 5 миллионов других сайтов? Поэтому прежде, чем использовать новые технологии в web-дизайне, подумайте – как воспримет их пользователь, и насколько они необходимы на вашем ресурсе. Простая погоня за модой и нововведениями не имеет смысла. Очень серьезная проблема
3. Прокрутка текста и усложненная анимация С 1996 года этот недостаток лишь усугубился. Пользователи отождествляют такой дизайн с рекламой, которую они уже научились автоматически игнорировать. Очень важно делать любые элементы навигации и содержания непохожими на тот рекламный дизайн, который преобладает сейчас в Интернете. Пользователи прекрасно распознают все, что не связано напрямую с темой ресурса, и заставить их прийти на ваш сайт вторично будет уже гораздо сложнее. Очень серьезная проблема
4. Сложные адреса (URL) Сегодня люди уделяют Интернет-адресам меньше внимания, нежели три года назад. Большинство сайтов сейчас имеют хорошую навигационную поддержку, и пользователи полагаются при определении тематики сайта именно на нее, а не на адрес. Тем не менее, все каталоги (directories) и названия страниц должны быть связаны с тематикой и понятно названы, чтобы пользователь мог рассматривать сам URL как дополнительную помощь в навигации. Серьезная проблема
5. Исчезнувшие (ошибка 404) страницы Скорее всего, посетители сайта не застрянут на такой странице, так как большинство уже знает, что нужно просто “отсечь” конец адреса – и попадешь на главную страницу сервера.

Правда, этот способ не всегда известен неопытным пользователям и раздражает опытных.

Средняя
6. Прокрутка навигационного блока 90% пользователей не прокручивают навигационный блок, а выбирают несколько из видимых на первом экране опций. Это правило сейчас меняется, так как пользователи уже знают, что страницы можно прокручивать, и что важная информация может находиться также “под” первой видимой на экране частью сайта. Однако на всех сайтах наиболее часто используются те элементы навигации, которые расположены на первой странице. Особенно это заметно, если первые несколько ссылок навигационного блока описывают главную тематику сайта – пользователь, как правило, стремится найти нужную информацию, а не изучать оставшиеся ссылки, поэтому на остальные элементы навигации может даже не обратить внимания. Несущественная проблема
7. Малопонятная навигация по сайту Встречается это не так уж часто, но если есть, становится серьезной проблемой. Люди уже привыкли к определенным канонам в дизайне и навигации: логотип, он же ссылка на начальную страницу, слева вверху; ясное указание на то, к какой части сайта относится данная страница и наличие ссылки на главную страницу этого раздела, т.д. Если такие базовые элементы навигации отсутствуют, пользователь может просто “заблудиться”. Серьезная проблема
8. Нестандартные цвета ссылок Продолжает оставаться проблемой, поскольку пользователи полагаются на цвета ссылок, чтобы понять, какие страницы сайта они уже посетили. Опять же, когда игнорируются стандартные цвета ссылок, пользователь начинает автоматически щелкать мышкой на всех подчеркнутых словах в тексте, которые далеко не всегда являются ссылками. Серьезная проблема
9. Устаревшая информация Чем дальше, тем хуже, так как множество сайтов тематикой сходной с вашим продолжают постоянно обновляться и развиваться. Сейчас же, с развитием электронной торговли особенно важно не потерять доверия посетителей, а показать им устаревшую информацию – верный способ дать понять, чего стоит ваш сайт и ваши услуги. Обратите внимание, что архивы и информация о старом товаре или продукте – как раз достоинство сайта, а не недостаток, и они очень сильно отличаются от устаревшей информации. Очень серьезная проблема
10. Медленная загрузка страницы Несмотря на обещания многих гуру от Интернет-технологий, эта проблема так пока и не решена. По моему мнению, ее нельзя будет решить до 2003 года, когда в нашем распоряжении будут высокопропускные каналы связи. Конечным пользователям придется ждать этого еще лет 5, то есть, приблизительно, до 2008 года. Очень серьезная проблема

Таким образом, можно сделать заключение, что

  • Все ошибки web-дизайна 1996 года можно назвать ошибками 1999 года
  • Девять из десяти ошибок причиняют серьезные неудобства пользователям. Их нужно обязательно избегать при создании своего web-ресурса
  • Прокрутку навигации можно уже даже не считать ошибкой, если только навигация сделана с правильным продуманным дизайном. Тем не менее, в любом случае, когда длина навигационного блока больше одного экрана, можно рекомендовать создателям сайта тест на удобство его использования.

10 новых ошибок в web-дизайне

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

1. Сбой или замедление работы кнопки Back (“Назад”)

Для пользователя кнопка Back (“Назад”) – жизненно необходимый элемент навигации и, кстати, второй по частоте использования( на первом месте гиперссылки). Пользователь уверен, что куда бы он не забрел в поисках информации кнопка Back всегда поможет ему вернуться на известную территорию или просто на пару страниц назад.

Это так и есть, если, конечно, web-разработчики не допустили один из популярных грехов современного web-дизайна:

  • Появление нового окна браузера (см. Ошибку N2)
  • Использование моментального перенаправления запроса - каждый раз, когда пользователь нажимает на Back, он попадает на страницу, с которой его в ту же секунду пересылают на страницу, с которой он пытается уйти.
  • Запрещение кэширования – каждый раз при при нажатии на кнопку Back происходит новый запрос сервера, что усложняет навигацию по сайту и увеличивает время ожидания.

2. Появление новых окон браузера

“Когда на экране появляются новые окна, которых я не просил открывать, мне сразу приходит в голову продавец пылесосов, который, войдя в дом, вываливает на ковер пепельницу, а потом успешно убирает мусор. Так вот – не надо засорять мне экран, особенно учитывая то, как убого управляется с окнами самая популярная операционная система! Если мне нужно будет новое окно браузера, я сам его открою” – пишет Нильсен.

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

3. Нестандартное использование графических элементов управления

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

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

Постоянство действий еще одна причина, по которой не стоит открывать новые окна в браузере. Стандартное следствие нажатия на гиперссылку – появление новой страницы в том же окне браузера. Любой другой результат не оправдывает ожиданий пользователя, а значит заставляет его усомниться в своей способности работать на web’е.

В настоящий момент больше всего закон постоянства любят нарушать в использовании графических элементов управления – например, кнопок-селекторов и флажков (radio buttons и checkboxes). Правильная работа этих элементов описана в Стандартах пользовательского интерфейса (Windows UI Standard, Macintosh UI Standard, Java UI Standard). Каким из трех основных трех стандартов воспользуетесь вы, зависит от того, какая операционная система является основной для большинства ваших пользователей. Скорее всего, это Windows. Впрочем, больших различий между ними, по крайней мере, в работе основных элементов интерфейса, нет.

Например, по правилам действия кнопок-селекторов (radio-buttons), нужно выбрать одну из нескольких предложенных опций, однако никаких изменений не происходит, пока пользователь не нажмет кнопку ОК, подтверждая свой выбор. К сожалению, я нередко встречал сайты, на которых это базовое правило нарушалось – действие происходило сразу после выбора опции. При всей своей кажущейся незначительности именно такие нарушения правил работы элементов пользовательского интерфейса затрудняют работу с Интернетом.

4. Скудность сведений об авторах

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

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

Также плохо, когда вместо ссылок на работы и биографию имя автора становится ссылкой на его, автора, электронную почту (mailto:).

  • во-первых, читателю свойственно, скорее, желание узнать об авторе больше, нежели напрямую с ним контактировать. Конечно, дать электронный адрес автора очень важно, но лучше делать это в конце биографии или списка работ, но никак не вначале – для первого ознакомления.
  • во-вторых, это опять нарушает принятые в Интернете стандарты – когда вы щелкаете мышкой на имени-ссылке, вы ожидаете увидеть новую страницу с информацией об авторе. Вместо этого вам предлагается тут же написать ему письмо. Такие ссылки существенно уменьшают удобность ресурса, так как делают Интернет менее предсказуемым, а значит, и менее удобным.

5. Отсутствие архивов

Старая информация – не значит плохая. Читателям она может оказаться полезной. Даже если новая информация оказывается гораздо полезней, у старой информации тоже найдется свой потребитель. Я подсчитал, что поддержка архивных данных на сервере увеличивает расходы по поддержке сервера приблизительно на 10%, а полезность и посещаемость ресурса возрастает при этом на все 50%.

Архивы помогают также избежать появления на сервере ошибки 404, дают преимущество при создании ссылок на ваш ресурс на других серверах.

6. Переадресовка страниц

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

7. Заголовки, не связанные с контекстом

Заголовки и прочие смысловые элементы текста для webа должны быть написаны по-другому, нежели для прочих средств массовой информации. В Интернете заголовки – это часть пользовательского интерфейса и навигационный элемент сервера.

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

  • дать понять пользователю, какая информация ждет его за этой ссылкой так, чтобы ему не приходилось строить догадок;
  • не дать пользователю обмануться привлекательным заголовком (никаких обманов – это может дать сиюминутный результат и поднять трафик сервера на короткий срок, но после вы можете никогда не суметь завлечь их на свой сайт снова, так как доверие к вам будет подорвано).

8. Последний писк Интернет-моды

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

Push-каналы, создание community сайта, chat, ,бесплатный e-mail, трехмерные карты сайта, аукционы – список можно было бы продолжить.

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

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

9. Слишком долгое время ответа сервера

Это – наихудший и наивреднейший из огрехов. В предыдущих исследованиях я выяснил, что около 84% всех сайтов нарушают лимит по времени на загрузку сервера.

Изначально основной причиной медленной загрузки страниц было чрезмерное увлечение графикой. Многие сайты перегружены графикой и приложениями (апплетами), тогда как те же самые эффекты могли быть достигнуты при помощи DHTML или даже простого HTML. Именно поэтому я продолжаю повторять всем – уменьшайте время загрузки сервера.

С увеличением количества разнообразных программных приложений, основанных на web-технологиях, развитием электронной коммерции и т.п. возникла необходимость настраивать каждую страницу сервера под запрос каждого пользователя. В результате длительная загрузка сервера может объясняться не только пропускными способностями канала, но и тем, как именно он реализован. Иногда конструкция страницы предусматривает обращения к базе данных, находящейся на удаленном сервере или к back-end фреймам, что дополнительно увеличивает время загрузки.

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

10. Все, что напоминает рекламу

В Интернете основным является так называемое выборочное внимание. Все меньше внимания уделяют пользователи разнообразным рекламным объявлениям, CTR (Click Trough Rate) баннеров упал в Америке по сравнению с прошлым годом почти на 50%, а реклама в Интернете работает из рук вон плохо.

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

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

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

Вернуться к списку статей