Форма международного адреса: как сохранить все детали

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

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

Сначала выберите страну доставки, затем состав полей

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

Представим поставщика тканей, который доставляет наборы образцов в Великобританию и Германию. Лея оформляет отправление для Common Thread Studio в Берлине. В её профиле сохранена Великобритания. Если форма сразу требует британский почтовый индекс, Лее придётся самой выяснять, почему адрес не подходит. Поместите поле «Страна доставки» перед зависимыми от него элементами, чтобы сначала можно было исправить контекст.

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

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

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

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

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

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

Оставьте место сведениям, которые не помещаются в поле улицы

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

В берлинском примере Лее нужно сохранить «Common Thread Studio» и «Hinterhof, 2. Etage» вместе с улицей и населённым пунктом. Вторая строка содержит сведения о дворе и этаже; сохраните исходную формулировку получателя, не переосмысляя местную нумерацию этажей. В примере улица указана как «Beispielstraße 18», а индекс и город — как «10115 Berlin».

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

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

Считайте результат поиска началом заполнения

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

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

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

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

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

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

Разделите три исхода. Если поиск завершился без совпадений: «Адрес не найден. Проверьте запрос или введите адрес вручную». Если запрос не выполнился: «Поиск адресов недоступен. Попробуйте ещё раз или введите адрес вручную». Для страны вне зоны доставки нужно отдельное сообщение о доступности услуги, описанное выше.

При переходе к ручному вводу сохраняйте страну и уже подтверждённые части адреса. Если поисковую фразу нельзя безопасно распределить по полям, оставьте её видимой как ориентир. Не считайте любую фразу названием улицы: Лея не должна обнаружить, что её индекс без объяснения попал в название компании.

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

При смене страны заранее определите, какие данные сохраняются

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

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

Достаточно короткого сообщения: «Страна изменена на Германию. Проверьте адрес ниже». Если смена действительно требует заменить введённые данные, заранее объясните, что исчезнет, и предложите возврат. Не открывайте модальное окно при каждом безобидном изменении: прерывание нужно при реальной потере данных или значимом изменении их смысла.

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

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

В блоке проверки перед продолжением нужны получатель, компания, этаж или квартира, улица, населённый пункт, индекс там, где он применяется, и страна в подходящем порядке. Теперь Лея может увидеть, сохранилась ли строка «Hinterhof, 2. Etage». Зелёная отметка возле улицы на этот вопрос не отвечает.

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

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

Проверьте сохранность сведений об этаже в прототипе Pixso

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

Соедините действие ручного ввода с переходом к заполнению деталей, а «Изменить страну» — с состоянием проверки. Во всех фреймах используйте одинаковые название студии и строку с этажом. Рядом с экраном смены страны добавьте примечание для разработки: какие скрытые значения нельзя отправлять. Правила адреса определяет проектируемое приложение; прототип показывает их последствия для пользователя.

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

Спроектируйте адресную форму в Pixso.