より良いテキストフィールドをデザインする‍

May 09 2022
クラッキングテキストフィールドを設計する際の15の考慮事項
イントロ私はテキストフィールドのマスターではありませんが、何年にもわたって彼らとかなりの仕事をしてきました。私は、理にかなっていることを論理的に考え、アクセス可能で使いやすいものを作成しようとしています。

イントロ

私はテキストフィールドのマスターではありませんが、何年にもわたって彼らとかなりの仕事をしてきました。私は、理にかなっていることを論理的に考え、アクセス可能で使いやすいものを作成しようとしています。

単純な権利のようです。そうですね、そうではありません。

私が話していることのほとんどは、デスクトップコンピューターまたはラップトップを使用している人々がいるWebサイトのテキストフィールドです。私は物事のモバイル側に焦点を当てていません。モバイルデバイスでホバーを試したことはありますか。

入りましょう。

内容—3部

テキストフィールドとは何ですか?
テキストフィールドの部分テキストフィールド
の状態

警告:このリストは完全なものではありませんが、確実に使用できるテキストフィールドを作成するために必要なもののほとんどを取得します。

テキストフィールドとは何ですか?

入力ボックスまたはテキストボックスとも呼ばれます。このコンテキストのテキストフィールドは、誰かが文字や数字を入力できるようにするWebサイトまたはアプリの要素またはセクションです。

数字を追加できるのはテキストフィールドですか?良い質問。

ラスベガスのエルビスチャペルで結婚式をオンラインで予約する場合、マイアミのUber Eatsに食べ物を注文する場合、またはメルボルンのスニーカーランドリーでスニーカーを掃除する場合は、オンラインで詳細を入力する必要があります。

テキストフィールドを使用します。

テキストフィールドのパーツ

1.コンテナ

コンテナはテキストフィールドの基盤です。

これで車輪を再発明することをわざわざしないでください。

  • 塗りつぶしの色をシンプル
    に保ちます。塗りつぶしの内側を白にすることをお勧めします。グーグルはそうではないと彼らの灰色のオプションで言います、私はアクセシビリティやフォントの色などの暗い灰色のオプションのファンではありません。人々はしばしばそれを白いページの背景から分離するのにうまくいく明るい灰色の塗りつぶしを持っています。
  • アウトラインまたは下線
    以下の私のお気に入りのように、アウトラインオプションが好きです。明確で簡単なタッチポイントを提供します。アンダースコア(マテリアルデザインオプションの1つ)はAndroidでは一般的ですが、タッチポイントがそれほど明確ではないため、私は大ファンではありません。
  • コンテナラインの太さ
    1pxコンテナラインは、デフォルトの状態で適切に機能します。フォーカス状態は、デフォルトより太いコンテナラインでうまく機能することに注意してください。
  • コンテナの線の色とアクセシビリティ
    Webaimにアクセス し、コンテナが置かれるページの背景をパンチします。コンテナラインに使用する色を追加します。下部の「グラフィカルオブジェクト」セクションを参照してください。それが失敗した場合は、それを袋に入れて、新しい色を試してください。ほとんどのサイトには、アクセスしやすいコンテナラインがありません。私はこれを数回台無しにしました。
  • コンテナの角の半径
    正方形のエッジまたは小さな角の半径が機能します。あなた次第ですが、これはあなたが必要とするかもしれない要素のいくつかでうまくいかないかもしれないので、大きなお尻の角の半径を避けてください。最大4pxのコーナー、半径はかなりうまく機能します。
  • コンテナタッチポイントエリア
    私は44pxの高さに行きます。私はウェブやモバイルにあまり行きません。最大48pxも同様に機能します。
  • コンテナの長さ
    一部は、長さに対して持っている領域で機能します。私は、その要素(モーダルなど)に適したコンテナーに加えて、コンテナー内で行われているものに適したコンテナーを用意するのが好きです。あなたの年齢を入れるために長い容器を持つことは理想的ではありません。もちろん、それでも使用できます。ただし、入力されているものに対応するコンテナの長さで作業してみてください。

