小さすぎるボタン、遠すぎるリンク、密集したタップ領域——これらはすべてユーザーの操作コストを増やす。フィッツの法則に基づき、押しやすく・届きやすいUIを設計する原則。
UI原則タグ: クリック領域・到達しやすさ / UIデザイン原則 / フィッツの法則 / タッチターゲット / アクセシビリティ
記事一覧
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
小さすぎるボタン、遠すぎるリンク、密集したタップ領域——これらはすべてユーザーの操作コストを増やす。フィッツの法則に基づき、押しやすく・届きやすいUIを設計する原則。
モーダルを開いたら、フォーカスはどこへ行く？動的UIにおけるフォーカスの制御は、キーボードユーザーとスクリーンリーダーユーザーの「現在地」を守る設計原則。
フォームは離脱の最大の原因だ。不要な項目を削り、ラベルを明確にし、適切なキーボードを出し、エラーを事前に防ぐ——入力コストを最小化してコンバージョン率を守る原則。
ユーザーの視線は画面上でランダムに動くわけではありません。ZパターンやFパターンなどの自然な眼球運動を利用し、目的のアクションまで迷わずユーザーを「案内」する設計技術です。
「どんなUIにしたいか」より先に「ユーザーは何を達成したいか」「何ができないか」を定義する——目的と制約を起点にした設計が、機能する最小のUIを生み出す。
要素をなんとなく並べると、画面は「整っているようで整っていない」状態になる。カラム・ガター・マージンを定義し、すべての要素を見えない格子に揃えることで一貫性あるレイアウトを作るグリッドシステムの設計原則。
困ったユーザーを助けるのではなく、困らせないUIを作る。それでも迷ったとき、必要な瞬間に必要な助けを届けるコンテキスチュアル・ガイダンスの設計原則。
アイコンは「言語の壁を越える道標」であると同時に、「意味が伝わらなければただのノイズ」になる両刃の剣です。直感的な機能理解を助けるためのアイコン設計原則です。
機能があっても見つけられなければ存在しないのと同じ。ユーザーのメンタルモデルに合わせた情報の整理・構造化で「迷子ゼロ」を実現する設計原則。
画面に載せる情報量は「多ければ多いほど良い」でも「少なければ少ないほど良い」でもない。ユーザーの目的と認知能力に合わせて最適な密度を設計する原則です。
日本語で設計したUIをそのまま英語に翻訳したら、ボタンのテキストが溢れた——i18nを後付けにすると必ず壊れる。最初から多言語・多文化を前提に設計するUI原則。
ユーザーは必ず中断する。電話が来る、通知が来る、急用が入る。中断しても「続きから始められる」設計が、完了率を守り、ユーザーの信頼を保つ原則。