Usability-by

Способ проверки юзабилити Вашего сайта. Вебвизор от Яндекса

2012-02-27T15:42:00.000+03:00

Оригинал взят у olga0703 в Способ проверки юзабилити Вашего сайта. Вебвизор от Яндекса

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

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

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

Суть его в том, что Яндекс записывает действия посетителей сайтов на видео и это видео, впоследствии, доступно владельцам сайтов для просмотра в разделе Вебвизор Яндекс Метрики.

На видеозаписи можно изучить действия посетителей:

движения мыши;
клики;
прокрутка страницы;
нажатия на клавиши и заполнение форм;
выделение и копирование текста.

Кроме того собирается информация:

- какой браузер использовал посетитель;
- сколько времени провел на сайте;
- насколько был активен (по количеству действий);
- по какому запросу пришел посетитель;
- с какого ресурса пришел посетитель;
- и т.д.

Вся эта информация отображается в табличном виде, где каждая строка – это информация по одному посетителю. Есть ограничение на запись видео – не более 1000 человек в сутки.

Четыре значка в левой части строк позволяет сразу увидеть важные свойства посещения:

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

Как подключить Вебвизор к сайту?

1. Зайдите в Яндекс.Метрику и в списке счётчиков кликните по значку «Редактирование счётчика».

В настройках счетчика отметьте чекбокс «Вебвизор», нажмите «Сохранить» и обязательно на сайте замените код счетчика на новый.

3. Установите обновленный код счётчика на сайт. Через некоторое время в отчёте «Поведение - Вебвизор» появятся данные по посещениям.

Урок юзабилити №8: Ссылки

2012-02-23T17:19:00.005+03:00

Правило 7±2
Для определения количества пунктов в меню навигации на веб-сайте применяется широко известное правило "семь плюс минус два (7±2)". Правило это вошло в практику, чтобы ускорить процесс дизайна и объяснить принятое решение заказчику.

Откуда же пришло это правило?

Психолог Георг Миллер (George Miller) занимался изучением пределов человеческой кратковременной памяти.
Он пришел к выводу, что существует
предельное количество предметов, которые мы способны удержать в нашей кратковременной памяти: 7±2.

В 1956 году Миллер опубликовал результаты своего исследования. С тех пор правило 7±2 стало сверхпопулярным среди дизайнеров интерфейсов. Интересно заметить, что сам Миллер не делал в своей работе выводов, которые можно применить к дизайну веб-навигации. Это логично - посмотрите на год опубликования работы.

Хотя правило Миллера 7±2 и напоминает нам об умеренности, не нужно воспринимать его как догму при проектировании навигации. С другой стороны, заваливать посетителей сотней меню тоже безответственно, ведь проблема с путаницей и информационной перегруженностью, разумеется, существует.

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

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

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

Исследования показывают, что в общем случае "широкие" структуры работают лучше, чем "глубокие". Как оказалось, пользователи лучше работают и быстрее находят информацию в "неглубоких" структурах. Для постоянного выбора категорий и подкатегорий при работе с глубокой структурой требуется больше усилий, чем для просмотра большого количества ссылок при работе с широкой структурой. Естественно, что большинство самых популярных веб-сайтов в современном Web имеют широкую структуру: вполне обычно увидеть на известных порталах и новостных сайтах по 50-100 (а то и больше) ссылок на главной странице.

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

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

Рекомендации по использованию гиперссылок

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

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

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

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

Не используйте в названиях ссылок рекомендации общего характера, такие как "Щелкните здесь" ("Click Here")
Названия ссылок должны быть осмысленными и указывать, куда они ведут - это облегчит пользователю выбор. К примеру, вместо фразы "Щелкните здесь, чтобы просмотреть каталог телефонов Nokia", укажите просто "Каталог телефонов Nokia".

Ссылку, стоящую в конце списка элементов, не следует называть неопределенным именем вроде "Еще..." или "Больше..." ("More...")
Вместо этого объясните посетителям, что именно они могут найти, щелкнув по этой ссылке, например, "Другие книжные новинки", "Архив новостей", "Подробности" (для новости). Особенно не рекомендуется размещать на странице несколько ссылок с подобными расплывчатыми именами, так как при беглом просмотре их отличить будет невозможно.

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

От традиционного SEO к стратегии комплексного интернет-маркетинга при продвижении онлайн-бизнеса

2012-02-23T14:56:00.001+03:00

На сайте http://devaka.ru/ я нашла очень интересную статью про переход от традиционного SEO к стратегии комплексного интернет-маркетинга при продвижении онлайн-бизнеса.

И почему это сейчас актуально?

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

Переходя в онлайн, владельцы бизнеса сначала просто хотят сделать сайт, имея единую цель – продавать через Интернет. Через какое-то время они понимают, что просто иметь сайт недостаточно, необходимо находиться в Яндексе, приводя оттуда клиентов. Схема работы сайта им видится следующим образом:

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

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

Медиа

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

Посетители сайта

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

Сайт компании / интернет-магазин

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

1. Никто, потерянные посетители

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

2. Завистники, недоброжелатели

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

3. Постоянные читатели

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

4. Фанаты и последователи

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

5. Клиенты

Клиенты это те люди, ради которых, собственно, мы и создавали свой сайт. Они для нас наиболее ценны, поэтому, необходимо проводить с ними большую работу, чтобы эти люди не конвертировались обратно в другой тип аудитории.
Анализируйте свой сайт и аудиторию, оптимизируйте конверсию, предоставляйте доступную информацию посетителям, постоянно улучшайте сайт, будьте на виду не только внутри сайта, но и на других ресурсах.
Нажатие кнопки “Оплатить” означает, что пользователь начал вам доверять и на этом работа не закончена, необходимо поддерживать это доверие и проводить другие работы с клиентами:
— Повышать их опыт;
— Обучать;
— Повышать лояльность к сервису или компании;
— Информировать о различных нововведениях;
— Укреплять доверие.

Урок юзабилити №7: Основные навигационные элементы

2012-02-22T17:52:00.001+03:00

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

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

Постянная навигация

