Как проверить удобство пользования сайтом

Основы юзабилити

Сайт – это, по сути, лицо компании и мы принимаем решение о том, хотим ли мы задержаться на нём подольше, буквально в первые секунды. Но даже очень красивый и модный сайт, может оказаться не эффективным. Если он будет неудобным, то мы потеряем клиентов и как следствие – снизятся продажи. В этой статье мы поговорим про удобство пользования сайтом. Читайте по теме – 10 ошибок веб-дизайна.

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

Удобство пользования сайтом. 10 эвристик Якоба Нильсена

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

Ещё в 1998 году он со своим коллегой Доном Норманом создал агентство Nielsen Norman Group, являющееся авторитетнейшей консалтинговой компанией в области пользовательских интерфейсов. Именно Дон Норман в 1993 году фактически придумал термин «юзабилити» (user experience, удобство пользователя), когда ещё работал в Apple. Сами же эвристики актуальны уже почти 30 лет (Нильсен написал их в 1994 году), это, по сути, простой чек-лист, с помощью которого можно проверить любой интерфейс на его удобство.

1. Статус системы

Пользователь всегда должен чётко понимать, что сейчас происходит, а система, в свою очередь, должна своевременно давать ему соответствующий отклик.

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

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

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

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

2. Соответствие между системой и реальным миром

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

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

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

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

3. Пользовательский контроль и свобода

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

Например, в личном кабинете хорошо видна пиктограмма выхода из ЛК, хотя во многих современных интернет-магазинах найти её непросто. На модальных окнах всегда есть кнопки закрытия, а раскрывающиеся списки легко свернуть обратно. На нашей странице об ошибке 404 (она выводится, если происходит технический сбой и система не может найти страницу) есть кнопки возвращения на главную страницу и перехода к поиску в каталоге – такой подход сразу даёт пользователю пути выхода из ситуации и делает её менее тревожной.

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

4. Консистентность и стандарты

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

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

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

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

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

5. Предотвращение ошибок

Если ошибка уже совершена, то для её исправления нужно предусмотреть «аварийный выход», о котором мы писали выше, но ещё лучше ваш интерфейс работает, если он заботится о том, чтобы не допустить совершения ошибки пользователем.

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

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

В наших полях ввода пароля есть возможность посмотреть только что введённый пароль, а также нельзя ввести кириллицу – при попытке ввода появляется надпись «Вводите латинские буквы». Эти ограничения избавляют пользователя от случайных ошибок и необходимости повторного ввода. Также поля реагируют на включённый Caps Lock: в момент установки курсора в поле выводится предупреждение серым цветом. А после ввода первого символа выводится фраза красного цвета – «Отключите Caps Lock».

Для интернет-магазина особое значение имеет удобство пользования сайтом и, в частности, работы с Корзиной и оформлением заказа. Мы спроектировали Корзину так, чтобы из неё можно было легко удалить товар, причем вернуться к её редактированию можно в любой момент, как в десктопной, так и в мобильной версии.

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

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

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

6. Узнавание вместо припоминания

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

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

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

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

7. Гибкость и эффективность использования

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

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

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

8. Эстетичный и минималистичный дизайн

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

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

Разные типы популярных меню интернет-магазинов строятся по разной навигационной логике, которая требует своих визуальных решений. Например, клиент хотел, чтобы на главной странице десктопной версии при клике на пункт меню “Лицо” сразу раскрывались все его подкатегории (Уход, Макияж) и входящие в них типы товаров.

Мы предложили сбалансированный, как кажется, вариант удобства пользования сайтом/эстетики – выполнить меню только одноуровневым раскрывающимся вниз блоком, либо через боковой каталог с таким же одним уровнем. Если делать второй уровень, раскрывающийся по наведению на пункты предыдущего уровня, это может привести к эффекту «прыгающего» меню, что не очень удобно для пользователей.

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

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

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

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

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

9. Помогайте пользователям распознавать, диагностировать и устранять ошибки

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

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

Например, даже вместо стандартной фразы, которая выводится при незаполнении пользователем обязательного поля – «Обязательное поле», мы стараемся вежливо указать клиенту, что именно пошло не так, и что нужно сделать, мы пишем – «Укажите, пожалуйста, имя – поле является обязательным».

Другие примеры фраз, выдаваемых при неверном заполнении полей – «Номер телефона должен состоять из 10 цифр, осталось 5», «Неверный формат почты – проверьте написание». Здесь важны даже такие мелочи, как допустимая длина поля – мы изначально учитывали не только десктопную версию, но и возможности мобильной версии, поэтому фраза была выверена так, чтобы быть подходящей и в более короткое мобильное поле.

10. Помощь и документация

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

Дополнительные критерии удобного дизайна

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

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

Так, стандарт WCAG (Международный стандарт для визуальных данных с учетом расстройств зрения – Web Content Accessibility Guidelines) используется во всём мире, чтобы минимизировать разницу в восприятии элементов интерфейса разными пользователями. Стандарты WCAG для нетекстовых элементов рекомендуют соблюдать контрастность компонентов интерфейса и графических объектов не менее 3 : 1 по отношению к окружающим цветам, что мы и проверяли.

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

Особенности мобильной версии

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

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

Два огромных, но близко расположенных элемента, всё равно могут вызывать ошибку. Два маленьких, хоть и расположенных далеко, также могут быть неудобны. Можно ориентироваться по гайдам, созданным для основных популярных сейчас систем – гайд для iOS и для Android: там минимальная область нажатия – это 44 пикселя, т.е. примерно 7 на 7 мм на дисплее смартфона. Например, такие рекомендации можно найти в переведенных эвристиках дизайнера Стивена Хоубера.

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

Удобство пользования сайтом. Итоги

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

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

Важно понять также и задачи клиента. Услышать его представления о продукте и сбалансировать их с удобство пользования сайтом для пользователей. Например, мы с клиентом много обсуждали, как строится навигация каталога, разбирали разные варианты меню. Ведь меню – это один из самых важных моментов для интернет-магазина косметики и e-commerce в целом. В итоге предложили клиенту 5 разных вариантов, однако они выбрали свой вариант и мы лишь немного предложили его скорректировать.

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