ЮЗАБИЛИТИ

Usability – это просто удобный сайт :)

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

Более того – это не дает потратить рекламные бюджеты бесцельно. Понимаете – Вы потратили деньги на рекламу и продвижение, сайт видно в поиске и в объявлениях – пользователь переходит на сайт. Упс….

А там всё кривое и не понятно, что и как нажимать. И пользователь через 1 сек. уходит в даль…

Сайт должен пользователя заинтересовать.

Вроде просто? Покажем что-то интересное –  и пользователь останется на сайте?

Ключевое слово – “покажем“. Это еще постараться нужно. Состоит из двух важных деталей (пока не важен интерфейс, дизайн и прочие изыски):

• пользователь должен физически увидеть Ваш сайт после перехода на него – время загрузки должно быть минимальным, никаких вращающихся кружочков и полосок загрузки
• на видимой части экрана должно быть самое важное (контакты, кнопка “Купить”, новинки и пр.) – по статистике 70% пользователей после захода на сайт не используют прокрутку вниз

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

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

А это как правило:

• много скриптов JS
• много картинок или видео

При попытке открыть такой сайт хотя бы с бюджетного ноутбука (даже с локального сервера) – получаем 5-10 сек ожидания… В реальном интернете никто не будет ждать, пока такой сайт откроется и никто эту красоту не увидит.

 

Основные принципы юзабилити

Да, конечно, после того, как посетитель Ваш сайт увидел в принципе (см. выше)

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

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

ГОСТ Р ИСО 9241-210-2012 Эргономика взаимодействия человек-система.

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

UI/UX дизайн

Загадочные буквы.  Что такое UI и UX дизайн и в чем их различие?

UX –  user experience и переводится как «пользовательский опыт». Термин придумал Дональд Норман. Хороший UX — это когда продукт удобен и продуман. Ручка хорошо лежит в руке и ей удобно писать, ключ легко вставляется в замок и открывает дверь, а сайт открывается быстро и не требует 10 кликов, чтобы выдать нужную информацию.

UI – user interface и переводится «пользовательский интерфейс». Под термином UI обычно понимают экранные интерфейсы и их внешний вид. UI – это про визуальный стиль, графический дизайн на экране.

Нельзя сравнивать UX и UI — они совсем про разное. Но в контексте разработки экранных интерфейсов их можно представить как две стадии дизайна:

• проектирование
• визуализация

 

Почитать в разделе: ЮЗАБИЛИТИ

• Всего статей в разделе: 5
• Показано статей в списке: 4
• Сортировка: название по алфавиту

Глубина просмотра

Что такое глубина просмотра, зачем она нужна и где ее можно посмотреть? Глубина просмотра сайта - один из основных параметров сайта, который сильно влияет на его продвижение. Количество просмотренных страниц делится на число визитов - получается в среднем, сколько страниц просмотрел один посетитель. Чем эта цифра выше - тем лучше для всех: - для сайта - значит сайт интересен, там правильно организована навигация - для поисковых машин - это называется "учет поведенческого фактора" Посмотреть можно, например в отчетах Гугль Собственно вот - 2,06. Данная цифра получается из общего числа просмотренных страниц 596, разделенная на сеансы 290. 2,06 = 596 / 290 В...
(Читать полностью...)

---

Заголовки и шрифты

Зачем нужно как-то выделять заголовки на web-странице? Просто выделение жирным шрифтом недостаточно для робота - он не поймет, что это. То ли что-то важное выделили, то ли это заголовок. Для заголовков используются тэги h1, h2, h3 и h4. На странице должен быть только один тэг h1, остальных тэгов может быть много. Примерная структура текста с заголовками ниже, отступы даны условно, для облегчения визуального восприятия вложенности. ЗАГОЛОВОК h1 (обычно название страницы) тест для посетителя ЗАГОЛОВОК h2 (важная первая часть страницы) текст для посетителя ЗАГОЛОВОК h3 (выделения названия какого-то абзаца) текст для посетителя ЗАГОЛОВОК h4 (какое важное...
(Читать полностью...)

---

Раздел “контакты”

Мы хотим получить от пользователя обратную связь. Можно использовать: 1. Форму обратной связи на сайте 2. Номер телефона для связи 3. Адрес электронной почты Надо исходить из того, что бы пользователю было как можно проще. В этом отношении идеальный вариант - форма обратной связи. Нужно только написать и нажать кнопку "Отправить". Для варианта телефон - это расход денег, для варианта электронной почты - нужно или запускать почтовую программу или переходить на сайт с услугой...
(Читать полностью...)

---

Якорь html

Как использовать якорь HTML и что это такое? Три основных вопроса: 1. Что это? 2. Зачем мне это нужно? 3. Как это работает? 1. Итак - что это? Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Ссылка с якорем содержит символ #, после которого идёт идентификатор. Переход пользователя по ссылке на якорь приводит его (пользователя) к месту установки якоря, к «заякоренной» намеченной точке на веб-странице. Иными словами, при переходе...
(Читать полностью...)

---