Постоянная (persistent) или глобальная (global) навигация - это навигационные элементы, которые появляются на каждой странице. Если навигационные элементы появляются в одном и том же месте на каждой странице и имеют при этом одинаковый вид, то пользователь будет уверен, что находится все время на том же сайте, - а это намного важнее, чем может показаться на первый взгляд. Унификация внешнего вида навигации дает пользователю возможность только один раз узнать, как на работает, и затем уже использовать ее не задумываясь.

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

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

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

Логотип сайта

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

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

Замечание: Это касается только страниц, написанных на языках, читающихся слева направо. Читатели страниц на арабском или иврите рассчитывают, что логотип сайта будет находиться на правой стороне страницы.

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

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

Сервисы

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

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

Ссылка на главную страницу

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

В начале строки разделов
В начале строки сервисов
Добавить к логотипу подпись "На главную" и сделать его ссылкой

Указание местоположения

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

Поставить напротив ссылки специальный указатель
Изменить цвет текста
Использовать жирный шрифт
Применить инверсию цвета

Ссылки-цепочки ("Хлебные крошки")

Хлебные крошки (breadcrumbs) - это название, возникшее как напоминание о крошках хлеба, которые Ганс незаметно бросал в лесу, чтобы они с Гретой могли найти дорогу домой в сказке братьев Гримм.

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

Традиционно между уровнями используется символ "больше" (>), реже двоеточие или косая черта.

Вкладки

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

Как тестировать на юзабилити сайт или блог

2012-02-22T17:44:00.002+03:00

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

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

Известный в мире веб дизайнер Якоб Нильсен говорит: «Изучение поведения пользователей в вебе показывает, что они плохо воспринимают медленные сайты и сайты со сложным дизайном. Люди не хотят ждать. Также они не хотят изучать, как пользоваться домашней страницей. Не существует таких вещей, как обучение веб-сайту или инструкция по веб-сайту. Люди хотят ухватить функциональность сайта сразу же после беглого сканирования страницы, то есть за несколько секунд».

Основные требования таковы:

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

Теперь собственно о методах тестирования.Их несколько: экспертный и индивидуальный, платный и бесплатный.

Экспертный метод подразумевает привлечение специалистов юзабилистов для оценки вашего ресурса.С моей точки зрения, не дает объективного обзора юзабилити, так как субъективен и оценка дается одним специалистом.
Индивидуальные методики более объективны, так как проводятся группой специалистов.Однако здесь не учитываются особенности поведения целевых аудиторий, но этого во многих случаях не требуется.

Что касается бесплатного тестирования, c моей точки зрения очень хороший прием - это юзабилити-тестирование сайтов конкурентов.Дешево и сердито.Зато это позволяет избежать множества ошибок на стадии проектирования.Можно также привлечь свою аудиторию к тестированию юзабилити вашего ресурса.

Я также писал о бесплатном сплит тестировании в GWO.Сложность заключается лишь знании английского при работе с интерфейсом.A/B тесты получили широкое распространение в мире и я о них подробно писал в самостоятельном обучении seo.И никакая современная бесплатная раскрутка сайта или блога без тестирования не обойдется.

Урок юзабилити №6: Рекомендации по проектированию системы навигации

2012-02-17T17:19:00.002+03:00

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

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

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

Не используйте в названиях элементов навигации самостоятельно придуманные искусственные слова.
В названиях категорий должно быть заложено их различие - если пользователи не поймут выдуманной терминологии, то не смогут и различить категории. В качестве примера можно привести сайт компании Disney. Назначение категории с таинственным названием Zeether остается загадкой и для детей, и для взрослых. :)

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

Пиктограммы для обозначения элементов навигации употребляйте только если они способны быстро привлечь внимание посетителей к определенному классу предметов.
Это могут быть новинки, товары, выставленные на распродажу, видеофайлы и т.п. Не применяйте пиктограммы, если для объяснения элементов навигации достаточно простых текстовых ссылок. Если вы никак не можете придумать, какой именно иконкой обозначить тот или иной навигационный элемент, выбранная вами картинка, вероятно, будет непонятной большинству посетителей. Например, не имеет смысла иллюстрировать ссылки "Ссылки", "Гостевая", "Форум" - картинки ничего не добавят к текстовому описанию и будут только засорять страницу.

Урок юзабилити №5:Навигационная структура веб-сайта

2012-02-16T15:43:00.004+03:00

Как пользователи осуществляют поиск

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

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

Посещение магазина во многом напоминает посещение веб-сайта.

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

Люди не станут пользоваться вашим сайтом, если им не будет понятно, как по нему перемещаться.

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

Якоб Нильсен делит людей по их навигационным предпочтениям на 2 типа:

пользователи с доминантным поиском (search-dominant);
пользователи с доминантным выбором ссылок (link-dominant).
Пользователи с доминантным поиском, заходя на какой-то сайт, почти сразу начинают искать окно поиска.

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

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

Специфика навигации в Интернете

Пространство Интернета не имеет тех же ориентиров, на которые мы опираемся в реальном пространстве. Можно перечислить следующие принципиальные отличия:

Нет ощущения масштаба.

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

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

Нет ощущения направления.

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

Нет ощущения местоположения. По мере перемещения в реальном пространстве у нас появляется представление о местоположении тех или иных вещей, поэтому впоследствии мы можем найти кратчайший путь к ним. В Интернете при возвращении к чему-либо нам нужно вспомнить, где это находится в рамках структурной иерархии сайта, и это менее ассоциативно. Именно по этой причине закладки (сохраняемые персональные Интернет-ярлыки) имеют такое большое значение, и именно поэтому по кнопке "Назад" делается 30-40% всех кликов в Интернете.
Это также объясняет, почему концепция главной (начальной) страницы сайта настолько важна. Главная страница - это сравнительно фиксированная позиция. Если у пользователя что-то не получается, то он всегда может вернуться в исходную точку сайта - главную страницу.
Навигация - это и есть сам сайт, аналогично тому, как здание, торговые полки и кассы - это магазин. Без навигации веб-пространство существовать не может. Именно поэтому разработке навигационной системы сайта следует уделить особое внимание.

Функции навигационной системы

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

Навигация помогает понять, что здесь находится.

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

