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

Все интересные примеры, которые находил в процессе работы собрал в одном месте. По ходу описания результата буду ссылаться на конкретные решения.

Шаг 5.1.1
Адрес общества:
указать новый одной строкой или отметить на карте
Шапка и меню
Разделил меню на два. Главное на темном фоне представлено разделами с услугами сервиса. Второстепенное в правом верхнем меню содержит информационные страницы сервиса и кнопку входа в личный кабинет.
Пример аналогичного приема

При условии, что максимальный уровень вложенности страниц не будет превышать трех, можно отказаться от хлебный крошек, если вывести меню с третьим уровнем под главным. К примеру, сейчас на присланном прототипе видно, что фраза «Регистрация ООО» на небольшом участке втречается целых пять раз — https://gyazo.com/01886226be0d36afab8cb403fc220152. В предложенном варианте всего три.
Пример аналогичного приема

Так как логотипа пока нет, разместил логотип другой компании в виде заглушки.
Шаги формы
Шаги формы расположил горизонтально над формой.

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

Во-вторых, пользователю не нужно при заполнении формы держать в голове все шаги. Алгоритм его действий такой: перешел к первому шагу - заполняю форму - нажимаю «Далее» - перехожу ко второму шагу - и т.д. Номер шага важен только при навигации между шагами.

В-третьих, на узких экранах телефонов можно просто оставить цифры, а название текущего шага вывести заголовком.

В-четвертых, из-за боковой навигации все остальные элементы придется сильно уменьшать. Таблица, например, при выборе ФНС на последнем макете будет очень узкая и мелкая.

Похожий пример в шагами над формой

Еще нашел пример реализации шагов последовательно друг за другом. Мы по-моему этот вариант тоже обсуждали. но этот вариант мне показался менее удачным: сложно будет обозначить границы шага при такой большой форме, как на пятом шаге, например.
Выбор адреса
Выбор адреса сделал через группы кнопок. При выборе одного из вариантов контент ниже динамически меняется.
Элементы формы
При выборе размеров элементов формы руководствовался следующими примерами: Тиньков банк, Альфа банк, ВТБ24 и другими.
Результат шага
Перед кнопкой «Далее» на всех варинтах сделал блок с результатами шага. Таким образом пользователь видит, какие данные будут сохранены при переходе к следующему этапу.
Футер
Так как никакой информации для футера нет, скопировал текст с другого сайта.

Шаг 5.1.2
Адрес общества:
указать новый вручную
Подсказки под полями ввода
Оригинальную фразу «... выбрать из подсказки» заменил на «... выбрать из списка», так как не понятно, что такое «подсказка».

По возможности подсказки разместил в плейсхолдеры полей ввода и выбора.

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

Пример с похожим плейсхолдером в поле

От подсказок под полями оставил только по одному предложению.


Шаг 5.2
Адрес общества:
использовать адрес руководителя

Шаг 5.3
Адрес общества:
предоставить юридический адрес
Таблица
Для выбора адреса сделал привычную всем галочку.

Иконки с «Посмотреть на карте» и «Инфо» разместил контекстно к адресу регистрации и наименованию ФНС соответственно. Иначе, если их размещать отдельной колонкой непонятно, что откроется на карте - ФНС или адрес регистрации. Аналогичная путаница с информацией.

Чтобы не писать в шапке таблицы в трех последних колонках три раза «Стоимость» вынес это слово в заголовок, а в таблице оставил только «Месяц», «Квартал» и «Год». Обозначение «рубли» сделал мельче, чтобы не отвлекало, похожий пример на Альфа Банке.

При клике по «Посмотреть на карте» в таблице ниже таблицы открывается карта с выбранным адресом. По умолчанию эту карту, думаю, выводить не нужно.
Made on
Tilda