Daily Grind

システム開発関連の忘備録です

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

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

1.先進的な技術を使う理由
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 どんなUX(ユーザーエクスペリエンス)をユーザーに与えたいですか?

2.実際の使われ方(ユースケース)を想定しながらデザインする
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 実際にそのWebサイトやアプリが実際に使われるシーンを想定

3.ユーザーを明確にカテゴライズする
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 あなたが議論したいユースケースに一人づつペルソナを割り振って考えてみてください
 一つUIを作るために二つのUIを作り、比較してみてください。

4.ユーザーフローを考える
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 ユーザーエクスペリエンスを考えるためには、アプリケーションフローを考えることが重要

5.プロトタイプについて
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 UIデザインはまずプロトタイプから作ります。

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

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

8.一貫性を持たせる
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 使用するUIに一貫性を持たせる必要があります

9.ページ遷移させない
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 あなたがバックエンドを担当している場合、完全なページ遷移を避けてください。
 代わりにAJAXを使い、新しい要素や情報をロードしてください。

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

11.繰り返して絞り込み
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 UIデザインのプロセスは反復的です。

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