Навигация помогает понять, как пользоваться сайтом.

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

Где я нахожусь?
Где я уже был?
Куда я могу пойти?

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

От навигации зависит степень доверия пользователей к сайту.

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

Инструменты анализа юзабилити.

2012-02-16T15:36:00.000+03:00

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

Группа №1

Ключевые слова
Количество посещений
Глубина просмотра (кол-во просмотренных страниц)
% отказов

Остановимся более подробно на каждой из них.
Ключевые слова — то, что по мнению поисковиков находится на вашем сайте и то, в чем он наиболее полезен для посетителя. Всё та же оговорка — по мнению поисковой системы. Выстраивайте подачу материала таким образом, чтобы мнение поисковой системы совпадало с мнением посетителя — грамотные и лаконичные заголовки в статьях, разбитые и структурированные абзацы, нумерованные или маркированные списки — всё это благотворно влияет не только на ваших пользователей, но и на поисковые системы. Более всего по этому вопросу могут пояснить ваши seoшники. Данный пункт имеет отношение к юзабилити лишь в плане последующей конверсии этих посетителей.
Количество посещений — прямой показатель заинтересованности посетителей вашей площадкой (но не ее содержимым). Идет ли трафик из поисковых сетей, или льется с ссылок на крупных проектах — без разницы. Показатель этой цифры 100% отражает заинтересованных в вашем предложении людей.
Глубина просмотра — показатель, характеризующий прямую заинтересованность содержанием вашего сайта. Наиболее важный из элементов, который необходимо анализировать в соотношении «посетитель/кол-во просмотренных им страниц».
Показатель может отражать несколько факторов:
Если высокий показатель значит:

