UI/UXデザインについて
UI/UXについての概念の話。
UI (User Interface)
ユーザーインターフェースの略。
ユーザーが情報と対話するためのインターフェースやデザインを指す。
具体的には、ボタン、スライダー、テキストボックス、カラースキーム、レイアウトなど、アプリケーションやウェブサイトの視覚的な要素全体を指します。
UX (User Experience)
ユーザーエクスペリエンスの略。
製品やサービスを使用するユーザーの全体的な経験や感じを指す。
UXデザインは、ユーザーが製品やサービスを使用する過程での満足度を高めることを目的としています。これには使いやすさ、効率性、魅力的なデザインなどが含まれます。
つまり、UIは「どう見えるか」、UXは「どう感じるか」を表しています。
肌感はわかりますが、すこし抽象的なのでUXについてもう少し具体例をだしてみます。
UXをどうやって意識してデザインをしていく？
デザインのgoodとbadケースを実際に体感する
この中から、9という数字を見つけてください。
ちょっと見つけづらいですよね。これならどうでしょうか？
色やコントラストをつけることで視認しやすくなりました。
今度は数字の種類を増やしてみましょう
わかりやすくする、という意図でつけていた識別基準も
文字色が多くなることで情報過多となり、逆にユーザー側の認知や判断に負担が生じてしまいます。
この１例はかなり単純で極端な例として挙げていますが、
そうはならんでしょ、という感じで制作当初は回避できるようなデザインでも、後々の要望が重なって結果的にUIが追加になるケースも多いと思いますので、既存のデザインとの兼ね合いも考えて
「全体的なデザインを崩さないか？」ということを都度考慮する必要がありそうです。
考えるべき配色
このようなデザインを考えるうえで注意する観点はいくつかあると思いますが、ここでは配色に着目して考えていきます。
以下の４種類の配色はパターンは、とある有名な企業ごとにロゴで使われている配色です。
答えはこんな感じ、普段よく目にするロゴだと思います。
このように多くのロゴで使用されている色は２〜３色、多くとも4色程度です。（slackロゴも4色）
少数の色に抑えることで、認識のしやすさ、印象の強さなどをユーザー側が感じるようになります。
UI/UXデザインにおいても基本的に色の組み合わせは、3色が推奨されています。
ではその配色バランスはどのようにすれば良いか？という話ですが
一般的に、基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされています。
割合としては以下のような配分です。
最も大きな面積を占める色を「ベースカラー（70％）」
ブランドのイメージカラーなどデザインの中心になる色を「メインカラー（25％）」
画面にアクセントを持たせるための色を「アクセントカラー（5％）」
わかりやすい例でいうとNetflixが大体このような配分ですね。
このような色配分など、デザイン上のガイドラインを把握した上でデザインを行っていくことは
デザイン制作する際の意思決定の迅速化につながるだけではなく、
デザインそのものに一貫性を持たせることができるので、ユーザー側のシステムを使う上での学習コストや認知の負担を減らし、結果的にユーザーエクスペリエンスの向上につながっていきます。
そしてユーザーエクスペリエンス（満足度）の向上することで、ユーザーがアプリの使用時間、使用頻度を高めるという本来の制作目的にもつながる大事な要素になってきます。
様々な心理学の応用
UXの向上のためにデザインにはいくつかの心理学が応用されています。
ピックアップして紹介します。
ゲシュタルトの原則: 人間は近いものや似ているものをグループ化したり、△▫︎○などの閉じた図形を見出そうとする性向があるという法則です。
よく耳にするゲシュタルト崩壊とは、図形や文字などの全体像を把握することができず、構成する部分を部分的にしか認知できなくなった状態のこと。同じグループとして見せたいならアイコンやテキストを揃えることで崩壊を防ぐことができます。
フィッツの法則: この法則は、ユーザーがターゲット（例: ボタンやリンク）にポインターや指をどれだけ迅速に動かすことができるかを説明しています。ユーザーインターフェースのデザインや配置に直接関連しています。
ヒックの法則: 選択肢の数が増えると、決定を下すのに時間がかかるという法則。これは、メニューの選択肢や設定のオプション数を考慮する際に特に重要です。
さいごに
デザインに基づき様々な心理学が応用されていたりもするので雑学としても知っておいても面白いかも。デザインガイドライン含め、その辺をまた記事に起こしていきます。
Discussion