Лучшие сайты юзабилити: Юзабилити сайта — удачные и не очень удачные примеры

---

13.08.2019 Разное

---

Страшные сайты с плохим юзабилити: ТОП 30 в Интернете

Правила, предъявляемые к юзабилити сайтов

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

Поэтому для юзабилити сайтов следует соблюдать определенные принципы:

1. Дизайн должен быть лаконичным и красивым, не отягощенным различными яркими элементами.
2. Текст должен легко читаться и быть разбитым на логичные блоки
3. На сайте должна быть форма поиска и форма заказа, контакты.
4. Легкая навигация позволит пользователям быстро и беспрепятственно найти необходимую информацию.
5. В публикациях должны быть ссылки на другие разделы или так называемая перелинковка.
6. Сайт должен быстро и корректно грузится не только на компьютере, но и на мобильных устройствах. Многие любят заходить в Интернет с телефона.
7. На веб-ресурсе не должно быть излишних рекламных блоков.

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

ТОП 30 самых ужасных сайтов Интернета

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

Сок Пенни

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

Blinkee

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

Arngren.

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

Great Dreams

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

Pacific Northwest

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

Книжный веб-ресурс Сюзанны Коллинз

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

Brathouse

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

Сайт Беллы Де Сото

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

Antique Collectors

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

Patimex

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

Rudgwick Steam & County Show

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

Команда тегов

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

Headhunter

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

Electrifying Times

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

Mednat.org

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

Где поесть

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

Ling’s Cars

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

Школа искусств Йельского университета

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

EFW

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

Сексуальные бюджеты

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

Историк будущего

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

The world’sworst website

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

Theweddinglens

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

Рона Ослунда

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

Gatesnfences

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

Фэншуй блог Jami Lin

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

MIA UK

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

Wateronwheels

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

Конный бизнес

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

Time Cube

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

Итоги

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

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

Лучшие сайты по usability на основе UX-дизайна

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

Для примера стоит рассмотреть лучшие сайты с юзабилити высокого уровня:

• Comparethemarket.com,
• Cheapflights Singapore.

Эти два сайта заметно выделяются в сравнении с аналогами. Для данного типа ресурсов важным условием успеха выступает простота UX и некоторые дополнительные показатели.

Cheapflights Singapore

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

Сингапурская версия Cheapflights

Cheapflights Singapore

Подсказки

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

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

Фильтры

Функционал сайта дополнен фильтрами, расположенными в верхней части страницы. Здесь можно выбрать самый быстрый рейс или с минимальной ценой. Есть фильтр smart value, предназначенный для поиска золотой середины: категория сопоставляет фильтры цены и скорости, а затем отображает оптимальные результаты. Лучшие рейсы в каждой из категорий отмечаются специальными логотипами для наглядности отображения списка.

Comparethemarket.com

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

Страховой сервис Comparethemarket.com

Comparethemarket.com

Строка прогресса

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

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

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

Вывод

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

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

Юзабилити: что такое удобство использования сайта

Юзабилити-анализ

Usability (юзабилити)

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

Анализ юзабилити

Анализ статистики

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

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

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

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

Тестирование сайта. Для тестов юзабилити часто используется сервис Google Page Insights, с помощью которого можно определить скорость загрузки страниц. Также, если у вас большое количество посетителей на сайте, можно сделать A/B-тестирование, пробуя различные варианты и анализируя изменения с помощью Яндекс.Метрики.

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

Анализ конкурентов. Для создания понятной и удобной структуры необходимо проанализировать сайты конкурентов из топа выдачи поисковых систем. Если они занимают лидирующие позиции в Яндексе, Google, то признаны удобными и полезными для пользователей. Проведите полный анализ юзабилити сайта, выявите сильные и слабые стороны и учтите все факторы при доработке.

Как улучшить юзабилити

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

Навигация и структура сайта

Проработанное меню

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

Грамотная перелинковка

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

«Хлебные крошки»

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

Карта сайта

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

Возможность быстро найти информацию

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

Наличие функциональных элементов

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

Оформление сайта

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

Шрифты и заголовки

• Не используйте слишком мелкий или большой шрифт.
• Посмотрите в Интернете, какие шрифты более востребованы и приятны для основной массы пользователей.
• Откажитесь от неконтрастных шрифтов (светлый текст на светлом фоне или темный текст на темном фоне).

Цветовая гамма

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

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

Качественный контент

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

Содержание и грамотность

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

Структура и форматирование

• Разделяйте текст заголовками и подзаголовками.
• Используйте маркированные списки.
• Разбавляйте текст картинками, видеоматериалами.
• Добавляйте цитаты, выделяйте важные пункты жирным шрифтом.
• Если текст большой, разделите его на несколько отдельных статей, перелинковав материалы между собой.
• Используйте форматирование по ширине, чтобы текст не был «обрывистым».

Высокая скорость загрузки страниц