пользователь удовлетворен предложением сайта, ему интересен проект, он ищет и находит что-то новое и интересное, готов смотреть дальше и больше (характерно для информационных ресурсов, развлекательных и иных проектах (не бизнес сферы) то волноваться не чего;
пользователь прошел много страниц, искал наиболее удачное предложение, анализировал сайт, искал элементы доверия или «привязки», но не нашел их и покинул его. Волноваться есть о чем, как есть о чем задуматься. Возможно пользователь не удовлетворен предложением, сайт не вызвал доверия, в результате чего пользователь был потерян. Стоит отследить все страницы и попытаться понять их связь друг между другом.

Если низкий показатель значит:

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

Процент отказов — со слов яндекс.метрики это доля визитов с длительностью менее 15 сек., в рамках которых состоялся лишь один просмотр страницы. Пояснять тут нечего — «зашел-не нашел-ушел». Чем больше процент, тем ниже посетители удовлетворены предложением.

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

Группа №2

Новые посетители
Возвратившиеся
Время на сайте

Новые посетители — приток «свежих посетителей» на сайт. Показатель важный, как единовременно, так и в долгосрочной перспективе. Уровень зависит от «ключевых слов» из группы №1
Возвратившиеся — удовлетворенность/заинтересованность предложением сайта. Чем выше — тем больше у вас постоянных клиентов.
Время на сайте. Показатель имеет две характеристики:

высокое в силу заинтересованности предложением. Всё в порядке
высокое в силу сложности поиска предложения. Возвращаемся в глубину просмотра и ищем страницы на которых больше всего задерживается посетитель.

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

Урок юзабилити №4: Влияние доменного имени на юзабилити

2012-02-14T16:37:00.000+03:00

Какое отношение адрес URL (и доменное имя) имеет к юзабилити?

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

люди угадывают доменное имя сайта, на который они хотят попасть в первый раз: если возможно, закрепите за собой доменные имена, совпадающие с названием вашей компании и главными ее торговыми марками
даже если люди уже посещали прежде ваш сайт, они часто просто пытаются угадать или вспомнить его название вместо того, чтобы рыться в своих закладках (bookmarks) или в Истории (history, журнал): так что подбирайте для сайта запоминающиеся доменные имена, которые легко произнести или набрать

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

Если у Вашего веб-сайта короткое и легко произносимое имя, потенциальный клиент без труда вспомнит его, увидев интернет-адрес на визитке или рекламном щите. Вы сможете без труда продиктовать его по телефону. Заинтересовавшийся посетитель сайта даже через неделю легко вспомнит его адрес и порекомендует своим знакомым. И так далее. Как по-вашему, легко ли было запомнить http://www.aha.ru/~timofey/banners/banners.htm? Именно таким был первый адрес у PROMO.RU. Сейчас он на порядок проще: www.promo.ru. Его трудно забыть или набрать неправильно.

Какое доменное имя выбрать?

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

Доменное имя влияет на имидж и солидность компании

Если компания уверяет, что давно и успешно занимается интернет-коммерцией, имеет солидные заказы и т.д., но при этом адрес их веб-страницы www.halyava.ru/hackers/romik.htm, я десять раз подумаю и наведу подробные справки перед тем, как начать любое сотрудничество с ней или даже просто сообщить номер своего телефона. Отсутствие у сайта собственного доменного имени часто трактуется посетителями сервера как нехватка у его хозяев средств на регистрацию или как их несерьезный подход к бизнесу в Интернете. Адрес, выдаваемый службами бесплатного хостинга, может в значительной мере испортить первоначальное впечатление от сервера.

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

Совпадение адреса веб-сайта с именем компании позволит внести дополнительную лепту в продвижение имени (брэнда) Вашей компании в Интернете.

Если пользователь сети знает Вашу фирму, то первое, что он сделает при попытке отыскать веб-сайт - наберет либо www.companyname.com, либо www.companyname.ua (если Вы работаете на российском рынке - www.companyname.ru). Плохо, если такой домен будет никем не зарегистрирован, еще хуже, если им будут владеть конкуренты или держатели порносервера. Желательно, если позволяют средства, зарегистрировать несколько доменных имен, соответствующих наиболее вероятному написанию имени компании.

часто люди открывают сайт через электронную почту, когда им кто-то в письме рекомендует посетить ту или иную страницу. Поэтому электронная почта считается вторым самым распространенным путём, которым пользователи попадают на новые сайты (на первом месте стоят поисковые сервера): убедитесь что все URL вашего сайта не длиннее 78 символов, чтобы они не "ломались" при автоматическом переносе строки
чем короче URL, тем лучше, так как людям часто приходится набирать их вручную
не используйте смесь прописных и строчных букв в URL, так как люди не запоминают какие символы в каком регистре должны писаться: URL со всеми строчными буквами - предпочтительны (проблема не касается доменных имен, ибо регистр букв для них не играет значения). Удобство работы с сайтом повысится, если веб-сервер будет настроен на игнорирование регистра букв при обработке URL
пользуйтесь программой проверки орфографии, чтобы избежать всяких недоразумений при выборе имен для URL

Это интересно:
Offtopic: Поучительным примером служит история с сервером крупнейшей автомобильной компании General Motors. В самом начале становления WWW компанией было зарегистрировано легко произносимое и запоминаемое www.gm.com. Но почему-то эта крупная компания, которая могла себе позволить зарегистрировать сотню доменных имен, не удосужилась присвоить очевидное - www.generalmotors.com, которое было впоследствии предусмотрительно захвачено американским студентом. И то, что он помещает туда, очень далеко от автомобилей и называется: Welcome to Freedom Links!Сейчас у GM есть такая альтернатива: заплатить кругленькую сумму студенту либо выложить оную за судебный процесс по возвращению имени себе. В данный момент стороны пришли к определенным договоренностям. Со страницы www.generalmotors.com через определенное количество времени осуществляется переброс на www.gm.com, но ведь этой ситуации можно было легко избежать.

Регистрация звучных доменных имен известных компаний с целью последующей продажи стало целой интернет-индустрией. Людей, занимающихся подобным бизнесом, называют squatters (сквоттеры). А суммы, фигурирующие при подобных сделках, бывают немалые. Компания CNET заплатила за tv.com 15 000 долларов, Mecklermedia - за www.internet.com - 100 000 долларов, а Multimedia Publishing пару лет назад выложила кругленькую сумму в 150 000 долларов за домен www.business.com.

Можно дать сотрудникам компании значимые e-mail адреса

Зарегистрировав доменное имя www.имя_компании.com, вы можете открыть mail-сервер и назначить каждому сотруднику почтовый адрес типа - имя_сотрудника@имя_компании.com.Подобные почтовые адреса являются информативными и легко запоминаемыми. Помимо этого, есть возможность назначить ряд служебных адресов, типа info@имя_компании.com, support@имя_компании.com и т.д.

Какое окончание доменного имени выбрать: .com или .ua?

Многие пользователи привыкли считать окончание ".com" стандартным окончанием в имени коммерческого сайта: это результат доминирования США на ранних этапах развития Web, а в некоторые популярные броузеры заложен алгоритм "добора" доменного имени, когда к любому набранному в адресной строке имени добавляется ".com". Якоб Нильсен советует:

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

Странно было бы использовать международный ".com" домен для местных, региональных сайтов. По мере развития e-коммерции и роста популярности Web вообще, люди начинают привыкать к мысли, что местные сайты должны располагаться в местном домене, и не станут искать их в международном домене. Так как способность предоставлять услуги локально является порой главным козырем компании, ее сайт лучше всего располагать в домене соответствующей страны. К тому же, сейчас уже заняты или выкуплены многие короткие имена в домене com, с чем и связано открытие сравнительно новых доменов первого уровня biz и info.

Урок юзабилити №3: Информационная архитектура сайта и юзабилити.

2012-02-13T15:20:00.002+03:00

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

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

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

Множество разработчиков считает, что они знают, что такое ИА, и потому строят и держат архитектуру сайта в голове, а не на бумаге. Другие в действительности знают, что такое ИА, но всё ещё держат ее в голове. Это может сработать для трёхстраничного сайтика, но как быть, если сайт начинает расти, или к разработке подключается ещё один веб-разработчик, которого тоже надо посвятить в архитектуру сайта, или, скажем, на веб-сайт надо добавить еще материалов или новые функции? Дополнительные расходы взлетят до небес, и очень быстро.

Одним из наиболее универсальных образцов информационной архитектуры являются публичные библиотеки. В 1876 году была разработана система картотек, называемая системой DDS, которая стала первым шагом на пути создания высокоорганизованной и гибкой схемы информационной архитектуры для книг. Такая продуманность и гибкость - то, что нужно, когда речь заходит о разработке ИА для web-сайта. Представьте, во что бы превратились библиотеки, если бы система DDS не смогла вместить в себя все новые темы и подтемы, появившиеся на свет за прошедшие 125 лет. Сколько времени библиотекарям пришлось бы всякий раз тратить на реорганизацию их каталогов и перестановку их карточек? Сколько раз web-мастера ломали голову над тем, как поменять положение материалов на сайте или втиснуть дополнительный пункт в уже готовое меню навигации?

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

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

Достоинства сайта с продуманной ИА

Положение в рейтинге поисковиков - разбивая Web-сайт на правильные разделы (с логически обоснованными заголовками), ИА помогает выставить на первый план те ключевые элементы, которые используются поисковыми серверами при вычислении релевантности страниц (сюда входят названия страниц, ключевые слова, названия каталогов и файлов). Более подробно эти вопросы будут рассмотрены в последующих уроках.

Улучшение юзабилити - Если сайт имеет правильную ИА, с ним станет легче работать. Будут чётко определены ключевые элементы навигации и их расположение, что также облегчит работу графическому дизайнеру.

Удобное размещение файлов - при обслуживании большого веб-сайта очень много времени уходит на поиск файла, который надо обновить. Чем лучше ИА, тем быстрее можно найти этот файл. Хорошая ИА определяет категории, по которым можно разбить информацию. Как веб-разработчик, вы должны просто следовать этим категориям, создавая структуру каталогов и присваивая имена файлам. Тогда, для внесения изменений вам не придётся идти на сайт, и искать нужную страницу только для того, чтобы по её URL-у определить имя файла. Теперь вы можете вызывать любой файл сайта из своего редактора, даже не зная пути к нему. Помните, что структура именования каталогов и файлов, построенная на ИА, также использована поисковыми серверами для ранжирования страниц (работа с поисковыми системами будет рассмотрена позже).

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

Сокращение времени разработки - выделив заранее время на разработку продуманной ИА Web-сайта, общее время разработки сайта можно сократить на 10-25%.

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

Советы по построению визуальной архитектуры на странице:

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

Визуальная иерархия на странице

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

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

Обычаи и условности

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

Замечание: Несколько лет назад в углу телеэкрана появились маленькие полупрозрачные логотипы компаний. Сейчас эти значки используются везде, ведь они очень удобны. Если такого значка нет, то не сразу понятно, какой канал включен.

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

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

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

Разбиение страницы на четко разделенные области

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

По чему можно щелкать мышью?

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

Визуальный шум.

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

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

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

8 быстрых способов выявить «дыры», через которые от вас убегают посетители

2012-02-10T15:37:00.000+03:00

Веб-издание GetElastic делится обзором несложных инструментов, позволяющих навскидку оценить наиболее проблемные места на вашем сайте. Большинство из них не требует составления заданий или проведения рекрута – вы просто получаете данные о том, что делали посетители, в какой момент они сбежали и, возможно, даже узнает ответ на вопрос «почему?».

1. Crazy Egg

Сервис, позволяющий увидеть карту кликов и скроллов, проделанных посетителями. Минимальная стоимость сервиса – 9 долларов, установка – убийственно проста.
Crazy Egg

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

3. Google Talk ChatBack

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

4. 4Q

Сервис дает возможность проводить «опросы на выходе». В заданной разработчиком точке пользователями предложат ответить не несколько вопросов, без которых, по мнению создателей инструмента, не может жить не один веб-сайт.
1. Оцените рейтинг сайт, исходя из Вашего сегодняшнего опыта работы с ним.
2. Какое из приведенных утверждений лучше всего описывает цель Вашего сегодняшнего визита на сайт?
3. Удалось ли Вам достичь этой цели?
4. (Если да) Что Вам показалось наиболее полезным на этом сайте?
4. (Если нет) Почему Вам не удалось достичь цели Вашего сегодняшнего визита?
4Q

5. Kampyle

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

6. Ethnio

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

7. Usabilla

«Лаборатория» для удаленного немодерируемого юзабилити-тестирования. Можно тестировать как прототипы, так и действующие сайты. Составьте задания, проведите рекрут и принимайте результаты. В основном, результаты будут количественными, однако инструмент позволяет пользователям оставлять и комментарии («Я щелкнул на этот баннер, потому что фото взрыва и пожара интереснее, чем фото старого мужика с поднятым вверх указательным пальцем»).
Usabilla

8. UserTesting.com

При помощи данного сервиса вы можете и набрать респондентов (впрочем, респондентов можно привлечь и со стороны, при помощи той же Ethnio), и провести удаленное тестирование. Минимальный рекрут обойдется вам в 39 долларов. Формат тестирования – немодерируемое think aloud, результатом теста будет видеозапись экрана с голосовыми комментариями респондента.
Usertesting.com

Источник: http://fresh.gui.ru/2012/02/10/8-bystryx-sposobov-vyyavit-%C2%ABdyry%C2%BB-cherez-kotorye-ot-vas-ubegayut-posetiteli/

Урок юзабилити №2: Что разработчику необходимо знать о пользователях

2012-02-10T14:58:00.000+03:00

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

Существует ряд вопросов, о которых посетители сайта нисколько не должны задумываться:

Где я?
Откуда следует начинать?
Где находится ... ?
Что самое главное на этой странице?
Почему это называется так?

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

Как мы в действительности используем Интернет.

Как это ни странно звучит, пользователи чаще всего ведут себя не так, как подразумевают разработчики.

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

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

Веб-страницы не читают, а просматривают.

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

Исключение, конечно, составляют страницы, содержащие такие документы, как новости, отчеты, описания товаров.

С чем же связано такое, можно сказать, неуважительное отношение пользователей к труду веб-дизайнеров? Причин несколько:

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

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

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

Замечание: Термин satisficing, полученный слиянием английских слов satisfying (удовлетворительный) и sufficing (достаточный), был введен экономистом Гербертом Симоном в книге "Социальные и рациональные модели человека" в 1957 г.

Почему же пользователи Web не стремятся найти наилучший вариант?
Обычно у нас мало времени.
Если выбор оказался неудачным, то это легко исправить. Нужно всего лишь нажать кнопку "Назад". Правда, если загрузка происходит медленно, выбирать приходится с большей осторожностью. (Это одна из причин, по которым большинство пользователей избегают медленно загружающихся сайтов)
Тщательное взвешивание всех возможных вариантов не всегда приводит к положительным результатам. Если сайт разработан плохо, стратегия поиска наилучшего варианта не является эффективной, и обычно лучше делать выбор наугад, а затем нажать на кнопку "Назад" в случае неудачного выбора.
Угадывать интереснее. Это требует меньших усилий, чем предварительный поиск самого лучшего варианта. К тому же, это создает элемент случайности, который всегда привлекает.
Конечно, из сказанного не следует, что пользователи никогда не пробуют сначала найти самый подходящий вариант и только потом щелкнуть мышью. Все зависит от склада ума, количества времени и степени доверия к сайту.

Мы не задумываемся, как все это работает. Мы просто делаем "как получится"

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

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

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

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

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

2012-02-08T13:54:00.000+03:00

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

Правило 7±2

Исследования показали, что человек, как правило, не может запомнить и повторить более 9 элементов: оптимальный вариант от 5 до 9 элементов. Этот факт можно использовать при создании навигационного меню, сократив при этом количество элементов в среднем до 7.

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

Правило 3-х кликов.

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

Принцип Парето либо Правило 80/20.
Что б улучшить эффективность сайта, нужно максимально сосредоточить свое внимание на 20% пользователей, действий, услуг (товаров), которые дают 80% прибыли.

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

Перевернутая пирамида.

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

Урок юзабилити №1: Общие принципы проектирования веб-сайтов

2012-02-07T16:53:00.000+03:00

О предмете

Если в курсе XHTML/CSS вы изучили основные технологии разработки веб-сайтов, однако на данном этапе вам еще рано приступать к созданию полноценных коммерческих проектов. Недостаточно освоить правила работы с некоторым инструментом, нужно научиться его правильно применять. То есть вы уже знаете, "как" делать, но пока еще не очень представляете, "что". Веб-сайты подчиняются различным стандартам, и это не только стандарты разметки, такие как HTML4, XHTML, CSS, но и стандарты проектирования навигационной структуры, элементов пользовательского интерфейса и прочих деталей. Задумывались ли вы, почему ссылка на главную страницу сайта называется "Home", а не, например, "Main"? Почему в русскоязычных ресурсах ссылка на главную страницу называется "Главная", а не "Домашняя"? Скорее всего, при создании своего сайта вы увидели, как это выглядит на других сайтах, и решили, что так принято.

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

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

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

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

Эргономика - наука об удобстве пользования. В промышленном дизайне эргономика играет ключевую роль, ведь согласитесь, никто не купит кресло, в котором неудобно сидеть, даже если оно будет очень красивым. Никто не будет пользоваться компьютерной мышью с сотней кнопок, ведь их неудобно нажимать. То же самое относится и к веб-сайтам. Кто же будет пользоваться интернет-магазином, если непонятно, на что нужно нажать, чтобы просмотреть каталог товаров или способы оплаты. Эргономика веб-сайтов в англоязычной литературе называется usability. По-русски так и говорят - юзабилити. Отцом науки юзабилити является Якоб Нильсен, написавший на эту тему несколько книг и множество статей. Посетите его сайт www.useit.com (ресурс англоязычный).

Что такое юзабилити

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

У юзабилити есть пять количественных составляющих:

Обучаемость: насколько легко пользователи могут выполнить основные задачи, впервые встретившись с незнакомым им интерфейсом?
Эффективность: после того, как пользователи ознакомятся с дизайном, как быстро они могут выполнить то же задание?
Запоминаемость: После того, как пользователь снова вернется к интерфейсу через определенный промежуток времени, насколько легко ему будет восстановить свои навыки работы с данным интерфейсом?
Ошибки: сколько ошибок делает пользователь, насколько серьезны эти ошибки, насколько легко пользователь может исправить эти ошибки?
Удовлетворенность: насколько пользователю приятно пользоваться данным интерфейсом?
Помимо юзабилити существует еще множество других важных качественных признаков дизайна. Один из ключевых - полезность, который описывает функциональность дизайна и отвечает на вопрос: является ли интерфейс тем, что пользователю нужно? Юзабилити и полезность одинаково важны: какой толк в программе, пусть даже и удобной в использовании, если она не делает то, что вам нужно? Плоха и та программа, которая гипотетически делает то, что вам нужно, но вы не можете с ней работать из-за ее сложного интерфейса. Для изучения полезности программы вы можете пользоваться теми же методами, что и при изучении качества ее юзабилити.

Зачем это нужно?

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

Первое правило е-коммерции гласит:
если посетители не могут найти товар, они никак не смогут его купить.

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

Как создать эргономичный проект

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

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

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

Более подробно методика эргономической оценки веб-сайта будет рассмотрена в следующих уроках.

5 признаков того, что вам нужен новый дизайн

2012-02-07T16:13:00.002+03:00

Безусловно, работы по апгрейду дизайна всегда не просты.

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

Тем не менее, редизайн – совершенно неотъемлемая часть жизненного цикла.

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

Большое количество отказов - пользователи приходят, но не задерживают на вашей сайте более 1 минуты
Статистика – неудовлетворительные результаты проведенных опросы или юзабилити-тестов
Список «to do», оставшийся еще со времен разработки.
Продукт выглядит старым –потребители любят новизну и инновации.
Прошло больше года с последнего обновления –жизнь не стоит на месте, и ваш сайт не должен.

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

Еще один повод начать редизайн, заставить своих работников вспомнить, зачем вы их нанимали! Но главное, конечно, нести красоту в этот мир!) Даже при помощи интернет-сайта.

