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

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

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

0b8478a97edb5d859bcd4aa57981947f?s=128

Keisuke Miyajima

July 18, 2019
Tweet

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のライブラリ機能で構築したデザ

    インシステムは、変更に強く効率的に作業 できた。 • 事前にいろんなツールを試⽤したことで、 組織やプロジェクトにフィットするソ リューションを選択できた。