Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Keisuke Miyajima

July 18, 2019
Tweet

More Decks by Keisuke Miyajima

Other Decks in Design

Transcript

  1. ⾃⼰紹介 宮島 敬右 Keisuke Miyajima HCD-Net認定 ⼈間中⼼設計スペシャリスト ⼀般社団法⼈エクスペリエンスデザインユニット 監事 過去にパソコンのアプリケーション、スマートフォンのアプリ、家電の組み込

    みまで幅広いUIデザインを⼿がける。 現在はインハウスのUIデザイナーとしてベンチャー企業に勤務し、⾃社製品の Webアプリケーションの全⾯的なUIデザインのリニューアルを担当。 2014年、2015年グッドデザイン賞を受賞。
  2. UXの5段階モデル:社内向けのコミット •⾒た⽬の古臭さを解消する •UIに⼀貫性を持たせて学習コストを削減する 表層 ⾻格 構造 要件 戦略 具象 抽象

    ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定 •現状のUIに慣れているユーザーのメンタルモデルか ら逸脱しない画⾯設計・画⾯遷移にする •過去の機能追加時の不可解な画⾯設計・画⾯遷移の 不整合を改善する •アプリ内の検索機能の強化 •UIをフルリニューアルする •⼤機能は維持する •競合が提供している機能に並ぶ •市場での競争⼒の向上させる Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成
  3. UXの5段階モデル:⾃分の⽬標 •Atomic Designでデザインシステムを構築する •よく併⽤される「Google Analytics」との親和 具象 抽象 •フィードフォワード・フィードバックを徹底する •画⾯の動線のショートカットを設ける •OOUI(名詞→動詞、コレクション→シングル)

    •モードレスなUIを⽬指す •あたりまえ品質までユーザビリティを改善する •価値の低い機能を廃⽌する •サポートコストを削減する •レポートを改善してコンサルティングの質を上げる ➡社内の顕在的・潜在的な課題を解決する Jesse James Garrett ⽒「Elements of User Experience」をもとに再構成 表層 ⾻格 構造 要件 戦略 ビジュアルデザイン レイアウト・ナビゲーション モデリング 要件定義 ⽬的・⽬標設定
  4. ⾃分の⽬標 +α • プロトタイプに重点を置いて、関係者の合意を得な がら進める。 • できる範囲でHCD(⼈間中⼼設計)やUXのプロセ スを取り⼊れる。 • 社内の

    SiTest ユーザーをペルソナに設定してリ サーチする。 • 社内のサポートコストを削減して、継続的な改善や 新機能の開発業務の⽣産性を向上させる。 • 利⽤中のユーザーが「SiTestを使っている⾃分がイ ケてる」と思ってもらえる体験を提供する。 • UIのリニューアルだけでも、ユーザーに新しい価値 を何か提供する。 • 残業しない。
  5. ! ✓ そのタスクで「本当に達 成したいこと」はなんで すか? ✓ そのデータから「本当に 知りたいこと」はなんで すか? ✓

    達成したり知りたいこと がわかると、「どんな気 持ち」になりますか? ユーザーの求めるゴール を深掘りして、ユーザー の「本質的要求」と最終 的な「ありたい姿・気持 ち」を理解する
  6. ! ✓ いつもやっているタス クの⼿順を実際に⾒せ てください。 ✓ くりかえしやっている タスクはありますか? ✓ 頻

    繁 に 往 復 す る 動 線 や、探したりする画⾯ はありますか? ⽇常的な利⽤状況を把握 して「作業の⾃動化・省 略化」や「動線のショー トカット」を発⾒する
  7. ! ✓ どの情報を⾒て「意思 決定∕正誤の判断」を していますか? ✓ その情報はデータベー スにありますか? ✓ そのデータを表⽰する

    のにどのくらい時間が かかりますか? 実際の利⽤状況とバック エンドの仕様から、画⾯ の表⽰内容や表⽰速度に 対する「効果・効率・満 ⾜度」を確認する
  8. デザインの制作環境とプロセス ペーパー プロトタイプ 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上で 管理。