Решение UX проблем в процессе редизайна сайта блогера-популяризатора лингвистики

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

Я работал над сайтом Микитки сына Алексеева, блогера-популяризатора лингвистики.

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

Улучшение пользовательского взаимодействия с сайтом (UX):

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

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

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

Гипотеза 1.

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

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

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

Гипотеза 2.

После проведения тестов вместо прежнего названия я предложил альтернативное и сразу решил проверить с пользователями его уместность.

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

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

Гипотеза 3.

На текущем сайте в глобальной навигации пристуствует кнопка "Youtube", ведущая на канал владельца сайта. Возникла гипотеза:

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

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

Гипотеза 4.

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

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

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

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

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

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

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

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

Гипотеза 5.

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

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

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

Гипотеза 6.

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

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

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

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

С главной страницы у пользователя часто начинается знакомство с сайтом. Главная, как начальная точка сайта, будет более интуитивно восприниматься самой крайней слева, что обусловлено направлением письма слева направо, счётом слева направо. Например, на арабских сайтах логотипы и ссылки на главную расположены справа, но при переключении на языки с направлением письма слева направо весь сайт инвертируется и логотипы, ведущие при клике на главную, привычно отображаются слева. Примеры арабских сайтов: https://www. emirates. com/dz/arabic/; https://www. crescent. ae/ar/

Особенно важно располагать ссылку на главную слева на сайтах, где:

1) пользователю доступно несколько различных задач (как данном случае: посмотреть видео, прочитать статью, прослушать трек)

2) много материалов и есть вероятность дезориентации

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

Гипотеза 7.

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

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

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

Обложка способствует:

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

2) Быстрому пониманию сути сайта — только очень лояльные пользователи готовы подолгу изучать сайт. Подавляющее большинство формирует свое представление о сайте буквально за секунды. Естественно, ни о каком подробном знакомстве с текстами, структурой здесь речи не идет. Поэтому важно, чтобы пользователи за это время сформировали идентичное или близкое к реальности представление о сайте.

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

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

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

Название вкладки "FAQ".

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

Дальнейшие неоднозначности в UX данного сайта были преодолены на основании логики без проведения пользовательского тестирования. Но полноценный тест завершенного сайта еще впереди ; )