WordPress, блог и юзабилити

2012-02-03T12:58:00.000+03:00

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

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

То ли они слишком сложны для них, то ли они не знаю о них - факт на лицо!

MaxSite Russian Date. Функционал этого плагина не очень обширен – он всего лишь выводит названия месяцев на русском языке, в родительном падеже, но согласитесь, для улучшения юзабилити он гораздо полезнее, чем, например, Hello Dolly.

Breadcrumb NavXT. Просто незаменимый плагин для создания «хлебных крошек» – самой удобной пользовательской навигации. Удобная, интуитивно понятная навигация – это важнейшая составляющая правильной юзабилити.

Scroll to Top. Плагин выводит на страницах блога кнопку «Вверх» или «Вернуться в начало». При наличии такой кнопки прокрутки страницы пользователю больше нет нужды пользоваться неудобной полосой прокрутки, чтоб вернуться в начало страницы. Плагин прекрасно настраивается: вы можете выбрать одну из 13-ти стрелочек из комплекта по умолчанию или создать и загрузить свою.

WordPress Popular Posts. Этот плагин позволяет вывести в сайдбаре блога записи с самым высоким читательским рейтингом. Притом выводятся не только ссылки на самые популярные записи, но и их миниатюры. Миниатюры для записей могут задаваться, как автоматически, так и вручную.

