4月の4つの短いフロントエンドのヒント

矢印キーでリストオプションを切り替える

人々は、キーボードの矢印キーを使用したいですか?🤔
私は絶対に、はい!それは、私の人生をより簡単に作りました.だから私はそれを許可しないアプリを使用する場合、私は激怒する😤
私がpreplyを使うとき、それは起こりました.……私はちょうど言語を選択し、下矢印キーを押してフィルタをクリックします.そして、あなたはどう思いますか?
何も0反応!🤦‍♂️鍵は使えません.私のマウスを持って、それを使用する必要があります😒

どうやって作るの?NHLウェブアプリで見ましょう.すべてのチームのフィルタをクリックし、下矢印キーを押します.
アプリはアナハイムアヒルチームに切り替え!🤩 そして、私はもう一つの時間を押すことができます、そして、それは次のチーム(アリゾナCoyotes)に変わります.すべて!NOAマウスちょうど我々はキーボードを使用する🥳

role =" button "はユーザフレンドリーなUIには十分ではありません

どのようにキーボードを使用する必要があります私たちのボタンを改善する方法について考えてみましょう🤔
アプリの多くは、画面の読者を使用する人々のためにアクセス可能になります.それは素晴らしいです!しかし、何かが間違った.😐 私はボタンではないボタンに直面するようになった、すなわち私は使用されていない、それの代わりに役割=“ボタン”が使用されます.なぜ悪いのか?
人々は、UIと対話する0 %の可能性を持っています.🆘 インターフェイスを使用できません😩
ロールのボタンの相互作用に影響しません.そういうわけで、人々はキーボードを使ってこれらのボタンと対話することができません.それで、彼らが使用されるように、あなたのボタンをチェックしてください.あなたのUIを使用するチャンスを与えてください🙏
これをするな

<div role="button">Go</div>

代わりにこれを使用することができます

<button>Go</button>

最初のテキストフィールドにフォーカスを移動する

オープニングモードをデザインするとき、あなたは何をしますか?🤔
つの解決方法があります.第一は何もすることではない.たとえば、Grouponでの方法.
サインインボタンを押すと承認フォームが開きます.でも!フォーカスが動かないので、入力を始めるためにフィールド入力をクリックしなければなりません😒 私たちはちょうどタイプできません🤦‍♂️

私は、あなたがこれを作りたくないことを望みます☝️ あなたのために、別のアプローチがあります.Pinterestを開いてください.
ログインボタンを押すと認証フォームが開きます.フォーカスは最初のフィールド入力に移動します!この場合、ユーザーは追加のアクションなしでフォーム内に充填を開始できます.ジャストタイプ🥳

クッキーポリシーを受け入れるUXを改善するために焦点を設定する方法

ユーザーがウェブサイトでクッキー方針を受け入れなければならないとき、人気のパターンがあります.最善を尽くしましょう☝️
典型的なソリューションは、フレッドペリーのウェブサイトです.ユーザーは、クッキーポリシーとAcceptボタンのリンクでテキストを見ることができます.

我々は、この種のソリューションを使用するときは、リンクやボタンを押すためのマウス、タッチパッドまたは他のデバイスを使用する必要があります.それで、我々はより多くの行動をします😒
また、H＆Mのウェブサイトに別のソリューションがあります.クッキーポリシーのリンクにフォーカスを設定します.

この解決策の支柱は、我々がちょうどEnterキーを押すならば、ユーザーが方針に相談することができます.彼らが方針を受け入れたいとき、我々はタブを押して、キーを入力します.我々は、ハンドマウスを取るか、タッチパッドを使用していない🥳
この解決策の問題は、多くのユーザーが既にポリシーを読んで、再びそれを読みたくないです.彼らは、ちょうどそれを受け入れたいです😐
受信ボタンにフォーカスを設定することをお勧めします.この場合、すぐにEnterボタンを使用します.

そして、我々が方針を読む必要があるならば、我々はちょうどShift + TAB組合せを使っている関連を変えます、そして、我々はEnterキーを押すことによって方針を読んで行きます🙂
ピーエス
❤ 私のスポンサーに感謝します:ベンRinehart、Sergio Kagiema、ジェシーウィラード、Tanyaテン、Konstantinos Kapenekais、Spiridon Konofaos.
💪 より多くの無料のヒントdirectly to your inboxを得てください