BC/NW 2015 № 2 (27):11.2
ОПТИМИЗАЦИЯ И ПРОДВИЖЕНИЕ ИНТЕРНЕТ-ПОРТАЛА ВУЗА
Малышева Е.А., Горбунова А.О., Гусев Э.М., Еремеев А.А., Лаврушко В.В.
В современном обществе престиж вуза тесно связан с популярностью его –интернет портала. Рейтинг портала связан с рейтингом самого вуза. Отсюда – важность продвижения портала вуза.
Портал НИУ «МЭИ» на платформе Microsoft SharePoint с момента его запуска имеет неплохие показатели в рейтингах сайтов вузов. По итогам обновленного рейтинга Webometrics (Webometrics Ranking of World Universities), опубликованного 1 августа 2015 года, НИУ «МЭИ» занял 27 место среди российских университетов (2539 место среди мировых вузов), улучшив свои результаты по сравнению с 2014 годом на 23 позиции[1].
Целевой аудиторией портала вуза являются студенты, абитуриенты, сотрудники и выпускники. Существуют эвристические правила Якоба Нильсена, обеспечивающие улучшение юзабилити сайта.
Один из важнейших элементов продвижения сайта – юзабилити. Согласно стандарту ISO 9241-11[3], юзабилити — это степень эффективности, продуктивности и удовлетворенности, с которыми продукт (сайт) может быть использован определенными пользователями в определенном контексте использования для достижения определенных целей.
Существуют эвристические правила Якоба Нильсена [2], обеспечивающие улучшение юзабилити сайта.
Первым правилом является видимость состояния системы [2] (правило обратной связи). Пользователь должен быть проинформирован о состоянии системы и понимать, что происходит на сайте, на каком этапе взаимодействия находится пользователь. Для этого необходимо обеспечить средства обратной связи с пользователем и своевременное оповещение о состоянии сайта.
Для того чтобы сайт воспринимался как единое целое ему необходима стандартизация и единообразие при выборе средств оповещения о событиях и действиях, при оформлении элементов интерфейса, при выборе терминов.
Для пользователя понимание лучше, чем запоминание, поэтому сайт должен быть организован так, чтобы пользователю было интуитивно понятно как им пользоваться.
Основными элементами портала вуза являются:
- текстовая информация: абзацы, списки, заголовки
- изображения
- навигация: меню и «хлебные крошки»
- формы, включающие в себя поля заполнения, текст и кнопки, например, поиск.
Для удобства восприятия информации пользователем необходима структурированность[4]. Рекомендуется большие блоки информации делить на более мелкие: формы на шаги, списки на подгруппы, в меню использовать вложенность пунктов.
При взаимодействии пользователя с формой необходимо отображение этапов процесса заполнения полей и своевременное отображение ошибки.
Исходя из правила видимости состояния системы[2] пользователю необходима интерактивность при работе с сайтом. Например, реакция на нажатие кнопки при помощи таймера отсчета, индикатора, прогресс бара; индикация осуществления поиска и подсказки; индикация нажатия кнопки (цвет, размер, изменение положения, тень).
В меню пользователь воспринимает максимум 7-8 пунктов[5], если в навигации расположено большее количество, то дочитав список пунктов до конца пользователь теряется, тратит дополнительное время на выбор пункта или уходит с сайта.
Эвристики Нильсена являются общепризнанными и наиболее часто используемыми правилами при проектировании интерфейса взаимодействия. Поэтому необходимо руководствоваться данными правилами при создании web-ресурса. По сути, это минимальные критерии, которым должен отвечать интерфейс сайта, программы или приложения.
Во время модернизации сайта и по окончании внесения изменений проводится юзабилити-тестирование [5]. Существуют следующие типы тестирования:
• с использованием тестовой группы
- пассивное наблюдение;
- активное взаимодействие – инструкции тестируемому к действиям и запись результатов;
- активное вмешательство – интервью.
• при помощи статистических средств – Yandex Metrika[6], Google Analytics[7].
При хаотичной структуре пользователю трудно ориентироваться на сайте [4]. В таком случае необходима реструктуризация сайта. Существуют следующие схемы организации страниц[5]:
- четкие (алфавитные, хронологические, географические)
- нечеткие (тематические, по задачам, по аудитории, метафорические, гибридные)
Для упорядочивания структуры сайта используются методы карточной сортировки страниц [5]. В этом случае создаются карточки страниц. Карточка страницы содержит название страницы и ее краткое описание. Существует два вида карточной тестировки – открытая (пользователь сам группирует карточки страниц, а затем дает название каждой группе) и закрытая (группы распределения страниц предложены, пользователю предлагается распределить карточки страниц по заранее выбранным группам).
Для осуществления тестирования используются как бумажные карточки, так и программные продукты (облачные решения[5]), например:
- OptimalWorkshop (https://www.optimalworkshop.com/)
- Card Sorting & Navigation (http://webusability.com/usability-tools/navigation-card-sorting/ )
Наглядно для себя можно представить структуру (на доске или ватмане) или составить дендрограмму (дерево) структуры сайта.
При работе с сайтом важна скорость его работы на любых устройствах. Скорость работы сайта можно оптимизировать используя следующие рекомендации от Google[8]:
• оптимизация изображений
- базовая оптимизация - можно выполнить с помощью любой программы для редактирования изображений (обрезаются ненужные поля, уменьшается глубина цвета)
- расширенная оптимизация проводится сжатие файлов JPEG и PNG (без потерь).
- выбор подходящего формата для изображения (gif для маленьких простых изображений, jpg для фотографий, не использовать BMP и TIFF)
• сокращение объема ресурсов (HTML, CSS и JavaScript)
• использование расширения PageSpeed Insights для браузера Chrome для оптимизации кода HTML
• уменьшить объем CSS - YUI Compressor и cssmin.js.
• оптимизация JavaScript - Closure Compiler, JSMin или YUI Compressor
Также одним из способов сокращения скорости работы сайта является использование спрайтов CSS [9]. Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле, так как в случае отдельных изображений увеличивается количество HTTP-запросов и возрастает скорость загрузки страницы.
Для гибкости дизайна сайта можно использовать CSS код для градиента [10]. В таком случае легко поменять цвет и можно получить необычные градиенты и фоны.
Текст индивидуален для каждой группы пользователей. Для студентов размещают расписание и новости, для абитуриентов – информация о факультетах и условия поступления. Сотрудники размещают приказы и объявления. Выпускники могут следить за новостями вуза и просматривать информацию о вакансиях компаний-партнеров. Для каждой группы пользователей необходимо тщательно продумывать текст: не писать очевидное, объяснять непонятное и использовать тезисность для упрощения сложного. Не рекомендуется использовать отрицательные фразы: нельзя, не[5].
Наполнение сайта влияет на поведение пользователя, для этого текст должен отвечать на запросы потребителя и отражать путь посетителя, необходимый для достижения целевого действия. В зависимости от стиля и содержания текст по-разному влияет на пользователя[5]:
- Информирует пользователя, позволяет сделать осознанный выбор (информация о кафедрах и институтах)
- Обучает (учебные материалы, статьи-инструкции).
- Стимулирует к выполнению целевых действий (запись на курсы).
Кроме сайта возможно применение внешнего контент-плана:
- Статьи на внешних ресурсах, блоги для институтов и кафедр.
- Публикации в блоге и соц.сетях.
- Рассылки.
- Белые книги (white papers) – небольшое убедительное руководство, заказанное организацией как часть маркетингового контента.
- Инфографика.
- Видео-канал.
Естественные ссылки на сайт во внешних источниках учитываются при индексировании сайта поисковыми системами, а также в международных рейтингах. Благодаря большому количеству естественных ссылок и качественному уникальному контенту сайт может занимать лидирующие позиции в поиске. За счет этого повышается узнаваемость организации и увеличивается доверие пользователей[5].
Для привлечения и повышения заинтересованности аудитории на сайте можно размещать следующее[5]:
- Интересные факты и новости
- Кейсы – сборники заданий для мероприятий (олимпиад, конкурсов)
- Интервью с выпускниками, представителями организаций
- Переводы научных статей
Текст должен быть актуален и информативен, написан на языке ЦА, также важна структурированность текста[5]:
• логично выделенные подзаголовки
• списки - 3-7 пунктов, так как больше человек не воспринимает. Можно использовать нумерованный список, если пункты нельзя поменять местами без потери смысла – в других случаях применяется маркированный список.
• небольшие абзацы (3-4 предложения)
• единообразие представления информации и расстановка визуальных и стилистических акцентов в тексте
Существуют онлайн сервисы, дающие рекомендации по редактированию текста с точки зрения орфографии, пунктуации, проверки на уникальность и спам, производят подсчет знаков[5]:
- Орфограммка (http://orfogrammka.ru/) - орфография и пунктуация
- Главред (http://glvrd.ru/) - информационный стиль
- Text.ru (http://text.ru/seo) - семантический анализ, проверка на наличие спама, проверка уникальности
- Advego (http://advego.ru/text/top/) - проверка орфографии, семантический анализ и проверка уникальности
- ЗнакоСчиталка v.2 (http://8nog.com/counter/) - подсчет знаков, проверка текста
Веб-аналитика – метод мониторинга веб-ресурса [12]. Приступая к веб-аналитике прежде всего нужно ответить на вопросы: зачем, что и как анализировать.
Построение отчетов в системах веб-аналитики происходит по выборочным данным, соответственно решение об эффективности проводимых изменений на сайте следует принимать по мере накопления статистики и с учетом тенденций и сторонних факторов[5]. Аналитика сайта не показывает абсолютно точные данные, так как один пользователь может использовать несколько устройств и наоборот, также могут быть отключены cookie-файлы, присутствовать технические ошибки, отключен JavaScript.
Для анализа работы сайта часто используются бесплатные средства: Яндекс Метрика и Яндекс Веб-мастер, Google Analytics и Google Search Console.
Кроме указанных инструментов веб-аналитики существуют[5]:
- внешние системы анализа поисковых позиций (устанавливается отдельная программа на компьютер, которая не требует связи с интернетом)
- анализаторы логов сервера
- системы анализа, ориентированные на события.
Системы, ориентированные на события (Event-ориентированные системы), используются для анализа длинных циклов. Например, пользователь пришел на сайт и совершил целевое действие лишь после длительной цепочки других действий. Примеры Event-ориентированных систем: Kissmetrix, Woopra, Mixpanel.
Event-ориентированные системы платные, но предоставляют большие возможности[5]:
- просмотр истории всех действий на сайте для каждого посетителя
- построение различных последовательностей действий пользователя от первого до целевого действия (воронок)
- выделение когорт (время и отметка о целевом действии)
- сегментация событий
- дополнительные функции: A/B тестирование, триггеры, опросы
Для анализа работы сайта могут быть использованы следующие отчеты сервиса Яндекс Метрика[6]:
1. Отчет «Источники» позволяет определить источники трафика на сайт, просмотреть число визитов, глубину просмотра, число отказов.
Визит – последовательность действий одного посетителя на сайте (на одном счетчике). Визит завершен, если между действиями посетителя на сайте прошло некоторое время (по умолчанию - 30 минут, можно указать свой тайм-аут визита).
Глубина просмотра = Просмотры/Визиты
Отказы - доля визитов, в рамках которых состоялся лишь один просмотр страницы.
2. Отчет «Посетители география» позволяет отследить географическое распределение посетителей.
3. Отчет «Поисковые фразы» показывает поисковые фразы, по которым находят сайт. Лидирующие фразы можно использовать в рекламе. По фразам можно анализировать успешность проведения различных мероприятий.
4. Отчет «Страницы входа». Если работать со страницами, где показатель отказов выше в 2 раза, чем средний по сайту, то можно обнаруживать и оперативно устранять ошибки.
5. Отчет «Технологии» показывает какие технологии используются на сайте на стороне пользователя, какие средства отключены.
6. Отчет «Аналитика форм» позволяет тестировать варианты форм. При помощи данного отчета можно выяснить что отвлекает пользователя
7. Отчет «Веб-визор» показывает сколько действий (кликов, прокруток) было совершено пользователем в разных областях страницы и включает в себя[7]:
- карту кликов
- карту скроллинга (прокрутки)
- карту ссылок
Полный набор для анализа сайта включает в себя[5]:
1. Бесплатные системы веб-аналитики
2. Инструменты для вебмастеров
3. Сервис коллтрекинга
4. Анализатор логов сервера
5. Event-ориентированные системы
6. Системы оценки эффективности рекламы
7. BI-система (Business Intelligence - аналитические системы, которые объединяют данные из различных любых источников информации, обрабатывают их и предоставляют удобный интерфейс для всестороннего изучения и оценки полученных сведений.)
Современный сайт должен отображаться корректно и работать на всех устройствах, поэтому сайту необходима мобильная версия. При разработке мобильной версии сайта следует определить роль мобильного сайта, выделив основные цели и задачи пользователей.
Существует несколько принципиально разных подходов к проектированию[5]:
- отдельный сайт (увеличивается стоимость поддержки, усложняется продвижение при поисковой оптимизации сайта)
- адаптивный (дешевле поддержка, один адрес и сайт, нет необходимости в определении устройств и переадресации, больше удобен для десктопа, может быть медленным на мобильных устройства, не предоставляет полностью мобильный сайт для пользователя)
- динамический (единый адрес, версия загружается в зависимости от устройства)
При работе с мобильной версией сайта можно использовать особенности устройства, например, звонки.
Следует руководствоваться следующими рекомендациями при разработке[5]:
· Тестирование на реальных устройствах и на эмуляторах
· Поиск сделать заметным и подсказки
· Фильтры, сортировка элементов
· Оптимизация изображений, кода
· Фрагментация устройств – просмотр статистики и понимание целевой аудитории
При поисковой оптимизации сайта (Search Enable Optimisation) необходимо найти и исключить из состава сайта изолированные страницы. Страницы должны быть связаны и функциональны, логичны. Следует использовать простую навигацию. При индексировании сайтов учитывается уникальность контента. Существуют сервисы проверки уникальности текста. Применяется оптимизация изображений и указываются ключевые слова в названии и атрибут alt[5].
Для корректного отображения сниппета (блок информации о найденном документе, который отображается в результатах поиска) в поиске существует мета-описание страницы (не более 160 символов). Для улучшения отображения сниппетов используется микроразметка кода[5].
Внутренний поиск на сайте стоит осуществлять по ошибкам, опечаткам. В случае мобильной версии сайта поиск должен быть заметным и иметь фильтры для сортировки результатов поиска.
При структурированном подходе к размещению на сайте как статического (информация о подразделениях), так и динамического контента (события, объявления, новости) пользователь легче воспринимает информацию. За счет уникального и качественного контента увеличивается число посетителей портала вуза, что влияет на число поступающих. Оперативное размещение новостей, объявлений и событий увеличивает заинтересованность пользователей. Так как посетители сайта университета используют различные устройства для входа в интернет, то портал вуза должен отображаться в удобно воспринимаемом виде на любых устройствах.
Таким образом, при разработке и продвижении портала вуза для привлечения целевой аудитории следует учитывать аспекты юзабилити, представлять качественный контент на сайте, реализовать мобильную версию сайта. При разработке и поддержке сайта вуза следует анализировать реакцию пользователей на внесенные изменения.
Литература
1. Портал НИУ «МЭИ». Участие в рейтингах [Электронный ресурс].
URL: http://mpei.ru/AboutUniverse/about/Pages/Rating.aspx
2. «Эвристические правила Якоба Нильсена». Глава из книги «Shareware: профессиональная разработка и продвижение программ». Станислав Жарков. [Электронный ресурс].
URL: http://www.info-system.ru/interface/rule_nilsen_interface.html
3. ГОСТ Р ИСО 9241-11—2010. Эргономические требования к проведению офисных работ с использованием видеодисплейных терминалов (VDT). Часть 11. Руководство по обеспечению пригодности использования [Электронный ресурс].
URL:http://standard.gost.ru/wps/wcm/connect/76126680413f5d06a4e0fe7ab9890bef/GOST_R_ISO_9241-11-2010.pdf?MOD=AJPERES
4. Нильсен Я. Веб-дизайн: книга Якоба Нильсена – Пер. с англ. – СПб: Символ-Плюс, 2006. – 512с.
5. Школа Вебмастеров от компании Яндекс. Курс видео-лекций. [Электронный ресурс].
URL: https://academy.yandex.ru/events/webmasters_school/yawebm2015/
6. Яндекс Метрика. Справочная информация. [Электронный ресурс].
URL: https://yandex.ru/support/metrika/reports/overview.xml
7. Сервис веб-аналитики «Google Analytics» [Электронный ресурс].
URL: https://www.google.ru/analytics/
8. Рекомендации от сервиса PageSpeed Insights Google [Электронный ресурс].
URL:https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmpei.ru%2F&tab=desktop
9. Статья «CSS спрайты: основные техники и полезные инструменты» [Электронный ресурс].
URL: http://habrahabr.ru/post/159027/
10. Генератор CSS кода градиента [Электронный ресурс].
URL: http://www.colorzilla.com/gradient-editor/
11. Словарь терминов [Электронный ресурс]
URL: http://dic.academic.ru/dic.nsf/ruwiki/624494