ユーザーがフォームにURLを追加できるようにするための最良の方法は何ですか？
現在、私たちのウェブアプリケーションは、まったく検証されていないテキストボックスを表示しています。テキストボックスの横に小さなアイコンがあり、ユーザーは新しいブラウザウィンドウでURLを開いて有効性を確認できます。これは、有効なURLを入力するようにユーザーを刺激する良い方法ではありません。他の検証が行われていないため、当社の顧客データベースには電子メールアドレスや「メモを参照」などの情報が満載です。私たちは本当にこの状況を改善したいのですが、私たちのチームにUXスペシャリストがいないため、URL入力を許可する適切な方法を見つけることができないようです。
シンプルなテキストボックスが最も使いやすいと思いますが、検証も最も難しいでしょう。たとえば、 http://www.google.com/ またはwww.google.comとしてgoogle.comのみのURLを入力できるようにします。プロトコルを分割し、ユーザーがドロップダウンリストでプロトコルを選択できるようにすると（デフォルトはhttp：//）、検証が簡単になり、URLを入力することもできます。ただし、その場合、ユーザーは技術用語に悩まされます。データベース内の現在のURLの約1％だけが適切にプロトコルのプレフィックスが付いており、これらはブラウザのアドレスバーからURLをコピーした結果であると考えられます。
検証に関しては、URL検証のための正規表現がたくさんあることは知っていますが、これらは厳密であるか、非常に緩いか、または数ページの長さ。
だから私の質問は：
- ユーザーがURLをできるだけ簡単に入力できるようにする（組み合わせの）コントロールは何ですか？
- すべての有効なURLが許可されるように、どのような種類の検証でも十分ですが、最も明らかな誤りはそうではありませんか？
あなたが本当にUXに関心があるなら-URLを自動的に検証します。例えば。ユーザーが「example.com」と入力した場合-「 http://example.com 」に変更します。
入力したばかりのURLに移動する機能を追加する場合は、下線を引いて青くしてください。ユーザーはこれがリンクであることを理解します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
なぜ正規表現による検証を怖がらせるのですか？既に入力されているデータベースで最も一般的なデータエントリ（ユーザーが実際にURLを入力する方法）を検索し、これらの入力フォームの上位5つのスクリプトを記述できます。
スクリプトはinput-urlを正しいものに展開し、フォーカスを失った後にフィールドに正しいものを表示する必要があります。
また、最近はfacebookなどの手法を使用して、正しく展開されたURLに接続し、プレビューを取得することもできます。このプレビューをテキストフィールドの横に表示できます。これにより、ユーザーが正しいURLを入力したことが保証されます。
Web-Design Ledgerの HTML5を使用してフォームを作成するための新しく改善された方法 をご覧ください。フィールドタイプをURL（<input type="url">）。これにより、サポートされているブラウザーでクライアント側の検証が行われます。ただし、このような検証にどのような正規表現が使用されているかはわかりません。このフィールドタイプを使用すると、iPhoneからブラウジングするときに、URLを入力しやすいキーボードがユーザーに表示されるという素晴らしい効果もあります。
もちろん、上記の情報は、ユーザーがHTML5互換のブラウザで閲覧している場合にのみ役立ちます。
リンクフィールドを保存して更新する前に、リンク先を指定して、URLの宛先にアクセスしてみてください。問題がなければ、先に進みます。
現場で例を挙げてみませんか？
ウェブサイト：[www.google.comの例]
人がクリックしてフィールドに焦点を合わせると、例は消えます。これは検証ではないことを理解していますが、ユーザーが入力する必要があるものの例を提供しています。
ユーザーによるURL入力を処理するには複数の方法があり、次のように入力を設計する際に考慮すべきいくつかの点があります。
- ほとんどの非技術ユーザーは、必ずしも「URL」という用語を理解しているとは限りません。 「リンク」、「ウェブリンク」、「ウェブアドレス」など、代わりにユーザーフレンドリーなさまざまな用語を試すことができます。
- URLをインラインで検証し、ユーザーの入力が形式と一致しない場合はすぐにユーザーに通知する必要があります。
- インラインで有効な入力の例を示すことができます-これはまさにプレースホルダーとヘルパーテキストの両方の目的です。
- ユーザーの入力を自動的に変更しないでください。これは多くの理由で悪い習慣です。少なくとも、ユーザーが何を達成しようとしているのかが分からないというのが、その理由です。多分彼らは積極的にアドレスをタイプしている、あるいは彼らはどこかからコピーしたものを貼り付けた。多分彼らはそれを貼り付けてから、その一部を変更しようとしています-しかし、あなたはこの段階ではわかりません、そしてそれを修正することはそれらを捨てるだけです。
- Webページのアドレスではなく「URL」だけを探している場合は、複数の有効なプロトコルがあります。
http、https、ftp、file、data、mailtoなど、これらすべてで有効ですケース。 - リンクがシステムによって解釈される方法の例を表示できるので、ユーザーはリンクをクリックして有効であることを確認できます。
- URLからユーザーに情報を表示して、ユーザーにそれが有効であることを確認させることができます。
- Webサイトのメタデータを削って、タイトル、説明、ファビコンなどを取得し、ユーザーに表示します。
- ユーザーにURLのスクリーンショット/プレビューを表示します。これを行うための多くの方法とツールがオンラインで利用可能です。ただし、ここで覚えておくべきことの1つは、一部のURLのコンテンツがユーザーログインによってブロックされる可能性があるため、プレビューにログインページが表示されるだけの可能性があることです。
例として、上記のすべてに適合する入力を次に示します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
Webでよく見られるもう1つの一般的な使用法は、許可されたプロトコルに対して複数の選択肢を持つ選択ボックスを提供し、その後、入力URLからプロトコルを自動的に取り除くことです。
