このフォームのUI / UXを改善するにはどうすればよいですか？
作成中のウェブサイトに次のフォームがあります。私はいくつかの異なるアプローチ/デザインを試しましたが、適合する適切なものを見つけることができないようです。これはかなり高解像度のスクリーンショットです-実際にはページをスクロールします。
誰かが彼らがうまくいくと思う提案/例がありますか？私はウィザードのアプローチを見てきましたが、それは常に多くのステップのように感じました。
DMホストされているバージョンへのリンクです。準備が整っていないため、投稿で公開したくありません。
一部のコンテキスト
アプリは他の人との共有タスクを作成するためのものです。誰かがタスクを作成し、他の人を招待すると、タスクを完了する順番が来たときに適切な人々に通知されます。
誰でも無料でタスクを作成できます。サインアップしていないユーザーは、この作成ページにアクセスして入力できます。これは、彼らが記入する必要がある唯一のものです。続行する場合は、保存ボタンをクリックしたときにアカウントを作成する必要があります。脅迫されたユーザーが記入する可能性がはるかに低く、保釈されるので、このページがクリーンでエキサイティングであることが不可欠です。
ユーザーがタスクを作成したら、さらにタスクを作成したくない限り、このページとのやり取りがほとんどまたはまったくないことを想像します。編集はまれです（このフォームは編集にも使用されます）。
対象読者
ご想像のとおり、これはさまざまな人々にアピールできます。ホームページで特定する一般的な使用例は次のとおりです。
ご家庭で：ごみを出すのは誰の番ですか？私たちは知っています！
あなたのシェアハウスでは：トイレは少し荒く見えますか？負荷の共有をお手伝いします。
仕事中：冷蔵庫を共有して毛皮が成長し始めましたか？交代してください。
企業、家族、シェアハウス、パートナー間で使用できます。子供が通知を受け取ったとしても、私は常にそれが製品と対話する大人であることを期待します。
デバイス
私はレスポンシブアプリとして作成しました。つまり、モバイルで動作します。多くのサイトと同様に、デスクトップよりもモバイルの方がトラフィックが多いとは限りません。同様の機能をWebサイトに反映するネイティブモバイルアプリも構築しています。
-更新-
多くの人が入力/ラベル、灰色で表示されているものなどについて話しています。明確にするために、UIの一部が無効になっています。[メールを追加]ボタンが無効になっています（入力に電子メールはありません）、フォームに入力されていないため、保存/送信ボタンも無効になっています。私のCTAプライマリボタンボタンはクリアで青です。
入力をフォーカスしたりテキストを追加したりすると、入力デザインによってプレースホルダー/ヒントがラベルに移動します。注釈付きのスクリーンショットをさらに追加します。
間違った角度から来ているのではないかと思います。フォームはあなた（またはユーザー）を興奮させるべきではありません。それは、仕事を迅速かつ苦痛なく完了するはずです。
退屈な作業が（通常は！）最善の場合もあります。
このフォームはモバイルでアクセスできるとおっしゃっていますが、それはわかりますか？
スクリーンショットから確認できるフォームの問題がいくつかありますが、その多くはアクセシビリティの問題です。
テキストフィールドにラベルを追加します。フォームのすべてのフィールドには明確なラベルが必要です。ラベルとしてフィールド内のヒントテキストを使用しました-これは使い勝手にとっては良くありません。
プレースホルダーテキストを削除します。フォームのフィールドでプレースホルダーテキストを使用する必要はありません。ユーザーがフィールドを空白のままにした方がはるかに良いエクスペリエンス。
説明のヘルプテキストを追加します。これは、アプリエクスペリエンスのコンテキスト全体では必要ない場合がありますが、現時点では、そのフィールドに何を追加するかわかりません。共有セクションに適切なヘルプテキストがあります。
色のコントラストを増やします。使用している灰色のテキストと要素の色のコントラスト比は2.81：1のみであり、これは特にモバイルで多くのユーザーに問題を引き起こします。 ＃7C6D6Dのように増やして、良好なコントラストを確保します（暖かみのあるヒントを追加します）。
すべてを1ページにまとめてレイアウトを簡素化します。これは、人々がすばやく簡単に完了したいタスクです。それがデザインの最前線になるはずです。入力に時間がかかる場合でも、ユーザーはフォームがどれほどきれいであるかを気にしません。
そして、良いUXのためにドリブルに依存しないでください。私もそれを閲覧するのは好きですが、UIデザインの多くはユーザーエクスペリエンスを低下させます。 :)
私が理解できない理由により、あなたがしたことはたくさん行われているので、これはおそらく不人気な意見になるだろうと言うことから始めましょう。私の不満は、5つのテキストフィールドと3つの多肢選択問題を約2800ピクセル作成したことです。
「実際にはページをスクロールします」
ユーザーインターフェイスの人々は、すべてのものが少なくとも1000ピクセルの完全な空である必要があり、ボタンは拳のサイズである必要があると確信しているので、10年間ですべてが8kモニターになり、引き続き無限にスクロールすることを誓います画面中央に小さなモノクロアイコンが表示されます。
電話とデスクトップで同じUIを作成する必要がある場合は、ソーセージの指を簡単に押すための大きなボタンを使用して、ここに私の提案を示します。
はい、あなたがやっていることは審美的か何かと考えられていますが、ユーザーが10番目のタスクを実行しているときまでには、保存することになっている時間を浪費しているだけです。ユーザーが一度に複数の質問を見て怖がるのを本当に心配している場合は、最初の数回はチュートリアルバージョンのページを提供するか、最後にチェックボックスを追加してください次回コンパクト」。カレンダー/リマインダーは自然な副次的なタスクであり、それ（およびそのメニュー）はそのように機能する必要があります。多くのデスクトップユーザーは、このウィンドウをフルスクリーンに維持せず、プラスサイズのマージンをさらに不快にします。そして、彼らが私のようなものであり、フォームをスクロールして、後でそれを再確認します...ああ。
ああ、そしてコントラストを上げます。白でライトグレーを表示するために、ユーザーがモニター/電話のコントラスト/明るさを調整する必要がある場合、失敗しました。グーグルがそうしているからといって、すべての配色をライトグレーからスーパーライトグレーのグラデーションでライトグレーの白にする必要があるわけではありません。 50％グレーから100％ブラックの範囲も利用できます。そして色も。
これはGoogleフォームで作成されたようです。
@Steve O'Connorの発言にほぼ同意しますが、さらに議論できることが2つあります。
ヒントテキストが役立つはずです。それを使用する場合は、代わりに例を電子メールフィールドに「例：[email protected]」のように記述してください。ヒントテキストは、フィールド自体がその中に何を書くべきかを正確に説明していない場合（電話番号を追加する場合など）に特に役立ちます。
説明フィールドは、1行または2行を超えることはできないという事実がわかっている場合、1行のフィールドにすぎません。ユーザーが説明として段落を書くことができる場合は、単一行フィールドを複数行フィールドに切り替えることをお勧めします。
それ以外の場合は、ユーザーが入力フィールドに入力するときにコントラストを確実に大きくする必要があり（一瞬、書いたメールはヒントテキストであると思いました）、この場合、ユーザーが自分のボックスでそれらを区切る必要はありません。それらはすべて、それぞれのヘッダーによって簡単に接続および分離できます。
最後に、私の経験では、フィールドの幅が長すぎるようです。一般的には、最大幅を超えないように設定し、画面サイズに合わせて完全に拡大しないようにします。
これまでのところ素晴らしい回答です！私はいくつかの点を追加したいと思います：
これらの小さな文法の詳細を確認してください：「新しいタスクを作成する」>「新しいタスクを作成する」の代わりに「Lets」>「Let's」の代わりに、または「新しいタスクを作成する」というのは大したことではありませんが、フォームをあまり真剣に扱わないユーザーにとっては、これらの小さな詳細が問題になる可能性があります。あなたのサイトが大きくなるにつれて、それらの間違いはより一般的になるかもしれません。
「通知方法」セクションで、選択されていないオプションが灰色になり、他のセクションでは異なるのはなぜですか？わかりません誰もがここで同意するが、選択したオプションを強調表示し、他のオプションをぼかしたり目立たなくしたりする機能が好きなら。フォームの他のセクションでこれが実装されていない理由がわかりません。混乱してしまいます。
時間選択のコントラスト 'at'の前置詞はボタンですか？コントラストが足りません。時間と「アット」ワードの両方がボタンのようです。
すべてを統合するか、構造を変更します：他の人が指摘したように、フォームはすぐに仕事を終わらせるはずですが、良いデザインもエキサイティングだと思います。すべてを別の構造にグループ化するか、一種の進行状況バーとフォームの下部にあるこれらの小さなドットで瞬時に読み込まれる3つの異なる画面のようにして、ユーザーが空のフィールドの数を確認できるようにすることができます。彼女は満たされるために去った。これを行うと、ユーザーの好みの良いものをデザインするのは容易ではありません。
ボタンの色を変更します：無効になっているようです
背景色と一般的なスタイル：別の色を選択します。もちろん、ウェブサイトのスタイルは、ロゴ、他のもののために選択された原色などと一致する必要があります。原則として、私は常にほとんどのデザインに3つのメインカラーを選択します。
ランダムなアイコンが変更される可能性がありますこれは個人的な好みですが、交差した矢印やサイコロなどの別のアイコンを選択します。
![enter image description here]()
がんばり続ける！あなたは良い道を進んでいます。常に有名なウェブサイトとそのレイアウトを研究してください。そのウェブサイトのデザイナーがなぜそれらの色、その構造、要素の順序などを選んだのか想像してみてください。
+1以前の答えが言ったこと、
また、選択の一貫性について少しメモを追加したいと思います。 「通知方法」セクションでは、選択されていない要素は灰色です。それが意図した効果である場合、それは他の選択項目とも一致するはずです。
私はこの種のデザインをよく目にしますが、率直に言ってそれは不愉快です。
簡単に片付けられると思います。これらは私のステップです：
- 各部分の間の空の灰色のスペースを取り除き、おそらく小さな線を残します。
- 上の質問以外の各質問を折りたたむと、質問だけが表示され、回答オプションは表示されません。
- 一番上の質問にデータが入力されたら、2番目の質問を開きます。 2つ目がいっぱいになったら、3つ目を開いて1つ目を折りたたみます。現在および以前の質問を開いておきます。
- 質問をクリックすると、常にその質問が展開または折りたたまれます。
マイクロコピー（特に質問のテキスト）を非常に明確にすることも非常に重要です。
免責事項：私はUX/UIデザイナーではありませんが、自分が何を望んでいるかを知っているユーザーです。
私が非常に重要だと思ういくつかのポイントを繰り返します。
- これはフォームです。ユーザーはフォームを嫌います
フォームが避けられない場合は、プロセスを合理化してフォームをできるだけ迅速かつ簡単にするために、あらゆることを行う必要があります。これは、ユーザーが何度も入力するフォームに特に当てはまります。
このことを考えると、複数のカードに分ける必要はないと思います。実際、私はすべてを1つのカードにカプセル化する必要があるとまで言っています。このフォームは非常に多くの不要なスペースを使用しているため、フォームをスクロールしなくてはならないので、1日に5回は入力する必要があります。
- 小さな改善
ささやかな提案で述べられたことの多くに同意します。上記の色のコントラストを増やし、ヒントテキストを変更します。