ラベルはテキストフィールドのヘッダーです。

  • ラベル付きまたはラベルなし
    このラベルが不要な場合があります。原則として1つあると思います。
  • Should I go for a fancy Google Material style label?
    I would keep it simple and go for the label above the container. Material design does it with the placeholder as a label in the container and then it moves to break the line. For me, the out of the box material label is too small when in focus (see below). If the label copy is larger this would work much better for me.
  • Bold, semi-bold, medium
    This very much depends on you and your font. My current text labels are at 14px and medium (500) font-weight.
  • Label size, colour & accessibility
    Have the label at least 14px in size. Put it through Webaim and make sure the colour works.
  • Label length
    Keep it short, up to 4 words is good. There are no rules here, but it is a header that should clarify what the text field is about. Help/hint text can elaborate if needed.

The placeholder lets you know what should be put in the field.

  • Not to replace the label
    Some people use the placeholder instead of the label. It saves space, but the placeholder goes away when you tap on the text field. Material Design does it so that you tap on the text field and it moves to the label position breaking the line (as I noted above).
  • Placeholder size colour & accessibility
    Put it through Webaim and make sure the colour you have chosen is accessible. I go for a minimum of 16px in font size and in regular (400) font weight.

This is the text that you have typed in.

  • Darker shade
    Have this in a darker shade than your placeholder text. I use our darkest grey Hex #101828
  • Font size
    Font size will match the placeholder text size. I use 16px, regular (400) font-weight.

This is short form copy that gives useful info and context help for the text field.

  • Important information
    This is information that is crucial for the text field and is an addition to the label. It’s the label’s helpful sidekick. Help/hint text is essential information for the user to complete the task.
  • Text size & colour
    As with all of these elements put them through Webaim and make sure they’re accessible. Help hint text shouldn't be larger than the label text size to keep the hierarchy right. I have it at 14px and a lighter shade than the label with Hex # 475467.
  • Error text & disabled sections
    I will show this in the later sections. The help/hint text has a triple use.
    - As help/hint text.
    - As an error text (normally in red) when something is wrong or has not been filled in.
    When a text field is disabled, I use the help/hint text to explain why.

Non-essential (but useful) info related to the text field goes into the tooltip. People shouldn't need to read a tooltip to complete their task.

  • Size
    There can be several sentences in a tooltip. There’s no rule here. My rule is to keep it to 2–3 sentences.
  • Non-essential (but important)
    This is information that’s not essential to completing the task. However, it can elaborate on what’s already there.
  • Tooltip icon
    The icon could be information or a question mark icon. No hard rules here but these seem commonplace and widely understood.
  • Icon colour
    Make the icon dark enough to be accessible. Again go to Webaim and put your colour through.
  • Tooltip colour
    I go black tooltip with white copy. This very much depends on your website colour and dark mode etc. The main thing here is to make it clear to see over the site behind it. So a dark mode site might have a white tooltip and vice versa for a light site with a dark tooltip.
  • Copy size
    I’d go for a minimum size of 14px in size. At least in regular 400 font.
  • Location of the icon for the tooltip
    I put it after the label. Works well for me.
  • Hover or tap
    The tooltip needs to be easily accessible. It should be that you hover and see the tooltip. There are people who have it that you tap the icon and see the tooltip. Both work but the hover is less work.

This is an icon at the start of the text field.

  • 必須ではありませんが便利です
    これはまれな獣であり、電子メールアドレスの封筒やクレジットカードの詳細を追加するための銀行カード(上記のような)などの場合に役立ちます。これについてあまり心配する必要はありません。テキストフィールドに必須ではない要素があるのはいいことだと思います。

これは、テキストフィールドの最後にあるアイコンです。

  • 先頭のアイコンよりも便利
    テキストフィールド内のこの領域は、先頭のアイコン領域よりも使いやすい領域です。これには、本当に便利で重要なアイコンがいくつかあります。上記のようなテキストの表示と非表示は良い例です。
  • その他の例
    カレンダー1(以下を参照)は、日付を追加するためのちょっとした説明アイコンです。同じ場所に音声録音マイクアイコンを配置することもできます。

