Информационное письмо
Образец оформления статьи
Анкета автора
14.06.2016

Оценка эргономичности и особенности пользовательского интерфейса сайта РЭУ имени Г. В. Плеханова в сравнении с сайтом РАНХиГС

Дегтярева Анна Вадимовна
Студентка Кафедра Информатики, факультет математической экономики, статистики и информатики Российский Экономический Университет имени Г. В. Плеханова Москва, Российская Федерация
Шугина Анастасия Александровна
Студентка Кафедра Информатики, факультет математической экономики, статистики и информатики Российский Экономический Университет имени Г. В. Плеханова Москва, Российская Федерация
Аннотация: В данной статье сравниваются между собой два современных сайта московских высших учебных заведений – РЭУ им. Г. В. Плеханова и РАНХиГС – и определяются их преимущества и недостатки. Рассматривается как внутреннее наполнение сайтов, так и их технические характеристики. На основе проведенного сравнительного анализа даются соответствующие оценки сайтам по каждому из критериев, а затем – рекомендации по улучшению интерфейса и усовершенствования сайта РЭУ имени Г.В. Плеханова.
Ключевые слова: юзабилити, оформление сайта, РЭУ им. Г. В. Плеханова, РАНХиГС, оценка сайта, сравнение сайтов, сравнительный анализ, интерфейс
Электронная версия
Скачать (976.8 Kb)

1. Введение

В настоящее время, когда информационные технологии играют значительную роль в жизни общества, почти любую информацию можно найти в сети Интернет. Ни для кого не секрет, что чуть ли не у каждого уважающего свою репутацию заведения есть веб-сайт с описанием его деятельности, предоставляемых услугах, и сайты высших учебных заведений – не исключение. Нынешние абитуриенты и студенты ВУЗов берут всю необходимую информацию для поступления (факультеты, баллы, режим работы приемной комиссии) и обучения (расписание, преподаватели, экзамены) именно на сайте, а родители, например, имеют возможность удаленного доступа к контактным данным учебного заведения. Из этого следует, что для того, чтобы процесс нахождения конкретной информации был удобным и не занимал много времени, сайт должен быть оформлен в соответствии с требованиями эргономики для пользовательских интерфейсов и эстетики [5]. Эргономика – изучение многообразных взаимоотношений между человеком, с одной стороны, и его работой, оборудованием и окружающей средой, с другой, и как применение полученных знаний к решению проблем, возникающих из этого отношения [1, с. 30]. В данной статье рассматриваются сайты двух высших учебных заведений РЭУ им. Г.В. Плеханова и РАНХиГС, расположенных в Москве, проводится их анализ по критериям оценки сайтов, и, в итоге, их показатели сравниваются в сводной таблице. Такой анализ проводится с целью выявления основных недостатков сайта РЭУ имени Г. В. Плеханова, а также для получения соответствующих рекомендаций по их поправкам.

2. Анализ эргономики сайта РЭУ имени Г.В. Плеханова

Сайт Российского Экономического Университета имени Г. В. Плеханова – http://www.rea.ru. Стоит отметить, что с недавнего времени сайт Плехановского университета был полностью видоизменён. Его старая версия доступна по адресу http://www.old.rea.ru, где также можно найти необходимые сведения. Ссылка на него расположена в меню, находящимся в нижней части любой страницы сайта. Однако информация http://www.old.rea.ru больше не обновляется и не загружается с 1 января 2016 года.

При переходе по ссылке http://www.rea.ru в браузере открывается главная страница сайта (рис. 1). 

Рис. 1. Титульная страница сайта РЭУ имени Г. В. Плеханова

Рис. 1. Титульная страница сайта РЭУ имени Г. В. Плеханова

Сайт Плехановского университета относят к некоммерческому типу сайтов, так как его целью является не извлечение прибыли, а донесение полезной информации до пользователей [3]. Сайт призван ознакомить людей с общими сведениями об этом общеобразовательном учреждении, его программами подготовки, информацией от приёмной комиссии, перспективах развития и прочих услугах, предлагаемых университетом. На сайте публикуются сборники научных статей, размещаются новости в области науки, международной деятельности и другие интересные факты, связанные с участием РЭУ в общественных мероприятиях. Немаловажной особенностью сайта РЭУ им. Г. В. Плеханова является возможность его просмотра в режиме версии для слабовидящих, а также наличие версий на английском и японском языках, что делает сайт доступным почти для любого пользователя со всего мира. Также на титульной странице сайта размещены ссылки на профили Плехановки в социальных сетях.

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

