Как создать идеальное поле поиска

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

1. Расположение

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

2. Внешний вид

Строка поиска должна быть видна с первого взгляда. Для этого можно выделить обводку поля и кнопку поиска более ярким цветом, а вот для самой строки ввода лучше использовать белый фон. Также учитывайте, что ваше поле поиска должно быть достаточной длинны. Оптимальный размер поисковой строки должен быть не меньше 27 символов.
Пример: сайт Aliexpress

3. Текст подсказки

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

4. Кнопка поиска

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

5. Иконка

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

На этом все! Отдельным постом хотелось бы затронуть вывод результатов поиска. Дайте знать в реакциях если тема интересна.

Инструменты UX — Метод персон

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

Когда стоит применять

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

Как создать портрет пользователя

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

1. Сбор данных

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

2. Анализ данных

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

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

3. Оформление персон

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

Пример персоны для страницы корпоративного интранета

Заключение

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

Полезные ссылки:

→ Шаблон Figma для создания персон

→ Генератор лиц для ваших персон в Figma

Что еще почитать по теме:

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

Очень подробная статья про создание персон на UX-Journal


На этом фсе... Вдарьте по реакциям если было полезно!

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

— Обзор 12 лучших портфолио UX-дизайнеров

​​— Основы UX — Закон Теслера

​​— Психология в дизайне - Эффект якоря

— Метафоричный анимационный фильм Toss — THE JOURNEY

— Как создать идеальное поле поиска

— Инструменты UX — Метод персон

Как вам подборка статей за эту неделю? Поделитесь в реакциях!

Toptal для дизайнера: как пройти интервью и сколько можно заработать

Я как-то писал про западные биржи фриланса, где была упомянута Toptal. Эта компания считается одной из самых топовых фриланс-бирж для удаленной работы. Отбор сложный, зато доход обещает быть неплохим от $1000 в месяц при частичной занятости. Юля — дизайнер с опытом, попробовала пройти интервью и рассказывает так-ли хороша биржа Toptal, как они о себе рассказывают.

https://vc.ru/design/487319-toptal-dlya-dizaynera-kak-proyti-intervyu-i-skolko-mozhno-zarabotat

Психология в дизайне — Закон Миллера

В 1956 году американский ученый-психолог Джордж Миллер обнаружил что, кратковременная память человека способна запоминать одновременно 7 плюс-минус 2 элементов. При этом 7 названа «магическим числом», выступая не конкретной цифрой для деления, а как диапазон от 5 до 9.

Как применять в дизайне

Следуя закону Миллера можно снизить когнитивную нагрузку на пользователей группируя объекты по смыслу. Это позволит сделать взаимодействие с интерфейсом удобнее и быстрее. Например:

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

— для ввода данных банковской карты или телефонного номера лучше разделить поля ввода на группы, например в формате 1 (123) 111-22222. Так считывать и запоминать числовые значения будет проще.

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

На этом все. Если стоит продолжать тему психологии в дизайне, дайте знать в реакциях!

5 плагинов Figma для проверки доступности дизайна

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

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


Contrast Grid — проверка контраста нескольких цветов
Плагин позволяет проверить контрастность сразу нескольких сочетаний цветов текста и фона на соответствие минимальному контрасту по стандарту WCAG 2.0 minimum contrast.


Caravage — проверка на соответствие стандарту WCAG
Очень полезный плагин для веб-дизайна, если нужно проверить насколько макет соответствует требованиям доступности по стандарту Web Content Accessibility Guidelines 3.0. Проверяет не только контрастность и цвета, но и размер шрифтов.


Adee — многофункциональный плагин для тестирования доступности
С помощью плагина можно проверить цветовой контраст в 8 режимах цветового дальтонизма, потестить контрасты по стандарту WCAG, а также генерировать Alt-тексты для изображений. Кроме того, плагин может проверить соответствуют ли кнопки размеру области касания для сенсорных экранов.


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

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

Пример сторителлинга для веб страниц

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

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

Ставки в фрилансе #1 — как подсчитать?

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

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

1. Сегмент рынка

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

Ссылка по теме: анализ зарплат айтишников в первом полугодии 2022 от Хабр


2. Квалификация

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


3. Географическое местоположение

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

Пример: средняя зарплата UX/UI-дизайнера по регионам


4. Расходы

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

Заключение

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

Методы исследования в UХ — A/B-тестирование

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

Когда применять

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

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

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

2) Также необходимо выбирать параметры для анализа производительности. Это могут быть количество кликов, совершенные действия, конверсии и т.д. Для анализа веб страниц используются инструменты, такие как Google Analytics или Яндекс.Метрика

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

Пример: Обратите внимание на пример эффективности А/В-тестирования компании HubSpot на картинке внизу. Вариант В показал на 5% больше конверсии чем вариант А за счет другого фона и фотографии. Также можете посмотреть другие тесты.

Заключение

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

На этом все. Дайте знать в реакциях если было полезно!

Закон Миллера, ставки в фрилансе, A/B-тестирование...

Воскресенье, время недельного дайджеста:

— Toptal для дизайнера: как пройти интервью и сколько можно заработать

— Психология в дизайне — Закон Миллера

— 5 плагинов Figma для проверки доступности дизайна

— Пример сторителлинга для веб страниц

— Ставки в фрилансе #1 — как подсчитать?

— Методы исследования в UХ — A/B-тестирование

Было полезно? — дайте знать в реакциям!

Как отображать таблицы на маленьких экранах

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

https://vc.ru/design/518320-kak-otobrazhat-tablicy-na-malenkih-ekranah

Психология в дизайне — Эффект Зейгарник

