【参加レポート】2019/7/4 UXを踏まえた UIガイドライン作成の心得(第9回)：ワークショップ
コンセプト
道具の使い方＜視点・思考
上記書籍を参考に進めていく
UX/UIガイドラインとは？
ルール
・作ったら終わり
・間違ってるのに準じなきゃいけない
→難しい
なぜそのルール？
・みんなで作るというのが重要
・守る理由の共通認識
上流がだめだと…
・インタビュー自体が間違ってる
・データの読み取りが間違っている
・その上流がだめだとUXもだめになる
上流がOK→デザインがダメ→開発もダメになる
ガイドラインの必要性
Crowdworks
・紙にペンで書いてある
・それを部署間で共有するために
・パッと見ただけで大体わかる内容になってる
実際にリリースして実証している
ガイドラインの種類
UX設計企画
・ユーザーインタビュー
・こう言う聞き方で、これは聞いちゃいけない等のガイドライン
UI制作
・操作
開発
・ユニットテスト
・何をどうテストするのか
THE UXガイドラインは存在しない
インタビューガイドライン
IA(情報設計)のガイドライン
・イギリスの自治体
・専門用語、難しい表現ばかり
・ユーザー目線にする
ルールの必要性
品質の一定化
ガイドラインがあればいいだけじゃない
守ってなんぼ
コンテンツを作った上でガイドラインを作ろう
・そぐわないものになることがある
ユーザー視点でガイドラインを作ろう
・忘れがち
・仕事だから
・納期、納品が目的になってしまう
アフォーダンス
・腰の高さの丸太は椅子に出来る
・めっちゃ高かったら椅子とは思わない
・モノとそれがある環境
デジタルの世界のアフォーダンス
・わかりずらい
・メンタルモデル＝学習したモノ＝知識として「一番上のバーはメニューだろう」と思う
タイル型のメニューの利点
・押しやすい
・広いから
人は写真（顔）に目が行く
演習問題1
問題1、差を理解してデザインにする
あるグルメサービスのしゃぶしゃぶコースの検索結果のUI
要素を並び替えたりして分かりやすくしてみよう
解説
情報設計＝同じような情報をまとめる
検索＝結果を比較する
比較検討のしやすさが大事
コース名にもう料理の内容を入れる
・しゃぶしゃぶ＋ローストビーフ
・比較したい要素だろうというモノ
ECサイト
・Amazonは、金額などがある程度縛られたUI
・メンタルモデルができやすい
金額
・いくらがいくらになるのか
・それらの情報を近づける
・割引率
・元値と割引値
比較に必要な情報を取捨選択
topにだす情報は重要な項目にする
・宿泊でペット情報は一番であるべきか
・ペットに重きを置いたサービスなら相応しい
こういったサービスは、登録するユーザーによる
登録するユーザーが分かりやすいタイトルを付けてくれる訳ではない
・そこも想定して管理画面を分かりやすくする
UX DAYS TOKYOでブログやってるのでぜひみて！
演習問題2
とある献立サイト
どうしてもバラバラになりがち
ユーザーにも分かりやすく
ルールを作ってみる
色
色に意味がある
赤：目立つ、禁止
trivagoのカレンダー
・チェックインとチェックアウトの色を替えてる
・分かりやすい
ガイドラインを作ろうとすると、見つけようと考えてしまう
ユーザー視点で、使いやすいのかどうかが大事
操作
操作をする
・疲れを感じるもの
・期待値、ここにこれがあるかもと期待してなかったら残念に思う
少しずつ改善していくのが大事
作って納品したら終わりが日本はまだまだ多い
リリースして、その後素早く改善出来るといいよね
すでにあるサービスの改善は難しい
フォント
リンク
タイトル
文言
の統一から初めて行く
ユーザー視点＋理論
とりあえずここに置いたではだめ
信号機の赤はなぜ右なのか
・木で隠れて見れない確率が低いのが右
・歩行者用も、雪で埋まる確率が低いのが上だから上が赤
マテリアルデザイン
パフォーマンス
・どちらでも明示的なのであれば、描画に負荷がかからない方がいい
画像の上に文字はあまりよくない
・バナー等は例外
・画像自体がコンテンツなので
Amazon
広告をスライド出来る「＞」
白い＞と黒い＞の2重線になってる
赤い画像の上だとそれがバレるけどそんなにユーザーは気にしない
シンプルに考える
国
国ごとで記号の意味合いが異なる場合がある
タイポグラフィ
太字は漢字は見辛くなる
コントラスト
・伝えたい情報ごとに文字サイズを替えたり
フリクション
Google
通常は右端にOKボタン
画像のアップの時はボタンが左にある
→画像アップはサーバーに負担がかかる、本当にアップしたいの？とUIで問い掛けている
左端にボタン
・ブラウザサイズによって、右に置くと入力フォームから遠ざかっていく
・近接を保つためなのかも
いつ作るの？
プロダクトが出来てユーザビリティテストして改善点が見えてきてからガイドラインを作るのがいいかも
「迷わず使える」は最低ライン、その上に「使いやすい」や「好き」がくる
HCI
ヒューマンコンピューターインタラクション
ヒューマンエラーを引き起こすようなデザインは避ける
・トイレの「流す」ボタンと「緊急連絡」ボタンが隣だった
iPhoneのキーボード
・人の指は横の方が動きやすい
・ので、縦の余白は横より少し広い
・そこまで考えてデザインしている
感想
・実際に演習で作ったデザインの添削をして貰えてありがたかった
・演習2で「課題だから何か探さなきゃ」という視点になってしまっていた、ユーザー視点が大事ということを心で理解できた