Cross-linker. Плагин для внутренней перелинковки WordPress. Такое связывание постов друг с другом положительно влияет не только на юзибилити, но и на индексацию блога, его посещаемость и прирост pr. Cross-linker легко настраивается и может работать с кириллицей.

Russify Comments Number. Плагин подчеркивает орфографические ошибки в комментариях.

Category and Page Icons. С помощью этого плагина вы можете снабдить каждую категорию иконкой, выбранной на ваш вкус.

WP-PageNavi. Еще один плагин для улучшения навигации WordPress блога.WP-PageNavi создает чрезвычайно востребованную на сегодняшний день постраничную навигацию. Плагин прост в установке и настройке.

Улучшение юзабилити – это проявление заботы о ваших пользователях!

Источник: http://moneymake.name/2012/02/best-wordpress-plugins-for-usability/

Семинар Дмитрия Сатина в Минске!

2012-02-02T16:18:00.004+03:00

Отличные новости от Учебного центра Seolab: в феврале стартует уникальный курс по программе «Юзабилити сайтов», первым занятием которого станет шестичасовой семинар от гуру юзабилити Дмитрия Сатина.

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

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

Специальный бонус!

Все слушатели первого набора программы «Юзабилити сайтов» в подарок от Учебного центра Seolab получают бесплатное посещение семинара Дмитрия Сатина*. Таким образом, мероприятие станет первым занятием новых курсов, на котором участники смогут получить множество полезной информации от ведущего специалиста по юзабилити в России и СНГ!

