参考になる！３つのユーザーインターフェイス改善策。（直感的に理解できる編）

Tweet

前回に引き続き、より良いユーザーインターフェイスを構築するために、いくつもの提言を行っているサイト「GoodUI」から、直感的に理解できるUIを作るための改善策を３つ抜粋してご紹介いたします！

一貫性を持たせユーザーに学ばせない

UIをデザインする上で一貫性に努める事は、ドナルド・ノーマンの偉大な本が出版されて以来、おそらく最も良く知られた原則の一つです。一貫性を持つ事は、インターフェイスのユーザーが学ぶ必要のある事を大幅に減少させます。ボタンを押し、スライドバーをスライドさせるように、私たちはそれらの要素が繰り返し現れ、同じ見た目で、同じ振る舞いをする事を予想します。一貫性は色、向き、振る舞い、配置、大きさ、形、ラベル、言語など幅広い方法で持たせる事ができます。しかしながら、全てを一貫させる前に、一貫性を持たせない事にも価値がある事を認識しておきましょう。一貫性を持たない振る舞いは、習慣的な潜在意識の深くから現れ注意を引きます。これはユーザーに何か気付いて欲しい時に便利です。 

慣習に従おう

慣習は一貫性と同類のものです。一つのインターフェイスの中で一貫性を持たせれば、ユーザーが戸惑う事を防ぐ事ができます。もし、複数のインターフェイスに渡って一貫性を持たせれば、さらにユーザーが学ぶ事を減らす事ができます。確立されたUIの慣習に従えば、スクリーンを右上のボタンで閉じる事や、画面の拡大を設定のアイコンから行う事が分かります。もちろん、慣習がもはや目的を果たさない場合や、より新しいパターンを与える事もあります。慣習を破るときは、意図や目的をはっきりとさせましょう。

慣習に従っている例

WordPressログイン画面：ID、パスワード、ログインボタンの順

アイコンにラベルを付け、あいまいさを無くしましょう

アイコンは解釈の幅が広いため、文字と組み合わせる事であいまいさを無くす事ができます。下向きの矢印を例にあげましょう。それが意味するのは、何かを下に移動させる事でしょうか、優先順位を下げる事でしょうか、それともダウンロードする事でしょうか。また、バツのアイコンが意味するのは、何かを削除させる事でしょうか、無効にする事でしょうか、閉じる事でしょうか。これはユーザーがアイコンの意味を学習する時間のあまりない、ライトユーズなインターフェイスにおいて大きな問題となります。アイコンをより分かりやすくするために、アイコンをテキストで補足してあげる事ができます。もしスペースがなければ、hoverを表示させましょう。

アイコンにラベルを付けた例

早稲田大学

いかがでしょうか。ぜひ参考にして頂ければ幸いです。

Tweet