Для удобства использования сайта оптимизируйте содержимое страниц и снизьте загрузку до минимума, сжав картинки, иконки в меню, элементы дизайна, убрав лишние Java-скрипты. Для проверки скорости загрузки страниц можно использовать сервис Google Page Insights.

Отсутствие ошибок 404

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

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

Поддержка работы с разными браузерами и мобильными устройствами

Сайт должен быть максимально удобным для просмотра во всех браузерах, в т. ч. с мобильных устройств. Очень часто один и тот же ресурс может выглядеть по-разному в Google Chrome, Safari или Opera и пр. При разработке и тестировании дизайна проверяйте внешний вид страниц и их структуру во всех браузерах и адаптируйте под мобильные платформы.

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

Юзабилити тестирование — как проводить тестирование usability сайта

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

найти огрехи в интерфейсе или проверить удобство пользовательских сценариев, тестируйте юзабилити сайта. Когда требуется сравнить конверсию двух вариантов лендингов, лучше сделайте А/В-тест.

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

С чего начать

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

Гипотезы. Составьте гипотезу, которую исследование подтвердит или опровергнет. Допустим, пользователи при бронировании отеля заказывают трансфер из аэропорта отдельным сообщением, не используя специальную форму заказа. В таком случае вариант гипотезы может быть такой: «пользователи не понимают, что это форма для заказа трансфера, или считают ее громоздкой для заполнения».

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

1. Откуда пришел пользователь?
2. Что он должен увидеть на этой странице?
3. С какой целью он пришел на страницу?
4. Чем должно закончиться посещение?

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

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

Что можно померить

Количественные исследования всегда конкретны и сфокусированы, нацелены на получение числовых показателей. Это может быть время выполнения действий на сайте или доля респондентов, выполнивших задание. Результаты «да/нет» тоже можно представить в виде цифр. Например, привести их в бинарную систему: да — 1 балл, нет — 0 баллов.

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

• выполнил самостоятельно — 100%;
• выполним с помощью модератора — 50%;
• не выполнил — 0%.

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

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

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

• само собой разумеющимся;
• конкурентным преимуществом сайта;
• функциями, которые вызывают у них восторг;
• неважным.

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

Какой выбрать метод

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

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

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

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

Теневой метод. Одновременно работают три участника: респондент, модератор и эксперт. Респондент свободно и независимо выполняет задания, модератор фиксирует, эксперт комментируют действия респондента.

Ретроспектива. Это метод, который сочетает в себе наблюдение и «мысли вслух». Сначала респондент выполняет задания, затем — смотрит видеозапись своих действия и комментирует их. Основной недостаток — значительное увеличение времени тестирования.

Что подготовить к тестированию

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

• Сфокусированные задания всегда простые и точные. Модератор говорит, что нужно сделать, респонденты выполняют. Например, заполните форму обратной связи. Для таких заданий характерно механическое выполнение. Респонденты не вовлекаются в процесс. Если им нужно выбрать товар или услугу, они часто останавливаются на первом, подходящим под требования варианте, хотя в реальной жизни действуют иначе.

• Задания с контекстом строятся вокруг выдуманной истории. Они могут быть сформулированы так: «Представьте, что ваш сосед продает отличную машину по низкой цене, потому что ему срочно нужны деньги. Подберите для себя автокредит, чтобы ее купить». Постарайтесь, чтобы респондент действительно «примерил» на себя ситуацию и действовал максимально приближенно к своему обычному поведению.

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

• Задания без конкретики дают простор для респондентов. Их цель — посмотреть, с чего вообще начинается взаимодействие пользователя с сайтом. Предоставьте респондентам свободный выбор, не отвечайте на их вопросы, чтобы не нарушать естественность реакций. Лучше всего, если респондент будет находиться один. Такие задания подходят для новых продуктов и контентных сайтов. Модератор видит, что привлекает внимание, как используют навигацию, читают ли ознакомительные материалы или инструкции.

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

Определите количество респондентов для участия. Рекомендуем приглашать к участию для качественных исследований — 5 человек, для количественных — 20, для eye-tracking  — 40. Чем больше респондентов участвуют в исследовании, тем более точные результаты получатся. Если требуется большое количество участников, разбейте их на небольшие группы — до 10 человек и проведите тестирование в несколько раундов.

Увеличение количества человек приведет к уменьшению разброса результатов. Обычно 85% проблем обнаруживаются первыми пятью респондентами. Поэтому для оптимизации затрат на тестирование чередуйте тесты и доработки. Сначала проведите тестирование, затем доработайте продукт с учетом найденных проблем. Снова проведите тестирование и снова доработайте. Трех подходов будет достаточно.

Как проводить тестирование

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

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

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

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

Запомните

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

Для более глубокого погружения в тему советуем посмотреть видео с последней конференции eTarget 2018.

Материал подготовила Светлана Сирвида-Льорентэ.

Юзабилити главной страницы сайта

Алоха, гайз!

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

