UIデザインの基礎

デザインの目的

デザインとは「設計」である。

よくある誤解として、「デザインは絵である」「デザインとアートは同じである」というものがある。 しかし、デザインは見た目の話だけでなく、その機能や働きによって課題を解決することである。

デザインの原則は特定の領域に限らず広く適用できるため、ソフトウェアの差別化要因としてデザインは重要である。

UI・UXとは

UIとはユーザーとサービスの接点のことである。 人が物理的に制御できるように、リモコン、マウス、タッチパネルなどのインターフェースが必要である。

UXとは広義的には、ユーザーがサービスを知った瞬間からのすべての体験を指す。 UXの概念の発案者であるドナルド・ノーマンは、「UXは企業やサービスや製品について、ユーザーのやり取りのすべてを網羅するもの」と述べている。

UIは目に見える客観的なもの、UXは主観的なものである。 UXの設計手法としてカスタマージャーニーマップがある。

UI単体を改善してもUXを根本的に改善できない。 UXとは、対象に関わり始めてから忘れられるまでのすべての体験とされる。広告、セールス、サポートなど、UXに影響する要素は多岐にわたり、ユーザーの内面までを含めた概念である。

デバイスについて

入力手段の違い

本書は「PC」「スマートフォン」「タブレット」「TV」の4つのデバイスを対象としている。 デバイスによって用途や使われる場が異なるため、最適なインターフェースも異なる。

一般的

概要

階層と構造

Webサイトやアプリケーションは立体的な構造として成り立っている。ページの前後関係を無視してサービスをデザインすることはできない。
例1) Appleの場合、グローバルナビゲーション > ローカルナビゲーション と移動する。
その後、ローカルナビゲーションの見出しはタイトルに変化し、新たな動線も出現する。
例2) ケンブリッジ大学の場合 グローバルナビゲーションは、現在のいる場所と、その下層をしめす。 下層をクリックすると、先ほどいた場所が繰り上がり、表示される。
例3) iOSは1つ前のタイトルが戻るボタンの見出しとなる
人間はある状態から別の状態に変化する時、段階的に変化していくことを自然に感じる
画面の前後関係の理解を補助するためにインタラクションが有効である。 例)

深さと広さ

階層には深さと広さがある。基本的に反比例する。
一般的に、ユーザーは浅く広くの方が探しやすい。なぜなら、階層を上下する方が労力を伴うから。 また階層が広い方が、ラベリングは排他的で具体的に命名しやすくなる。
ラベリングで重要なポイントは、排他的に命名すること。なぜなら、ユーザーを困惑させることになり認知負荷を向上させてしまうため。
階層が狭いと、すっきりとさせることはできるが、ラベリングはわかりにくくなる。
フォローアップとして、各メニューをクリックホバーすると、そのメニューの説明や概要などが表示されることがある。
階層が広いもののデメリットとして、カテゴリ数が多く、構造的にわかりにくさを冗長してしまう。 あと、見た目の判断というか認知負荷はあるかも
スマホアプリにおいて、5タブ構成がよく見られるが、主要な機能以外はある1つにまとめられ、結果として抽象的ラベリングしていることに変わりないものがある。 対策としたは、サブメニュー、ハンバーガーメニューなどでカテゴリ数をさらに設置する。

現在地表記

カラー

チェックリスト

UIPage

とぷ

思ったことを書く
Next.js
私なりカードUI
Next.jsキ
001
サバイバルTS
TypeScript
テスト
高校の情報の教科書を購入した