- クリック可能エリアは余裕をもって
小さなテキストだけがクリック可能、だとクリックしにくいですよね（特にiPhoneなんかで）。テキストの周りのエリアは余裕をもってクリック可能にしておきましょう。
↑ 右の例のように、クリック可能エリア（青い部分）を設定しましょう。
- ラベルテキストが上に行き過ぎないように
とっても細かいですがよく見るのがうまいことセンタリングされていないボタン上のテキスト。
↑ ちょっとテキストが上すぎ。
微調整しながらバランスよく配置しましょう。
- 濃淡をつけて視線を誘導
文字の濃淡をつけることでどこを見てほしいかを示すようにしましょう。
↑ こんな感じに。
- 色も使って視線を誘導
目立つ色でユーザーを誘導するのも大事ですね。意識的に使えるようにしましょう。色の選び方が肝心です。
↑ これはわかりやすい例ですね。
- 関連する情報はまとめましょう
スペーシングをうまく使って関連する情報をまとめましょう。
↑ これよりも・・・。
↑ これ。
- Letter Spacingも意識しよう
特に英文ですが、Letter Spacingを意識しましょうね。つまり過ぎていたり、広がりすぎていたりするテキストはかっこ悪いですよ。
- 入力フォームに自動的にフォーカスする
ページを開いたらすぐに検索してもらいたい、なんてときには自動でフォーカスがあたるようにしておきましょう。JavaScriptで実現できますよ。
- 入力フォームをちょっとだけかっこよく
最近入力フォームをかっこよくするのが流行ですね。Gmailなんかもそうですし。フォーカスがあたったらきっちり変化したことを示しましょう。
- マウスオーバーでメニュー表示
アプリによってはたくさんの機能を実現しつつ、インターフェースはシンプルにしたいというときがありますよね。そうしたときはマウスオーバーで表示されるメニューを設けるのも手です。
↑ こんな感じのやつ。
CSSで実現できますよ。
- 確認画面をカスタマイズする
確認画面を簡単に作ろうとすると「YES」「NO」「キャンセル」が出てきてしまいますが、場合によっては「保存する」「保存しない」といったように具体的なアクションを表示したほうがわかりやすい場合もあります。可能なら検討してみましょう。
より詳しくは原文をどうぞ。詳しい実装方法などが紹介されていますよ。
» 10 Useful Techniques To Improve Your User Interface Designs | How-To | Smashing Magazine
0 件のコメント:
コメントを投稿