Инлайн-редактирование

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

Инлайн (от англ. inline — «в строке»). Отсюда и название подхода: переход в редактирование «прямо на месте».

Когда использовать

Используйте инлайн-редактирование на страницах с заполненными данными, которые пользователь меняет редко и выборочно. Например, в настройках сервиса.

Реквизиты организации в Экстерне

Настройки кабинета клиента Контура

Общие принципы

Инлайн-редактирование должно работать на всей форме сразу — не смешивайте инлайн-редактирование с обычным на одной странице.

В обычном состоянии поля инлайн-редактирования выглядят как список данных, которые по наведению курсора подсказывают пользователю, что перед ним редактируемые поля: интерфейс элементов редактирования появляется вокруг текста. Клик за пределы поля или нажатие на Enter сохраняют введённое значение.

Описание работы

Редактирование значения

Есть два варианта инлайн-редактирования:

простое — значение редактируется в одном контроле, например в поле ввода или селекте;
составное — значение объединяет несколько полей, поэтому для редактирования открывается модальное окно или сайдпейдж.

Простое инлайн-редактирование

По клику контрол переходит в состояние фокуса. Нажатие Enter или клик за пределами поля сохраняет введённое значение и возвращает контрол в исходное состояние.

Строка «Почта» со значением «antonov.p.n@mail.ru»: при наведении появляется поле в серой рамке, после клика — поле в фокусе. Значение меняют на «pavel@mail.ru», после клика или Enter оно снова показано текстом.

Если значение выбирают из списка, сохраняйте его сразу после выбора. Например, так работает редактирование через комбобокс:

Комбобокс «ОКВЭД» с введённым «63.12», курсор на пункте списка «63.12 Деятельность порталов». После клика по нему значение сразу показано текстом: «63.12 Деятельность порталов».

Если сохранение занимает больше 300 мс, покажите рядом со значением спиннер. Оставьте его на экране минимум на 1 секунду:

Строка «Почта»: поле в фокусе со значением «pavel@mail.ru», после клика или Enter — значение текстом со спиннером справа, затем без спиннера

Редактирование составных значений

Объедините связанные поля в одно значение, а их редактирование вынесите в отдельный слой. Так форма занимает меньше места, а пользователю проще увидеть и изменить связанные данные.

Фамилия, имя и отчество часто редактируют вместе, поэтому их можно вынести в отдельное модальное окно

Чтобы изменить номер телефона, потребуется ввести код из СМС. Это связанные поля, поэтому их можно объединить в один процесс из двух шагов

Наведение курсора

Вид курсора зависит от способа редактирования:

текстовый — для полей ввода;
указатель — для селектов и составных значений.

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

Внешний вид поля зависит от того, на какую часть строки пользователь навёл курсор.

При наведении на всю строку формы у поля ввода появляется обводка. При наведении на поле обводка становится темнее

При наведении на всю строку формы у составного значения появляется шеврон. При наведении на само значение появляется серая подложка

Прочерк пустого значения пропадает при переходе в редактирование

Валидация

Используйте валидацию по потере фокуса при работе с инлайн-редактированием. Подробнее — в гайде «Валидация».

Красная рамка появляется вокруг ошибочного значения и остаётся, пока пользователь не начнёт его исправлять. Сообщение об ошибке показывается в тултипе при наведении на поле.

Заблокированные контролы

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

Строка «Почта» с серым значением «antonov.p.n@mail.ru», курсор на иконке вопроса рядом. После клика по иконке открывается подсказка с крестиком: «Чтобы изменить почту, напишите в поддержку».

Контент и размер поля

Не обрезайте значение до одной строки, если при редактировании оно показывается целиком. Например, увеличивайте высоту многострочного поля по мере ввода.

Увеличивайте высоту многострочного поля по мере ввода

Не ограничивайте высоту составных значений

Тач-устройства

Инлайн-редактирование рассчитано на наведение курсора, поэтому на сенсорных экранах его сложнее обнаружить. Используйте этот подход только тогда, когда пользователь однозначно сможет понять, какие поля доступны для редактирования.

Экран Кабинета клиента Контура на телефоне: ФИО «Смирнова Татьяна Игоревна» с фото и строки «Телефон», «Почта», «Пароль» со значениями, у каждой строки иконка слева и шеврон справа

Не используйте инлайн-редактирование для больших форм на сенсорных экранах: пользователь не сможет понять, как работать со страницей.

Работа с клавиатурой

Сделайте инлайн-редактирование доступным с клавиатуры:

Tab сохраняет значение и переводит фокус на следующий элемент;
Esc отменяет изменения и снимает фокус;
Enter сохраняет значение и снимает фокус.

Если после Enter или Esc пользователь нажимает Tab, фокус переходит к элементу, следующему за отредактированным.

Строки «Почта» и «Телефон»: сначала в фокусе поле почты, после Enter оба значения показаны текстом, после Tab в фокусе поле «Телефон»

Если у заблокированного поля есть подсказка, фокус по Tab переходит на иконку. Если подсказки нет — значение пропускается:

Заблокированные строки «Почта» с иконкой вопроса и «ФИО» без иконки, ниже «Телефон». После Tab фокус на иконке и открыта подсказка «Чтобы изменить почту, напишите в поддержку», после второго Tab — сразу на поле «Телефон».