В прошлых частях мы рассмотрели технический аудит, seo-аудит и тестирование контента. В своей и следующей части просветимся в юзабилити - оценке удобства и простоты использования сайта. - Не пропустить неточности и недочеты перед запуском нового проекта;- проверить конверсию страницы после редизайна или добавления нового функционала;- выявить основные причины, по которым страницы показывают низкую конверсию при известном трафике;- повысить вовлеченность пользователей.В теме пользовательского опыта нет возможности дать подробные советы и рассуждения, а также правильно реализовать. Самый верный путь - эксперименты и тестирование. Посмотрите на поведение посетителей, на какие страницы они переходят, дочитывают ли публикацию до конца, на какие события нажимают, добавляют ли предложения в избранное, достигают ли конверсии и другое. Где регулярно наблюдать поведение пользователей на сайте - Отчеты по конверсиям в google analytics и .Метрике;- показатели отказов в google analytics и .Метрике;- карта поведения в google analytics;- тепловая карта действий и скроллинга в метрике;- записи поведения посетителей в webvisor.После этого ищите не самые удачные места: проигнорированные элементы, компоненты, которые не дочитывают до конца, страницы с высокой вероятностью отказов, слабые конверсии - и находите удачные участки с помощью a/b-тестов. Есть единые принципы, как разработать, чтобы ресурс корректно открывался на гаджетах и был комфортным и удобным для участников. В статье наши модераторы собрали первостепенные обстоятельства, на них стоит обратить внимание. Оптимизация под мобильные устройства Важно, чтобы посетители имели возможность ознакомиться со всей информацией в удобном виде на пк, пусть это будет стационарный компьютер, смартфон или небольшой планшет. Помимо большего комфорта пользователей, правильное отображение ресурса на мобильниках и планшетах положительно влияет на продвижение в сети. Yandex и google понижают в списке интернет-порталы, плохо адаптированные к сотовому оборудованию. Основные условия отображения на портативных устройствах: - Отличная скорость загрузки.- Область просмотра самостоятельно перестраивается под размер экранов, чтобы поместиться без горизонтальной прокрутки.- Размеры шрифтов меняются автоматически, чтобы текст комфортно читался с монитора.- Отсутствие контента, который не может быть воспроизведен на устройстве iphone, например flash-анимации.- Удобный дизайн интерактивных элементов, расположение роликов на приемлемом расстоянии друг от друга, чтобы можно было попасть пальцем в адрес.- Всплывающие баннеры не должны мешать просмотру, они должны быть заметным крестиком для закрытия, где удобно дотянуться.Для более подробной информации мы разбили все описанные запросы на 14 правил mobile-friendly сайта. Как проверить оптимизацию платформы под мобильные Проверьте, как отображается ваш сайт на портативных гаджетах с помощью тестов от поисковых систем: - В google есть mobile-friendly, в текущих условиях это только короткий ответ, а в деталях отправляет в консоль;- в яндекс.Вебмастере есть мгновенный тест на мобильную оптимизацию с недостаточным чек-листом без пояснений;- также адаптивность для: аппаратное обеспечение мобильных телефонов реально проверяется в нашем сервисном центре для оценки сайта. Проверка включает в себя область просмотра, тег viewport, сжатие, css, быструю загрузку на портативных устройствах и читаемость контента. Реализовать адаптацию сайта под современные гаджеты можно 3 методами: - Адаптивный дизайн;- динамическое отображение;- смартфонный вариант на поддомене.Адаптивный дизайн На любое оборудование сервер передает один и тот же html-код страницы, а размеры элементов подгоняются под экран с помощью css. Метатег viewport сообщает браузеру, что страница является адаптивной. Без этого тега специальный браузер масштабирует весь сайт, пытаясь уместить его на маленьком экране. С помощью тега viewport он размещает определенные продукты по ширине экрана. Плюсы адаптивного дизайна сайта: Не нужно разрабатывать уникальный сайт, достаточно внести исправления в html и css. Единый url для размеренной и мобильной копий сайта исключает лишние редиректы и упрощает индексацию поисковыми роботами. <+@>минусы адаптивного дизайна сайта: Пользователи разных гаджетов и пользователи пк могут преследовать разные цели. При адаптивном дизайне такой вариант - копия обычного, поэтому второстепенные разделы, которые не нужны пользователям iphone, мешают им найти важные данные. Мобильный пользователь загружает полную версию портала плюс настройки для альтернативного варианта. Это снижает скорость загрузки вкладок. Подробнее о реализации адаптивного дизайна в справочных материалах google. Динамическое отображение В зависимости от нетбука, с которого пользователь заходит на портал, сервер отправляет разные варианты html и css кода. Лучше сказать url один, или элементы кода для разных аппаратных средств разные. Вебмастеру необходимо включить в ответ сервера http-header vary о том, что страницу необходимо дополнительно просканировать роботом для телефонов. Без http-header vary поисковый бот способен не найти мобильный контент, тогда пользователь получит десктопную версию на iphone. Плюсы динамического отображения сайта: Вы можете избавиться от лишнего javascript, оптимизировать html и css специально для разных гаджетов. Ускорить загрузку профилей и уменьшить вес технической части устройств пользователей. Можно сделать целевые версии - использовать разную верстку для разного оборудования, или, например, отдельно предложить установить моды для разных операционных систем. Минусы динамического отображения сайта: Приходится делать некоторое количество верстки объектов, юзабилити аудит сайта настраивать сервер для отслеживания актуальности списка агентов пользователя. Механизм определения пользовательских устройств несовершенен, новый или нечасто используемый смартфон может не определяться как мобильное устройство. Подробнее о реализации динамического отображения в справочных материалах google. Мобильная версия на поддомене Две версии портала с разными url - десктопная и мобильная. Чаще всего на платформе https://example.Com/ альтернативой нам будет играть url вида https://m.Example.Com/ или https://mobile.Example.Com/. Мобильная версия на поддомене больше подходит для крупных сайтов, например виртуальных рынков с богатым ассортиментом товаров. Преимущества интеллектуальной версии сайта: Мобильная версия на поддомене - это практически уникальный сайт. Здесь можно реализовать упрощенный дизайн. Такой вариант проще и использует меньше ресурсов устройств пользователей. Пользователь может выбрать версию. С разными url реализуемый функционал позволяет добиться полной модификации платформы в критических ситуациях. Недостатки мобильной версии сайта: Высокая сложность разработки и профилактики. Смарт-вариант - по сути, уникальный сайт. Наполнять контентом придется несколько сайтов, два. Подробнее о продаже альтернативного варианта на поддомене в справке google. Навигация по порталу и путь пользователя Вы должны посмотреть на страницы, созданные под какие-либо блоки пользователей. Оцените поведение аудитории: - Пользователи последовательно следуют алгоритму цели или отвлекаются на другие разделы, баннеры;- сколько экранов они охватывают: прокручивают ли дальше второго;- интересуются ли способами позвонить франчайзеру и какой способ выбирают;- какими разделами интересуются чаще;- замечают ли они важные для конверсии блоки, реагируют ли на cta;- сколько из них доводят до конверсии.Таким образом, у вас есть возможность точно определить, где пользователям трудно склоняться к интернет-сайту, где можно упростить путь к конверсии. Идеально провести тестирование на невиртуальном cta, как это сделала организация discord на примере такого исследования. Они набирали участников из tsa и давали им задания с вопросами об их профессии. Например, нужно точно согнуть лист толщиной в четверть дюйма в v-образную форму по вертикали. Куда будет смотреть наблюдатель?". Участники должны были найти оборудование на страницах сайта. В ходе этого теста компания поняла, какие сложности возникают при такой навигации: - Достаточно большое количество категорий на начальном уровне меню, а уровней много. Если ошибиться в самом начале, то вся преграда поиска пропадает зря.- Неинтуитивная иерархия.- Неточные названия категорий, непонятные для пользователей.- На втором этапе тестирования участники сами группировали классы товаров. Получилась логичная навигация с названиями, близкими к таковым. Здорово, когда есть возможность провести тест с персональной конкретной аудиторией, чтобы опираться на ее мнение при составлении навигации. Но параллельно можно посмотреть на организацию популярных конкурентов. Может быть, даже удастся сделать ее заметно приятнее и понятнее. Требования к хорошо продуманной системе навигации в магазине: Меню и основные ссылки находятся на привычном месте.</@> часто все необходимые ссылки располагаются в верхней части страницы, иногда сбоку выводится карта продуктов с разделами. Второстепенные ссылки часто опускаются в подвал - нижний колонтитул сайта. Уровень вложенности страниц - не более трех-четырех.Вложенность - сколько кликов занимает минимальный путь от главной до нужной страницы. Многие придерживаются "правила трех кликов", но опыт показывает, что любители музыки легко зайдут и больше, если поймут, как правильно выбрать нужную страницу. Меню - простое, категории не дублируют друг друга.Необходимо соблюдать баланс: минимизировать количество категорий, чтобы подписчик не терялся в многочисленных предложениях, но при этом оставить меню понятным, не требующим долгого клика, чтобы добраться до товара или статьи. Наличие "хлебных крошек".Ссылки на структуру каталога, показывающие предыдущие категории до главной. По хлебным крошкам пользователь видит, на каком этапе зарегистрировался, и может перейти на предыдущий этап. Заметна кликабельность элементов.Ссылки выделяются в тексте, стандартно для этого применяются подчеркивание и цвет. Отмечаются также кликабельные картинки или кнопки: например, при наведении курсора меняется вид. Реализованная система поиска по ресурсу.Поиск выдает результаты из сети и контакта с опечатками и вариациями названий искомого элемента. Поиск выглядит стандартно - как место для заполнения лупой или подписью. Реакция портала на действие пользователя выглядит заметной.Если новая информация продается в "слепой зоне" пользователя, он хочет не замечать, что сайт отреагировал на его клик. <+@>верстка не подвержена критическим сдвигам в процессе загрузки.Если во время загрузки появилась часть информации, то с ней уже можно будет работать. Часто загружается какой-либо фрагмент сверху, тогда верстка смещается на высоту этого элемента. Чтобы такого не происходило, обратитесь к статье cls. Элементы сайта: header, menu, file - и footer В верхней части страницы - header, header В этой части размещаются некоторые карты, которые видны на любой странице. Расположение элементов необязательно, но игроку будет легче ориентироваться на наш сайт, если он увидит стандартный вид заголовка. Часто слева: Кликабельный логотип с указанием главной страницы;-город, если он актуален для ресурса.Центр: -Каталог с данными о дилинговом центре, услуги или выбор товара, цены, портфолио, блог, контакты;-каталог: если ресурс большой, то его можно убрать под кнопку "каталог", если ответ отрицательный, то разместить страницы в дополнительном меню;- место для выбора в реестре сайтов;-справа: - Звонки в категории "контакты" - все способы связи, а за каталогом обычно выводится один телефон;- форма запроса обратной связи;- если есть функция заказа диплома, то корзина, избранное, счет.Примеры заголовков: Содержание центральной части Основную область страницы занимает контент - тексты, каталог продукции, изображения - исходя из направленности официального сайта и назначения страницы. Оптимизацию файлов мы рассмотрели в предыдущей части цикла статей об анализе ресурса. Теперь коснемся его размещения на странице. Принято считать, что обитатели языковой среды, где они читают текст из стороны в сторону, просматривают страницу по модели f or z. Это подразумевает, что они пробегают глазами участок текста, чтобы понять, затем скользят вниз, чтобы подобрать именно то, что так долго их интересует, затем снова читают из стороны в сторону. Актуальность модели подтвердила "nielsen norman group" в собственных многолетних исследованиях юзабилити. Дизайн и технологии меняются комфортно, а вот вкладчики - нет. Все люди также хотят сократить время, сконцентрировать взгляд на ярких картинках, крупных заголовках и выделенных фрагментах. Владелец портала должен не заставлять пользователя читать любой контент, а постепенно сводить его к понравившейся информации и предоставлять место в удобной структурированной форме. Как оформить контент: 1. Как можно больше подключать другие форматы, не только текстовые - схемы, графики, видео, карты, с конкретными тезисами.2. Выделяйте заголовки и подзаголовки разными уровнями h2-h6, подчеркивайте их визуально.3. Дозируйте рекламные блоки - достаточно органично вписать процентно-полуторные вставки, подходящие для.4. Используйте отступы между абзацами, разбивайте текст на смысловые блоки по четыре-пять предложений.5. Выносить цитаты, персоналии, тезисы и необходимые факты в оформленные крупные блоки.6. Использовать все возможности разметки текста: маркированные списки, чек-листы, таблицы.7. Для серьезных текстов делать якорную концентрацию в самом начале, чтобы игрок имел возможность оценить композицию фильма и перейти к упорядоченному блоку.Внизу страницы - футер, подвал сайта Внизу находится футер или подвал сайта. Туда необходимо поместить менее важные ссылки, которые не помещаются в главное меню, и дублируют навигацию. Что можно разместить в футере: - Дубль верхнего меню, чтобы игрок, прокручивающий страницу, мог перейти в заказанный раздел.- Второстепенные задачи, которых нет в главном меню - вакансии, навигация, контактная информация для обсуждения посторонних ролей и партнерств.- Социальные сети компании.- Документы: политика конфиденциальности, договор на сбор данных.В целом, к расположению и оформлению шаров предлагается подходить творчески, но привычные и надежные решения более предсказуемы по своему эффекту. Знать, что человек пришел на ресурс решить поставленную перед нами задачу, а не любоваться сайтом как произведением искусства. Такая мелодия побуждает пользователя совершить некоторые манипуляции на страницах сайта: регистрация, подписка на рассылку, репост в своей группе, приобретение товара или услуги и другое. Повысить конверсию помогут элементы: - Акциискидки на товары, а также услуги, второй товар к празднику, бесплатные демо-продукты за подписку - эти предложения повышают конверсию и лояльность пользователей. Сделайте анонс акции объемным и ограничьте процесс продажи, чтобы у возможного потребителя не возникло желания отложить конверсионное действие.-Фотографии и инфографика- картинки, фотографии и увлекательная инфографика привлекают внимание больше, чем текст. Важно рассказать о контексте использования и преимуществах конкретного товара или услуги. - Конкурентные преимущества укажите, чем вы лучше конкурентов. Не злоупотребляйте фразами типа "оперативность работы", "безупречное качество продукта" или "активная команда". Такой ход не дает никакой информации. Будьте конкретны, используйте подлинные метрики, упоминайте сроки выполнения заказа, характеристики продукции, прайс-лист и класс профессионализма сотрудников. - Социальное доказательство коробки с сертификатами качества, наградами и дипломами. Отзывы клиентов. Портфолио, если пользователи предлагают услуги. Блок facebook, instagram с активными живыми профилями. Такие элементы повышают уверенность в конверсионном действии и доверие к правилам и нормам сайта. - Call-to-action (cta, призыв к действию)кнопки "купить", "подписаться", "поделиться" и другие призывы к целевому действию. Элементы cta обычно понятны пользователю и должны быть заметны. Призыв должен проникать в потребность. Поля ввода данных Это то, с чем он сталкивается на заключительном этапе конверсии: регистрационные формы, формы подписки, отзывы, анкеты и другие элементы. Не требуйте от производителя заполнения длинных и сложных форм - это убивает конверсию. - Запрашивайте у завсегдатаев только ту информацию, которая необходима в каждой конкретной ситуации. Например: для выбора обратной связи не требуется адрес электронной почты. - Разделяйте обязательные и необязательные поля, такой прием можно задать непосредственно в полях ввода. - Используйте подсказки и примеры заполнения полей. - Используйте маски для полей, где требуется информация в формате flash: номера пластиковых карт, телефоны и тому подобное. Маски ускоряют заполнение полей, поскольку многие символы уже будут введены. - Сразу же после окончания ввода сделайте немедленную проверку правильности данных. Если вы заполняете длинную форму, нажимаете кнопку "отправить", а затем при перезагрузке страницы видите уведомление о том, что половина полей заполнена неверно, стоит ли ему заполнять все заново? Забавный пример: кнопка входа не дает вам нажать на плечи, пока код доступа набран неверно: - Добавить возможность входа на сайт виппромокода через регистрацию аккаунтов в различных социальных сетях. Большинству пользователей удобно иметь только один профиль для каких-либо сервисов. - Отключить кнопку "отправить" после нажатия, это дает возможность избежать многократной передачи информации. Или используйте индикатор передачи информации.Если вы не хотите анализировать вручную - Воспользуйтесь удаленным предложением по автоматическому аудиту сайта: - Проверит проект по 70 тестам, включая юзабилити, оптимизацию, отношение поисковых систем, фильтры, ссылки, поток и так далее;- найдет ошибки в seo оптимизации, и покажет url страниц;- построит график строк в google и google.Поверхностные проверки обходятся без денежных взносов, а по подписке вашему взору откроется проверка позиций, анализ внутренних страниц, множество графиков, еженедельная статистика и прочее Это будет происходить в продолжение материала о независимом юзабилити-аудите сайта: - Поиск по каталогу- контактная информация- читабельность текста- шрифты- оттенок и контрастность- логотип и favicon сайтанапишите в отзывах, чем бы человек дополнил материал! Есть возможность поделиться личным опытом юзабилити-тестирования: или, может быть, вы проводили какие-то оригинальные тесты? https://askusers.ru/
Астрономия
Геология
Психология
Маркетинг
Новые фото
Лучшие фото