Сразу обращаю ваше внимание, что речь в статье пойдет о юзабилити многостраничного сайта с категориями. Разбор будем вести на примере типичного интернет-магазина.

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

Анализ юзабилити сайта

Любые изменения следует начинать с анализа текущей ситуации.

С чего начать анализ юзабилити сайта?

Для начала определите портрет своей ЦА. Это важно для выбора формата подачи информации. Чем подробнее будет портрет, тем лучше. Вот отличный пример портрета ЦА, который мне как-то прислали:

Портрет покупателя (писался по данным опросов операторов колл-центра, курьеров компании):

“Женщина, 33 года, замужем, один ребенок, в ближайший год-два появится второй (как минимум они будут с мужем стараться). Живет почти на окрайне Москвы (метро войковская) на семью есть одна машина, есть собака. Она русская, православная. Доход на семью около 80-100 т.р.. У нее часто болит спина (после родов особенно) она недовольна своими волосами (они выпадают и секутся), у нее есть проблемы со здоровьем по женской части.Она очень хочет выспаться, хочет секса, хочет быть хорошей женой, матерью и дочкой, хочет чтобы ей завидовали и мечтает переехать в свой дом или большую квартиру. Она боится остаться одна и боится старости, она переживает за детей и мужа и боится остаться без денег, еще она боится растолстеть, остаться без денег и сглаза, когда она делает покупки — она боится что ее обманут. Она позитивная (часто проявляет позитивные эмоции, воспринимает шутки), не скандальная (ей проще уйти, чем доказывать свою правоту), в целом, она не обращает слишком пристального внимания на товар перед покупкой (по крайней мере не лезет вовнутрь), она увлекается рукоделием (или хотя бы ей это интересно), имеет профили в соцсетях и активно ими пользуется. (Особенно после 21-30, после того как укладывает ребенка спать.) Ее часто можно встретить в ТЦ, поликлинике и на детских шоу (например «Фиксики» в Крокусе)”

Сразу становится ясно, в какой форме лучше всего преподнести УТП для данной аудитории, да?

Но не стоит зацикливаться на одной аудитории. Помимо вашей основной ЦА, определите также и вторичную аудиторию — потенциальных сотрудников, партнеров и т.д.

Постарайтесь ответить на следующие вопросы:

• Почему люди приходят к вам на сайт?
• Что они ожидают найти на нем?
• И, наконец, что нужно сделать, чтобы им было проще это найти?

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

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

• Обозначайте важные утилиты (вход/регистрация/условия доставки)
• Делайте меню с ориентацией по левому краю с углубленностью не более чем в 3 клика (категория/подкатегория/товар)
• Не перегружайте навигационное, верхнее меню, оно должно содержать максимум 5-6 пунктов.

Навигационное меню, пример оформления.

• Расположите корректно следующие 5 элементов на главной странице сайта:

1.       Уникальное торговое предложение

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

Пример:

Как правильно составить и разместить УТП на сайте

2.       Обзоры популярных товаров/услуг

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

Так же, эта подборка ориентирована на заботливого потребителя — тип для которого важны отзывы, рейтинг товара, тут отлично работает элемент: «Этот товар здесь не просто так, ведь многие уже купили его!»

Пример:

Не заставляйте покупателя думать!

3.       Корзина

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

Тут есть всего два правила:

1. Она должна находиться в правом верхнем углу страницы.
2. Она должна быть контрастной.

Пример:

Пример оформления кнопки «корзина» на сайте

4.       Контактная информация

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

Что нужно учесть:

• Не используйте разный цвет и размер шрифта при написании номера.
• Располагайте контакты в правом верхнем углу экрана.
• Укажите время для звонка.

Не надо так:

Код города указан шрифтом меньшего размера, это затрудняет восприятие

Лучше так:

Код города и основной телефон хорошо читаются

5.       Поиск по сайту

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

Пример размещения:

Добавьте поле поиска по сайту для логической персоны!

С помощью этих нехитрых рекомендаций вы сможете влиять на основные KPI главной страницы:

• Снизится процент отказов
• Увеличится время проведенное пользователем на сайте
• Вырастет количество просмотренных страниц

Меняйте сайт, упрощайте навигацию, тестируйте и делитесь результатами в комментариях!

Помните, что улучшение юзабилити — лишь первый шаг на пути к идеальному сайту!  Не стоит забывать про SEO оптимизацию и контент-маркетинг, но об этом чуть позже 😉

обзор и сравнение / Блог компании Евростудио / Хабр

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

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

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

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

UsabilityHub

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

• Navflow позволяет анализировать, насколько легко пользователи ориентируются на странице сайта.
• Fivesecondtest помогает выявлять элементы дизайна, привлекающие наибольшее внимание посетителей.
• ClickTest создает карту кликов (heatmap), показывающую области веб-страницы, на которые пользователи кликают чаще всего.

Как это работает. На примере Fivesecondtest

