Лучшие по юзабилити сайты: Юзабилити аудит и обзор ТОП интернет-магазинов России — SEO на vc.ru

5 галочек: чеклист юзабилити / Хабр

Мы выделили 5 основных пунктов, по которым можно определить юзабилити сайта. Список спорный и в основном касается продающих сайтов. И да, эти пять пунктов — среднее арифметическое опыта, полученного при обработке заявок на конкурс «Юзабельный вебпроект». Думаете, мы раздали слонов и забыли?

_{оригинал картинки}

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

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

Сразу оговоримся, что мы не оцениваем юзабилити в вакууме, нам важно, чтобы сайт работал, т.е. «продавал». Товары, услуги, идеи — не важно. Речь может идти о бесплатном веб-сервисе, для которого транзакцией станет регистрация посетителя.

Первый контакт

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

Я открываю сайт и вижу размытое пятно.

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

Почему?

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

Главное меню

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

Горизонтальное или вертикальное?

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

Разделы

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

Подменю и подразделы

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

Дублирование информации

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

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

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

Из правила есть исключения.

• Хлебные крошки. Дублируют ссылки в меню по определению.
• Контактная информация. Если требуемая транзакция предполагает телефонный звонок, значит телефон должен быть на каждой странице.
• Атрибуты контента. Например, параметры товара должны быть указаны и в каталоге (кратко), и на странице товара (полностью).
• Ключевые слова. В рамках текстов могут повторяться. Но сами тексты не должны дублироваться по смыслу.
• В гипермаркетах без определенной направленности «сумки для ноутбуков» могут попасть одновременно в раздел «Ноутбуки» и «Сумки».
• Актуальное дублирование. Иногда одна и та же информация одинаково актуальна в нескольких местах: телефонный номер на страницах, посвященных разным услугам одной организации, инструкция по установке программы на странице для скачивания и на странице справки, и т.д. Как правило, она не занимает много места.

Привлечение внимания

А вдруг посетитель сайта не увидит информацию в одном месте — давайте просто разместим ее в нескольких одновременно?

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

Выделять элементы следует логически и графически.

1. Каждый элемент должен находиться там, где я, скорее всего, буду его искать. Сначала подумайте, какие вопросы задает клиент, когда приходит на сайт: «А они доставят товар в мой город?», «Где я могу найти стиральную машину с вертикальной подачей?» и т.д. А затем выстраивайте иерархию согласно этой логике, объединяя общее и выделяя частное.
2. Элемент должен быть заметен сам по себе. Только не надо больших красных букв, всплывающих подсказок и громоздких блоков. Просто отделите элементы друг от друга, а активные элементы сделайте похожими на активные (кнопки, вкладки, пункты меню, ссылки).

Нестандартный дизайн

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

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

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

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

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

Транзакционные элементы

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

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

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

То же относится к другим транзакционным элементам: кнопкам «Добавить объявление» или «Регистрация» и т.п.

Главная страница

Предположим, мы все сделали правильно, и теперь готовы заполнить главную страницу. Что на ней должно быть?

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

Главная страница должна отвечать на вопрос «О чем этот сайт?» Если это неочевидно (а чаще всего это так), на главной должны быть пояснения. Максимально конкретные.

Я захожу на сайт и думаю:

• «Да, я вижу, что это интернет-магазин, но что он продает?»
• «Да, я понял, что это сайт про мишек Тедди, но что это: интернет-магазин, сайт производителя, клуб любителей?»
• «Да, я понял, что это новостная лента, но какова тематика?»
• «Стоматологическая клиника. Она хотя бы в моем городе?»
• «Ага, это что-то про интернет. Блин, да я и так в интернете! Вроде бы, это не Хабр, что нового я тут найду?!»

Описание сайта в одно-два предложения можно и нужно поместить под логотипом. Например, такое: «Интернет-магазин эксклюзивного кошачьего корма. Доставка в Екатеринбурге и по всей России».

Итак, в шапке — логотип, пояснение, контакты. Где-то рядом — главное меню. А оставшееся место чем забить?

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

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

