Эта тема предназначена для сбора отзывов о стиле полноэкранного входа/создания учетной записи, доступном на meta по адресу: Discourse Design team experimentation topic
7 лайков
Оно будет предзагружено?
Мне это очень нравится. Модальные окна небольшого размера уже давно считаются устаревшими в приложениях для обычных пользователей интернета.
6 лайков
Это ощущается просто отлично! Очень приятно. 
Несколько замечаний:
- Десктоп — ширина кнопок соцсетей на больших экранах может быть слишком большой и навязчивой. Однако, если их уменьшить, потребуется больше усилий для гармонизации визуального стиля между левой и правой панелями.
- Десктоп — цвет иконки закрытия, возможно, требует большего контраста для доступности.
Скриншоты
- Мобильные устройства — очень придирчиво
. Похоже, межстрочный интервал может быть немного слишком большим.
- Мобильные устройства — в этом пункте я не уверен. Всё зависит от контрастности экрана. Цвет границы кнопки соцсети кажется едва заметным (первое, что я заметил на своём мобильном, но на втором экране выглядит нормально). Понимаю, если это будет слишком много; наверняка это будет ошеломляюще. Возможно, использование
primary-300могло бы немного помочь.
6 лайков
Спасибо за такую подробную обратную связь!
2 лайка
Пока оно установлено здесь, на Meta, в рамках экспериментов и сбора обратной связи. Если всё будет встречено хорошо, мы в конечном итоге сделаем это настройкой по умолчанию в основном продукте.
4 лайка
Кажется, в верхней части слишком много свободного пространства. Почему мне приходится прокручивать страницу, чтобы увидеть кнопку входа? Как видно из видео, весь текст идеально помещается на экране.
2 лайка
В Safari на iOS текст «Welcome» обрезается.
Свайп вверх или вниз также не решает проблему. Обратите внимание, что крестик закрытия модального окна расположен выше эмодзи.
Мне интересно, не будет ли лучшим решением здесь установить ограничение максимальной ширины для полноэкранного отображения модального окна. За пределами определённой ширины, скорее всего, уже нет смысла использовать весь виджет экрана.
2 лайка
Знаете, я думаю, что это может быть связано с тем, что я придерживаюсь макета слева|справа, который был в модальном окне, когда присутствовали варианты входа в систему.
Я изучу возможность перемещения альтернативных вариантов входа в основную зону входа.
2 лайка
Я внес несколько правок, учтя большую часть этих замечаний. Посмотрите, пожалуйста, и дайте знать, что вы думаете
@pmusaraj, посмотрите тоже. Я отказался от макета с двумя колонками и объединил всё в один вид по центру на весь экран, как у Google и многих других страниц входа.
3 лайка
Это интересная идея, но, честно говоря, я не до конца убеждён в ней. Возможно, здесь играет роль мышечная память: я точно привык к разделению экранов на белый/синий (или чёрный/синий для тёмных тем), но для меня это также стало частью идентичности Discourse. Убрать это — большой шаг.
Давайте я опубликую несколько скриншотов рядом, это поможет понять контекст (это разные экземпляры, но они просто иллюстрируют суть изменений).
Кроме того, в модальном окне регистрации кнопка призыва к действию (CTA) «Создать учётную запись» скрыта за прокруткой — вы не видите её сразу.
Также стоит подумать о следующем: на всех полноэкранных экранах входа логотип сайта отсутствует. Пользователи обычно понимают, где находятся, но логотип служит важной дополнительной проверкой того, что вы действительно вводите конфиденциальные данные (адрес электронной почты, пароль) на правильном сайте. В старых экранах он присутствовал, хотя бы благодаря рамке модального окна.
8 лайков
Вот обратная связь!
Выглядит хорошо. Хотя, кажется, не хватает визуальной идентичности. 
. (РЕДАКТИРОВАНО: У меня абсолютно такое же ощущение, как и у Penar, насчёт идентичности)
Мобильная версия
В портретном режиме выглядит хорошо.
Некоторые проблемы в ландшафтном режиме:
- Заголовок обрезан. Нельзя прокрутить вверх, но можно вниз.
Скриншот
Это происходит и в портретном режиме. Клавиатура сдвигает контент вверх на странице входа. На странице регистрации этого не происходит.
Что касается ландшафтного режима. Большинство людей его не используют, но такое может случиться, и это не лучший пользовательский опыт. Думаю, можно немного поправить CSS, чтобы блоки располагались вокруг приветственного сообщения. Не идеально, но допустимо:
Однако для меня наиболее эстетичным выглядит разделение полей ввода данных и социальных кнопок пополам:
- Не совсем по теме. На мобильном устройстве первое поле ввода сразу получает фокус, и клавиатура открывается мгновенно. (Не знаю, так ли это везде)
Думаю, это ухудшает пользовательский опыт по двум причинам:- Сначала не видно всю страницу, и это не создаёт welcoming-эффекта.
- Не видны все варианты входа. (особенно для пользователей, использующих вход через соцсети — приходится каждый раз закрывать клавиатуру)
Десктоп
В целом выглядит хорошо, но есть некоторые проблемы.
- На экранах среднего размера выглядит хорошо:
- На больших экранах не уверен. Выглядит неплохо; однако, хотя размещение всех кнопок соцсетей в одну строку кажется удобным, это выглядит непривычно (маленький контент по центру, а под ним — большой). Это не ошибка, и выглядит нормально — возможно, это привычка от предыдущего стиля, когда внимание сфокусировано на одном центральном месте.
То, что вы делали раньше, было довольно элегантно, и, как предложил Penar, достаточно установить max-width, чтобы это выглядело хорошо. Я не против увидеть две колонки на больших экранах, которые автоматически переносились бы вниз при достижении определённого предела.
- С точки зрения адаптивности — при определённой минимальной высоте появляется полосу прокрутки на левой панели. Не могу проверить на реальном устройстве, происходит ли это там тоже. Думаю, для пользователя было бы естественнее прокручивать саму страницу, а не внутренний компонент.
Общее
- Полоса прокрутки форума видна, когда открыто модальное окно входа, и можно с ней взаимодействовать. Это может запутать пользователя, заставив думать, что что-то есть, хотя на самом деле ничего нет. Это может быть особенно раздражающим, если одновременно появляется и полоса прокрутки модального окна.
Пример
4 лайка
Сегодня добавили ещё одну порцию доработок и настроек
4 лайка
Старый вариант:
Новый вариант:
Кнопка «Зарегистрироваться через социальный аккаунт» на узком экране выглядит крайне сжатой. Согласен, визуально это стало лучше, но теперь эти действия не выделяются.
Боковая панель… при регистрации, вероятно, стоит изменить текст на «Зарегистрироваться через Google». Также сбивает с толку то, что где-то написано «Войти», а где-то — «Авторизоваться».
4 лайка
Это также противоречило бы их правилам для социального входа. В прошлом мы уведомляли несколько сайтов о несоответствующих кнопках Facebook (требования к социальному входу также могут быть причиной того, что некоторые пишут «Войти» вместо «Зарегистрироваться», хотя я не уверен на 100% в этом).
4 лайка
Похоже, это ещё иконки «поделиться/подписаться» в футере. Совершенно не годится, и я абсолютно уверен, что большинство пользователей не понимают, что они на самом деле предназначены для входа в систему.
1 лайк
Погнали.
Мобильная версия
- В портретном режиме выглядит отлично!
Возможные улучшения:- Кнопки социальных сетей кажутся довольно маленькими на моем телефоне (Android, FDH+, 2220x1080). Для сравнения: ширина моего пальца ~1,5 см, а ширина кнопки на экране телефона — 0,5 см. Это может быть проблемой доступности. Я бы попробовал сделать их немного больше (включая отступы).
- Кнопки социальных сетей кажутся довольно маленькими на моем телефоне (Android, FDH+, 2220x1080). Для сравнения: ширина моего пальца ~1,5 см, а ширина кнопки на экране телефона — 0,5 см. Это может быть проблемой доступности. Я бы попробовал сделать их немного больше (включая отступы).
-
Когда клавиатура видна, модальное окно сдвигается вверх. Думаю, это связано с этим недавним изменением: FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub. Однако я не считаю, что это должно применяться к полноэкранному модальному окну входа. Сдвиг макета — это не очень хорошо.
-
В ландшафтном режиме, полагаю, ничего не менялось. Здесь нужна доработка.
Десктоп
В целом выглядит отлично!
Я определенно поддерживаю этот дизайн. Спасибо, что вернули его!
Большой экран
У меня есть два замечания:
- Эти две панели всё ещё находятся немного слишком далеко друг от друга.
- Кнопки социальных сетей немного великоваты.
Насчёт пункта 2. — можно добавить больше контрольных точек (breakpoints):
@media screen and (min-width: 1536px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 70%;
}
}
@media screen and (min-width: 1920px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 60%;
}
}
@media screen and (min-width: 2560px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 50%;
}
}
При разрешении 2K это выглядит так:
Насчёт пункта 1. — не уверен. Вот возможная альтернатива. Преимущества: вид пользователя всегда центрирован, при этом сохраняется визуальная идентичность. Ширину синей панели можно настроить. Это не точное ощущение, но довольно близко.
Примечание: При уменьшенной ширине кнопок меня вполне устраивает текущий дизайн. Я делюсь этим предложением на случай, если у вас есть идеи в этом направлении. Мне оно нравится.
Несколько замечаний по CSS:
- У левой панели есть
padding-topв3rem— это кажется излишним и приводит к тому, что панель не центрирована относительно правой панели.
.login-left-side {
padding: 0 3rem 0 3rem
}
- Форма регистрации не отцентрирована по вертикали. Используется этот CSS. Есть ли причина?
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
Центрирование выглядит хорошо.
- Контраст цвета кнопки закрытия, возможно, нужно настроить для обеспечения доступности. Я бы использовал
--primary-very-high.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
Это всё с моей стороны!
3 лайка
Вот причина. Я думаю, что последний вариант для социального входа на маленьких экранах — это просто показ логотипа, но мне нужно это проверить или провести дополнительное исследование.
2 лайка
Теперь я не могу перестать это замечать, спасибо, что обратили на это внимание!
Хм…
Похоже, что руководства по стилю для кнопки я нашел только для Facebook и Google.
Facebook требует использовать прямоугольную кнопку с надписью «Войти через Facebook». Также они не хотят, чтобы у вас было много вариантов аутентификации через сервисы, отличные от Facebook.
Google допускает использование только их логотипа в качестве кнопки входа, если это необходимо.
Кинул быстрый взгляд сюда на Meta, выглядит круто. На меня это особо не повлияет, так как на основном форуме, где я сижу, только SSO.
1 лайк