Выбираем одно из трех приложений для тестирования веб-страницы.

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

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

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

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

У каждого пользователя приложения есть своя «карма». Свежезарегистрированный пользователь получает 20 очков кармы, плюс, за каждую протестированную страничку еще по 1 очку. Сколько очков — столько людей смогут просмотреть загруженный скриншот и ответить на вопросы.

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

UserPlus

На этом сайте можно протестировать веб-страницы двумя способами:

• Самостоятельно, с помощью The Advisor Tool.
• На реальных людях, с помощью инструмента The Tester Tool.

Приложение для тестирования сайтов с реальными пользователями The Tester Tool сейчас находится в бета-версии. Но в будущем разработчики обещают, что заказчик теста сможет ставить перед пользователями определенные задачи, а затем наблюдать, как человек пошагово решает их на сайте. Каждый переход по ссылке и каждый скриншот будут зафиксированы и предоставлены заказчику для последующего анализа.

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

Как это работает?

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

Затем размечаем скриншот элементами интерфейса.

Отвечаем на вопросы check-листа по всем выбранным элементам интерфейса. Список вопросов получается довольно внушительный.

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

Usabilla

Тестирование юзабилити на сайте Usabilla проходит в пять этапов:

• Создаем новый тест: указываем URL сайта, который собираемся тестировать, и язык тестирования. Доступно 20 языков, в том числе русский.
• Указываем страницы сайта для тестирования. Можно загрузить их скриншоты с компьютера или указать путь к ним на сайте.
• Выбираем вопросы, на которые хотим получить ответы от пользователей. Можно воспользоваться стандартными, заранее предопределенными вопросами или сформулировать свои собственные.
• Сами находим и приглашаем людей, готовых принять участие в тестировании и поделиться своим мнением.
• Программа аккумулирует результаты тестов и отзывы пользователей, а затем предоставляет статистику, сгруппированную в удобном для анализа виде. Тестируемые страницы можно просматривать в виде тепловых карт активности (heatmap).

Видео дает довольно точное представление о том, как работает Usabilla.

Бесплатно можно протестировать две страницы на десяти людях.

СonceptFeedback

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

В рунете есть ресурсы, аналогичные ConceptFeedback: re:vision и Russian Creators.

Optimal Workshop

На сайте OptimalWorkshop можно оптимизировать сайт, используя три разных инструмента:

• Optimalsort — это инструмент, который помогает организовать структуру сайта с помощью метода сортировки карточек.
• Treejack — приложение для тестирования многоуровневой информационной архитектуры (ИА) сайта. Чтобы начать тестирование, структуру веб-сайта необходимо организовать как таблицу и загрузить в Treejack.
• Calkmark предназначен для тестирования юзабилити веб-страниц. Он помогает понять, насколько просто (или сложно) пользователям сайта находить нужную информацию. Чтобы начать работу, загружаем скриншот веб-страницы и ставим перед пользователями какую-либо задачу. Calkmark накапливает ответы и выдает результаты тестирования в виде тепловой карты кликов, а также сообщает среднее время, необходимое для выполнения каждой задачи.

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

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

• OptimalSort: десять участников и 30 карточек за один опрос.
• Chalkmark и Treejack: 10 участников и 3 обследуемые задачи за один опрос.

4Q

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

Интегрируется с Google Analytics и доступен на 10 языках, хотя русского, к сожалению, среди них пока нет.

Feng-GUI

Feng-GUI имитирует взгляд пользователя в течение первых 5 секунд воздействия визуального эффекта. Это приложение создает карту движения глаз по странице (heatmap) на основе алгоритма, который предсказывает, на что, скорее всего, будет смотреть реальный человек.

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

ClickHeat

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

WebVisor

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

С ее помощью можно:

• Записывать действия посетителей сайта: клики, скроллинг, нажатие клавиш, заполнение форм, выделение и копирование текста.
• Воспроизводить записанные действия в режиме «живого видео».
• Проводить детальную аналитику поведения посетителей веб-сайта.
• Составлять карты активности пользователей: тепловые карты кликов, карты внимания и карты скроллинга.

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

SitePolice

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

Как это работает?

• Заказчик выставляет свой сайт на суд «полицейских», формулирует несколько вопросов, на которые хотел бы получить ответы и выбирает тарифный план аудита.
• Аудиторы пишут отчет по сайту в практически свободной форме. В отчете есть только два обязательных раздела: «анализ юзабилити сайта и способы решения проблем» и «общий вывод». За свои отчеты и активность на сайте «полицейские» получают баллы, которые потом могут превратить в деньги.
• Если заказчик аудита не против, то все отчеты «полицейских» остаются на сайте сервиса для общего просмотра.

К сожалению, бесплатной или тестовой версии сервиса для заказчиков аудита не существует.

Сравнительная таблица инструментов для юзабилити-тестирования