Конечно, в таких вещах надо сдерживаться. А если все таки случилась простыня, следует отделить ее от ключевого контента.

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

Резюме

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

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

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

Юзабилити аудит сайта — чек-лист, лучшие примеры юзабилити и разбор ошибок

Что такое юзабилити-аудит

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

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

Какие работы можно провести

Проверить данные в системах аналитики — Google Analytics и «Яндекс.Метрика».

Полезно будет знать:

Пути пользователей по сайту.

Проблемные страницы — те, где высокий процент отказов или нет конверсий.

Самые популярные страницы, откуда и по каким запросам пользователи попадают на них.

Куда пользователи кликают на страницах и их поведение (на записях сессий).

С каких устройств заходят чаще всего.

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

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

Проверить ресурс по 10- и эвристикам Нильсена — они помогут выявить общие проблемы юзабилити интерфейсов.

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

Эвристики Нильсена

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

Первая: видимость состояния сайта

Сайт всегда должен держать пользователя в курсе происходящего: своевременно давать обратную связь.

Информация после завершения заказа в интернет-магазине

Вторая: схожесть между сайтом и реальным миром

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

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

Третья: свобода действий

У пользователей должна быть возможность отменить совершенные действия.

В Gmail можно отменить удаление письма

Четвертая: последовательность и стандартизация

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

Пятая: предотвращение ошибок

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

Примеры помогают избежать ошибок в заполнении полей формы

Шестая: на виду, а не в памяти

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

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

Седьмая: гибкость и эффективность использования

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

В поиске Google не нужно вручную печатать весь запрос, он сам предложит подходящие варианты

Восьмая: эстетика и минимализм

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

Так выглядит интерфейс, где нет ничего лишнего

Девятая: помощь пользователям в распознавании ошибок

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

В этой форме сразу понятно, как исправить ошибки

Десятая: помощь и документация

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

Обычно во всех сервисах есть раздел Help

Чек-лист для юзабилити-аудита

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

Основное

На сайте установлен SSL-сертификат.

Сайт загружается за 1–2 секунды. Специалисты Google выяснили, что если сайт на мобильных устройствах загружается более трех секунд, то 53% пользователей покинут его сразу. Проверить скорость загрузки можно на PageSpeed или Test My Site.

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

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

Очевидно, что на этом сайте нам предлагают страховку

А здесь мы можем заказать литую заготовку

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

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

Яркий и узнаваемый favicon очень полезен в таких случаях

Для каждой страницы прописаны тайтлы, описывающие ее содержание.

Title на странице нашей услуги «Разработка»

Есть проработанная 404-страница. На странице обязательно размещены ссылки на основные разделы сайта и / или поиск.

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

Отличный пример у Squarespace — тут тебе и меню по сайту с CTA, и блок с промо-предложением, и рекомендуемые ссылки

Нет пустых, незаполненных страниц.

Навигация

Шапка, подвал, меню

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

Номер телефона и e-mail размечены как ссылки с параметрами «tel:» и «mailto:». Пример:

<a href=»tel:+79999999999″> +7 999 999-99-99</a>
<a href=»mailto:email@company. com»> [email protected]</a>

По клику на логотип открывается главная страница. На главной странице логотип некликабелен.

В меню — ограниченное количество ссылок на основные разделы. Рекомендуется размещать до 7–8 ссылок.

У «Сбербанка» в главном меню — 11 ссылок, считывается довольно тяжело

На сайте «Тинькофф» ссылок всего 6 и гораздо легче найти нужную

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

Пункты меню названы понятно и привычно для пользователей. Примеры:

Авторизация → Вход
Наше предприятие → Компания
Расположение → Контакты

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

Навигация по страницам

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

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

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

На всех страницах сайта в браузере работает кнопка «Назад», которая возвращает пользователя на предыдущую просмотренную страницу. Если пользователь задавал на странице какие-то параметры (например, фильтр товаров), то все они восстанавливаются при возврате.

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

Блоки с рекомендациями популярны не только в интернет-магазинах

На сайте есть поиск, и он хорошо заметен — размещен в шапке.

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

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

