какое количество полей должно быть в форме для записи
Какое количество полей должно быть в форме для записи
Почему важно сокращать количество полей для ввода при оформлении заказа
Последнее исследование юзабилити крупнейших интернет-магазинов, проведенное Baymard Institute, показало, что в среднем в процессе оформления заказа используется вдвое больше полей для заполнения, чем нужно. Эти данные дают понимание, как упростить процесс оформления заказа и улучшить конверсию. Делимся переводом этой полезной статьи.
Среднее число шагов при оформлении заказа выросло с 5,08 в 2012 г. до 5,42 в 2016 г.
Однако по нашим наблюдениям за пользователями, само по себе количество шагов – не самый важный аспект. Важно то, что пользователь должен сделать на каждом шаге. Но и количество шагов, начиная с 8-ми, становится уже важным: если их 8 или больше, это уже плохо для юзабилити. Как видно на графике, от таких длинных процессов оформления интернет-магазины отказались.
Из этого же графика заметно резкое снижение числа интернет-магазинов, где оформление заказа осуществляется за 3 шага и менее. Эта тенденция в увеличении числа шагов может частично объясняться внедрением более сложных опций при оформлении. В частности, многие сайты теперь предлагают различные опции доставки, увеличились также и опции оплаты.
Другая причина увеличения числа шагов при оформлении заказа может заключаться в том, что увеличилось число сайтов, где процесс оформления сделан в стиле «аккордеон». То есть отдельные шаги отображаются и скрываются во вкладки, содержащие сделанный пользователем выбор.
В 2012 году 14% сайтов использовали процесс оформления в стиле «аккордеон», а в 2016-м их стало уже 32%.
Новый гост для оформления документов
С 1 июля 2018 года вступил в силу ГОСТ Р 7.0.97-2016. В нем описано, как оформлять деловые и служебные документы: официальные письма, приказы на работе, справки для людей и запросы в ведомства. Россия составила список рекомендаций для всех и предлагает их использовать, чтобы было красиво и понятно.
Этот гост добровольный — его можно не использовать или применять частично. Но если у вас нет корпоративных стандартов, дизайнера или верстальщика, а хочется составить понятный документ, его стоит иметь в виду. Все-таки это гост, он утвержден и действует. Там есть здравые требования, но есть кое-что странное и даже опасное.
Мы прочитали его весь — вот главное.
Как составлять документы по госту
Вот несколько советов из стандарта:
Зачем гост для документов
У каждой компании и в каждом ведомстве могут быть свои правила оформления документов. Но когда в стране есть об этом гост, компании и ведомства могут основывать свои правила на нем, а не изобретать каждый раз с нуля.
Этот гост — такая опорная точка: вы можете его не придерживаться, но если нужен ответ на вопрос «Как правильно с точки зрения России?» — вот он, этот ответ.
Применять или не применять гост — решайте сами. Штрафов за это нет. Но если вы где-то публично заявите: у нас, мол, документы по госту, — тогда уже должны применять обязательно.
Когда документ на нескольких страницах
Если документ из нескольких страниц, начиная со второй, их нужно нумеровать. Номер ставят посередине верхнего поля. Отступ сверху — минимум 10 мм. Можно печатать с двух сторон листа, но тогда поля боковые должны совпадать.
У некоторых документов может быть титульный лист. Например, у устава компании, отчета или пакета документов для торгов. Если хотите оформить титульный лист по правилам, в госте есть схема.
Шрифты — бесплатные
Шрифты рекомендуют такие:
Или похожие по начертанию и размеру.
В таблицах шрифт может быть мельче. Важные реквизиты можно выделять полужирным: например, адресата заявления или заголовок документа.
Отступы и интервалы
Абзацный отступ — 1,25 см.
Заголовки разделов — с таким же абзацным отступом слева или по центру.
Вот требования к интервалам:
Минимальные поля для всех документов:
Если документ хранится больше 10 лет — левое поле должно быть минимум 30 мм. Но все это логично использовать для бумажных документов, потому что их скрепляют, прошивают, а края бумаги за годы могут истрепаться. Для электронных документов это не так важно, но гост почему-то этого не учитывает, хотя для электронных документов он тоже работает.
Выравнивание — по ширине
Документы по госту нужно выравнивать по ширине листа.
Если реквизиты пишут в углу, то самая длинная строчка должна быть не больше 7,5 см. Это примерно треть формата А4.
Если реквизиты документа не в углу, а по центру, их тоже нельзя растягивать на всю ширину. Максимум на 12 см — это половина ширины листа.
От редакции: выравнивая документ по ширине листа, включите переносы, иначе между словами будут огромные дыры. Либо люди, которые составляли гост, не знают об этом эффекте, либо у них нет глаз или вкуса
Реквизиты документа
Товарный знак или логотип — вверху посередине или слева. Можно указать название компании, магазина или бизнеса — которое неофициальное, но к нему привыкли.
В верхней части документа нужно написать, какая компания его составила, ее адрес, телефон и электронную почту, ИНН, ОГРН и другие реквизиты с учетом назначения документа.
По госту нужно написать и название документа. Это не касается только деловых и служебных писем. Если это приказ — нужно так и указать.
Дату ставят вверху. Причем не ту, когда составили документ, а когда подписали. Форматы даты такие:
Стандартное поле формы
Форму должно быть легко заполнить: обычно достаточно имени и номера телефона или имени и электронной почты.
Пример стандартного поля с именем и номером телефона
Стандартного поля с именем и почтой
Стандартного поля с именем и почтой 
Поля с именем и почтой, дополнительное поле с возможностью оставить сообщение 
Каждое поле можно назначить обязательным. Обязательные поля будут помечены звездочкой.
Настраиваем стандартное поле
Названия и тип стандартных полей можно изменить:
Дополнительные поля
В некоторых случаях кроме имени, номера телефона и почты можно использовать дополнительные поля.
Например, предпочтительная дата и время записи для сайта салона красоты
Адрес доставки заказа для интернет-магазина 
Номер телефона и выбор программы курса для сайта языковой школы. 
Как добавить новое поле?
Во внутренней рамке формы по наведению появляется кнопка «Добавить поле», нажимаем её и добавляем поле к стандартным имени и электронной почте. Для нового поля можно назначить тип, прописать текст, а также назначить его обязательными или по выбору. 
Также можно настроить дизайн каждого поля.
Почему пользователи вводят меньше данных, если в форме есть обязательные поля
Один раз в неделю ЦП выбирает самые интересные и актуальные темы мира юзабилити и UX, снабдив их мнением ведущих отечественных экспертов. Во втором выпуске рубрики «Интерфейсы» — интересная статья о том, что пользователи вбивают в веб-формы больше данных, если им явным образом не указывать обязательные для заполнения поля, а также мнение по этому вопросу UX-директора Acronis Дениса Кортунова и ведущего проектировщика интерфейсов в Mail.ru Group Геворга Глечяна.
Многие пользователи не заполняют необязательные поля в формах. Эта информация даже не всегда нужна, но всегда полезно знать о своих посетителях чуть больше. Это может помочь облегчить для них использование сайта. Существует подход, при котором звездочек для выделения обязательных к заполнению полей нет вовсе, а помечаются лишь опциональные поля.
Согласно некоторым исследованиям, при необходимости заполнения веб-формы пользователи ведут себя «чрезвычайно открыто на добровольной основе». Это значит, что люди обычно предоставляют больше данных о себе, даже если им сказать, что это сугубо добровольное дело. Это противоречит традиционному мнению о том, что пользователи стараются всеми правдами и неправдами заполнить как можно меньше полей. Однако, когда в форме явно указаны обязательные для заполнения поля, описанный эффект добровольной открытости снижается, и посетители начинают пропускать поля, которые не отмечены звездочками.
Наличие обязательных полей дает пользователю возможность на законных основаниях внести так мало данных, как только возможно. Обязательные поля кажутся людям более важными, поэтому они сначала заполняют их, пропуская остальные. Кроме того, никто не захочет тратить время на вбивание информации, которая, в принципе, и не особенно нужна. Если же попытаться использовать заложенную в посетителях склонность оставлять много данных о себе, и пометить лишь не обязательные поля, то исчезнет сама необходимость «срезать дорогу». Люди начнут вносить данные шаг за шагом, а не искать глазами звездочки обязательных полей.
Не стоит думать, что если явным образом не сказать человеку о том, что конкретную информацию нужно обязательно внести, он этого не сделает. Изначально пользователи склонны оставить о себе больше данных, чем требуется большинством форм. Однако они не станут обращать внимания на необязательные поля, если указаны обязательные, поскольку это дает возможность ускорить процесс заполнения.
Геворг Глечян, ведущий проектировщик интерфейсов Mail.ru Group
В целом я согласен с тем, что пользователи оставляют больше данных, если не указывать какие поля обязательны для заполнения. Однако, соглашаясь с этим принципом и внедряя его у себя, следует помнить о следующем.
Многолетние стандарты и опыт пользователей
Практически с самого начала становления интернета и вплоть до недавнего времени стандартом для форм являлось выделение обязательных полей с помощью звёздочки (*). И этот стандарт мог сформировать у опытных пользователей привычки при работе с формами. Но в последнее время все меняется, и лидеры индустрии отходят от привычных стандартов. В качестве примера приведу формы регистрации на почтовых сервисах:
Mail.Ru — все поля кроме поля «Город» обязательны для заполнения. Необязательное для заполнения поле снабжено подсказкой об этом.
Gmail — все поля в форме выглядят одинаково, при этом поле «Мобильный телефон» можно не заполнять.
Почта «Яндекса» — все поля в форме выглядят одинаково, при этом поле «Мобильный телефон» заполнять не обязательно.
Мотивированность пользователя
Если пользователь сильно мотивирован заполнить форму то он скорее всего заполнит и проберётся даже через самую плохо спроектированную форму (например, подача объявления о продаже автомобиля на сайте лидирующего в этом сегменте сервиса). Если же вы не лидер, то следует учитывать, что пользователь вряд ли готов тратить на вас большое количество времени. И тут как раз надо очень точно найти баланс между длинной формы и теми данными, которые вы потенциально хотите получить.
Надо помнить и применять
1) Приватные данные. Если вы просите пользователя ввести его личные данные, то надо рассказать ему почему вы их просите. Например, если вы просите номер мобильного телефона при регистрации, объясните что он будет использован если потребуется восстановить пароль.
2) Не просите больше, чем вам действительно нужно. Не надо слишком увлекаться идеей получения дополнительных данных от пользователя, ведь его терпение и время не безгранично.
3) Четкие и понятные подсказки. Особенно это касается полей ввода пароля. Напишите такие подсказки, чтобы пользователь мог заполнить форму правильно с первого раза и заполнил их так подробно как вы этого хотите.
4) Inline-валидация. Проверяйте введенные данные сразу после заполнения. Это помогает уменьшить количество ошибок, время на заполнения, увеличивает конверсию и удовлетворенность пользователей.
Денис Кортунов, UX-директор в Acronis, основатель студии «Турбомилк»
С веб-формами очень простая история: это зло. Никто не любит заполнять формы. Если вы можете что-то спросить у пользователя потом, вы должны это сделать потом.
Гениальнейшее предложение инвертировать обозначение полей — плохое по следующим причинам:
1) Вообще стоит задуматься — так ли нужны эти необязательные поля? Честно говоря, с трудом представляю этот «лучший UX», который получают пользователи,заполнившие все.
2) Мы ломаем привычный паттерн пользователей. Наверняка, они уже заполняли формы на других сайтах и там были required поля. Да, иногда полезно что-то поменять в лучшую сторону, но это не тот случай.
3) Пользователь просто сразу же нажмет submit. Мне очень интересно каким образом будет выводиться сообщение об ошибке. Тоже инвертированное?
Вообще, веб-формы — это очень интересно и непросто. Правильная форма, должна легко читаться. Там должно быть минимально возможное (а иногда и невозможное) количество полей. А разработка логики проверки валидности данных и сообщений об ошибках — целое искусство.
Способы создания эффективных форм для заполнения — от структуры до кнопок
Советы по проектированию от разработчика интерфейсов Ника Бабича.
У того, кто пользуется вашим приложением или сайтом, есть определенная цель. Часто на пути пользователя к его цели встает форма, которую необходимо заполнить. Форма до сих пор остается одним из наиболее важных для пользователя способов взаимодействия в сети и приложениях.
Как правило, формы считаются последним шагом на пути к тому, чтобы достичь своей цели. Однако формы — это только способ дойти до конца. Важно, чтобы пользователи могли заполнять их быстро и без каких либо затруднений.
У обычной формы есть пять компонентов:
Дополнительные компоненты форм:
Эта статья охватывает множество аспектов, которые относятся к структуре, полям ввода, текстовому содержимому ячеек, командным кнопкам и валидации.
Форма — это своеобразный разговор. И как любой разговор, она должна представлять собой логическое общение между двумя сторонами: пользователем и приложением.
Спрашивайте только то, что вам действительно необходимо. Каждое дополнительное поле ввода в форме может повлиять на показатели конверсии. Всегда продумывайте, почему вы просите пользователя предоставить ту или иную информацию и как вы будете её использовать.
Уточнение деталей должно быть логичным для пользователя, а не для приложения или базы данных. Спрашивать адрес прежде имени — как минимум необычно.
Схожую информацию лучше группировать в логические блоки или группы. Переход от одной группы вопросов к другой будет больше напоминать диалог. Если группировать схожие поля, то пользователю будет легче разобраться в информации, которую он должен заполнить.
Основная проблема организации полей формы в несколько колонок заключается в том, что скорее всего пользователи будут перемещаться по ней непоследовательно. Если колонки будут распределены по горизонтали, то пользователю придется просматривать форму зигзагообразно. Это может замедлить скорость восприятия и создать трудности во время заполнения формы. Но если в форме будет только одна колонка, то путь заполнения будет строго вертикальным, вниз по странице.
Поля ввода — это то, благодаря чему пользователи могут заполнить форму. Существуют различные виды полей, в зависимости от того, какая информация вам нужна: текстовые поля, поля для ввода паролей, выпадающий список, поля для галочек, поля с зависимой фиксацией, поле выбора даты и многие другие.
Золотое правило в дизайне форм — чем меньше, тем лучше. И это интуитивно понятно: чем меньше усилий со стороны пользователя, тем больше конверсия. Старайтесь уменьшать количество полей насколько это возможно. Так форма не будет казаться перегруженной, особенно если вам нужно много информации.
Но и перегибать палку не стоит: никому не понравится, если форма, состоящая из трех полей, вдруг превратится в допрос из 30 полей. Как правило, за один раз выводится от пяти до семи полей.
Старайтесь не включать необязательные поля в форму. Но если вы их используете, то по крайней мере отчетливо выделяйте, какие поля нельзя оставить незаполненными. Традиционно символ (*) используется для обязательных полей, а слово «необязательно» — для необязательных полей (лучше придерживаться этой практики в больших формах со множеством обязательных полей).
Если вы решите использовать звездочку для обозначения обязательных полей, то в конце формы приведите подсказку, которая объяснит, для чего служит символ, потому что не все понимают, что он означает.
Избегайте значений по умолчанию, если только не считаете, что большая часть ваших пользователей (например, 90%) выберут это значение. Особенно избегайте этого для обязательных полей. Почему? Потому что скорее всего так вы будете поощрять ошибки.
Люди сканируют онлайн-формы быстро, так что не стоит считать, что они будут останавливаться и разбирать каждый пункт. Таким образом пользователи могут пропустить то, что для вас особенно ценно.
Однако правильно настроенные значения по умолчанию помогают быстрее и точнее заполнять форму. Например, можно предварительно выбрать страну пользователя, основываясь на данных геолокации. И всё же с осторожностью пользуйтесь этой возможностью, потому что пользователи чаще всего оставляют предварительно установленные значения как есть.
Создание шаблона для заполнения поля — это техника, которая помогает пользователям, задает формат текста. Маска появляется, когда пользователь доходит до нужного поля, она форматирует текст автоматически по мере заполнения строчек. Так пользователям легче сконцентрироваться на требуемых данных и проще заметить ошибку.
В примере ниже скобки, пробелы и тире появляются автоматически — по мере ввода номера телефона и карты. Эта простая техника экономит время и усилия на ввод числовых данных.
У пользователей должна быть возможность переходить по полям и редактировать их с помощью одной клавиатуры. Пользователи, которые привыкли работать с клавиатурой, должны иметь возможность перемещаться по полям и редактировать их с помощью клавиши Tab. Подробные требования к взаимодействию с клавиатурой можно найти в руководстве W3C (World Wide Web Consortium) по шаблонам дизайна.
Автофокус на поле показывает пользователю, где начало ввода, и позволяет быстро начать заполнять форму. Должен быть четкий визуальный сигнал о том, что фокус сдвинулся. Это может быть изменение цвета, изменение яркости поля, сверкающая стрелка — всё что угодно.
Пользователи мобильных устройств очень ценят приложения, в которых клавиатура подстраивается под текст, необходимый для ввода. Эту возможность нужно внедрять во всех частях приложения, а не только под определенные задачи.
Так как все больше людей пользуются мобильными экранами, всё, что помогает пользователям избегать ручного набора текста, улучшает пользовательский опыт и помогает избежать ошибок. С помощью автозаполнения можно освободить пользователя от набора большого количества текста.
Например, заполнение поля адреса — зачастую самое проблемное место в любой регистрационной форме. Такой инструмент, как автозаполнение адреса, который с помощью определения геолокации предлагает довольно точные варианты местоположения пользователя, помогает вводить адрес нажатием нескольких клавиш.
Ясная подпись — один из основных способов сделать UI более доступным. Хорошая подпись объясняет пользователю, зачем существует каждое поле, полезна непосредственно во время работы с этим полем и остаётся видимой даже после того, как поле заполнено.
Подпись — это не подсказки. Старайтесь использовать сжатые, короткие, описательные подписи (состоящие из одного-двух слов), чтобы пользователи могли быстро просмотреть форму.
Предыдущие версии подписи регистрационной формы Amazon состояли из большого количества слов, из-за чего форма заполнялась очень медленно. Текущая версия гораздо лучше, а подписи короче.
В большинстве цифровых продуктов сегодня используется два способа капитализации начальных букв в словах:
Капитализация начальной буквы первого слова читается немного проще (а значит, и быстрее). Если подписи короткие, то разницей можно пренебречь («Полное Имя» и «Полное имя»), а если подпись длинная, то капитализация начальной буквы первого слова в предложении — предпочтительнее.
Никогда не пишите все слова заглавными буквами, иначе форму станет сложно читать и ещё сложнее просматривать, потому что не будет различия в высоте букв.
В 2006 году в своей статье Маттео Пенцо предположил, что форму легче заполнить, если подписи расположены сверху полей. Подписи, выравненные по верху, хороши, если вы хотите, чтобы ваши пользователи могли просмотреть форму максимально быстро.
Самый большой недостаток подписей, выравненных по левому краю, в том, что такие формы заполняются медленнее всего. Возможно, потому что визуально расстояние между подписью и полем ввода кажется большим. Чем короче подпись, тем дальше она будет располагаться от поля ввода текста.
Однако не всегда плохо, если пользователь заполняет форму медленно. Особенно если нужно внести конфиденциальную информацию. Если вы просите пользователя внести номер водительского удостоверения или номер социального страхования, то, возможно, стоит, наоборот, замедлить его, чтобы он смог сосредоточиться.
Получается, время, потраченное на чтение подписи к полям для внесения конфиденциальных данных, не имеет значения. Однако у подписей, выравненных по левому краю, есть ещё один недостаток: для их размещения на странице требуется больше пространства, а это может создать проблемы для пользователей мобильных устройств.
Главное преимущество подписей, выравненных по правому краю, — сильная визуальная связь между текстом и полем ввода. Предметы, расположенные рядом друг с другом, кажутся нам связанными. Этот принцип совсем не новый и происходит из закона близости в гештальт-психологии.
Если форма короткая, то выравненные по правому краю подписи могут демонстрировать очень хорошее время заполнения формы. Недостаток такого выравнивания в дискомфорте: нет четкого края с левой стороны, это не очень приятно выглядит и подписи сложнее читать.
Если вы хотите, чтобы пользователи могли быстро просмотреть форму, разместите подписи над полями ввода текста. Такой текст можно просмотреть бегло, потому что взгляд будет двигаться прямо к низу страницы. Однако если вам нужно, чтобы пользователи читали внимательно, подписи следует выровнять по левому краю — такое расположение замедлит читателя, а его взгляд будет двигаться зигзагообразно.
Если подпись расположена внутри поля ввода как замещающий текст, то она будет исчезать каждый раз, когда пользователь начинает заполнять поле, то есть с этого момента он её больше не увидит. Эти встроенные подписи хорошо работают, если форма состоит из двух полей (простая форма авторизации с полями имени пользователя и пароля), однако когда от пользователя требуется больше информации, то этот вариант не так хорош, как подпись, которую видно всегда.
Как только пользователь кликнет по полю ввода, подпись исчезнет, так что ему не удастся перепроверить, то ли он написал. Это увеличивает вероятность совершить ошибку. Еще одна проблема заключается в том, что пользователи могут принять встроенную подпись за предзаполненные данные и, следовательно, проигнорировать это поле (это подтверждается исследованием Nielsen Norman Group, в котором отслеживалось движение глаз пользователя).
Хорошим решением для замещающего текста может быть плавающая подпись. Замещающий текст будет показан по умолчанию, но как только пользователь тапнет по полю ввода и начнет вводить текст, подпись исчезнет и появится сверху поля.
Не стоит останавливаться исключительно на замещающем тексте; включайте в форму и подписи, потому что как только поле будет заполнено, замещающий текст исчезнет. Пользуйтесь плавающими подписями, чтобы пользователи могли проверить, правильное ли поле они заполнили.
Если нажать на командную кнопку, то должен запуститься какой-то процесс, например, отправка формы.
Недостаточное визуальное отличие первичных действий от вторичных действий может подвести. Чем меньше визуально выделяется второстепенное действие, тем меньше вероятность ошибки и более вероятен успешный исход пути пользователя.
Для сложных форм часто требуется кнопка «назад». Если она расположена сразу под полем ввода (как в примере слева ниже), пользователь может случайно на нее нажать. Так как кнопка «назад» — это второстепенное действие, сделайте так, чтобы доступ к ней был более сложным (на форме справа кнопки расположены верно).
Не называйте действия общими словами вроде «Отправить» или «Подтвердить», потому что из-за них и вся форма кажется ничем не примечательной. Вместо этого пишите на кнопке, какое действие будет выполнено, если на кнопку нажать, например, «Создать мой личный кабинет» или «Подписаться на еженедельную рассылку».
Следует избегать множества командных кнопок, потому что они могут отвлекать пользователя от конечной цели — отправки формы.
Не используйте кнопку «Сбросить». Она почти никогда не помогает пользователям, а, наоборот, приносит одни проблемы. Интернет стал был гораздо лучше, если бы везде удалили кнопки «Сбросить».
Кнопки должны выглядеть как кнопки: покажите, что по ним можно кликнуть или тапнуть.
Оформите кнопку «Отправить» так, чтобы после нажатия на неё было четко понятно, что форма обрабатывается. Таким образом он получает обратную связь и понимает, что не надо отправлять форму второй раз.
Ошибки валидации формы неизбежны, и это естественная часть ввода данных (потому что пользователи склонны совершать ошибки). Да, конечно, нужно минимизировать вероятность возникновения ошибки, но ошибки валидации никогда не исчезнут. Так что главный вопрос звучит так: «Что вы можете сделать, чтобы пользователю было проще исправить ошибки?».
Пользователи не любят узнавать о том, что допустили ошибку при заполнении формы, только после того, как попытаются отправить её. И особенно расстраиваются, когда, заполнив большую форму, нажимают кнопку «Отправить», а в ответ приходит большое количество сообщений об ошибке. Еще сильнее раздражает, если непонятно, какие ошибки допущены и где.
Валидация должна информировать пользователя о правильности текста как только тот ввел данные. Говорите с пользователем, рассказывайте ему, что он сделал неправильно. Встроенная валидация в режиме реального времени немедленно информирует пользователя о том, корректно ли введены данные. Этот подход позволяет быстрее исправлять любые ошибки, при этом пользователю не приходится доходить до кнопки «Отправить», чтобы увидеть есть ли они.
Однако не стоит делать так, чтобы валидировалось каждое нажатие клавиш, потому что чаще всего вы не можете проверить правильность данных, пока пользователь не закончит печатать ответ. Формы, которые валидируют данные во время набора текста, «наказывают» пользователя, как только он начинает вводить данные.
С другой стороны, формы, которые валидируют текст только после его ввода, не достаточно быстро предупреждают пользователя о допущенной ошибка.
В своей статье «Встроенная валидация в формах: создаем пользовательский опыт» Михаэль Коневич исследует различные виды стратегий валидации и предлагает гибридную стратегию, чтобы отвечать обоим требованиям: награда — сразу, наказание как можно позже.
Джеф Раскин однажды сказал: «Система должна относиться к тексту, введенному пользователем, как к неприкосновенному». Это абсолютно истинно и для форм. Очень здорово, когда вы начинаете заполнять форму, а затем случайно обновляете страницу, но данные остаются на своем месте.
Такие инструменты, как Garlic.js, помогают сохранить данные до тех пор, пока форма не отправлена. Таким образом пользователи не потеряют драгоценные данные, если случайно закроют вкладку или даже браузер.
В последнее время очень много шума вокруг диалоговых интерфейсов и чат-ботов. Несколько трендов возникли в результате этого феномена, в частности, один из них заключается в том, что люди проводят все больше времени в мессенджерах, чем в социальных сетях.
Было проведено множество экспериментов в отношении поддержки некоторых видов взаимодействий с помощью протоколируемого диалога, который имитирует общение в мессенджере. И даже такой устоявшийся элемент, как онлайн-форма, благодаря этому тренду претерпел изменения. Дизайнеры ищут способ трансформировать традиционные онлайн-формы в интерактивный диалоговый интерфейс.
Каждый интерфейс — это диалог. Традиционные формы (те, которые мы создаем каждый день) очень похожи на разговор. Единственная разница — то, как мы отвечаем на вопросы. Но что если бы создаваемые нами формы задавали вопросы в таком формате, который больше бы напоминал настоящий человеческий (не машинный) разговор?
Форма, которая показана ниже, создает диалоговый контекст, который способствует пониманию, но в то же время не опирается на традиционные элементы онлайн-форм (такие как подписи и поля ввода).
Диалоговая форма — это концепт с открытым исходным кодом, который быстро превращает любую форму на веб-странице в диалоговый интерфейс. Диалоговая форма заменяет все элементы ввода, управляет индивидуальными настройками и полностью контролирует внешний вид.
Этот проект показывает происходящий сейчас интересный сдвиг в видении пользовательского опыта и взаимодействия. Тенденция заключается в постепенном переходе к текстовому диалогу, который помогает пользователям достичь своих целей.
Пользователи, скорее всего, не хотят заполнять формы, так что лучше максимально упростить этот процесс. И даже самые небольшие изменения, такие как группирование схожих полей и указание на то, какая информация должна быть в том или ином поле, могут значительно улучшить опыт заполнения формы.
Проверка на простоту использования просто неотделима от дизайна формы. Очень часто достаточно протестировать форму на нескольких людях или даже просто попросить коллегу пройти через прототип, чтобы получить ценные отзывы о простоте использования формы.