Название	Русский язык	Кто тестирует	Объекты тестирования	Результаты тестирования	Наличие бесплатной версии
UsabilityHub	Есть	Тестеры сервиса; другие пользователи UsabilityHub	Скриншот веб-страницы	Ответы на вопросы, сформулированные в начале теста; тепловая карта кликов	Бесплатно с ограничением — пользователи бесплатной версии должны сами тестировать чужие сайты
UserPlus	Есть	Своими силами с помощью опросника; тестеры сервиса (в бета-версии)	Скриншот веб-страницы	Оценка страницы на соответствие международным стандартам	Бесплатно с ограничением — один скриншот в месяц
Usabilla	Нет	Пользователи, приглашенные заказчиком тестирования	Скриншот веб-страницы; страница «живого» сайта	Отчеты о действиях пользователей, сгруппированные для последующего анализа; тепловая карта кликов	Бесплатно с ограничениeм — 2 страницы, 10 пользователей
Concept Feedback	Нет	Участники сообщества веб дизайнеров	Скриншот веб-страницы; страница «живого» сайта	Отзывы, оценки и советы участников профессионального сообщества	Бесплатно
OptimalWorkshop	Нет	Пользователи, приглашенные заказчиком тестирования	Скриншот веб-страницы; информационная архитектура сайта	Информационная структура сайта; тепловая карта кликов; количество времени, потраченное пользователями на выполнения какой-либо задачи	Бесплатно с ограничением — OptimalSort: 10 участников и 30 карточек, Chalkmark и Treejack: 10 участников и 3 задачи
4Q	Нет	Реальные пользователи	Рабочий сайт	Ответы пользователей на 4 вопроса опросника	Бесплатно
Feng-GUI	Есть	Своими силами, с помощью программы, имитирующей взгляд пользователя на основании специального алгоритма	Скриншот веб-страницы	Тепловая карта движения глаз по страничке	Бесплатно с ограничением — ката движения глаз маленького размера
ClickHeat	Есть	Реальные пользователи сайта	Рабочий сайт	Тепловая карта кликов	Бесплатно
WebVisor	Есть	Реальные пользователи сайта	Рабочий сайт	Видео-запись действий реальных пользователей; карты активности; аналитика	Бесплатно с ограничением — запись 100 посетителей в день, показ 2 посещений в день, хранение информации 2 дня
SitePolice	Есть	Реальные пользователи сайта	Рабочий сайт	Отчет аудитора в свободной форме	Бесплатной версии нет

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

Простое руководство по удобству использования веб-сайта — Лучшие практики 2020

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

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

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

То же самое и с вашим сайтом.Если ваш веб-сайт неудобен для пользователей, он никогда не будет успешным. Вот почему удобство использования веб-сайта должно стать главным приоритетом в 2020 году.

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

Когда они уходят, они исчезают: 88% онлайн-пользователей вряд ли вернутся на веб-сайт после неудачного опыта.

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

Большинство владельцев веб-сайтов не осознают, что их сайт неудобен для пользователей.

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

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

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

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

Ниже приведены восемь рекомендаций, которые помогут сделать ваш веб-сайт максимально удобным и доступным:

Давайте нырнем.

Оптимизировать для мобильных устройств

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

Это дико, потому что 92% всех пользователей Интернета выходят в Интернет с мобильных устройств.

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

Фактически ожидается, что к 2021 году мобильная коммерция вырастет на 22,3% или 3,56 триллиона долларов США.

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

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

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

Когда кто-то просматривает страницы с настольного компьютера, им легко щелкнуть практически в любом месте экрана. На компьютере нет ничего плохого в том, чтобы поместить ваш CTA или другие интерактивные элементы в угол.

Это не относится к мобильным устройствам, где 75% пользователей перемещаются и нажимают большими пальцами, а 49% — одной рукой. Подумай об этом. Как часто вы просматриваете страницы на телефоне, используя одну руку, особенно когда вы идете или занимаетесь чем-то другим?

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

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

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

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

Следуйте стандартам WCAG

Руководящие принципы доступности веб-контента (WCAG) были созданы для того, чтобы веб-сайты могли удовлетворить потребности людей с ограниченными возможностями. WCAG тоже время от времени обновляется, поэтому важно часто проверять, какие изменения были внесены (следующее обновление намечено на 2021 год).

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

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

Аудитория

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

Например, вы должны добавить подписи ко всему видеоконтенту. Убедитесь, что подписи отображаются достаточно долго, чтобы люди могли прочитать и обработать информацию.

Когнитивный

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

Чтобы учесть их, вам следует максимально упростить свой сайт. Например, не забивайте свое навигационное меню множеством различных опций. Эксперт по веб-юзабилити Стив Круг говорит, что главное правило должно звучать так: «Не заставляйте меня думать!» Это применимо и здесь.

Физический

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

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

Выступление

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

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

Визуальный

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

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

У WCAC есть четыре основных принципа для соответствия своим стандартам доступности в Интернете.

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

Придерживайтесь общих элементов дизайна

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

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

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

