Сейчас в разработке находится проект, в котором я полностью отвечал за 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 данного сайта были преодолены на основании логики без проведения пользовательского тестирования. Но полноценный тест завершенного сайта еще впереди ; )