Поиск по сайту запускается как по клику на кнопку, так и по нажатию клавиши «Enter» в поисковой строке.

На Asos поиск работает очень быстро

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

И сам исправляет ошибку в запросе

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

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

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

На Airbnb, когда ничего не найдено, предлагают перейти по быстрым ссылкам или посмотреть конкретные предложения

Дизайн и UI

Общие моменты

Применяются следующие правила:

— Теория близости: «объекты, расположенные близко друг к другу, воспринимаются связано».
— Правило внутреннего и внешнего: «Внутреннее ≤ внешнее».

Внутреннее — расстояние между буквами, внешнее — между словами.
Внутреннее — расстояние между словами, внешнее — между строками.
Внутреннее — расстояние между строками, внешнее — между абзацами или поля вокруг текста.

Здесь все пункты преимуществ слились в один большой блок, непонятно, куда относятся иконки

В этом примере за счет дополнительного «воздуха» между пунктами четко виден каждый пункт

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

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

Текстовый контент на сайте представлен в виде текста, а не изображений.

Общие элементы сайта размещены в привычных местах. Например, логотип — сверху слева, иконка корзины — справа. Подробнее: Закон Якоба.

Все элементы легко считываются на странице — между элементами достаточно «воздуха», нет нагромождения элементов в рамках экрана.

Контент размещен слева-направо по значимости (так, как мы читаем).

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

Все кликабельные элементы достаточно крупные, чтобы пользователь легко мог попасть по ним. Подробнее: Закон Фиттса.

Крупные кнопки на этом сайте — это часть дизайн-концепции, но все равно может быть примером следования Закону Фиттса

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

Картинка из гайдов Material Design

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

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

На первом экране сайта аэропорта Стамбула видно, что ниже есть табло рейсов

Длина текстовых строк — 60−80 символов.

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

Доступность

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

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

Элементы сайта контрастны. Для проверки можно использовать плагин Color Contrast Analyzer (для Chrome). Участки экрана с хорошим контрастом будут выделены белым, а области с плохим контрастом — бледными и малозаметными. Для некоторых отраслей наличие на сайте версии для слабовидящих — требования законодательства.

Комфортные для чтения размеры шрифта. Для основного текста рекомендуется использовать минимум 16px.

Кнопки, CTA

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

Выделено одно основное ключевое действие, если всего их — несколько.

Две кнопки целевых действий с разным приоритетом в середине экрана

На каждой коммерческой странице сайта есть возможность совершить целевое действие.

Блок с формой в конце описания сервиса для инвестирования

Названия кнопок однозначно говорят пользователю о том, что произойдет по нажатию. Для обозначения действий используется глагол в начальной форме (отвечает на вопрос «что сделать?»).

Конкретная формулировка «Открыть банковский счет» вместо банального «Зарегистрироваться»

Ссылки

Ссылки

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

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

Ссылка в тексте не очень резко выделяется, но в то же время хорошо заметна

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

Номер телефона в шапке подчеркнут пунктиром, потому что по клику совершается звонок

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

Ссылки не ведут на текущую страницу.

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

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

Чекбоксы

При клике с выбранного чекбокса снимается выделение.

Кликабельны полностью — и сам чекбокс, и его название.

Используются по назначению — для выбора элемента из списка или выбора каких-то параметров.

Группу чекбоксов из более трех вариантов всегда рекомендуется располагать в один столбец.

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

А так все хорошо считывается

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

Радиокнопки

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

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

Используются по назначению — для выбора одного значения из нескольких.

Кликабельны полностью — и сама радиокнопка, и ее название.

При клике на выбранную радиокнопку с нее не снимается выделение.

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

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

Если какой-то пункт выбран по умолчанию (например, на странице настроек в личном кабинете), то он стоит первым в списке.

Выпадающие списки

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

А если всего два значения, то лучше использовать радиокнопки

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

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

Если по умолчанию ничего не выбрано, в поле отображается вспомогательный текст. Например, «Выберите цвет».

Поле слишком короткое — в списке много длинных значений

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

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

Комбинированные списки

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