Психологический эффект, заключающийся в том, что человек лучше запоминает прерванные действия, чем завершённые. Впервые этот эффект был замечен психологом Блюмой Зейгарник, одной из создателей факультета психологии МГУ, и был назван в её честь эффектом Зейгарник. В ходе экспериментов было установлено, что испытуемые в 90% случаев лучше запоминали те задачи, которые им не дали завершить. Это связано с тем, что невыполненные задачи имеют свойство прочно заседать в нашей памяти, и мы мысленно продолжаем к ним возвращаться.


Как применить в дизайне

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

— тизеры статей и публикаций цепляющие внимание пользователя

— предпросмотр видеоролика при наведении на видео (как это делает например Youtube)

— индикаторы прогресса в профиле (на картинке внизу, пример, где LinkedIn использует этот прием, чтобы заставить пользователей заполнить свой профиль)

Заключение

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

Если было полезно, дайте знать в реакциях!

Как научиться создавать удобный и понятный дизайн и дорого его продавать?

Делюсь с вами каналом Шаринган дизайнера — в нём собраны необходимые материалы, советы, знания и опыт успешных дизайнеров, фрилансеров, арт-директоров

А ещё автор выпустил мини-курс по UI/UX — сухая выжимка необходимой информации, которая поможет избежать распространенных ошибок и научиться делать чистый качественный дизайн

Легкий апгрейд в UI/UX тебе обеспечен
Вот несколько интересных статей: (Чтобы ссылки на посты заработали, необходимо подписаться на канал)

~ Лучшие книги по типографике

~ Ссылки на ресурсы для развития визуального кругозора

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

Научись делать крутой дизайн бесплатно.
Просто бери и пользуйся

5 плагинов Figma для оптимизации рабочего процесса

Подборка полезных плагинов экономящих ваше время в процессе работы в Фигме.

Content Reel
Мегаполезный плагин если вам нужно быстро заполнить текст или элементы готовым контентом.
Можно выбрать из следующих категорий: тексты (имена, адреса, страны, имейлы, даты...), картинки (аватарки, флаги, логотипы итд). Также есть набор из более 5000+ иконок. Весь контент постоянно пополняется комьюнити. После регистрации также можно добавлять и свои собственные элементы: текст или картинки в формате PNG/JPG.

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

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

Style Organizer
Помогает организовать стили. Можно сгруппировать элементы в единый стиль по параметрам внешнего вида, выделить элементы с одинаковым стилем, переписать один стиль на другой итд...

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

Если было полезно, дайте знать в реакциях!

3 игры которые помогут улучшить навыки дизайнерам

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

>> Cantunsee
Помогает качать насмотренность в интерфейсах. Из двух предлагаемых макетов выбираете верный вариант. Если прошли без ошибок, значит вы внимательно читали мой канал и хорошо знакомы со всеми базовыми правилами в дизайне ;)

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

>> Bezier
Если вы не сильны в рисовании векторной графики, то эта игра для вас! Тут можно потренироваться в отрисовке простеньких фигур по шаблону.

Ставки в фрилансе #2 — как подсчитать свой часовой тариф

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


1. Определяем среднюю месячную зарплату по сегменту

Предположим вы живете в Питере и имеете опыт работы веб-дизайнером 2 года.

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

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


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

Берем 8 часов/день по 4 дня в неделю на выполнение заказов.
1 день выделяем для административной работы, обучения и поиска клиентов.

Получаем 24 оплачиваемых часа в неделю и в среднем 15 рабочих дней в месяц. Если берете отпуск то его придется вычесть.


3. Подсчитываем расходы

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

В нашем примере это могут быть:
- аренда/коммунальные услуги: 20.000 руб/мес
- интернет: 850 руб/мес
- еда: 15.000 руб/мес
- прочие затраты: 8.000 руб/мес (тут может быть рассрочка на выплаты по оборудованию для работы: телефон, комп итд...)

И того, общие затраты: 43.850 руб


4. Налоги и страховые взносы

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

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


5. Подсчитываем ставку

Минимальная
Делим общие траты с учетом налога (48.350 руб) на трудовые часы в мес (15ч) и получаем 402,92 руб. С этой суммой наш дизайнер выйдет в ноль после оплаты всех счетов. Чтобы хоть что-то заработать сверху накидываем еще где-то 30% к базису.

В результате получим 523 руб/час

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

Получаем ставку в размере 1028 руб/час

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

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

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

Методы исследования в UX — Юзабилити-тестирование

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

Когда проводить юзабилити-тестирование

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

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

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

Пример шаблона для планирования тестирования

2. Вопросы
На основе вашего сценария составляется вопросник для модерации тестирования. В нем вы описываете ситуацию (постановку проблемы) и просите пользователя решить ее в рамках продукта.

Пример:
- Вы хотите остановится в 3х звездочном отеле на пару дней в центре Барселоны. Как вы забронируете отель на начало сентября через приложение Bookingcom?

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

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

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

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

Пример записи пользовательского теста приложения для аренды походного снаряжения

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

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

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


Было полезно? Дайте знать в реакциях!

Таблицы на маленьких экранах, эффект Зейгарник, Юзабилити-тестирование...

Недельный дайджест:

— Как отображать таблицы на маленьких экранах

— Психология в дизайне — Эффект Зейгарник

— 5 плагинов Figma для оптимизации рабочего процесса

— 3 игры которые помогут улучшить навыки дизайнерам

— Ставки в фрилансе #2 — как подсчитать свой часовой тариф

— Методы исследования в UX — Юзабилити-тестирование

Если эта неделя была полезной, дайте знать в реакциях.