Графический пользовательский интерфейс сайта РЭУ имени Г.В. Плеханова занимает промежуточное положение между инфографичным пользовательским интерфейсом (то есть реализующим совокупность некоторого подобия активных и пассивных плиток) и иконографичным (то есть использующий для манипуляций «иконки» объектов) [2]. В общем смысле интерфейс – совокупность средств и методов обеспечения взаимодействия между элементами системы [4, с. 9].

Способ организации информации на сайте Плехановки – иерархический. Это самый распространенный, упорядоченный и, на наш взгляд, самый удобный для пользователя вариант размещения информации. Главная страница сайта содержит несколько меню со ссылками на различные разделы сайта. Разделы, размещенные на отдельных страницах, содержат в себе подразделы и другую информацию в развернутом виде. Иерархическая структура сайта может быть наглядно представлена при переходе по ссылке «Карта сайта», расположенной в меню в нижней части любой страницы. Например, раздел «Образование» содержит в себе несколько подразделов – «Уровни образования», «Особенности обучения», «Отчет о самообследовании Университета» и прочие.

Цветовая гамма сайта университета подобрана так, чтобы не затруднять восприятие текста человеком. Согласно исследованиям, чтение с экрана оказывает повышенную нагрузку на зрение, и пользователь читает текст с интернет-страницы приблизительно на 25% медленнее, чем с бумаги. Таким образом, чтобы облегчить восприятие информации, сайт выполнен согласно конструктивному стилю оформления: фон белый, элементы выбора окрашены одним цветом винного оттенка, элементы информационных панелей имеют геометрическую форму темно-синего цвета, текст на сайте представлен либо в белом, либо в черном цветах, – то есть используются как позитивная цветовая схема (черный текст на белом фоне), так и негативная (белый текст на черном) [3].

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

Например, на титульной странице строка меню расположена в верхней информационной панели («Лицей», «Абитуриенту», «Студенту» и т. д.). Ниже, после графической полосы с логотипом РЭУ размещена еще одна панель меню («Об университете», «Структура» и т.д.). Затем, после информационной области с фотографиями, располагается еще одно меню («Дополнительное образование», «Научные исследования» и т.д.). Первые два меню предназначены для перехода к страницам, находящимся на следующем уровне иерархии. Третье меню, получается, предоставлено лишь для «перемотки» фотографий в полосе, расположенной выше. А это значит, что оно не предназначено для навигации по сайту, что является довольно хорошей почвой для размышлений над дизайном сайта Плехановки.

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

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

3. Анализ эргономики сайта РАНХиГС

Сайт российской академии народного хозяйства и госслужбы при президенте РФ (РАНХиГС) - http://www.ranepa.ru

Переходя по данной ссылке, мы попадаем на главную страницу сайта (рис.3).

Рис. 2. Титульная страница сайта РАНХиГС

Рис. 2. Титульная страница сайта РАНХиГС

Сайт РАНХиГС, как и сайт Плехановского университета относится к типу некоммерческих сайтов, то есть его целью не является извлечение прибыли [3]. При просмотре главной страницы, сразу появляется представление, о чем сайт, какую информацию можно на нем найти и кому он будет интересен. Это возможно благодаря ключевым словам, размещенным в шапке сайта, которые бросаются в глаза в первую очередь

Цели данного сайта:

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

Предоставление достоверной информации из первоисточника

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

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

Размещение удобной формы обратной связи.

Сайт рассчитан для абитуриентов, студентов и их родителей из любых городов России и зарубежья, а также для сотрудников и преподавателей университета, которые ищут на сайте информацию для поступления, обучения или актуальные новости. Для того, чтобы иностранные студенты могли просматривать информацию без языкового барьера, на сайте РАНХиГС предусмотрена версия на английском языке. Также, что немаловажно, есть версия для слабовидящих, что является положительной особенностью сайта. Отличительной особенностью сайта РАНХиГС от сайта Плехановки является наличие мобильной версии сайта. При просмотре страниц с телефона, отображается удобный интерфейс, позволяющий видеть все главные разделы сайта.

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

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

Использована позитивная цветовая схема (черный текст на белом фоне), благодаря чему чтение и восприятие текста становится комфортным и не оказывает сильную нагрузку на глаза [3]. Фон сайта белый, однотонный, что также позволяет легко ориентироваться на сайте. Все ссылки сделаны в едином стиле и легко выделяются среди остального текста. Наиболее важные материалы, такие как общие и главные разделы, располагаются в начале страницы. Большим недостатком сайта можно назвать отсутствие расписания занятий.

4. Сравнение сайтов

В добавление к вышесказанному мы решили провести сравнение двух описываемых нами интернет-ресурсов – РЭУ имени Г. В. Плеханова и РАНХиГС при Президенте РФ – согласно некоторым критериям оценки сайтов, применяемых в работах специалистов. Данные критерии приведены в таблице 1, расположенной ниже, и напротив каждого из них указаны оценки, соответствующие нашему личному мнению [3].