Таблицы

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

Для разграничения строк используется пустое пространство — ничего лишнего

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

Широкая таблица перестраивается в несколько последовательных мини-таблиц

Контакты и обратная связь

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

Номер телефона указан в правильном формате с кодом региона.

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

Представительства компании можно посмотреть как в списке, так и на карте (если много представительств в разных странах / регионах).

Главный офис отображен на карте.

Если представлены контакты конкретных сотрудников, то желательно указывать их ФИО, должность и размещать фото для повышения доверия.

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

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

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

Кнопка чата в стилистике сайта не отвлекает от контента

Структура формы

Структура формы

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

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

Группировка полей заголовками на странице размещения объявления

Поля в длинных формах размещены в одну колонку для удобства восприятия.

Форма организована как предложение, где заголовок формы — подлежащее, кнопка отправки — сказуемое, а поля для заполнения — другие члены предложения.

Длинные формы разбиты на шаги или показан прогресс заполнения.

Форма разбита на шаги, сверху — прогресс заполнения

Содержание формы, поля

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

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

Поля формы имеют отдельное состояние, когда они в фокусе (курсор установлен в поле).

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

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

Поле в фокусе выделено черной рамкой

Форма поддерживает возможность перемещения между полями клавишей Tab. Перемещение по полям происходит последовательно, фокус не уходит за пределы формы.

При открытии формы фокус автоматически падает в первое поле формы.

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

Название поля отображается всегда: и в пустом поле, и в заполненном поле, и при его заполнении

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

У всех полей формы прописан корректный тип вводимых данных. Например, для ввода телефона: <input type=»tel»>. При вводе данных в данное поле с мобильных устройств на них сразу откроется числовая клавиатура.

При вводе адресов пользователю подсказываются значения из подключенного справочника.

В «Тинькофф» даже при вводе ФИО предлагаются значения для выбора

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

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

Проверяется корректность заполненных данных. Например, для e-mail, даты или числовых полей.

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

ВКонтакте объясняют зачем нужно указывать дату рождения

Заполнение, валидация, отправка

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

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

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

После отправки данных выводится сообщение об успешной отправке и описание дальнейших шагов.

Модальные окна

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

Есть заметная кнопка закрытия.

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

Контент

Человеческий текст, который понятен и интересен пользователю, а не только «заточен» под поисковые запросы. Краткость в изложении, отсутствие «воды» — пользователи не любят читать большие объемы текста. Длинные тексты разбиты на абзацы, комфортные для чтения.

Заголовки легко различимы между собой за счет размера. Однозначно можно ответить, где h2, а где h3.

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

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

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

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

Важная для пользователя информация в тексте выделяется жирным.

Цифры больше 4−5 знаков отбиваются разрядами для удобства считывания, например:

2409 → 2 409
20409 → 20 409

Таблицы

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

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

Изображения

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

У всех изображений прописаны alt и title.

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

Заключение

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

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

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

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

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

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

Читайте по теме

#Сайт #Сайты #Аналитика #UX-аналитика #Бизнес #Веб-аналитика #Проектирование

вернуться к списку статей

Оцените статью

Подпишитесь на нашу рассылку

Мы отправляем полезные материалы, которые помогут вам в работе

Услуги

Сайты и сервисы

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

Дизайн

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

Аналитика

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

SEO-продвижение

Увеличиваем органический трафик на сайте и снижаем затраты на привлечение клиентов.

Топ-10 лучших веб-сайтов для тестирования пользователей на 2022 год

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

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

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

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

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

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

UserTesting

UserTesting уже почти десятилетие является золотым стандартом пользовательского тестирования. Платформа работает с 2007 года, и многие известные компании полагаются на нее для тестирования удобства использования, например, AutoTrader и Udemy.

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

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

Стандартная ставка на UserTesting составляет 10 долларов за 20-минутный тест, а за собеседования ставка повышается. Каждый раз, когда вы выполняете тест веб-сайта или приложения, вы получаете оплату ровно через 7 дней после его завершения на свой счет PayPal. По состоянию на 2021 год на UserTesting было выполнено более 3 000 000 миллионов пользовательских тестов, и он по-прежнему остается одним из самых надежных сайтов для получения оплаты за тестирование веб-сайтов в 2021 году.

UserZoom (IntelliZoom)

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

Однако как они выглядят с точки зрения пользователя-тестера?

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

Как обычно, платежи для участников теста обрабатываются через PayPal. Но в случае с UserZoom они рассылаются в течение 21 рабочего дня после прохождения теста. По сравнению с UserTesting это в три раза медленнее. Но, с другой стороны, на IntelliZoom иногда можно заработать 10 долларов за короткие тесты, занимающие всего около 10 минут. Это поднимет цену за час до 60 долларов, если вам повезет.

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

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

TryMyUI

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

Подобно UserTesting, TryMyUI платит тестерам веб-сайтов за выполнение тестов веб-сайтов и приложений, и их стандартная ставка составляет 10 долларов США за тест, при этом в среднем тест занимает всего около 20 минут. Еще раз, это поднимает почасовую ставку примерно до 30 долларов.

Новые пользователи TryMyUI сообщают, что в начале получали в среднем 1-2 теста в неделю. Так что не ждите 30 долларов в час мгновенно.
Это разумная цель (и потенциально вы могли бы зарабатывать еще больше в будущем), но для достижения этого уровня заработка требуется терпение и целеустремленность.

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

Userlytics

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

У Userlytics есть несколько высококлассных клиентов, таких как Microsoft, Verizon и Google, а это означает, что их сервису в целом доверяют и ценят корпорации.

Как платный тестер веб-сайтов, я был сразу же удивлен одним из требований, которое Userlytics предъявляет к своим партнерам — они НАСТОЯТЕЛЬНО используют встроенный микрофон вашего устройства. Для тех, кто беспокоится о том, в порядке ли их оборудование, это должно быть хорошей новостью.

В среднем Userlytics платит 10-20 долларов за 20-минутный тест. Хотя Userlytics рекламирует себя как предлагающий тесты, которые могут стоить до 90 долларов за выполненный тест, маловероятно, что кто-то сможет сразу же получить доступ к тестам, которые платят столько.

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

Платежи обрабатываются через PayPal каждые 15 дней ПОСЛЕ того, как клиент Userlytics одобрил ваш тест. Если вы заинтересованы в том, чтобы стать платным тестировщиком пользователей в Userlytics, не стесняйтесь вступать в партнерские отношения с Userlytics на их странице регистрации.

UserFeel

Компания UserFeel, основанная в 2010 году, была детищем Янниса Карампеласа. Карампелас — профессиональный веб-разработчик, у которого возникли проблемы с поиском способов удаленного тестирования юзабилити для своих греческих клиентов.

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

В 2021 году UserFeel стала одной из самых известных в мире платформ для тестирования удобства использования. В настоящее время компания сотрудничает с более чем 130 000 квалифицированных тестировщиков и более чем с 200 постоянными клиентами. Наиболее известными из их бизнес-клиентов являются такие компании, как Tripadvisor, Target и Four Seasons.

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

В настоящее время UserFeel предлагает своим удаленным тестировщикам фиксированную ставку в размере 10 долларов США за 10–20-минутный тест. Хотя этот показатель может показаться низким, некоторые опытные пользователи UserFeel сообщают о проведении до 5 тестов в день. Это увеличит почасовую ставку примерно до 50 долларов, что более чем конкурентоспособно для удаленного тестера удобства использования веб-сайта.

Учитывая все обстоятельства, UserFeel продолжает оставаться одним из лучших веб-сайтов для тестирования юзабилити в 2021 году. Он был основан в 2009 году Тоби Биддлом, австралийским специалистом по пользовательскому опыту с многолетним опытом работы в этой области. Текущая версия Loop11 была сделана как прямой ответ на проблему, с которой боролась консалтинговая фирма Biddle по UX, — ограничения, связанные с поиском свободы проводить тесты так часто, как это необходимо клиентам и сотрудникам.

Loop11 быстро сделала себе имя, работая с такими компаниями, как IBM, Motorola и Vodafone.

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

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

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