Что вы ожидаете, когда заходите в сеть ресторанов быстрого питания, например McDonald’s? Вы ждете в очереди, заказываете на кассе, потом они звонят на ваш номер, когда еда будет готова.Это довольно стандартный опыт.

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

Это не то, что вы ожидаете от McDonald’s. Вы хотите фаст-фуд и быстрое обслуживание. Конечно, это творческий и уникальный подход, но он нарушает поток клиентов, отрицательно подрывая их ожидания от этого опыта.В процессе это фактически мешает их опыту.

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

Согласно этому исследованию, это самые стандартные элементы, которых люди ожидают при посещении веб-сайта:

• Логотип в верхней части экрана
• Контактная информация в правом верхнем углу экрана
• Горизонтальная навигация по главному меню в заголовке вверху каждой страницы
• Строка поиска в шапке
• Социальные сети следуют за значками в нижнем колонтитуле

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

Вот хороший пример от наших друзей из Crazy Egg.

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

Создание визуальной иерархии

Человеку требуется 2,6 секунды, чтобы попасть в область веб-сайта, которая вызовет у него первое впечатление. Это случается непроизвольно.

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

Представьте, что вы попали на веб-сайт, на главной странице которого размещено 20 изображений.Куда вы смотрите в первую очередь? Вот хороший пример плохого дизайна от наших друзей из штата Old Line:

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

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

Вот пример.Посмотрите на эти четыре круга и расположите их в порядке важности.

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

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

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

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

• Размер. Больше — лучше.
• Цвет. Яркие цвета привлекают внимание посетителя.
• Контраст. Разнообразные цвета могут выделить (или уменьшить) элементы на вашей странице.
• Негативное пространство. Пространства, которые вы не используете, так же важны, как и те, которые вы используете.
• Выравнивание. Посетители обычно читают сверху вниз и слева направо, когда попадают на веб-страницу в F-образном шаблоне.

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

Упростите навигацию

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

Как пользователь попадает с домашней страницы, чтобы оформить заказ? Сколько времени это занимает? Сколько кликов им нужно сделать?

Это все факторы, которые необходимо учитывать. Посмотрите на 10 основных причин, по которым корзину бросают.

Как видите, две из трех основных причин отказа от корзины связаны с навигацией.Цена была единственным фактором, который имел более высокий рейтинг.

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

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

Допустим, вы ведете простой блог. Как посетители попадают с вашей домашней страницы в ваш блог? Как организованы сообщения в вашем блоге? Могут ли они искать конкретный пост?

Все это связано с навигацией.

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

Подтвердите доверие

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

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

Вот чего ожидают люди, попадая на главную страницу.

Имея в виду эти числа, как вы думаете, каким будет восприятие веб-сайта, если на главной странице нет информации о продукте, контактной информации или страницы «О нас»? Будет отрицательно.

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

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

Создание четких и видимых элементов безопасности (HTTPS / SSL, значки и т. Д.) Также имеет большое значение для повышения доверия. Как только вы завоюете доверие к своему сайту, ваши посетители почувствуют себя непринужденно. Они не будут беспокоиться о мошенничестве или переходе по спам-ссылке. Это увеличит их шансы на взаимодействие с вашим контентом и конверсию.

Убедитесь, что ваш контент разборчиво

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

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

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

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

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

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

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

Будьте последовательны

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

Например, давайте проанализируем эту страницу продукта от Lululemon.

Вы увидите все эти элементы на страницах товаров:

• Изображения продуктов слева
• Название продукта вверху справа
• Цена ниже названия продукта
• Описание справа
• Выбор цвета под описанием
• В корзину справа внизу

Все очень просто и понятно.В этом макете нет абсолютно ничего плохого.

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

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

Заключение

Удобство использования веб-сайта может сделать или сломать успех вашего сайта.Если у посетителей не будет хорошего опыта, они больше не вернутся.

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

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

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

SEO и удобство использования

Пропустить навигацию

• Войдите в UX Certification

Поиск

Nielsen Norman Group

Мировые лидеры в области пользовательского опыта, основанного на исследованиях

• Главная
• Статьи
• Обучение и мероприятия
• Консультации
• Отчеты и книги
• О NN / г

Меню
• Главная
• Статьи
• Обучение и мероприятия
  • Обзор
  • UX конференция
  • Сертификация UX
  • Внутреннее обучение
  • 1-часовые онлайн-семинары
• Консультации
  • Обзор
  • Пользовательское тестирование
  • Индивидуальные исследования пользователей
  • Обзор экспертов
  • Внутреннее обучение UX
  • Интенсивные прикладные мастерские
  • Основной доклад
• Отчеты и книги
• О NN / г
  • Обзор
  • Люди
  • История
  • Клиенты
  • Новости
  • Свяжитесь с нами
• Войти

Поиск

