Сделать сообщение «Email уже занят» более заметным на экранах меньшего размера

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

Наше путешествие начинается с оптимистичной ноты.

Всё идёт как по маслу, и мы чувствуем себя прекрасно,

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

Что ж, посмотрите на это с положительной стороны. У вас всё ещё есть учётная запись.

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

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

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

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

Или, возможно:

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

Не могли бы вы добавить немного подробностей об используемом вами устройстве (включая размер экрана), а также указать, применяете ли вы увеличение масштаба или размера текста?

Вот безупречный скриншот в разрешении 1920x1080, сделанный на Chromebook с масштабом CTRL+0

P.S., на https://community.opencellid.org/ при нажатии «Войти через GitHub» возникает ошибка 404. И странно: из трёх кнопок сбоку одна — «Войти», а две другие — «Зарегистрироваться».