これは、入力されるテキスト/数字の前にある要素です。

  • 通貨
    通貨記号が最初に追加されます。テキストフィールドに数字が追加されると、ドル記号の後に数字が始まります。
  • 代替オプション
    テキストフィールドの外にプレフィックスアイコンを追加することもできます(以下を参照)。これも同様に機能しますが、私の好みではありません。
  • テキストフィールドの終わり
    パーセンテージまたは重量をポンドで追加する必要がある場合は、最初に数値を入力し、次に関連する要素を追加する必要があります。
  • 代替オプション
    テキストフィールドの外に十分なアイコンを追加することもできます。正直なところ、私はこれを見たことがありませんが、それは可能です。

これは、テキストフィールドで制限された数の文字が許可されている場合を示します。

  • バリエーション
    これを行うにはいくつかの方法があります。それはうまく機能するゼロまでカウントダウンすることができます。許可された200文字のうち122文字を使用したと言って、許可された合計数を減らして表示するものもあります(例:122/200)。

12.ホバー状態

ホバー状態は、ユーザーがインタラクティブであることをユーザーに示します。

  • いくつかのオプション
    テキストフィールドにカーソルを合わせるには、いくつかのオプションがあります。カーソルが変化して、テキストフィールドがクリック可能で有効であることを示します。テキストフィールドのコンテナは、非常に明るい色合いに変わる可能性があります。コンテナは暗くなるか、厚くなる可能性があります(上記の私の極端なバージョンを参照)。

テキストフィールドをタップすると、フォーカスされます。

  • ここにいくつかのオプション
    私が好きなのは、より大胆で暗いコンテナラインです。一部の政府のWebサイトでは、コンテナラインが暗く太くなっています。また、コンテナラインに大胆で明るい外側のラインを追加します。以下は、gov.ukWebサイトに焦点を当てたテキストフィールドがどのように見えるかです。

テキストフィールドにエラーがある場合は、ユーザーに明確にする必要があります。

  • 赤は色です
    赤は私が使用する標準色です。すべての文化について話すことはできませんが、エラーの一般的な色は赤です。
  • オプション
    ラベルを赤にする人もいれば、コンテナ行を赤にする人もいれば、ヘルプテキストを赤にする人もいます。3つすべてを組み合わせたものもあります。私はコンテナラインに行き、赤のテキストを助けます(上の画像のように)。
  • ヘルプテキストヘルプテキスト
    に、エラーがあり、それを解決するために何ができるかが記載されていることが非常に重要です。たとえば、必須フィールドの場合は、エラーヘルプテキストにその旨を記載する必要があります。
  • ヘルプテキストのアイコン
    ユーザーに赤がはっきりと表示されない場合は、エラーアイコンを表示して、エラーがあることを明確に示すことが賢明です。以下を参照してください。

テキストフィールドが無効になっている理由について、人々を常に把握しておくと便利です。

  • カーソルの変更カーソル
    にカーソルを合わせると、この小さな種類のデジタルのエントリなしの記号が表示される場合があります。これは、何でもできることを示す良い兆候です。ただし、その理由についてはあまり説明されていません。
  • 人々をもう少し助けるためのオプション
    無効にされたテキストフィールドを見たときに人々を助けるためにできることがいくつかあります。テキストフィールドにカーソルを合わせたときにツールチップを表示します。これは、何が起こっているのかを説明するのに役立ちます。または、事前に表示されるヘルプコピーを追加することもできます。ツールチップは前もって表示されないため、欠点となる可能性があります。ただし、役立つ可能性のあるツールチップに詳細情報を含めることができます。

私はしばらくの間テキストフィールドを過剰摂取したと思うので、これは私がサインオフすることです。テキストフィールドは機能的な要素であるため、あまり気にしないでください。マテリアルデザインは凝ったものになり、途中で使いやすさが失われました。

読んでくれてありがとう

50回拍手してくださいこの記事を楽しんだら
私に従ってください、Guy Ligertwood 、私の執筆に追いつくために。テキストフィールドなどのエキサイティングなものを見逃したくないでしょう

私の20の最も人気のある物語

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved