Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

ТОР 10 ошибок юзабилити

11 мая 2008 | Опубликовано в статьюшечки | 17 Комментариев »

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

Джерри МакГоверн, в своей статье «Почему сайты-победители всевозможных конкурсов столь неэффективны?» выразил это очень метко: «Для победы в конкурсах, достаточно одного внешнего вида сайта, для удовлетворения покупателей же, важны контент и юзабилити».

Естественно, если посетитель не сможет найти необходимую ему информацию на вашем сайте, он его покинет навсегда, и внешний вид и функционал не сыграют никакой роли!

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

  • Иметь четкую и понятную систему навигации по сайту

  • Грамотное размещение контента на страницах сайта

  • Поиск по сайту должен быть функциональным

  • Структура сайта грамотно-организованная и прозрачная

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

8 основных правил юзабилити

  1. Не используйте всплывающие окна (поп-апы). Всплывающие окна отвлекают внимание посетителей от контента сайта, что не есть хорошо. Уважайте своих посетителей!
  2. Не изменяйте размер окна браузера посетителя. Причины те же, что и в случае с всплывающими окнами + еще одно: некоторые браузеры запоминают последний размер окна браузера и при новой загрузке воспроизводят его. Как очень метко подметил Бен Бодьен «Если вы думаете, что лучше знаете, какой размер окна браузера лучше для ваших посетителей, то вы совершаете одну из грубейших ошибок, которая не простит вас…».
  3. Не используйте мелкие, нечитабельные размеры шрифтов. Из-за этого длинные тексты читаются с большими усилиями, а на чтение коротких, уходит больше времени, чем обычно. Это относится не только к контенту, но и к ссылкам, кнопкам, формам и другим элементам веб-сайта. Хорошая новость – в Web 2.0 все наоборот!
  4. Тексты всех ссылок должны быть понятны посетителям. Тексты ссылок должны давать представление посетителям о той странице, на которую ведет конкретная ссылка. Неоднозначные и двусмысленные тексты ссылок следует исключить.
  5. На сайте не должно быть ни одной «мертвой» ссылки. Данная ошибка способна разрушить мнение посетителей о вас и вашем сайте, оно вам надо?
  6. Не используйте больше 1 анимации на странице. Анимированные баннеры очень сильно отвлекают посетителей от основного контента сайта. Если уж вы не хотите отказаться от их использования совсем, то хотя бы не размещайте их рядом с основным контентом сайта. Посетители вам за это будут очень благодарны!
  7. Сделайте процесс связи с вами максимально простым и удобным. Если вы не хотите поддерживать связь со своими посетителями – вы на грани провала. Заинтересованные вашим проектом посетители обязательно захотят связаться с вами, но если не найдут ваших координат, то сразу же потеряют интерес и доверие к вам и вашему сайту. Данное правило особенно важно для сайтов, непосредственно занимающихся электронной коммерцией.
  8. Все ссылки, имеющие место быть на вашем сайте, должны открываться в этом же окне браузера. Каждый посетитель в праве сам выбирать, как и где открывать ту или иную ссылку. Поэтому навязывание своих правил не приведет ни к чему хорошему.

Далее, с краткими пояснениями и примерами (в виде скриншотов), приведены 10 наиболее популярных ошибок юзабилити. Запомните и не повторяйте их ни при каких обстоятельствах.

1. Очень плохо заметная ссылка авторизации на сайте (Log-In)

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

clip_image001

А для тех кто решил не тратить свое время на поиски – ссылка для авторизации «Log-in» находится по центру страницы в желтом прямоугольнике. Правда, не особо хороший вариант её расположения?!

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

2. Всплывающие окна (поп-апы) для отображения в них контента

На данный момент практически у всех современных браузеров, таких как Firefox, Safari, Opera и Internet Explorer, есть « штатный блокировщик», который занимается блокировкой всплывающих окон, рекламных баннеров и всего того, что похоже на явную рекламу. Поэтому использовать поп-апы для отображения контента бессмысленно и не разумно.

clip_image002

Adidas все-таки решил воспользоваться данным подходом на своем сайте (ImpossibleStory.com), вследствие чего, большая часть аудитории перестала посещать его. Мало кому нравиться постоянно отключать блокировщика ради просмотра сайта.

3. Замена скроллинга и нового способа реализации меню перемещением элементов при помощи перетягивания курсором мыши

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

На сайте Fichey вы сможете оценить эту веб-ноу-хау технологию. При помощи Flash она реализована очень красиво и оригинально. Но, к сожалению, из-за особенностей Flash, вы не сможете сделать закладку на конкретную страницу.

clip_image003

4. Неотличимые от обычного контента ссылки

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

Такого как на этом сайте не должно быть ни в коем случае RealPlayer.

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

clip_image004

Это ответ на ваш вопрос.

1, 3, 4, 6, 7 и 11 — это ссылки, 2, 5, 8, 9 и 10 – нет!

5. Неоднозначное восприятие и перенасыщение информацией

Не допускайте в контенте перенасыщение информацией веб-страниц сайта. Примером данной ситуации послужит сайт Overstock.

clip_image005

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

