このトピックは、meta で利用可能なフルスクリーンログイン/アカウント作成のスタイリングに関するフィードバックを追跡するためのものです。Discourse Design team experimentation topic
「いいね！」 7
プリロードされるのですか？
とても気に入りました。小さいサイズのモーダルは、一般的なインターネットユーザーのアプリでは時代遅れになっています。
「いいね！」 6
とても良い感じです！とても良いです。
フィードバックです：
- デスクトップ – 大画面でのソーシャルボタンの幅が広すぎて、威圧感があるかもしれません。しかし、縮小すると、左右のパネル間の視覚的な調和に労力がかかる可能性があります。
- デスクトップ – クローズアイコンの色は、アクセシビリティのためにコントラストを高める必要があるかもしれません。
スクリーンショット
- モバイル – とても細かい点です
。行の高さが少し高すぎるように見えます。
- モバイル – これは確信が持てません。画面のコントラストによります。ソーシャルボタンの境界線の色がほとんど見えないようです（モバイルで最初に気づいた点ですが、セカンドスクリーンでは問題なく見えます）。多すぎると圧倒的になることは理解しています。
primary-300を使用すると少し役立つかもしれません。
「いいね！」 6
詳細なフィードバックをありがとうございます！
「いいね！」 2
現時点では、実験とフィードバックを得るために、ここでメタにインストールされています。好評であれば、最終的にはコア製品でデフォルトにする予定です。
「いいね！」 4
上部に多くの空白があると思います。ログインボタンを表示するためにスクロールする必要があるのはなぜですか？ご覧のとおり、画面全体が画面に完全に収まります。
「いいね！」 2
iOSのSafariでは、「ようこそ」というテキストが途中で切れてしまいます。
上下にスワイプしても問題は解決しません。また、モーダルの「x」が絵文字の上にあることにも注意してください。
ここで最善の選択肢は、モーダルの全ページ表示に最大幅制限を設けることではないかと思います。ある幅を超えると、ビューポート全体を使用するのはもはや理にかなわない可能性が高いです。
「いいね！」 2
これは、認証ログインオプションが存在したときのモーダルでの左右レイアウトに固執しているためかもしれません。
代替ログインオプションをメインログインゾーンの下に移動することを検討します。
「いいね！」 2
フィードバックのほとんどを取り入れて、いくつか調整しました。確認して、どう思うか教えてください
@pmusaraj さんも確認してください。2列レイアウトから、Googleや他の多くのサイトのログインページと同様に、フルスクリーンの中心に1つのビューを統合するように変更しました。
「いいね！」 3
正直なところ、面白いアイデアですが、まだ完全に納得はしていません。これらの画面における白/青（ダークテーマの場合は黒/青）の分割に慣れてしまった私の「マッスルメモリー」かもしれませんが、それもDiscourseのアイデンティティの一部になったと思います。それを削除するのは大きな一歩のように感じます。
文脈を理解するために、並べてスクリーンショットを投稿します（インスタンスは異なりますが、変更のアイデアを伝えるだけです）。
さらに、サインアップモーダルでは、「アカウントを作成」のCTAがスクロールの後ろにあり、すぐに表示されません。
また、考慮すべき点として、全画面ログイン画面ではサイトのロゴが欠けています。ユーザーは通常、自分がどこにいるかを知っていますが、ロゴは、正しいサイト（メールアドレス、パスワード）に機密データを入力していることの重要な追加検証となります。古い画面では、モーダルフレームのおかげで、それが存在します。
「いいね！」 8
フィードバックです！
良いと思います。ただ、もう少しビジュアルアイデンティティが欠けているように感じますね。
. (編集：Penarと同じように、アイデンティティについて同じように感じます)
モバイル
ポートレートモードでは良い感じです。
ランドスケープモードではいくつか問題があります：
- ヘッダーが切れています。上にスクロールすることはできませんが、下にスクロールすることはできます。
ランドスケープモードについて。ほとんどの人は使用しませんが、発生する可能性があり、ユーザーエクスペリエンスは良くありません。ウェルカムメッセージの周りにブロックを浮動させるために、いくつかのCSSを調整できると思います。理想的ではありませんが、許容範囲です：
しかし、私にとって最も視覚的に魅力的なのは、資格情報とソーシャルボタンを半分に分割することです：
- 直接関係ありません。モバイルでは、最初の入力フィールドにフォーカスが当たり、キーボードが直接開きます。（どこでも同じ動作かはわかりません）
これは2つの理由でユーザーエクスペリエンスを悪化させると思います：
- 最初はページ全体が見えず、歓迎されている感じがしません。
- すべてのログインオプションが見えません。（特にソーシャルログインを使用するユーザーにとっては、毎回キーボードを閉じる必要があります）
デスクトップ
ほとんど良いですが、いくつか問題があります。
- 中程度の画面サイズでは良い感じです：
- 大きな画面では、よくわかりません。良い感じですが、すべてのソーシャルボタンが1行にあるのは便利に見えますが、珍しいです（小さなコンテンツが中央に配置され、その下に大きなコンテンツがあります）。間違っているわけではなく、大丈夫に見えます。以前のスタイルからの習慣かもしれませんが、注意が中央の1つの場所に集中するためです。
以前に行っていたことは実際には非常にエレガントでした。Penarが提案したように、最大幅があれば見栄えが良くなるはずです。大きな画面で2列表示され、その後自動的に折り返されるのを見ても構いません。
- レスポンシブの面では、最小の高さ以下になると、左側のパネルにスクロールバーが表示されます。実際のデバイスでテストできないので、これも発生するかどうかはわかりません。ユーザーにとっては、内部コンポーネントをスクロールするよりも、ページをスクロールする方が自然だと思います。
共通
ログインモーダルが開いているときにフォーラムのスクロールバーが表示され、操作できてしまいます。ユーザーは何も無いのに何かがあると思ってしまう可能性があります。モーダルスクロールバーも同時に表示されると、トリッキーになる可能性があります。
例
「いいね！」 4
さらなる調整と修正を本日追加しました
「いいね！」 4
古い:
新しい:
ソーシャルアカウントでのサインアップは、現在、狭い画面では非常に抑制されているように感じます。視覚的には良くなったと思いますが、これらのアクションが目立たなくなっています。
サイドバー…サインアップ時には、「Googleでサインアップ」に変更した方が良いかもしれません。また、一部が「サインイン」で、他が「ログイン」となっているのは紛らわしいです。
「いいね！」 4
これもソーシャルログインに関するガイドラインに違反することになります。過去に、Facebookボタンがガイドラインに準拠していないとして通知されたサイトがいくつかありました（「ログイン」ではなく「サインイン」と言う理由のいくつかは、ソーシャルログインの要件によるものかもしれませんが、これについては100％確信はありません）。
「いいね！」 4
フッターにある別の共有/フォローアイコンのようです。まったく良くなく、ほとんどのユーザーがこれらが実際にはログイン用であることに気づいていないと確信しています。
「いいね！」 1
それでは始めます。
モバイル
ポートレートモードでは、うまく表示されています！
考えられる改善点：
-
ソーシャルボタンが私の携帯電話（Android、FDH+、2220x1080）ではかなり小さく表示されます。比較のために、私の指の幅は約1.5cmですが、携帯電話の画面ではボタンの幅は0.5cmです。これはアクセシビリティの問題かもしれません。もう少し大きく（間隔も）してみることをお勧めします。
-
キーボードが表示されると、モーダルが上に移動します。これは、最近の変更 FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub に関連していると思われます。しかし、これはフルスクリーンログインモーダルには適用されないべきだと思います。レイアウトシフトが発生するのは好ましくありません。
-
横向きモードでは、おそらく手つかずの状態だと思います。この領域にも配慮が必要です。
デスクトップ
全体的にうまく表示されています！
このデザインには断然賛成です。復活させてくれてありがとうございます！
大画面
これには2つの懸念があります。
- これらの2つのパネルはまだ少し離れすぎている
- ソーシャルボタンが少し大きすぎる。
2について – より多くのブレークポイントを導入できます。
@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は、必要であればログインボタンとしてロゴのみを使用しても問題ありません。
メタをざっと見てみましたが、クールですね。ただ、私が主に利用しているフォーラムはSSOのみなので、あまり影響はないでしょう。
「いいね！」 1