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

Стоимость услуг по юзабилити сайтов

Улучшение юзабилити: связанные услуги

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

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

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

Результаты улучшения usability

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

  • Повышение времени пребывания посетителя на сайте. Если люди стали дольше задерживаться на сайте, открывать больше страниц, значит сайтом стало удобнее пользоваться и цель достигнута.
  • Снижение показателя отказов. Когда пользователь зашел на сайт и сразу же закрыл страницу, так и не пройдя куда-либо еще по сайту, это называется «отказом». Чем меньше таких ситуаций – тем интереснее для людей сайт.
  • Повышение конверсии. Каждый сайт имеет определенное целевое действие: заказ обратного звонка, покупка товара, регистрация на сайте, участие в мероприятии и т.п. Чем лучше соотношение конверсий к общему числу посетителей – тем эффективнее работает сайт.

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

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

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

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

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

Информационная архитектура сайта. Значение и использование

Информационная архитектура (часто сокращается до «ИА») - сочетание схем организации, предметизации и навигации, реализованных в информационной системе.

Довольно часто информационную архитектуру сайта связывают с Юзабилити (англ. usability, системой знаний об удобстве пользования сайтом). Так, в определении The Information Architecture Institute мы видим:

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

В то же время, приравнивать архитектуру сайта единственно к юзабилити не совсем правильно. Существует мнение (и я склонна его придерживаться), что «специалисты юзабилити не всегда достаточно хорошо понимают, как часто меняются требования пользователя к одной и той же информации, а также то, как эти различные требования влияют на скорость поиска» (Луи Розенфельд, (Louis Rosenfeld), соавтор высоко оценённого труда Information Architecture for the World Wide Web; цитата взята из интервью). Тут следует уточнить, что под поиском информации и скоростью этого поиска, Луи Розенфельд (по крайней мере, я это так понимаю) подразумевает не столько «поиск по сайту» с использованием одноимённого сервиса сайта, сколько названия пунктов меню, страниц и пр., которые должны соответствовать ожиданиям и требованиям посетителя. Наравне с принципами юзабилити, информационная архитектура должна включать маркетинговые цели, с выделением более значимых и «выгодных» областей сайта. Роль информационной архитектуры неотрывно связана с постановкой бизнес-задач.

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

Информационная архитектура. Создаём чертежи сайта

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

В диаграммах информационной архитектуры принято использовать ряд графических символов. Ниже представлен перечень таких условных обозначений (графических символов), с помощью которых осуществляется создание диаграмм сайта. Подробнее об их значении и употреблении можно прочитать на websam.com, статья Графическая нотация для документирования информационной архитектуры и взаимодействий пользователя с веб-сайтом . Веб-дизайнерам/веб-разработчикам — для дополнительного изучения рекомендую также ознакомиться с книгой Кристины Кристина Уодтке (Christina Wodtke), одной из ведущих информационных архитекторов в мире, «Информационная архитектура: чертежи сайта» (создание диаграмм в конце книги).

Основные графические символы для моделирования информационных систем:

Ниже представлен фрагмент информационной архитектуры сайта Столичной Судоходной компании (CCK=SHIP.RU):

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

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

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

Эволюция информационной архитектуры

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

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

Реализация ваших идей по дизайну

Чтобы понять, как информационный архитектор управляет проектом, можно представить себе, что обычному архитектору предлагают поработать над зданием после того, как оно уже построено. Хотя такое предложение кажется смешным, сегодня оно зачастую актуально. Даже после того, как самые хорошо спроектированные здания построены, они всё ещё могут подвергаться изменениям. Стюарт Бренд освещает этот удивительный феномен в своей книге «Как учатся здания: что происходит после того, как они построены» (How Buildings Learn: What Happens After They’re Built). И снова, как бы абсурдно это ни звучало, мы обычно ставим информационных архитекторов в похожее положение - предлагаем им поработать над веб-сайтом после того, как другие самопровозглашённые информационные архитекторы уже его спроектировали. Это происходит потому, что большинство людей не знают о существовании альтернативы. Чем скорее Вы доверите свою идею дизайна проекта профессионалу, тем быстрее он претворит её в жизнь.

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

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

Несмотря на отсутствие полностью устоявшегося определения ИА и её предмета, можно выделить основные подходы к их определению.

Введение термина датируется 1976 г. и приписывается Ричарду Вурману (Richard S. Wurman), определявшему задачу информационной архитектуры в организации эффективного визуального представления больших массивов данных.

В настоящее время информационная архитектура считается в меньшей степени приближенной к дизайну, а в большей степени --- к организации и структурированию информации. Так, по определению The Information Architecture Institute, информационная архитектура - искусство и наука организации и предметизации веб-сайтов, интранет-сетей, онлайн-сообществ и программного обеспечения, преследующая целью обеспечение удобства использования (usability).

Выделяют три основных определения информационной архитектуры:

Смежными с информационной архитектурой областями являются:

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

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

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

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

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

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

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

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

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

Краткое резюме: информационная архитектура сайта (Information Architecture, IA) — это информационная основа любого многоуровневого веб-сайта.

