UIUX - ntuf/Tips GitHub Wiki
UIUX
『UIデザインの教科書』
UIはユーザーが使っている間を問題にする
UXはユーザーが聞いてから、知って、使って、忘れてしまうまでの時間を対象にする
タッチパネルではホバーが使えない
ホバーによって押す前に押せるかを知らせることができない。
目視だけで押せるかを判別させられるように。
Webサイト
・マルチデバイス対応：◯ 容易
・OSの違いの環境差異：◯ 小さい
・サービスごとのインストール：◯ 不要
・インタラクション：△ 乏しい
・データ通信量：△ 比較的大きい
・◯ 同時に複数のブラウザを起動できる
アプリ
・マルチデバイス対応：△ 考慮が必要
・OSの違いの環境差異：△ OSごとに異なるプログラム言語で開発
・サービスごとのインストール：△ 単機能/単一サービスの専門性、都度インストールする必要がある
・インタラクション：◯ 動きのスピードや操作性の軽快さ
・データ通信量：◯ データ通信量が少量で済む
・△ 最適なインターフェースがデバイス、OSごとに異なる
PWA:アプリに近い体験
Webサイトを構築する技術で作成可能
利点
アプリのように動かせるWebサイト。中間的。
・アプリのアップデートが不要
・キャッシュを利用すればオフラインでも利用可能
欠点
・アプリほどのインタラクションは得られない
・ 左スライドで戻るが効かない（webブラウザと同じ動きができない）
ーーー
・コントラスト 差別化手法
・太さ
・色
・大きさ（級数）
・背景（背景色）
・目印（装飾） ：インデックスの見出しに、アンダーライン
これら手法を組み合わせると、コントラストがさらに大きくなる
異なる意味には異なる手法を持ちいる
現在地の表現を太字にしたら、マウスオーバーも太字にすると認知負荷が高まる
マウスオーバーは色を変化させたほうがいい
ーーー
・トップ・一覧・詳細
・一覧の操作
・絞り込み 価格や種別で絞り込みを行う
・並べ替え 人気順や価格順、名前順でソート
・切り替え 見せ方を変更する ブロック形式、リスト形式、大画像形式など
・わからないの二つ
・場所がわからない
・操作がわからない
ーーー
・ナビゲーション
・インターフェースの集合体
・位置は上下左右の端、大きさ、可変なのか固定なのか
・ヘッダ、フッタ、パンくずリスト、グローバルナビゲーション、
ローカルナビゲーション、オーバーレイ、インレイ
・コンテンツ量が増えるにつれてナビゲーションの量も増えていく
・
・インタラクション
・ユーザーの入力に対する動きを伴ったフィードバック
・例
・ホバーによってボタンが反転、押せるものと認識させる
・ローディングの循環アニメーション
・フォーカスによって、選択されたものが浮き上がる
・エラーが発生した際のエラーメッセージ
・理解のためのインタラクション
・演出のためのインタラクション
・ナビゲーションとインタラクションの相互作用
・例：ハンバーガーメニューのアイコンが✖️に変化するアニメーション
・ヘッダ
・アクションの起点となる
・グローバルナビゲーション：サービス内をジャンプできる
・PCではメガドロップダウンメニューが設置されることも
大きなプルダウン 例：アマゾンのアカウント&リスト
・ヘッダは場所を取るので縦スクロールに合わせて格納する
残しておきたいものだけを表示させる。
・フッタ
・ページの最後にある
サイトマップの設置場所
グループ企業の紹介
連絡先コンタクト手段の提供
・パンくずリスト
・＞や/を使用して全階層を表現するナビゲーション
・設置場所は画面上部か、画面下部
・そのページへの経路が複数ある場合はどう表現するか３案
①最も優先するルートに固定する
②複数のパンくずリストを表示する
③経路によって表示を切り替える変動型
・カラムと左右ナビゲーション
・２カラムレイアウト
・左右のどちらかにエリアを追加したもの。最も古典的。
左が階層構造で、メインコンテンツは右が主流。
右が階層構造だった時代もあったが、廃れた。
ニュースサイトはメインコンテンツが左で、右がアクセスランキングなどの情報。
ニュースでは階層を意識する必要がないから。
・３カラムレイアウト
・左右の両方にエリアを設定したもの
・横幅が大きなエリアが必要で、PC以外は難しい
・スライド
・擬似的に2,3カラムレイアウトを構成する
・ハンバーガーメニュー
・連想しにくい、中身がわからないという批判も多い
（さまざまなメニューを出すという、意味でもいいのでは？）
・オーバーレイ（ポップアップ）
画面にかぶさる垂直方向の割り込み。ポップアップとも呼ばれる
一時的に別の行動を取らせる
全画面で割り込むタイプも。
使用例：アプリ使用法ガイド 等
・インレイ：画面に差し込まれる割り込み
・インレイ
・Googleの画像検索で、検索結果の画像を選択した際に差し込まれ
関連する画層情報を表示しているあれ。
・強制的にユーザの操作を奪わない。
・蛇腹型のインレイ：アコーディオン
・＋のボタンで開いて-のボタンで閉じる
・スマホ等、左右幅に制限があるときに有効
・全体の構成がわかりやすい
・目的のセクションだけを開ける
・スクロール、ページング
・無限スクロール
フッターを使うことができない（「もっと読む」タイプであれば問題ない）
難点は戻るボタンとの親和性が低い
・ページング
・古典的ページングはページ番号で全体を示せる
・スマホ横向きのページング (左右にスワイプ)
・スマホ縦向きのページング (上下にスワイプ)
・無限ページング
・カルーセル
・有限コンテンツの横スクロール
・無限パンニング
・Googlemap
・スクロールの方向（テーブルビューやコレクションビューの）
・縦スクロールが自然か、横スクロールが自然か
・テキストの量が多いなら 下向きに続くから → 縦スクロール
・画面のが長い方にスクロールするのが自然
・要素の形
縦長 → 横にスクロール
横長 → 縦にスクロール
・要素の隙間
要素同士の隙間が大きい方にスクロールする
要素間の隙間が小さいと同一のグループと感じるのでそれらの
□ □ □
□ □ □
□ □ □
・要素が見切れ
わざと見切れさせて、その方向にスクロールできると感じさせる
・デザインガイドライン
・ヒューマンインターフェースガイドライン（Apple）
iOS7からフラットデザイン
・マテリアルデザイン（Google）
・Microsoftデザイン(Microsoft)
『UIデザイン必携』
・色数は少なくする
・配色カラー
ベースカラー：70%ぐらい
メインカラー：25%ぐらい
アクセントカラー：5%ぐらい
-
・マイクロインタラクション
・Twitterのいいねのハートボタン
・パスワード設定画面で入力値の妥当性をフォームの下に入力直後に表示する
-
・構造と階層
・ラベリングは排他的に
大分類の「Cafe」と「Coffee & Goods」があり、どちらに分類されているか分かりにくい
・トップ、一覧、詳細
大体みんな、この形からできている。
トップ：顔、必ずしも必要ではない
一覧：サービスの要
操作はフィルター、ソート、スイッチが全て
詳細：サービスのゴール
・規模によって構造は変わる
・規模１：トップで全てをカバー
縦スクロールだけで全てのコンテンツをカバー
スマホでも表示しやすい
・規模２：詳細だけ別ページ
ここのコンテンツの詳細を個別に切り出す
・規模３：カテゴリーごとに一覧を用意
一覧ページをつくって、詳細の比較が可能
・規模４：検索機能を設置
検索が必要になる
-
・AndroidとiOS
・AndroidはOS標準で下に戻るボタンが付いている
・iOSは左上に戻るボタンが付いている
・ハンバーガーメニューが左上に配置するのが標準になりつつありこれと干渉する
・右にハンバーガーメニューを配置するか、下タブで表現するか検討する
-
アイコンにラベルを添えるか
・フィルターの漏斗のかたちのアイコンは説明が必要
・四角が3✖️3で並んでいるアイコンはカラムレイアウトの一覧だが、
何の一覧かを「〇〇一覧」とラベルをつけて説明する
・人アイコンは、「会員登録」「アカウント情報」など説明が必要
・フロッピーディスクで保存を意味するアイコンは、若者が知らなくても
一般の共通認識になっているのでそのまま従う
・ハンバーガーメニューは賛否両論
・否定的意見
・見ただけで意味がわからない
・直感的なシンボルではない
・ラベルは絶対必要だ
・常設することが難しい場合があり何らかの格納庫として
現実問題必要とされている
-
・フィードバック
・あらゆる操作にフィードバックが必要
・PC：タブをホバーして、色を薄く表示する
・タブレット：タップした反応
・リロード中の表示
・ローディングとプログレスバーの使い分け
・ローディング：比較的短い待ち時間
・プログレスバー：比較的長い待ち時間
-
・一つ戻る、最初に戻る
・迷ったら戻れるように両方を担保する
・iOSでの注意点 – 戻る機能を担保する必要がある
・Apple純正のアプリは左上に戻るボタンがあるものが多くなったが
全てがそうではない
-
・スクロールとページングは直交する
・カルーセルはスクロールかページングの割り込み
-
・マルチデバイス
・同一でなくても同等のことができるようにする
・デバイスの特徴や用途に従う
・PCではページネーション（ページ送り）、
スマートフォンでは「もっと見る」の無限スクロールに
・デバイスによってインターフェースを変える
・デバイスを跨いで役割を担う
・リモコンを使うTVではパスワード等の入力は手間がかかる
QRコード等を表示してスマートフォンなどの別デバイスで入力させる
・デバイスを跨いで機能を継承する
・Spotyfyでは、MacApp,iOS,AndroidTVで機能を継承する
・サービスのミラーリング：GoogleCast,AirPlay
-
わからないとは
・場所・操作・状態
・場所
・見せ方に一貫性を持たせる
・画面中でフォーカスの位置を見失う
・操作
・使い方の予測が立たない
・一般的な使い方からずれている
・次に行うアクションが不明瞭
・状態
・iOSのセグメントコントロールが２択だとどっちの状態か分かりにくい
-
・インタラクションコスト
・アタマの負荷（認知負荷）
わかりにくい
・カラダの負荷（身体的負荷）
リモコン(TV)であれば、上下左右の方向キーを何度も押して
フォーカスを移動する必要がある。
・頭の負荷と体の負荷をのどちらを優先するか
・頻度の少ない操作（新規登録など）
初めて訪れるユーザが多いから
→手数が多くても、分かりやすさを優先する
・利用頻度が多い操作
頻度が多いものはユーザが意味や操作を学習するので
→分かりやすさを多少犠牲にしても、手数を少なくする
-
・一貫性、シンプルさ、共通概念
３つ兼ね備えて使いやすいインターフェースになる
・シンプルさ
明快、簡潔
・一貫性
世界観、物理法則のようなもの
大きなルールほど先に決める
キーカラー
文字サイズ
テキストリンクの色
・共通概念
誰もが知っているサインやルール
・直感的とは予測と結果が完全に一致する
ex.タッチパネルのピンチ操作
-
留意事項
・払った労力にとらわれない
サンクコスト
・機能を増やしすぎない
機能は絞る
iTunesは音楽を楽しむためのものだったが、肥大してしまった
楽曲ファイル管理、同期とバックアップ、ポッドキャストの視聴、
動画コンテンツの管理
・売り手の都合を押し付けない
住所入力のハイフン
ハイフンダッシュではエラーになり、長音のみ受け付ける入力
・試してみないとわからない
モックアップを作って使ってみないと本当の意味ではわからない
・人間の想像力には限界がある
三面図から立体物をイメージできない
構成図からページ遷移構造を完全にはイメージできない
・謙虚になる
謙虚さ（他者の傾聴）傲慢さ(決めつける)をバランスよく兼ね備える