UserPeek

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

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

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

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

UserPeek уже объявил базовую ставку в размере 10 долларов США за 15-20-минутный юзабилити-тест веб-сайта. Примерно такая же средняя ставка, которую лучшие веб-сайты для тестирования пользователей предлагают своим новым партнерам.

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

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

uТест

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

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

Однако надо сказать, что uTest не для всех. Если вы ищете сайт, который обеспечит стабильный поток гарантированных выплат, uTest — не идеальный выбор для вас. Видите ли, большинство тестов, предлагаемых uTest, сосредоточены на поиске и сообщении об ошибках в различном программном обеспечении.

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

uTest поддерживает Payoneer и PayPal в качестве способов оплаты. Кроме того, платежи обрабатываются два раза в месяц (в течение 15-го числа и в последний день месяца)

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

Учитывая все обстоятельства, это уникальная платформа с большим количеством преданных тестировщиков. Мое предложение? Попробуйте uTest Academy и посмотрите, нравится ли вам такая работа, прежде чем посвятить себя платформе.

Userbrain. С таким списком клиентов нет сомнений в том, что это законный сайт, который может предложить дополнительный доход внештатным тестировщикам веб-сайтов.

Первоначально возможности заработка могут показаться низкими по сравнению с лучшими веб-сайтами для тестирования удобства использования — Userbrain предлагает фиксированную ставку в размере 5 долларов США за 15-20-минутный тест. Но при дальнейшем изучении опыт тестировщика Userbrain имеет много преимуществ.

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

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

Платежи обрабатываются через PayPal всякий раз, когда тестер решает вывести свои доходы. Все выплаты обрабатываются в течение 5-10 рабочих дней.

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

TestingTime

TestingTime — это веб-сайт для тестирования удобства использования, который мы рассмотрим далее. Компания TestingTime, основанная в 2015 году, работала с такими компаниями, как Heineken, Logitech и Wikimedia Foundation.

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

Как и следовало ожидать, более высокие ставки также сопровождаются некоторыми дополнительными условиями. Позвольте мне объяснить подробно — юзабилити-тесты, проводимые TestingTime, позволяют клиентам TestingTime и тестировщикам напрямую контактировать.

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

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

Как мы выбирали лучшие сайты для тестирования юзабилити?

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

• Надежность . Мы включили только те сайты, которые имеют большой опыт своевременной обработки всех своих платежей. Как пользователь-тестер, вы не хотите тратить свое драгоценное время на сайты, которые не будут платить вам вовремя/вообще.
• Прибыльность . Большинство веб-сайтов, посвященных пользовательскому тестированию, предлагают довольно схожие расценки (примерно 10 долларов США за 10-20-минутный тест), из-за чего новичкам сложно понять, какой сайт предлагает наибольшую денежную ценность затраченного времени. Таким образом, чтобы помочь нашим читателям, нам пришлось копнуть глубже — мы также рассмотрели такие переменные, как то, как быстро новичок может получить доступ к тестам, как часто предлагаются тесты и есть ли возможности заработать больше в будущем.
• Доступность . Мы ориентируемся на сайты, которые ищут тестировщиков без опыта работы. Вот почему мы исключили сайты тестирования юзабилити веб-сайтов, которые приобретают какие-либо предварительные знания о тестировании программного обеспечения/веб-сайтов/приложений.

Часто задаваемые вопросы

Что нужно, чтобы стать платным юзабилити-тестером?

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

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

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

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

8 лучших примеров лучшего дизайна пользовательского интерфейса веб-сайта [2023]

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

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

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

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

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

1. Medium
2. Virgin America
3. Airbnb
4. Boosted Boards
5. Dropbox
6. Pitch
7. Frank and Oak
8. Se mplice Labs

Итак, если вам интересно, как оценить, хорош ли пользовательский интерфейс — или даже отличный — как вы решаете? Я имею в виду, что вы можете определить, находите ли вы пользовательский интерфейс визуально привлекательным, и вы, конечно, можете использовать интерфейс, чтобы убедиться, что он интуитивно понятен и прост. А есть ли что-нибудь более объективное? Более формализовано?