Навигация веб сайтов (navigation) — набор элементов пользовательского интерфейса (UI, user interface), позволяющий посетителю найти и получить конкретную информацию на веб-ресурсе, вступить в маркетинговую интеракцию, совершить конверсионное действие.

Этот пост продолжает серию публикаций о в блоге SaaS-платформы LPgenerator.

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

Структура навигации сайта зависит от IA — это безусловно, но «информационная архитектура» — гораздо более глобальное понятие, выходящее далеко за рамки просто .

Натаниэль Дэвис (Nathaniel Davis), специалист по оптимизации пользовательского опыта (UX) и проектированию пользовательских интерфейсов, еще в далеком 2011 году выложил в блоге UXmatters концептуальную статью «Основы практического использования информационной архитектуры» (Framing the Practice of Information Architecture), в которой предложил относиться к веб-навигации как видимой надводной части условного айсберга, имя которому — Information Architecture.

Что такое информационная архитектура сайта?

Information Architecture любого веб-ресурса включает в себя 2 основных компонента:

  • идентификацию и определение (дефиницию) контента и функциональности;
  • лежащие в основе ресурса иерархию, структуру и номенклатуру, которые определяют взаимоотношения между контентом и функциональностью.

Информационная архитектура (IA) не является частью пользовательского интерфейса, видимого на экране, — скорее, IA конфигурирует и обуславливает внешний вид и набор опций user interface.

Information Architecture состоит из электронных документов, таблиц, диаграмм, отнюдь не из макетов или прототипов веб-страниц.

Вот блок-схема, наглядно отображающая взаимосвязь между отдельными составляющими контента на ресурсе nngroup.com. Синие узлы представляют информационные объекты 1 уровня, зеленые — второго, желтые — третьего.

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

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

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

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

Для определения архитектуры веб-ресурса проводятся следующие мероприятия:

  • Инвентаризация контента (Content inventory): экспертное исследование сайта, которое проводят, чтобы найти и идентифицировать существующий контент.
  • Аудит контента (Content audit): оценка полезности, точности, тональности подачи и общей эффективности контента.
  • Группировка информации (Information grouping): определение степени клиентоориентированности соотношения «пользователь — контент».
  • Разработка и усовершенствование таксономии контента (Taxonomy development): определение стандартизированной терминологии для классификации и систематизации содержимого веб-ресурса (например, товарные категории для офферов интернет-магазина).
  • Создание описательной информации: определение метаданных, которые могут быть использованы для создания ссылок по теме, списков или других компонентов навигации, способствующих обнаружению необходимой информации, служащей активатором конверсионного действия.

Определение и описание навигации сайта

Навигация сайта представляет собой набор компонентов пользовательского интерфейса. Основная цель навигации — помочь пользователям найти контент и функциональные элементы ресурса (другими словами, «органы управления» UI), чтобы затем мотивировать к совершению запланированного маркетологом действия.

Типы навигации сайта и ее компоненты:

  • глобальная навигацая (global navigation),
  • локальная навигацая (local navigation),
  • вспомогательная навигацая (utility navigation),
  • фильтры категорий, ценовых границ и т. п. (filters),
  • ссылки по теме (related links),
  • «толстый» футер (fat footer), дублирующий элементы глобальной, локальной и вспомогательной навигации в собственно ,
  • и т. д.

Примеры навигационных компонентов: 1 — вспомогательная навигация; 2 — глобальная навигация; 3 — указатель местоположения («хлебные крошки», breadcrumb trail; буквально — «путь, помеченный рассыпанными хлебными крошками»); 4 — локальная навигация; 5 — ссылки по теме (в данном случае на статьи и сообщения в блоге); 6 — «толстый» футер.

Перед имплементацией элемента навигации на веб-страницу следует решить несколько вопросов.

Статистические приоритеты: сколько пользователей будут пользоваться этим навигационным элементом. Например, пользователи будут ориентироваться на ресурсе при помощи локальной навигации или предпочтут «привязанные» тематически ссылки?

Размещение: на каких страницах этот элемент должен располагаться? А где именно на макетной сетке: вверху, внизу, слева, справа?

Дизайнерский шаблон: что будет максимально способствовать юзабилити и положительному пользовательскому опыту — табы, выпадающие меню, «мегаменю» и т. д.?

Взаимосвязь между информационной архитектурой и навигацией

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

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

Рассмотрим гипотетическую ситуацию: дизайнер решил использовать широко распространенную навигацию «в стиле перевернутой L» (верхний навигационный бар и левый сайдбар, как его еще называют на сленге, «рельс»).

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

Если уже в ходе эксплуатации выяснится, что контент раздела превышает этот запас (при том, что 5 и больше уровней — это вполне обычная глубина информационной архитектуры для современных ресурсов типа интернет-магазинов), — то останется 2 выхода:

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

Определитесь с IA, прежде чем проектировать навигацию

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

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

Отметим, что при применении автономных целевых страниц, отличающихся простотой Information Architecture и «неглубокой» структурой при отсутствии глобальной навигации, все выше упомянутые проблемы грамотной иерархической организации контента просто не возникнут.