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

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

Юзабилити сайта: распространенные ошибки

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

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

Цвет ссылок

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

linkcolor

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

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

 Плохая типографика

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

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

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

Давайте рассмотрим это подробнее. Основные особенности двух последних тенденций в мире веб-дизайна — минимализма и плоского дизайна — акцент на содержании ( в отличие от дизайнов с использование фоновых изображений. Главная причина такой популярности минимализма и flat-дизайна — простота и работоспособность — порой даже не верится, что сайт со стольо простым дизайном может быть на столько успешным. Люди приходят, читают содержание и уходят. Ни флэш, ни javascript, ни длительная загрузка сайта, ни сложная графика — ничто их не отвлекает от текстового контента сайта.

linkcolor

На данный момент вы должны понять, на сколько важно сделать контент читабельным. Согласитесь, даже слишком красивый шрифт не спасет ваш текст, если он совершенно не читается.

Отсутствие ответов на вопросы

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

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

sudocream

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

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

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

Маленькие размеры кликабельных областей

Маленький размер кликабельной области  - очень неудобно. Вы можете уменьшить шрифт, чтобы текст выглядел более красивым, но в таком случае забываете о юзабилити (не говоря уже о читаемости).

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

Отсутствие контактной информации

Иногда нереально добраться до сервиса пользовательского интерфейса, либо до контактной информации.

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

contact

Нету причин не показывать контактную информацию. Если вы не хотите давать информацию о  личных данных, напишите электронную почту. Хотите избежать спама? Используйте контактную форму, не доступную для ботов. Поделитесь ссылками  на Twitter или Facebook — все что угодно. Не имеет значение, каким образом вы обеспечили пользователям возможность связи с вами.

Отсутствие поиска

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

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

search

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

Запрос регистрации

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

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

demo

Просмотр продуктов, которые вы создаете, продаете или производите, не должен запрашивать у пользователей информацию для регистрации. Иначе они могут почувствовать себя обманутыми, и вы их потеряете навсегда. Хорошим примером является Fruit Ninja- популярная игра на IOS, для которой выходит демо-версия. После того, как вы прошли демо-версию, вы обязательно захотите перейти на более сложный уровень. Смог бы я раньше купить эту игру, не попробовав ее? Конечно, нет.

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

 Регистрационные формы

Сделайте форму регистрации как можно короче. Просите только самую важную информацию — логин, пароль, электронный адрес. После регистрации можете спросить у посетителя дополнительные данные — но только уже после тест-драйва продукта. Зачем мне вводить адрес, имя, должность, если я даже не знаю, что именно предлагает компания? В лучшем случае вы получите поддельную информацию. Но если пользователь не уверен, нужен ли ему ваш продукт, вы никогда не получите реальную информацию.

 

basecamp

Сегодня можно создавать учетные записи с помощью Twitter или Facebook API логина. Это хорошая идея и она делает процесс регистрации намного проще и быстрее. Теперь Вам больше не придется запоминать логин и длинный пароль.

Непоследовательность дизайна

Когда веб-страница имеет белый фон и навигацию в шапке, не делайте страницу «About»  темной с навигацией в футере. У пользователей будет возникать вопрос, на этом он сайте находится, или уже перешел на другой.Сохраняйте стиль дизайна относительно всего сайта. Использование систем сеток поможет в этом. Аналогичный принцип сохраняется и для цвета фона, ссылок типографики.

Неправильное использование изображений

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

 

Полезные ссылки :

 

Автор - Christian Vasile

Перевод -Дежурка

 




Комментарии

  1. Гугл
    Thumb up Thumb down -9

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

    Eleonorka Ответ:

    Thumb up Thumb down +5

    Товарищ Гугл, да гугл-переводчик — штука полезная и в Вашей рекламе не нуждается. Автор статьи — Christian Vasile, почему Вы так плохо о нем отзываетесь? =-O.

    P.S. Если есть какие-то замечания к переводу, пишите конкретно, что не так, а не переходите на личности. Я почему-то ничего странного в этой статье не увидела.

    джукакабубу Ответ:

    Thumb up Thumb down +8

    >>P.S. Если есть какие-то замечания к переводу, пишите конкретно, что не так...

    То-есть, вы предлагаете проверять ошибки перевода читателям, а не переводчику статьи?

    xerox21 Ответ:

    Thumb up Thumb down +2

    Поддерживаю))) Вот это «Для веб дизайна не так важно, как сочетаются шрифты...» — убило.

  2. СТАС
    Thumb up Thumb down -12

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

    marina Ответ:

    Thumb up Thumb down +5

    Конкретизируйте, какого рода контент устроит ваши запросы.

    джукакабубу Ответ:

    Thumb up Thumb down +6

    Дело не в контенте а в кошмарных, непроверенных переводах, коих с каждой неделей всё

    джукакабубу Ответ:

    Thumb up Thumb down +1

    больше

    marina Ответ:

    Thumb up Thumb down +2

    спасибо за замечания. Будем работать над ошибками =))

  3. Илья
    Thumb up Thumb down -5

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

  4. Алексей
    Thumb up Thumb down +10

    Еще добавлю:

    — Резиновая верстка текста.

    Дежурка, пробывали читать свой сайт на больших диагоналях?

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

    Максим Ответ:

    Thumb up Thumb down -3

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

  5. alexey
    Thumb up Thumb down +3

    не понимаю, зачем сколько говна лить (если это, конечно, не какой-то особый метод самоутвержения)... Как по мне, то сайт норм, дувно уже юзаю.. много чего полезного, ну и просто интересного. В общем дежурка молодцы, не обращайте внимание на тупых тролей =)

  6. oni
    Thumb up Thumb down 0

    Дежурка, исправьте в тексте «агенства» на «агентства». Два раза встретилось. Спасибо!

  7. Вита
    Thumb up Thumb down +4

    Авторы сайты — вы глупцы %) Как можно писать про юзибалити и иметь почти все перечисленные ошибки?

    Hellaim Ответ:

    Thumb up Thumb down 0

    Ну ты же как то добрался до комментариев =) Значит тут все вполне впорядке, и отвечает требованиям пользователей. :-D

  8. Андрей
    Thumb up Thumb down -1

    ВЫ ЗАЕБАЛИ БЛЯТЬ! Картинок нет уже чуть ли не на половите старых статей УРОДЫ конченные!!!