Таблица 1. Сравнительная таблица критериев

Критерий

РЭУ

РАНХиГС

Основные критерии оценки сайта

Простота

+

+

Понятность

+

+

Содержание

+

+

Проработка

Дружелюбие к пользователю

+

+

Полезность

+

+

Диапазон применения

Кроссплатформенность

+

Корректность функционирования

+

+

Удовлетворение целевой аудитории

+

+

Структура и навигация

Логика содержания

+/–

+/–

Наличие тупиковых страниц

+

Наличие пустых страниц

Одинаковое расположение навигации

+

+

Корректность работы ссылок

+

+

Текстовое пояснение или всплывающие подсказки к иконкам

Возврат на предыдущие подуровни

+

+

Количество кликов для нахождения нужной информации:

Проходные баллы

Расписание занятий

3 клика

«Абитуриенту» → «Статистика приема» → «Статистика баллов»

1 клик

«Расписание занятий» (на главной странице)

1 клик

«Высшее образование» → «Бакалавриат и специалитет» → «Проходной балл» (выбор из выпадающих списков)

На общем сайте ВУЗа отсутствует

Контент (содержание)

Соответствие содержание сайта его предназначению

+

+

Нашли, что искали?

+

+

Нечитабельный объем информации

+/–

Достоверность информации

+

+

Наличие ошибок в тексте

+

Наличие поиска

+

+

Внешний вид

Единый стиль оформления

+

+

Приятный глазу дизайн

+

+/–

Качественная графика

+/–

+/–

Наличие "воздуха" на страницах

+

+

При сопоставлении сайтов между собой по определённым критериям, представленным выше в таблице 1, можно утверждать, что в целом сайт Плехановки почти идентичен сайту РАНХиГС по всем показателям. Однако, несмотря на общую положительную картину, вдобавок к недостаткам, упомянутым ранее, у сайта РЭУ имени Г. В. Плеханова имеются и другие недостатки.

Во-первых, это неполноценная проработка структуры сайта, которая влечет за собой появление следующего недочета – не совсем логичное содержание некоторых веб-страниц. Зайдя на сайт впервые, вопреки логическому ходу мысли, пользователь может столкнуться с определёнными трудностями при поиске нужных ему сведений или разделов. Например, в главной информационной панели на сайте РЭУ расположены две ссылки «Структура» и «Образование» на одноимённые разделы сайта. Новичок, скорее всего, не сразу поймёт, где находится информация о факультетах университета – в разделе «Структура» или в разделе «Образование».

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

Четвертый недостаток – наличие грамматических ошибок в тексте. Страниц с подобным изъяном, по правде говоря, немного, но всё же такие на сайте РЭУ имени Г. В. Плеханова есть. Многие из ошибок, можно предположить, были сделаны вследствие спешного формирования контента страниц.

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

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

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

5. Выводы и рекомендации

На основе проведённого анализа можно полагать, что сайты РЭУ имени Г. В. Плеханова и РАНХиГС, в основном, соответствуют основным критериям оценки сайтов, широко применяющимся в разработках веб-интерфейсов. Оба сайта выполнены в современном стиле, оснащены интересными графическими решениями (например, мини-презентации на главной странице или видео-презентации факультетов).

Эргономика сайта РЭУ имени Г.В. Плеханова не хуже, чем в других вузах г.Москвы.

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

1. Устранить грамматические ошибки в тексте на страницах сайта. Подобный недостаток может существенно испортить репутацию ВУЗа.

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

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

4. Предусмотреть размещение страниц на сайте без необходимости их перемотки.

5. Предусмотреть помощь пользователю в виде всплывающих подсказок.

Список литературы:

1. Мунипов В.М., Зинченко В.П. Эргономика: человекоориентированное проектирование техники, программных средств и среды: Учебник. – М.: Логос. - 2001. - 356с.

2. Попов А.А. Эргономика пользовательских интерфейсов в информационных системах: учебное пособие/ А.А. Попов. - М.: РУСАЙНС, 2016.- 312с.

3. Приморский институт переподготовки и повышения квалификации работников образования. Методика сайтостроения. – Электрон. книга. Режим доступа: http://iso.pippkro.ru/dbfiles/sites/htmlbook/chapter4.html

4. Сергеев С.Ф., Падерно П.И., Назаренко Н.А. введение в проектирование интеллектуальных интерфейсов: Учебное пособие. – СПб.: СПбГУ ИТМО, 2011. – 108с.

5. Профессиональные советы по проблемам веб-дизайна // Студия Артемия Лебедева. – Электрон. Статья – Режим доступа: http://www.artlebedev.ru/