UXを視野に入れたUIリニューアルのプロセス

2019/07/18(木)に京都で開催された「業務システムデザイン勉強会 #2」で発表した資料です。

Transcript

1. UXを視野に⼊れた UIリニューアルのプロセス 【業務システムデザイン勉強会 #2】 2019/07/18 株式会社グラッドキューブ 宮島 敬右
2. ⾃⼰紹介 宮島 敬右 Keisuke Miyajima HCD-Net認定 ⼈間中⼼設計スペシャリスト ⼀般社団法⼈エクスペリエンスデザインユニット 監事 過去にパソコンのアプリケーション、スマートフォンのアプリ、家電の組み込 みまで幅広いUIデザインを⼿がける。 現在はインハウスのUIデザイナーとしてベンチャー企業に勤務し、⾃社製品の Webアプリケーションの全⾯的なUIデザインのリニューアルを担当。 2014年、2015年グッドデザイン賞を受賞。
3. 「SiTest（サイテスト）」は、ウェブサイトの解析・改善によく⽤いられる 「ヒートマップ」や「A/Bテスト」などのツールを『オールインワン』で提供する、 SaaSビジネスモデルのウェブアプリケーションです。
4. リニューアルの背景 UIの⾒た⽬の陳腐化、ユーザーからのクレームの改善や要望の反 映、市場での競争⼒の低下 リニューアルの⽬的 ユーザビリティの向上、ブランドイメージの向上、市場と既存顧客 へのアピール、競合との差別化、⼤⼿クライアントへの提案の強化 チーム構成 デザイナー：1名（私） エンジニア：6名（内4名は派遣でフロントエンド専任は2名） セールス兼コンサルタント：3名（要件の検討とレビューのみ参加） スケジュール 当初の予定は6ヶ⽉、実際には10ヶ⽉ ⾃分の役割 リニューアル要件の検討、画⾯遷移・画⾯構成の検討、プロトタイ プの作成、すべてのデザインリソースの作成、すべてのボタンラベ ル・メッセージの作成
5. やること やらないこと 制約 •UIを「全⾯的」にリニューアルする。 •現状のビジネスモデル（ツールの⽉額利⽤＋オプションで コンサルティング・クリエイティブの制作）は変えない。 •移⾏はリニューアル前と後のUIを「切り替えられる期間」 を設けて、段階的に⾏う。 •スケジュールを優先するため機能追加は優先度を下げる。 •リニューアル後にユーザーのデータに不整合を起こさな い。 •スケジュール的に新しい価値の探索はしない。 •スケジュール的にバックエンドの仕様は⼤幅に変更しな い。 •派遣のエンジニアに来てもらうので、実装後の⼿戻りには 余計なコスト（社員より⾼い残業代）がかかる。
6. UXの5段階モデル：社内向けのコミット •⾒た⽬の古臭さを解消する •UIに⼀貫性を持たせて学習コストを削減する 表層 ⾻格 構造 要件 戦略 具象 抽象 ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定 •現状のUIに慣れているユーザーのメンタルモデルか ら逸脱しない画⾯設計・画⾯遷移にする •過去の機能追加時の不可解な画⾯設計・画⾯遷移の 不整合を改善する •アプリ内の検索機能の強化 •UIをフルリニューアルする •⼤機能は維持する •競合が提供している機能に並ぶ •市場での競争⼒の向上させる Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成
7. UXの5段階モデル：⾃分の⽬標 •Atomic Designでデザインシステムを構築する •よく併⽤される「Google Analytics」との親和 具象 抽象 •フィードフォワード・フィードバックを徹底する •画⾯の動線のショートカットを設ける •OOUI（名詞→動詞、コレクション→シングル） •モードレスなUIを⽬指す •あたりまえ品質までユーザビリティを改善する •価値の低い機能を廃⽌する •サポートコストを削減する •レポートを改善してコンサルティングの質を上げる ➡社内の顕在的・潜在的な課題を解決する Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成 表層 ⾻格 構造 要件 戦略 ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定
8. ⾃分の⽬標 ＋α • プロトタイプに重点を置いて、関係者の合意を得な がら進める。 • できる範囲でHCD（⼈間中⼼設計）やUXのプロセ スを取り⼊れる。 • 社内の SiTest ユーザーをペルソナに設定してリ サーチする。 • 社内のサポートコストを削減して、継続的な改善や 新機能の開発業務の⽣産性を向上させる。 • 利⽤中のユーザーが「SiTestを使っている⾃分がイ ケてる」と思ってもらえる体験を提供する。 • UIのリニューアルだけでも、ユーザーに新しい価値 を何か提供する。 • 残業しない。
9. λΠτϧςΩετ
10. 「ペーパープロトタイプ」に 重点を置いたら UIリニューアルのプロセスが うまくいった
11. デザイナー「1⼈」の状況でも 上流からデザインドリブンで進めたい。 しかし、オープンな場で情報共有と 議論を進めることで「UIデザイン」を 関係者全員の「⾃分ゴト」にしたい。 【なぜ】
12. デザイナー（私） コンサルタント セールス エンジニア 【誰と】
13. デザイナー（私） コンサルタント セールス エンジニア 【誰と】 SiTestを業務で⽇常的に 使っているヘビーユー ザーでもある
14. 私以外の参加者を 「ユーザー」としても扱い、 彼らを「リサーチ」しながら その場で「リアルタイム」に ペーパープロトタイプを作った。 【どうやって】
15. ! ✓ そのタスクで「本当に達 成したいこと」はなんで すか？ ✓ そのデータから「本当に 知りたいこと」はなんで すか？ ✓ 達成したり知りたいこと がわかると、「どんな気 持ち」になりますか？ ユーザーの求めるゴール を深掘りして、ユーザー の「本質的要求」と最終 的な「ありたい姿・気持 ち」を理解する
16. ! ✓ いつもやっているタス クの⼿順を実際に⾒せ てください。 ✓ くりかえしやっている タスクはありますか？ ✓ 頻 繁 に 往 復 す る 動 線 や、探したりする画⾯ はありますか？ ⽇常的な利⽤状況を把握 して「作業の⾃動化・省 略化」や「動線のショー トカット」を発⾒する
17. ! ✓ どの情報を⾒て「意思 決定∕正誤の判断」を していますか？ ✓ その情報はデータベー スにありますか？ ✓ そのデータを表⽰する のにどのくらい時間が かかりますか？ 実際の利⽤状況とバック エンドの仕様から、画⾯ の表⽰内容や表⽰速度に 対する「効果・効率・満 ⾜度」を確認する
18. ! ✓ 普段、その項⽬をなん て呼んでいますか？ ユーザーの「話す⾔葉」 をボタンラベルやメッ セージの⽂⾔に適⽤する
19. デザインの制作環境とプロセス ペーパー プロトタイプ Sketch Adobe XD Zeplin Storybook Bitbacket （事前に現状のUIをエキス パートレビュー済み） ⾃分・セールス責任者（事実 上のPO）・Web解析コンサ ルタント（本製品を活⽤して コンサルティング、カスタ マーサポートも担当）・エン ジニア（開発と技術サポート を担当）の責任者で、隔⽇2 時間程度、要件と技術的な課 題の確認、ユーザーからの要 望・クレーム、前述のリサー チをインプットしながら、⾃ 分がリアルタイムでペーパー プロトタイプを作成。 ペーパープロトタイ プからAdobe XDで 動作するワイヤーフ レームレベルのプロ トタイプを作成して 関 係 者 に 展 開 、 レ ビューを⾏い合意を 形成。 平⾏してSketchでUI をコンポーネント単 位 で 作 成 し て 、 Symbolのライブラ リを構築。 ラ イ ブ ラ リ か ら Symbolを呼び出し てプロトタイプの画 ⾯を精緻化。 Sketchで作成した画 ⾯とライブラリから 作成したデザインガ イドをZeplinに書き 出して、フロントエ ンドエンジニアに共 有。 画⾯イメージとデザ インガイドからフロ ントエンドエンジニ ア が V u e . j s の Storybookを構築。 画⾯の実装に⼊る前 にコンポーネント単 位で実装後の表⽰と 動作をチェック。 UIが実装された画⾯ をステージングで確 認して、発⾒した課 題をBitBacket上で 管理。
20. After Before
21. After Before 表⽰を⾼速化 意思決定に重要な情 報を表⽰ 主要機能へのショー トカット
22. After Before
23. After Before トーン＆マナーの整 理 データ表⽰の優先順 位を⾒直し 重 要 な 画 ⾯ へ の ショートカット
24. After Before
25. After Before 条件を「⾃由」に組み 合わせたヒートマップ を、並べて分析できると いう「新しい価値」を 提供
26. After Before
27. After Before エディタらしい操作 性 ステータスを視覚的 に明⽰ 横幅サイズの変更を 可能にしてレスポン シブデザインに対応
28. After Before
29. After Before テストの勝敗・成果 がひと⽬で判定でき る プリントアウトして もレポートとして成 ⽴するレイアウト
30. After Before
31. After Before 横に並べて結果をひ と⽬で⽐較 縦 ⽅ 向 の み の ス ク ロールを死守
32. まとめ • 社内のヘビーユーザーをリサーチ対象にし てユーザビリティやUXを検討した結果、 素早く確実に成果が上がった。 • プロトタイプに重点を置いたプロセスは、 合意の形成と⼿戻りの削減に有効だった。 • Sketchのライブラリ機能で構築したデザ インシステムは、変更に強く効率的に作業 できた。 • 事前にいろんなツールを試⽤したことで、 組織やプロジェクトにフィットするソ リューションを選択できた。