Scott
Интерфейс оценки предлагает человеку выбрать значение на определенной шкале. Чтобы ответ был полезным, объясните, что именно оценивается, что означают значения и когда выбор становится отправленным ответом. Ряд звезд без такого контекста может выглядеть привычно, но собирать ответы совсем на другой вопрос.
Представим справочный центр, который после обращения спрашивает: «Насколько полезен этот ответ?» Человек выбирает одно из пяти значений, при желании пишет комментарий и отправляет отзыв. В другом месте показана сводка предыдущих оценок. Проектируйте эти два сценария отдельно в редакторе UI-дизайна Pixso: выставление личной оценки и чтение общего рейтинга — разные задачи.
Определите вопрос до выбора звезд
Фраза «Оцените свой опыт» не уточняет объект оценки. Человек может судить о сотруднике поддержки, скорости ответа, самом продукте или решении исходной проблемы. В нашем примере вопрос касается только полезности одного ответа.
Подписи шкалы должны соответствовать вопросу. Используем пять вариантов: 1 — Совсем не полезен, 2 — Немного полезен, 3 — Умеренно полезен, 4 — Полезен, 5 — Очень полезен. Они образуют упорядоченную шкалу, не меняя предмет посередине. «Медленно», «Нормально» и «Дружелюбно» нельзя смешивать так, словно это последовательные степени одного качества.
Пять значений — выбор для этого примера, а не обязательное правило для любого отзыва. Если важно лишь узнать, помог ли ответ, может хватить «Да» и «Нет». Если команда уже использует определенную исследовательскую методику, сохраняйте ее формулировки и шкалу, а не меняйте их ради визуальной симметрии.
Предлагайте оценку в подходящий момент и оставляйте участие добровольным. Запрос не должен перекрывать дальнейшее обращение в поддержку или появляться до того, как человек успел прочитать ответ. Тому, кому еще нужна помощь, необходим путь в поддержку отдельно от формы обратной связи.
Сделайте смысл шкалы видимым
Звезды компактны и привычны во многих интерфейсах отзывов о товарах. Числа явно показывают порядок. Лица могут выглядеть дружелюбно, но создают дополнительную трактовку: речь об эмоции, удовлетворенности или полезности ответа?
В примере с поддержкой пять подписанных вариантов прямо передают смысл. Значения можно дополнить звездами, но слова должны оставаться доступными на сенсорных устройствах и для вспомогательных технологий. Подпись, которая появляется только при наведении, заставляет мобильного пользователя гадать.
Если места хватает только для подписей крайних значений, показывайте смысл выбранного после нажатия. При выборе четырех человек должен увидеть «4 — Полезен», а не только четыре цветные звезды. Вопрос оставьте над шкалой, чтобы ответ сохранял смысл после прокрутки или возвращения к форме.
Не рассчитывайте, что декоративная звезда сама объяснит возможность редактирования. У поля оценки должны быть заметные признаки взаимодействия и фокус. Сводный рейтинг, доступный только для чтения, не должен выглядеть как элемент, в котором легко случайно заменить значение.
Начните без ответа и отделите выбор от отправки
Вначале не выбирайте ни один вариант. Предустановленная пятерка может создать ответ, которого человек не собирался давать. Среднее значение тоже не нейтрально: «3» — это оценка, а не ее отсутствие.
Состояние без выбора должно быть понятным. Пустые контуры звезд в поле могут означать «еще не оценено», но не нулевой балл. В нашей пятибалльной шкале ноль не разрешен. Пропущенный вопрос не равен низкой оценке.
При наведении указателя на четвертую звезду можно предварительно подсветить четыре, не меняя подтвержденный выбор. Когда указатель уходит, возвращайте выбранное значение или пустое состояние. Щелчок или касание фиксирует выбор в форме. Различайте наведение, клавиатурный фокус и выбранный вид, чтобы человек понимал, что будет отправлено.
В этом примере выбор еще не отправляет ответ. Человек отмечает «4 — Полезен», при желании объясняет, что помогло, и нажимает «Отправить отзыв». До отправки оценку можно изменить. Мгновенное сохранение тоже возможно, но тогда нужно подтверждать сохраненное значение и давать ясный путь исправления, а не скрывать окончательное действие в нажатии на звезду.
Обеспечьте выбор без мыши
Оценка от одного до пяти — один выбор среди упорядоченных вариантов. Пример W3C с группой переключателей для рейтинга показывает доступные имена, клавиатурный выбор и видимый фокус. Это ориентир по поведению, а не подтверждение готовности любой похожей реализации к публикации.
Доступным именем всей группы сделайте вопрос, а каждому варианту дайте значение и смысл. Услышать «4, Полезен» понятнее, чем пять раз услышать «звезда». Визуальное заполнение первых четырех звезд не означает четыре независимых выбора: отправляется одна оценка.
Индикатор фокуса должен оставаться видимым поверх выбранного оформления. Не полагайтесь только на различие желтого и серого. Заполненные формы, контуры, текст и фокус могут дополнять друг друга, в том числе в режиме высокой контрастности.
На узком экране не сжимайте пять целей касания в декоративную полоску. Увеличьте область взаимодействия или выберите компоновку с читаемыми подписями. При переносе сохраняйте очевидный порядок: если значения 1–3 находятся в одной строке, а 4–5 далеко от них, простой вопрос становится сложнее.
Позвольте короткому ответу остаться коротким
После выбора оценки человеку может быть нечего добавить. Оставьте комментарий необязательным, если задача исследования действительно не требует пояснений. Вопрос «Что сделало бы ответ полезнее?» понятнее, чем пустое поле без объяснения.
Не заставляйте только пользователей с низкими оценками писать длинный текст, прежде чем ответ будет учтен. Это меняет усилия, необходимые для разных вариантов. Если дополнительные вопросы зависят от балла, объясняйте их назначение и не используйте их как препятствие для отрицательной обратной связи.
Во время отправки сохраняйте выбранное значение и комментарий. Если сервис подтвердил неудачу, сообщите «Не удалось отправить отзыв. Попробуйте снова» и оставьте черновик. Если исход неизвестен, не утверждайте уверенно, что ответ сохранен или потерян: используйте путь восстановления, который поддерживает сервис.
После подтверждения достаточно короткого сообщения «Отзыв получен». Если доступно редактирование, покажите отправленную личную оценку и действие «Изменить отзыв». Ответ не должен превращаться в публичную рецензию с другим назначением без объяснения, где и кому он будет виден.
Для свободного сообщения о неработающем сценарии балл может быть не лучшим началом. В руководстве по кнопке обратной связи разобраны вопросы о том, чего человек ожидал и что произошло вместо этого. Выбирайте способ, который дает команде информацию для конкретного действия.
Не скрывайте контекст общего рейтинга
В сводке укажите шкалу и количество ответов. В нашем примере запись 4,2 из 5 · 128 оценок сообщает больше, чем частично заполненные звезды. Это условная сводка предыдущих ответов, а не результат, полученный из одной оценки выше.
Различайте «оценки» и «текстовые отзывы». У сервиса могут быть 128 оценок и гораздо меньше комментариев. Если назвать все ответы отзывами, читатель будет ожидать соответствующее количество текстов при переходе к подробностям.
Для объекта без оценок покажите «Оценок пока нет». Значение 0,0 из 5 превращает отсутствие данных в плохой результат. По той же причине не оформляйте единственную пятерку огромным знаком качества, который создает впечатление широкого согласия.
Когда читателю важно понять, что стоит за средним, покажите распределение или путь к отдельным ответам. Одинаковое среднее может скрывать очень разные наборы оценок. Способ расчета должен соответствовать подписям: не добавляйте веса, исключения или временной период без объяснения значимой для читателя области расчета.
Личную оценку отделяйте от общей. «Ваша оценка: 4 — Полезен» может стоять рядом со сводкой, но подписи должны различаться. Изменение одного ответа не означает, что среднее всех предыдущих оценок теперь равно четырем.
Спроектируйте ввод и сводку рядом в Pixso
Создайте два фрейма: добровольную форму обратной связи о поддержке и панель со сводным рейтингом только для чтения. В форме расположите вопрос над пятью упорядоченными вариантами, ниже — необязательный комментарий, затем — «Отправить отзыв». В сводке покажите 4,2 из 5 и 128 оценок без поведения при наведении, похожего на поле ввода.
Создайте повторно используемые состояния: вариант без выбора, вариант в фокусе и выбранное значение. С помощью Auto Layout сравните короткие подписи с длинными переводами. Сохраните версию с выбранным «4 — Полезен» и версию без ответа, чтобы пустое состояние случайно не превратилось в оценку по умолчанию.
Проверьте дизайн на трех заданиях: поставить ответу четыре, изменить оценку на три до отправки и узнать, сколько людей участвовало в общем рейтинге. Спросите, что именно измеряет вопрос. Если коллега отвечает «работу сотрудника», хотя речь идет о полезности ответа, уточните вопрос до оформления звезд.
В спецификации компонента передайте разработчикам подписи шкалы, правила выбора и отправки, возможность редактирования и формулировки сводки. Хороший интерфейс оценки помогает легко ответить на вопрос и не ошибиться при чтении результата. Визуальное оформление должно поддерживать это различие, а не подменять его.
