- 2008-12-16 (Tue) 13:24
- 開発ツール・技術
これは良いまとめ。勢いでメモ的にエントリーしておきます。来年は4半期に一度はアプリ作りたいので参考にしよっと。
では早速。
- クリック可能エリアは余裕をもって
- ラベルテキストが上に行き過ぎないように
- 濃淡をつけて視線を誘導
- 色も使って視線を誘導
- 関連する情報はまとめましょう
- Letter Spacingも意識しよう
- 入力フォームに自動的にフォーカスする
- 入力フォームをちょっとだけかっこよく
- マウスオーバーでメニュー表示
- 確認画面をカスタマイズする
小さなテキストだけがクリック可能、だとクリックしにくいですよね（特にiPhoneなんかで）。テキストの周りのエリアは余裕をもってクリック可能にしておきましょう。
↑ 右の例のように、クリック可能エリア（青い部分）を設定しましょう。
とっても細かいですがよく見るのがうまいことセンタリングされていないボタン上のテキスト。
↑ ちょっとテキストが上すぎ。
微調整しながらバランスよく配置しましょう。
文字の濃淡をつけることでどこを見てほしいかを示すようにしましょう。
↑ こんな感じに。
目立つ色でユーザーを誘導するのも大事ですね。意識的に使えるようにしましょう。色の選び方が肝心です。
↑ これはわかりやすい例ですね。
スペーシングをうまく使って関連する情報をまとめましょう。
↑ これよりも・・・。
↑ これ。
特に英文ですが、Letter Spacingを意識しましょうね。つまり過ぎていたり、広がりすぎていたりするテキストはかっこ悪いですよ。
ページを開いたらすぐに検索してもらいたい、なんてときには自動でフォーカスがあたるようにしておきましょう。JavaScriptで実現できますよ。
最近入力フォームをかっこよくするのが流行ですね。Gmailなんかもそうですし。フォーカスがあたったらきっちり変化したことを示しましょう。
アプリによってはたくさんの機能を実現しつつ、インターフェースはシンプルにしたいというときがありますよね。そうしたときはマウスオーバーで表示されるメニューを設けるのも手です。
↑ こんな感じのやつ。
CSSで実現できますよ。
確認画面を簡単に作ろうとすると「YES」「NO」「キャンセル」が出てきてしまいますが、場合によっては「保存する」「保存しない」といったように具体的なアクションを表示したほうがわかりやすい場合もあります。可能なら検討してみましょう。
より詳しくは原文をどうぞ。詳しい実装方法などが紹介されていますよ。
» 10 Useful Techniques To Improve Your User Interface Designs | How-To | Smashing Magazine
■ 関連記事
- あるデザイナーが一つのロゴを作り上げるまでのデザインプロセス | POP*POP
- デザイン・ポリシーに関して参考にしている名言いくつか | IDEA*IDEA
- Googleにおけるユーザーエクスペリエンスのデザインガイドライン10か条 | IDEA*IDEA
こちらもあわせてどうぞ
- Newer: 【百式企画塾】 2009年のベストセラータイトルを考える！
- Older: 【東京ブック】 プレゼンはキャラクターで勝負
Comments:0
Trackbacks:1
- Trackback URL for this entry
- http://www.ideaxidea.com/archives/2008/12/10_10.html/trackback
- Listed below are links to weblogs that reference
- インターフェースデザインで気をつけるべき10のこと from IDEA*IDEA ～ 百式管理人のライフハックブログ
- pingback from ITキヲスク | WEBデザイナーなら一度は読んでおきたい、デザインの基礎的な知識と作法 09-07-09 (Thu) 13:29
-
[...] インターフェースデザインで気をつけるべき10のこと [...]
