Главная » Юзабилити сайтов. Проектирование веб - интерфейсов
    РейтингРейтингРейтингРейтингРейтинг

Юзабилити сайтов. Проектирование веб - интерфейсов

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

Содержание:
  • § 1. Зачем нужно юзабилити для сайта?
  • § 2. Технологии юзабилити
  • § 3. Анимация
  •         3.1. Для каких целей устанавливается анимация?
  • § 4. Мультимедиа
  • § 5. Ссылки
  • § 6. Тексты
  • § 7. Favicon для сайта
  •           7.1. Возможности Favicon
  •           7.2. Несколько способов сделать иконку самому
  •           7.3. УСТАНОВКА Favicon

 

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

.

§ 1. Зачем нужно юзабилити для сайта?

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

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

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

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

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

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

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

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

Огромное значение для организации удобства нахождения посетителей на сайте имеет его текстовое оформление. Спросом в интернете, пользуются лаконичные и вместе с тем содержательные тексты. Для текстовых материалов желательно использовать шрифты без засечек (Arial, Arial Black, Verdana, Tahoma), так как они лучше читаются с экранов мониторов. Постарайтесь не использовать резких контрастных тонов между фоном и текстом. Наиболее оптимальным является белый фон и тёмный шрифт текста.


§ 2. Технологии юзабилити

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

Выводы

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

 Успехов!


§ 3. Анимация

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

Специалисты по юзабиляти же говорят: "Никакой анимации!..Оживлять картинку надо там, где это действительно уместно. При этом анимация не должна просто так бессмысленно мигать. Анимированный логотип, который сверкает всеми цветами радуги - совершенная бессмыслица".

 3.1. Для каких целей устанавливается анимация?

  1. 1. Для привлечения внимания посетителя к определенным местам на странице сайта;
  2. 2. Для придания ресурсу большей динамики;
  3. 3. Для представления информации в компактном виде;
  4. 4. Для решения индивидуальных технических и дизайнерских задач.


Распространенными технологиями веб-анимации является использование графических изображения в формате GIF, а также элементов флеш-анимации.
GIF — это популярный формат графических изображений. Способен хранить сжатые данные без потери качества в формате.
Флеш-анимация – это файл, созданный при использовании программного обеспечения Flash Macromedia. Подобный файл имеет формат swf, который при необходимости можно просмотреть с помощью flash-проигрывателя или вложить в HTML-файл.


§ 4. Мультимедиа

Современные технологии позволяют достаточно эффективно воздействовать на зрителя с помощью звука и видео, благо, скорости подключения к Интернету существенно подросли, по сравнению с ранее годами, да и сами услуги стали значительно дешевле. В связи с этим у дизайнеров вновь началась лихорадка под названием "Что бы такого сделать с сайтом, чтобы он оставил впечатление?" Сайты должны загружаться тихо и быстро. . 90% сайтов несут одну функцию: дать пользователю возможность получить свежую, полезную и относительно правдивую текстовую информацию. У него нет времени ждать загрузки аудио и видео.

 А что же остальные 10%? Это презентационные сайты. На них и отрываются дизайнеры, создавая шедевры веб-дизайна с видеовставками, мощным звуком. 


§ 5. Ссылки

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


§ 6. Тексты

На веб-сайтах пользователи читают и воспринимают информацию совершенно не так, как на бумаге. Вместо вдумчивого чтения, как это может быть с книгой, они быстро-быстро пробегают глазами по страницам сайта, цепляясь за заголовки или картинки. Поэтому, оформляя тексты с позиции юзабилити, необходимо придерживаться некоторых правил.
1. Четкие и не очень длинные заголовки, по которым сразу понятно, о чем речь. Следует  ограничиться 40-60 символами. 
2. Английские абзацы в противовес русской "красной строке': Забавный факт: именно по английским абзацам, т.е. по такому форматированию текста, где между абзацами помещается пустая строчка, некоторые преподаватели вузов вычисляют нерадивых студентов, которые списывают рефераты. Русская традиция предполагает разделение абзацев с помощью "красной строки': но, пожалуй, это больше не относится к веб-дизайну. Каждый абзац должен содержать законченную мысль, емкую и краткую, а с помощью английских абзацев достигается дополнительная "телеграфичность" сообщений.
3. Текст, который можно прочитать. Несмотря на всю красоту, которую вы придаете сайту, пользователь все-таки очень хочет получить текстовую информацию. Поэтому шрифт должен быть такого размера и цвета, чтобы его легко можно было прочитать, не мелкий и не бледный. Поддерживайте достаточный контраст между текстом и фоном, разрешайте менять в браузере размер шрифта - и читатель будет вам благодарен.


§ 7. Favicon для сайта


 Фавикон (Favicon) – это небольшой значок сайта, служащий  мини логотипом веб ресурса. В качестве фавикона обычно используется небольшая картинка размером 16х16 пикселей с расширением .ico. Расположена она в корневой папке сайта и посмотреть ее можно по адресу ‘ваш_сайт/favicon.ico’. 

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

7.1. Возможности Favicon

1.  Выделяет сайт среди прочих, делая его уникальным;
2.  Иконка может служить мини логотипом сайта или бренда, что однозначно повысит авторитетность веб ресурса в глазах пользователей;
3. Почти у всех современных веб браузеров есть места для вывода картинки фавикона, что также послужит  росту узнаваемости  веб ресурса или бренда;
4. В
 поисковой выдаче Яндекса favicon показывается рядом со ссылкой на веб ресурс, что также позволит вашему сайту не затеряться среди прочих интернет ресурсов. 

Иконки можно скачать уже с готовых сайтов например, с этих:
thefavicongallery.com или iconj.com,

7.2. Несколько способов сделать иконку самому

1. С помощью онлайн генератора.   favicon.bygenfavicon.comfavicon.cc.

2.  С помощью плагина для программы Photoshop, либо другого графического редактора.

7.3. УСТАНОВКА Favicon

Чтобы установить favicon, необходимо просто загрузить полученную картинку с расширением .ico в корневую папку сайта

и прописать путь к ней в заголовке сайта (между тегами “<head>” – “</head>”)  добавив строку

 <link rel="icon" type="image/x-icon" href=" /favicon.ico">

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

Если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.


css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!