*предложение действует только в случае заблаговременной регистрации и оплаты курсов.

Важная информация

Авторский семинар Дмитрия Сатина

Дата проведения: 17 февраля 2012 года.

Стоимость участия: 1 700 000 б.р.

Подать заявку на участие в семинаре.

Курсы по программе «Юзабилити сайтов»

Дата начала курсов: 20 февраля 2012 года (первое занятие – авторский семинар Дмитрия Сатина)

Место проведения: Учебный центр Seolab (ул.Ивановская, 56)

Количество участников: не более 20 человек.

Стоимость: 2 300 000 б.р.

Действует система скидок!

Зарегистрироваться на курсы

Дополнительную информацию можно найти на сайте www.seolab.by или уточнить по телефонам +375 447111197 или 2220534 (доб.33).

Источник: http://marketing.by/main/market/announces/0054035/

Software People. Эпизод IV

2012-02-02T15:46:00.004+03:00

10-12 апреля в Digital October в очередной раз пройдет «самая человечная из технических конференций» - Software People 2012.
В течение трех дней российские и зарубежные эксперты будут проводить доклады, мастер-классы и панельные дискуссии, посвященные темам проектирования интерфейсов, человеческого фактора в разработке ПО, юзабилити и UX ПО.

Одним из ключевых докладчиков в этом году станет Джефф Де Люка. Джефф – IT-стратег мирового уровня, пятикратный лауреат IBM Rating 1, автор одной из 6 признанных Agile-методологий «Feature-Driven Development».

Эксперт выступит с мастер-классом «Как с помощью FDD делать отличный софт». Слушатели узнают, как добиться лучшей прозрачности (visibility) проектов, что такое полезная для клиента функция, как описать проект в виде классифицированного списка полезных функций (client-valued feature), насколько полезна стратегия уменьшения рисков и многое другое из 25-летнего опыта спикера в ИТ-индустрии.

В день мастер-классов Александр Орлов и Вячеслав Панкратов расскажут о «Мотивации без бюджета». Эксперты продемонстрируют 6 практических инструментов для оценки уровня внутренней мотивации сотрудников. Спикеры рассмотрят такие актуальные вопросы, как падение интереса человека к работе, развитие сотрудника в том направлении, в котором он действительно хочет развиваться, проблема «рутинной» работы.
Узнать подробнее о стоимости мероприятия и зарегистрироваться можно на сайте конференции.

Источник: http://www.ruformator.ru/news/article07CD5/default.asp

Какой идеальный размер шрифта?

2012-01-31T17:51:00.001+03:00

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

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

Например, я на своей портале тоже использую Arial, но оптимальным является 14 пт размер. 16 пт я использую для заголовков.

Государственный сектор и usability

2012-01-31T17:22:00.002+03:00

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

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

Приведу пример заказа талона в поликлинике on-line на государственном и частном портале.

Государственный портал

Без лишних комментариев.

Частный портал

В данном случае это не самый лучший пример, потому что главная страница повергла меня в тихий ужас.

Однако далее все выглядело достаточно мило и привлекательно.

Здесь можно выбрать врача (когда есть из кого выбрать ;), видно сколько талонов доступно через сеть, сколько в регистратуре, какие дни свободны, на какие талонов уже не осталось.
В результате я бы все-таки воспользовалась второй версией заказа талона через Интернет.

Наиболее удачным я считаю реализации железнодорожного портала и их форму заказа.

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

9 шагов по аудиту интернет-магазина

2012-01-27T16:10:00.001+03:00

Я уже ранее писала о значении юзабилити в "накапливании" реальных посетителей. Без юзабилити от SEO никакого толку.

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

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

2.Очевидно ли чему посвящен сайт, какой компании принадлежит и какую цель преследует? Если через 5 секунд пользователь еще не понял куда попал, он уйдет.

3. Какое общее впечатление создает сайт?

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

4. Легко ли доступна контактная информация компании? Это вообще больная тема. Форма должна быть в том месте, где ее ожидает увидеть пользователь!

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

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

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

8. А теперь о прибыли! Интернет-магазин сделан для чего? Для того, чтобы покупатель мог купить товар не выходя из дома. И даже не звоня по телефону! Поэтому кнопка заказа должна быть большая, красивая и расположена в таком месте, чтоб пользователь не смог пройти мимо. И цены безусловно мало того что должны быть указаны, но они еще и должны быть указаны актуальные, а не трехмесячной давности. Чтобы пользователь не сомневался в этом можно сделать там пометку: "прайс обновлен ..." или "прайс действует до... "

9. Если на сайте есть корзина, формы заказа и т.п. — проверяем. Уход клиента на стадии заказа - самый обидный! Вы почти его взяли, а он соскочил! Проверьте, чтоб все работало и спите спокойно.

И удачи Вам!

Источник: http://blog.sibirix.ru/

4 способа тестирования usability сайта

2012-01-26T15:17:00.002+03:00

Создание и наполнение сайта - процесс долгий и творческий.

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

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

Что же для этого нужно?

Способ раз

Человек, не знакомый с ресурсом - 1 штука.
Проблема, которую наш подопытный будет решать. Например, найти определённую информацию на сайте, оформить заказ, пройти регистрацию. Одним словом, он должен решить критически важную для существования сайта проблему.
Время - по вкусу.
В процессе наблюдения за решением задачи вы сможете оценить удобство сайта в целом и отдельные недоработки функционала в частности. Если проблема возникла у одного человека, она возникнет и у других.
Достоинства: наблюдение за реакцией реального человека, стоимость стремится к нулю.
Недостатки: малая выборка, подопытный может не являться вашей целевой аудиторией, оценка будет достаточно субъективна.