• Гибкая
• Процесс проектирования
• Электронная торговля
• Интранет
• Навигация
• Психология и UX
• Методы исследования
• Пользовательское тестирование
• Веб-юзабилити
• Написание для Интернета
• Все темы
• Показать меньше тем
• Доступность
• Проворный
• Аналитика и показатели
• Дизайн приложений
• Сайты B2B
• Паттерны поведения
• Брендинг
• Контентная стратегия
• Корпоративные сайты
• Путь клиентов
• Паттерны проектирования
• Процесс проектирования
• Электронная торговля
• Электронная почта
• Eyetracking
• Эвристическая оценка
• Взаимодействие человека с компьютером
• Идея
• Информационная архитектура
• Дизайн взаимодействия
• Международные пользователи
• Интранет
• Менеджмент
• Мобильный и планшет
• Навигация
• Некоммерческие веб-сайты
• Персоны
• Убедительный дизайн
• Прототип
• Психология и UX
• Удаленная работа UX
• Методы исследования
• Поиск
• Социальные сети
• Стратегия
• Пользовательское тестирование
• UX Юмор
• UX-команды
• Визуальный дизайн
• Веб-юзабилити
• Написание для Интернета
• Молодые пользователи
• 10 Эвристика юзабилити для проектирования пользовательского интерфейса
• Когда использовать какие методы исследования пользовательского опыта
• Отображение эмпатии: первый шаг в дизайнерском мышлении
• Сервисные чертежи: определение
• Между субъектами vs.Дизайн внутрипредметного исследования
• Юзабилити 101: Введение в юзабилити
• Памятка по исследованиям UX
• Сравнение методов сопоставления UX: шпаргалка
• Карта путешествия 101
• Почему вам нужно тестировать только 5 пользователей
• Шаблон для отслеживания взгляда газонокосилки для сканирования сравнительных таблиц
• Справка и документация: 10-я эвристика юзабилити
• Рекомендации по UX для торговых инструментов с дополненной реальностью
• Контекстное исследование: вдохновляйте на дизайн, наблюдая и опрашивая пользователей в их контексте
• Контроль и свобода пользователей (эвристика удобства использования № 3)
• Точечное голосование в процессе проектирования пользовательского интерфейса
• Время заставить технологии работать
• Визуализация данных для информационных панелей
• Социальная коммерция vs.Социальные продажи
• Облегчение 101
• Брюс Тоньяццини
• Дон Норман
• Якоб Нильсен
• См. Всех авторов
• Посмотреть меньше авторов
• Ралука Будиу
• Патти Кайя
• Тереза ​​Фессенден
• Сара Гиббонс
• Келли Гордон
• Аврора Харлей
• Алита Джойс
• Анна Кейли
• Лекси Кейн

Лучшие методы разработки профиля пользователя Страница

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

Кому могут быть полезны профили пользователей?

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

Дизайн профиля пользователя: ключевые элементы для использования

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

Изображение профиля

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

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

Источник: Twitter

Имя и псевдоним

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

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

Сводка и около

Люди любят говорить о себе. Почему бы вам не предоставить им такую ​​возможность и не зарезервировать место для сводного раздела в дизайне пользовательского интерфейса вашего профиля?

Хорошо написанное резюме имеет решающее значение, когда дело доходит до сети.Обычно это первое, что видят люди, открывая такую ​​страницу. Если сводка их не интересует, они не прокрутят страницу вниз.

Источник: Twitter

Интересы и достижения

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

Источник: Upwork

Кнопка следования

Кнопка «Follow» является обязательной для любого сетевого приложения или веб-сайта. Если это мобильное приложение, не забудьте поместить его в зону для большого пальца, иначе почти никто не будет нажимать на него.

Еще один совет: не забудьте сделать кнопку четко видимой. Положение имеет значение, но без возможности четко видеть, где щелкнуть, оно останется неиспользованным.

Источник: Behance

Другие полезные элементы

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

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

Мобильные приложения и веб-сайт

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

Вкратце, чем отличается дизайн UX / UI профилей пользователей на мобильных устройствах?

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

Источник: Twitter Mobile

• Интуитивная навигация. Простая и удобная навигация — отличное мобильное приложение, как и другие страницы. Пункты меню должны быть легко доступны, и их не должно быть слишком много. Отдельное меню для страницы может помочь решить возможные проблемы с UX.
• Формы. Они должны быть легко заполнены (даже предварительно заполнены) и иметь макет в одну колонку. Ярлыки тоже должны быть на своих местах.Подробное руководство по формам читайте в этой статье.

10 лучших примеров дизайна профиля пользователя

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

Профиль товарища по команде

Источник: Dribbble

Профиль пользователя в социальной сети

Источник: Dribbble

Профиль пользователя фитнес-приложения

Источник: Dribbble

Профиль врача

Источник: Dribbble

Профиль пациента

Источник: Dribbble

Профиль панели управления вакансиями

Источник: Dribbble

Профиль пользователя платежного портала

Источник: Dribbble