Как узнать, хорош ли дизайн пользовательского интерфейса веб-сайта?

Лично я всегда ссылаюсь на характеристики юзабилити, определенные исследовательской компанией Nielsen Norman Group.

Nielsen определяет Юзабилити через следующие пять характеристик; обучаемость, эффективность, запоминаемость, ошибки и удовлетворенность.

• Обучаемость: Может ли пользователь выполнять свои задачи без особых трудностей?
• Эффективность: Позволяет ли интерфейс пользователю своевременно выполнять задачи?
• Запоминаемость: Насколько вероятно, что после ухода с веб-сайта пользователь сможет вспомнить, как им пользоваться при следующем посещении?
• Ошибки: Какие шаги предпринимает интерфейс, чтобы уменьшить вероятность ошибки пользователя, и как они позволяют пользователям исправить ошибку?
• Удовлетворенность: Нравится ли пользователю взаимодействие с дизайном?

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

1. Medium

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

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

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

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

2. Virgin America

Потерпите меня в этом. Лишь на мгновение.

Когда дело доходит до помощи пользователям в завершении процесса бронирования авиабилетов, Virgin America одной из первых (если не , то первой) поставила интересы пользователя на первое место и в центр. Для большинства бронирование авиабилетов является рутиной.

Подобно тому, как посудомоечная машина избавляет нас от необходимости мыть посуду, сайт Virgin America упростил свой интерфейс, чтобы привлечь внимание к самому важному вопросу: «Куда бы вы хотели пойти?» Удалив весь окружающий контент, пользователь мог сразу начать процесс бронирования.

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

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

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

Источник: Work & Co

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

3. Airbnb

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

Airbnb, как и Virgin America, уделяет первостепенное внимание упрощению процесса бронирования проживания прямо с главного экрана.

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

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

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

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

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

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

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

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

4. Boosted Boards

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

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

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

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

Кроме того, вы получите краткое изложение наиболее важной информации вместе со спецификациями. И, конечно же, ключевое «Добавить в корзину». Что тебя останавливает? Очень мало.

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

5. Dropbox

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

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

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

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

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

6. Pitch

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

До свидания Powerpoint, привет Питч.

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

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

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

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

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

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

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

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

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

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

7. Frank and Oak

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

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

Несмотря на смелые маркетинговые сообщения, ориентированные на продажи — Присоединяйтесь к Frank Rewards и получайте 1 балл за каждый потраченный доллар — имидж их бренда прочно закреплен с самого первого контакта с компанией. Прохладный, чистый, близкий и личный.

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

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

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

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

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

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

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

8. Semplice Labs

Один из моих любимых примеров великолепного и функционального пользовательского интерфейса можно найти в Semplice Labs, портфолио WordPress, созданном суперзвездой дизайнером Тобиасом Ван Шнайдером, который разработал для Spotify, BMW, Google и даже NASA. . Достаточно сказать, что он знает, что делает.

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

Заключение

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

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

Хотите узнать больше о дизайне пользовательского интерфейса? Ознакомьтесь с этими замечательными статьями:

• 10 примеров прекрасных блогов, добившихся успеха в дизайне пользовательского интерфейса
• 9 примеров портфолио дизайнеров пользовательского интерфейса, которые вас вдохновят
• Какие навыки вам нужны, чтобы стать дизайнером анимации?
• 5 тенденций анимации пользовательского интерфейса, которым следует следовать

Часто задаваемые вопросы

1. Какой веб-сайт имеет лучший пользовательский интерфейс?

На этот вопрос нет однозначного ответа, поскольку разные веб-сайты превосходны в разных аспектах дизайна пользовательского интерфейса веб-сайта. Тем не менее, некоторые веб-сайты, которые часто называют примерами превосходного дизайна пользовательского интерфейса, включают Airbnb, Dropbox и Virgin America.

2. Где взять идеи пользовательского интерфейса?

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

3. Из чего состоит хороший пользовательский интерфейс веб-сайта?

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