Способ два

Установите на сайт счётчик "Яндекс.Метрика". В "Метрике" для изучения поведения пользователей на сайте используются специальные инструменты, например, "Тепловая карта кликов", "Карта путей по сайту", "Вебвизор".

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

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

"Вебвизор"

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

Вместо "Яндекс.Метрики" вы можете воспользоваться счётчиком от Google - Google Analytics. Он обладает схожим с "Метрикой" функционалом, за исключением "Вебвизора", но обладает гораздо большим количеством специфических тонких настроек и требует профессионального изучения. Хотя с настройкой основных параметров вполне справится и новичок.
Достоинства: объективность, большой выбор параметров для анализа.
Недостатки: требуется время для сбора данных (в среднем три месяца), относительная сложность настроек счётчика.

Способ три

Если вы не уверены в своих силах или вас раздирают противоречия, то всё-таки рекомендуем обратиться к профессионалам. Ибо главный принцип всего и вся – не навреди! Конечно же, в первую очередь, вас попросят предоставить доступы к данным счётчиков. Без этих сведений вас ждёт только поверхностный анализ на основе личного опыта аудитора.

О чём вам расскажет профессионал?
Вы можете поставить конкретный вопрос: "Почему при посещаемости сайта в тысячу человек только один делает заказ?" - и получить конкретные рекомендации по исправлению негативной тенденции. Можете сказать: "Вот есть сайт. Хочу всё знать". Тогда результатом работы станет подробный отчёт о текущем состоянии сайта, технических и дизайнерских ошибках, анализ структуры и навигации, контента и юзабилити. Как правило, к отчёту прилагается список необходимых изменений и варианты решения существующих у сайта проблем. Цена вариативна и зависит от именитости агентства и количества страниц в отчёте.
Достоинства: объективность, структурированная подача материала, рекомендации по исправлению ошибок.
Недостатки: цена.

Способ четыре

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

Источник: Подглядываем за посетителями

SSM vs Usability

2012-01-25T16:12:00.000+03:00

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

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

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

Исследование по этой тематике было проведены компанией Crowd Science

Вывод:

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

Источник: mmr.net.ua

Книги по usability

2012-01-24T22:49:00.005+03:00

На первом официальном портала посвященном вопросам юзабилити Usability.by размещен список книг по данной тематике. Думаю будут интересны любому специалисту в этой отрасли. Со временем планирую их осветить в своем блоге, хотя найти их в электронном варианте не просто. Так что, если кто-то владеет электронными версиями или знает где их найти, прошу оставляйте ссылки в комментариях, я буду вам очень благодарна)

Все эти книги собраны в одной категории “Usability.by рекомендует” в магазине OZ.by

Авинаш Кошик - Веб-аналитика 2.0 на практике. Тонкости и лучшие методики
Алан Купер - Об интерфейсе. Основы проектирования взаимодействия
Алан Купер - Психбольница в руках пациентов.
Арндт Трайндл - Нейромаркетинг. Визуализация эмоций
Артемий Лебедев - Ководство. Параграфы о дизайне
Билл Скотт, Тереза Нейл - Проектирование веб-интерфейсов
Брайан и Джеффри Айзенберг - Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайта
Виктор Папанек - Дизайн для реального мира
Влад В. Головач - Дизайн пользовательского интерфейса2. Искусство мыть слона
Владимир Лаптев - Модульные сетки. Проектирование многополосных изданий
Д. Браун - Разработка веб-сайта. Взаимодействие с заказчиком, дизайнером и программистом
Дж.Феличи - Типографика: шрифт, верстка, дизайн.
Дженифер Тидвелл - Разработка пользовательских интерфейсов
Джесс Гарретта - Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия
Джеф Раскин - Интерфейс: новые направления в проектировании компьютерных систем
Джозеф М. Уильямс - Стиль. Десять уроков для начинающих авторов.
Дональд А. Норман - Дизайн привычных вещей.
Кристина Уодтке - Информационная архитектура: чертежи для сайта
Л. Константайн, Л. Локвуд - Разработка программного обеспечения.
Ланс Лавдей, Сандра Нихаус - Проектирование прибыльных веб-сайтов
Луис Розенфельд, Питер Морвиль - Информационная архитектура в Интернете
Мэтью Линдерман, Джейсон Фрайд - Как создать посещаемый сайт и избежать типичных ошибок.
Питер Морвиль - Тотальная видимость.
Расс Унгер, Кэролайн Чендлер - UX-дизайн. Практическое руководство по проектированию опыта взаимодействия
Роберт Солсо - Когнитивная психология
Роберт Чалдини - Психология влияния
Робин Вильямс - Дизайн для недизайнеров
Стив Круг - Веб-дизайн: книга Стива Круга, или `не заставляйте меня думать!`
Стив Круг - Как сделать сайт удобным. Юзабилити по методу Стива Круга
Стивен К. Сеов - Проектируем время. Психология восприятия времени в программном обеспечении.
Тим Эш - Повышение эффективности интернет-рекламы. Оптимизация целевых страниц для улучшения конверсии
Тимоти Самарс - Структура дизайна. Стильное руководство
Якоб Нильсен - Веб-дизайн. Книга Якоба Нильсена
Якоб Нильсен, Нари Тахир - Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов.
Якоб Нильсен, Хоа Лоранжер - Web-дизайн. Удобство использования Web-сайтов.

Что такое юзабилити?

2012-01-24T17:35:00.002+03:00

Юзабилити - это понятие, обозначающее уровень удобства использования предмета, для заявленных целей.

Юзабилити - отрасль новая и еще мало знакомая. Наиболее подходит для тех гуманитариев, которые умудрились попасть в сферу ИТ, как я, например :)

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

Чем занимается юзабилист?

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

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

Закон "безобратной" зависимости.

При повышении Usability - количество как временных, так и постоянных пользователей увеличивается, и как следствие SEO тоже увеличивается.
Но при увеличении SEO - количество временных пользователей увеличится, а вот постоянных - не факт! А на Usability вообще никак не повлияет.

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