6. Блокировка браузера до тех пор, пока пользователь не выполнит требования предъявляемые на сайте

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

clip_image006

Что самое интересное, ничто не помогает:

  • Ни «cancel»

  • Ни «ok»

  • Ни то, что вы пытаетесь свернуть или развернуть изображение

  • Ни клик вне модального окошка

  • Окно не закрывается

  • Клик по иконке «?» так же не срабатывает

Очень неприятная ситуация сложившаяся всего лишь по той причине что вы чем то заинтересовались…

7. Один слой сайта «наползает» на другой

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

clip_image007

Подобной проблемой страдает и Yahoo.com.

clip_image008

8. Динамическая навигация

Очень симпатично и оригинально, не так ли?!

На самом деле это очень неудобно.

clip_image009

Рассмотрим еще один вариант такого меню, только на Flash.

clip_image010

9. Выпадающие меню

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

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

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

Примером тому могут послужить 2Advanced и Brita.net.

clip_image011

clip_image012

10. Мигающие изображения

Не секрет что большинство веб-мастеров используют сайты для дохода от рекламных баннеров, и большинство реклам, как правило, анимированные gif или обработанные во Flash. Это естественно отвлекает и мешает пользователю получить максимум информации от контента.

Превосходное издание Digital Web Magazine, допустил эту досадную ошибку, разместив в левом сайдбаре страниц сайта анимированный рекламный блок.

clip_image013

Интересный эксперимент или ошибка будущего?

Dontclick.it ставит интересный эксперимент, в котором предоставляет возможность опробовать новую систему, с помощью которой без кликов, а просто наведением курсора, можно перемещаться по сайтам.

clip_image014

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

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

Автор — smashingmagazine




Комментарии

  1. Roman
    Thumb up Thumb down -7

    Комментарий скрыт из-за рейтинга

    Ответить

  2. Troll
    Thumb up Thumb down +1

    Roman

    Ты сам ещё не научился без ошибок писать, а уже умничаешь.

    Ответить

  3. Mikhus
    Thumb up Thumb down +5

    Вот и поговорили ребята :) ^^

    Ответить

  4. Anna
    Thumb up Thumb down -5

    Комментарий скрыт из-за рейтинга

    Ответить

    kiber Ответ:

    Thumb up Thumb down 0

    путаете настоящий popup от всплывающего МОДАЛЬНОГО ОКНА jquery — это разные вещи

    Ответить

  5. Anna
    Thumb up Thumb down 0

    Сайт не кривой, просто очень сильно «напоминает» известный американский ресурс, опять вопрос о корректности, но тут ребята молодцы, первоисточник указывают! каждый зарабатывает, как может ;)) + признание IT-работников, которые не владеют ин.язом.

    Ответить

  6. stevengold
    Thumb up Thumb down 0

    Отличный сайт, правда с дизайном не доработали, я думаю всему свое время. Только вот Anna не права на мой взгляд.

    Пункт 1.Не используйте всплывающие окна (поп-апы). — Это больше дань моде, а не правило юзабилити, сейчас практически каждый американский сайт набит попапами под завязку и все счастливы — экономия места на лицо, и отсутствие лишних перезагрузок страниц.

    Речь идет о рекламных ОКНАХ всплывающих независимо от решения конечного пользователя, лично я использую данную технологию для того чтобы пользователь не ждал перезагрузки сайта (Ajax) и конечно не для демонстрации рекламы.

    Ответить

    kiber Ответ:

    Thumb up Thumb down 0

    навязчивые popup windows и модальные окна даже выводятся по разному. аякс тут не причем. сначала яваскрипт работающий с параметром display:none, а уже потом подключается аякс. но само окно работает без аякса.

    Ответить

  7. stevengold
    Thumb up Thumb down 0

    А вообще если уж говорить о Юзабилити — читаем Якоба Нильсена

    Ответить

  8. mr_Flex
    Thumb up Thumb down -1

    Та все правильно написано, этот сайт по моему мнению отвечает данным требованиям.

    Ответить

  9. WOLF-BESPREDEL
    Thumb up Thumb down -1

    Да вот ещё бы эти правила вбить создателям помоек в рунете.....

    Ответить

  10. Chikk
    Thumb up Thumb down 0

    И как же данный сайт отвечает правилам того самого «юзабилити», если он есть — растяжка?!

    Может только у меня «широкий» монитор?

    Кто-то из создателей пытался читать строку в 2к пикселей длиной?

    Есть же масса исследований — человек адекватно воспринимает 10-15 см ширину колонки текста.

    Понакопипастят статей, а нет, чтоб — самим следовать... Мдя...

    Ответить

  11. y0ung5eo
    Thumb up Thumb down 0

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

    Ответить

  12. Андрей Морковин
    Thumb up Thumb down 0

    Это хорошая статья по юзабилити. Спасибо автору.

    Ответить

  13. seo-beginer
    Thumb up Thumb down 0

    Статья интересная, принял во внимание некоторые пункты. Спасибо.

    Ответить

  14. PALEK OBLAK
    Thumb up Thumb down -1

    А мне Dontclick понравился!

    Ответить

Оставить ответ


8 − семь =

Вставить изображение