「UIUXデザインの原則」を読んで参考になった部分もまとめました。
#UIUXをデザインするということ
####ユーザーのサービスの期待値を正しく理解し、「自分だとこう使う」とイメージしやすくする状態をつくる。
- ユーザーがサービスに何を期待しているか
- ユーザーがどんな事を感じたり、不満に思っているか
#ユーザー体験の時間軸を捉える
####サービス利用中だけでなく、前後の体験も含めてデザインする
###【例】
####利用前
【課題】
難しそうで不安
【対策】
サイトの雰囲気をPOPにしてとっつきやすくする
####利用中
【課題】
わからなくなったらどうしたら？
【対策】
テンプレートを用意する・問い合わせフォームをわかりやすく
####利用後
【課題】
結果を他の人とも共有したい
【対策】
シェア機能
#ユーザーテスト
使い勝手の検証の他に、サービスを利用してもらいながら思考発話してもらうこと。
まだサイトに存在していないコンテンツや機能のニーズが掴める。
###ユーザーテストの実施フロー
####(1)ユーザーの目的を立てる
- 使い勝手検証するためなのか、潜在ニーズを探るためなのか等 目的を明確にする
####(2)使う人のペルソナを考える
- テスト対象者の性別や年代・経験の度合い等
- そこまで細かくなくてOK
####(3)シナリオ作成（タスク設計）
- どのようなテスト内容にするか
- どのような質問をユーザーに実施するか
#####テストの目的
- 設計通りに利用するか
- 分かりづらい点、情報不足している点を洗い出す
- ユーザーがどのような情報を求めているか
- 既存のユーザーがスムーズに利用できているか
#####シナリオ作成できをつける
- 初めて利用するユーザーと既存ユーザーでグループを分ける
- それぞれのグループが普段どのようにサイトを利用しているかイメージして、その思考が行動にあったシナリオにする
####(4)パイロットテスト
- 近しい人テストシナリオのテストを行ってもらう
【シュチュエーション】
普段仕事で忙しいあなたは通勤時間の合間にネットスーパーで1週間分の食材の買い物をしています。
|タスク|知りたいこと|
|:--|:--|:--|
|自身がネットで食品を買う際に注意して見ている点を教えてください|そもそもどういう情報を求めているか|
|自身が欲しい商品を自由に探してみてください|設計通りに使うか|
|振り返って分かりづらい点があれば教えてください|分かりづらい点がないかどうか|
|購入を検討する上で不足していると思った情報があれば教えてください|不足している情報はないか|
|1週間後前回買ったものと同様のものを買いたいと思いました。再度サイトを開いて買い物かごに入れてください|繰り返し買いやすいか|
####(5)リクルーティング(確定した内容で実施する)
- 1回のテストで5人くらいが理想
ユーザーテストは少ない人数（5人くらいで）何度も繰り返し行う方が精度が高まる
####(6)テスト実施
#ユーザーの心理/行動をUIUXに落とし込む
####(1)情報設計
- ユーザー視点で情報をデザイン
- 初期体験こそ大切に
- 説明は常に不足していると考える
- ユーザーにとって不利益となる体験は排除する
- 提供者の写真が誠実さ・信頼性を演出する
####(2)ビジュアルデザイン
#####CTAの周辺でマイクロコピーを活用する
- 実績を訴求するマイクロコピー
- 手軽さ・簡単さを訴求するマイクロコピー（分よりも秒の方が良い）
例：40代500人が利用
↓
40代10人に１人が利用（より身近に感じる表現）
#入力フォームのストレスを解消するTips
- 小文字・大文字・半角・全角が指定されていたら、自動で変換できるようにする
- ハイフンの有無がわかりにくい
- 注意事項・入力例はフォーム外に記述する（入力内だと、入力時に見えなくなってしまうため）
- 必須か任意か分かりづらい（※だけでなく「必須」と表記する）
- 今の状態【ステップ・完了率】が確認できない（あとどれくらいなのか不安になる）
- エラー時のフィードバック（送信ボタン後ではなく、入力した時点でフィードバック）
- エラーの理由が説明されない
- フォーム送信後のアクションが明記されていない
#気持ちよく使い始めてもらうためのTips
サービスの印象は最初の第一印象で決まる（使いにくいとサービスの印象も悪くなる）
#####パーソナライズにする（自分好みにカスタマイズすると愛着がわく）
例：初期設定で好きなジャンルを選択させたり
#####プッシュ通知の許可は、承諾する価値を伝えてから表示する
アプリダウンロードしたての時よりも、少し経った使い勝手がわかるようになった時に通知する
#####必要なタイミングで最低限の説明をする
#####ツールチップはユーザーが該当の画面を表示した時に、理解して欲しい所に表示される説明。他の画面を阻害せずに最小限の範囲で説明する。
アプリダウンロード後、起動直後に特徴や使い方を説明したスライド式チュートリアル流し読みされる確率が高い。いきなり全部説明されてもわからない。
#####最初にやるべき事を制限する
たくさん機能があると便利だが、何をしていいかわからない。
アプリ初日利用直後にやることリストを設けて、ステップごとにやる事を明確化
#使い心地がいいおもてなしTips
#####待ち時間を工夫
読み込み中の表現をスピナーにして、後どれくらいで終了するかわかるようにする
#####重要なページから離脱する時は確認画面が表示される
このページを離れてしまうと今までの入力が無効となりますがよろしいですか？等
#####検索時に候補をレコメンド
#####最小のページ切り替えで情報を把握する
#####相談して決める事を考慮する
高価な商品・旅行などは他の人と相談して決める事が多いため、検索結果一覧ページ・詳細ページにシェアボタンを設置する