Профиль пользователя приложения Clinic

Источник: Dribbble

Профиль сотрудника

Источник: Dribbble

Профиль пользователя приложения Fintech

Источник: Карма

Подведение итогов

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

---

Дополнительная литература: Причины изменения дизайна веб-сайта электронной коммерции.

8 инструментов тестирования удобства использования при ограниченном бюджете

Создать успешную компанию с достаточным финансированием достаточно сложно.Однако для многих основателей стартапов жесткие бюджетные ограничения — мрачная реальность. Финансовые проблемы преследуют большинство новых руководителей, что отчасти объясняет, почему 50% малых предприятий терпят крах в течение первых двух лет.

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

Тестирование удобства использования Инструменты

1. Сумасшедшее яйцо

Crazyegg — это инструмент взаимодействия с пользователем, основанный на кликах, с четырьмя основными функциями:

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

Каждому пользователю предлагается бесплатная 30-дневная пробная версия без необходимости приобретать платную подписку. Однако они доступны по цене от 9 долларов в месяц .

2. Оптимизировать

Optimizely — чрезвычайно удобная платформа для A / B-тестирования, которая позволяет пользователям отслеживать посещения и конверсии. Инструмент предлагает впечатляющий набор функций, в том числе:

• Тестирование мобильного сайта
• Кроссбраузерное тестирование
• Сегментация посетителей
• Геотаргетинг
• Многовариантное тестирование

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

3. Пятисекундный тест

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

• Загрузите снимок экрана или макет страницы с простым вопросом о дизайне или функциональности.
• У каждого тестировщика есть пять секунд, чтобы просмотреть вашу страницу, прежде чем ответить на вопрос.
• UsabilityHub сопоставляет ответы.

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

4. Qualaroo

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

• Выйти из опросов, чтобы узнать, почему посетители не совершают конверсий
• Логика пропуска, которая анализирует ответ посетителя перед тем, как задать ему индивидуальный дополнительный вопрос
• Интеграция с другими инструментами, такими как Salesforce и Marketo

По сравнению с другими инструментами в этом списке, базовый пакет Qualaroo за 63 доллара в месяц стоит относительно дорого.Однако опытные руководители могут воспользоваться бесплатной 14-дневной пробной версией.

5. Усабилла

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

• Виджеты обратной связи для сбора данных UX по электронной почте
• Нажмите тепловые карты
• Формы адресной обратной связи
• Выездные опросы
• Мобильная обратная связь

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

6. Армия обратной связи

Feedback Army — это инструмент для пользовательского тестирования. с отличием — он использует сервис Amazon Mechanical Turk для получения ответов. Трехэтапный процесс намного быстрее, чем настройка собственного теста Mechanical Turk :

• Загрузите URL-адрес страницы, которую хотите протестировать
• Задайте от трех до шести вопросов о странице
• Подождите, пока придут ваши десять ответов

Пользователи получают десять ответов за 40 долларов, что делает Feedback Army полезным инструментом для быстрого и дешевого тестирования UX.

7. UserFeel

Многие

16 инструментов тестирования юзабилити для оптимизации взаимодействия с пользователем

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

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

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

Этот инструмент предложит посетителям сайта ответить на несколько целевых вопросов или опросов в режиме реального времени. Это помогает веб-мастерам редактировать свой сайт для оптимального использования.Доступны многочисленные настройки и функции, в том числе, но не ограничиваясь: логика пропуска — анализирует ответ посетителей, прежде чем он задает им персонализированный последующий вопрос, опросы выхода — они обнаруживают, почему посетители веб-сайта не конвертируются, а также интеграция возможности с другими инструментами, такими как Marketo и Salesforce. При цене 63 доллара в месяц это один из самых дорогих вариантов, но есть бесплатная 14-дневная пробная версия, которую может использовать экономный разработчик.

Это так называемый инструмент взаимодействия с пользователем, основанный на кликах.Его можно использовать для бесплатной 30-дневной пробной версии, а затем он будет стоить 9 долларов в месяц. Что вам принесут 9 долларов в месяц? Карта кликов — вы увидите, где каждый посетитель нажимал на вашем веб-сайте, карта прокрутки — показывает, насколько далеко вниз на странице обычно прокручивает посетитель, Конфетти — дает представление о поисковых запросах, источниках посетителей и других элементах. Overlay — разбивает количество кликов на элемент страницы.

Здесь пользователи смогут увидеть уникальный подход к отображению результатов через тепловую карту.В отличие от многих других инструментов, обеспечивающих удобство использования, ClickHeat предлагается бесплатно как инструмент с открытым исходным кодом для веб-серверов. Те, кто использует WordPress, могут использовать плагин, который будет без проблем работать с их веб-сайтом. Это означает, что пользователи могут собирать реальные данные от реальных пользователей о том, что происходит на веб-сайте. Учитывая все преимущества, одним из недостатков является то, что для программы существуют определенные требования к серверу.

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

.