参考になる！５つのユーザーインターフェイス改善策。（基本編）

Tweet

今回はより良いユーザーインターフェイスを構築するために、いくつもの提言を行っているサイト「GoodUI」から、基本的な改善策を５つ抜粋してご紹介いたします！

レイアウトをワン・カラムにしてみる！

ワン・カラムレイアウトはユーザーをナビゲートしやすくしてくれます。冒頭から最後までのユーザーの動きが予測できるようになります。マルチ・カラムレイアウトはページの本来の目的部分から注意をはずしてしまうリスクがあります。ストーリー性を持ってユーザーを導き、最後に目立つ呼びかけを行いましょう！

 ワンカラムレイアウトのサイト例

UUUMネットワーク

 枠を減らして無駄に注目を引かない！ 

枠はページ内で注意を引き合い競合します。限られた時間の中でユーザーの心を強く掴むものは重要なリソースです。実際、枠は空間をはっきり正確に定義するために利用されていますが、認識するためにはエネルギーを使います。画面上の要素を注意を引かずに関係付けるためには、要素を近接させたり、整列させたり、背景を変えたり、書体を変えたりする事ができます。UIツールを使用していると、ボックスの束を簡単に配置する事ができます。しかしながら、余白を占有するボックスは順序や統一感を損ないます。それゆえたくさんのボックスのあるページは煩雑で不整列なものになりがちです。ライン上でボックスを配置することは役に立つこともありますが、あまり注意を引かないで視覚的な関係付けをする方法も考えましょう！

枠が少なく整理され見やすいサイト例

Apple

視覚的なヒエラルキーをつける

良い視覚的なヒエラルキーは重要でない要素から重要な要素を分けるために利用する事ができます。視覚的なヒエラルキーは要素の配置を変えたり、近接させたり、色、トーン、インデント、文字サイズ、要素サイズ、パディング、スペースなどを変えることで実現できます。これらを正しく適用すれば、読みやすくなるとともにページ内に注意を引く事ができます。視覚的なヒエラルキーは摩擦として働き、ページを上から下まで読み通すのを遅らせる事ができます。これは車旅行に例えられます。高速道路を使えば早く目的地（つまりページの下）にたどり付きますが、景色の良い道を行けば素敵なもの見る事ができます。視線が止まる場所を作りましょう！

 文字のサイズでヒエラルキーがわかるサイト例

FINANCIAL TIMES

真面目になりすぎずユーモアを持とう

なぜかどの人も、いつも真面目にしなければいけないと考えがちです。しかし、それは間違いです。いつでもジョークや遊びを通して気軽になる事が出来るのです。ユーモアをUIに使うと、うまくいく事もあればいかない事もあります。しかし、それがうまくいけばユーザーと強い人間関係を構築する事ができます。将来に渡って笑いや笑顔を集める事はおそらく良い事です。時間が経てばより強い、より人間的な関係ができ、間違いが起きた時には寛大になってくれます。

ユーモアのあるサイト例

ちょっと一服ひろば 

要素を密集させず余分な空白を持とう

白い空白はコンテンツやデータを確実に読みやすくします。要素が少し離れていると、それらは独立して認識されるようになります。これはスクリーン上のリストやテーブル、パラグラフにとって役立ちます。一般的な白い空白の適用例の一つは、すべてのアイテムの周りに空白を作るこ事です。十分な余白がなければ、要素を分けて認識できなくなります。読みやすさを考慮するならば、余白が役に立つでしょう。

 十分な余白のあるサイト例

Vanhue

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

（※アイキャッチ画像はWendy Seltzer氏による。）

Tweet