優れたUIデザインを作るために知るべき12のTips

こんにちは、だいきです。
海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！
（この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。）

1, 先進的な技術を使う理由

photo credit: Carlos Varela via photopin cc

HTML5が新しい技術だからといって、それを使う必要性はありません。
新しい技術を使うことが目的になってはいけません。

ユーザーとユーザーが期待している事を考えてください。
どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？
このことを考えることで、どんな技術を使うべきかのヒントになるはずです。

2, 実際の使われ方（ユースケース）を想定しながらデザインする

photo credit: Chris JL via photopin cc

UIデザインを始める時、実際にそのWebサイトやアプリが実際に使われるシーンを想定してください。
抽象的なシーンではなく、ユーザーがそのアプリケーションを実際に使うシーンを想定し、UIデザインをしてください。

3, ユーザーを明確にカテゴライズする

photo credit: naixent via photopin cc

あなたのアプリを使用する人がどんな人たちかを確認します。
そして、そのユーザーをカテゴリー分けし、
“ベン”または “アンナ”のような本当の名前を付け、彼らに個性を与えます。
（これは、デザインプロセスにおけるペルソナと呼ばれています）
あなたが議論したいユースケースに一人づつペルソナを割り振って考えてみてください。
注意点：極端に異なる2人のペルソナがいる場合、
一つUIを作るために二つのUIを作り、比較してみてください。

4, ユーザーフローを考える

photo credit: theleetgeeks via photopin cc

ユーザーエクスペリエンスを考えるためには、アプリケーションフローを考えることが重要です。
つまりログインボタンをクリックし、ログインのプロセスを通過することで何がどう変化するのか、どこへ移動するのかというフローを考えてください。
ログイン画面のデザインだけを考えてはいけません。

5, プロトタイプについて

photo credit: eph_ via photopin cc

UIデザインはまずプロトタイプから作ります。
一度作成したUIデザインのプロトタイプをデザイン作成過程で捨てることができないのであれば、それはプロトタイプではありません。

6, 次のステップを明確にする

Webサイトのダイアログでユーザが次に行いたいと思っているステップは、常に明白に示してあげるべきです。
ユーザーが行いたいステップである、ログインボタンや[次へ]ボタン、[New User]ボタンを探しやすくしてください。

7, 見えるものの数を減らす

photo credit: lintmachine via photopin cc

これを理解するには、脳がユーザーインターフェイスを理解するとき、私たちの脳がどのように機能するかを理解する必要があります。

これには3つの段階があります。
・感情的段階 – 脳が画面上の色、レイアウト、画像を認識する
・解析段階 – 脳が画面上のすべての要素の目的を考える
・実行段階 – ユーザーが最初のUI要素とやりとりを始める

たくさんのUI要素があればあるほどユーザーは上の3つの段階を繰り返さないといけません。そして、複数要素があるとユーザーは何をすればいいかを理解するのが難しく、理解するのに時間がかかってしまいます。

8, 一貫性を持たせる

photo credit: hollaBackpackers via photopin cc

我々の脳は筋肉のように訓練することができます。
脳は共通なパターンに反応するので、使用するUIに一貫性を持たせる必要があります。
そしてさらに、ユーザーが予測する行動にあわせてUIに一貫性を持たせる必要があります。

9, ページ遷移させない

(参照: SNOWBIRD http://www.snowbird.com/)

 

あなたがバックエンドを担当している場合、完全なページ遷移を避けてください。
代わりにAJAXを使い、新しい要素や情報をロードしてください。
そうすれば画面が完全に切り替わる訳ではないので、ユーザーは、Webサイト上のすべての要素を再び理解する必要がありません。

10, トランジションを使って状態を変更する

photo credit: Atomic Taco via photopin cc

あなたがアプリケーションの一部の状態を変更した時、何が起こったのかをユーザーにちゃんと伝えるためにシンプルなトランジションを使用することができます。
例えば、何かを非表示にしたい時、それをフェードアウトさせ、
ユーザー前の画面に戻りたい時、どこを見ればいいかわかるような状態です。

11, 繰り返して絞り込み

photo credit: fish2000 via photopin cc

UIデザインのプロセスは反復的です。
あなたはたくさんのデザイン案を作成し、状況に応じて柔軟に対応する必要があります。
そしてアイデアを広げ、新しいデザインを追加し、それらを組み合わせ、
またアイデアを一からやり直し、また同じ繰り返すこともあります。

12, あなたのユーザーにすばらしい体験を与える

photo credit: archibald jude via photopin cc

決してユーザーの期待を裏切ってはいけません。
これは、あなたのアプリケーションのUIに限定されることではありません。
あなたのサポートページ、Twitterのフィードや自分のホームページなど、すべてにおいて言うことができます。
あなたがユーザーに提供するものすべてがユーザーが理解できるものであり、なおかつ、ユーザーにとって最高の体験を提供する必要があります。

以上です。
ユーザーのことを親身に考えることが、いいUIデザインが作れるヒントなのですね。
今回も勉強になりました。