Последние месяцы я работал над уточнением рекомендаций по дизайну для моей будущей книги «Web Form Design Best Practices» по данным реального применения. С этой целью я имел удовольствие работать с лондонской юзабилити-компанией Etre в нескольких юзабилити-исследованиях с использованием оборудования слежения за взглядом пользователей, фокусировавшихся на характерных особенностях дизайна веб-форм. Один из этих тестов был посвящён распознаванию основных и вторичных действий.
Основные и вторичные действия
Типичная веб-форма обычно предлагает несколько «конечных» действий. Действия вроде «Послать», «Сохранить» или «Продолжить» предназначены для возможности завершить заполнение формы — основная цель практически каждого, начавшего заполнение формы. Поскольку они запускают наиболее важное действие формы, их часто называют основными действиями.
Типичная веб-форма Типичная веб-форма
С другой стороны, есть тенденция меньше использовать вторичные действия и чаще всего позволять людям с помощью них отменить введённые данные. Такие варианты, как «Отмена», «Сброс» или «Назад», представляют собой вторичные действия, противоположные основной цели большинства людей — завершению начатой формы.
Поскольку вторичные действия могут иметь негативные последствия, особенно при непреднамеренном использовании, я часто убеждал, что они должны отсутствовать в формах. Представьте себе заполнение длинной формы в онлайне только за тем, чтобы нажать кнопку «Сброс» и потерять все данные.
Говорят, что в определённых ситуациях вторичные действия имеют смысл («Сохранить на потом», «Экспортировать» и т.д.). В таких случаях лучшее решение, на котором я настаивал, это визуальное разделение первичных и вторичных действий так, чтобы у людей был явный путь, разъясняющий их основную цель: заполнение формы.
Визуальные различия Визуальные различия
Уменьшение визуального выделения второстепенных действий минимизирует угрозу возникновения потенциальных ошибок, направляя пользователя к успешному результату. Но как наилучшим образом достичь этого разграничения? Насколько сильно должны различаться основные и второстепенные действия, и где они должны быть расположены? Чтобы ответить на эти вопросы, Etre и я выполнили несколько тестов.
Для того, чтобы оценить, какие представления основных и второстепенных действий срабатывают лучше всего, мы попробовали 6 вариантов на 23 людях, используя слежение за взглядом и юзабилити-метрики. Участникам были продемонстрированы все шесть дизайнов в случайном порядке (чтобы минимизировать предвзятость) и мы попросили их «Пожалуйста, заполните форму полностью и аккуратно».
Опробованные варианты Опробованные варианты
Визуальные различия
Люди справились со своей целью в совершенстве с помощью пяти дизайнов из шести. Для вариантов A, B, C, D и F доля успешных попыток составила 100% — с ними пользователи не совершили ни одной ошибки. Также, они показали сравнимое время, затрачиваемое на выполнение задачи, и получили схоже высокие показатели удовлетворения.
Вариант B показал себя наилучшим образом. Фиксации были короче и их было меньше в этом дизайне. Также, у людей получалось выполнить эту задачу быстрее и эффективнее, нежели используя прочие варианты.
Вариант B: Фиксации Вариант B: Фиксации
Тем не менее, отзываясь о варианте А, несколько людей сказали, что отображение опции «Отмена» ссылкой было полезно. Один человек упомянул, что несмотря на то, что такой вариант представления сделал обнаружение этой опции сложнее, это помогло предотвратить случайные (и катастрофические) отмены. Другому опция «Отправить» чувствовалась наиважнейшей и поэтому казалось логичным, что «Отмене» не было уделено равного положения в пользовательском интерфейсе.
Также, несколько людей дали положительный отзыв о серой кнопке «Отмена» в варианте С. Один из участников сообщил, что её расцветка облегчила опознание «правильной кнопки» (то есть «Отправить»), но другой сказал, что разноцветные кнопки «замедляют процесс и заставляют убеждаться в том, что нажимаешь туда, куда надо».
Интересно, что для заполнения варианта C людям потребовалось примерно на шесть фиксаций больше по сравнению с вариантом B — дизайном, представляющим обе возможности как почти одинаковые, выровненные по левому краю зелёные кнопки. Видимо, хотя пользователям и понравилось то, что серый цвет упростил опознавание кнопки «Отмена», это уменьшило эффективность дизайна в аспекте скорости работы с ним. И ещё, с вариантом В многие пользователи высказали беспокойство, что они «могли с легкостью выбрать не тот вариант».
Вариант C: Фиксации Вариант C: Фиксации
В целом, по всей видимости, люди хорошо реагировали на дизайны, в которых “Отмена” каким-то образом выделялась, даже если эти дизайны слегка замедляли работу. Это наводит на мысль о том, что они были более заинтересованы в том, чтобы избежать потери своих данных, нежели в их быстрой отправке.
Варианты A, B, C Варианты A, B, C
Расположение
Неудачно себя зарекомендовал только вариант Е. Шесть человек по ошибке нажали на кнопку «Отмена», заполняя форму с этим дизайном, а многие другие долго возились с ним, прежде чем осознавали, что они вот-вот сделают ошибку. Люди, в целом, тратили примерно на шесть секунд больше с этим вариантом по сравнению с В (весьма внушительная разница, принимая во внимание, что расположение кнопок — единственное различие). Также им потребовалось фиксаций больше среднего для выполнения задачи (с большей средней общей длительностью фиксаций и средней длиной каждой фиксации).
Вариант E: Фиксации Вариант E: Фиксации
Согласно собранным нами данным, варианты A, B и C оказались наиболее эффективными с точки зрения проектирования.
Эти варианты объединяет одна общая черта: элементы “Отправить” и “Отмена” в них находятся в левой части страницы.
Это наводит на мысль, что выравнивание этих элементов по левому краю – наиболее удачный выбор, особенно когда прочие элементы управления над ними выровнены аналогичным образом.
Расположение кнопок “Отправить” и “Отмена” слева предполагает, что взгляду пользователя придется охватить меньшее расстояние.
Если судить по движениям взгляда, люди действовали наименее эффективно при использовании варианта F. Несмотря на то, что они успешно выполняли задание, используя этот вариант, данные по отслеживанию взгляда показывают, что при использовании остальных вариантов люди действовали эффективнее. При использовании варианта F их концентрация была наибольшей по сравнению со всеми остальными. Мы полагаем, это вызвано ожиданием того, что две кнопки будут выровненными по левому краю (т.е. окажутся снизу, сразу за последним полем на странице), и когда их там не оказывалось, людям приходилось искать их глазами.
Вариант F: Фиксации Вариант F: Фиксации
Такие ориентационные схемы соответствуют старому принципу дизайна форм – показывать понятный путь к завершению. Вертикальное выравнивание элементов ввода и элементов управления четко сообщает порядок действий при заполнении формы. На приведенной ниже теплокарте это видно по четким вертикальным осям, формируемым направлениями взгляда.
Вариант A: Фиксации Вариант A: Фиксации
(Примечание: какая-то доля предварительной подготовки могла также иметь здесь значение, так как во всех других вариантах, которые мы тестировали, кнопка “Отправить” находилась слева от кнопки “Отмена”.)
Краткий итог
В то время, как основной целью большинства веб-форм является то, чтобы люди прошли через форму как можно быстрее и безболезнее, бывают ситуации, когда целесообразнее их замедлить. При выборе между главными и второстепенными действия, визуальные различия являются полезным методом, который помогает людям сделать правильный выбор.
Должно ли это различие быть более заметным, вроде кнопки по сравнении со ссылкой в варианте A, или слегка менее уловимым, как две цветные кнопки в варианте C? Вариант A преуспел немного лучше по времени заполнения, среднему количеству фиксаций и средней суммарной длине фиксаций, указывая на то, что люди заполняли формы быстрее, но ненамного.
Необходимость таких различий становится, конечно же, спорной, если второстепенные действия отсутствуют. Следует удостовериться, что каждое второстепенное действие на форме действительно необходимо, добавлять их без разбора не стоит.
И напротив, выравнивание действий с элементами ввода на форме обеспечивает четкий путь к заполнению, что помогает людям быстрее заполнять формы. Следует осознавать, куда вы помещаете действия на форме, так как основные действия, выровненные с элементами ввода, имеют тенденцию к увеличению скорости заполнения, а чем меньше времени люди должны тратить для заполнения Ваших форм, тем довольнее они будут.
Перевод: EugeneKudashev, Fenrir, Андрей Колесник, vicont, kronos, Руслан Гроховецкий.
Впервые опубликовано в «Юзабилити Бюллетень, 2010».